[Infrastructure UI]: Use dateRange as source of truth for Hosts View (#150029)

## 📓 Summary

Closes #150027 

This PR removes from the URL state the `dateRangeTimestamp` filter and
keeps as a unique source of truth the `dateRange`, derivating from this
one the expected timestamp conversion on each update or page refresh.

## 🧪 Testing

1. Go To Hosts view
2. Select `Last 1 hour` time range.
3. Verify the only saved param in the URL is the `dateRange`
4. Wait for a couple of minutes
5. Refresh the page

You should see the data is updated to the last real hour since the
moment the page has been reloaded.
You can more specifically verify this by checking what timestamp range
is sent with the snapshot request payload.

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -32,32 +32,34 @@ export const INITAL_VALUE = {
 
 export const useHostsView = () => {
   const { sourceId } = useSourceContext();
-  const { buildQuery, dateRangeTimestamp } = useUnifiedSearchContext();
+  const { buildQuery, getDateRangeAsTimestamp } = useUnifiedSearchContext();
   const [hostViewState, setHostViewState] = useState<HostViewState>(INITAL_VALUE);
 
   const baseRequest = useMemo(() => {
     const esQuery = buildQuery();
+    const { from, to } = getDateRangeAsTimestamp();
+
     const snapshotRequest: UseSnapshotRequest = {
       filterQuery: esQuery ? JSON.stringify(esQuery) : null,
       metrics: [],
       groupBy: [],
       nodeType: 'host',
       sourceId,
-      currentTime: dateRangeTimestamp.to,
+      currentTime: to,
       includeTimeseries: false,
       sendRequestImmediately: true,
       timerange: {
         interval: '1m',
-        from: dateRangeTimestamp.from,
-        to: dateRangeTimestamp.to,
+        from,
+        to,
         ignoreLookback: true,
       },
       // The user might want to click on the submit button without changing the filters
-      // This makes sure all child componets will re-render.
+      // This makes sure all child components will re-render.
       requestTs: Date.now(),
     };
     return snapshotRequest;
-  }, [buildQuery, dateRangeTimestamp.from, dateRangeTimestamp.to, sourceId]);
+  }, [buildQuery, getDateRangeAsTimestamp, sourceId]);
 
   return {
     baseRequest,

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

@@ -17,7 +17,7 @@ import { useSyncKibanaTimeFilterTime } from '../../../../hooks/use_kibana_timefi
 import { useHostsUrlState, INITIAL_DATE_RANGE } from './use_unified_search_url_state';
 
 export const useUnifiedSearch = () => {
-  const { state, dispatch, getRangeInTimestamp, getTime } = useHostsUrlState();
+  const { state, dispatch, getTime, getDateRangeAsTimestamp } = useHostsUrlState();
   const { metricsDataView } = useMetricsDataViewContext();
   const { services } = useKibana<InfraClientStartDeps>();
   const {
@@ -78,12 +78,11 @@ export const useUnifiedSearch = () => {
           query,
           filters,
           dateRange: newDateRange,
-          dateRangeTimestamp: getRangeInTimestamp(newDateRange),
           panelFilters,
         },
       });
     },
-    [getTime, dispatch, getRangeInTimestamp]
+    [getTime, dispatch]
   );
 
   // This won't prevent onSubmit from being fired twice when `clear filters` is clicked,
@@ -131,9 +130,9 @@ export const useUnifiedSearch = () => {
     buildQuery,
     clearSavedQuery,
     controlPanelFilters: state.panelFilters,
-    dateRangeTimestamp: state.dateRangeTimestamp,
     onSubmit: debounceOnSubmit,
     saveQuery,
+    getDateRangeAsTimestamp,
     unifiedSearchQuery: state.query,
     unifiedSearchDateRange: state.dateRange,
     unifiedSearchFilters: state.filters,

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

@@ -6,7 +6,6 @@
  */
 
 import { useCallback, useEffect, useReducer } from 'react';
-import { TimeRange } from '@kbn/es-query';
 import DateMath from '@kbn/datemath';
 import deepEqual from 'fast-deep-equal';
 import * as rt from 'io-ts';
@@ -23,25 +22,19 @@ const DEFAULT_QUERY = {
   query: '',
 };
 const DEFAULT_FROM_MINUTES_VALUE = 15;
-const INITIAL_DATE = new Date();
-export const INITIAL_DATE_RANGE = { from: `now-${DEFAULT_FROM_MINUTES_VALUE}m`, to: 'now' };
-const CALCULATED_DATE_RANGE_TO = INITIAL_DATE.getTime();
 const DEFAULT_FROM_IN_MILLISECONDS = DEFAULT_FROM_MINUTES_VALUE * 60000;
-const CALCULATED_DATE_RANGE_FROM = new Date(
-  CALCULATED_DATE_RANGE_TO - DEFAULT_FROM_IN_MILLISECONDS
-).getTime();
+
+export const INITIAL_DATE_RANGE = { from: `now-${DEFAULT_FROM_MINUTES_VALUE}m`, to: 'now' };
+
+const getDefaultFromTimestamp = () => Date.now() - DEFAULT_FROM_IN_MILLISECONDS;
+const getDefaultToTimestamp = () => Date.now();
 
 const INITIAL_HOSTS_STATE: HostsState = {
   query: DEFAULT_QUERY,
   filters: [],
   panelFilters: [],
   // for unified search
-  dateRange: { ...INITIAL_DATE_RANGE },
-  // for useSnapshot
-  dateRangeTimestamp: {
-    from: CALCULATED_DATE_RANGE_FROM,
-    to: CALCULATED_DATE_RANGE_TO,
-  },
+  dateRange: INITIAL_DATE_RANGE,
 };
 
 type Action =
@@ -84,15 +77,12 @@ export const useHostsUrlState = () => {
 
   const [state, dispatch] = useReducer(reducer, urlState);
 
-  const getRangeInTimestamp = useCallback(({ from, to }: TimeRange) => {
-    const fromTS = DateMath.parse(from)?.valueOf() ?? CALCULATED_DATE_RANGE_FROM;
-    const toTS = DateMath.parse(to)?.valueOf() ?? CALCULATED_DATE_RANGE_TO;
+  const getDateRangeAsTimestamp = useCallback(() => {
+    const from = DateMath.parse(state.dateRange.from)?.valueOf() ?? getDefaultFromTimestamp();
+    const to = DateMath.parse(state.dateRange.to)?.valueOf() ?? getDefaultToTimestamp();
 
-    return {
-      from: fromTS,
-      to: toTS,
-    };
-  }, []);
+    return { from, to };
+  }, [state.dateRange]);
 
   useEffect(() => {
     if (!deepEqual(state, urlState)) {
@@ -102,7 +92,7 @@ export const useHostsUrlState = () => {
 
   return {
     dispatch,
-    getRangeInTimestamp,
+    getDateRangeAsTimestamp,
     getTime,
     state,
   };
@@ -144,17 +134,11 @@ const StringDateRangeRT = rt.type({
   to: rt.string,
 });
 
-const DateRangeRT = rt.type({
-  from: rt.number,
-  to: rt.number,
-});
-
 const HostsStateRT = rt.type({
   filters: HostsFiltersRT,
   panelFilters: HostsFiltersRT,
   query: HostsQueryStateRT,
   dateRange: StringDateRangeRT,
-  dateRangeTimestamp: DateRangeRT,
 });
 
 export type HostsState = rt.TypeOf<typeof HostsStateRT>;