Add basic page infrastructure (#28) (#30)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
(cherry picked from commit ac60ae0)

Co-authored-by: Tyler Ohlsen <ohltyler@amazon.com>

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) => <Workflows />}
         />
+        <Route
+          path={APP_PATH.WORKFLOW_BUILDER}
+          render={(routeProps: RouteComponentProps) => <WorkflowBuilder />}
+        />
         {/* Defaulting to Overview page */}
         <Route
           path={`${APP_PATH.HOME}`}

public/pages/index.ts

@@ -6,3 +6,4 @@
 export * from './use_cases';
 export * from './workflows';
 export * from './overview';
+export * from './workflow_builder';

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';

public/pages/use_cases/components/use_case.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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';
+interface UseCaseProps {
+  title: string;
+  description: string;
+}
+
+export function UseCase(props: UseCaseProps) {
+  return (
+    <EuiCard
+      title={
+        <EuiTitle size="s">
+          <h2>{props.title}</h2>
+        </EuiTitle>
+      }
+      titleSize="s"
+      paddingSize="l"
+    >
+      <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiHorizontalRule size="full" margin="m" />
+        <EuiFlexItem grow={true}>
+          <EuiText>{props.description}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexGroup direction="column" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              disabled={false}
+              isLoading={false}
+              onClick={() => {
+                // TODO: possibly link to the workflow builder with a pre-configured flow
+              }}
+            >
+              Go
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexGroup>
+    </EuiCard>
+  );
+}

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 (
-    <EuiPageHeader>
-      <EuiText>Use cases page placeholder...</EuiText>
-    </EuiPageHeader>
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Use Cases</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="l" />
+      <EuiFlexGrid columns={3} gutterSize="l">
+        <EuiFlexItem>
+          <UseCase
+            title="Semantic Search"
+            description="Semantic search description..."
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <UseCase
+            title="Multi-modal Search"
+            description="Multi-modal search description..."
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <UseCase
+            title="Search Summarization"
+            description="Search summarization description..."
+          />
+        </EuiFlexItem>
+      </EuiFlexGrid>
+    </div>
   );
 }

public/pages/workflow_builder/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkflowBuilder } from './workflow_builder';

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 (
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Workflow Builder</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="l" />
+      <EuiFlexItem>
+        <EuiText>Placeholder for workflow builder page...</EuiText>
+      </EuiFlexItem>
+    </div>
+  );
+}

public/pages/workflows/components/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkflowList } from './workflow_list';

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 (
+    <EuiBasicTable<WorkflowItem>
+      items={items}
+      rowHeader="name"
+      columns={columns}
+      sorting={sorting}
+      pagination={pagination}
+      onChange={onTableChange}
+      noItemsMessage={'No existing workflows found'}
+    />
+  );
+}

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 (
-    <EuiPageHeader>
-      <EuiText>Workflows page placeholder...</EuiText>
-    </EuiPageHeader>
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Workflows</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <WorkflowList />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }

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}`,
+  },
 });