[Ingest Node Pipelines] New patterns component for Grok processor

[jloleysens]

Summary

Adds a new component for managing patterns in the grok processor form. This will replace the combobox component that is there currently.

How to test

1. Go to ingest node pipelines in management section
2. Create a new pipeline
3. Add a grok processor
4. Input some patterns
5. Reorder them
6. Save the processor
7. Open the processor and move the patterns, save and check state (try removing all patterns)
8. Save pipeline

Screenshot

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[jloleysens]

@elasticmachine merge upstream

[sebelga]

Let's wait to have #76949 merged and I will review it again. Once it is merged, this is how grok.ts would be consuming it

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { FunctionComponent } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow } from '@elastic/eui';

import {
  FIELD_TYPES,
  UseField,
  UseArray,
  ToggleField,
  fieldValidators,
  FieldConfig,
  ArrayItem,
} from '../../../../../../shared_imports';

import { XJsonEditor, DragAndDropTextList } from '../field_components';

import { FieldNameField } from './common_fields/field_name_field';
import { IgnoreMissingField } from './common_fields/ignore_missing_field';
import { FieldsConfig, to, from } from './shared';

const { isJsonField } = fieldValidators;

const i18nTexts = {
  addPatternLabel: i18n.translate(
    'xpack.ingestPipelines.pipelineEditor.grokForm.patternsAddPatternLabel',
    { defaultMessage: 'Add pattern' }
  ),
};

const fieldsConfig: FieldsConfig = {
  /* Optional field configs */
  pattern_definitions: {
    type: FIELD_TYPES.TEXT,
    deserializer: to.jsonString,
    serializer: from.optionalJson,
    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.grokForm.patternDefinitionsLabel', {
      defaultMessage: 'Pattern definitions (optional)',
    }),
    helpText: i18n.translate(
      'xpack.ingestPipelines.pipelineEditor.grokForm.patternDefinitionsHelpText',
      {
        defaultMessage:
          'A map of pattern-name and pattern tuples defining custom patterns. Patterns matching existing names will override the pre-existing definition.',
      }
    ),
    validations: [
      {
        validator: isJsonField(
          i18n.translate(
            'xpack.ingestPipelines.pipelineEditor.grokForm.patternsDefinitionsInvalidJSONError',
            { defaultMessage: 'Invalid JSON' }
          ),
          {
            allowEmptyString: true,
          }
        ),
      },
    ],
  },

  trace_match: {
    type: FIELD_TYPES.TOGGLE,
    defaultValue: false,
    deserializer: to.booleanOrUndef,
    serializer: from.defaultBoolToUndef(false),
    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.grokForm.traceMatchFieldLabel', {
      defaultMessage: 'Trace match',
    }),
    helpText: i18n.translate(
      'xpack.ingestPipelines.pipelineEditor.grokForm.traceMatchFieldHelpText',
      {
        defaultMessage: 'Add metadata about the matching expression to the document.',
      }
    ),
  },
};

const patternsValidations: FieldConfig<any, ArrayItem[]>['validations'] = [
  {
    validator: ({ value }) => {
      if (value.length === 0) {
        return {
          message: i18n.translate(
            'xpack.ingestPipelines.pipelineEditor.grokForm.patternsValueRequiredError',
            { defaultMessage: 'A value is required.' }
          ),
        };
      }
    },
  },
];

export const Grok: FunctionComponent = () => {
  return (
    <>
      <FieldNameField
        helpText={i18n.translate(
          'xpack.ingestPipelines.pipelineEditor.grokForm.fieldNameHelpText',
          { defaultMessage: 'Field to search for matches.' }
        )}
      />

      <UseArray path="fields.patterns" validations={patternsValidations}>
        {({ error, items, addItem, removeItem, moveItem }) => {
          return (
            <EuiFormRow
              label={i18n.translate(
                'xpack.ingestPipelines.pipelineEditor.grokForm.patternsFieldLabel',
                {
                  defaultMessage: 'Patterns',
                }
              )}
              helpText={i18n.translate(
                'xpack.ingestPipelines.pipelineEditor.grokForm.patternsHelpText',
                {
                  defaultMessage:
                    'Grok expressions used to match and extract named capture groups. Uses the first matching expression.',
                }
              )}
              isInvalid={typeof error === 'string'}
              error={error}
              fullWidth
            >
              <DragAndDropTextList
                value={items}
                onMove={moveItem}
                onAdd={addItem}
                onRemove={removeItem}
                addLabel={i18nTexts.addPatternLabel}
              />
            </EuiFormRow>
          );
        }}
      </UseArray>

      <UseField
        component={XJsonEditor}
        config={fieldsConfig.pattern_definitions}
        componentProps={{
          editorProps: {
            height: 200,
            'aria-label': i18n.translate(
              'xpack.ingestPipelines.pipelineEditor.grokForm.patternDefinitionsAriaLabel',
              {
                defaultMessage: 'Pattern definitions editor',
              }
            ),
          },
        }}
        path="fields.pattern_definitions"
      />

      <UseField
        component={ToggleField}
        config={fieldsConfig.trace_match}
        path="fields.trace_match"
      />

      <IgnoreMissingField />
    </>
  );
};

[sebelga]

Here you can simply use

onChange={patternField.onChange}

[sebelga]

As you are manually adding the EuiFieldText below with the props, you don't need to pass euiFieldProps props here.

[sebelga]

Of course, if you decide to render the validation below the field and use the TextField component then you will have to pass the props here 😊

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[sebelga]

Awesome work @jloleysens ! Tested locally and works as expected 👍

Just a small note on the validation:

• I think it would be good to display a text error below the field. Just having a red border might not be enough for color blind people.
• I wonder if we shouldn't remove the "minus" button when there is only 1 item left. As one pattern is required. So allowing the user to not have any does not make sense. WDYT?

[sebelga]

nit: it'd be better to deconstruct subscribe and only have that dependency. But at the same time, this will have to be refactored to not use subscribe at some point:

const { isValid, validate } = form;

useEffect(() => {
  onFormUpdate({ isValid, validate });
}, [isValid, validate, onFormUpdate]);

[sebelga]

nit: just so we don't affect other test it'd be better to have this inside a

beforeAll
(() => {
  (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
});

and then have this

afterAll(() => {
  (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
}):

just to clean up after ourselves 😊

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@sebelga Thanks for the review!

I think it would be good to display a text error below the field. Just having a red border might not be enough for color blind people.

This is a great point. I did not want to add the error text because it changes the vertical height of each of the text fields. I worked around this by adding an error icon inside of the text field on a tooltip (screenshot added in PR description)

I wonder if we shouldn't remove the "minus" button when there is only 1 item left. As one pattern is required. So allowing the user to not have any does not make sense. WDYT?

👍

Will merge this once CI is green, but feel free to comment again.

[sebelga]

Cool! I didn't know about the "empty" icon 👍

[sebelga]

The error icon in the field looks great! 👍 Thanks for adding it.

[mdefazio]

@jloleysens this all looks really nice. I have some thoughts on the layout but all quite minor.

• I think we can remove a lot of the borders and dividers. We can probably decrease the amount of space in between these a bit as well.
• By adding a euiColorLightShade background for the whole component instead of a border does enough to define it as its own section I think.
• Having the dragging highlight the whole block feels a bit odd, but I know we're working through this component a bit more within EUI. So might be best to keep this as is for the time-being.
• I also rearranged the copy a bit. I think the help text is necessary enough to put ahead of the component. Maybe the 2nd line then reads Add grok expressions to match and extract named capture groups. The first matching expression will be used.

SCSS looked good to me! But you might not need some of these styles with the above suggestions.

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@mdefazio Thanks for the design review! I have implemented your feedback. Great suggestion regarding removal of dividers, I think the light grey background looks great.

Would you mind taking another look?

Cheers!

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[mdefazio]

Changes look good! Thank you!

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: de6f2d6

Metrics [docs]

@kbn/optimizer bundle module count

id	value	diff	baseline
ingestPipelines	470	+19	451

async chunks size

id	value	diff	baseline
ingestPipelines	785.6KB	+16.2KB	769.3KB

page load bundle size

id	value	diff	baseline
ingestPipelines	41.0KB	+162.0B	40.9KB

History

• 💚 Build #76145 succeeded 9e72584
• 💚 Build #76111 succeeded e856141
• 💚 Build #75783 succeeded eb632de
• 💛 Build #75484 was flaky c4235f9
• 💚 Build #75460 succeeded f5c707b

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream