diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx index a5abcda709a95..5231a3d17811b 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/add_processor_form.tsx @@ -33,7 +33,6 @@ export interface Props { form: FormHook; onOpen: () => void; esDocsBasePath: string; - getDefaultProcessorOptions: () => Fields; closeFlyout: () => void; handleSubmit: (shouldCloseFlyout?: boolean) => Promise; } @@ -67,7 +66,6 @@ export const AddProcessorForm: FunctionComponent = ({ onOpen, form, esDocsBasePath, - getDefaultProcessorOptions, closeFlyout, handleSubmit, }) => { @@ -110,7 +108,7 @@ export const AddProcessorForm: FunctionComponent = ({ - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/edit_processor_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/edit_processor_form.tsx index 8ab4d72309879..e449ed75b6343 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/edit_processor_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/edit_processor_form.tsx @@ -34,14 +34,13 @@ import { Fields } from './processor_form.container'; export interface Props { isOnFailure: boolean; - processor: ProcessorInternal; form: FormHook; onOpen: () => void; esDocsBasePath: string; - getDefaultProcessorOptions: () => Fields; closeFlyout: () => void; resetProcessors: () => void; handleSubmit: (shouldCloseFlyout?: boolean) => Promise; + getProcessor: () => ProcessorInternal; } const updateButtonLabel = i18n.translate( @@ -94,12 +93,11 @@ const getFlyoutTitle = (isOnFailure: boolean) => { }; export const EditProcessorForm: FunctionComponent = ({ - processor, + getProcessor, form, isOnFailure, onOpen, esDocsBasePath, - getDefaultProcessorOptions, closeFlyout, handleSubmit, resetProcessors, @@ -111,6 +109,8 @@ export const EditProcessorForm: FunctionComponent = ({ isExecutingPipeline, } = testPipelineData; + const processor = getProcessor(); + const processorOutput = processor && testOutputPerProcessor && @@ -149,12 +149,7 @@ export const EditProcessorForm: FunctionComponent = ({ /> ); } else { - flyoutContent = ( - - ); + flyoutContent = ; } return ( @@ -203,7 +198,7 @@ export const EditProcessorForm: FunctionComponent = ({ if (tab.id === 'output') { await handleSubmit(false); } else { - form.reset({ defaultValue: getDefaultProcessorOptions() }); + form.reset({ defaultValue: { fields: processor.options } }); } setActiveTab(tab.id); }} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx index 63e377eb4f259..332908d0756f2 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { FunctionComponent, useCallback, useEffect } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useRef } from 'react'; import { useForm, OnFormUpdateArg, FormData, useKibana } from '../../../../../shared_imports'; import { ProcessorInternal } from '../../types'; @@ -29,34 +29,36 @@ interface Props { onOpen: () => void; onClose: () => void; processor?: ProcessorInternal; - unsavedFormData?: Omit; } export const ProcessorFormContainer: FunctionComponent = ({ processor, onFormUpdate, onSubmit, - unsavedFormData, onClose, ...rest }) => { const { services } = useKibana(); - const getDefaultProcessorOptions = (): Fields => { - let defaultFields; + // We need to keep track of the processor form state if the user + // has made config changes, navigated between tabs (Configuration vs. Output) + // and has not yet submitted the form + const unsavedFormState = useRef(); - if (unsavedFormData) { - const { options } = unsavedFormData; - defaultFields = { fields: options }; + const getProcessor = useCallback((): ProcessorInternal => { + let options; + + if (unsavedFormState?.current) { + options = unsavedFormState.current; } else { - defaultFields = { fields: processor?.options ?? {} }; + options = processor?.options ?? {}; } - return defaultFields; - }; + return { ...processor, options } as ProcessorInternal; + }, [processor, unsavedFormState]); const { form } = useForm({ - defaultValue: getDefaultProcessorOptions(), + defaultValue: { fields: getProcessor().options }, }); const handleSubmit = useCallback( @@ -65,9 +67,13 @@ export const ProcessorFormContainer: FunctionComponent = ({ if (isValid) { const { type, customOptions, fields } = data as FormData; + const options = customOptions ? customOptions : fields; + + unsavedFormState.current = options; + onSubmit({ type, - options: customOptions ? customOptions : fields, + options, }); if (shouldCloseFlyout) { @@ -78,12 +84,12 @@ export const ProcessorFormContainer: FunctionComponent = ({ [form, onClose, onSubmit] ); - const resetProcessors = () => { + const resetProcessors = useCallback(() => { onSubmit({ type: processor!.type, options: processor?.options || {}, }); - }; + }, [onSubmit, processor]); useEffect(() => { const subscription = form.subscribe(onFormUpdate); @@ -99,9 +105,8 @@ export const ProcessorFormContainer: FunctionComponent = ({ return ( = ({ pre { - background: transparent; + &__callOut { + &--customIcon { + .euiCallOutHeader { + align-items: center; + } + } + &__codeBlock > pre { + background: transparent; + } } } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_output/processor_output.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_output/processor_output.tsx index 08a13fc6c5df1..bd0ce6ca2cd52 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_output/processor_output.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_output/processor_output.tsx @@ -112,7 +112,13 @@ export const ProcessorOutput: FunctionComponent = ({ const getOutputContent = () => { switch (status) { case 'skipped': - return ; + return ( + + ); case 'dropped': return ; case 'success': @@ -127,11 +133,16 @@ export const ProcessorOutput: FunctionComponent = ({ return ; case 'error': return ( - + {JSON.stringify(error, null, 2)} @@ -144,9 +155,10 @@ export const ProcessorOutput: FunctionComponent = ({ iconType={ErrorIgnoredIcon} title={i18nTexts.processorIgnoredErrorTitle} color="warning" + className="processorOutput__callOut processorOutput__callOut--customIcon" > Fields; } -export const ProcessorSettingsFields: FunctionComponent = ({ - processor, - getDefaultProcessorOptions, -}) => { +export const ProcessorSettingsFields: FunctionComponent = ({ processor }) => { return ( <> @@ -33,7 +28,6 @@ export const ProcessorSettingsFields: FunctionComponent = ({ {(arg: any) => { const { type } = arg; - const { fields: defaultOptions } = getDefaultProcessorOptions(); if (type?.length) { const formDescriptor = getProcessorDescriptor(type as any); @@ -59,7 +53,7 @@ export const ProcessorSettingsFields: FunctionComponent = ({ ); } - return ; + return ; } // If the user has not yet defined a type, we do not show any settings fields diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.scss new file mode 100644 index 0000000000000..5deb48a2f01a7 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.scss @@ -0,0 +1,3 @@ +.documentsDropdownPanel { + min-width: 200px; +} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx similarity index 94% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx index 0b51b6ca37b19..269a697a33c17 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx @@ -17,9 +17,11 @@ import { EuiSpacer, } from '@elastic/eui'; -import { Document } from '../../types'; +import { Document } from '../../../types'; -import { TestPipelineFlyoutTab } from '../test_pipeline/test_pipeline_flyout_tabs'; +import { TestPipelineFlyoutTab } from '../test_pipeline_flyout_tabs'; + +import './documents_dropdown.scss'; const i18nTexts = { dropdownLabel: i18n.translate( @@ -82,6 +84,7 @@ export const DocumentsDropdown: FunctionComponent = ({ withTitle repositionOnScroll data-test-subj="documentsDropdown" + panelClassName="documentsDropdownPanel" > = ({ validate: () => Promise.resolve(true), }); - // We need to keep track of the processor form state if the user - // has made config changes, navigated between tabs (Configuration vs. Output) - // and has not yet submitted the form - const [unsavedProcessorFormData, setUnsavedProcessorFormData] = useState< - Omit | undefined - >(undefined); - const onFormUpdate = useCallback<(arg: OnFormUpdateArg) => void>( ({ isValid, validate }) => { setFormState({ @@ -156,8 +149,6 @@ export const PipelineProcessorsContextProvider: FunctionComponent = ({ }); break; case 'managingProcessor': - setUnsavedProcessorFormData(processorTypeAndOptions); - processorsDispatch({ type: 'updateProcessor', payload: { @@ -179,7 +170,6 @@ export const PipelineProcessorsContextProvider: FunctionComponent = ({ const onCloseSettingsForm = useCallback(() => { setMode({ id: 'idle' }); setFormState({ validate: () => Promise.resolve(true) }); - setUnsavedProcessorFormData(undefined); }, [setFormState, setMode]); const onTreeAction = useCallback( @@ -250,7 +240,6 @@ export const PipelineProcessorsContextProvider: FunctionComponent = ({ onFormUpdate={onFormUpdate} onSubmit={onSubmit} onClose={onCloseSettingsForm} - unsavedFormData={unsavedProcessorFormData} /> ) : undefined} {mode.id === 'removingProcessor' && (