AD side navigation redesign (#810)

* update snapshot Signed-off-by: Jackie Han <jkhanjob@gmail.com> * AD side navigation redesign Signed-off-by: Jackie Han <jkhanjob@gmail.com> * update ut and snapshot Signed-off-by: Jackie Han <jkhanjob@gmail.com> --------- Signed-off-by: Jackie Han <jkhanjob@gmail.com>
opensearch-project · Jul 19, 2024 · 530dd12 · 530dd12
1 parent 7e6cdfd
commit 530dd12
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 14 deletions.
diff --git a/public/anomaly_detection_app.tsx b/public/anomaly_detection_app.tsx
@@ -18,7 +18,7 @@ import { Provider } from 'react-redux';
 import configureStore from './redux/configureStore';
 import { CoreServicesContext } from './components/CoreServices/CoreServices';
 
-export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
+export function renderApp(coreStart: CoreStart, params: AppMountParameters, landingPage: string | undefined, hideInAppSideNavBar: boolean) {
   const http = coreStart.http;
   const store = configureStore(http);
 
@@ -38,6 +38,8 @@ export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
             <CoreServicesContext.Provider value={coreStart}>
               <Main
                 setHeaderActionMenu={params.setHeaderActionMenu}
+                landingPage={landingPage}
+                hideInAppSideNavBar={hideInAppSideNavBar}
                 {...props}
               />
             </CoreServicesContext.Provider>

diff --git a/public/pages/Overview/containers/AnomalyDetectionOverview.tsx b/public/pages/Overview/containers/AnomalyDetectionOverview.tsx
@@ -282,7 +282,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle size="l" data-test-subj="overviewTitle">
-              <h1>Anomaly detection</h1>
+              <h1>Get started</h1>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

diff --git a/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx b/public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx
@@ -78,7 +78,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
       });
       const { container, getByText, queryByText } = renderWithRouter();
       expect(container).toMatchSnapshot();
-      getByText('Anomaly detection');
+      getByText('Get started');
       getByText('Monitor HTTP responses');
       getByText('Monitor eCommerce orders');
       getByText('Monitor host health');
@@ -109,7 +109,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
       const { container, getByText, getAllByText } = renderWithRouter();
       await waitFor(() => {});
       expect(container).toMatchSnapshot();
-      getByText('Anomaly detection');
+      getByText('Get started');
       getByText('Monitor HTTP responses');
       getByText('Monitor eCommerce orders');
       getByText('Monitor host health');
@@ -136,7 +136,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
       const { container, getByText, queryByText } = renderWithRouter();
       await waitFor(() => {});
       expect(container).toMatchSnapshot();
-      getByText('Anomaly detection');
+      getByText('Get started');
       getByText('Monitor HTTP responses');
       getByText('Monitor eCommerce orders');
       getByText('Monitor host health');

diff --git a/.../pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap b/.../pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
           class="euiTitle euiTitle--large"
           data-test-subj="overviewTitle"
         >
-          Anomaly detection
+          Get started
         </h1>
       </div>
       <div
@@ -775,7 +775,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
           class="euiTitle euiTitle--large"
           data-test-subj="overviewTitle"
         >
-          Anomaly detection
+          Get started
         </h1>
       </div>
       <div
@@ -1530,7 +1530,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
           class="euiTitle euiTitle--large"
           data-test-subj="overviewTitle"
         >
-          Anomaly detection
+          Get started
         </h1>
       </div>
       <div

diff --git a/public/pages/main/Main.tsx b/public/pages/main/Main.tsx
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { Switch, Route, RouteComponentProps } from 'react-router-dom';
+import { Switch, Route, RouteComponentProps, Redirect } from 'react-router-dom';
 import React from 'react';
 import { AppState } from '../../redux/reducers';
 import { DetectorList } from '../DetectorsList';
@@ -36,14 +36,16 @@ enum Navigation {
 
 interface MainProps extends RouteComponentProps {
   setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+  landingPage: string | undefined;
+  hideInAppSideNavBar: boolean;
 }
 
 export function Main(props: MainProps) {
-  const { setHeaderActionMenu } = props;
+  const { setHeaderActionMenu, landingPage, hideInAppSideNavBar} = props;
 
   const hideSideNavBar = useSelector(
     (state: AppState) => state.adApp.hideSideNavBar
-  );
+  ) || hideInAppSideNavBar;
 
   const adState = useSelector((state: AppState) => state.ad);
   const totalDetectors = adState.totalDetectors;
@@ -164,7 +166,9 @@ export function Main(props: MainProps) {
                 <Route
                   path="/"
                   render={(props: RouteComponentProps) =>
-                    totalDetectors > 0 ? (
+                    landingPage ? (
+                      <Redirect from="/" to={landingPage} />
+                    ) : totalDetectors > 0 ? (
                       <DashboardOverview
                         setActionMenu={setHeaderActionMenu}
                         landingDataSourceId={dataSourceId}

diff --git a/public/plugin.ts b/public/plugin.ts
@@ -13,17 +13,20 @@ import {
   AppMountParameters,
   CoreSetup,
   CoreStart,
+  DEFAULT_APP_CATEGORIES,
+  DEFAULT_NAV_GROUPS,
   NotificationsSetup,
   NotificationsStart,
   Plugin,
+  WorkspaceAvailability,
 } from '../../../src/core/public';
 import {
   CONTEXT_MENU_TRIGGER,
   EmbeddableSetup,
   EmbeddableStart,
 } from '../../../src/plugins/embeddable/public';
 import { ACTION_AD } from './action/ad_dashboard_action';
-import { PLUGIN_NAME } from './utils/constants';
+import { APP_PATH, DASHBOARD_PAGE_NAV_ID, DETECTORS_PAGE_NAV_ID, OVERVIEW_PAGE_NAV_ID, PLUGIN_NAME } from './utils/constants';
 import { getActions } from './utils/contextMenu/getActions';
 import { overlayAnomaliesFunction } from './expressions/overlay_anomalies';
 import {
@@ -76,6 +79,8 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
   implements Plugin<AnomalyDetectionSetupDeps, AnomalyDetectionStartDeps>
 {
   public setup(core: CoreSetup, plugins: any) {
+    const hideInAppSideNavBar = core.chrome.navGroup.getNavGroupEnabled();
+
     core.application.register({
       id: PLUGIN_NAME,
       title: 'Anomaly Detection',
@@ -88,10 +93,105 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./anomaly_detection_app');
         const [coreStart] = await core.getStartServices();
-        return renderApp(coreStart, params);
+        return renderApp(coreStart, params, undefined, hideInAppSideNavBar);
       },
     });
 
+    // register applications with category and use case information
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability,[
+      {
+        id: PLUGIN_NAME,
+        category: DEFAULT_APP_CATEGORIES.detect,
+        showInAllNavGroup: true
+      }
+    ])
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS['security-analytics'],[
+      {
+        id: PLUGIN_NAME,
+        category: DEFAULT_APP_CATEGORIES.detect,
+        showInAllNavGroup: true
+      }
+    ])
+
+    // register sub applications as standard OSD applications with use case
+    if (core.chrome.navGroup.getNavGroupEnabled()) {
+      core.application.register({
+        id: OVERVIEW_PAGE_NAV_ID,
+        title: 'Get started',
+        order: 8040,
+        category: DEFAULT_APP_CATEGORIES.detect,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          const { renderApp } = await import('./anomaly_detection_app');
+          const [coreStart] = await core.getStartServices();
+          return renderApp(coreStart, params, APP_PATH.OVERVIEW, hideInAppSideNavBar);
+        },
+      }); 
+    }
+
+    if (core.chrome.navGroup.getNavGroupEnabled()) {
+      core.application.register({
+        id: DASHBOARD_PAGE_NAV_ID,
+        title: 'Dashboard',
+        order: 8040,
+        category: DEFAULT_APP_CATEGORIES.detect,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          const { renderApp } = await import('./anomaly_detection_app');
+          const [coreStart] = await core.getStartServices();
+          return renderApp(coreStart, params, APP_PATH.DASHBOARD, hideInAppSideNavBar);
+        },
+      }); 
+    }
+
+    if (core.chrome.navGroup.getNavGroupEnabled()) {
+      core.application.register({
+        id: DETECTORS_PAGE_NAV_ID,
+        title: 'Detectors',
+        order: 8040,
+        category: DEFAULT_APP_CATEGORIES.detect,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          const { renderApp } = await import('./anomaly_detection_app');
+          const [coreStart] = await core.getStartServices();
+          return renderApp(coreStart, params, APP_PATH.LIST_DETECTORS, hideInAppSideNavBar);
+        },
+      }); 
+    }
+
+    // link the sub applications to the parent application
+    core.chrome.navGroup.addNavLinksToGroup(
+      DEFAULT_NAV_GROUPS.observability,
+      [{
+          id: OVERVIEW_PAGE_NAV_ID,
+          parentNavLinkId: PLUGIN_NAME
+      },
+      {
+        id: DASHBOARD_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_NAME
+      },
+      {
+        id: DETECTORS_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_NAME
+      }]
+    );
+
+    core.chrome.navGroup.addNavLinksToGroup(
+      DEFAULT_NAV_GROUPS['security-analytics'],
+      [{
+          id: OVERVIEW_PAGE_NAV_ID,
+          parentNavLinkId: PLUGIN_NAME
+      },
+      {
+        id: DASHBOARD_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_NAME
+      },
+      {
+        id: DETECTORS_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_NAME
+      }]
+    );
+
     setUISettings(core.uiSettings);
 
     // Set the HTTP client so it can be pulled into expression fns to make

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -108,3 +108,9 @@ export const SPACE_STR = ' ';
 export const ANOMALY_DETECTION_ICON = 'anomalyDetection';
 
 export const DATA_SOURCE_ID = 'dataSourceId';
+
+export const OVERVIEW_PAGE_NAV_ID = `anomaly_detection_dashboard-overview`;
+
+export const DASHBOARD_PAGE_NAV_ID = `anomaly_detection_dashboard-dashboard`;
+
+export const DETECTORS_PAGE_NAV_ID = `anomaly_detection_dashboard-detectors`;