[ML] Add support to allow editing a transform destination ingest pipe…

…line.
elastic · Feb 1, 2022 · 153cc5f · 153cc5f
1 parent 4b48974
commit 153cc5f
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 18 deletions.
diff --git a/...ions/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx b/...ions/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<EditTransformFlyoutFormProps> = ({
 }) => {
   const formFields = state.formFields;
   const [dateFieldNames, setDateFieldNames] = useState<string[]>([]);
+  const [ingestPipelineNames, setIngestPipelineNames] = useState<string[]>([]);
 
   const appDeps = useAppDependencies();
   const indexPatternsClient = appDeps.data.indexPatterns;
+  const api = useApi();
 
   useEffect(
     function getDateFields() {
@@ -54,6 +59,26 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
     [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<EditTransformFlyoutFormProps> = ({
             value={formFields.destinationIndex.value}
           />
 
-          <EditTransformFlyoutFormTextInput
-            dataTestSubj="transformEditFlyoutDestinationPipelineInput"
-            errorMessages={formFields.destinationPipeline.errorMessages}
-            label={i18n.translate(
-              'xpack.transform.transformList.editFlyoutFormDestinationPipelineLabel',
-              {
-                defaultMessage: 'Pipeline',
-              }
-            )}
-            onChange={(value) => dispatch({ field: 'destinationPipeline', value })}
-            value={formFields.destinationPipeline.value}
-          />
+          <EuiSpacer size="m" />
+
+          <div data-test-subj="transformEditAccordionIngestPipelineContent">
+            {
+              // If the list of ingest pipelines is not available
+              // gracefully defaults to text input
+              ingestPipelineNames ? (
+                <EuiFormRow
+                  label={i18n.translate(
+                    'xpack.transform.transformList.editFlyoutFormDestinationIngestPipelineLabel',
+                    {
+                      defaultMessage: 'Ingest Pipeline',
+                    }
+                  )}
+                  isInvalid={formFields.destinationIngestPipeline.errorMessages.length > 0}
+                  error={formFields.destinationIngestPipeline.errorMessages}
+                >
+                  <EuiComboBox
+                    data-test-subj="transformEditFlyoutDestinationIngestPipelineFieldSelect"
+                    aria-label={i18n.translate(
+                      'xpack.transform.stepDetailsForm.editFlyoutFormDestinationIngestPipelineFieldSelectAriaLabel',
+                      {
+                        defaultMessage: 'Select an ingest pipeline',
+                      }
+                    )}
+                    placeholder={i18n.translate(
+                      'xpack.transform.stepDetailsForm.editFlyoutFormDestinationIngestPipelineFieldSelectPlaceholder',
+                      {
+                        defaultMessage: 'Select an ingest pipeline',
+                      }
+                    )}
+                    singleSelection={{ asPlainText: true }}
+                    options={ingestPipelineNames.map((label: string) => ({ label }))}
+                    selectedOptions={[{ label: formFields.destinationIngestPipeline.value }]}
+                    onChange={(o) =>
+                      dispatch({ field: 'destinationIngestPipeline', value: o[0]?.label ?? '' })
+                    }
+                  />
+                </EuiFormRow>
+              ) : (
+                <EditTransformFlyoutFormTextInput
+                  dataTestSubj="transformEditFlyoutDestinationIngestPipelineInput"
+                  errorMessages={formFields.destinationIngestPipeline.errorMessages}
+                  label={i18n.translate(
+                    'xpack.transform.transformList.editFlyoutFormDestinationIngestPipelineLabel',
+                    {
+                      defaultMessage: 'Ingest Pipeline',
+                    }
+                  )}
+                  onChange={(value) => dispatch({ field: 'destinationIngestPipeline', value })}
+                  value={formFields.destinationIngestPipeline.value}
+                />
+              )
+            }
+          </div>
         </div>
       </EuiAccordion>
 

diff --git a/...ctions/transform_management/components/edit_transform_flyout/use_edit_transform_flyout.ts b/...ctions/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, {