diff --git a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_metric_charts.ts b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_metric_charts.ts
index 0c31e1f2e664..9a0d4b0f7305 100644
--- a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_metric_charts.ts
+++ b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/host/host_metric_charts.ts
@@ -16,7 +16,7 @@ import { memoryUsage, memoryUsageBreakdown } from '../metric_charts/memory';
 import { rxTx } from '../metric_charts/network';
 import type { XYConfig } from '../metric_charts/types';
 
-export const hostMetricCharts: XYConfig[] = [
+export const hostMetricFlyoutCharts: XYConfig[] = [
   cpuUsage,
   memoryUsage,
   normalizedLoad1m,
diff --git a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/index.ts b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/index.ts
index 119a55de9685..4f85d0a7bfba 100644
--- a/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/index.ts
+++ b/x-pack/plugins/infra/public/common/visualizations/lens/dashboards/asset_details/index.ts
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { hostMetricCharts, hostMetricChartsFullPage } from './host/host_metric_charts';
+import { hostMetricFlyoutCharts, hostMetricChartsFullPage } from './host/host_metric_charts';
 import { hostKPICharts, KPIChartProps } from './host/host_kpi_charts';
 import { nginxAccessCharts, nginxStubstatusCharts } from './host/nginx_charts';
 
 export { type KPIChartProps };
 export const assetDetailsDashboards = {
-  host: { hostMetricCharts, hostMetricChartsFullPage, hostKPICharts },
-  nginxDashboard: { nginxStubstatusCharts, nginxAccessCharts },
+  host: { hostMetricFlyoutCharts, hostMetricChartsFullPage, hostKPICharts },
+  nginx: { nginxStubstatusCharts, nginxAccessCharts },
 };
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 7e98c5683452..24f5e56ecedb 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
@@ -7,45 +7,66 @@
 
 import type { TimeRange } from '@kbn/es-query';
 import createContainer from 'constate';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useState } from 'react';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { parseDateRange } from '../../../utils/datemath';
-
 import { toTimestampRange } from '../utils';
 import { useAssetDetailsUrlState } from './use_asset_details_url_state';
 
-const DEFAULT_DATE_RANGE: TimeRange = {
-  from: 'now-15m',
-  to: 'now',
-};
-
 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) {
   const [urlState, setUrlState] = useAssetDetailsUrlState();
   const dateRange: TimeRange = urlState?.dateRange ?? initialDateRange;
+  const [parsedDateRange, setParsedDateRange] = useState(parseDateRange(dateRange));
+  const [refreshTs, setRefreshTs] = useState(Date.now());
+
+  useEffectOnce(() => {
+    const { from, to } = getParsedDateRange();
+
+    // forces the date picker to initiallize with absolute dates.
+    setUrlState({ dateRange: { from, to } });
+  });
 
   const setDateRange = useCallback(
     (newDateRange: TimeRange) => {
       setUrlState({ dateRange: newDateRange });
+      setParsedDateRange(parseDateRange(newDateRange));
+      setRefreshTs(Date.now());
     },
     [setUrlState]
   );
 
-  const parsedDateRange = useMemo(() => {
-    const { from = DEFAULT_DATE_RANGE.from, to = DEFAULT_DATE_RANGE.to } =
-      parseDateRange(dateRange);
+  const getParsedDateRange = useCallback(() => {
+    const defaultDateRange = getDefaultDateRange();
+    const { from = defaultDateRange.from, to = defaultDateRange.to } = parsedDateRange;
 
     return { from, to };
-  }, [dateRange]);
+  }, [parsedDateRange]);
 
-  const getDateRangeInTimestamp = useCallback(
-    () => toTimestampRange(parsedDateRange),
-    [parsedDateRange]
-  );
+  const getDateRangeInTimestamp = useCallback(() => {
+    return toTimestampRange(getParsedDateRange());
+  }, [getParsedDateRange]);
 
-  return { dateRange, setDateRange, getDateRangeInTimestamp };
+  return {
+    dateRange,
+    getDateRangeInTimestamp,
+    getParsedDateRange,
+    refreshTs,
+    setDateRange,
+  };
 }
 
 export const [DateRangeProvider, useDateRangeProviderContext] =
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
index 7ffa55ed8297..011cb94c3525 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx
@@ -16,6 +16,7 @@ import {
   KPI_CHART_HEIGHT,
   AVERAGE_SUBTITLE,
 } from '../../../../../common/visualizations';
+import { useDateRangeProviderContext } from '../../../hooks/use_date_range';
 
 interface Props {
   dataView?: DataView;
@@ -24,6 +25,7 @@ interface Props {
 }
 
 export const KPIGrid = React.memo(({ nodeName, dataView, timeRange }: Props) => {
+  const { refreshTs } = useDateRangeProviderContext();
   const filters = useMemo(() => {
     return [
       buildCombinedHostsFilter({
@@ -43,6 +45,7 @@ export const KPIGrid = React.memo(({ nodeName, dataView, timeRange }: Props) =>
             dataView={dataView}
             dateRange={timeRange}
             layers={{ ...layers, options: { ...layers.options, subtitle: AVERAGE_SUBTITLE } }}
+            lastReloadRequestTime={refreshTs}
             height={KPI_CHART_HEIGHT}
             filters={filters}
             title={title}
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx
index e84a1e19d4e0..0ec0f51dcd18 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx
@@ -15,20 +15,22 @@ import { MetricsSectionTitle, NginxMetricsSectionTitle } from '../../../componen
 
 interface Props {
   assetName: string;
-  timeRange: TimeRange;
+  dateRange: TimeRange;
   metricsDataView?: DataView;
   logsDataView?: DataView;
 }
 
+const { host, nginx } = assetDetailsDashboards;
+
 export const MetricsGrid = React.memo(
-  ({ assetName, metricsDataView, logsDataView, timeRange }: Props) => {
+  ({ assetName, metricsDataView, logsDataView, dateRange: timeRange }: Props) => {
     return (
       <>
         <Section title={MetricsSectionTitle}>
           <ChartGrid
             assetName={assetName}
             timeRange={timeRange}
-            charts={assetDetailsDashboards.host.hostMetricChartsFullPage}
+            charts={host.hostMetricChartsFullPage}
             metricsDataView={metricsDataView}
             logsDataView={logsDataView}
             data-test-subj="infraAssetDetailsMetricsChart"
@@ -40,12 +42,12 @@ export const MetricsGrid = React.memo(
             assetName={assetName}
             timeRange={timeRange}
             charts={[
-              ...assetDetailsDashboards.nginxDashboard.nginxStubstatusCharts.map((n) => ({
-                ...n,
+              ...nginx.nginxStubstatusCharts.map((chart) => ({
+                ...chart,
                 dependsOn: ['nginx.stubstatus'],
               })),
-              ...assetDetailsDashboards.nginxDashboard.nginxAccessCharts.map((n) => ({
-                ...n,
+              ...nginx.nginxAccessCharts.map((chart) => ({
+                ...chart,
                 dependsOn: ['nginx.access'],
               })),
             ]}
@@ -63,13 +65,13 @@ export const MetricsGridCompact = ({
   assetName,
   metricsDataView,
   logsDataView,
-  timeRange,
+  dateRange: timeRange,
 }: Props) => (
   <Section title={MetricsSectionTitle}>
     <ChartGrid
       assetName={assetName}
       timeRange={timeRange}
-      charts={assetDetailsDashboards.host.hostMetricCharts}
+      charts={host.hostMetricFlyoutCharts}
       metricsDataView={metricsDataView}
       logsDataView={logsDataView}
       data-test-subj="infraAssetDetailsMetricsChart"
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
index 8a0850ab1753..ffc2d4617914 100644
--- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
+++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
@@ -23,7 +23,7 @@ import { useDateRangeProviderContext } from '../../hooks/use_date_range';
 import { SectionSeparator } from './section_separator';
 
 export const Overview = () => {
-  const { dateRange } = useDateRangeProviderContext();
+  const { getParsedDateRange } = useDateRangeProviderContext();
   const { asset, assetType, renderMode } = useAssetDetailsRenderPropsContext();
   const {
     metadata,
@@ -32,18 +32,19 @@ export const Overview = () => {
   } = useMetadataStateProviderContext();
   const { logs, metrics } = useDataViewsProviderContext();
 
+  const parsedDateRange = getParsedDateRange();
   const isFullPageView = renderMode.mode !== 'flyout';
 
   const metricsSection = isFullPageView ? (
     <MetricsGrid
-      timeRange={dateRange}
+      dateRange={parsedDateRange}
       logsDataView={logs.dataView}
       metricsDataView={metrics.dataView}
       assetName={asset.name}
     />
   ) : (
     <MetricsGridCompact
-      timeRange={dateRange}
+      dateRange={parsedDateRange}
       logsDataView={logs.dataView}
       metricsDataView={metrics.dataView}
       assetName={asset.name}
@@ -58,7 +59,7 @@ export const Overview = () => {
   return (
     <EuiFlexGroup direction="column" gutterSize="m">
       <EuiFlexItem grow={false}>
-        <KPIGrid nodeName={asset.name} timeRange={dateRange} dataView={metrics.dataView} />
+        <KPIGrid nodeName={asset.name} timeRange={parsedDateRange} dataView={metrics.dataView} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {fetchMetadataError ? (
@@ -88,12 +89,16 @@ export const Overview = () => {
             />
           </EuiCallOut>
         ) : (
-          <>{metadataSummarySection}</>
+          metadataSummarySection
         )}
         <SectionSeparator />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <AlertsSummaryContent assetName={asset.name} assetType={assetType} dateRange={dateRange} />
+        <AlertsSummaryContent
+          assetName={asset.name}
+          assetType={assetType}
+          dateRange={parsedDateRange}
+        />
         <SectionSeparator />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>{metricsSection}</EuiFlexItem>
diff --git a/x-pack/plugins/infra/public/components/lens/index.tsx b/x-pack/plugins/infra/public/components/lens/index.tsx
index ae05bd8e82fe..5da90461d1fa 100644
--- a/x-pack/plugins/infra/public/components/lens/index.tsx
+++ b/x-pack/plugins/infra/public/components/lens/index.tsx
@@ -10,3 +10,5 @@ export { ChartPlaceholder } from './chart_placeholder';
 export { TooltipContent } from './metric_explanation/tooltip_content';
 export { HostMetricsDocsLink } from './metric_explanation/host_metrics_docs_link';
 export { HostMetricsExplanationContent } from './metric_explanation/host_metrics_explanation_content';
+
+export * from './types';
diff --git a/x-pack/plugins/infra/public/components/lens/lens_chart.tsx b/x-pack/plugins/infra/public/components/lens/lens_chart.tsx
index abcbe555a5d6..8ff3348c4319 100644
--- a/x-pack/plugins/infra/public/components/lens/lens_chart.tsx
+++ b/x-pack/plugins/infra/public/components/lens/lens_chart.tsx
@@ -56,7 +56,7 @@ export const LensChart = ({
 
   const sytle: CSSProperties = useMemo(() => ({ height }), [height]);
 
-  const Lens = (
+  const lens = (
     <LensWrapper
       id={id}
       attributes={attributes}
@@ -64,35 +64,30 @@ export const LensChart = ({
       disableTriggers={disableTriggers}
       extraActions={extraActions}
       filters={filters}
+      hidePanelTitles={hidePanelTitles}
       lastReloadRequestTime={lastReloadRequestTime}
       loading={isLoading}
       style={sytle}
       query={query}
       overrides={overrides}
       onBrushEnd={onBrushEnd}
-      hidePanelTitles={hidePanelTitles}
     />
   );
-
-  const getContent = () => {
-    if (!toolTip) {
-      return Lens;
-    }
-
-    return (
-      <EuiToolTip
-        delay="regular"
-        content={React.cloneElement(toolTip, {
-          formula,
-        })}
-        anchorClassName="eui-fullWidth"
-      >
-        {/* EuiToolTip forwards some event handlers to the child component. 
+  const content = !toolTip ? (
+    lens
+  ) : (
+    <EuiToolTip
+      delay="regular"
+      content={React.cloneElement(toolTip, {
+        formula,
+      })}
+      anchorClassName="eui-fullWidth"
+    >
+      {/* EuiToolTip forwards some event handlers to the child component. 
         Wrapping Lens inside a div prevents that from causing unnecessary re-renders  */}
-        <div>{Lens}</div>
-      </EuiToolTip>
-    );
-  };
+      <div>{lens}</div>
+    </EuiToolTip>
+  );
 
   return (
     <EuiPanel
@@ -106,7 +101,7 @@ export const LensChart = ({
         min-height: ${height}px;
       `}
     >
-      {error ? <ChartLoadError /> : getContent()}
+      {error ? <ChartLoadError /> : content}
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx b/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx
index 8513881c22ad..d5c70be73033 100644
--- a/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx
+++ b/x-pack/plugins/infra/public/components/lens/lens_wrapper.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import type { Action } from '@kbn/ui-actions-plugin/public';
+
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
 import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
@@ -15,16 +15,7 @@ import { LensAttributes } from '@kbn/lens-embeddable-utils';
 import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
 import { ChartLoadingProgress, ChartPlaceholder } from './chart_placeholder';
 import { parseDateRange } from '../../utils/datemath';
-
-export type LensWrapperProps = Omit<
-  TypedLensByValueInput,
-  'timeRange' | 'attributes' | 'viewMode'
-> & {
-  attributes: LensAttributes | null;
-  dateRange: TimeRange;
-  extraActions: Action[];
-  loading?: boolean;
-};
+import type { LensWrapperProps } from './types';
 
 export const LensWrapper = ({
   attributes,
@@ -32,6 +23,7 @@ export const LensWrapper = ({
   filters,
   lastReloadRequestTime,
   loading = false,
+  onLoad,
   query,
   ...props
 }: LensWrapperProps) => {
@@ -85,11 +77,17 @@ export const LensWrapper = ({
     query,
   ]);
 
-  const onLoad = useCallback(() => {
-    if (!embeddableLoaded) {
-      setEmbeddableLoaded(true);
-    }
-  }, [embeddableLoaded]);
+  const handleOnLoad = useCallback(
+    (isLoading: boolean) => {
+      if (!embeddableLoaded) {
+        setEmbeddableLoaded(true);
+      }
+      if (onLoad) {
+        onLoad(isLoading);
+      }
+    },
+    [embeddableLoaded, onLoad]
+  );
 
   const parsedDateRange: TimeRange = useMemo(() => {
     const { from = state.dateRange.from, to = state.dateRange.to } = parseDateRange(
@@ -104,7 +102,6 @@ export const LensWrapper = ({
     <div
       css={css`
         position: relative;
-        border-radius: ${euiTheme.size.s};
         overflow: hidden;
         height: 100%;
         .echMetric {
@@ -125,7 +122,7 @@ export const LensWrapper = ({
               attributes={state.attributes}
               filters={state.filters}
               lastReloadRequestTime={state.lastReloadRequestTime}
-              onLoad={onLoad}
+              onLoad={handleOnLoad}
               query={state.query}
               timeRange={parsedDateRange}
               viewMode={ViewMode.VIEW}
diff --git a/x-pack/plugins/infra/public/components/lens/types.ts b/x-pack/plugins/infra/public/components/lens/types.ts
index 8a4791de8cdf..e7c11bb4781d 100644
--- a/x-pack/plugins/infra/public/components/lens/types.ts
+++ b/x-pack/plugins/infra/public/components/lens/types.ts
@@ -6,7 +6,22 @@
  */
 
 import type { DataView } from '@kbn/data-views-plugin/public';
-import type { LensWrapperProps } from './lens_wrapper';
+import type { TimeRange } from '@kbn/es-query';
+import type { LensAttributes } from '@kbn/lens-embeddable-utils';
+import type { LensEmbeddableInput, TypedLensByValueInput } from '@kbn/lens-plugin/public';
+import type { Action } from '@kbn/ui-actions-plugin/public';
+
+export type LensWrapperProps = Omit<
+  TypedLensByValueInput,
+  'timeRange' | 'attributes' | 'viewMode'
+> & {
+  attributes: LensAttributes | null;
+  dateRange: TimeRange;
+  extraActions: Action[];
+  loading?: boolean;
+};
+
+export type BrushEndArgs = Parameters<NonNullable<LensEmbeddableInput['onBrushEnd']>>[0];
 
 export type BaseChartProps = Pick<
   LensWrapperProps,
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx
index 065b6739c41f..1fab43b5cd14 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx
@@ -6,13 +6,11 @@
  */
 
 import React from 'react';
-
 import { useSourceContext } from '../../../../../containers/metrics_source';
 import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
 import type { HostNodeRow } from '../../hooks/use_hosts_table';
 import { AssetDetails } from '../../../../../components/asset_details/asset_details';
 import { orderedFlyoutTabs } from './tabs';
-import { useAssetDetailsUrlState } from '../../../../../components/asset_details/hooks/use_asset_details_url_state';
 
 export interface Props {
   node: HostNodeRow;
@@ -22,13 +20,12 @@ export interface Props {
 export const FlyoutWrapper = ({ node: { name }, closeFlyout }: Props) => {
   const { source } = useSourceContext();
   const { parsedDateRange } = useUnifiedSearchContext();
-  const [urlState] = useAssetDetailsUrlState();
 
   return source ? (
     <AssetDetails
       asset={{ id: name, name }}
       assetType="host"
-      dateRange={urlState?.dateRange ?? parsedDateRange}
+      dateRange={parsedDateRange}
       overrides={{
         metadata: {
           showActionsColumn: true,
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi.tsx
index d7cab3f64748..18fa090382dc 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/kpis/kpi.tsx
@@ -16,7 +16,7 @@ import { useHostCountContext } from '../../hooks/use_host_count';
 import { useAfterLoadedState } from '../../hooks/use_after_loaded_state';
 
 export const Kpi = ({ id, title, layers, toolTip, height }: KPIChartProps & { height: number }) => {
-  const { searchCriteria } = useUnifiedSearchContext();
+  const { searchCriteria, parsedDateRange } = useUnifiedSearchContext();
   const { dataView } = useMetricsDataViewContext();
   const { requestTs, hostNodes, loading: hostsLoading } = useHostsViewContext();
   const { data: hostCountData, isRequestRunning: hostCountLoading } = useHostCountContext();
@@ -52,7 +52,7 @@ export const Kpi = ({ id, title, layers, toolTip, height }: KPIChartProps & { he
   // we want it to reload only once the table has finished loading
   const { afterLoadedState } = useAfterLoadedState(loading, {
     lastReloadRequestTime: requestTs,
-    dateRange: searchCriteria.dateRange,
+    dateRange: parsedDateRange,
     query: shouldUseSearchCriteria ? searchCriteria.query : undefined,
     filters,
   });
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx
index 7bbf361e6b26..e8acd3a05fac 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/chart.tsx
@@ -23,7 +23,7 @@ export interface ChartProps extends Pick<TypedLensByValueInput, 'id' | 'override
 }
 
 export const Chart = ({ id, title, layers, visualOptions, overrides }: ChartProps) => {
-  const { searchCriteria } = useUnifiedSearchContext();
+  const { parsedDateRange, searchCriteria } = useUnifiedSearchContext();
   const { dataView } = useMetricsDataViewContext();
   const { requestTs, loading } = useHostsViewContext();
   const { currentPage } = useHostsTableContext();
@@ -46,7 +46,7 @@ export const Chart = ({ id, title, layers, visualOptions, overrides }: ChartProp
   // we want it to reload only once the table has finished loading
   const { afterLoadedState } = useAfterLoadedState(loading, {
     lastReloadRequestTime: requestTs,
-    dateRange: searchCriteria.dateRange,
+    dateRange: parsedDateRange,
     query: shouldUseSearchCriteria ? searchCriteria.query : undefined,
   });
 
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_count.ts b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_count.ts
index 06ecb1a87e39..5d1f4766a775 100644
--- a/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_count.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_count.ts
@@ -27,7 +27,6 @@ export const useHostCount = () => {
   const { search: fetchHostCount, requests$ } = useDataSearch({
     getRequest: useCallback(() => {
       const query = buildQuery();
-      const dateRange = parsedDateRange;
 
       const filters: QueryDslQueryContainer = {
         bool: {
@@ -42,8 +41,8 @@ export const useHostCount = () => {
             {
               range: {
                 [dataView?.timeFieldName ?? '@timestamp']: {
-                  gte: dateRange.from,
-                  lte: dateRange.to,
+                  gte: parsedDateRange.from,
+                  lte: parsedDateRange.to,
                   format: 'strict_date_optional_time',
                 },
               },