Support skipping ingest in WorkflowInputs (#194)

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Jun 21, 2024 · de98087 · de98087
1 parent 8afac97
commit de98087
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 48 deletions.
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+import { EuiRadioGroup, EuiRadioGroupOption } from '@elastic/eui';
+
+interface BooleanFieldProps {
+  fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
+  onFormChange: () => void;
+  enabledOption: EuiRadioGroupOption;
+  disabledOption: EuiRadioGroupOption;
+}
+
+/**
+ * An input field for a boolean value. Implemented as an EuiRadioGroup with 2 mutually exclusive options.
+ */
+export function BooleanField(props: BooleanFieldProps) {
+  return (
+    <Field name={props.fieldPath}>
+      {({ field, form }: FieldProps) => {
+        return (
+          <EuiRadioGroup
+            options={[props.enabledOption, props.disabledOption]}
+            idSelected={
+              field.value === undefined || field.value === true
+                ? props.enabledOption.id
+                : props.disabledOption.id
+            }
+            onChange={(id) => {
+              form.setFieldValue(field.name, !field.value);
+              props.onFormChange();
+            }}
+          />
+        );
+      }}
+    </Field>
+  );
+}
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/index.ts b/public/pages/workflow_detail/workflow_inputs/input_fields/index.ts
@@ -8,3 +8,4 @@ export { JsonField } from './json_field';
 export { SelectField } from './select_field';
 export { ModelField } from './model_field';
 export { MapField } from './map_field';
+export { BooleanField } from './boolean_field';
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -14,7 +14,9 @@ import {
   EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiPanel,
+  EuiSpacer,
   EuiStepsHorizontal,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import {
@@ -40,6 +42,7 @@ import {
   configToTemplateFlows,
   hasProvisionedIngestResources,
 } from '../../../utils';
+import { BooleanField } from './input_fields';
 
 // styling
 import '../workspace/workspace-styles.scss';
@@ -57,11 +60,16 @@ interface WorkflowInputsProps {
   setQuery: (query: string) => void;
 }
 
-export enum STEP {
+enum STEP {
   INGEST = 'Ingestion pipeline',
   SEARCH = 'Search pipeline',
 }
 
+enum INGEST_OPTION {
+  CREATE = 'create',
+  SKIP = 'skip',
+}
+
 /**
  * The workflow inputs component containing the multi-step flow to create ingest
  * and search flows for a particular workflow.
@@ -81,8 +89,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
 
   // maintain global states
   const onIngest = selectedStep === STEP.INGEST;
+  const ingestEnabled = values?.ingest?.enabled || false;
   const onIngestAndProvisioned = onIngest && ingestProvisioned;
   const onIngestAndUnprovisioned = onIngest && !ingestProvisioned;
+  const onIngestAndDisabled = onIngest && !ingestEnabled;
 
   useEffect(() => {
     setIngestProvisioned(hasProvisionedIngestResources(props.workflow));
@@ -265,50 +275,98 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                   onClick: () => {},
                 },
               ]}
-            ></EuiStepsHorizontal>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h2>
-                {onIngestAndUnprovisioned
-                  ? 'Define ingest pipeline'
-                  : onIngestAndProvisioned
-                  ? 'Edit ingest pipeline'
-                  : 'Define search pipeline'}
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={true}
-            style={{
-              overflowY: 'scroll',
-              overflowX: 'hidden',
-            }}
-          >
-            {onIngest ? (
-              <IngestInputs
-                onFormChange={props.onFormChange}
-                setIngestDocs={props.setIngestDocs}
-                uiConfig={props.uiConfig}
-                setUiConfig={props.setUiConfig}
-              />
-            ) : (
-              <SearchInputs
-                uiConfig={props.uiConfig}
-                setUiConfig={props.setUiConfig}
-                setQuery={props.setQuery}
-                onFormChange={props.onFormChange}
-              />
+            />
+            {onIngest && (
+              <>
+                <EuiSpacer size="m" />
+                <BooleanField
+                  fieldPath="ingest.enabled"
+                  onFormChange={props.onFormChange}
+                  enabledOption={{
+                    id: INGEST_OPTION.CREATE,
+                    label: (
+                      <EuiFlexGroup direction="column" gutterSize="none">
+                        <EuiText color="default">
+                          Create an ingest pipeline
+                        </EuiText>
+                        <EuiText size="xs" color="subdued">
+                          Configure and ingest data into an index.
+                        </EuiText>
+                      </EuiFlexGroup>
+                    ),
+                  }}
+                  disabledOption={{
+                    id: INGEST_OPTION.SKIP,
+                    label: (
+                      <EuiFlexGroup direction="column" gutterSize="none">
+                        <EuiText color="default">
+                          Skip ingestion pipeline
+                        </EuiText>
+                        <EuiText size="xs" color="subdued">
+                          Use an existing index with data ingested.
+                        </EuiText>
+                      </EuiFlexGroup>
+                    ),
+                  }}
+                />
+              </>
             )}
           </EuiFlexItem>
+          {!onIngestAndDisabled && (
+            <>
+              <EuiFlexItem grow={false}>
+                <EuiTitle>
+                  <h2>
+                    {onIngestAndUnprovisioned
+                      ? 'Define ingest pipeline'
+                      : onIngestAndProvisioned
+                      ? 'Edit ingest pipeline'
+                      : 'Define search pipeline'}
+                  </h2>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={true}
+                style={{
+                  overflowY: 'scroll',
+                  overflowX: 'hidden',
+                }}
+              >
+                {onIngest ? (
+                  <IngestInputs
+                    onFormChange={props.onFormChange}
+                    setIngestDocs={props.setIngestDocs}
+                    uiConfig={props.uiConfig}
+                    setUiConfig={props.setUiConfig}
+                  />
+                ) : (
+                  <SearchInputs
+                    uiConfig={props.uiConfig}
+                    setUiConfig={props.setUiConfig}
+                    setQuery={props.setQuery}
+                    onFormChange={props.onFormChange}
+                  />
+                )}
+              </EuiFlexItem>
+            </>
+          )}
           <EuiFlexItem grow={false} style={{ marginBottom: '-10px' }}>
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem>
                 <EuiHorizontalRule margin="m" />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiFlexGroup direction="row" justifyContent="flexEnd">
-                  {onIngestAndUnprovisioned ? (
+                  {onIngest && !ingestEnabled ? (
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        fill={true}
+                        onClick={() => setSelectedStep(STEP.SEARCH)}
+                      >
+                        {`Search pipeline >`}
+                      </EuiButton>
+                    </EuiFlexItem>
+                  ) : onIngestAndUnprovisioned ? (
                     <>
                       <EuiFlexItem grow={false}>
                         <EuiButtonEmpty
@@ -345,7 +403,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           fill={true}
                           onClick={() => setSelectedStep(STEP.SEARCH)}
                         >
-                          {`Next >`}
+                          {`Search pipeline >`}
                         </EuiButton>
                       </EuiFlexItem>
                     </>

diff --git a/public/utils/config_to_form_utils.ts b/public/utils/config_to_form_utils.ts
@@ -41,6 +41,7 @@ function ingestConfigToFormik(
 ): FormikValues {
   let ingestFormikValues = {} as FormikValues;
   if (ingestConfig) {
+    ingestFormikValues['enabled'] = ingestConfig.enabled;
     ingestFormikValues['docs'] = ingestDocs || getInitialValue('json');
     ingestFormikValues['enrich'] = processorsConfigToFormik(
       ingestConfig.enrich

diff --git a/public/utils/config_to_template_utils.ts b/public/utils/config_to_template_utils.ts
@@ -11,7 +11,6 @@ import {
   TemplateFlow,
   TemplateEdge,
   ModelFormValue,
-  IndexMappings,
   WORKFLOW_STEP_TYPE,
   WorkflowConfig,
   PROCESSOR_TYPE,
@@ -58,13 +57,15 @@ function configToProvisionTemplateFlow(config: WorkflowConfig): TemplateFlow {
     (node) => node.type === WORKFLOW_STEP_TYPE.CREATE_SEARCH_PIPELINE_STEP_TYPE
   ) as CreateSearchPipelineNode;
 
-  nodes.push(
-    indexConfigToTemplateNode(
-      config.ingest.index,
-      createIngestPipelineNode,
-      createSearchPipelineNode
-    )
-  );
+  if (config.ingest.enabled) {
+    nodes.push(
+      indexConfigToTemplateNode(
+        config.ingest.index,
+        createIngestPipelineNode,
+        createSearchPipelineNode
+      )
+    );
+  }
 
   return {
     nodes,
@@ -81,7 +82,7 @@ function ingestConfigToTemplateNodes(
   );
   const hasProcessors = ingestProcessors.length > 0;
 
-  return hasProcessors
+  return hasProcessors && ingestConfig.enabled
     ? [
         {
           id: ingestPipelineName,
@@ -179,7 +180,17 @@ function indexConfigToTemplateNode(
   ingestPipelineNode?: CreateIngestPipelineNode,
   searchPipelineNode?: CreateSearchPipelineNode
 ): CreateIndexNode {
-  let finalSettings = indexConfig.settings.value as {};
+  let finalSettings = {};
+  let finalMappings = {};
+  try {
+    // @ts-ignore
+    finalSettings = JSON.parse(indexConfig.settings?.value);
+  } catch (e) {}
+  try {
+    // @ts-ignore
+    finalMappings = JSON.parse(indexConfig.mappings?.value);
+  } catch (e) {}
+
   let finalPreviousNodeInputs = {};
 
   function updateFinalInputsAndSettings(
@@ -218,7 +229,7 @@ function indexConfigToTemplateNode(
       index_name: indexConfig.name.value as string,
       configurations: {
         settings: finalSettings,
-        mappings: indexConfig.mappings.value as IndexMappings,
+        mappings: finalMappings,
       },
     },
   };

diff --git a/public/utils/form_to_config_utils.ts b/public/utils/form_to_config_utils.ts
@@ -44,6 +44,7 @@ function formikToIngestUiConfig(
 ): IngestConfig {
   return {
     ...existingConfig,
+    enabled: ingestFormValues['enabled'],
     enrich: formikToProcessorsUiConfig(
       ingestFormValues['enrich'],
       existingConfig.enrich