From f175a7de9f392430a2ebc0d1ff5899baaf58ad63 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 6 Jun 2024 15:34:35 -0700
Subject: [PATCH] Enable workflow updates and document ingest (#166)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
(cherry picked from commit 2eb0bb919923900da26dc32dacefc1957d950296)
---
 .../workflow_detail/resizable_workspace.tsx   |  23 ++-
 public/pages/workflow_detail/tools/tools.tsx  | 114 ++++++++------
 .../ingest_inputs/ingest_data.tsx             |  49 +-----
 .../workflow_inputs/workflow_inputs.tsx       | 146 +++++++++++-------
 4 files changed, 179 insertions(+), 153 deletions(-)

diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index 51037344..12cb99d0 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -69,6 +69,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     setIsWorkflowInputsPanelOpen(!isWorkflowInputsPanelOpen);
   };
 
+  // ingest state
+  const [ingestResponse, setIngestResponse] = useState<string>('');
+
   // Tools side panel state
   const [isToolsPanelOpen, setIsToolsPanelOpen] = useState<boolean>(true);
   const collapseFnVertical = useRef(
@@ -160,6 +163,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                       workflow={props.workflow}
                       formikProps={formikProps}
                       onFormChange={onFormChange}
+                      setIngestResponse={setIngestResponse}
                     />
                   </EuiResizablePanel>
                   <EuiResizableButton />
@@ -231,21 +235,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               onToggleCollapsedInternal={() =>
                                 onToggleToolsChange()
                               }
-                              style={{ marginBottom: '-24px' }}
+                              style={{ marginBottom: '-16px' }}
                             >
-                              <EuiFlexGroup
-                                direction="column"
-                                gutterSize="s"
-                                style={{
-                                  height: '100%',
-                                }}
-                              >
-                                <EuiFlexItem>
-                                  <EuiPanel paddingSize="m">
-                                    <Tools workflow={workflow} />
-                                  </EuiPanel>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
+                              <Tools
+                                workflow={workflow}
+                                ingestResponse={ingestResponse}
+                              />
                             </EuiResizablePanel>
                           </>
                         );
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index 3e0308c7..e363d238 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -5,9 +5,10 @@
 
 import React, { useState } from 'react';
 import {
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer,
+  EuiPanel,
   EuiTab,
   EuiTabs,
   EuiText,
@@ -18,6 +19,7 @@ import { Resources } from './resources';
 
 interface ToolsProps {
   workflow?: Workflow;
+  ingestResponse: string;
 }
 
 enum TAB_ID {
@@ -55,51 +57,73 @@ const inputTabs = [
  */
 export function Tools(props: ToolsProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);
+
   return (
-    <>
-      <EuiTitle>
-        <h2>Tools</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <>
-        <EuiTabs size="m" expand={false}>
-          {inputTabs.map((tab, idx) => {
-            return (
-              <EuiTab
-                onClick={() => setSelectedTabId(tab.id)}
-                isSelected={tab.id === selectedTabId}
-                disabled={tab.disabled}
-                key={idx}
-              >
-                {tab.name}
-              </EuiTab>
-            );
-          })}
-        </EuiTabs>
-        <EuiSpacer size="m" />
-        <EuiFlexGroup direction="column">
-          {selectedTabId === TAB_ID.INGEST && (
-            <EuiFlexItem>
-              <EuiText>TODO: Run ingestion placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.QUERY && (
-            <EuiFlexItem>
-              <EuiText>TODO: Run queries placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.ERRORS && (
-            <EuiFlexItem>
-              <EuiText>TODO: View errors placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.RESOURCES && (
-            <EuiFlexItem>
-              <Resources workflow={props.workflow} />
+    <EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
+      <EuiFlexGroup
+        direction="column"
+        style={{
+          height: '100%',
+        }}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h2>Tools</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTabs size="m" expand={false}>
+            {inputTabs.map((tab, idx) => {
+              return (
+                <EuiTab
+                  onClick={() => setSelectedTabId(tab.id)}
+                  isSelected={tab.id === selectedTabId}
+                  disabled={tab.disabled}
+                  key={idx}
+                >
+                  {tab.name}
+                </EuiTab>
+              );
+            })}
+          </EuiTabs>
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem grow={true}>
+              <>
+                {selectedTabId === TAB_ID.INGEST && (
+                  // TODO: known issue with the editor where resizing the resizablecontainer does not
+                  // trigger vertical scroll updates. Updating the window, or reloading the component
+                  // by switching tabs etc. will refresh it correctly.
+                  <EuiCodeEditor
+                    mode="json"
+                    theme="textmate"
+                    width="100%"
+                    height="100%"
+                    value={props.ingestResponse}
+                    onChange={(input) => {}}
+                    readOnly={true}
+                    setOptions={{
+                      fontSize: '12px',
+                      autoScrollEditorIntoView: true,
+                    }}
+                    tabSize={2}
+                  />
+                )}
+                {selectedTabId === TAB_ID.QUERY && (
+                  <EuiText>TODO: Run queries placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.ERRORS && (
+                  <EuiText>TODO: View errors placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.RESOURCES && (
+                  <Resources workflow={props.workflow} />
+                )}
+              </>
             </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </>
-    </>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 }
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
index d8259f1f..e961881b 100644
--- a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
@@ -18,36 +18,10 @@ interface IngestDataProps {
   onFormChange: () => void;
 }
 
-enum OPTION {
-  NEW = 'new',
-  EXISTING = 'existing',
-}
-
-const options = [
-  {
-    id: OPTION.NEW,
-    label: 'Create a new index',
-  },
-  {
-    id: OPTION.EXISTING,
-    label: 'Choose existing index',
-  },
-];
-
 /**
  * Input component for configuring the data ingest (the OpenSearch index)
  */
 export function IngestData(props: IngestDataProps) {
-  const [selectedOption, setSelectedOption] = useState<OPTION>(OPTION.NEW);
-
-  useEffect(() => {
-    const indexName =
-      props.workflow.ui_metadata?.config?.ingest?.index?.name?.value;
-    if (indexName) {
-      setSelectedOption(OPTION.EXISTING);
-    }
-  }, [props.workflow.ui_metadata?.config?.ingest?.index]);
-
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
@@ -56,24 +30,15 @@ export function IngestData(props: IngestDataProps) {
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiRadioGroup
-          options={options}
-          idSelected={selectedOption}
-          onChange={(optionId) => setSelectedOption(optionId as OPTION)}
+        <TextField
+          field={
+            props.workflow.ui_metadata?.config?.ingest?.index
+              ?.name as IConfigField
+          }
+          fieldPath={'ingest.index.name'}
+          onFormChange={props.onFormChange}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
-        {selectedOption === OPTION.NEW ? (
-          <TextField
-            field={
-              props.workflow.ui_metadata?.config?.ingest?.index
-                ?.name as IConfigField
-            }
-            fieldPath={'ingest.index.name'}
-            onFormChange={props.onFormChange}
-          />
-        ) : null}
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index 0eddf53f..2acb7ef3 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -22,7 +22,14 @@ import {
 } from '../../../../common';
 import { IngestInputs } from './ingest_inputs';
 import { SearchInputs } from './search_inputs';
-import { updateWorkflow, useAppDispatch } from '../../../store';
+import {
+  deprovisionWorkflow,
+  ingest,
+  provisionWorkflow,
+  updateWorkflow,
+  useAppDispatch,
+} from '../../../store';
+import { getCore } from '../../../services';
 import { formikToUiConfig, reduceToTemplate } from '../../../utils';
 import { configToTemplateFlows } from '../utils';
 
@@ -33,6 +40,7 @@ interface WorkflowInputsProps {
   workflow: Workflow | undefined;
   formikProps: FormikProps<WorkflowFormValues>;
   onFormChange: () => void;
+  setIngestResponse: (ingestResponse: string) => void;
 }
 
 export enum CREATE_STEP {
@@ -53,77 +61,111 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
     CREATE_STEP.INGEST
   );
 
-  // ingestion data state. We need to persist separately from the form, since
-  // we do not need/want to persist this in form state or in backend
+  // ingest state
   const [ingestDocs, setIngestDocs] = useState<{}[]>([]);
 
-  // Utility fn to update the workflow
-  function executeUpdate(updatedWorkflow: Workflow): void {
-    dispatch(
-      updateWorkflow({
-        workflowId: updatedWorkflow.id as string,
-        workflowTemplate: reduceToTemplate(updatedWorkflow),
-      })
-    )
+  // Utility fn to update the workflow, including any updated/new resources
+  // Eventually, should be able to use fine-grained provisioning to do a single API call
+  // instead of the currently-implemented deprovision -> update -> provision
+  async function updateWorkflowAndResources(
+    updatedWorkflow: Workflow
+  ): Promise<boolean> {
+    let success = false;
+    await dispatch(deprovisionWorkflow(updatedWorkflow.id as string))
       .unwrap()
-      .then((result) => {})
-      .catch((error: any) => {});
+      .then(async (result) => {
+        await dispatch(
+          updateWorkflow({
+            workflowId: updatedWorkflow.id as string,
+            workflowTemplate: reduceToTemplate(updatedWorkflow),
+          })
+        )
+          .unwrap()
+          .then(async (result) => {
+            await dispatch(provisionWorkflow(updatedWorkflow.id as string))
+              .unwrap()
+              .then((result) => {
+                success = true;
+              })
+              .catch((error: any) => {
+                console.error('Error provisioning updated workflow: ', error);
+              });
+          })
+          .catch((error: any) => {
+            console.error('Error updating workflow: ', error);
+          });
+      })
+      .catch((error: any) => {
+        console.error('Error deprovisioning workflow: ', error);
+      });
+    return success;
   }
 
   // Utility fn to validate the form and update the workflow if valid
-  function validateAndUpdateWorkflow(
+  async function validateAndUpdateWorkflow(
     formikProps: FormikProps<WorkflowFormValues>
-  ): void {
+  ): Promise<boolean> {
+    let success = false;
     // Submit the form to bubble up any errors.
     // Ideally we handle Promise accept/rejects with submitForm(), but there is
     // open issues for that - see https://github.com/jaredpalmer/formik/issues/2057
     // The workaround is to additionally execute validateForm() which will return any errors found.
     formikProps.submitForm();
-    formikProps.validateForm().then((validationResults: {}) => {
-      if (Object.keys(validationResults).length > 0) {
-        console.error('Form invalid');
-      } else {
-        const updatedConfig = formikToUiConfig(
-          formikProps.values,
-          props.workflow?.ui_metadata?.config as WorkflowConfig
-        );
-        const updatedWorkflow = {
-          ...props.workflow,
-          ui_metadata: {
-            ...props.workflow?.ui_metadata,
-            config: updatedConfig,
-          },
-          workflows: configToTemplateFlows(updatedConfig),
-        } as Workflow;
-        executeUpdate(updatedWorkflow);
-      }
-    });
+    await formikProps
+      .validateForm()
+      .then(async (validationResults: {}) => {
+        if (Object.keys(validationResults).length > 0) {
+          console.error('Form invalid');
+        } else {
+          const updatedConfig = formikToUiConfig(
+            formikProps.values,
+            props.workflow?.ui_metadata?.config as WorkflowConfig
+          );
+          const updatedWorkflow = {
+            ...props.workflow,
+            ui_metadata: {
+              ...props.workflow?.ui_metadata,
+              config: updatedConfig,
+            },
+            workflows: configToTemplateFlows(updatedConfig),
+          } as Workflow;
+          success = await updateWorkflowAndResources(updatedWorkflow);
+        }
+      })
+      .catch((error) => {
+        console.error('Error validating form: ', error);
+      });
+
+    return success;
   }
 
   // TODO: running props.validateAndSubmit(props.formikProps) will need to be ran before every ingest and
   // search, if the form is dirty / values have changed. This will update the workflow if needed.
   // Note that the temporary data (the ingest docs and the search query) will not need to be persisted
   // in the form (need to confirm if query-side / using search template, will need to persist something)
-  function validateAndRunIngestion(): void {
-    console.log('running ingestion...');
+  async function validateAndRunIngestion(): Promise<boolean> {
+    let success = false;
     try {
-      validateAndUpdateWorkflow(props.formikProps);
-      const indexName = props.formikProps.values.ingest.index.name;
-      const doc = ingestDocs[0];
-      // dispatch(ingest({ index: indexName, doc: docObj }))
-      //   .unwrap()
-      //   .then(async (resp) => {
-      //     //setResponse(result);
-      //     console.log('response: ', resp);
-      //   })
-      //   .catch((error: any) => {
-      //     getCore().notifications.toasts.addDanger(error);
-      //     // setResponse({});
-      //     console.log('error: ', error);
-      //   });
-    } catch (err) {
-      console.log('error: ', err);
+      success = await validateAndUpdateWorkflow(props.formikProps);
+      if (success && ingestDocs.length > 0) {
+        const indexName = props.formikProps.values.ingest.index.name;
+        const doc = ingestDocs[0];
+        dispatch(ingest({ index: indexName, doc }))
+          .unwrap()
+          .then(async (resp) => {
+            props.setIngestResponse(JSON.stringify(resp, undefined, 2));
+          })
+          .catch((error: any) => {
+            getCore().notifications.toasts.addDanger(error);
+            props.setIngestResponse('');
+            throw error;
+          });
+      }
+    } catch (error) {
+      console.error('Error ingesting documents: ', error);
     }
+
+    return success;
   }
 
   function validateAndRunQuery(): void {