[Infra UI] Add date picker to asset details

x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx

@@ -22,6 +22,7 @@ import { Popover } from '../../common/popover';
 import { useDateRangeProviderContext } from '../../../hooks/use_date_range';
 
 type DataViewOrigin = 'logs' | 'metrics';
+type BrushEndArgs = Parameters<NonNullable<LensEmbeddableInput['onBrushEnd']>>[0];
 
 interface Props {
   nodeName: string;
@@ -54,10 +55,7 @@ export const MetricsGrid = React.memo(
     );
 
     const handleBrushEnd = useCallback(
-      ({
-        range,
-        preventDefault,
-      }: Parameters<NonNullable<LensEmbeddableInput['onBrushEnd']>>[0]) => {
+      ({ range, preventDefault }: BrushEndArgs) => {
         setDateRange({
           from: new Date(range[0]).toISOString(),
           to: new Date(range[1]).toISOString(),

x-pack/plugins/infra/public/components/asset_details/types.ts

@@ -26,8 +26,7 @@ export enum FlyoutTabIds {
 
 export type TabIds = `${FlyoutTabIds}`;
 
-export interface TabState {
-  dateRange?: TimeRange;
+export interface OverridableTabState {
   metadata?: {
     query?: string;
     showActionsColumn?: boolean;
@@ -46,6 +45,10 @@ export interface TabState {
   };
 }
 
+export interface TabState extends OverridableTabState {
+  activeTabId?: TabIds;
+  dateRange: TimeRange;
+}
 export interface FlyoutProps {
   closeFlyout: () => void;
   mode: 'flyout';
@@ -70,7 +73,7 @@ export interface AssetDetailsProps {
   dateRange: TimeRange;
   tabs: Tab[];
   activeTabId?: TabIds;
-  overrides?: TabState;
+  overrides?: OverridableTabState;
   renderMode: RenderMode;
   onTabsStateChange?: TabsStateChangeFn;
   links?: LinkOptions[];
@@ -79,7 +82,9 @@ export interface AssetDetailsProps {
   metricAlias: string;
 }
 
-export type TabsStateChangeFn = (state: TabState & { activeTabId?: TabIds }) => void;
+export type TabsStateChangeFn = (
+  state: OverridableTabState & { activeTabId?: TabIds; dateRange: TimeRange }
+) => void;
 
 export interface ContentTemplateProps {
   header: Pick<AssetDetailsProps, 'tabs' | 'links'>;

x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx

@@ -28,7 +28,7 @@ export const FlyoutWrapper = ({ node: { name }, closeFlyout }: Props) => {
     <AssetDetails
       asset={{ id: name, name }}
       assetType="host"
-      dateRange={parsedDateRange}
+      dateRange={hostFlyoutState?.dateRange ?? parsedDateRange}
       activeTabId={hostFlyoutState?.tabId}
       overrides={{
         metadata: {
@@ -44,6 +44,7 @@ export const FlyoutWrapper = ({ node: { name }, closeFlyout }: Props) => {
       }}
       onTabsStateChange={(state) =>
         setHostFlyoutState({
+          dateRange: state.dateRange,
           metadataSearch: state.metadata?.query,
           processSearch: state.processes?.query,
           logsSearch: state.logs?.query,

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_flyout_url_state.ts

@@ -59,6 +59,10 @@ const HostFlyoutStateRT = rt.intersection([
     tabId: FlyoutTabIdRT,
   }),
   rt.partial({
+    dateRange: rt.type({
+      from: rt.string,
+      to: rt.string,
+    }),
     processSearch: rt.string,
     metadataSearch: rt.string,
     logsSearch: rt.string,

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx

@@ -128,7 +128,7 @@ const sortTableData =
 export const useHostsTable = () => {
   const [selectedItems, setSelectedItems] = useState<HostNodeRow[]>([]);
   const { hostNodes } = useHostsViewContext();
-  const { searchCriteria } = useUnifiedSearchContext();
+  const { searchCriteria, parsedDateRange } = useUnifiedSearchContext();
   const [{ pagination, sorting }, setProperties] = useHostsTableUrlState();
   const {
     services: {
@@ -244,7 +244,7 @@ export const useHostsTable = () => {
         render: (title: HostNodeRow['title']) => (
           <EntryTitle
             title={title}
-            time={searchCriteria.dateRange}
+            time={parsedDateRange}
             onClick={() => reportHostEntryClick(title)}
           />
         ),
@@ -351,7 +351,7 @@ export const useHostsTable = () => {
         width: '120px',
       },
     ],
-    [hostFlyoutState?.itemId, reportHostEntryClick, searchCriteria.dateRange, setHostFlyoutState]
+    [hostFlyoutState?.itemId, parsedDateRange, reportHostEntryClick, setHostFlyoutState]
   );
 
   const selection: EuiTableSelectionType<HostNodeRow> = {

x-pack/plugins/infra/public/pages/metrics/metric_detail/asset_detail_page.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { TimeRange } from '@kbn/es-query';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { NoRemoteCluster } from '../../../components/empty_states';
@@ -70,26 +70,35 @@ export const AssetDetailPage = () => {
     return queryParams.get('assetName') ?? undefined;
   }, [search]);
 
-  const { parsedTimeRange, setTimeRange } = useMetricsTimeContext();
+  const { timeRange, setTimeRange } = useMetricsTimeContext();
 
   const dateRange: TimeRange = useMemo(
     () => ({
-      from: new Date(parsedTimeRange.from).toISOString(),
-      to: new Date(parsedTimeRange.to).toISOString(),
+      from:
+        typeof timeRange.from === 'number'
+          ? new Date(timeRange.from).toISOString()
+          : timeRange.from,
+      to: typeof timeRange.to === 'number' ? new Date(timeRange.to).toISOString() : timeRange.to,
     }),
-    [parsedTimeRange.from, parsedTimeRange.to]
+    [timeRange.from, timeRange.to]
   );
 
   // Retrocompatibility
-  const handleTabStateChange = ({ dateRange: newDateRange }: TabState) => {
-    if (newDateRange) {
-      setTimeRange({
-        from: newDateRange.from,
-        to: newDateRange.to,
-        interval: parsedTimeRange.interval,
-      });
-    }
-  };
+  const handleTabStateChange = useCallback(
+    ({ dateRange: newDateRange }: TabState) => {
+      if (newDateRange) {
+        setTimeRange(
+          {
+            from: newDateRange.from,
+            to: newDateRange.to,
+            interval: timeRange.interval,
+          },
+          false
+        );
+      }
+    },
+    [setTimeRange, timeRange.interval]
+  );
 
   const { metricIndicesExist, remoteClustersExist } = source?.status ?? {};
 

x-pack/plugins/infra/public/pages/metrics/metric_detail/hooks/use_metrics_time.ts

@@ -64,9 +64,11 @@ export const useMetricsTime = () => {
     parseRange(urlState.time || DEFAULT_TIMERANGE)
   );
 
-  const updateTimeRange = useCallback((range: MetricsTimeInput) => {
+  const updateTimeRange = useCallback((range: MetricsTimeInput, parseDate = true) => {
     setTimeRange(range);
-    setParsedTimeRange(parseRange(range));
+    if (parseDate) {
+      setParsedTimeRange(parseRange(range));
+    }
   }, []);
 
   return {