[8.16] [Observability] Update breadcrumbs for observability project b…

…ased navigation (#196785) (#198216) # Backport This will backport the following commits from `main` to `8.16`: - [[Observability] Update breadcrumbs for observability project based navigation (#196785)](#196785)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kerry Gallagher <[email protected]>
elastic · Oct 30, 2024 · d92ea83 · d92ea83
1 parent 07ea8eb
commit d92ea83
Show file tree

Hide file tree

Showing 38 changed files with 371 additions and 409 deletions.
diff --git a/x-pack/plugins/observability_solution/apm/public/context/breadcrumbs/context.tsx b/x-pack/plugins/observability_solution/apm/public/context/breadcrumbs/context.tsx
@@ -76,7 +76,7 @@ export function BreadcrumbsContextProvider({ children }: { children: React.React
       };
     });
 
-  useBreadcrumbs(formattedBreadcrumbs, { serverless });
+  useBreadcrumbs(formattedBreadcrumbs, { serverless, absoluteProjectStyleBreadcrumbs: false });
 
   return <BreadcrumbsContext.Provider value={api}>{children}</BreadcrumbsContext.Provider>;
 }
diff --git a/x-pack/plugins/observability_solution/apm/public/context/breadcrumbs/use_breadcrumb.ts b/x-pack/plugins/observability_solution/apm/public/context/breadcrumbs/use_breadcrumb.ts
@@ -8,15 +8,20 @@
 import { useCurrentRoute } from '@kbn/typed-react-router-config';
 import { useContext, useEffect, useRef } from 'react';
 import { castArray } from 'lodash';
+import useObservable from 'react-use/lib/useObservable';
 import { Breadcrumb, BreadcrumbsContext } from './context';
 import { useKibanaEnvironmentContext } from '../kibana_environment_context/use_kibana_environment_context';
+import { useKibana } from '../kibana_context/use_kibana';
 
 export function useBreadcrumb(
   callback: () => Breadcrumb | Breadcrumb[],
   fnDeps: any[],
   options?: { omitRootOnServerless?: boolean; omitOnServerless?: boolean }
 ) {
   const { isServerlessEnv } = useKibanaEnvironmentContext();
+  const {
+    services: { chrome },
+  } = useKibana();
   const { omitRootOnServerless = false, omitOnServerless = false } = options || {};
 
   const api = useContext(BreadcrumbsContext);
@@ -29,8 +34,11 @@ export function useBreadcrumb(
 
   const matchedRoute = useRef(match?.route);
 
+  const chromeStyle = useObservable(chrome.getChromeStyle$());
+
   useEffect(() => {
-    if (isServerlessEnv && omitOnServerless) {
+    const isProjectStyle = isServerlessEnv || chromeStyle === 'project';
+    if (isProjectStyle && omitOnServerless) {
       return;
     }
 
@@ -42,10 +50,9 @@ export function useBreadcrumb(
 
     if (matchedRoute.current) {
       const breadcrumbs = castArray(callback());
-
       api.set(
         matchedRoute.current,
-        isServerlessEnv && omitRootOnServerless && breadcrumbs.length >= 1
+        isProjectStyle && omitRootOnServerless && breadcrumbs.length >= 1
           ? breadcrumbs.slice(1)
           : breadcrumbs
       );
@@ -57,5 +64,5 @@ export function useBreadcrumb(
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [match, ...fnDeps]);
+  }, [match, chromeStyle, ...fnDeps]);
 }
diff --git a/...servability_solution/exploratory_view/public/components/shared/exploratory_view/index.tsx b/...servability_solution/exploratory_view/public/components/shared/exploratory_view/index.tsx
@@ -60,7 +60,7 @@ export function ExploratoryViewPage({
         }),
       },
     ],
-    { app }
+    { app, classicOnly: true }
   );
 
   const kbnUrlStateStorage = useSessionStorage

diff --git a/...ck/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx b/...ck/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx
@@ -50,18 +50,15 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => {
 
   const parentBreadcrumbResolver = useParentBreadcrumbResolver();
   const breadcrumbOptions = parentBreadcrumbResolver.getBreadcrumbOptions(asset.type);
-  useMetricsBreadcrumbs(
-    [
-      {
-        ...breadcrumbOptions.link,
-        text: breadcrumbOptions.text,
-      },
-      {
-        text: asset.name,
-      },
-    ],
-    { deeperContextServerless: true }
-  );
+  useMetricsBreadcrumbs([
+    {
+      ...breadcrumbOptions.link,
+      text: breadcrumbOptions.text,
+    },
+    {
+      text: asset.name,
+    },
+  ]);
 
   useEffect(() => {
     if (trackOnlyOnce.current) {

diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/observability_solution/infra/public/hooks/use_breadcrumbs.ts
diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_logs_breadcrumbs.tsx b/x-pack/plugins/observability_solution/infra/public/hooks/use_logs_breadcrumbs.tsx
@@ -6,10 +6,18 @@
  */
 
 import { ChromeBreadcrumb } from '@kbn/core/public';
-import { useBreadcrumbs } from './use_breadcrumbs';
+import { useBreadcrumbs, useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { LOGS_APP } from '../../common/constants';
 import { logsTitle } from '../translations';
 
 export const useLogsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
-  useBreadcrumbs(LOGS_APP, logsTitle, extraCrumbs);
+  const appLinkProps = useLinkProps({ app: LOGS_APP });
+  const breadcrumbs = [
+    {
+      ...appLinkProps,
+      text: logsTitle,
+    },
+    ...extraCrumbs,
+  ];
+  useBreadcrumbs(breadcrumbs, { classicOnly: true });
 };
diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_metrics_breadcrumbs.tsx b/x-pack/plugins/observability_solution/infra/public/hooks/use_metrics_breadcrumbs.tsx
@@ -5,42 +5,25 @@
  * 2.0.
  */
 
-import { useEffect, useMemo } from 'react';
 import { ChromeBreadcrumb } from '@kbn/core/public';
 import { useBreadcrumbs, useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { METRICS_APP } from '../../common/constants';
 import { metricsTitle } from '../translations';
 import { useKibanaContextForPlugin } from './use_kibana';
 
-export const useMetricsBreadcrumbs = (
-  extraCrumbs: ChromeBreadcrumb[],
-  options?: { deeperContextServerless: boolean }
-) => {
+export const useMetricsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
   const {
     services: { serverless },
   } = useKibanaContextForPlugin();
   const appLinkProps = useLinkProps({ app: METRICS_APP });
 
-  const breadcrumbs = useMemo(
-    () => [
-      {
-        ...appLinkProps,
-        text: metricsTitle,
-      },
-      ...extraCrumbs,
-    ],
-    [appLinkProps, extraCrumbs]
-  );
+  const breadcrumbs = [
+    {
+      ...appLinkProps,
+      text: metricsTitle,
+    },
+    ...extraCrumbs,
+  ];
 
-  useBreadcrumbs(breadcrumbs);
-
-  useEffect(() => {
-    // For deeper context breadcrumbs in serveless, the `serverless` plugin provides its own breadcrumb service.
-    // https://docs.elastic.dev/kibana-dev-docs/serverless-project-navigation#breadcrumbs
-    if (serverless && options?.deeperContextServerless) {
-      // The initial path is already set in the breadcrumbs
-      const [, ...serverlessBreadcrumbs] = breadcrumbs;
-      serverless.setBreadcrumbs(serverlessBreadcrumbs);
-    }
-  }, [breadcrumbs, options?.deeperContextServerless, serverless]);
+  useBreadcrumbs(breadcrumbs, { serverless });
 };
diff --git a/...ns/observability_solution/infra/public/pages/metrics/metric_detail/metric_detail_page.tsx b/...ns/observability_solution/infra/public/pages/metrics/metric_detail/metric_detail_page.tsx
@@ -54,18 +54,15 @@ export const MetricDetailPage = () => {
   });
 
   const breadcrumbOptions = parentBreadcrumbResolver.getBreadcrumbOptions(nodeType);
-  useMetricsBreadcrumbs(
-    [
-      {
-        ...breadcrumbOptions.link,
-        text: breadcrumbOptions.text,
-      },
-      {
-        text: name,
-      },
-    ],
-    { deeperContextServerless: true }
-  );
+  useMetricsBreadcrumbs([
+    {
+      ...breadcrumbOptions.link,
+      text: breadcrumbOptions.text,
+    },
+    {
+      text: name,
+    },
+  ]);
 
   const [sideNav, setSideNav] = useState<NavItem[]>([]);
 

diff --git a/x-pack/plugins/observability_solution/infra/public/translations.ts b/x-pack/plugins/observability_solution/infra/public/translations.ts
@@ -39,7 +39,7 @@ export const metricsTitle = i18n.translate('xpack.infra.header.infrastructureTit
 });
 
 export const inventoryTitle = i18n.translate('xpack.infra.metrics.infrastructureInventoryTitle', {
-  defaultMessage: 'Infrastructure Inventory',
+  defaultMessage: 'Infrastructure inventory',
 });
 
 export const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsExplorerTitle', {

diff --git a/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx b/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx
@@ -93,6 +93,7 @@ export function AlertDetails() {
     triggersActionsUi: { ruleTypeRegistry },
     observabilityAIAssistant,
     uiSettings,
+    serverless,
   } = useKibana().services;
 
   const { search } = useLocation();
@@ -158,20 +159,23 @@ export function AlertDetails() {
     }
   }, [alertDetail, ruleTypeRegistry]);
 
-  useBreadcrumbs([
-    {
-      href: http.basePath.prepend(paths.observability.alerts),
-      text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
-        defaultMessage: 'Alerts',
-      }),
-      deepLinkId: 'observability-overview:alerts',
-    },
-    {
-      text: alertDetail
-        ? getPageTitle(alertDetail.formatted.fields[ALERT_RULE_CATEGORY])
-        : defaultBreadcrumb,
-    },
-  ]);
+  useBreadcrumbs(
+    [
+      {
+        href: http.basePath.prepend(paths.observability.alerts),
+        text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
+          defaultMessage: 'Alerts',
+        }),
+        deepLinkId: 'observability-overview:alerts',
+      },
+      {
+        text: alertDetail
+          ? getPageTitle(alertDetail.formatted.fields[ALERT_RULE_CATEGORY])
+          : defaultBreadcrumb,
+      },
+    ],
+    { serverless }
+  );
 
   const onUntrackAlert = () => {
     setAlertStatus(ALERT_STATUS_UNTRACKED);

diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.tsx b/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.tsx
@@ -159,13 +159,18 @@ function InternalAlertsPage() {
     [alertSearchBarStateProps.rangeFrom, alertSearchBarStateProps.rangeTo, bucketSize, esQuery]
   );
 
-  useBreadcrumbs([
+  useBreadcrumbs(
+    [
+      {
+        text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
+          defaultMessage: 'Alerts',
+        }),
+      },
+    ],
     {
-      text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
-        defaultMessage: 'Alerts',
-      }),
-    },
-  ]);
+      classicOnly: true,
+    }
+  );
 
   async function loadRuleStats() {
     setRuleStatsLoading(true);

diff --git a/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx b/x-pack/plugins/observability_solution/observability/public/pages/overview/overview.tsx
@@ -56,13 +56,18 @@ export function OverviewPage() {
 
   const { ObservabilityPageTemplate, observabilityRuleTypeRegistry } = usePluginContext();
 
-  useBreadcrumbs([
+  useBreadcrumbs(
+    [
+      {
+        text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', {
+          defaultMessage: 'Overview',
+        }),
+      },
+    ],
     {
-      text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', {
-        defaultMessage: 'Overview',
-      }),
-    },
-  ]);
+      classicOnly: true,
+    }
+  );
 
   const { data: newsFeed } = useFetcher(
     () => getNewsFeed({ http, kibanaVersion }),