From 45b17916f3ce10312e969184a589a7fccd3408d2 Mon Sep 17 00:00:00 2001 From: Tyler Ohlsen Date: Thu, 21 Sep 2023 14:42:41 -0700 Subject: [PATCH] Remove workflow builder; add workflow details Signed-off-by: Tyler Ohlsen --- public/app.tsx | 25 +++++------ public/pages/index.ts | 2 +- .../workflow_builder/workflow_builder.tsx | 43 ------------------- .../workflow_detail/components/header.tsx | 30 +++++++++++++ .../components}/index.ts | 2 +- public/pages/workflow_detail/index.ts | 6 +++ .../pages/workflow_detail/workflow_detail.tsx | 39 +++++++++++++++++ .../workflows/components/workflow_list.tsx | 20 ++++++++- public/utils/constants.ts | 8 +--- 9 files changed, 109 insertions(+), 66 deletions(-) delete mode 100644 public/pages/workflow_builder/workflow_builder.tsx create mode 100644 public/pages/workflow_detail/components/header.tsx rename public/pages/{workflow_builder => workflow_detail/components}/index.ts (60%) create mode 100644 public/pages/workflow_detail/index.ts create mode 100644 public/pages/workflow_detail/workflow_detail.tsx diff --git a/public/app.tsx b/public/app.tsx index 786baadd..0130d4e8 100644 --- a/public/app.tsx +++ b/public/app.tsx @@ -7,7 +7,13 @@ import React from 'react'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui'; import { Navigation, APP_PATH } from './utils'; -import { Overview, UseCases, Workflows, WorkflowBuilder } from './pages'; +import { + Overview, + UseCases, + Workflows, + WorkflowDetail, + WorkflowDetailRouterProps, +} from './pages'; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface Props extends RouteComponentProps {} @@ -34,13 +40,6 @@ export const AiFlowDashboardsApp = (props: Props) => { href: `#${APP_PATH.WORKFLOWS}`, isSelected: props.location.pathname === APP_PATH.WORKFLOWS, }, - { - name: Navigation.WorkflowBuilder, - id: 3, - href: `#${APP_PATH.WORKFLOW_BUILDER}`, - isSelected: - props.location.pathname === APP_PATH.WORKFLOW_BUILDER, - }, ], }, ]} @@ -61,12 +60,14 @@ export const AiFlowDashboardsApp = (props: Props) => { render={(routeProps: RouteComponentProps) => } /> } + path={APP_PATH.WORKFLOW_DETAIL} + render={( + routeProps: RouteComponentProps + ) => } /> } + path={APP_PATH.WORKFLOWS} + render={(routeProps: RouteComponentProps) => } /> {/* Defaulting to Overview page */} { - getCore().chrome.setBreadcrumbs([ - BREADCRUMBS.AI_APPLICATION_BUILDER, - BREADCRUMBS.WORKFLOW_BUILDER, - ]); - }); - - return ( -
- - - - -

Workflow Builder

- - - - - - - Placeholder for workflow builder page... - -
- ); -} diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx new file mode 100644 index 00000000..0f16c923 --- /dev/null +++ b/public/pages/workflow_detail/components/header.tsx @@ -0,0 +1,30 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiPageHeader, EuiButton } from '@elastic/eui'; + +interface WorkflowDetailHeaderProps { + componentName: string; +} + +export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) { + return ( +
+ {}}> + Prototype + , + {}}> + Save + , + ]} + /> +
+ ); +} diff --git a/public/pages/workflow_builder/index.ts b/public/pages/workflow_detail/components/index.ts similarity index 60% rename from public/pages/workflow_builder/index.ts rename to public/pages/workflow_detail/components/index.ts index a84bee82..67ffe5c5 100644 --- a/public/pages/workflow_builder/index.ts +++ b/public/pages/workflow_detail/components/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export { WorkflowBuilder } from './workflow_builder'; +export * from './header'; diff --git a/public/pages/workflow_detail/index.ts b/public/pages/workflow_detail/index.ts new file mode 100644 index 00000000..1d03e52f --- /dev/null +++ b/public/pages/workflow_detail/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './workflow_detail'; diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx new file mode 100644 index 00000000..c3fc9dc4 --- /dev/null +++ b/public/pages/workflow_detail/workflow_detail.tsx @@ -0,0 +1,39 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect } from 'react'; +import { RouteComponentProps } from 'react-router-dom'; +import { EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui'; +import { BREADCRUMBS } from '../../utils'; +import { getCore } from '../../services'; +import { WorkflowDetailHeader } from './components'; + +export interface WorkflowDetailRouterProps { + workflowId: string; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface WorkflowDetailProps + extends RouteComponentProps {} + +export function WorkflowDetail(props: WorkflowDetailProps) { + useEffect(() => { + getCore().chrome.setBreadcrumbs([ + BREADCRUMBS.AI_APPLICATION_BUILDER, + BREADCRUMBS.WORKFLOWS, + { text: 'workflow-name-placeholder' }, + ]); + }); + + return ( +
+ + + + Put ReactFlow canvas here... + +
+ ); +} diff --git a/public/pages/workflows/components/workflow_list.tsx b/public/pages/workflows/components/workflow_list.tsx index 90d765ad..0016e0f7 100644 --- a/public/pages/workflows/components/workflow_list.tsx +++ b/public/pages/workflows/components/workflow_list.tsx @@ -4,13 +4,15 @@ */ import React, { useState } from 'react'; -import { EuiBasicTable } from '@elastic/eui'; +import { EuiBasicTable, EuiLink } from '@elastic/eui'; +import { PLUGIN_ID } from '../../../../common'; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface WorkflowListProps {} interface WorkflowItem { name: string; + id: string; description: string; } @@ -20,11 +22,22 @@ export function WorkflowList(props: WorkflowListProps) { const [sortField, setSortField] = useState('name'); const [sortDirection, setSortDirection] = useState('asc'); + // TODO: move column details to separate file const columns = [ { field: 'name', name: 'Name', sortable: true, + render: (name: string, workflow: WorkflowItem) => ( + + {name} + + ), + }, + { + field: 'id', + name: 'ID', + sortable: false, }, { field: 'description', @@ -33,9 +46,12 @@ export function WorkflowList(props: WorkflowListProps) { }, ]; + // TODO: remove items and fetch from store const items = [ { - name: 'Workflow 1', + name: 'Workflow-1', + id: 'workflow-1-id', + description: 'some test description', }, ] as WorkflowItem[]; diff --git a/public/utils/constants.ts b/public/utils/constants.ts index 8db2f6dd..3b1596ec 100644 --- a/public/utils/constants.ts +++ b/public/utils/constants.ts @@ -7,7 +7,6 @@ export enum Navigation { AiApplicationBuilder = 'AI Application Builder', UseCases = 'Use Cases', Workflows = 'Workflows', - WorkflowBuilder = 'Workflow Builder', } export enum APP_PATH { @@ -15,16 +14,11 @@ export enum APP_PATH { USE_CASES = '/use-cases', WORKSPACE = '/workspace', WORKFLOWS = '/workflows', - WORKFLOW_DETAIL = '/workflows/:workflowId/', - WORKFLOW_BUILDER = '/workflow-builder', + WORKFLOW_DETAIL = '/workflows/:workflowId', } export const BREADCRUMBS = Object.freeze({ AI_APPLICATION_BUILDER: { text: 'AI application builder', href: '#/' }, USE_CASES: { text: 'Use cases', href: `#${APP_PATH.USE_CASES}` }, WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` }, - WORKFLOW_BUILDER: { - text: 'Workflow builder', - href: `#${APP_PATH.WORKFLOW_BUILDER}`, - }, });