diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx index a0e178d25a86e0..6847fce9b0f12e 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx @@ -7,13 +7,16 @@ import React, { FC, useEffect, useMemo, useState } from 'react'; -import { EuiForm, EuiAccordion, EuiSpacer, EuiSelect, EuiFormRow } from '@elastic/eui'; +import { EuiComboBox, EuiForm, EuiAccordion, EuiSpacer, EuiSelect, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { isEsIngestPipelines } from '../../../../../../common/api_schemas/type_guards'; import { EditTransformFlyoutFormTextInput } from './edit_transform_flyout_form_text_input'; import { UseEditTransformFlyoutReturnType } from './use_edit_transform_flyout'; import { useAppDependencies } from '../../../../app_dependencies'; +import { useApi } from '../../../../hooks/use_api'; + import { KBN_FIELD_TYPES } from '../../../../../../../../../src/plugins/data/common'; interface EditTransformFlyoutFormProps { @@ -27,9 +30,11 @@ export const EditTransformFlyoutForm: FC = ({ }) => { const formFields = state.formFields; const [dateFieldNames, setDateFieldNames] = useState([]); + const [ingestPipelineNames, setIngestPipelineNames] = useState([]); const appDeps = useAppDependencies(); const indexPatternsClient = appDeps.data.indexPatterns; + const api = useApi(); useEffect( function getDateFields() { @@ -54,6 +59,26 @@ export const EditTransformFlyoutForm: FC = ({ [indexPatternId, indexPatternsClient] ); + // fetch pipeline names once for form validation + useEffect(() => { + let unmounted = false; + + async function getIngestPipelineNames() { + const ingestPipelines = await api.getEsIngestPipelines(); + + if (!unmounted && isEsIngestPipelines(ingestPipelines)) { + setIngestPipelineNames(ingestPipelines.map(({ name }) => name)); + } + } + + getIngestPipelineNames(); + + return () => { + unmounted = true; + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const retentionDateFieldOptions = useMemo(() => { return Array.isArray(dateFieldNames) ? dateFieldNames.map((text: string) => ({ text, value: text })) @@ -120,18 +145,61 @@ export const EditTransformFlyoutForm: FC = ({ value={formFields.destinationIndex.value} /> - dispatch({ field: 'destinationPipeline', value })} - value={formFields.destinationPipeline.value} - /> + + +
+ { + // If the list of ingest pipelines is not available + // gracefully defaults to text input + ingestPipelineNames ? ( + 0} + error={formFields.destinationIngestPipeline.errorMessages} + > + ({ label }))} + selectedOptions={[{ label: formFields.destinationIngestPipeline.value }]} + onChange={(o) => + dispatch({ field: 'destinationIngestPipeline', value: o[0]?.label ?? '' }) + } + /> + + ) : ( + dispatch({ field: 'destinationIngestPipeline', value })} + value={formFields.destinationIngestPipeline.value} + /> + ) + } +
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts index 0910b21658fa63..38027b62e6b2e6 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts @@ -34,7 +34,7 @@ import { type EditTransformFormFields = | 'description' | 'destinationIndex' - | 'destinationPipeline' + | 'destinationIngestPipeline' | 'frequency' | 'docsPerSecond' | 'maxPageSearchSize' @@ -300,12 +300,17 @@ export const getDefaultState = (config: TransformConfigUnion): EditTransformFlyo // dest.* destinationIndex: initializeField('destinationIndex', 'dest.index', config, { - dependsOn: ['destinationPipeline'], + dependsOn: ['destinationIngestPipeline'], isOptional: false, }), - destinationPipeline: initializeField('destinationPipeline', 'dest.pipeline', config, { - dependsOn: ['destinationIndex'], - }), + destinationIngestPipeline: initializeField( + 'destinationIngestPipeline', + 'dest.pipeline', + config, + { + dependsOn: ['destinationIndex'], + } + ), // settings.* docsPerSecond: initializeField('docsPerSecond', 'settings.docs_per_second', config, {