Workspace overview blank (opensearch-project#317)

* Add workspace overview page (opensearch-project#19)

* feat: add workspace overview page

Signed-off-by: Lin Wang <[email protected]>

* refactor: move paths to common constants

Signed-off-by: Lin Wang <[email protected]>

* feat: add workspace overview item by custom nav in start phase

Signed-off-by: Lin Wang <[email protected]>

* refactor: change to currentWorkspace$ in workspace client

Signed-off-by: Lin Wang <[email protected]>

---------

Signed-off-by: Lin Wang <[email protected]>

* restore yml

Signed-off-by: Hailong Cui <[email protected]>

---------

Signed-off-by: Lin Wang <[email protected]>
Signed-off-by: Hailong Cui <[email protected]>
Co-authored-by: Lin Wang <[email protected]>

src/plugins/workspace/public/application.tsx

@@ -12,6 +12,7 @@ import { WorkspaceFatalError } from './components/workspace_fatal_error';
 import { WorkspaceCreatorApp } from './components/workspace_creator_app';
 import { WorkspaceUpdaterApp } from './components/workspace_updater_app';
 import { Services } from './types';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
 
 export const renderCreatorApp = ({ element }: AppMountParameters, services: Services) => {
   ReactDOM.render(
@@ -66,3 +67,16 @@ export const renderListApp = ({ element }: AppMountParameters, services: Service
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+
+export const renderOverviewApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceOverviewApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};

src/plugins/workspace/public/components/workspace_overview/workspace_overview.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useObservable } from 'react-use';
+import { of } from 'rxjs';
+
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+
+export const WorkspaceOverview = () => {
+  const {
+    services: { workspaces },
+  } = useOpenSearchDashboards();
+
+  const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
+
+  return (
+    <>
+      <EuiPanel>
+        <EuiTitle size="m">
+          <h3>Workspace</h3>
+        </EuiTitle>
+        <EuiSpacer />
+        {JSON.stringify(currentWorkspace)}
+      </EuiPanel>
+    </>
+  );
+};

src/plugins/workspace/public/components/workspace_overview_app.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceOverview } from './workspace_overview/workspace_overview';
+
+export const WorkspaceOverviewApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceOverviewTitle', {
+          defaultMessage: 'Workspace overview',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceOverview />
+    </I18nProvider>
+  );
+};

src/plugins/workspace/public/plugin.ts

@@ -190,6 +190,19 @@ export class WorkspacePlugin implements Plugin<{}, {}> {
       },
     });
 
+    // overview
+    core.application.register({
+      id: WORKSPACE_OVERVIEW_APP_ID,
+      title: i18n.translate('workspace.settings.workspaceOverview', {
+        defaultMessage: 'Workspace Overview',
+      }),
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const { renderOverviewApp } = await import('./application');
+        return mountWorkspaceApp(params, renderOverviewApp);
+      },
+    });
+
     // workspace fatal error
     core.application.register({
       id: WORKSPACE_FATAL_ERROR_APP_ID,