Get working with flow framework API

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

public/pages/workflow_detail/workflow_detail.tsx

@@ -49,9 +49,7 @@ function replaceActiveTab(activeTab: string, props: WorkflowDetailProps) {
 export function WorkflowDetail(props: WorkflowDetailProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
-  const workflow = workflows.find(
-    (wf) => wf.id === props.match?.params?.workflowId
-  );
+  const workflow = workflows[props.match?.params?.workflowId];
   const workflowName = workflow ? workflow.name : '';
 
   const tabFromUrl = queryString.parse(useLocation().search)[

public/pages/workflows/workflow_list/workflow_list.tsx

@@ -34,6 +34,7 @@ const sorting = {
  */
 export function WorkflowList(props: WorkflowListProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
+  const workflowsAsList = Object.values(workflows);
 
   // search bar state
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -46,13 +47,13 @@ export function WorkflowList(props: WorkflowListProps) {
     getStateOptions()
   );
   const [filteredWorkflows, setFilteredWorkflows] = useState<Workflow[]>(
-    workflows || []
+    workflowsAsList || []
   );
 
   // When a filter selection or search query changes, update the list
   useEffect(() => {
     setFilteredWorkflows(
-      fetchFilteredWorkflows(workflows, selectedStates, searchQuery)
+      fetchFilteredWorkflows(workflowsAsList, selectedStates, searchQuery)
     );
   }, [selectedStates, searchQuery]);
 

public/pages/workflows/workflows.tsx

@@ -14,12 +14,12 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import queryString from 'query-string';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowList } from './workflow_list';
 import { NewWorkflow } from './new_workflow';
-import { AppState } from '../../store';
+import { AppState, getWorkflow } from '../../store';
 
 export interface WorkflowsRouterProps {}
 
@@ -47,6 +47,7 @@ function replaceActiveTab(activeTab: string, props: WorkflowsProps) {
  * to get started on a new workflow.
  */
 export function Workflows(props: WorkflowsProps) {
+  const dispatch = useDispatch();
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
   const tabFromUrl = queryString.parse(useLocation().search)[
@@ -61,7 +62,7 @@ export function Workflows(props: WorkflowsProps) {
       !selectedTabId ||
       !Object.values(WORKFLOWS_TAB).includes(selectedTabId)
     ) {
-      if (workflows?.length > 0) {
+      if (Object.keys(workflows).length > 0) {
         setSelectedTabId(WORKFLOWS_TAB.MANAGE);
         replaceActiveTab(WORKFLOWS_TAB.MANAGE, props);
       } else {
@@ -78,6 +79,10 @@ export function Workflows(props: WorkflowsProps) {
     ]);
   });
 
+  useEffect(() => {
+    dispatch(getWorkflow('dummy-id'));
+  }, []);
+
   return (
     <EuiPage>
       <EuiPageBody>

public/route_service.ts

@@ -4,15 +4,30 @@
  */
 
 import { CoreStart, HttpFetchError } from '../../../src/core/public';
-import { FETCH_INDICES_PATH, SEARCH_INDICES_PATH } from '../common';
+import {
+  FETCH_INDICES_PATH,
+  GET_WORKFLOW_PATH,
+  SEARCH_INDICES_PATH,
+} from '../common';
 
 export interface RouteService {
+  getWorkflow: (workflowId: string) => Promise<any | HttpFetchError>;
   searchIndex: (indexName: string, body: {}) => Promise<any | HttpFetchError>;
   fetchIndices: (pattern: string) => Promise<any | HttpFetchError>;
 }
 
 export function configureRoutes(core: CoreStart): RouteService {
   return {
+    getWorkflow: async (workflowId: string) => {
+      try {
+        const response = await core.http.get<{ respString: string }>(
+          `${GET_WORKFLOW_PATH}/${workflowId}`
+        );
+        return response;
+      } catch (e: any) {
+        return e as HttpFetchError;
+      }
+    },
     searchIndex: async (indexName: string, body: {}) => {
       try {
         const response = await core.http.get<{ respString: string }>(

public/store/reducers/opensearch_reducer.ts

@@ -43,6 +43,7 @@ const opensearchSlice = createSlice({
     builder
       .addCase(fetchIndices.pending, (state, action) => {
         state.loading = true;
+        state.errorMessage = '';
       })
       .addCase(fetchIndices.fulfilled, (state, action) => {
         const indicesMap = new Map<string, Index>();
@@ -51,6 +52,7 @@ const opensearchSlice = createSlice({
         });
         state.indices = Object.fromEntries(indicesMap.entries());
         state.loading = false;
+        state.errorMessage = '';
       })
       .addCase(fetchIndices.rejected, (state, action) => {
         state.errorMessage = action.payload as string;

public/store/reducers/workflows_reducer.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import {
   Workflow,
   ReactFlowComponent,
@@ -14,8 +14,10 @@ import {
   initComponentData,
   WORKFLOW_STATE,
 } from '../../../common';
+import { HttpFetchError } from '../../../../../src/core/public';
+import { getRouteService } from '../../services';
 
-// TODO: remove after fetching from server-side
+// TODO: remove hardcoded initial state below after fetching from server side
 const id1 = generateId('text_embedding_processor');
 const id2 = generateId('text_embedding_processor');
 const id3 = generateId('knn_index');
@@ -40,47 +42,86 @@ const dummyNodes = [
   },
 ] as ReactFlowComponent[];
 
+let workflows = {} as { [workflowId: string]: Workflow };
+workflows['workflow-1-id'] = {
+  name: 'Workflow-1',
+  id: 'workflow-1-id',
+  description: 'description for workflow 1',
+  state: WORKFLOW_STATE.SUCCEEDED,
+  workspaceFlowState: {
+    nodes: dummyNodes,
+    edges: [] as ReactFlowEdge[],
+  },
+  template: {},
+} as Workflow;
+workflows['workflow-2-id'] = {
+  name: 'Workflow-2',
+  id: 'workflow-2-id',
+  description: 'description for workflow 2',
+  state: WORKFLOW_STATE.FAILED,
+  workspaceFlowState: {
+    nodes: dummyNodes,
+    edges: [] as ReactFlowEdge[],
+  },
+  template: {},
+} as Workflow;
+
 const initialState = {
-  // TODO: fetch from server-side later
-  workflows: [
-    {
-      name: 'Workflow-1',
-      id: 'workflow-1-id',
-      description: 'description for workflow 1',
-      state: WORKFLOW_STATE.SUCCEEDED,
-      workspaceFlowState: {
-        nodes: dummyNodes,
-        edges: [] as ReactFlowEdge[],
-      },
-      template: {},
-    },
-    {
-      name: 'Workflow-2',
-      id: 'workflow-2-id',
-      description: 'description for workflow 2',
-      state: WORKFLOW_STATE.FAILED,
-      workspaceFlowState: {
-        nodes: dummyNodes,
-        edges: [] as ReactFlowEdge[],
-      },
-      template: {},
-    },
-  ] as Workflow[],
   loading: false,
+  errorMessage: '',
+  workflows,
 };
 
+// TODO: uncomment when workflow fetching is working
+// const initialState = {
+//   loading: false,
+//   errorMessage: '',
+//   workflows: {} as { [workflowId: string]: Workflow },
+// };
+
+const WORKFLOWS_PREFIX = 'workflows';
+const GET_WORKFLOW_ACTION = `${WORKFLOWS_PREFIX}/getWorkflow`;
+
+export const getWorkflow = createAsyncThunk(
+  GET_WORKFLOW_ACTION,
+  async (workflowId: string, { rejectWithValue }) => {
+    const response: any | HttpFetchError = await getRouteService().getWorkflow(
+      workflowId
+    );
+    if (response instanceof HttpFetchError) {
+      return rejectWithValue(
+        'Error getting workflow: ' + response.body.message
+      );
+    } else {
+      return response;
+    }
+  }
+);
+
 const workflowsSlice = createSlice({
   name: 'workflows',
   initialState,
-  reducers: {
-    setWorkflows(state, action) {
-      state.workflows = action.payload;
-    },
-    setLoading(state, action) {
-      state.loading = action.payload;
-    },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(getWorkflow.pending, (state, action) => {
+        state.loading = true;
+        state.errorMessage = '';
+      })
+      .addCase(getWorkflow.fulfilled, (state, action) => {
+        const workflow = action.payload;
+        state.workflows = {
+          ...state.workflows,
+          [workflow.id]: workflow,
+        };
+        state.loading = false;
+        state.errorMessage = '';
+      })
+      .addCase(getWorkflow.rejected, (state, action) => {
+        state.errorMessage = action.payload as string;
+        state.loading = false;
+      });
   },
 });
 
 export const workflowsReducer = workflowsSlice.reducer;
-export const { setWorkflows, setLoading } = workflowsSlice.actions;

server/cluster/flow_framework_plugin.ts

@@ -11,7 +11,7 @@ export function flowFrameworkPlugin(Client: any, config: any, components: any) {
   Client.prototype.flowFramework = components.clientAction.namespaceFactory();
   const flowFramework = Client.prototype.flowFramework.prototype;
 
-  flowFramework.deleteDetector = ca({
+  flowFramework.getWorkflow = ca({
     url: {
       fmt: `${FLOW_FRAMEWORK_WORKFLOW_ROUTE_PREFIX}/<%=workflow_id%>`,
       req: {

server/routes/flow_framework_routes_service.ts

@@ -18,14 +18,13 @@ export function registerFlowFrameworkRoutes(
   router: IRouter,
   flowFrameworkRoutesService: FlowFrameworkRoutesService
 ): void {
-  router.post(
+  router.get(
     {
       path: `${GET_WORKFLOW_PATH}/{workflow_id}`,
       validate: {
         params: schema.object({
-          index_name: schema.string(),
+          workflow_id: schema.string(),
         }),
-        body: schema.any(),
       },
     },
     flowFrameworkRoutesService.getWorkflow
@@ -46,8 +45,10 @@ export class FlowFrameworkRoutesService {
   ): Promise<IOpenSearchDashboardsResponse<any>> => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { workflow_id } = req.params;
+    console.log('workflow ID: ', workflow_id);
 
     try {
+      console.log('making rquest...');
       const response = await this.client
         .asScoped(req)
         .callAsCurrentUser('flowFramework.getWorkflow', { workflow_id });