Handle Custom processor with the same formating

elastic · Nov 21, 2024 · a1af452 · a1af452
1 parent 01b97a9
commit a1af452
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 85 deletions.
diff --git a/...pplication/components/pipeline_editor/components/processor_form/field_components/index.ts b/...pplication/components/pipeline_editor/components/processor_form/field_components/index.ts
@@ -9,4 +9,3 @@ export { DragAndDropTextList } from './drag_and_drop_text_list';
 export { XJsonEditor } from './xjson_editor';
 export { TextEditor } from './text_editor';
 export { InputList } from './input_list';
-export { XJsonAndJsonEditor } from './xjson_and_json_editor';
diff --git a/...ents/pipeline_editor/components/processor_form/field_components/xjson_and_json_editor.tsx b/...ents/pipeline_editor/components/processor_form/field_components/xjson_and_json_editor.tsx
diff --git a/...on/components/pipeline_editor/components/processor_form/field_components/xjson_editor.tsx b/...on/components/pipeline_editor/components/processor_form/field_components/xjson_editor.tsx
@@ -7,9 +7,7 @@
 
 import { XJsonLang } from '@kbn/monaco';
 import React, { FunctionComponent, useCallback } from 'react';
-import { FieldHook, XJson } from '../../../../../../shared_imports';
-
-const { useXJsonMode } = XJson;
+import { FieldHook } from '../../../../../../shared_imports';
 
 import { TextEditor } from './text_editor';
 
@@ -25,20 +23,17 @@ const defaultEditorOptions = {
 
 export const XJsonEditor: FunctionComponent<Props> = ({ field, editorProps }) => {
   const { value, setValue } = field;
-  const { xJson, setXJson, convertToJson } = useXJsonMode(value);
-
   const onChange = useCallback(
     (s: any) => {
-      setXJson(s);
-      setValue(convertToJson(s));
+      setValue(s);
     },
-    [setValue, setXJson, convertToJson]
+    [setValue]
   );
   return (
     <TextEditor
       field={field}
       editorProps={{
-        value: xJson,
+        value,
         languageId: XJsonLang.ID,
         options: defaultEditorOptions,
         onChange,

diff --git a/...ication/components/pipeline_editor/components/processor_form/processor_form.container.tsx b/...ication/components/pipeline_editor/components/processor_form/processor_form.container.tsx
@@ -79,7 +79,7 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
         type: formState.type,
         fields: formState.customOptions
           ? {
-              ...formState.customOptions,
+              customOptions: formState.customOptions,
             }
           : {
               ...formState.fields,

diff --git a/...ic/application/components/pipeline_editor/components/processor_form/processors/custom.tsx b/...ic/application/components/pipeline_editor/components/processor_form/processors/custom.tsx
@@ -15,30 +15,20 @@ import {
   UseField,
 } from '../../../../../../shared_imports';
 
-const { emptyField, isJsonField } = fieldValidators;
+const { emptyField } = fieldValidators;
 
 import { XJsonEditor } from '../field_components';
 import { Fields } from '../processor_form.container';
-import { EDITOR_PX_HEIGHT } from './shared';
+import { EDITOR_PX_HEIGHT, from, isXJsonField, to } from './shared';
 
 const customConfig: FieldConfig<any> = {
   type: FIELD_TYPES.TEXT,
   label: i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel', {
     defaultMessage: 'Configuration',
   }),
-  serializer: (value: string) => {
-    try {
-      return JSON.parse(value);
-    } catch (error) {
-      // swallow error and return non-parsed value;
-      return value;
-    }
-  },
+  serializer: from.optionalXJson,
   deserializer: (value: any) => {
-    if (value === '') {
-      return '{\n\n}';
-    }
-    return JSON.stringify(value, null, 2);
+    return to.xJsonString(value.customOptions ? value.customOptions : value);
   },
   validations: [
     {
@@ -52,7 +42,7 @@ const customConfig: FieldConfig<any> = {
       ),
     },
     {
-      validator: isJsonField(
+      validator: isXJsonField(
         i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.invalidJsonError', {
           defaultMessage: 'The input is not valid.',
         })

diff --git a/...c/application/components/pipeline_editor/components/processor_form/processors/foreach.tsx b/...c/application/components/pipeline_editor/components/processor_form/processors/foreach.tsx
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 
 import { FIELD_TYPES, fieldValidators, UseField } from '../../../../../../shared_imports';
 
-import { XJsonAndJsonEditor } from '../field_components';
+import { XJsonEditor } from '../field_components';
 
 import { FieldNameField } from './common_fields/field_name_field';
 import { FieldsConfig, to, EDITOR_PX_HEIGHT, from, isXJsonField } from './shared';
@@ -65,7 +65,7 @@ export const Foreach: FunctionComponent = () => {
       />
 
       <UseField
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         componentProps={{
           editorProps: {
             'data-test-subj': 'processorField',

diff --git a/...blic/application/components/pipeline_editor/components/processor_form/processors/grok.tsx b/...blic/application/components/pipeline_editor/components/processor_form/processors/grok.tsx
@@ -18,7 +18,7 @@ import {
   ArrayItem,
 } from '../../../../../../shared_imports';
 
-import { DragAndDropTextList, XJsonAndJsonEditor } from '../field_components';
+import { DragAndDropTextList, XJsonEditor } from '../field_components';
 
 import { FieldNameField } from './common_fields/field_name_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
@@ -149,7 +149,7 @@ export const Grok: FunctionComponent = () => {
       </UseArray>
 
       <UseField
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         config={fieldsConfig.pattern_definitions}
         componentProps={{
           editorProps: {

diff --git a/...application/components/pipeline_editor/components/processor_form/processors/inference.tsx b/...application/components/pipeline_editor/components/processor_form/processors/inference.tsx
@@ -21,7 +21,7 @@ import {
 import { TargetField } from './common_fields/target_field';
 
 import { FieldsConfig, to, from, EDITOR_PX_HEIGHT, isXJsonField } from './shared';
-import { XJsonAndJsonEditor } from '../field_components';
+import { XJsonEditor } from '../field_components';
 
 const { emptyField } = fieldValidators;
 
@@ -159,7 +159,7 @@ export const Inference: FunctionComponent = () => {
 
       <UseField
         config={fieldsConfig.field_map}
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         componentProps={{
           editorProps: {
             'data-test-subj': 'fieldMap',
@@ -175,7 +175,7 @@ export const Inference: FunctionComponent = () => {
           ...fieldsConfig.inference_config,
           helpText: getInferenceConfigHelpText(documentationDocsLink),
         }}
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         componentProps={{
           editorProps: {
             'data-test-subj': 'inferenceConfig',

diff --git a/...ic/application/components/pipeline_editor/components/processor_form/processors/redact.tsx b/...ic/application/components/pipeline_editor/components/processor_form/processors/redact.tsx
@@ -19,7 +19,7 @@ import {
   ValidationFunc,
 } from '../../../../../../shared_imports';
 
-import { InputList, XJsonAndJsonEditor } from '../field_components';
+import { InputList, XJsonEditor } from '../field_components';
 
 import { FieldNameField } from './common_fields/field_name_field';
 import { IgnoreMissingField } from './common_fields/ignore_missing_field';
@@ -165,7 +165,7 @@ export const Redact: FunctionComponent = () => {
       </UseArray>
 
       <UseField
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         config={fieldsConfig.pattern_definitions}
         componentProps={{
           editorProps: {

diff --git a/...ic/application/components/pipeline_editor/components/processor_form/processors/script.tsx b/...ic/application/components/pipeline_editor/components/processor_form/processors/script.tsx
@@ -19,7 +19,7 @@ import {
   useFormData,
 } from '../../../../../../shared_imports';
 
-import { XJsonAndJsonEditor, TextEditor } from '../field_components';
+import { XJsonEditor, TextEditor } from '../field_components';
 
 import {
   FieldsConfig,
@@ -196,7 +196,7 @@ export const Script: FormFieldsComponent = ({ initialFieldValues }) => {
       )}
 
       <UseField
-        component={XJsonAndJsonEditor}
+        component={XJsonEditor}
         componentProps={{
           editorProps: {
             'data-test-subj': 'paramsField',

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/utils.test.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/utils.test.ts
@@ -76,6 +76,7 @@ describe('convert processors to json', () => {
       processor: '{"1": """aaa"bbb"""}',
       inference_config: '{"1": """aaa"bbb"""}',
       field_map: '{"1": """aaa"bbb"""}',
+      customOptions: '{"customProcessor": """aaa"bbb"""}',
     };
 
     expect(convertProccesorsToJson(obj)).toEqual({
@@ -90,6 +91,8 @@ describe('convert processors to json', () => {
       inference_config: { 1: "aaa\"bbb" },
       // eslint-disable-next-line prettier/prettier
       field_map: { 1: "aaa\"bbb" },
+      // eslint-disable-next-line prettier/prettier
+      customProcessor: "aaa\"bbb"
     });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/utils.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/utils.ts
@@ -158,9 +158,15 @@ const fieldToConvertToJson = [
 
 export const convertProccesorsToJson = (obj: { [key: string]: any }): { [key: string]: any } => {
   return Object.fromEntries(
-    Object.entries(obj).map(([key, value]) => [
-      key,
-      fieldToConvertToJson.includes(key) ? convertProcessorValueToJson(value) : value,
-    ])
+    Object.entries(obj).flatMap(([key, value]) => {
+      if (key === 'customOptions') {
+        const convertedValue = convertProcessorValueToJson(value);
+        return Object.entries(convertedValue);
+      } else if (fieldToConvertToJson.includes(key)) {
+        return [[key, convertProcessorValueToJson(value)]];
+      } else {
+        return [[key, value]];
+      }
+    })
   );
 };