[Navigation] Register all plugins to NavGroups (opensearch-project#1926)

* Add a function to register all plugin Nav groups and categories Signed-off-by: Adam Tackett <[email protected]> * Updated addNavLinkGroups path rename dashboards Signed-off-by: Adam Tackett <[email protected]> * Fixing Naming Signed-off-by: Adam Tackett <[email protected]> * feat: enable default route Signed-off-by: SuZhou-Joe <[email protected]> * Update breadcrumb for Trace to default to service page Signed-off-by: Adam Tackett <[email protected]> * Update snapshots Signed-off-by: Adam Tackett <[email protected]> * feat: update Signed-off-by: SuZhou-Joe <[email protected]> * feat: add some features to all use case Signed-off-by: SuZhou-Joe <[email protected]> * Depreciated logs, application. Dashboards/Traces adjusted Signed-off-by: Adam Tackett <[email protected]> * Not registering logs/applications/dashboards when left nav used Signed-off-by: Adam Tackett <[email protected]> * Update snapshots Signed-off-by: Adam Tackett <[email protected]> * fixing lint errors Signed-off-by: Adam Tackett <[email protected]> * Put applications back Signed-off-by: Adam Tackett <[email protected]> * update snapshots Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin_nav.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Update public/plugin.tsx Co-authored-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> * Removed applications from new nav Signed-off-by: Adam Tackett <[email protected]> * Add applications back, remove in app nav for trace, remove breadcrumbs while new navigation is active Signed-off-by: Adam Tackett <[email protected]> * update snapshots Signed-off-by: Adam Tackett <[email protected]> * Adjust order of metrics/traces/services/applications as per guidance from kevin Signed-off-by: Adam Tackett <[email protected]> * function for nav breadcrumbs added Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: SuZhou-Joe <[email protected]> Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]> Co-authored-by: SuZhou-Joe <[email protected]> Co-authored-by: Sumukh Swamy <[email protected]>
TackAdam · Jul 19, 2024 · 09090a6 · 09090a6
1 parent c2edf41
commit 09090a6
Show file tree

Hide file tree

Showing 26 changed files with 593 additions and 162 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -53,6 +53,10 @@ export const observabilityTracesID = 'observability-traces';
 export const observabilityTracesTitle = 'Traces';
 export const observabilityTracesPluginOrder = 5093;
 
+export const observabilityServicesID = 'observability-services';
+export const observabilityServicesTitle = 'Services';
+export const observabilityServicesPluginOrder = 5092;
+
 export const observabilityNotebookID = 'observability-notebooks';
 export const observabilityNotebookTitle = 'Notebooks';
 export const observabilityNotebookPluginOrder = 5094;

diff --git a/common/utils/set_nav_bread_crumbs.ts b/common/utils/set_nav_bread_crumbs.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiBreadcrumb } from '@elastic/eui';
+import { coreRefs } from '../../public/framework/core_refs';
+
+export const setNavBreadCrumbs = (
+  parentBreadCrumb: EuiBreadcrumb[],
+  pageBreadCrumb: EuiBreadcrumb[]
+) => {
+  const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
+  if (isNavGroupEnabled) {
+    coreRefs?.chrome?.setBreadcrumbs([...pageBreadCrumb]);
+  } else {
+    coreRefs?.chrome?.setBreadcrumbs([...parentBreadCrumb, ...pageBreadCrumb]);
+  }
+};
diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -35,6 +35,7 @@ interface ObservabilityAppDeps {
   dataSourceManagement: DataSourceManagementPluginSetup;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
   savedObjectsMDSClient: CoreStart['savedObjects'];
+  defaultRoute?: string;
 }
 
 // for cypress to test redux store
@@ -67,8 +68,9 @@ export const App = ({
   setActionMenu,
   dataSourceEnabled,
   savedObjectsMDSClient,
+  defaultRoute,
 }: ObservabilityAppDeps) => {
-  const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
+  const { chrome, http, notifications, savedObjects: _coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
@@ -102,6 +104,7 @@ export const App = ({
             dataSourceEnabled={dataSourceEnabled}
             setActionMenu={setActionMenu}
             savedObjectsMDSClient={savedObjectsMDSClient}
+            defaultRoute={defaultRoute}
           />
         </MetricsListener>
       </I18nProvider>

diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -84,9 +84,11 @@ exports[`Log Config component renders empty log config 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {
@@ -713,9 +715,11 @@ exports[`Log Config component renders with query 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {

diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -84,9 +84,11 @@ exports[`Service Config component renders empty service config 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {
@@ -1283,9 +1285,11 @@ exports[`Service Config component renders with one service selected 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {

diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -83,9 +83,11 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {
@@ -995,9 +997,11 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {

diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
@@ -37,13 +37,9 @@ import moment from 'moment';
 import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import {
-  observabilityID,
-  observabilityTitle,
-  pageStyles,
-  UI_DATE_FORMAT,
-} from '../../../../common/constants/shared';
+import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
 import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
+import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
   loading: boolean;
@@ -57,7 +53,6 @@ interface AppTableProps extends AppAnalyticsComponentDeps {
 
 export function AppTable(props: AppTableProps) {
   const {
-    chrome,
     applications,
     parentBreadcrumbs,
     fetchApplications,
@@ -74,13 +69,15 @@ export function AppTable(props: AppTableProps) {
   const createButtonText = 'Create application';
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
-      {
-        text: 'Applications',
-        href: '#/',
-      },
-    ]);
+    setNavBreadCrumbs(
+      [...parentBreadcrumbs],
+      [
+        {
+          text: 'Applications',
+          href: '#/',
+        },
+      ]
+    );
     clear();
     fetchApplications();
   }, []);

diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
@@ -27,7 +27,6 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { VisualizationType } from 'common/types/custom_panels';
 import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
-import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
 import { ServicesContent } from '../../trace_analytics/components/services/services_content';
 import {
   filtersToDsl,
@@ -42,7 +41,6 @@ import {
   TAB_LOG_ID,
   TAB_LOG_TITLE,
   TAB_OVERVIEW_ID,
-  TAB_OVERVIEW_TITLE,
   TAB_PANEL_ID,
   TAB_PANEL_TITLE,
   TAB_SERVICE_ID,
@@ -65,7 +63,7 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/
 import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
 import { fetchAppById, initializeTabData } from '../helpers/utils';
 import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
-import { observabilityApplicationsID } from '../../../../common/constants/shared';
+import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
 
 const searchBarConfigs = {
   [TAB_EVENT_ID]: {
@@ -110,7 +108,6 @@ export function Application(props: AppDetailProps) {
     updateApp,
     setAppConfigs,
     setToasts,
-    toasts,
     setFilters,
     callback,
     queryManager,
@@ -217,17 +214,20 @@ export function Application(props: AppDetailProps) {
   }, [appId]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
-      {
-        text: 'Applications',
-        href: '#/',
-      },
-      {
-        text: application.name,
-        href: `#/${appId}`,
-      },
-    ]);
+    setNavBreadCrumbs(
+      [...parentBreadcrumbs],
+      [
+        {
+          text: 'Applications',
+          href: '#/',
+        },
+        {
+          text: application.name,
+          href: `#/${appId}`,
+        },
+      ]
+    );
+
     setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
     setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now');
   }, [appId, application.name]);

diff --git a/public/components/application_analytics/components/create.tsx b/public/components/application_analytics/components/create.tsx
@@ -37,11 +37,8 @@ import {
   OptionType,
 } from '../../../../common/types/application_analytics';
 import { fetchAppById } from '../helpers/utils';
-import {
-  observabilityApplicationsID,
-  observabilityID,
-  observabilityTitle,
-} from '../../../../common/constants/shared';
+import { observabilityApplicationsID } from '../../../../common/constants/shared';
+import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -56,7 +53,6 @@ interface CreateAppProps extends AppAnalyticsComponentDeps {
 export const CreateApp = (props: CreateAppProps) => {
   const {
     parentBreadcrumbs,
-    chrome,
     http,
     query,
     name,
@@ -91,17 +87,20 @@ export const CreateApp = (props: CreateAppProps) => {
   });
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
-      {
-        text: 'Applications',
-        href: '#/',
-      },
-      {
-        text: editMode ? 'Edit' : 'Create',
-        href: `#/${editMode ? 'edit' : 'create'}`,
-      },
-    ]);
+    setNavBreadCrumbs(
+      [...parentBreadcrumbs],
+      [
+        ...parentBreadcrumbs,
+        {
+          text: 'Applications',
+          href: '#/',
+        },
+        {
+          text: editMode ? 'Edit' : 'Create',
+          href: `#/${editMode ? 'edit' : 'create'}`,
+        },
+      ]
+    );
   }, []);
 
   useEffect(() => {

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -1225,9 +1225,11 @@ exports[`Panels View Component renders panel view container with visualizations
         "navControls": Object {
           "getCenter$": [MockFunction],
           "getLeft$": [MockFunction],
+          "getLeftBottom$": [MockFunction],
           "getRight$": [MockFunction],
           "registerCenter": [MockFunction],
           "registerLeft": [MockFunction],
+          "registerLeftBottom": [MockFunction],
           "registerRight": [MockFunction],
         },
         "navGroup": Object {
@@ -3020,9 +3022,11 @@ exports[`Panels View Component renders panel view container with visualizations
                         "navControls": Object {
                           "getCenter$": [MockFunction],
                           "getLeft$": [MockFunction],
+                          "getLeftBottom$": [MockFunction],
                           "getRight$": [MockFunction],
                           "registerCenter": [MockFunction],
                           "registerLeft": [MockFunction],
+                          "registerLeftBottom": [MockFunction],
                           "registerRight": [MockFunction],
                         },
                         "navGroup": Object {
@@ -3472,9 +3476,11 @@ exports[`Panels View Component renders panel view container without visualizatio
         "navControls": Object {
           "getCenter$": [MockFunction],
           "getLeft$": [MockFunction],
+          "getLeftBottom$": [MockFunction],
           "getRight$": [MockFunction],
           "registerCenter": [MockFunction],
           "registerLeft": [MockFunction],
+          "registerLeftBottom": [MockFunction],
           "registerRight": [MockFunction],
         },
         "navGroup": Object {
@@ -5151,9 +5157,11 @@ exports[`Panels View Component renders panel view container without visualizatio
                         "navControls": Object {
                           "getCenter$": [MockFunction],
                           "getLeft$": [MockFunction],
+                          "getLeftBottom$": [MockFunction],
                           "getRight$": [MockFunction],
                           "registerCenter": [MockFunction],
                           "registerLeft": [MockFunction],
+                          "registerLeftBottom": [MockFunction],
                           "registerRight": [MockFunction],
                         },
                         "navGroup": Object {

diff --git a/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -241,9 +241,11 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
       "navControls": Object {
         "getCenter$": [MockFunction],
         "getLeft$": [MockFunction],
+        "getLeftBottom$": [MockFunction],
         "getRight$": [MockFunction],
         "registerCenter": [MockFunction],
         "registerLeft": [MockFunction],
+        "registerLeftBottom": [MockFunction],
         "registerRight": [MockFunction],
       },
       "navGroup": Object {

diff --git a/public/components/index.tsx b/public/components/index.tsx
@@ -21,9 +21,10 @@ export const Observability = (
   timestampUtils: any,
   queryManager: QueryManager,
   startPage: string,
-  dataSourcePluggables,
+  dataSourcePluggables: any,
   dataSourceManagement: DataSourceManagementPluginSetup,
-  savedObjectsMDSClient: CoreStart['savedObjects']
+  savedObjectsMDSClient: CoreStart['savedObjects'],
+  defaultRoute?: string
 ) => {
   const { setHeaderActionMenu } = AppMountParametersProp;
   const { dataSource } = DepsStart;
@@ -42,6 +43,7 @@ export const Observability = (
       setActionMenu={setHeaderActionMenu}
       dataSourceEnabled={!!dataSource}
       savedObjectsMDSClient={savedObjectsMDSClient}
+      defaultRoute={defaultRoute}
     />,
     AppMountParametersProp.element
   );