diff --git a/public/pages/use_cases/components/index.ts b/public/pages/use_cases/components/index.ts
new file mode 100644
index 00000000..2d64e1ab
--- /dev/null
+++ b/public/pages/use_cases/components/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UseCase } from './use_case';
diff --git a/public/pages/use_cases/components/use_case.tsx b/public/pages/use_cases/components/use_case.tsx
new file mode 100644
index 00000000..9298e6bb
--- /dev/null
+++ b/public/pages/use_cases/components/use_case.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import {
+ EuiText,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiTitle,
+ EuiCard,
+ EuiHorizontalRule,
+ EuiButton,
+} from '@elastic/eui';
+import { CoreServicesContext } from '../../../core_services';
+import { CoreStart } from '../../../../../../src/core/public';
+import { BREADCRUMBS } from '../../../utils';
+
+interface UseCaseProps {
+ title: string;
+ description: string;
+}
+
+export function UseCase(props: UseCaseProps) {
+ const core = React.useContext(CoreServicesContext) as CoreStart;
+ useEffect(() => {
+ core.chrome.setBreadcrumbs([
+ BREADCRUMBS.AI_APPLICATION_BUILDER,
+ BREADCRUMBS.USE_CASES,
+ ]);
+ });
+
+ return (
+
+ {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 efd3c310..13d81ec5 100644
--- a/public/pages/use_cases/use_cases.tsx
+++ b/public/pages/use_cases/use_cases.tsx
@@ -4,23 +4,60 @@
*/
import React, { useEffect } from 'react';
-import { EuiPageHeader, EuiText } from '@elastic/eui';
+import {
+ EuiPageHeader,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiTitle,
+ EuiFlexGrid,
+ EuiSpacer,
+} from '@elastic/eui';
import { CoreServicesContext } from '../../core_services';
import { CoreStart } from '../../../../../src/core/public';
import { BREADCRUMBS } from '../../utils';
+import { UseCase } from './components';
export function UseCases() {
const core = React.useContext(CoreServicesContext) as CoreStart;
useEffect(() => {
core.chrome.setBreadcrumbs([
BREADCRUMBS.AI_APPLICATION_BUILDER,
- BREADCRUMBS.USE_CASES,
+ BREADCRUMBS.WORKFLOWS,
]);
});
return (
-
- Use cases page placeholder...
-
+
+
+
+
+
+ Use Cases
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
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..a579c371
--- /dev/null
+++ b/public/pages/workflows/components/workflow_list.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import { EuiBasicTable } from '@elastic/eui';
+import { CoreServicesContext } from '../../../core_services';
+import { CoreStart } from '../../../../../../src/core/public';
+import { BREADCRUMBS } from '../../../utils';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface WorkflowListProps {}
+
+interface WorkflowItem {
+ name: string;
+ description: string;
+}
+
+export function WorkflowList(props: WorkflowListProps) {
+ const core = React.useContext(CoreServicesContext) as CoreStart;
+ useEffect(() => {
+ core.chrome.setBreadcrumbs([
+ BREADCRUMBS.AI_APPLICATION_BUILDER,
+ BREADCRUMBS.USE_CASES,
+ ]);
+ });
+
+ 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 405151d0..9330e5ea 100644
--- a/public/pages/workflows/workflows.tsx
+++ b/public/pages/workflows/workflows.tsx
@@ -4,10 +4,17 @@
*/
import React, { useEffect } from 'react';
-import { EuiPageHeader, EuiText } from '@elastic/eui';
+import {
+ EuiPageHeader,
+ EuiTitle,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSpacer,
+} from '@elastic/eui';
import { CoreServicesContext } from '../../core_services';
import { CoreStart } from '../../../../../src/core/public';
import { BREADCRUMBS } from '../../utils';
+import { WorkflowList } from './components';
export function Workflows() {
const core = React.useContext(CoreServicesContext) as CoreStart;
@@ -19,8 +26,22 @@ export function Workflows() {
});
return (
-
- Workflows page placeholder...
-
+
+
+
+
+
+ Workflows
+
+
+
+
+
+
+
+
+
+
+
);
}