Add workspace overview page (#19)

* feat: add workspace overview page Signed-off-by: Lin Wang <wonglam@amazon.com> * refactor: move paths to common constants Signed-off-by: Lin Wang <wonglam@amazon.com> * feat: add workspace overview item by custom nav in start phase Signed-off-by: Lin Wang <wonglam@amazon.com> * refactor: change to currentWorkspace$ in workspace client Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com>
ruanyl · Sep 15, 2023 · 309efba · 309efba
1 parent c596448
commit 309efba
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
@@ -6,3 +6,8 @@
 export const WORKSPACE_APP_ID = 'workspace';
 export const WORKSPACE_APP_NAME = 'Workspace';
 export const WORKSPACE_ID_IN_SESSION_STORAGE = '_workspace_id_';
+
+export const PATHS = {
+  create: '/create',
+  overview: '/overview',
+};
diff --git a/src/plugins/workspace/public/components/routes.ts b/src/plugins/workspace/public/components/routes.ts
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { WorkspaceCreator } from './workspace_creator';
+import { PATHS } from '../../common/constants';
 
-export const paths = {
-  create: '/create',
-};
+import { WorkspaceCreator } from './workspace_creator';
+import { WorkspaceOverview } from './workspace_overview';
 
 export interface RouteConfig {
   path: string;
@@ -18,8 +17,13 @@ export interface RouteConfig {
 
 export const ROUTES: RouteConfig[] = [
   {
-    path: paths.create,
+    path: PATHS.create,
     Component: WorkspaceCreator,
     label: 'Create',
   },
+  {
+    path: PATHS.overview,
+    Component: WorkspaceOverview,
+    label: 'Overview',
+  },
 ];
diff --git a/src/plugins/workspace/public/components/workspace_overview.tsx b/src/plugins/workspace/public/components/workspace_overview.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageHeader, EuiButton, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+
+import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+
+export const WorkspaceOverview = () => {
+  const {
+    services: { workspaces },
+  } = useOpenSearchDashboards();
+
+  const currentWorkspace = useObservable(
+    workspaces ? workspaces.client.currentWorkspace$ : of(null)
+  );
+
+  return (
+    <>
+      <EuiPageHeader
+        pageTitle="Overview"
+        rightSideItems={[
+          <EuiButton color="danger">Delete</EuiButton>,
+          <EuiButton>Update</EuiButton>,
+        ]}
+      />
+      <EuiPanel>
+        <EuiTitle size="m">
+          <h3>Workspace</h3>
+        </EuiTitle>
+        <EuiSpacer />
+        {JSON.stringify(currentWorkspace)}
+      </EuiPanel>
+    </>
+  );
+};
diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
@@ -11,7 +11,7 @@ import {
   AppMountParameters,
   AppNavLinkStatus,
 } from '../../../core/public';
-import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE } from '../common/constants';
+import { WORKSPACE_APP_ID, WORKSPACE_ID_IN_SESSION_STORAGE, PATHS } from '../common/constants';
 import { WORKSPACE_ID_QUERYSTRING_NAME } from '../../../core/public';
 import { mountDropdownList } from './mount';
 
@@ -102,6 +102,12 @@ export class WorkspacesPlugin implements Plugin<{}, {}> {
 
   public start(core: CoreStart) {
     mountDropdownList(core);
+
+    core.chrome.setCustomNavLink({
+      title: i18n.translate('workspace.nav.title', { defaultMessage: 'Workspace Overview' }),
+      baseUrl: core.http.basePath.get(),
+      href: core.application.getUrlForApp(WORKSPACE_APP_ID, { path: PATHS.overview }),
+    });
     return {};
   }
 }