diff --git a/public/app.tsx b/public/app.tsx index bb97f2e6..786baadd 100644 --- a/public/app.tsx +++ b/public/app.tsx @@ -7,7 +7,7 @@ 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 } from './pages'; +import { Overview, UseCases, Workflows, WorkflowBuilder } from './pages'; // eslint-disable-next-line @typescript-eslint/no-empty-interface interface Props extends RouteComponentProps {} @@ -34,6 +34,13 @@ 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, + }, ], }, ]} @@ -57,6 +64,10 @@ export const AiFlowDashboardsApp = (props: Props) => { path={APP_PATH.WORKFLOWS} render={(routeProps: RouteComponentProps) => } /> + } + /> {/* Defaulting to Overview page */} +

{props.title}

+ + } + titleSize="s" + paddingSize="l" + > + + + + {props.description} + + + + { + // TODO: possibly link to the workflow builder with a pre-configured flow + }} + > + Go + + + + + + ); +} diff --git a/public/pages/use_cases/use_cases.tsx b/public/pages/use_cases/use_cases.tsx index d3356fba..479e0024 100644 --- a/public/pages/use_cases/use_cases.tsx +++ b/public/pages/use_cases/use_cases.tsx @@ -4,8 +4,16 @@ */ import React, { useEffect } from 'react'; -import { EuiPageHeader, EuiText } from '@elastic/eui'; +import { + EuiPageHeader, + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiFlexGrid, + EuiSpacer, +} from '@elastic/eui'; import { BREADCRUMBS } from '../../utils'; +import { UseCase } from './components'; import { getCore } from '../../services'; export function UseCases() { @@ -17,8 +25,37 @@ export function UseCases() { }); return ( - - Use cases page placeholder... - +
+ + + + +

Use Cases

+ + + + + + + + + + + + + + + + +
); } diff --git a/public/pages/workflow_builder/index.ts b/public/pages/workflow_builder/index.ts new file mode 100644 index 00000000..a84bee82 --- /dev/null +++ b/public/pages/workflow_builder/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { WorkflowBuilder } from './workflow_builder'; diff --git a/public/pages/workflow_builder/workflow_builder.tsx b/public/pages/workflow_builder/workflow_builder.tsx new file mode 100644 index 00000000..d50759ac --- /dev/null +++ b/public/pages/workflow_builder/workflow_builder.tsx @@ -0,0 +1,43 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect } from 'react'; +import { + EuiPageHeader, + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiText, + EuiSpacer, +} from '@elastic/eui'; +import { BREADCRUMBS } from '../../utils'; +import { getCore } from '../../services'; + +export function WorkflowBuilder() { + useEffect(() => { + getCore().chrome.setBreadcrumbs([ + BREADCRUMBS.AI_APPLICATION_BUILDER, + BREADCRUMBS.WORKFLOW_BUILDER, + ]); + }); + + return ( +
+ + + + +

Workflow Builder

+ + + + + + + Placeholder for workflow builder page... + +
+ ); +} diff --git a/public/pages/workflows/components/index.ts b/public/pages/workflows/components/index.ts new file mode 100644 index 00000000..477670fc --- /dev/null +++ b/public/pages/workflows/components/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { WorkflowList } from './workflow_list'; diff --git a/public/pages/workflows/components/workflow_list.tsx b/public/pages/workflows/components/workflow_list.tsx new file mode 100644 index 00000000..90d765ad --- /dev/null +++ b/public/pages/workflows/components/workflow_list.tsx @@ -0,0 +1,79 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; +import { EuiBasicTable } from '@elastic/eui'; + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface WorkflowListProps {} + +interface WorkflowItem { + name: string; + description: string; +} + +export function WorkflowList(props: WorkflowListProps) { + const [pageIndex, setPageIndex] = useState(0); + const [pageSize, setPageSize] = useState(5); + const [sortField, setSortField] = useState('name'); + const [sortDirection, setSortDirection] = useState('asc'); + + const columns = [ + { + field: 'name', + name: 'Name', + sortable: true, + }, + { + field: 'description', + name: 'Description', + sortable: false, + }, + ]; + + const items = [ + { + name: 'Workflow 1', + }, + ] as WorkflowItem[]; + + const sorting = { + sort: { + field: sortField, + direction: sortDirection, + }, + enableAllColumns: false, + readOnly: false, + }; + + const pagination = { + pageIndex, + pageSize, + totalItemCount: items.length, + pageSizeOptions: [5, 10, 20], + }; + + const onTableChange = ({ page = {}, sort = {} }) => { + const { index, size } = page; + const { field, direction } = sort; + + setPageIndex(index); + setPageSize(size); + setSortField(field); + setSortDirection(direction); + }; + + return ( + + items={items} + rowHeader="name" + columns={columns} + sorting={sorting} + pagination={pagination} + onChange={onTableChange} + noItemsMessage={'No existing workflows found'} + /> + ); +} diff --git a/public/pages/workflows/workflows.tsx b/public/pages/workflows/workflows.tsx index e192e8f9..2cb38b8f 100644 --- a/public/pages/workflows/workflows.tsx +++ b/public/pages/workflows/workflows.tsx @@ -4,9 +4,16 @@ */ import React, { useEffect } from 'react'; -import { EuiPageHeader, EuiText } from '@elastic/eui'; +import { + EuiPageHeader, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, +} from '@elastic/eui'; import { BREADCRUMBS } from '../../utils'; import { getCore } from '../../services'; +import { WorkflowList } from './components'; export function Workflows() { useEffect(() => { @@ -17,8 +24,22 @@ export function Workflows() { }); return ( - - Workflows page placeholder... - +
+ + + + +

Workflows

+ + + + + + + + + + +
); } diff --git a/public/utils/constants.ts b/public/utils/constants.ts index 0bbcc29c..8db2f6dd 100644 --- a/public/utils/constants.ts +++ b/public/utils/constants.ts @@ -7,6 +7,7 @@ export enum Navigation { AiApplicationBuilder = 'AI Application Builder', UseCases = 'Use Cases', Workflows = 'Workflows', + WorkflowBuilder = 'Workflow Builder', } export enum APP_PATH { @@ -15,10 +16,15 @@ export enum APP_PATH { WORKSPACE = '/workspace', WORKFLOWS = '/workflows', WORKFLOW_DETAIL = '/workflows/:workflowId/', + WORKFLOW_BUILDER = '/workflow-builder', } 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}`, + }, });