From e120f03b00142201dc87d37d63f0cdf1f4d0fc92 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 20 Jul 2020 18:07:51 +0200 Subject: [PATCH 01/12] First few processors of the first batch - Also refactored options to live in scoped objects to avoid overriding type (important fix!) - Have not polished copy or form layout. --- .../map_processor_type_to_form.tsx | 22 ++- .../processor_settings_form.container.tsx | 6 +- .../processors/append.tsx | 61 ++++++ .../processors/bytes.tsx | 70 +++++++ .../processors/circle.tsx | 152 +++++++++++++++ .../common_fields/common_processor_fields.tsx | 8 +- .../processors/convert.tsx | 147 +++++++++++++++ .../processors/csv.tsx | 174 ++++++++++++++++++ .../processors/date.tsx | 128 +++++++++++++ .../processors/shared.ts | 12 ++ .../ingest_pipelines/public/shared_imports.ts | 3 + 11 files changed, 767 insertions(+), 16 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx index 5993d7fb3f87a2..961eb6fe6640ec 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx @@ -7,7 +7,13 @@ import { i18n } from '@kbn/i18n'; import { FunctionComponent } from 'react'; -// import { SetProcessor } from './processors/set'; +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 { SetProcessor } from './processors/set'; // import { Gsub } from './processors/gsub'; interface FieldsFormDescriptor { @@ -21,42 +27,42 @@ interface FieldsFormDescriptor { const mapProcessorTypeToFormDescriptor: Record = { 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', @@ -247,7 +253,7 @@ const mapProcessorTypeToFormDescriptor: Record = { // --- The below processor descriptors have components implemented --- set: { - FieldsComponent: undefined, + FieldsComponent: SetProcessor, docLinkPath: '/set-processor.html', label: i18n.translate('xpack.ingestPipelines.processors.label.set', { defaultMessage: 'Set', diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx index 2a537ba082eecd..3032634b0d73aa 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx @@ -40,10 +40,10 @@ export const ProcessorSettingsForm: FunctionComponent = ({ 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, }); } }, @@ -51,7 +51,7 @@ export const ProcessorSettingsForm: FunctionComponent = ({ ); const { form } = useForm({ - defaultValue: processor?.options, + defaultValue: { fields: processor?.options }, onSubmit: handleSubmit, }); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx new file mode 100644 index 00000000000000..5ca5e50f04c1e8 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx @@ -0,0 +1,61 @@ +/* + * 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 { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, +} from '../../../../../../shared_imports'; + +const { emptyField } = fieldValidators; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + 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 ( + <> + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx new file mode 100644 index 00000000000000..eed370fc6b2b60 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx @@ -0,0 +1,70 @@ +/* + * 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 { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ToggleField, +} from '../../../../../../shared_imports'; + +const { emptyField } = fieldValidators; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + target_field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldLabel', { + defaultMessage: 'Target field', + }), + }, + ignore_missing: { + type: FIELD_TYPES.TOGGLE, + defaultValue: false, + deserializer: (v) => (typeof v === 'boolean' ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.bytesForm.ignoreMissingFieldLabel', + { + defaultMessage: 'Ignore missing', + } + ), + }, +}; + +export const Bytes: FunctionComponent = () => { + return ( + <> + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx new file mode 100644 index 00000000000000..25bffbf2208e3a --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx @@ -0,0 +1,152 @@ +/* + * 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 { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ToggleField, + RadioGroupField, + NumericField, +} from '../../../../../../shared_imports'; + +const { emptyField } = fieldValidators; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + 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 ( + <> + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx index 4802653f9e6807..835b46a87c92ff 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx @@ -27,7 +27,6 @@ const ignoreFailureConfig: FieldConfig = { }; const ifConfig: FieldConfig = { - defaultValue: undefined, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel', { defaultMessage: 'Condition (optional)', }), @@ -35,7 +34,6 @@ const ifConfig: FieldConfig = { }; const tagConfig: FieldConfig = { - defaultValue: undefined, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldLabel', { defaultMessage: 'Tag (optional)', }), @@ -45,11 +43,11 @@ const tagConfig: FieldConfig = { export const CommonProcessorFields: FunctionComponent = () => { return ( <> - + - + - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx new file mode 100644 index 00000000000000..bbc419c836e9e8 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx @@ -0,0 +1,147 @@ +/* + * 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 { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ToggleField, + SelectField, +} from '../../../../../../shared_imports'; + +const { emptyField } = fieldValidators; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + type: { + type: FIELD_TYPES.TEXT, + defaultValue: '', + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.typeFieldLabel', { + defaultMessage: 'Type', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.typeRequiredError', { + defaultMessage: 'A type value is required.', + }) + ), + }, + ], + }, + target_field: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', { + defaultMessage: 'Target field', + }), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.convertForm.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.cicleForm.ignoreMissingFieldLabel', + { + defaultMessage: 'Ignore missing', + } + ), + }, +}; + +export const Convert: FunctionComponent = () => { + return ( + <> + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx new file mode 100644 index 00000000000000..3ac3562b05f88f --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx @@ -0,0 +1,174 @@ +/* + * 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 { EuiCode } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ToggleField, + ComboBoxField, + ValidationFunc, +} from '../../../../../../shared_imports'; + +import { isArrayOfStrings } from './shared'; + +const { emptyField, minLengthField } = fieldValidators; + +/** + * Allow empty strings ('') to pass this validation. + */ +const isStringLengthOne: ValidationFunc = ({ value }) => { + return typeof value === 'string' && value !== '' && value.length !== 1 + ? { + message: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.convertForm.separatorLengthError', + { + defaultMessage: 'A separator value must be 1 character.', + } + ), + } + : undefined; +}; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + serializer: String, + deserializer: String, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + target_fields: { + type: FIELD_TYPES.COMBO_BOX, + deserializer: (v) => { + return isArrayOfStrings(v) ? v : []; + }, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.targetFieldsFieldLabel', { + defaultMessage: 'Target fields', + }), + validations: [ + { + validator: minLengthField({ + length: 1, + message: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.csvForm.targetFieldRequiredError', + { + defaultMessage: 'A target fields value is required.', + } + ), + }), + }, + ], + }, + separator: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.separatorFieldLabel', { + defaultMessage: 'Separator', + }), + validations: [ + { + validator: isStringLengthOne, + }, + ], + helpText: ( + {','} }} + /> + ), + }, + quote: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.quoteFieldLabel', { + defaultMessage: 'Quote', + }), + validations: [ + { + validator: isStringLengthOne, + }, + ], + helpText: ( + {'"'} }} + /> + ), + }, + trim: { + type: FIELD_TYPES.TOGGLE, + defaultValue: false, + deserializer: (v) => (typeof v === 'boolean' ? v : undefined), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.trimFieldLabel', { + defaultMessage: 'Trim', + }), + }, + empty_value: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.emptyValueFieldLabel', { + defaultMessage: 'Empty value', + }), + }, + ignore_missing: { + type: FIELD_TYPES.TOGGLE, + defaultValue: false, + deserializer: (v) => (typeof v === 'boolean' ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.cicleForm.ignoreMissingFieldLabel', + { + defaultMessage: 'Ignore missing', + } + ), + }, +}; + +export const CSV: FunctionComponent = () => { + return ( + <> + + + + + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx new file mode 100644 index 00000000000000..74dd496a4198bf --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx @@ -0,0 +1,128 @@ +/* + * 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 { EuiCode } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ComboBoxField, +} from '../../../../../../shared_imports'; + +import { isArrayOfStrings } from './shared'; + +const { emptyField, minLengthField } = fieldValidators; + +export const fieldsConfig: Record = { + field: { + type: FIELD_TYPES.TEXT, + serializer: String, + deserializer: String, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, + target_field: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? undefined : v), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldFieldLabel', { + defaultMessage: 'Target field', + }), + helpText: ( + {'@timestamp'}, + }} + /> + ), + }, + formats: { + type: FIELD_TYPES.COMBO_BOX, + deserializer: (v) => { + return isArrayOfStrings(v) ? v : []; + }, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel', { + defaultMessage: 'Formats', + }), + validations: [ + { + validator: minLengthField({ + length: 1, + message: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateForm.formatsRequiredError', + { + defaultMessage: 'A value for formats is required.', + } + ), + }), + }, + ], + }, + timezone: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.timezoneFieldLabel', { + defaultMessage: 'Timezone', + }), + helpText: ( + {'UTC'} }} + /> + ), + }, + locale: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel', { + defaultMessage: 'Locale', + }), + helpText: ( + {'ENGLISH'} }} + /> + ), + }, +}; + +/** + * Disambiguate from global Date object + */ +export const DateProcessor: FunctionComponent = () => { + return ( + <> + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts new file mode 100644 index 00000000000000..ca23405214223e --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts @@ -0,0 +1,12 @@ +/* + * 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 * as rt from 'io-ts'; +import { isRight } from 'fp-ts/lib/Either'; +import { flow } from 'fp-ts/lib/function'; + +export const arrayOfStrings = rt.array(rt.string); +export const isArrayOfStrings = flow(arrayOfStrings.decode, isRight); diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index d2c4b73a487679..2927a94b8a45ef 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -57,6 +57,9 @@ export { FormRow, ToggleField, ComboBoxField, + RadioGroupField, + NumericField, + SelectField, } from '../../../../src/plugins/es_ui_shared/static/forms/components'; export { From 71274a39b6654bbe4d19f6c8dec99784651c4cad Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 21 Jul 2020 10:59:58 +0200 Subject: [PATCH 02/12] add type to shared imports --- x-pack/plugins/ingest_pipelines/public/shared_imports.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index 2927a94b8a45ef..db01014ae90156 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -43,6 +43,7 @@ export { FieldConfig, FieldHook, getFieldValidityAndErrorMessage, + ValidationFunc, } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib'; export { From 1621eb834fb5798781042e86639d5eec01f7da41 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 22 Jul 2020 15:39:31 +0200 Subject: [PATCH 03/12] Refactors for repeated fields and added forms - date_index_name - dissect - dot_expander - drop Fields refactored: - Field - Ignore missing --- .../map_processor_type_to_form.tsx | 17 +- .../processors/append.tsx | 30 +-- .../processors/bytes.tsx | 49 +--- .../processors/circle.tsx | 31 +-- .../common_fields/common_processor_fields.tsx | 1 + .../common_fields/field_name_field.tsx | 35 +++ .../common_fields/ignore_missing_field.tsx | 33 +++ .../processors/convert.tsx | 42 +--- .../processors/csv.tsx | 45 +--- .../processors/date.tsx | 27 +-- .../processors/date_index_name.tsx | 218 ++++++++++++++++++ .../processors/dissect.tsx | 75 ++++++ .../processors/dot_expander.tsx | 34 +++ .../processors/drop.tsx | 14 ++ .../processors/shared.ts | 4 + 15 files changed, 465 insertions(+), 190 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dot_expander.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/drop.tsx diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx index 961eb6fe6640ec..cc87b6193d373f 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx @@ -13,7 +13,12 @@ import { Circle } from './processors/circle'; import { Convert } from './processors/convert'; import { CSV } from './processors/csv'; import { DateProcessor } from './processors/date'; -import { SetProcessor } from './processors/set'; +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'; interface FieldsFormDescriptor { @@ -69,28 +74,28 @@ const mapProcessorTypeToFormDescriptor: Record = { }), }, 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', @@ -253,7 +258,7 @@ const mapProcessorTypeToFormDescriptor: Record = { // --- The below processor descriptors have components implemented --- set: { - FieldsComponent: SetProcessor, + FieldsComponent: undefined, docLinkPath: '/set-processor.html', label: i18n.translate('xpack.ingestPipelines.processors.label.set', { defaultMessage: 'Set', diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx index 5ca5e50f04c1e8..5bccaf70efdb2b 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx @@ -7,32 +7,14 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { - FieldConfig, - FIELD_TYPES, - fieldValidators, - UseField, - Field, -} from '../../../../../../shared_imports'; +import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports'; + +import { FieldsConfig } from './shared'; +import { FieldNameField } from './common_fields/field_name_field'; const { emptyField } = fieldValidators; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { value: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueFieldLabel', { @@ -53,7 +35,7 @@ export const fieldsConfig: Record = { export const Append: FunctionComponent = () => { return ( <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx index eed370fc6b2b60..1e0b118cbab161 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx @@ -7,64 +7,29 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { - FieldConfig, - FIELD_TYPES, - fieldValidators, - UseField, - Field, - ToggleField, -} from '../../../../../../shared_imports'; +import { FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports'; -const { emptyField } = fieldValidators; +import { FieldsConfig } from './shared'; +import { IgnoreMissingField } from './common_fields/ignore_missing_field'; +import { FieldNameField } from './common_fields/field_name_field'; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { target_field: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldLabel', { defaultMessage: 'Target field', }), }, - ignore_missing: { - type: FIELD_TYPES.TOGGLE, - defaultValue: false, - deserializer: (v) => (typeof v === 'boolean' ? v : undefined), - label: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.bytesForm.ignoreMissingFieldLabel', - { - defaultMessage: 'Ignore missing', - } - ), - }, }; export const Bytes: FunctionComponent = () => { return ( <> - + - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx index 25bffbf2208e3a..53884141a9648d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx @@ -8,34 +8,21 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { - FieldConfig, FIELD_TYPES, fieldValidators, UseField, Field, - ToggleField, 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; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { target_field: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldLabel', { @@ -106,7 +93,7 @@ export const fieldsConfig: Record = { export const Circle: FunctionComponent = () => { return ( <> - + { - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx index 835b46a87c92ff..93ba230cd55e69 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx +++ b/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', { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx new file mode 100644 index 00000000000000..0c97cfd1aabd49 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.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 from 'react'; +import { i18n } from '@kbn/i18n'; +import { FIELD_TYPES, UseField, Field, fieldValidators } from '../../../../../../../shared_imports'; + +import { FieldsConfig } from '../shared'; + +const { emptyField } = fieldValidators; + +export const fieldsConfig: FieldsConfig = { + field: { + type: FIELD_TYPES.TEXT, + deserializer: String, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.fieldFieldLabel', { + defaultMessage: 'Field', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.fieldRequiredError', { + defaultMessage: 'A field value is required.', + }) + ), + }, + ], + }, +}; + +export const FieldNameField = () => ( + +); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx new file mode 100644 index 00000000000000..1dd8b563ccb6d0 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx @@ -0,0 +1,33 @@ +/* + * 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 from 'react'; +import { i18n } from '@kbn/i18n'; +import { FIELD_TYPES, UseField, ToggleField } from '../../../../../../../shared_imports'; + +import { FieldsConfig } from '../shared'; + +export const fieldsConfig: FieldsConfig = { + ignore_missing: { + type: FIELD_TYPES.TOGGLE, + defaultValue: false, + serializer: (v) => (v === false ? undefined : v), + deserializer: (v) => (typeof v === 'boolean' ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreMissingFieldLabel', + { + defaultMessage: 'Ignore missing', + } + ), + }, +}; + +export const IgnoreMissingField = () => ( + +); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx index bbc419c836e9e8..209a2e90908cf8 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx @@ -8,33 +8,20 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { - FieldConfig, FIELD_TYPES, fieldValidators, UseField, Field, - ToggleField, SelectField, } from '../../../../../../shared_imports'; +import { FieldsConfig } from './shared'; +import { FieldNameField } from './common_fields/field_name_field'; +import { IgnoreMissingField } from './common_fields/ignore_missing_field'; + const { emptyField } = fieldValidators; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { type: { type: FIELD_TYPES.TEXT, defaultValue: '', @@ -63,23 +50,12 @@ export const fieldsConfig: Record = { } ), }, - ignore_missing: { - type: FIELD_TYPES.TOGGLE, - defaultValue: false, - deserializer: (v) => (typeof v === 'boolean' ? v : undefined), - label: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.cicleForm.ignoreMissingFieldLabel', - { - defaultMessage: 'Ignore missing', - } - ), - }, }; export const Convert: FunctionComponent = () => { return ( <> - + { - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx index 3ac3562b05f88f..76f6522f881766 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/csv.tsx @@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { - FieldConfig, FIELD_TYPES, fieldValidators, UseField, @@ -20,9 +19,13 @@ import { ValidationFunc, } from '../../../../../../shared_imports'; +import { FieldsConfig } from './shared'; +import { IgnoreMissingField } from './common_fields/ignore_missing_field'; +import { FieldNameField } from './common_fields/field_name_field'; + import { isArrayOfStrings } from './shared'; -const { emptyField, minLengthField } = fieldValidators; +const { minLengthField } = fieldValidators; /** * Allow empty strings ('') to pass this validation. @@ -40,24 +43,7 @@ const isStringLengthOne: ValidationFunc = ({ value }) => { : undefined; }; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - serializer: String, - deserializer: String, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { target_fields: { type: FIELD_TYPES.COMBO_BOX, deserializer: (v) => { @@ -132,23 +118,12 @@ export const fieldsConfig: Record = { defaultMessage: 'Empty value', }), }, - ignore_missing: { - type: FIELD_TYPES.TOGGLE, - defaultValue: false, - deserializer: (v) => (typeof v === 'boolean' ? v : undefined), - label: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.cicleForm.ignoreMissingFieldLabel', - { - defaultMessage: 'Ignore missing', - } - ), - }, }; export const CSV: FunctionComponent = () => { return ( <> - + { - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx index 74dd496a4198bf..4dae9c03bac727 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date.tsx @@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { - FieldConfig, FIELD_TYPES, fieldValidators, UseField, @@ -18,28 +17,12 @@ import { ComboBoxField, } from '../../../../../../shared_imports'; -import { isArrayOfStrings } from './shared'; +import { FieldsConfig, isArrayOfStrings } from './shared'; +import { FieldNameField } from './common_fields/field_name_field'; -const { emptyField, minLengthField } = fieldValidators; +const { minLengthField } = fieldValidators; -export const fieldsConfig: Record = { - field: { - type: FIELD_TYPES.TEXT, - serializer: String, - deserializer: String, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.fieldFieldLabel', { - defaultMessage: 'Field', - }), - validations: [ - { - validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.fieldRequiredError', { - defaultMessage: 'A field value is required.', - }) - ), - }, - ], - }, +const fieldsConfig: FieldsConfig = { target_field: { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? undefined : v), @@ -114,7 +97,7 @@ export const fieldsConfig: Record = { export const DateProcessor: FunctionComponent = () => { return ( <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx new file mode 100644 index 00000000000000..708cf0d1245b5d --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx @@ -0,0 +1,218 @@ +/* + * 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 { EuiCode } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + FIELD_TYPES, + fieldValidators, + UseField, + Field, + ComboBoxField, + SelectField, +} from '../../../../../../shared_imports'; + +import { FieldsConfig, isArrayOfStrings } from './shared'; +import { FieldNameField } from './common_fields/field_name_field'; + +const { emptyField } = fieldValidators; + +const fieldsConfig: FieldsConfig = { + date_rounding: { + type: FIELD_TYPES.SELECT, + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateRoundingFieldLabel', + { + defaultMessage: 'Date rounding', + } + ), + validations: [ + { + validator: emptyField( + i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateRoundingRequiredError', + { + defaultMessage: 'A field value is required.', + } + ) + ), + }, + ], + }, + index_name_prefix: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNamePrefixFieldLabel', + { + defaultMessage: 'Index name prefix', + } + ), + }, + index_name_format: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNameFormatFieldLabel', + { + defaultMessage: 'Index name format', + } + ), + }, + date_formats: { + type: FIELD_TYPES.COMBO_BOX, + serializer: (v: string[]) => { + return v.length ? v : undefined; + }, + deserializer: (v) => { + return isArrayOfStrings(v) ? v : []; + }, + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateFormatsFieldLabel', + { + defaultMessage: 'Date formats', + } + ), + helpText: ( + {"yyyy-MM-dd'T'HH:mm:ss.SSSXX"} }} + /> + ), + }, + timezone: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.timezoneFieldLabel', + { + defaultMessage: 'Timezone', + } + ), + helpText: ( + {'UTC'} }} + /> + ), + }, + locale: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? v : undefined), + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.localeFieldLabel', + { + defaultMessage: 'Locale', + } + ), + helpText: ( + {'ENGLISH'} }} + /> + ), + }, +}; + +/** + * Disambiguate from global Date object + */ +export const DateIndexName: FunctionComponent = () => { + return ( + <> + + + + + + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx new file mode 100644 index 00000000000000..fb7c8c3d7ea1db --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx @@ -0,0 +1,75 @@ +/* + * 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 { EuiCode } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + FieldConfig, + FIELD_TYPES, + fieldValidators, + UseField, + Field, +} from '../../../../../../shared_imports'; + +import { FieldNameField } from './common_fields/field_name_field'; +import { IgnoreMissingField } from './common_fields/ignore_missing_field'; + +const { emptyField } = fieldValidators; + +const fieldsConfig: Record = { + pattern: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dissectForm.patternFieldLabel', { + defaultMessage: 'Pattern', + }), + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.pipelineEditor.dissectForm.patternRequiredError', { + defaultMessage: 'A pattern value is required.', + }) + ), + }, + ], + }, + append_separator: { + type: FIELD_TYPES.TEXT, + label: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dissectForm.appendSeparatorparaotrFieldLabel', + { + defaultMessage: 'Append separator', + } + ), + helpText: ( + {'""'} }} + /> + ), + }, +}; + +export const Dissect: FunctionComponent = () => { + return ( + <> + + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dot_expander.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dot_expander.tsx new file mode 100644 index 00000000000000..ecb1c11e0edbe4 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dot_expander.tsx @@ -0,0 +1,34 @@ +/* + * 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 { FieldConfig, FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports'; + +import { FieldNameField } from './common_fields/field_name_field'; + +const fieldsConfig: Record = { + path: { + type: FIELD_TYPES.TEXT, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dotExpanderForm.pathFieldLabel', { + defaultMessage: 'Path', + }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.dotExpanderForm.pathHelpText', { + defaultMessage: 'Only required if the field to expand is part another object field.', + }), + }, +}; + +export const DotExpander: FunctionComponent = () => { + return ( + <> + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/drop.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/drop.tsx new file mode 100644 index 00000000000000..87b6cb76cdccec --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/drop.tsx @@ -0,0 +1,14 @@ +/* + * 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 { FunctionComponent } from 'react'; + +/** + * This fields component has no unique fields + */ +export const Drop: FunctionComponent = () => { + return null; +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts index ca23405214223e..a0a31dd3a8e934 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/shared.ts @@ -8,5 +8,9 @@ import * as rt from 'io-ts'; import { isRight } from 'fp-ts/lib/Either'; import { flow } from 'fp-ts/lib/function'; +import { FieldConfig } from '../../../../../../shared_imports'; + export const arrayOfStrings = rt.array(rt.string); export const isArrayOfStrings = flow(arrayOfStrings.decode, isRight); + +export type FieldsConfig = Record; From 8160f85c5d52eb7cccdb6182a27480c1acd7664f Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 11 Aug 2020 15:45:44 +0200 Subject: [PATCH 04/12] Fix broken imports and some other small refactors --- .../processor_settings_form.container.tsx | 3 ++- .../common_fields/common_processor_fields.tsx | 1 + .../common_fields/processor_type_field.tsx | 6 ++--- .../processors/index.ts | 16 ++++++++++++++ .../shared/map_processor_type_to_form.tsx | 22 ++++++++++--------- 5 files changed, 34 insertions(+), 14 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/index.ts diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx index 3032634b0d73aa..9480c64faa261e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx @@ -50,8 +50,9 @@ export const ProcessorSettingsForm: FunctionComponent = ({ [onSubmit] ); + const maybeProcessorOptions = processor?.options; const { form } = useForm({ - defaultValue: { fields: processor?.options }, + defaultValue: { fields: maybeProcessorOptions ?? {} }, onSubmit: handleSubmit, }); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx index 93ba230cd55e69..cd328eb36b398a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx @@ -18,6 +18,7 @@ import { const ignoreFailureConfig: FieldConfig = { defaultValue: false, serializer: (v) => (v === false ? undefined : v), + deserializer: (v) => (typeof v === 'boolean' ? v : undefined), label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel', { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx index 71ee4a714a28e3..b591309051a35e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx @@ -73,11 +73,11 @@ const typeConfig: FieldConfig = { export const ProcessorTypeField: FunctionComponent = ({ initialType }) => { return ( - + config={typeConfig} defaultValue={initialType} path="type"> {(typeField) => { let selectedOptions: ProcessorTypeAndLabel[]; - if ((typeField.value as string[]).length) { - const [type] = typeField.value as string[]; + if (typeField.value?.length) { + const [type] = typeField.value; const descriptor = getProcessorDescriptor(type); selectedOptions = descriptor ? [{ label: descriptor.label, value: type }] diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/index.ts new file mode 100644 index 00000000000000..6996deb2d861c5 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ + +export { Append } from './append'; +export { Bytes } from './bytes'; +export { Circle } from './circle'; +export { Convert } from './convert'; +export { CSV } from './csv'; +export { DateProcessor } from './date'; +export { DateIndexName } from './date_index_name'; +export { Dissect } from './dissect'; +export { DotExpander } from './dot_expander'; +export { Drop } from './drop'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx index d07859114fe088..24d79b0f09e8ff 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx @@ -7,16 +7,18 @@ 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 { + Append, + Bytes, + Circle, + Convert, + CSV, + DateProcessor, + DateIndexName, + Dissect, + DotExpander, + Drop, +} from '../processor_settings_form/processors'; // import { SetProcessor } from './processors/set'; // import { Gsub } from './processors/gsub'; From 0bcd67ab7cf9aadffd50fd4707ac84396242e9ed Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 11 Aug 2020 17:05:52 +0200 Subject: [PATCH 05/12] added text editor field and updated pattern and if fields --- .../field_components/index.ts | 3 +- .../field_components/text_editor.tsx | 38 +++++++++++++ .../field_components/xjson_editor.tsx | 54 ++++++------------- .../processors/circle.tsx | 11 ---- .../common_fields/common_processor_fields.tsx | 15 +++++- .../processors/dissect.tsx | 13 ++++- .../processors/gsub.tsx | 21 ++++++-- .../processors/set.tsx | 6 +-- 8 files changed, 101 insertions(+), 60 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/text_editor.tsx diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts index 6f7b55a3ea4b02..6ce9eefd26445a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/index.ts @@ -4,4 +4,5 @@ * you may not use this file except in compliance with the Elastic License. */ -export { OnXJsonEditorUpdateHandler, XJsonEditor } from './xjson_editor'; +export { XJsonEditor } from './xjson_editor'; +export { TextEditor } from './text_editor'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/text_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/text_editor.tsx new file mode 100644 index 00000000000000..1d0e36c0d526c7 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/text_editor.tsx @@ -0,0 +1,38 @@ +/* + * 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 { EuiPanel } from '@elastic/eui'; +import React, { FunctionComponent } from 'react'; +import { EuiFormRow } from '@elastic/eui'; +import { + CodeEditor, + FieldHook, + getFieldValidityAndErrorMessage, +} from '../../../../../../shared_imports'; + +interface Props { + field: FieldHook; + editorProps: { [key: string]: any }; +} + +export const TextEditor: FunctionComponent = ({ field, editorProps }) => { + const { value, helpText, setValue, label } = field; + const { errorMessage } = getFieldValidityAndErrorMessage(field); + + return ( + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx index a8456ad0ffd72c..228094c0dfac58 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/field_components/xjson_editor.tsx @@ -4,25 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiPanel } from '@elastic/eui'; import { XJsonLang } from '@kbn/monaco'; import React, { FunctionComponent, useCallback } from 'react'; -import { EuiFormRow } from '@elastic/eui'; -import { - CodeEditor, - FieldHook, - getFieldValidityAndErrorMessage, - Monaco, -} from '../../../../../../shared_imports'; +import { FieldHook, Monaco } from '../../../../../../shared_imports'; -export type OnXJsonEditorUpdateHandler = (arg: { - data: { - raw: string; - format(): T; - }; - validate(): boolean; - isValid: boolean | undefined; -}) => void; +import { TextEditor } from './text_editor'; interface Props { field: FieldHook; @@ -30,9 +16,8 @@ interface Props { } export const XJsonEditor: FunctionComponent = ({ field, editorProps }) => { - const { value, helpText, setValue, label } = field; + const { value, setValue } = field; const { xJson, setXJson, convertToJson } = Monaco.useXJsonMode(value); - const { errorMessage } = getFieldValidityAndErrorMessage(field); const onChange = useCallback( (s) => { @@ -42,25 +27,18 @@ export const XJsonEditor: FunctionComponent = ({ field, editorProps }) => [setValue, setXJson, convertToJson] ); return ( - - - { - XJsonLang.registerGrammarChecker(m); - }} - options={{ minimap: { enabled: false } }} - onChange={onChange} - {...(editorProps as any)} - /> - - + { + XJsonLang.registerGrammarChecker(m); + }, + onChange, + ...editorProps, + }} + /> ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx index 53884141a9648d..50c11628a31b80 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx @@ -35,17 +35,6 @@ const fieldsConfig: FieldsConfig = { } ), }, - 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), diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx index cd328eb36b398a..991fa3346c49a5 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx @@ -15,6 +15,8 @@ import { ToggleField, } from '../../../../../../../shared_imports'; +import { TextEditor } from '../../field_components'; + const ignoreFailureConfig: FieldConfig = { defaultValue: false, serializer: (v) => (v === false ? undefined : v), @@ -47,7 +49,18 @@ export const CommonProcessorFields: FunctionComponent = () => { <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx index fb7c8c3d7ea1db..797120389d822d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/dissect.tsx @@ -8,6 +8,7 @@ import React, { FunctionComponent } from 'react'; import { EuiCode } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { TextEditor } from '../field_components'; import { FieldConfig, @@ -61,7 +62,17 @@ export const Dissect: FunctionComponent = () => { <> - + { return ( <> - + - + - + - + - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx index 1ba6a14d0448d8..88cea620ae804e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx @@ -64,11 +64,11 @@ const overrideConfig: FieldConfig = { export const SetProcessor: FunctionComponent = () => { return ( <> - + - + - + ); }; From 1555486a54754a37140c14bd996b61354b80301a Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 12 Aug 2020 12:16:40 +0200 Subject: [PATCH 06/12] Large copy improvements and updates and other small refactors - Added help text for all fields - Updated layout so that required fields are always on first - Replaced circle radio group with a select drop down --- .../processor_settings_form.tsx | 2 + .../processors/append.tsx | 14 +++-- .../processors/bytes.tsx | 12 ++++- .../processors/circle.tsx | 40 +++++++++----- .../common_fields/common_processor_fields.tsx | 18 +++++-- .../common_fields/field_name_field.tsx | 10 ++-- .../common_fields/ignore_missing_field.tsx | 10 ++-- .../processors/convert.tsx | 23 +++++--- .../processors/csv.tsx | 32 ++++++++--- .../processors/date.tsx | 53 +++++++++++-------- .../processors/date_index_name.tsx | 44 +++++++++++---- .../processors/dissect.tsx | 19 +++++-- .../processors/dot_expander.tsx | 12 ++++- 13 files changed, 213 insertions(+), 76 deletions(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx index b5b3a38bb6a6cf..e44d5afd56296e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx @@ -18,6 +18,7 @@ import { EuiTitle, EuiFlexGroup, EuiFlexItem, + EuiSpacer, } from '@elastic/eui'; import { Form, FormDataProvider, FormHook } from '../../../../../shared_imports'; @@ -121,6 +122,7 @@ export const ProcessorSettingsForm: FunctionComponent = memo( return ( <> + ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx index 5bccaf70efdb2b..f0b1d68462dc37 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/append.tsx @@ -5,6 +5,7 @@ */ import React, { FunctionComponent } from 'react'; +import { EuiHorizontalRule } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports'; @@ -17,13 +18,16 @@ const { emptyField } = fieldValidators; const fieldsConfig: FieldsConfig = { value: { type: FIELD_TYPES.TEXT, - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueFieldLabel', { + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldLabel', { defaultMessage: 'Value', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldHelpText', { + defaultMessage: 'The value to be appended by this processor.', + }), validations: [ { validator: emptyField( - i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueRequiredError', { + i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueRequiredError', { defaultMessage: 'A value to set is required.', }) ), @@ -35,7 +39,11 @@ const fieldsConfig: FieldsConfig = { export const Append: FunctionComponent = () => { return ( <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx index 1e0b118cbab161..d86aa0640954c7 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/bytes.tsx @@ -17,7 +17,10 @@ const fieldsConfig: FieldsConfig = { target_field: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldLabel', { - defaultMessage: 'Target field', + defaultMessage: 'Target field (optional)', + }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.bytesForm.targetFieldHelpText', { + defaultMessage: 'The field to assign the converted value to', }), }, }; @@ -25,7 +28,12 @@ const fieldsConfig: FieldsConfig = { export const Bytes: FunctionComponent = () => { return ( <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx index 50c11628a31b80..907d7bad46a3a0 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx @@ -12,7 +12,7 @@ import { fieldValidators, UseField, Field, - RadioGroupField, + SelectField, NumericField, } from '../../../../../../shared_imports'; @@ -26,7 +26,7 @@ const fieldsConfig: FieldsConfig = { target_field: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldLabel', { - defaultMessage: 'Target field', + defaultMessage: 'Target field (optional)', }), helpText: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.circleForm.targetFieldHelpText', @@ -45,6 +45,13 @@ const fieldsConfig: FieldsConfig = { defaultMessage: 'Error distance', } ), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.circleForm.errorDistanceHelpText', + { + defaultMessage: + 'The difference between the resulting inscribed distance from center to side and the circle’s radius (measured in meters for geo_shape, unit-less for shape).', + } + ), validations: [ { validator: ({ value }) => { @@ -67,6 +74,10 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeFieldLabel', { defaultMessage: 'Shape type', }), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeFieldHelpText', + { defaultMessage: 'Which field mapping type is to be used.' } + ), validations: [ { validator: emptyField( @@ -82,21 +93,32 @@ const fieldsConfig: FieldsConfig = { export const Circle: FunctionComponent = () => { return ( <> - + + + { }, }} config={fieldsConfig.shape_type} - component={RadioGroupField} + component={SelectField} path="fields.shape_type" /> - - diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx index 991fa3346c49a5..7ae7b82c31a43e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx @@ -27,6 +27,10 @@ const ignoreFailureConfig: FieldConfig = { defaultMessage: 'Ignore failure', } ), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureHelpText', + { defaultMessage: 'Ignore failures for this processor.' } + ), type: FIELD_TYPES.TOGGLE, }; @@ -34,6 +38,9 @@ const ifConfig: FieldConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel', { defaultMessage: 'Condition (optional)', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldHelpText', { + defaultMessage: 'Conditionally execute this processor.', + }), type: FIELD_TYPES.TEXT, }; @@ -41,14 +48,15 @@ const tagConfig: FieldConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldLabel', { defaultMessage: 'Tag (optional)', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldHelpText', { + defaultMessage: 'An identifier for this processor. Useful for debugging and metrics.', + }), type: FIELD_TYPES.TEXT, }; export const CommonProcessorFields: FunctionComponent = () => { return ( - <> - - +
{ /> - + + +
); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx index 0c97cfd1aabd49..e523fcd6ea10bd 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/field_name_field.tsx @@ -3,7 +3,7 @@ * 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 from 'react'; +import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { FIELD_TYPES, UseField, Field, fieldValidators } from '../../../../../../../shared_imports'; @@ -30,6 +30,10 @@ export const fieldsConfig: FieldsConfig = { }, }; -export const FieldNameField = () => ( - +interface Props { + helpText?: React.ReactNode; +} + +export const FieldNameField: FunctionComponent = ({ helpText }) => ( + ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx index 1dd8b563ccb6d0..08eb0a425ef338 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/ignore_missing_field.tsx @@ -3,7 +3,7 @@ * 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 from 'react'; +import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { FIELD_TYPES, UseField, ToggleField } from '../../../../../../../shared_imports'; @@ -24,9 +24,13 @@ export const fieldsConfig: FieldsConfig = { }, }; -export const IgnoreMissingField = () => ( +interface Props { + helpText?: string; +} + +export const IgnoreMissingField: FunctionComponent = ({ helpText }) => ( diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx index 209a2e90908cf8..581950a85ff533 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx @@ -22,12 +22,16 @@ import { IgnoreMissingField } from './common_fields/ignore_missing_field'; const { emptyField } = fieldValidators; const fieldsConfig: FieldsConfig = { + /* Required fields config */ type: { type: FIELD_TYPES.TEXT, defaultValue: '', label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.typeFieldLabel', { defaultMessage: 'Type', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.typeFieldHelpText', { + defaultMessage: 'The type to convert the existing value to.', + }), validations: [ { validator: emptyField( @@ -38,24 +42,27 @@ const fieldsConfig: FieldsConfig = { }, ], }, + /* Optional fields config */ target_field: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', { - defaultMessage: 'Target field', + defaultMessage: 'Target field (optional)', + }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', { + defaultMessage: 'The field to assign the converted value to.', }), - helpText: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldHelpText', - { - defaultMessage: 'By default field is updated in-place.', - } - ), }, }; export const Convert: FunctionComponent = () => { return ( <> - + { }; const fieldsConfig: FieldsConfig = { + /* Required fields config */ target_fields: { type: FIELD_TYPES.COMBO_BOX, deserializer: (v) => { @@ -52,6 +53,9 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.targetFieldsFieldLabel', { defaultMessage: 'Target fields', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.targetFieldsHelpText', { + defaultMessage: 'The array of fields to assign extracted values to.', + }), validations: [ { validator: minLengthField({ @@ -66,11 +70,12 @@ const fieldsConfig: FieldsConfig = { }, ], }, + /* Optional fields config */ separator: { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? v : undefined), label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.separatorFieldLabel', { - defaultMessage: 'Separator', + defaultMessage: 'Separator (optional)', }), validations: [ { @@ -80,7 +85,7 @@ const fieldsConfig: FieldsConfig = { helpText: ( {','} }} /> ), @@ -89,7 +94,7 @@ const fieldsConfig: FieldsConfig = { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? v : undefined), label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.quoteFieldLabel', { - defaultMessage: 'Quote', + defaultMessage: 'Quote (optional)', }), validations: [ { @@ -99,7 +104,7 @@ const fieldsConfig: FieldsConfig = { helpText: ( {'"'} }} /> ), @@ -111,19 +116,34 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.trimFieldLabel', { defaultMessage: 'Trim', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.csvForm.trimFieldHelpText', { + defaultMessage: 'Trim whitespaces in unquoted fields', + }), }, empty_value: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.emptyValueFieldLabel', { - defaultMessage: 'Empty value', + defaultMessage: 'Empty value (optional)', }), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.convertForm.emptyValueFieldHelpText', + { + defaultMessage: + 'Value used to fill empty fields, empty fields will be skipped if this is not provided.', + } + ), }, }; export const CSV: FunctionComponent = () => { return ( <> - + (v ? undefined : v), - label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldFieldLabel', { - defaultMessage: 'Target field', - }), - helpText: ( - {'@timestamp'}, - }} - /> - ), - }, + /* Required fields config */ formats: { type: FIELD_TYPES.COMBO_BOX, deserializer: (v) => { @@ -47,6 +32,10 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel', { defaultMessage: 'Formats', }), + helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText', { + defaultMessage: + 'An array of the expected date formats. Can be a java time pattern or one of the following formats: ISO8601, UNIX, UNIX_MS, or TAI64N.', + }), validations: [ { validator: minLengthField({ @@ -61,16 +50,33 @@ const fieldsConfig: FieldsConfig = { }, ], }, + /* Optional fields config */ + target_field: { + type: FIELD_TYPES.TEXT, + serializer: (v) => (v ? undefined : v), + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.targetFieldFieldLabel', { + defaultMessage: 'Target field (optional)', + }), + helpText: ( + {'@timestamp'}, + }} + /> + ), + }, timezone: { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? v : undefined), label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.timezoneFieldLabel', { - defaultMessage: 'Timezone', + defaultMessage: 'Timezone (optional)', }), helpText: ( {'UTC'} }} /> ), @@ -79,12 +85,12 @@ const fieldsConfig: FieldsConfig = { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? v : undefined), label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel', { - defaultMessage: 'Locale', + defaultMessage: 'Locale (optional)', }), helpText: ( {'ENGLISH'} }} /> ), @@ -97,7 +103,12 @@ const fieldsConfig: FieldsConfig = { export const DateProcessor: FunctionComponent = () => { return ( <> - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx index 708cf0d1245b5d..09a603d099743d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/date_index_name.tsx @@ -24,6 +24,7 @@ import { FieldNameField } from './common_fields/field_name_field'; const { emptyField } = fieldValidators; const fieldsConfig: FieldsConfig = { + /* Required fields config */ date_rounding: { type: FIELD_TYPES.SELECT, label: i18n.translate( @@ -32,6 +33,12 @@ const fieldsConfig: FieldsConfig = { defaultMessage: 'Date rounding', } ), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateRoundingFieldHelpText', + { + defaultMessage: 'How to round the date when formatting the date into the index name.', + } + ), validations: [ { validator: emptyField( @@ -45,15 +52,20 @@ const fieldsConfig: FieldsConfig = { }, ], }, + /* Optional fields config */ index_name_prefix: { type: FIELD_TYPES.TEXT, serializer: (v) => (v ? v : undefined), label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNamePrefixFieldLabel', { - defaultMessage: 'Index name prefix', + defaultMessage: 'Index name prefix (optional)', } ), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNamePrefixFieldHelpText', + { defaultMessage: 'A prefix of the index name to be prepended before the printed date.' } + ), }, index_name_format: { type: FIELD_TYPES.TEXT, @@ -61,9 +73,16 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.indexNameFormatFieldLabel', { - defaultMessage: 'Index name format', + defaultMessage: 'Index name format (optional)', } ), + helpText: ( + {'yyyy-MM-dd'} }} + /> + ), }, date_formats: { type: FIELD_TYPES.COMBO_BOX, @@ -76,13 +95,13 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateFormatsFieldLabel', { - defaultMessage: 'Date formats', + defaultMessage: 'Date formats (optional)', } ), helpText: ( {"yyyy-MM-dd'T'HH:mm:ss.SSSXX"} }} /> ), @@ -93,13 +112,13 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.timezoneFieldLabel', { - defaultMessage: 'Timezone', + defaultMessage: 'Timezone (optional)', } ), helpText: ( {'UTC'} }} /> ), @@ -110,14 +129,14 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.localeFieldLabel', { - defaultMessage: 'Locale', + defaultMessage: 'Locale (optional)', } ), helpText: ( {'ENGLISH'} }} + defaultMessage="The locale to use when parsing the date from the document being preprocessed, relevant when parsing month names or week days. Default value is {locale}" + values={{ locale: {'ENGLISH'} }} /> ), }, @@ -129,7 +148,12 @@ const fieldsConfig: FieldsConfig = { export const DateIndexName: FunctionComponent = () => { return ( <> - + = { + /* Required field config */ pattern: { type: FIELD_TYPES.TEXT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dissectForm.patternFieldLabel', { defaultMessage: 'Pattern', }), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dissectForm.patternFieldHelpText', + { + defaultMessage: 'The pattern to apply to the field.', + } + ), validations: [ { validator: emptyField( @@ -39,18 +46,19 @@ const fieldsConfig: Record = { }, ], }, + /* Optional field config */ append_separator: { type: FIELD_TYPES.TEXT, label: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.dissectForm.appendSeparatorparaotrFieldLabel', { - defaultMessage: 'Append separator', + defaultMessage: 'Append separator (optional)', } ), helpText: ( {'""'} }} /> ), @@ -60,7 +68,12 @@ const fieldsConfig: Record = { export const Dissect: FunctionComponent = () => { return ( <> - + = { export const DotExpander: FunctionComponent = () => { return ( <> - + {'.'} }} + /> + } + /> From 7059261fd1648e627a2bb562e6371ef0cb2f9633 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 12 Aug 2020 12:18:55 +0200 Subject: [PATCH 07/12] update circle shape type field to select --- .../components/processor_settings_form/processors/circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx index 907d7bad46a3a0..3a39e597cb8dce 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/circle.tsx @@ -70,7 +70,7 @@ const fieldsConfig: FieldsConfig = { ], }, shape_type: { - type: FIELD_TYPES.RADIO_GROUP, + type: FIELD_TYPES.SELECT, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.circleForm.shapeTypeFieldLabel', { defaultMessage: 'Shape type', }), From a529e383e1cc2d79278d1d5f8d4b9c82cab60a7c Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 12 Aug 2020 12:41:07 +0200 Subject: [PATCH 08/12] Added "long" option for convert type --- .../processor_settings_form/processors/convert.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx index 581950a85ff533..f1e3144805dcfd 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/convert.tsx @@ -75,6 +75,13 @@ export const Convert: FunctionComponent = () => { { defaultMessage: 'Integer' } ), }, + { + value: 'long', + text: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.convertForm.longOption', + { defaultMessage: 'Long' } + ), + }, { value: 'float', text: i18n.translate( From 106701fc21946778ff986d4e90f84b6e9c96de7e Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 12 Aug 2020 13:10:18 +0200 Subject: [PATCH 09/12] fix path import --- .../components/shared/map_processor_type_to_form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx index 24d79b0f09e8ff..502045084b24de 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/shared/map_processor_type_to_form.tsx @@ -18,7 +18,7 @@ import { Dissect, DotExpander, Drop, -} from '../processor_settings_form/processors'; +} from '../manage_processor_form/processors'; // import { SetProcessor } from './processors/set'; // import { Gsub } from './processors/gsub'; From 5ff03eae1c1cb259da3bb6d68f93b181f5a7219b Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 12 Aug 2020 14:54:21 +0200 Subject: [PATCH 10/12] fix types and i18n --- .../processors/bytes.tsx | 2 +- .../common_fields/processor_type_field.tsx | 25 ++++++------------- .../processors/convert.tsx | 11 +++++--- .../manage_processor_form/processors/csv.tsx | 7 +++--- .../processors/date_index_name.tsx | 4 +-- 5 files changed, 21 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx index d86aa0640954c7..64a501f03d454e 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/bytes.tsx @@ -30,7 +30,7 @@ export const Bytes: FunctionComponent = () => { <> diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/processor_type_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/processor_type_field.tsx index b591309051a35e..e4ad90f61af0a1 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/processor_type_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/processor_type_field.tsx @@ -46,20 +46,12 @@ interface Props { const { emptyField } = fieldValidators; -const typeConfig: FieldConfig = { +const typeConfig: FieldConfig = { type: FIELD_TYPES.COMBO_BOX, label: i18n.translate('xpack.ingestPipelines.pipelineEditor.typeField.typeFieldLabel', { defaultMessage: 'Processor', }), - deserializer: (value: string | undefined) => { - if (value) { - return [value]; - } - return []; - }, - serializer: (value: string[]) => { - return value[0]; - }, + deserializer: String, validations: [ { validator: emptyField( @@ -73,11 +65,11 @@ const typeConfig: FieldConfig = { export const ProcessorTypeField: FunctionComponent = ({ initialType }) => { return ( - config={typeConfig} defaultValue={initialType} path="type"> + config={typeConfig} defaultValue={initialType} path="type"> {(typeField) => { let selectedOptions: ProcessorTypeAndLabel[]; if (typeField.value?.length) { - const [type] = typeField.value; + const type = typeField.value; const descriptor = getProcessorDescriptor(type); selectedOptions = descriptor ? [{ label: descriptor.label, value: type }] @@ -103,9 +95,7 @@ export const ProcessorTypeField: FunctionComponent = ({ initialType }) => return false; } - const newValue = [...(typeField.value as string[]), value]; - - typeField.setValue(newValue); + typeField.setValue(value); }; return ( @@ -131,8 +121,9 @@ export const ProcessorTypeField: FunctionComponent = ({ initialType }) => options={processorTypesAndLabels} selectedOptions={selectedOptions} onCreateOption={onCreateComboOption} - onChange={(options: EuiComboBoxOptionOption[]) => { - typeField.setValue(options.map(({ value }) => value)); + onChange={(options: Array>) => { + const [selection] = options; + typeField.setValue(selection?.value! ?? ''); }} noSuggestions={false} singleSelection={{ diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx index f1e3144805dcfd..b45f589bf0f922 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/convert.tsx @@ -48,9 +48,12 @@ const fieldsConfig: FieldsConfig = { label: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', { defaultMessage: 'Target field (optional)', }), - helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldLabel', { - defaultMessage: 'The field to assign the converted value to.', - }), + helpText: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.convertForm.targetFieldHelpText', + { + defaultMessage: 'The field to assign the converted value to.', + } + ), }, }; @@ -59,7 +62,7 @@ export const Convert: FunctionComponent = () => { <> diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx index e645fa88ecfb6d..3ac0179ca02a69 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/csv.tsx @@ -139,10 +139,9 @@ export const CSV: FunctionComponent = () => { return ( <> {'UTC'} }} /> @@ -134,7 +134,7 @@ const fieldsConfig: FieldsConfig = { ), helpText: ( {'ENGLISH'} }} /> From acc54d7d9510139aec313f89ca66161b8823ae13 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Thu, 13 Aug 2020 10:44:09 +0200 Subject: [PATCH 11/12] add validation for dot expander fix append value to be a combobox --- .../processors/append.tsx | 12 ++++++-- .../common_fields/field_name_field.tsx | 25 ++++++++++++++-- .../processors/dot_expander.tsx | 29 +++++++++++++------ .../ingest_pipelines/public/shared_imports.ts | 1 + 4 files changed, 52 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx index 3f527301e3e326..8eb484b56bafe0 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/append.tsx @@ -7,7 +7,12 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports'; +import { + FIELD_TYPES, + fieldValidators, + UseField, + ComboBoxField, +} from '../../../../../../shared_imports'; import { FieldsConfig } from './shared'; import { FieldNameField } from './common_fields/field_name_field'; @@ -16,7 +21,8 @@ const { emptyField } = fieldValidators; const fieldsConfig: FieldsConfig = { value: { - type: FIELD_TYPES.TEXT, + type: FIELD_TYPES.COMBO_BOX, + deserializer: (v) => (Array.isArray(v) ? v : [String(v)]), label: i18n.translate('xpack.ingestPipelines.pipelineEditor.appendForm.valueFieldLabel', { defaultMessage: 'Value', }), @@ -44,7 +50,7 @@ export const Append: FunctionComponent = () => { })} /> - + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx index e523fcd6ea10bd..7ef5ba6768c190 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/common_fields/field_name_field.tsx @@ -5,7 +5,13 @@ */ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { FIELD_TYPES, UseField, Field, fieldValidators } from '../../../../../../../shared_imports'; +import { + FIELD_TYPES, + UseField, + Field, + fieldValidators, + ValidationConfig, +} from '../../../../../../../shared_imports'; import { FieldsConfig } from '../shared'; @@ -32,8 +38,21 @@ export const fieldsConfig: FieldsConfig = { interface Props { helpText?: React.ReactNode; + /** + * The field name requires a value. Processor specific validation + * checks can be added here. + */ + additionalValidations?: ValidationConfig[]; } -export const FieldNameField: FunctionComponent = ({ helpText }) => ( - +export const FieldNameField: FunctionComponent = ({ helpText, additionalValidations }) => ( + ); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx index 0931764ee4e835..f25482178c79de 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx @@ -5,9 +5,7 @@ */ import React, { FunctionComponent } from 'react'; -import { EuiCode } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; import { FieldConfig, FIELD_TYPES, UseField, Field } from '../../../../../../shared_imports'; @@ -29,13 +27,26 @@ export const DotExpander: FunctionComponent = () => { return ( <> {'.'} }} - /> - } + helpText={i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText', + { defaultMessage: 'The field to expand into an object field.' } + )} + additionalValidations={[ + { + validator: ({ value }) => { + if (typeof value === 'string' && value.length) { + return !value.includes('.') + ? { + message: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText', + { defaultMessage: 'A field value requires at least one dot character.' } + ), + } + : undefined; + } + }, + }, + ]} /> diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index db01014ae90156..936db37f0c6292 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -44,6 +44,7 @@ export { FieldHook, getFieldValidityAndErrorMessage, ValidationFunc, + ValidationConfig, } from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib'; export { From a6a0e1b468b984b723015a26ffc959a390ab4f04 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Thu, 13 Aug 2020 11:06:00 +0200 Subject: [PATCH 12/12] fix i18n --- .../manage_processor_form/processors/dot_expander.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx index f25482178c79de..4e50c61ac930c3 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/dot_expander.tsx @@ -38,7 +38,7 @@ export const DotExpander: FunctionComponent = () => { return !value.includes('.') ? { message: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameHelpText', + 'xpack.ingestPipelines.pipelineEditor.dotExpanderForm.fieldNameRequiresDotError', { defaultMessage: 'A field value requires at least one dot character.' } ), }