[7.x] [Ingest Node Pipelines] Pipeline Processors Editor (#66021)

x-pack/package.json

@@ -332,6 +332,7 @@
     "react-syntax-highlighter": "^5.7.0",
     "react-tiny-virtual-list": "^2.2.0",
     "react-use": "^13.27.0",
+    "react-virtualized": "^9.21.2",
     "react-vis": "^1.8.1",
     "react-visibility-sensor": "^5.1.1",
     "recompose": "^0.26.0",

x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx

@@ -68,21 +68,6 @@ describe('<PipelinesCreate />', () => {
       expect(exists('versionField')).toBe(true);
     });
 
-    test('should toggle the on-failure processors editor', async () => {
-      const { actions, component, exists } = testBed;
-
-      // On-failure editor should be hidden by default
-      expect(exists('onFailureEditor')).toBe(false);
-
-      await act(async () => {
-        actions.toggleOnFailureSwitch();
-        await nextTick();
-        component.update();
-      });
-
-      expect(exists('onFailureEditor')).toBe(true);
-    });
-
     test('should show the request flyout', async () => {
       const { actions, component, find, exists } = testBed;
 

x-pack/plugins/ingest_pipelines/common/types.ts

@@ -4,10 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-interface Processor {
-  [key: string]: {
-    [key: string]: unknown;
-  };
+export interface ESProcessorConfig {
+  on_failure?: Processor[];
+  ignore_failure?: boolean;
+  if?: string;
+  tag?: string;
+  [key: string]: any;
+}
+
+export interface Processor {
+  [typeName: string]: ESProcessorConfig;
 }
 
 export interface Pipeline {

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
@@ -16,6 +16,11 @@ import { PipelineTestFlyout } from './pipeline_test_flyout';
 import { PipelineFormFields } from './pipeline_form_fields';
 import { PipelineFormError } from './pipeline_form_error';
 import { pipelineFormSchema } from './schema';
+import {
+  OnUpdateHandlerArg,
+  OnUpdateHandler,
+  SerializeResult,
+} from '../pipeline_processors_editor';
 
 export interface PipelineFormProps {
   onSave: (pipeline: Pipeline) => void;
@@ -30,8 +35,8 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
   defaultValue = {
     name: '',
     description: '',
-    processors: '',
-    on_failure: '',
+    processors: [],
+    on_failure: [],
     version: '',
   },
   onSave,
@@ -44,10 +49,25 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
   const [isTestingPipeline, setIsTestingPipeline] = useState<boolean>(false);
 
+  const processorStateRef = useRef<OnUpdateHandlerArg>();
+
   const handleSave: FormConfig['onSubmit'] = async (formData, isValid) => {
-    if (isValid) {
-      onSave(formData as Pipeline);
+    let override: SerializeResult | undefined;
+
+    if (!isValid) {
+      return;
+    }
+
+    if (processorStateRef.current) {
+      const processorsState = processorStateRef.current;
+      if (await processorsState.validate()) {
+        override = processorsState.getData();
+      } else {
+        return;
+      }
     }
+
+    onSave({ ...formData, ...(override || {}) } as Pipeline);
   };
 
   const handleTestPipelineClick = () => {
@@ -60,6 +80,10 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
     onSubmit: handleSave,
   });
 
+  const onEditorFlyoutOpen = useCallback(() => {
+    setIsRequestVisible(false);
+  }, [setIsRequestVisible]);
+
   const saveButtonLabel = isSaving ? (
     <FormattedMessage
       id="xpack.ingestPipelines.form.savingButtonLabel"
@@ -77,6 +101,11 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
     />
   );
 
+  const onProcessorsChangeHandler = useCallback<OnUpdateHandler>(
+    (arg) => (processorStateRef.current = arg),
+    []
+  );
+
   return (
     <>
       <Form
@@ -90,10 +119,13 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
         {/* All form fields */}
         <PipelineFormFields
+          onEditorFlyoutOpen={onEditorFlyoutOpen}
+          initialProcessors={defaultValue.processors}
+          initialOnFailureProcessors={defaultValue.on_failure}
+          onProcessorsUpdate={onProcessorsChangeHandler}
           hasVersion={Boolean(defaultValue.version)}
           isTestButtonDisabled={isTestingPipeline || form.isValid === false}
           onTestPipelineClick={handleTestPipelineClick}
-          hasOnFailure={Boolean(defaultValue.on_failure)}
           isEditing={isEditing}
         />
 
@@ -147,13 +179,19 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
         {/* ES request flyout */}
         {isRequestVisible ? (
           <PipelineRequestFlyout
+            readProcessors={() =>
+              processorStateRef.current?.getData() || { processors: [], on_failure: [] }
+            }
             closeFlyout={() => setIsRequestVisible((prevIsRequestVisible) => !prevIsRequestVisible)}
           />
         ) : null}
 
         {/* Test pipeline flyout */}
         {isTestingPipeline ? (
           <PipelineTestFlyout
+            readProcessors={() =>
+              processorStateRef.current?.getData() || { processors: [], on_failure: [] }
+            }
             closeFlyout={() => {
               setIsTestingPipeline((prevIsTestingPipeline) => !prevIsTestingPipeline);
             }}

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx

@@ -6,39 +6,41 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiSpacer, EuiSwitch, EuiLink } from '@elastic/eui';
+import { EuiSpacer, EuiSwitch } from '@elastic/eui';
 
-import {
-  getUseField,
-  getFormRow,
-  Field,
-  JsonEditorField,
-  useKibana,
-} from '../../../shared_imports';
+import { Processor } from '../../../../common/types';
+import { FormDataProvider } from '../../../shared_imports';
+import { PipelineProcessorsEditor, OnUpdateHandler } from '../pipeline_processors_editor';
+
+import { getUseField, getFormRow, Field, useKibana } from '../../../shared_imports';
 
 interface Props {
+  initialProcessors: Processor[];
+  initialOnFailureProcessors?: Processor[];
+  onProcessorsUpdate: OnUpdateHandler;
   hasVersion: boolean;
-  hasOnFailure: boolean;
   isTestButtonDisabled: boolean;
   onTestPipelineClick: () => void;
+  onEditorFlyoutOpen: () => void;
   isEditing?: boolean;
 }
 
 const UseField = getUseField({ component: Field });
 const FormRow = getFormRow({ titleTag: 'h3' });
 
 export const PipelineFormFields: React.FunctionComponent<Props> = ({
+  initialProcessors,
+  initialOnFailureProcessors,
+  onProcessorsUpdate,
   isEditing,
   hasVersion,
-  hasOnFailure,
   isTestButtonDisabled,
   onTestPipelineClick,
+  onEditorFlyoutOpen,
 }) => {
   const { services } = useKibana();
 
   const [isVersionVisible, setIsVersionVisible] = useState<boolean>(hasVersion);
-  const [isOnFailureEditorVisible, setIsOnFailureEditorVisible] = useState<boolean>(hasOnFailure);
 
   return (
     <>
@@ -110,127 +112,32 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
         />
       </FormRow>
 
-      {/* Processors field */}
-      <FormRow
-        title={
-          <FormattedMessage
-            id="xpack.ingestPipelines.form.processorsFieldTitle"
-            defaultMessage="Processors"
-          />
-        }
-        description={
-          <>
-            <FormattedMessage
-              id="xpack.ingestPipelines.form.processorsFieldDescription"
-              defaultMessage="The processors to use to transform the documents before indexing. {learnMoreLink}"
-              values={{
-                learnMoreLink: (
-                  <EuiLink
-                    href={services.documentation.getProcessorsUrl()}
-                    target="_blank"
-                    external
-                  >
-                    {i18n.translate('xpack.ingestPipelines.form.processorsDocumentionLink', {
-                      defaultMessage: 'Learn more',
-                    })}
-                  </EuiLink>
-                ),
-              }}
-            />
-
-            <EuiSpacer />
+      {/* Pipeline Processors Editor */}
+      <FormDataProvider pathsToWatch={['processors', 'on_failure']}>
+        {({ processors, on_failure: onFailure }) => {
+          const processorProp =
+            typeof processors === 'string' && processors
+              ? JSON.parse(processors)
+              : initialProcessors ?? [];
 
-            <EuiButton
-              size="s"
-              onClick={onTestPipelineClick}
-              disabled={isTestButtonDisabled}
-              data-test-subj="testPipelineButton"
-            >
-              <FormattedMessage
-                id="xpack.ingestPipelines.form.testPipelineButtonLabel"
-                defaultMessage="Test pipeline"
-              />
-            </EuiButton>
-          </>
-        }
-      >
-        <UseField
-          path="processors"
-          component={JsonEditorField}
-          componentProps={{
-            euiCodeEditorProps: {
-              'data-test-subj': 'processorsEditor',
-              height: '300px',
-              'aria-label': i18n.translate('xpack.ingestPipelines.form.processorsFieldAriaLabel', {
-                defaultMessage: 'Processors JSON editor',
-              }),
-            },
-          }}
-        />
-      </FormRow>
+          const onFailureProp =
+            typeof onFailure === 'string' && onFailure
+              ? JSON.parse(onFailure)
+              : initialOnFailureProcessors ?? [];
 
-      {/* On-failure field */}
-      <FormRow
-        title={
-          <FormattedMessage
-            id="xpack.ingestPipelines.form.onFailureTitle"
-            defaultMessage="Failure processors"
-          />
-        }
-        description={
-          <>
-            <FormattedMessage
-              id="xpack.ingestPipelines.form.onFailureDescription"
-              defaultMessage="The alternate processors to execute after a processor fails. {learnMoreLink}"
-              values={{
-                learnMoreLink: (
-                  <EuiLink
-                    href={services.documentation.getHandlingFailureUrl()}
-                    target="_blank"
-                    external
-                  >
-                    {i18n.translate('xpack.ingestPipelines.form.onFailureDocumentionLink', {
-                      defaultMessage: 'Learn more',
-                    })}
-                  </EuiLink>
-                ),
-              }}
-            />
-            <EuiSpacer size="m" />
-            <EuiSwitch
-              label={
-                <FormattedMessage
-                  id="xpack.ingestPipelines.form.onFailureToggleDescription"
-                  defaultMessage="Add failure processors"
-                />
-              }
-              checked={isOnFailureEditorVisible}
-              onChange={(e) => setIsOnFailureEditorVisible(e.target.checked)}
-              data-test-subj="onFailureToggle"
+          return (
+            <PipelineProcessorsEditor
+              onFlyoutOpen={onEditorFlyoutOpen}
+              learnMoreAboutProcessorsUrl={services.documentation.getProcessorsUrl()}
+              learnMoreAboutOnFailureProcessorsUrl={services.documentation.getHandlingFailureUrl()}
+              isTestButtonDisabled={isTestButtonDisabled}
+              onTestPipelineClick={onTestPipelineClick}
+              onUpdate={onProcessorsUpdate}
+              value={{ processors: processorProp, onFailure: onFailureProp }}
             />
-          </>
-        }
-      >
-        {isOnFailureEditorVisible ? (
-          <UseField
-            path="on_failure"
-            component={JsonEditorField}
-            componentProps={{
-              euiCodeEditorProps: {
-                'data-test-subj': 'onFailureEditor',
-                height: '300px',
-                'aria-label': i18n.translate('xpack.ingestPipelines.form.onFailureFieldAriaLabel', {
-                  defaultMessage: 'Failure processors JSON editor',
-                }),
-              },
-            }}
-          />
-        ) : (
-          // <FormRow/> requires children or a field
-          // For now, we return an empty <div> if the editor is not visible
-          <div />
-        )}
-      </FormRow>
+          );
+        }}
+      </FormDataProvider>
     </>
   );
 };