[8.12] [Observability][Infra] Add parent link in host detail's breadc…

…rumb (#170792) (#173735) # Backport This will backport the following commits from `main` to `8.12`: - [[Observability][Infra] Add parent link in host detail's breadcrumb (#170792)](#170792)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: ruhshan <[email protected]>
elastic · Dec 20, 2023 · e352a31 · e352a31
1 parent ddcf10b
commit e352a31
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 19 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx
@@ -8,13 +8,15 @@
 import React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { NoRemoteCluster } from '../../../components/empty_states';
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
 import { AssetDetails } from '../../../components/asset_details/asset_details';
 import { MetricsPageTemplate } from '../page_template';
 import { commonFlyoutTabs } from '../../../common/asset_details_config/asset_details_tabs';
+import { useParentBreadcrumbResolver } from './hooks/use_parent_breadcrumb_resolver';
 
 export const AssetDetailPage = () => {
   const { isLoading, loadSourceFailureMessage, loadSource, source } = useSourceContext();
@@ -24,6 +26,19 @@ export const AssetDetailPage = () => {
 
   const { metricIndicesExist, remoteClustersExist } = source?.status ?? {};
 
+  const parentBreadcrumbResolver = useParentBreadcrumbResolver();
+
+  const breadcrumbOptions = parentBreadcrumbResolver.getBreadcrumbOptions(nodeType);
+  useMetricsBreadcrumbs([
+    {
+      ...breadcrumbOptions.link,
+      text: breadcrumbOptions.text,
+    },
+    {
+      text: nodeId,
+    },
+  ]);
+
   if (isLoading || !source) return <SourceLoadingPage />;
 
   if (!remoteClustersExist) {

diff --git a/.../plugins/infra/public/pages/metrics/metric_detail/hooks/use_parent_breadcrumb_resolver.ts b/.../plugins/infra/public/pages/metrics/metric_detail/hooks/use_parent_breadcrumb_resolver.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common/inventory_models/types';
+import { useLinkProps } from '@kbn/observability-shared-plugin/public';
+import { useLocation } from 'react-router-dom';
+import { hostsTitle, inventoryTitle } from '../../../../translations';
+import { BreadcrumbOptions } from '../types';
+
+interface LocationStateProps {
+  originPathname: string;
+}
+
+export function useParentBreadcrumbResolver() {
+  const hostsLinkProps = useLinkProps({
+    app: 'metrics',
+    pathname: 'hosts',
+  });
+
+  const inventoryLinkProps = useLinkProps({
+    app: 'metrics',
+    pathname: 'inventory',
+  });
+
+  const breadcrumbMap = new Map<string, BreadcrumbOptions>([
+    ['/hosts', { text: hostsTitle, link: hostsLinkProps }],
+    ['/inventory', { text: inventoryTitle, link: inventoryLinkProps }],
+  ]);
+
+  const defaultOption: BreadcrumbOptions = breadcrumbMap.get('/inventory')!;
+
+  const { state } = useLocation();
+  const locationState: LocationStateProps = state as LocationStateProps;
+
+  function getOptionsByNodeType(nodeType: InventoryItemType): BreadcrumbOptions {
+    if (nodeType === 'host') {
+      return breadcrumbMap.get('/hosts')!;
+    }
+    return defaultOption;
+  }
+
+  function getBreadcrumbOptions(nodeType: InventoryItemType) {
+    if (locationState === undefined) {
+      return getOptionsByNodeType(nodeType);
+    }
+
+    const originalPathBreadcrumb = locationState.originPathname
+      ? breadcrumbMap.get(locationState.originPathname)
+      : undefined;
+
+    return originalPathBreadcrumb ?? defaultOption;
+  }
+
+  return { getBreadcrumbOptions };
+}
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
@@ -9,21 +9,14 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
-import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { AssetDetailPage } from './asset_detail_page';
 import { MetricDetailPage } from './metric_detail_page';
 import { MetricsTimeProvider } from './hooks/use_metrics_time';
 
 export const NodeDetail = () => {
   const {
-    params: { type: nodeType, node: nodeName },
-  } = useRouteMatch<{ type: InventoryItemType; node: string }>();
-
-  useMetricsBreadcrumbs([
-    {
-      text: nodeName,
-    },
-  ]);
+    params: { type: nodeType },
+  } = useRouteMatch<{ type: InventoryItemType }>();
 
   return (
     <EuiErrorBoundary>

diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/metric_detail_page.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/metric_detail_page.tsx
@@ -11,6 +11,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import type { InventoryItemType } from '@kbn/metrics-data-access-plugin/common';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
+import { useParentBreadcrumbResolver } from './hooks/use_parent_breadcrumb_resolver';
 import { useMetadata } from '../../../components/asset_details/hooks/use_metadata';
 import { useSourceContext } from '../../../containers/metrics_source';
 import { InfraLoadingPanel } from '../../../components/loading';
@@ -25,6 +26,7 @@ export const MetricDetailPage = () => {
   } = useRouteMatch<{ type: InventoryItemType; node: string }>();
   const inventoryModel = findInventoryModel(nodeType);
   const { sourceId, metricIndicesExist } = useSourceContext();
+  const parentBreadcrumbResolver = useParentBreadcrumbResolver();
 
   const {
     timeRange,
@@ -50,6 +52,17 @@ export const MetricDetailPage = () => {
     timeRange: parsedTimeRange,
   });
 
+  const breadcrumbOptions = parentBreadcrumbResolver.getBreadcrumbOptions(nodeType);
+  useMetricsBreadcrumbs([
+    {
+      ...breadcrumbOptions.link,
+      text: breadcrumbOptions.text,
+    },
+    {
+      text: name,
+    },
+  ]);
+
   const [sideNav, setSideNav] = useState<NavItem[]>([]);
 
   const addNavItem = React.useCallback(
@@ -61,12 +74,6 @@ export const MetricDetailPage = () => {
     [sideNav]
   );
 
-  useMetricsBreadcrumbs([
-    {
-      text: name,
-    },
-  ]);
-
   if (metadataLoading && !filteredRequiredMetrics.length) {
     return (
       <MetricsPageTemplate hasData={metricIndicesExist}>

diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/types.ts b/x-pack/plugins/infra/public/pages/metrics/metric_detail/types.ts
@@ -8,6 +8,7 @@
 import rt from 'io-ts';
 import { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common';
+import { LinkProps } from '@kbn/observability-shared-plugin/public/hooks/use_link_props';
 import { MetricsTimeInput } from './hooks/use_metrics_time';
 import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api';
 
@@ -61,3 +62,8 @@ export type VisSectionProps = rt.TypeOf<typeof VisSectionPropsRT> & {
   isLiveStreaming?: boolean;
   stopLiveStreaming?: () => void;
 };
+
+export interface BreadcrumbOptions {
+  text: string;
+  link: LinkProps;
+}
diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts
@@ -331,7 +331,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           await retry.try(async () => {
             const documentTitle = await browser.getTitle();
             expect(documentTitle).to.contain(
-              'demo-stack-redis-01 - Infrastructure - Observability - Elastic'
+              'demo-stack-redis-01 - Inventory - Infrastructure - Observability - Elastic'
             );
           });
 
@@ -346,7 +346,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
           await retry.try(async () => {
             const documentTitle = await browser.getTitle();
-            expect(documentTitle).to.contain('pod-0 - Infrastructure - Observability - Elastic');
+            expect(documentTitle).to.contain(
+              'pod-0 - Inventory - Infrastructure - Observability - Elastic'
+            );
           });
 
           await returnTo(INVENTORY_PATH);

diff --git a/x-pack/test_serverless/functional/test_suites/observability/infra/infra.ts b/x-pack/test_serverless/functional/test_suites/observability/infra/infra.ts
@@ -89,7 +89,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
             await retry.try(async () => {
               const documentTitle = await browser.getTitle();
               expect(documentTitle).to.contain(
-                'demo-stack-redis-01 - Infrastructure - Observability - Elastic'
+                'demo-stack-redis-01 - Inventory - Infrastructure - Observability - Elastic'
               );
             });
 
@@ -104,7 +104,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
             await retry.try(async () => {
               const documentTitle = await browser.getTitle();
-              expect(documentTitle).to.contain('pod-0 - Infrastructure - Observability - Elastic');
+              expect(documentTitle).to.contain(
+                'pod-0 - Inventory - Infrastructure - Observability - Elastic'
+              );
             });
 
             await returnTo(INVENTORY_PATH);