From c6f72c764fbbf3fddd141ac6c47fa4120fc30b5d Mon Sep 17 00:00:00 2001
From: Carlos Crespo <crespocarlos@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:05:45 +0200
Subject: [PATCH] [Infra UI] Propagate flyout state to node details page and
 some fixes (#165956)

closes [#164300](https://github.com/elastic/kibana/issues/164300)

## Summary

This PR enables state propagation between asset details flyout and full
page view.


https://github.com/elastic/kibana/assets/2767137/7e05a3c9-afa1-447c-98fd-91c40ee6cefb

There are other places in Kibana that redirect to node details outside
the infra plugin such as APM and Observability/Overview. They use the
`link-to/${assetType}-detail` path, so It's best, for now, to keep
retro-compatibility with this route and propagate the state via query
string.

I've also refactored how we were persisting state via route navigation,
to use native the `state` attribute found in the `location` object from
`react-router`

### How to tests
- Start a Kibana instance
- Navigate to `Infrastructure` > `Host`
- Open the flyout, click in one of the tabs, and click on "Open as
Page". The page should open in the same state as the flyout.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../context/fixtures/asset_details_props.ts   | 14 ++--
 .../components/asset_details/constants.ts     |  2 +
 .../asset_details/content/content.tsx         | 30 ++++----
 .../hooks/use_asset_details_render_props.ts   |  6 +-
 .../hooks/use_asset_details_url_state.ts      | 39 ++++++-----
 .../asset_details/hooks/use_date_range.ts     | 25 +++----
 .../asset_details/hooks/use_metadata_state.ts |  9 +++
 .../asset_details/hooks/use_page_header.tsx   | 16 ++---
 .../asset_details/hooks/use_tab_switcher.tsx  |  4 +-
 .../links/link_to_node_details.tsx            | 25 ++++---
 .../metadata_summary_list.tsx                 |  4 +-
 .../asset_details/template/flyout.tsx         | 11 ++-
 .../public/components/asset_details/types.ts  | 13 ++--
 .../public/components/asset_details/utils.ts  | 10 +++
 .../components/metrics_node_details_link.tsx  |  5 +-
 .../infra/public/pages/link_to/index.ts       |  5 ++
 .../public/pages/link_to/query_params.ts      | 10 ---
 .../pages/link_to/redirect_to_node_detail.tsx | 67 ++++++++++--------
 .../use_node_details_redirect.test.tsx        | 37 ++++++++--
 .../link_to/use_node_details_redirect.ts      | 70 +++++++++++--------
 .../components/host_details_flyout/tabs.ts    | 14 ++--
 .../hosts/components/table/entry_title.tsx    | 15 ++--
 .../metrics/hosts/hooks/use_hosts_table.tsx   | 11 +--
 .../infra/public/pages/metrics/index.tsx      |  4 +-
 .../components/node_details/overlay.tsx       |  6 +-
 .../components/waffle/node_context_menu.tsx   |  6 +-
 .../metric_detail/asset_detail_page.tsx       | 41 +++--------
 .../pages/metrics/metric_detail/index.tsx     | 14 ++--
 .../metrics/metric_detail/page_providers.tsx  | 21 ------
 .../components/chart_context_menu.tsx         |  5 +-
 .../public/hooks/use_link_props.ts            |  7 +-
 31 files changed, 284 insertions(+), 262 deletions(-)
 delete mode 100644 x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx

diff --git a/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_props.ts b/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_props.ts
index 05e17c16eb929..b6e35dbf51773 100644
--- a/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_props.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_props.ts
@@ -6,42 +6,42 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { type AssetDetailsProps, FlyoutTabIds, type Tab } from '../../../types';
+import { type AssetDetailsProps, ContentTabIds, type Tab } from '../../../types';
 
 const links: AssetDetailsProps['links'] = ['alertRule', 'nodeDetails', 'apmServices'];
 const tabs: Tab[] = [
   {
-    id: FlyoutTabIds.OVERVIEW,
+    id: ContentTabIds.OVERVIEW,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', {
       defaultMessage: 'Overview',
     }),
   },
   {
-    id: FlyoutTabIds.LOGS,
+    id: ContentTabIds.LOGS,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.logs', {
       defaultMessage: 'Logs',
     }),
   },
   {
-    id: FlyoutTabIds.METADATA,
+    id: ContentTabIds.METADATA,
     name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.metadata', {
       defaultMessage: 'Metadata',
     }),
   },
   {
-    id: FlyoutTabIds.PROCESSES,
+    id: ContentTabIds.PROCESSES,
     name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.processes', {
       defaultMessage: 'Processes',
     }),
   },
   {
-    id: FlyoutTabIds.ANOMALIES,
+    id: ContentTabIds.ANOMALIES,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', {
       defaultMessage: 'Anomalies',
     }),
   },
   {
-    id: FlyoutTabIds.LINK_TO_APM,
+    id: ContentTabIds.LINK_TO_APM,
     name: i18n.translate('xpack.infra.infra.nodeDetails.apmTabLabel', {
       defaultMessage: 'APM',
     }),
diff --git a/x-pack/plugins/infra/public/components/asset_details/constants.ts b/x-pack/plugins/infra/public/components/asset_details/constants.ts
index 726f47450d0cc..cdd5b95082158 100644
--- a/x-pack/plugins/infra/public/components/asset_details/constants.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/constants.ts
@@ -8,3 +8,5 @@
 export const ASSET_DETAILS_FLYOUT_COMPONENT_NAME = 'infraAssetDetailsFlyout';
 export const METRIC_CHART_HEIGHT = 300;
 export const APM_HOST_FILTER_FIELD = 'host.hostname';
+
+export const ASSET_DETAILS_URL_STATE_KEY = 'assetDetails';
diff --git a/x-pack/plugins/infra/public/components/asset_details/content/content.tsx b/x-pack/plugins/infra/public/components/asset_details/content/content.tsx
index c9d622cf01493..0cf51f1fff3d7 100644
--- a/x-pack/plugins/infra/public/components/asset_details/content/content.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/content/content.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { DatePicker } from '../date_picker/date_picker';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 import { Anomalies, Metadata, Processes, Osquery, Logs, Overview } from '../tabs';
-import { FlyoutTabIds } from '../types';
+import { ContentTabIds } from '../types';
 
 export const Content = () => {
   return (
@@ -18,31 +18,31 @@ export const Content = () => {
       <EuiFlexItem grow={false}>
         <DatePickerWrapper
           visibleFor={[
-            FlyoutTabIds.OVERVIEW,
-            FlyoutTabIds.LOGS,
-            FlyoutTabIds.METADATA,
-            FlyoutTabIds.PROCESSES,
-            FlyoutTabIds.ANOMALIES,
+            ContentTabIds.OVERVIEW,
+            ContentTabIds.LOGS,
+            ContentTabIds.METADATA,
+            ContentTabIds.PROCESSES,
+            ContentTabIds.ANOMALIES,
           ]}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <TabPanel activeWhen={FlyoutTabIds.ANOMALIES}>
+        <TabPanel activeWhen={ContentTabIds.ANOMALIES}>
           <Anomalies />
         </TabPanel>
-        <TabPanel activeWhen={FlyoutTabIds.OVERVIEW}>
+        <TabPanel activeWhen={ContentTabIds.OVERVIEW}>
           <Overview />
         </TabPanel>
-        <TabPanel activeWhen={FlyoutTabIds.LOGS}>
+        <TabPanel activeWhen={ContentTabIds.LOGS}>
           <Logs />
         </TabPanel>
-        <TabPanel activeWhen={FlyoutTabIds.METADATA}>
+        <TabPanel activeWhen={ContentTabIds.METADATA}>
           <Metadata />
         </TabPanel>
-        <TabPanel activeWhen={FlyoutTabIds.OSQUERY}>
+        <TabPanel activeWhen={ContentTabIds.OSQUERY}>
           <Osquery />
         </TabPanel>
-        <TabPanel activeWhen={FlyoutTabIds.PROCESSES}>
+        <TabPanel activeWhen={ContentTabIds.PROCESSES}>
           <Processes />
         </TabPanel>
       </EuiFlexItem>
@@ -50,11 +50,11 @@ export const Content = () => {
   );
 };
 
-const DatePickerWrapper = ({ visibleFor }: { visibleFor: FlyoutTabIds[] }) => {
+const DatePickerWrapper = ({ visibleFor }: { visibleFor: ContentTabIds[] }) => {
   const { activeTabId } = useTabSwitcherContext();
 
   return (
-    <div hidden={!visibleFor.includes(activeTabId as FlyoutTabIds)}>
+    <div hidden={!visibleFor.includes(activeTabId as ContentTabIds)}>
       <DatePicker />
     </div>
   );
@@ -64,7 +64,7 @@ const TabPanel = ({
   activeWhen,
   children,
 }: {
-  activeWhen: FlyoutTabIds;
+  activeWhen: ContentTabIds;
   children: React.ReactNode;
 }) => {
   const { renderedTabsSet, activeTabId } = useTabSwitcherContext();
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts
index 6ddba44e6da7e..eab5f8326f525 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_render_props.ts
@@ -7,6 +7,7 @@
 
 import createContainer from 'constate';
 import type { AssetDetailsProps } from '../types';
+import { useAssetDetailsUrlState } from './use_asset_details_url_state';
 import { useMetadataStateProviderContext } from './use_metadata_state';
 
 export interface UseAssetDetailsRenderProps {
@@ -14,17 +15,18 @@ export interface UseAssetDetailsRenderProps {
 }
 
 export function useAssetDetailsRenderProps({ props }: UseAssetDetailsRenderProps) {
+  const [urlState] = useAssetDetailsUrlState();
   const { metadata } = useMetadataStateProviderContext();
   const { asset, assetType, overrides, renderMode } = props;
 
   // When the asset asset.name is known we can load the page faster
   // Otherwise we need to use metadata response.
-  const loading = !asset.name && !metadata?.name;
+  const loading = !urlState?.name && !asset.name && !metadata?.name;
 
   return {
     asset: {
       ...asset,
-      name: asset.name || metadata?.name || 'asset-name',
+      name: urlState?.name || asset.name || metadata?.name || '',
     },
     assetType,
     overrides,
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts
index 370778555f7d0..525a5b635e19b 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_asset_details_url_state.ts
@@ -9,15 +9,15 @@ import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
 import { constant, identity } from 'fp-ts/lib/function';
-import { FlyoutTabIds } from '../types';
+import { ContentTabIds } from '../types';
 import { useUrlState } from '../../../utils/use_url_state';
+import { ASSET_DETAILS_URL_STATE_KEY } from '../constants';
+import { getDefaultDateRange } from '../utils';
 
-export const DEFAULT_STATE: AssetDetailsState = {
-  tabId: FlyoutTabIds.OVERVIEW,
-  processSearch: undefined,
-  metadataSearch: undefined,
+export const DEFAULT_STATE: AssetDetailsUrlState = {
+  tabId: ContentTabIds.OVERVIEW,
+  dateRange: getDefaultDateRange(),
 };
-const ASSET_DETAILS_URL_STATE_KEY = 'asset_details';
 
 type SetAssetDetailsState = (newProp: Payload | null) => void;
 
@@ -44,34 +44,35 @@ export const useAssetDetailsUrlState = (): [AssetDetailsUrl, SetAssetDetailsStat
 };
 
 const TabIdRT = rt.union([
-  rt.literal(FlyoutTabIds.OVERVIEW),
-  rt.literal(FlyoutTabIds.METADATA),
-  rt.literal(FlyoutTabIds.PROCESSES),
-  rt.literal(FlyoutTabIds.LOGS),
-  rt.literal(FlyoutTabIds.ANOMALIES),
-  rt.literal(FlyoutTabIds.OSQUERY),
+  rt.literal(ContentTabIds.OVERVIEW),
+  rt.literal(ContentTabIds.METADATA),
+  rt.literal(ContentTabIds.PROCESSES),
+  rt.literal(ContentTabIds.LOGS),
+  rt.literal(ContentTabIds.ANOMALIES),
+  rt.literal(ContentTabIds.OSQUERY),
 ]);
 
-const AssetDetailsStateRT = rt.intersection([
+const AssetDetailsUrlStateRT = rt.intersection([
   rt.type({
-    tabId: TabIdRT,
-  }),
-  rt.partial({
     dateRange: rt.type({
       from: rt.string,
       to: rt.string,
     }),
+  }),
+  rt.partial({
+    tabId: TabIdRT,
+    name: rt.string,
     processSearch: rt.string,
     metadataSearch: rt.string,
     logsSearch: rt.string,
   }),
 ]);
 
-const AssetDetailsUrlRT = rt.union([AssetDetailsStateRT, rt.null]);
+const AssetDetailsUrlRT = rt.union([AssetDetailsUrlStateRT, rt.null]);
 
-export type AssetDetailsState = rt.TypeOf<typeof AssetDetailsStateRT>;
+export type AssetDetailsUrlState = rt.TypeOf<typeof AssetDetailsUrlStateRT>;
 type AssetDetailsUrl = rt.TypeOf<typeof AssetDetailsUrlRT>;
-type Payload = Partial<AssetDetailsState>;
+type Payload = Partial<AssetDetailsUrlState>;
 
 const encodeUrlState = AssetDetailsUrlRT.encode;
 const decodeUrlState = (value: unknown) => {
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts
index 24f5e56ecedb6..345d197f23945 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_date_range.ts
@@ -10,24 +10,16 @@ import createContainer from 'constate';
 import { useCallback, useState } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { parseDateRange } from '../../../utils/datemath';
-import { toTimestampRange } from '../utils';
+import { getDefaultDateRange, toTimestampRange } from '../utils';
 import { useAssetDetailsUrlState } from './use_asset_details_url_state';
 
 export interface UseDateRangeProviderProps {
   initialDateRange: TimeRange;
 }
 
-const DEFAULT_FROM_IN_MILLISECONDS = 15 * 60000;
-const getDefaultDateRange = () => {
-  const now = Date.now();
-
-  return {
-    from: new Date(now - DEFAULT_FROM_IN_MILLISECONDS).toISOString(),
-    to: new Date(now).toISOString(),
-  };
-};
-
-export function useDateRangeProvider({ initialDateRange }: UseDateRangeProviderProps) {
+export function useDateRangeProvider({
+  initialDateRange = getDefaultDateRange(),
+}: UseDateRangeProviderProps) {
   const [urlState, setUrlState] = useAssetDetailsUrlState();
   const dateRange: TimeRange = urlState?.dateRange ?? initialDateRange;
   const [parsedDateRange, setParsedDateRange] = useState(parseDateRange(dateRange));
@@ -36,7 +28,7 @@ export function useDateRangeProvider({ initialDateRange }: UseDateRangeProviderP
   useEffectOnce(() => {
     const { from, to } = getParsedDateRange();
 
-    // forces the date picker to initiallize with absolute dates.
+    // forces the date picker to initialize with absolute dates.
     setUrlState({ dateRange: { from, to } });
   });
 
@@ -56,9 +48,10 @@ export function useDateRangeProvider({ initialDateRange }: UseDateRangeProviderP
     return { from, to };
   }, [parsedDateRange]);
 
-  const getDateRangeInTimestamp = useCallback(() => {
-    return toTimestampRange(getParsedDateRange());
-  }, [getParsedDateRange]);
+  const getDateRangeInTimestamp = useCallback(
+    () => toTimestampRange(getParsedDateRange()),
+    [getParsedDateRange]
+  );
 
   return {
     dateRange,
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_metadata_state.ts b/x-pack/plugins/infra/public/components/asset_details/hooks/use_metadata_state.ts
index 6fc1991fcb1dc..b19840f7e3ae6 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_metadata_state.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_metadata_state.ts
@@ -5,16 +5,19 @@
  * 2.0.
  */
 
+import { useEffect } from 'react';
 import createContainer from 'constate';
 import { findInventoryModel } from '../../../../common/inventory_models';
 import { useSourceContext } from '../../../containers/metrics_source';
 import { useMetadata } from './use_metadata';
 import { AssetDetailsProps } from '../types';
 import { useDateRangeProviderContext } from './use_date_range';
+import { useAssetDetailsUrlState } from './use_asset_details_url_state';
 
 export type UseMetadataProviderProps = Pick<AssetDetailsProps, 'asset' | 'assetType'>;
 
 export function useMetadataProvider({ asset, assetType }: UseMetadataProviderProps) {
+  const [, setUrlState] = useAssetDetailsUrlState();
   const { getDateRangeInTimestamp } = useDateRangeProviderContext();
   const inventoryModel = findInventoryModel(assetType);
   const { sourceId } = useSourceContext();
@@ -27,6 +30,12 @@ export function useMetadataProvider({ asset, assetType }: UseMetadataProviderPro
     getDateRangeInTimestamp()
   );
 
+  useEffect(() => {
+    if (metadata?.name) {
+      setUrlState({ name: metadata.name });
+    }
+  }, [metadata?.name, setUrlState]);
+
   return {
     loading,
     error,
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx b/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx
index 6e0cbf9ad2150..987adf78c33dd 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_page_header.tsx
@@ -21,9 +21,8 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { APM_HOST_FILTER_FIELD } from '../constants';
 import { LinkToAlertsRule, LinkToApmServices, LinkToNodeDetails } from '../links';
-import { FlyoutTabIds, type RouteState, type LinkOptions, type Tab, type TabIds } from '../types';
+import { ContentTabIds, type RouteState, type LinkOptions, type Tab, type TabIds } from '../types';
 import { useAssetDetailsRenderPropsContext } from './use_asset_details_render_props';
-import { useDateRangeProviderContext } from './use_date_range';
 import { useTabSwitcherContext } from './use_tab_switcher';
 
 type TabItem = NonNullable<Pick<EuiPageHeaderProps, 'tabs'>['tabs']>[number];
@@ -89,22 +88,15 @@ export const useTemplateHeaderBreadcrumbs = () => {
 };
 
 const useRightSideItems = (links?: LinkOptions[]) => {
-  const { getDateRangeInTimestamp } = useDateRangeProviderContext();
   const { asset, assetType, overrides } = useAssetDetailsRenderPropsContext();
 
   const topCornerLinkComponents: Record<LinkOptions, JSX.Element> = useMemo(
     () => ({
-      nodeDetails: (
-        <LinkToNodeDetails
-          asset={asset}
-          assetType={assetType}
-          dateRangeTimestamp={getDateRangeInTimestamp()}
-        />
-      ),
+      nodeDetails: <LinkToNodeDetails asset={asset} assetType={assetType} />,
       alertRule: <LinkToAlertsRule onClick={overrides?.alertRule?.onCreateRuleClick} />,
       apmServices: <LinkToApmServices assetName={asset.name} apmField={APM_HOST_FILTER_FIELD} />,
     }),
-    [asset, assetType, getDateRangeInTimestamp, overrides?.alertRule?.onCreateRuleClick]
+    [asset, assetType, overrides?.alertRule?.onCreateRuleClick]
   );
 
   const rightSideItems = useMemo(
@@ -157,7 +149,7 @@ const useTabs = (tabs: Tab[]) => {
   const tabEntries: TabItem[] = useMemo(
     () =>
       tabs.map(({ name, ...tab }) => {
-        if (tab.id === FlyoutTabIds.LINK_TO_APM) {
+        if (tab.id === ContentTabIds.LINK_TO_APM) {
           return getTabToApmTraces(name);
         }
 
diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx b/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
index 5de6383099e1d..9ab02ce3f5fd6 100644
--- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx
@@ -8,7 +8,7 @@
 import createContainer from 'constate';
 import { useLazyRef } from '../../../hooks/use_lazy_ref';
 import type { TabIds } from '../types';
-import { AssetDetailsState, useAssetDetailsUrlState } from './use_asset_details_url_state';
+import { AssetDetailsUrlState, useAssetDetailsUrlState } from './use_asset_details_url_state';
 
 interface TabSwitcherParams {
   defaultActiveTabId?: TabIds;
@@ -26,7 +26,7 @@ export function useTabSwitcher({ defaultActiveTabId }: TabSwitcherParams) {
     // On a tab click, mark the tab content as allowed to be rendered
     renderedTabsSet.current.add(tabId);
 
-    setUrlState({ tabId: tabId as AssetDetailsState['tabId'] });
+    setUrlState({ tabId: tabId as AssetDetailsUrlState['tabId'] });
   };
 
   return {
diff --git a/x-pack/plugins/infra/public/components/asset_details/links/link_to_node_details.tsx b/x-pack/plugins/infra/public/components/asset_details/links/link_to_node_details.tsx
index 87297b247bb35..2670af9272a31 100644
--- a/x-pack/plugins/infra/public/components/asset_details/links/link_to_node_details.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/links/link_to_node_details.tsx
@@ -8,29 +8,32 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { useLinkProps } from '@kbn/observability-shared-plugin/public';
+import { parse } from '@kbn/datemath';
 import { useNodeDetailsRedirect } from '../../../pages/link_to';
+import { Asset } from '../types';
 import type { InventoryItemType } from '../../../../common/inventory_models/types';
+import { useAssetDetailsUrlState } from '../hooks/use_asset_details_url_state';
 
 export interface LinkToNodeDetailsProps {
-  dateRangeTimestamp: { from: number; to: number };
   asset: Asset;
   assetType: InventoryItemType;
 }
 
-export const LinkToNodeDetails = ({
-  asset,
-  assetType,
-  dateRangeTimestamp,
-}: LinkToNodeDetailsProps) => {
+export const LinkToNodeDetails = ({ asset, assetType }: LinkToNodeDetailsProps) => {
+  const [state] = useAssetDetailsUrlState();
   const { getNodeDetailUrl } = useNodeDetailsRedirect();
+
+  const { dateRange, ...assetDetails } = state ?? {};
+
   const nodeDetailMenuItemLinkProps = useLinkProps({
     ...getNodeDetailUrl({
-      nodeType: assetType,
-      nodeId: asset.id,
+      assetType,
+      assetId: asset.id,
       search: {
-        from: dateRangeTimestamp.from,
-        to: dateRangeTimestamp.to,
-        assetName: asset.name,
+        name: asset.name,
+        ...assetDetails,
+        from: parse(dateRange?.from ?? '')?.valueOf(),
+        to: parse(dateRange?.to ?? '')?.valueOf(),
       },
     }),
   });
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx
index 72db14e71519c..0a3b29a75ad16 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx
@@ -19,7 +19,7 @@ import {
 import type { InfraMetadata } from '../../../../../../common/http_api';
 import { NOT_AVAILABLE_LABEL } from '../../../translations';
 import { useTabSwitcherContext } from '../../../hooks/use_tab_switcher';
-import { FlyoutTabIds } from '../../../types';
+import { ContentTabIds } from '../../../types';
 import { ExpandableContent } from '../../../components/expandable_content';
 import { MetadataHeader } from './metadata_header';
 import { MetadataExplanationMessage } from '../../../components/metadata_explanation';
@@ -76,7 +76,7 @@ const MetadataSummaryListWrapper = ({
   const { showTab } = useTabSwitcherContext();
 
   const onClick = () => {
-    showTab(FlyoutTabIds.METADATA);
+    showTab(ContentTabIds.METADATA);
   };
 
   return (
diff --git a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
index f45aca765610d..f8b4272dae0e6 100644
--- a/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/template/flyout.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useCallback } from 'react';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { InfraLoadingPanel } from '../../loading';
@@ -15,6 +15,7 @@ import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from '../constants';
 import { Content } from '../content/content';
 import { FlyoutHeader } from '../header/flyout_header';
 import { useAssetDetailsRenderPropsContext } from '../hooks/use_asset_details_render_props';
+import { useAssetDetailsUrlState } from '../hooks/use_asset_details_url_state';
 import { usePageHeader } from '../hooks/use_page_header';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 import type { ContentTemplateProps } from '../types';
@@ -23,6 +24,7 @@ export const Flyout = ({
   header: { tabs = [], links = [] },
   closeFlyout,
 }: ContentTemplateProps & { closeFlyout: () => void }) => {
+  const [, setUrlState] = useAssetDetailsUrlState();
   const { asset, assetType, loading } = useAssetDetailsRenderPropsContext();
   const { rightSideItems, tabEntries } = usePageHeader(tabs, links);
   const { activeTabId } = useTabSwitcherContext();
@@ -38,9 +40,14 @@ export const Flyout = ({
     });
   });
 
+  const handleOnClose = useCallback(() => {
+    closeFlyout();
+    setUrlState(null);
+  }, [closeFlyout, setUrlState]);
+
   return (
     <EuiFlyout
-      onClose={closeFlyout}
+      onClose={handleOnClose}
       ownFocus={false}
       data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
       data-asset-type={assetType}
diff --git a/x-pack/plugins/infra/public/components/asset_details/types.ts b/x-pack/plugins/infra/public/components/asset_details/types.ts
index 548068d93e661..a0856d66736fa 100644
--- a/x-pack/plugins/infra/public/components/asset_details/types.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/types.ts
@@ -9,12 +9,14 @@ import { TimeRange } from '@kbn/es-query';
 import { Search } from 'history';
 import type { InventoryItemType } from '../../../common/inventory_models/types';
 
+export type { AssetDetailsUrlState } from './hooks/use_asset_details_url_state';
+
 export interface Asset {
   id: string;
   name?: string;
 }
 
-export enum FlyoutTabIds {
+export enum ContentTabIds {
   OVERVIEW = 'overview',
   METADATA = 'metadata',
   PROCESSES = 'processes',
@@ -22,10 +24,9 @@ export enum FlyoutTabIds {
   OSQUERY = 'osquery',
   LOGS = 'logs',
   LINK_TO_APM = 'linkToApm',
-  LINK_TO_UPTIME = 'linkToUptime',
 }
 
-export type TabIds = `${FlyoutTabIds}`;
+export type TabIds = `${ContentTabIds}`;
 
 export interface OverridableTabState {
   metadata?: {
@@ -55,7 +56,7 @@ export interface FullPageProps {
 export type RenderMode = FlyoutProps | FullPageProps;
 
 export interface Tab {
-  id: FlyoutTabIds;
+  id: ContentTabIds;
   name: string;
 }
 
@@ -64,7 +65,7 @@ export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices';
 export interface AssetDetailsProps {
   asset: Asset;
   assetType: InventoryItemType;
-  dateRange: TimeRange;
+  dateRange?: TimeRange;
   tabs: Tab[];
   overrides?: OverridableTabState;
   renderMode: RenderMode;
@@ -82,7 +83,7 @@ export interface ContentTemplateProps {
 
 export interface RouteState {
   originAppId: string;
-  originPathname?: string;
+  originPathname: string;
   originSearch?: Search;
 }
 
diff --git a/x-pack/plugins/infra/public/components/asset_details/utils.ts b/x-pack/plugins/infra/public/components/asset_details/utils.ts
index d54bf70cf637b..498a8f6c82f88 100644
--- a/x-pack/plugins/infra/public/components/asset_details/utils.ts
+++ b/x-pack/plugins/infra/public/components/asset_details/utils.ts
@@ -11,3 +11,13 @@ export const toTimestampRange = ({ from, to }: { from: string; to: string }) =>
 
   return { from: fromTs, to: toTs };
 };
+
+const DEFAULT_FROM_IN_MILLISECONDS = 15 * 60000;
+export const getDefaultDateRange = () => {
+  const now = Date.now();
+
+  return {
+    from: new Date(now - DEFAULT_FROM_IN_MILLISECONDS).toISOString(),
+    to: new Date(now).toISOString(),
+  };
+};
diff --git a/x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/metrics_node_details_link.tsx b/x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/metrics_node_details_link.tsx
index fd8868f0218af..59a9cad5d672f 100644
--- a/x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/metrics_node_details_link.tsx
+++ b/x-pack/plugins/infra/public/components/infrastructure_node_metrics_tables/shared/components/metrics_node_details_link.tsx
@@ -31,11 +31,12 @@ export const MetricsNodeDetailsLink = ({
   const { getNodeDetailUrl } = useNodeDetailsRedirect();
   const linkProps = useLinkProps(
     getNodeDetailUrl({
-      nodeType,
-      nodeId: id,
+      assetType: nodeType,
+      assetId: id,
       search: {
         from: parse(timerange.from)?.valueOf(),
         to: parse(timerange.to)?.valueOf(),
+        name: id,
       },
     })
   );
diff --git a/x-pack/plugins/infra/public/pages/link_to/index.ts b/x-pack/plugins/infra/public/pages/link_to/index.ts
index aae22218a4f83..41dc4177186ee 100644
--- a/x-pack/plugins/infra/public/pages/link_to/index.ts
+++ b/x-pack/plugins/infra/public/pages/link_to/index.ts
@@ -9,4 +9,9 @@ export { LinkToLogsPage } from './link_to_logs';
 export { LinkToMetricsPage } from './link_to_metrics';
 export { RedirectToNodeLogs } from './redirect_to_node_logs';
 export { RedirectToNodeDetail } from './redirect_to_node_detail';
+
 export { useNodeDetailsRedirect } from './use_node_details_redirect';
+export type {
+  AssetDetailsQueryParams,
+  MetricDetailsQueryParams,
+} from './use_node_details_redirect';
diff --git a/x-pack/plugins/infra/public/pages/link_to/query_params.ts b/x-pack/plugins/infra/public/pages/link_to/query_params.ts
index a80f163993588..45e1bc9a7991d 100644
--- a/x-pack/plugins/infra/public/pages/link_to/query_params.ts
+++ b/x-pack/plugins/infra/public/pages/link_to/query_params.ts
@@ -28,13 +28,3 @@ export const getFromFromLocation = (location: Location) => {
   const timeParam = getParamFromQueryString(getQueryStringFromLocation(location), 'from');
   return timeParam ? parseFloat(timeParam) : NaN;
 };
-
-export const getNodeNameFromLocation = (location: Location) => {
-  const nameParam = getParamFromQueryString(getQueryStringFromLocation(location), 'assetName');
-  return nameParam;
-};
-
-export const getStateFromLocation = (location: Location) => {
-  const nameParam = getParamFromQueryString(getQueryStringFromLocation(location), 'state');
-  return nameParam;
-};
diff --git a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx
index 1bd8aa3b793c5..606ab658bf648 100644
--- a/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx
+++ b/x-pack/plugins/infra/public/pages/link_to/redirect_to_node_detail.tsx
@@ -7,15 +7,40 @@
 
 import React from 'react';
 import { Redirect, useLocation, useRouteMatch } from 'react-router-dom';
+import rison from '@kbn/rison';
+import { replaceStateKeyInQueryString } from '../../../common/url_state_storage_service';
 import { replaceMetricTimeInQueryString } from '../metrics/metric_detail/hooks/use_metrics_time';
-import {
-  getFromFromLocation,
-  getToFromLocation,
-  getNodeNameFromLocation,
-  getStateFromLocation,
-} from './query_params';
 import { InventoryItemType } from '../../../common/inventory_models/types';
-import { RouteState } from '../../components/asset_details/types';
+import { AssetDetailsUrlState } from '../../components/asset_details/types';
+import { ASSET_DETAILS_URL_STATE_KEY } from '../../components/asset_details/constants';
+
+export const REDIRECT_NODE_DETAILS_FROM_KEY = 'from';
+export const REDIRECT_NODE_DETAILS_TO_KEY = 'to';
+export const REDIRECT_ASSET_DETAILS_KEY = 'assetDetails';
+
+const getHostDetailSearch = (queryParams: URLSearchParams) => {
+  const from = queryParams.get(REDIRECT_NODE_DETAILS_FROM_KEY);
+  const to = queryParams.get(REDIRECT_NODE_DETAILS_TO_KEY);
+  const assetDetailsParam = queryParams.get(REDIRECT_ASSET_DETAILS_KEY);
+
+  return replaceStateKeyInQueryString(ASSET_DETAILS_URL_STATE_KEY, {
+    ...(assetDetailsParam ? (rison.decode(assetDetailsParam) as AssetDetailsUrlState) : undefined),
+    dateRange: {
+      from: from ? new Date(parseFloat(from)).toISOString() : undefined,
+      to: to ? new Date(parseFloat(to)).toISOString() : undefined,
+    },
+  } as AssetDetailsUrlState)('');
+};
+
+const getNodeDetailSearch = (queryParams: URLSearchParams) => {
+  const from = queryParams.get(REDIRECT_NODE_DETAILS_FROM_KEY);
+  const to = queryParams.get(REDIRECT_NODE_DETAILS_TO_KEY);
+
+  return replaceMetricTimeInQueryString(
+    from ? parseFloat(from) : NaN,
+    to ? parseFloat(to) : NaN
+  )('');
+};
 
 export const RedirectToNodeDetail = () => {
   const {
@@ -23,35 +48,17 @@ export const RedirectToNodeDetail = () => {
   } = useRouteMatch<{ nodeType: InventoryItemType; nodeId: string }>();
 
   const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
 
-  const searchString = replaceMetricTimeInQueryString(
-    getFromFromLocation(location),
-    getToFromLocation(location)
-  )('');
-
-  const queryParams = new URLSearchParams(searchString);
-
-  if (nodeType === 'host') {
-    const assetName = getNodeNameFromLocation(location);
-    if (assetName) {
-      queryParams.set('assetName', assetName);
-    }
-  }
-
-  let state: RouteState | undefined;
-  try {
-    const stateFromLocation = getStateFromLocation(location);
-    state = stateFromLocation ? JSON.parse(stateFromLocation) : undefined;
-  } catch (err) {
-    state = undefined;
-  }
+  const search =
+    nodeType === 'host' ? getHostDetailSearch(queryParams) : getNodeDetailSearch(queryParams);
 
   return (
     <Redirect
       to={{
         pathname: `/detail/${nodeType}/${nodeId}`,
-        search: queryParams.toString(),
-        state,
+        search,
+        state: location.state,
       }}
     />
   );
diff --git a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx
index 81b13a652b7eb..15d8309598945 100644
--- a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx
+++ b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.test.tsx
@@ -26,7 +26,7 @@ const wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => (
 );
 
 describe('useNodeDetailsRedirect', () => {
-  it('should return the LinkProperties', () => {
+  it('should return the LinkProperties for assetType pod', () => {
     const { result } = renderHook(() => useNodeDetailsRedirect(), { wrapper });
 
     const fromDateStrig = '2019-01-01T11:00:00Z';
@@ -34,8 +34,8 @@ describe('useNodeDetailsRedirect', () => {
 
     expect(
       result.current.getNodeDetailUrl({
-        nodeType: 'host',
-        nodeId: 'example-01',
+        assetType: 'pod',
+        assetId: 'example-01',
         search: {
           from: new Date(fromDateStrig).getTime(),
           to: new Date(toDateStrig).getTime(),
@@ -43,8 +43,37 @@ describe('useNodeDetailsRedirect', () => {
       })
     ).toStrictEqual({
       app: 'metrics',
-      pathname: 'link-to/host-detail/example-01',
+      pathname: 'link-to/pod-detail/example-01',
       search: { from: '1546340400000', to: '1546344000000' },
+      state: {},
+    });
+  });
+
+  it('should return the LinkProperties for assetType host', () => {
+    const { result } = renderHook(() => useNodeDetailsRedirect(), { wrapper });
+
+    const fromDateStrig = '2019-01-01T11:00:00Z';
+    const toDateStrig = '2019-01-01T12:00:00Z';
+
+    expect(
+      result.current.getNodeDetailUrl({
+        assetType: 'host',
+        assetId: 'example-01',
+        search: {
+          from: new Date(fromDateStrig).getTime(),
+          to: new Date(toDateStrig).getTime(),
+          name: 'example-01',
+        },
+      })
+    ).toStrictEqual({
+      app: 'metrics',
+      pathname: 'link-to/host-detail/example-01',
+      search: {
+        from: '1546340400000',
+        to: '1546344000000',
+        assetDetails: '(name:example-01)',
+      },
+      state: {},
     });
   });
 });
diff --git a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts
index ea4726b2e6816..22412fa2064a1 100644
--- a/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts
+++ b/x-pack/plugins/infra/public/pages/link_to/use_node_details_redirect.ts
@@ -9,14 +9,32 @@ import { useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import type { LinkDescriptor } from '@kbn/observability-shared-plugin/public';
 import useObservable from 'react-use/lib/useObservable';
+import rison from '@kbn/rison';
 import type { InventoryItemType } from '../../../common/inventory_models/types';
-import type { RouteState } from '../../components/asset_details/types';
+import type { AssetDetailsUrlState, RouteState } from '../../components/asset_details/types';
 import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
+import {
+  REDIRECT_NODE_DETAILS_FROM_KEY,
+  REDIRECT_NODE_DETAILS_TO_KEY,
+  REDIRECT_ASSET_DETAILS_KEY,
+} from './redirect_to_node_detail';
 
-interface QueryParams {
+export interface MetricDetailsQueryParams {
   from?: number;
   to?: number;
-  assetName?: string;
+}
+
+export type AssetDetailsQueryParams = MetricDetailsQueryParams &
+  Omit<AssetDetailsUrlState, 'dateRange'>;
+
+type SearchParams<T extends InventoryItemType> = T extends 'host'
+  ? AssetDetailsQueryParams
+  : MetricDetailsQueryParams;
+
+export interface NodeDetailsRedirectParams<T extends InventoryItemType> {
+  assetType: T;
+  assetId: string;
+  search: SearchParams<T>;
 }
 
 export const useNodeDetailsRedirect = () => {
@@ -29,42 +47,36 @@ export const useNodeDetailsRedirect = () => {
 
   const appId = useObservable(currentAppId$);
   const getNodeDetailUrl = useCallback(
-    ({
-      nodeType,
-      nodeId,
+    <T extends InventoryItemType>({
+      assetType,
+      assetId,
       search,
-    }: {
-      nodeType: InventoryItemType;
-      nodeId: string;
-      search: QueryParams;
-    }): LinkDescriptor => {
-      const { to, from, ...rest } = search;
+    }: NodeDetailsRedirectParams<T>): LinkDescriptor => {
+      const { from, to, ...additionalParams } = search;
 
       return {
         app: 'metrics',
-        pathname: `link-to/${nodeType}-detail/${nodeId}`,
+        pathname: `link-to/${assetType}-detail/${assetId}`,
         search: {
-          ...rest,
-          ...(to && from
-            ? {
-                to: `${to}`,
-                from: `${from}`,
-              }
+          ...(Object.keys(additionalParams).length > 0
+            ? { [REDIRECT_ASSET_DETAILS_KEY]: rison.encodeUnknown(additionalParams) }
             : undefined),
-          // While we don't have a shared state between all page in infra, this makes it possible to restore a page state when returning to the previous route
-          ...(location.search || location.pathname
-            ? {
-                state: JSON.stringify({
-                  originAppId: appId,
-                  originSearch: location.search,
-                  originPathname: location.pathname,
-                } as RouteState),
-              }
+          // retrocompatibility
+          ...(from ? { [REDIRECT_NODE_DETAILS_FROM_KEY]: `${from}` } : undefined),
+          ...(to ? { [REDIRECT_NODE_DETAILS_TO_KEY]: `${to}` } : undefined),
+        },
+        state: {
+          ...(location.key
+            ? ({
+                originAppId: appId,
+                originSearch: location.search,
+                originPathname: location.pathname,
+              } as RouteState)
             : undefined),
         },
       };
     },
-    [location.pathname, appId, location.search]
+    [location.key, location.search, location.pathname, appId]
   );
 
   return { getNodeDetailUrl };
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts
index 7d354d19bed12..6ce0eeddbcb00 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts
@@ -6,41 +6,41 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { FlyoutTabIds, type Tab } from '../../../../../components/asset_details/types';
+import { ContentTabIds, type Tab } from '../../../../../components/asset_details/types';
 
 export const orderedFlyoutTabs: Tab[] = [
   {
-    id: FlyoutTabIds.OVERVIEW,
+    id: ContentTabIds.OVERVIEW,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', {
       defaultMessage: 'Overview',
     }),
   },
   {
-    id: FlyoutTabIds.METADATA,
+    id: ContentTabIds.METADATA,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.metadata.title', {
       defaultMessage: 'Metadata',
     }),
   },
   {
-    id: FlyoutTabIds.PROCESSES,
+    id: ContentTabIds.PROCESSES,
     name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.processes', {
       defaultMessage: 'Processes',
     }),
   },
   {
-    id: FlyoutTabIds.LOGS,
+    id: ContentTabIds.LOGS,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.logs.title', {
       defaultMessage: 'Logs',
     }),
   },
   {
-    id: FlyoutTabIds.ANOMALIES,
+    id: ContentTabIds.ANOMALIES,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', {
       defaultMessage: 'Anomalies',
     }),
   },
   {
-    id: FlyoutTabIds.OSQUERY,
+    id: ContentTabIds.OSQUERY,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.osquery', {
       defaultMessage: 'Osquery',
     }),
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/entry_title.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/entry_title.tsx
index 2019d2efa1c4e..b2fdcc1a1a734 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/entry_title.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/entry_title.tsx
@@ -9,6 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiToolTip, IconType } fro
 import { useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { useNodeDetailsRedirect } from '../../../../link_to';
 import type { CloudProvider, HostNodeRow } from '../../hooks/use_hosts_table';
+import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
 
 const cloudIcons: Record<CloudProvider, IconType> = {
   gcp: 'logoGCP',
@@ -19,22 +20,22 @@ const cloudIcons: Record<CloudProvider, IconType> = {
 
 interface EntryTitleProps {
   onClick: () => void;
-  dateRangeTs: { from: number; to: number };
   title: HostNodeRow['title'];
 }
 
-export const EntryTitle = ({ onClick, dateRangeTs, title }: EntryTitleProps) => {
+export const EntryTitle = ({ onClick, title }: EntryTitleProps) => {
   const { name, cloudProvider } = title;
   const { getNodeDetailUrl } = useNodeDetailsRedirect();
+  const { parsedDateRange } = useUnifiedSearchContext();
 
   const link = useLinkProps({
     ...getNodeDetailUrl({
-      nodeId: name,
-      nodeType: 'host',
+      assetId: name,
+      assetType: 'host',
       search: {
-        from: dateRangeTs.from,
-        to: dateRangeTs.to,
-        assetName: name,
+        from: parsedDateRange?.from ? new Date(parsedDateRange?.from).getTime() : undefined,
+        to: parsedDateRange?.to ? new Date(parsedDateRange.to).getTime() : undefined,
+        name,
       },
     }),
   });
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
index f70718fa855a6..b4349a8231728 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
@@ -31,7 +31,6 @@ import { ColumnHeader } from '../components/table/column_header';
 import { TABLE_COLUMN_LABEL } from '../translations';
 import { METRICS_TOOLTIP } from '../../../../common/visualizations';
 import { buildCombinedHostsFilter } from '../../../../utils/filters/build';
-import { useUnifiedSearchContext } from './use_unified_search';
 
 /**
  * Columns and items types
@@ -127,7 +126,7 @@ const sortTableData =
 export const useHostsTable = () => {
   const [selectedItems, setSelectedItems] = useState<HostNodeRow[]>([]);
   const { hostNodes } = useHostsViewContext();
-  const { getDateRangeAsTimestamp } = useUnifiedSearchContext();
+
   const [{ detailsItemId, pagination, sorting }, setProperties] = useHostsTableUrlState();
   const {
     services: {
@@ -234,11 +233,7 @@ export const useHostsTable = () => {
         truncateText: true,
         'data-test-subj': 'hostsView-tableRow-title',
         render: (title: HostNodeRow['title']) => (
-          <EntryTitle
-            title={title}
-            dateRangeTs={getDateRangeAsTimestamp()}
-            onClick={() => reportHostEntryClick(title)}
-          />
+          <EntryTitle title={title} onClick={() => reportHostEntryClick(title)} />
         ),
         width: '20%',
       },
@@ -343,7 +338,7 @@ export const useHostsTable = () => {
         width: '120px',
       },
     ],
-    [detailsItemId, getDateRangeAsTimestamp, reportHostEntryClick, setProperties]
+    [detailsItemId, reportHostEntryClick, setProperties]
   );
 
   const selection: EuiTableSelectionType<HostNodeRow> = {
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index bf854fb546ae1..562c7a43175cc 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -22,7 +22,7 @@ import { MetricsExplorerOptionsContainer } from './metrics_explorer/hooks/use_me
 import { WithMetricsExplorerOptionsUrlState } from '../../containers/metrics_explorer/with_metrics_explorer_options_url_state';
 import { MetricsExplorerPage } from './metrics_explorer';
 import { SnapshotPage } from './inventory_view';
-import { MetricDetail } from './metric_detail';
+import { NodeDetail } from './metric_detail';
 import { MetricsSettingsPage } from './settings';
 import { HostsLandingPage } from './hosts/hosts_landing_page';
 import { SourceLoadingPage } from '../../components/source_loading_page';
@@ -109,7 +109,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                         )}
                       </MetricsExplorerOptionsContainer>
                     </Route>
-                    <Route path="/detail/:type/:node" component={MetricDetail} />
+                    <Route path="/detail/:type/:node" component={NodeDetail} />
                     <Route path={'/hosts'} component={HostsLandingPage} />
                     <Route path={'/settings'} component={MetricsSettingsPage} />
                     <Route render={() => <NotFoundPage title="Infrastructure" />} />
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
index ef69c1d104062..7614b46014378 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
@@ -80,12 +80,12 @@ export const NodeContextPopover = ({
 
   const nodeDetailMenuItemLinkProps = useLinkProps({
     ...getNodeDetailUrl({
-      nodeType,
-      nodeId: node.id,
+      assetType: nodeType,
+      assetId: node.id,
       search: {
         from: nodeDetailFrom,
         to: currentTime,
-        assetName: node.name,
+        name: node.name,
       },
     }),
   });
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
index fec97c5fc0720..1aef6ff563192 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
@@ -78,12 +78,12 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
 
     const nodeDetailMenuItemLinkProps = useLinkProps({
       ...getNodeDetailUrl({
-        nodeType,
-        nodeId: node.id,
+        assetType: node.type,
+        assetId: node.id,
         search: {
           from: nodeDetailFrom,
           to: currentTime,
-          assetName: node.name,
+          name: node.name,
         },
       }),
     });
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
index 10af65db3fdd9..d5ba376a514bb 100644
--- 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
@@ -5,53 +5,51 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
-import { useLocation, useRouteMatch } from 'react-router-dom';
+import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import type { TimeRange } from '@kbn/es-query';
 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 { FlyoutTabIds, type Tab } from '../../../components/asset_details/types';
+import { ContentTabIds, type Tab } from '../../../components/asset_details/types';
 import type { InventoryItemType } from '../../../../common/inventory_models/types';
 import { AssetDetails } from '../../../components/asset_details/asset_details';
 import { MetricsPageTemplate } from '../page_template';
-import { useMetricsTimeContext } from './hooks/use_metrics_time';
 
 const orderedFlyoutTabs: Tab[] = [
   {
-    id: FlyoutTabIds.OVERVIEW,
+    id: ContentTabIds.OVERVIEW,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', {
       defaultMessage: 'Overview',
     }),
   },
   {
-    id: FlyoutTabIds.METADATA,
+    id: ContentTabIds.METADATA,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.metadata.title', {
       defaultMessage: 'Metadata',
     }),
   },
   {
-    id: FlyoutTabIds.PROCESSES,
+    id: ContentTabIds.PROCESSES,
     name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.processes', {
       defaultMessage: 'Processes',
     }),
   },
   {
-    id: FlyoutTabIds.LOGS,
+    id: ContentTabIds.LOGS,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.logs.title', {
       defaultMessage: 'Logs',
     }),
   },
   {
-    id: FlyoutTabIds.ANOMALIES,
+    id: ContentTabIds.ANOMALIES,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', {
       defaultMessage: 'Anomalies',
     }),
   },
   {
-    id: FlyoutTabIds.OSQUERY,
+    id: ContentTabIds.OSQUERY,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.osquery', {
       defaultMessage: 'Osquery',
     }),
@@ -63,25 +61,6 @@ export const AssetDetailPage = () => {
   const {
     params: { type: nodeType, node: nodeId },
   } = useRouteMatch<{ type: InventoryItemType; node: string }>();
-  const { search } = useLocation();
-
-  const assetName = useMemo(() => {
-    const queryParams = new URLSearchParams(search);
-    return queryParams.get('assetName') ?? undefined;
-  }, [search]);
-
-  const { timeRange } = useMetricsTimeContext();
-
-  const dateRange: TimeRange = useMemo(
-    () => ({
-      from:
-        typeof timeRange.from === 'number'
-          ? new Date(timeRange.from).toISOString()
-          : timeRange.from,
-      to: typeof timeRange.to === 'number' ? new Date(timeRange.to).toISOString() : timeRange.to,
-    }),
-    [timeRange.from, timeRange.to]
-  );
 
   const { metricIndicesExist, remoteClustersExist } = source?.status ?? {};
 
@@ -110,10 +89,8 @@ export const AssetDetailPage = () => {
       <AssetDetails
         asset={{
           id: nodeId,
-          name: assetName,
         }}
         assetType={nodeType}
-        dateRange={dateRange}
         tabs={orderedFlyoutTabs}
         links={['apmServices']}
         renderMode={{
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
index fa5baa6c9d815..dbccacb36adba 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
@@ -11,10 +11,10 @@ import { useRouteMatch } from 'react-router-dom';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import type { InventoryItemType } from '../../../../common/inventory_models/types';
 import { AssetDetailPage } from './asset_detail_page';
-import { MetricsTimeProvider } from './hooks/use_metrics_time';
 import { MetricDetailPage } from './metric_detail_page';
+import { MetricsTimeProvider } from './hooks/use_metrics_time';
 
-export const MetricDetail = () => {
+export const NodeDetail = () => {
   const {
     params: { type: nodeType, node: nodeName },
   } = useRouteMatch<{ type: InventoryItemType; node: string }>();
@@ -27,9 +27,13 @@ export const MetricDetail = () => {
 
   return (
     <EuiErrorBoundary>
-      <MetricsTimeProvider>
-        {nodeType === 'host' ? <AssetDetailPage /> : <MetricDetailPage />}
-      </MetricsTimeProvider>
+      {nodeType === 'host' ? (
+        <AssetDetailPage />
+      ) : (
+        <MetricsTimeProvider>
+          <MetricDetailPage />
+        </MetricsTimeProvider>
+      )}
     </EuiErrorBoundary>
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx
deleted file mode 100644
index 43009ad6b8ff9..0000000000000
--- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/page_providers.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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 { EuiErrorBoundary } from '@elastic/eui';
-import React from 'react';
-import { MetricsTimeProvider } from './hooks/use_metrics_time';
-
-export const withMetricPageProviders =
-  <T extends object>(Component: React.ComponentType<T>) =>
-  (props: T) =>
-    (
-      <EuiErrorBoundary>
-        <MetricsTimeProvider>
-          <Component {...props} />
-        </MetricsTimeProvider>
-      </EuiErrorBoundary>
-    );
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
index 0888424c8f2db..f52a137b8792c 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
@@ -105,12 +105,13 @@ export const MetricsExplorerChartContextMenu: React.FC<Props> = ({
     : [];
 
   const nodeType = source && options.groupBy && fieldToNodeType(source, options.groupBy);
+
   const nodeDetailLinkProps = useLinkProps({
     app: 'metrics',
     ...(nodeType
       ? getNodeDetailUrl({
-          nodeType,
-          nodeId: series.id,
+          assetType: nodeType,
+          assetId: series.id,
           search: {
             from: dateMathExpressionToEpoch(timeRange.from),
             to: dateMathExpressionToEpoch(timeRange.to, true),
diff --git a/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts b/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts
index f230a7097cf6d..cea6bd835b985 100644
--- a/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts
+++ b/x-pack/plugins/observability_shared/public/hooks/use_link_props.ts
@@ -19,6 +19,7 @@ export interface LinkDescriptor {
   pathname?: string;
   hash?: string;
   search?: Search;
+  state?: unknown;
 }
 
 export interface LinkProps {
@@ -31,7 +32,7 @@ export interface Options {
 }
 
 export const useLinkProps = (
-  { app, pathname, hash, search }: LinkDescriptor,
+  { app, pathname, hash, search, state }: LinkDescriptor,
   options: Options = {}
 ): LinkProps => {
   validateParams({ app, pathname, hash, search });
@@ -77,7 +78,7 @@ export const useLinkProps = (
       const navigate = () => {
         if (navigateToApp) {
           const navigationPath = mergedHash ? `#${mergedHash}` : mergedPathname;
-          navigateToApp(app, { path: navigationPath ? navigationPath : undefined });
+          navigateToApp(app, { path: navigationPath ? navigationPath : undefined, state });
         }
       };
 
@@ -94,7 +95,7 @@ export const useLinkProps = (
         navigate();
       }
     };
-  }, [navigateToApp, mergedHash, mergedPathname, app, prompt]);
+  }, [prompt, navigateToApp, mergedHash, mergedPathname, app, state]);
 
   return {
     href,