[Ingest Pipelines] Processor forms for processors A-D

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx

@@ -7,6 +7,17 @@
 import { i18n } from '@kbn/i18n';
 import { FunctionComponent } from 'react';
 
+import { Append } from './processors/append';
+import { Bytes } from './processors/bytes';
+import { Circle } from './processors/circle';
+import { Convert } from './processors/convert';
+import { CSV } from './processors/csv';
+import { DateProcessor } from './processors/date';
+import { DateIndexName } from './processors/date_index_name';
+import { Dissect } from './processors/dissect';
+import { DotExpander } from './processors/dot_expander';
+import { Drop } from './processors/drop';
+
 // import { SetProcessor } from './processors/set';
 // import { Gsub } from './processors/gsub';
 
@@ -21,70 +32,70 @@ interface FieldsFormDescriptor {
 
 const mapProcessorTypeToFormDescriptor: Record<string, FieldsFormDescriptor> = {
   append: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Append,
     docLinkPath: '/append-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.append', {
       defaultMessage: 'Append',
     }),
   },
   bytes: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Bytes,
     docLinkPath: '/bytes-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.bytes', {
       defaultMessage: 'Bytes',
     }),
   },
   circle: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Circle,
     docLinkPath: '/ingest-circle-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.circle', {
       defaultMessage: 'Circle',
     }),
   },
   convert: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Convert,
     docLinkPath: '/convert-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.convert', {
       defaultMessage: 'Convert',
     }),
   },
   csv: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: CSV,
     docLinkPath: '/csv-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.csv', {
       defaultMessage: 'CSV',
     }),
   },
   date: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: DateProcessor,
     docLinkPath: '/date-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.date', {
       defaultMessage: 'Date',
     }),
   },
   date_index_name: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: DateIndexName,
     docLinkPath: '/date-index-name-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.dateIndexName', {
       defaultMessage: 'Date Index Name',
     }),
   },
   dissect: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Dissect,
     docLinkPath: '/dissect-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.dissect', {
       defaultMessage: 'Dissect',
     }),
   },
   dot_expander: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: DotExpander,
     docLinkPath: '/dot-expand-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.dotExpander', {
       defaultMessage: 'Dot Expander',
     }),
   },
   drop: {
-    FieldsComponent: undefined, // TODO: Implement
+    FieldsComponent: Drop,
     docLinkPath: '/drop-processor.html',
     label: i18n.translate('xpack.ingestPipelines.processors.label.drop', {
       defaultMessage: 'Drop',

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx

@@ -40,18 +40,18 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = ({
   const handleSubmit = useCallback(
     async (data: FormData, isValid: boolean) => {
       if (isValid) {
-        const { type, customOptions, ...options } = data;
+        const { type, customOptions, fields } = data;
         onSubmit({
           type,
-          options: customOptions ? customOptions : options,
+          options: customOptions ? customOptions : fields,
         });
       }
     },
     [onSubmit]
   );
 
   const { form } = useForm({
-    defaultValue: processor?.options,
+    defaultValue: { fields: processor?.options },
     onSubmit: handleSubmit,
   });
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports';
+
+import { FieldsConfig } from './shared';
+import { FieldNameField } from './common_fields/field_name_field';
+
+const { emptyField } = fieldValidators;
+
+const fieldsConfig: FieldsConfig = {
+  value: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueFieldLabel', {
+      defaultMessage: 'Value',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueRequiredError', {
+            defaultMessage: 'A value to set is required.',
+          })
+        ),
+      },
+    ],
+  },
+};
+
+export const Append: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField />
+
+      <UseField config={fieldsConfig.value} component={Field} path="fields.value" />
+    </>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports';
+
+import { FieldsConfig } from './shared';
+import { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { FieldNameField } from './common_fields/field_name_field';
+
+const fieldsConfig: FieldsConfig = {
+  target_field: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldLabel', {
+      defaultMessage: 'Target field',
+    }),
+  },
+};
+
+export const Bytes: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField />
+
+      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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 {
+  FIELD_TYPES,
+  fieldValidators,
+  UseField,
+  Field,
+  RadioGroupField,
+  NumericField,
+} from '../../../../../../shared_imports';
+
+import { FieldsConfig } from './shared';
+import { IgnoreMissingField } from './common_fields/ignore_missing_field';
+import { FieldNameField } from './common_fields/field_name_field';
+
+const { emptyField } = fieldValidators;
+
+const fieldsConfig: FieldsConfig = {
+  target_field: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldLabel', {
+      defaultMessage: 'Target field',
+    }),
+    helpText: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldHelpText',
+      {
+        defaultMessage: 'By default field is updated in-place.',
+      }
+    ),
+  },
+  ignore_missing: {
+    type: FIELD_TYPES.TOGGLE,
+    defaultValue: false,
+    deserializer: (v) => (typeof v === 'boolean' ? v : undefined),
+    label: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.circleForm.ignoreMissingFieldLabel',
+      {
+        defaultMessage: 'Ignore missing',
+      }
+    ),
+  },
+  error_distance: {
+    type: FIELD_TYPES.NUMBER,
+    deserializer: (v) => (typeof v === 'number' && !isNaN(v) ? v : 1.0),
+    serializer: Number,
+    label: i18n.translate(
+      'xpack.ingestPipelines.pipelineEditor.circleForm.errorDistanceFieldLabel',
+      {
+        defaultMessage: 'Error distance',
+      }
+    ),
+    validations: [
+      {
+        validator: ({ value }) => {
+          return isNaN(Number(value))
+            ? {
+                message: i18n.translate(
+                  'xpack.ingestPipelines.pipelineEditor.circleForm.errorDistanceError',
+                  {
+                    defaultMessage: 'An error distance value is required.',
+                  }
+                ),
+              }
+            : undefined;
+        },
+      },
+    ],
+  },
+  shape_type: {
+    type: FIELD_TYPES.RADIO_GROUP,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeFieldLabel', {
+      defaultMessage: 'Shape type',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeRequiredError', {
+            defaultMessage: 'A shape type value is required.',
+          })
+        ),
+      },
+    ],
+  },
+};
+
+export const Circle: FunctionComponent = () => {
+  return (
+    <>
+      <FieldNameField />
+
+      <UseField
+        componentProps={{
+          euiFieldProps: {
+            options: [
+              {
+                id: 'shape',
+                label: i18n.translate(
+                  'xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeShape',
+                  { defaultMessage: 'Shape' }
+                ),
+              },
+              {
+                id: 'geo_shape',
+                label: i18n.translate(
+                  'xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeGeoShape',
+                  { defaultMessage: 'Geo-shape' }
+                ),
+              },
+            ],
+          },
+        }}
+        config={fieldsConfig.shape_type}
+        component={RadioGroupField}
+        path="fields.shape_type"
+      />
+
+      <UseField
+        config={fieldsConfig.error_distance}
+        component={NumericField}
+        path="fields.error_distance"
+      />
+
+      <UseField config={fieldsConfig.target_field} component={Field} path="fields.target_field" />
+
+      <IgnoreMissingField />
+    </>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx

@@ -17,6 +17,7 @@ import {
 
 const ignoreFailureConfig: FieldConfig = {
   defaultValue: false,
+  serializer: (v) => (v === false ? undefined : v),
   label: i18n.translate(
     'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel',
     {
@@ -27,15 +28,13 @@ const ignoreFailureConfig: FieldConfig = {
 };
 
 const ifConfig: FieldConfig = {
-  defaultValue: undefined,
   label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel', {
     defaultMessage: 'Condition (optional)',
   }),
   type: FIELD_TYPES.TEXT,
 };
 
 const tagConfig: FieldConfig = {
-  defaultValue: undefined,
   label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldLabel', {
     defaultMessage: 'Tag (optional)',
   }),
@@ -45,11 +44,11 @@ const tagConfig: FieldConfig = {
 export const CommonProcessorFields: FunctionComponent = () => {
   return (
     <>
-      <UseField config={ignoreFailureConfig} component={ToggleField} path={'ignore_failure'} />
+      <UseField config={ignoreFailureConfig} component={ToggleField} path="fields.ignore_failure" />
 
-      <UseField config={ifConfig} component={Field} path={'if'} />
+      <UseField config={ifConfig} component={Field} path="fields.if" />
 
-      <UseField config={tagConfig} component={Field} path={'tag'} />
+      <UseField config={tagConfig} component={Field} path="fields.tag" />
     </>
   );
 };