[Metrics UI] Synch time for metrics ui Kibana time (#85502)

* Synch time for inventory and metrics explorer with Kibana time

* Mock timefilter

* more mocks

x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_time.ts

@@ -7,18 +7,25 @@ import { useCallback, useState, useEffect } from 'react';
 import * as rt from 'io-ts';
 import { pipe } from 'fp-ts/lib/pipeable';
 import { fold } from 'fp-ts/lib/Either';
+import DateMath from '@elastic/datemath';
 import { constant, identity } from 'fp-ts/lib/function';
 import createContainer from 'constate';
 import { useUrlState } from '../../../../utils/use_url_state';
-
+import { useKibanaTimefilterTime } from '../../../../hooks/use_kibana_timefilter_time';
 export const DEFAULT_WAFFLE_TIME_STATE: WaffleTimeState = {
   currentTime: Date.now(),
   isAutoReloading: false,
 };
 
 export const useWaffleTime = () => {
+  // INFO: We currently only use the "to" time, but in the future we may do more.
+  const [getTime] = useKibanaTimefilterTime({ from: 'now', to: 'now' });
+  const kibanaTime = DateMath.parse(getTime().to);
   const [urlState, setUrlState] = useUrlState<WaffleTimeState>({
-    defaultState: DEFAULT_WAFFLE_TIME_STATE,
+    defaultState: {
+      ...DEFAULT_WAFFLE_TIME_STATE,
+      currentTime: kibanaTime ? kibanaTime.toDate().getTime() : Date.now(),
+    },
     decodeUrlState,
     encodeUrlState,
     urlStateKey: 'waffleTime',

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.test.tsx

@@ -15,6 +15,11 @@ import {
   createSeries,
 } from '../../../../utils/fixtures/metrics_explorer';
 
+jest.mock('../../../../hooks/use_kibana_timefilter_time', () => ({
+  useKibanaTimefilterTime: (defaults: { from: string; to: string }) => [() => defaults],
+  useSyncKibanaTimeFilterTime: () => [() => {}],
+}));
+
 const renderUseMetricsExplorerStateHook = () =>
   renderHook((props) => useMetricsExplorerState(props.source, props.derivedIndexPattern), {
     initialProps: { source, derivedIndexPattern },

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.test.tsx

@@ -24,6 +24,11 @@ jest.mock('../../../../alerting/use_alert_prefill', () => ({
   }),
 }));
 
+jest.mock('../../../../hooks/use_kibana_timefilter_time', () => ({
+  useKibanaTimefilterTime: (defaults: { from: string; to: string }) => [() => defaults],
+  useSyncKibanaTimeFilterTime: () => [() => {}],
+}));
+
 const renderUseMetricsExplorerOptionsHook = () => renderHook(() => useMetricsExplorerOptions());
 
 interface LocalStore {

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts

@@ -11,6 +11,10 @@ import { useState, useEffect, useMemo, Dispatch, SetStateAction } from 'react';
 import { useAlertPrefillContext } from '../../../../alerting/use_alert_prefill';
 import { Color } from '../../../../../common/color_palette';
 import { metricsExplorerMetricRT } from '../../../../../common/http_api/metrics_explorer';
+import {
+  useKibanaTimefilterTime,
+  useSyncKibanaTimeFilterTime,
+} from '../../../../hooks/use_kibana_timefilter_time';
 
 const metricsExplorerOptionsMetricRT = t.intersection([
   metricsExplorerMetricRT,
@@ -145,14 +149,29 @@ function useStateWithLocalStorage<State>(
 }
 
 export const useMetricsExplorerOptions = () => {
+  const TIME_DEFAULTS = { from: 'now-1h', to: 'now' };
+  const [getTime] = useKibanaTimefilterTime(TIME_DEFAULTS);
+  const { from, to } = getTime();
+  const defaultTimeRange = {
+    from,
+    to,
+    interval: DEFAULT_TIMERANGE.interval,
+  };
+
   const [options, setOptions] = useStateWithLocalStorage<MetricsExplorerOptions>(
     'MetricsExplorerOptions',
     DEFAULT_OPTIONS
   );
   const [currentTimerange, setTimeRange] = useStateWithLocalStorage<MetricsExplorerTimeOptions>(
     'MetricsExplorerTimeRange',
-    DEFAULT_TIMERANGE
+    defaultTimeRange
   );
+
+  useSyncKibanaTimeFilterTime(TIME_DEFAULTS, {
+    from: currentTimerange.from,
+    to: currentTimerange.to,
+  });
+
   const [chartOptions, setChartOptions] = useStateWithLocalStorage<MetricsExplorerChartOptions>(
     'MetricsExplorerChartOptions',
     DEFAULT_CHART_OPTIONS
@@ -177,7 +196,7 @@ export const useMetricsExplorerOptions = () => {
     defaultViewState: {
       options: DEFAULT_OPTIONS,
       chartOptions: DEFAULT_CHART_OPTIONS,
-      currentTimerange: DEFAULT_TIMERANGE,
+      currentTimerange: defaultTimeRange,
     },
     options,
     chartOptions,