Merge branch 'main' into move-notebooks

sumukhswamy · Jul 22, 2024 · ee724a2 · ee724a2
2 parents b1b8f25 + 09090a6
commit ee724a2
Show file tree

Hide file tree

Showing 19 changed files with 531 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/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/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
   );

diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
@@ -27,6 +27,7 @@ import { setSelectedDataSourceMDSId } from './redux/slices/metrics_slice';
 import { Sidebar } from './sidebar/sidebar';
 import { TopMenu } from './top_menu/top_menu';
 import { MetricsGrid } from './view/metrics_grid';
+import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
 
 interface MetricsProps {
   parentBreadcrumb: ChromeBreadcrumb;
@@ -57,13 +58,15 @@ export const Home = ({
   const [reloadSidebar, setReloadSidebar] = useState<boolean>(false);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      parentBreadcrumb,
-      {
-        text: 'Metrics',
-        href: `#/`,
-      },
-    ]);
+    setNavBreadCrumbs(
+      [parentBreadcrumb],
+      [
+        {
+          text: 'Metrics',
+          href: `#/`,
+        },
+      ]
+    );
   }, [chrome, parentBreadcrumb, dataSourceMDSId]);
 
   useEffect(() => {

diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx
@@ -43,6 +43,7 @@ import {
   getSampleNotebooksModal,
 } from './helpers/modal_containers';
 import { NotebookType } from './main';
+import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
 
 interface NoteTableProps {
   loading: boolean;
@@ -77,13 +78,15 @@ export function NoteTable({
   const history = useHistory();
 
   useEffect(() => {
-    setBreadcrumbs([
-      parentBreadcrumb,
-      {
-        text: 'Notebooks',
-        href: '#/',
-      },
-    ]);
+    setNavBreadCrumbs(
+      [parentBreadcrumb],
+      [
+        {
+          text: 'Notebooks',
+          href: '#/',
+        },
+      ]
+    );
     fetchNotebooks();
   }, [setBreadcrumbs, parentBreadcrumb, fetchNotebooks]);
 

diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
@@ -50,6 +50,7 @@ import {
   generateInContextReport,
 } from './helpers/reporting_context_menu_helper';
 import { Paragraphs } from './paragraph_components/paragraphs';
+import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs';
 const panelStyles: CSS.Properties = {
   float: 'left',
   width: '100%',
@@ -713,17 +714,19 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
   };
 
   setBreadcrumbs(path: string) {
-    this.props.setBreadcrumbs([
-      this.props.parentBreadcrumb,
-      {
-        text: 'Notebooks',
-        href: '#/',
-      },
-      {
-        text: path,
-        href: `#/${this.props.openedNoteId}`,
-      },
-    ]);
+    setNavBreadCrumbs(
+      [this.props.parentBreadcrumb],
+      [
+        {
+          text: 'Notebooks',
+          href: '#/',
+        },
+        {
+          text: path,
+          href: `#/${this.props.openedNoteId}`,
+        },
+      ]
+    );
   }
 
   checkIfReportingPluginIsInstalled() {