Persist created resources; clean up unused tabs (#135) (#136)

(cherry picked from commit 16a0967)

Co-authored-by: Tyler Ohlsen <[email protected]>

common/interfaces.ts

@@ -119,6 +119,8 @@ export type Workflow = WorkflowTemplate & {
   lastLaunched?: number;
   // won't exist until launched/provisioned in backend
   state?: WORKFLOW_STATE;
+  // won't exist until launched/provisioned in backend
+  resourcesCreated?: WorkflowResource[];
 };
 
 export enum USE_CASE {
@@ -152,6 +154,20 @@ export enum WORKFLOW_STATE {
   COMPLETED = 'Completed',
 }
 
+export type WorkflowResource = {
+  id: string;
+  type: WORKFLOW_RESOURCE_TYPE;
+};
+
+// Based off of https://github.com/opensearch-project/flow-framework/blob/main/src/main/java/org/opensearch/flowframework/common/WorkflowResources.java
+export enum WORKFLOW_RESOURCE_TYPE {
+  PIPELINE_ID = 'Ingest pipeline',
+  INDEX_NAME = 'Index',
+  MODEL_ID = 'Model',
+  MODEL_GROUP_ID = 'Model group',
+  CONNECTOR_ID = 'Connector',
+}
+
 export type WorkflowDict = {
   [workflowId: string]: Workflow;
 };

public/app.tsx

@@ -8,7 +8,6 @@ import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
 import { Navigation, APP_PATH } from './utils';
 import {
-  Overview,
   Workflows,
   WorkflowDetail,
   WorkflowDetailRouterProps,
@@ -27,15 +26,9 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
             name: Navigation.FlowFramework,
             id: 0,
             items: [
-              {
-                name: Navigation.Overview,
-                id: 1,
-                href: `#${APP_PATH.OVERVIEW}`,
-                isSelected: props.location.pathname === APP_PATH.OVERVIEW,
-              },
               {
                 name: Navigation.Workflows,
-                id: 2,
+                id: 1,
                 href: `#${APP_PATH.WORKFLOWS}`,
                 isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
               },
@@ -69,10 +62,12 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
             <Workflows {...routeProps} />
           )}
         />
-        {/* Defaulting to Overview page */}
+        {/* Defaulting to Workflows page */}
         <Route
           path={`${APP_PATH.HOME}`}
-          render={(routeProps: RouteComponentProps) => <Overview />}
+          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
+            <Workflows {...routeProps} />
+          )}
         />
       </Switch>
     </EuiPageTemplate>

public/pages/index.ts

@@ -4,5 +4,4 @@
  */
 
 export * from './workflows';
-export * from './overview';
 export * from './workflow_detail';

public/pages/workflow_detail/resources/columns.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const columns = [
+  {
+    field: 'id',
+    name: 'ID',
+    sortable: true,
+  },
+  {
+    field: 'type',
+    name: 'Type',
+    sortable: true,
+  },
+];

public/pages/overview/index.ts → public/pages/workflow_detail/resources/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { Overview } from './overview';
+export { Resources } from './resources';

public/pages/workflow_detail/resources/resource_list.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  EuiInMemoryTable,
+  Direction,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { Workflow, WorkflowResource } from '../../../../common';
+import { columns } from './columns';
+
+interface ResourceListProps {
+  workflow?: Workflow;
+}
+
+/**
+ * The searchable list of resources for a particular workflow.
+ */
+export function ResourceList(props: ResourceListProps) {
+  const [allResources, setAllResources] = useState<WorkflowResource[]>([]);
+
+  // Hook to initialize all resources
+  useEffect(() => {
+    if (props.workflow?.resourcesCreated) {
+      setAllResources(props.workflow.resourcesCreated);
+    }
+  }, [props.workflow?.resourcesCreated]);
+
+  const sorting = {
+    sort: {
+      field: 'id',
+      direction: 'asc' as Direction,
+    },
+  };
+
+  return (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        <EuiInMemoryTable<WorkflowResource>
+          items={allResources}
+          rowHeader="id"
+          columns={columns}
+          sorting={sorting}
+          pagination={true}
+          message={'No existing resources found'}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

public/pages/workflow_detail/prototype/prototype.tsx → public/pages/workflow_detail/resources/resources.tsx

@@ -5,33 +5,34 @@
 
 import React from 'react';
 import {
+  EuiFlexGroup,
   EuiFlexItem,
   EuiPageContent,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { Workflow } from '../../../../common';
+import { ResourceList } from './resource_list';
 
-interface PrototypeProps {
+interface ResourcesProps {
   workflow?: Workflow;
 }
 
 /**
- * The prototype page. Dedicated for testing out a launched workflow.
- * Will have default simple interfaces for common application types, such as
- * conversational chatbots.
+ * A simple resources page to browse created resources for a given Workflow.
  */
-export function Prototype(props: PrototypeProps) {
+export function Resources(props: ResourcesProps) {
   return (
     <EuiPageContent>
       <EuiTitle>
-        <h2>Prototype</h2>
+        <h2>Resources</h2>
       </EuiTitle>
       <EuiSpacer size="m" />
-      <EuiFlexItem>
-        <EuiText>TODO: add prototype page</EuiText>
-      </EuiFlexItem>
+      <EuiFlexGroup direction="row">
+        <EuiFlexItem>
+          <ResourceList workflow={props.workflow} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPageContent>
   );
 }

public/pages/workflow_detail/workflow_detail.tsx

@@ -19,13 +19,12 @@ import {
   useAppDispatch,
 } from '../../store';
 import { ResizableWorkspace } from './workspace';
-import { Launches } from './launches';
-import { Prototype } from './prototype';
 import {
   DEFAULT_NEW_WORKFLOW_NAME,
   FETCH_ALL_QUERY_BODY,
   NEW_WORKFLOW_ID_URL,
 } from '../../../common';
+import { Resources } from './resources';
 
 // styling
 import './workflow-detail-styles.scss';
@@ -39,8 +38,10 @@ interface WorkflowDetailProps
 
 enum WORKFLOW_DETAILS_TAB {
   EDITOR = 'editor',
-  LAUNCHES = 'launches',
-  PROTOTYPE = 'prototype',
+  // TODO: temporarily adding a resources tab until UX is finalized.
+  // This gives clarity into what has been done on the cluster on behalf
+  // of the frontend provisioning workflows.
+  RESOURCES = 'resources',
 }
 
 const ACTIVE_TAB_PARAM = 'tab';
@@ -133,21 +134,12 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
       },
     },
     {
-      id: WORKFLOW_DETAILS_TAB.LAUNCHES,
-      label: 'Launches',
-      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.LAUNCHES,
+      id: WORKFLOW_DETAILS_TAB.RESOURCES,
+      label: 'Resources',
+      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES,
       onClick: () => {
-        setSelectedTabId(WORKFLOW_DETAILS_TAB.LAUNCHES);
-        replaceActiveTab(WORKFLOW_DETAILS_TAB.LAUNCHES, props);
-      },
-    },
-    {
-      id: WORKFLOW_DETAILS_TAB.PROTOTYPE,
-      label: 'Prototype',
-      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.PROTOTYPE,
-      onClick: () => {
-        setSelectedTabId(WORKFLOW_DETAILS_TAB.PROTOTYPE);
-        replaceActiveTab(WORKFLOW_DETAILS_TAB.PROTOTYPE, props);
+        setSelectedTabId(WORKFLOW_DETAILS_TAB.RESOURCES);
+        replaceActiveTab(WORKFLOW_DETAILS_TAB.RESOURCES, props);
       },
     },
   ];
@@ -169,9 +161,8 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
               />
             </ReactFlowProvider>
           )}
-          {selectedTabId === WORKFLOW_DETAILS_TAB.LAUNCHES && <Launches />}
-          {selectedTabId === WORKFLOW_DETAILS_TAB.PROTOTYPE && (
-            <Prototype workflow={workflow} />
+          {selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES && (
+            <Resources workflow={workflow} />
           )}
         </EuiPageBody>
       </EuiPage>

public/store/reducers/workflows_reducer.ts

@@ -235,12 +235,13 @@ const workflowsSlice = createSlice({
         state.errorMessage = '';
       })
       .addCase(getWorkflowState.fulfilled, (state, action) => {
-        const { workflowId, workflowState } = action.payload;
+        const { workflowId, workflowState, resourcesCreated } = action.payload;
         state.workflows = {
           ...state.workflows,
           [workflowId]: {
             ...state.workflows[workflowId],
             state: workflowState,
+            resourcesCreated,
           },
         };
         state.loading = false;

public/utils/constants.ts

@@ -5,20 +5,17 @@
 
 export enum Navigation {
   FlowFramework = 'Flow Framework',
-  Overview = 'Overview',
   Workflows = 'Workflows',
 }
 
 export enum APP_PATH {
   HOME = '/',
-  OVERVIEW = '/overview',
   WORKFLOWS = '/workflows',
   WORKFLOW_DETAIL = '/workflows/:workflowId',
 }
 
 export const BREADCRUMBS = Object.freeze({
   FLOW_FRAMEWORK: { text: 'Flow Framework', href: '#/' },
-  OVERVIEW: { text: 'Overview', href: `#${APP_PATH.OVERVIEW}` },
   WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` },
 });