[Metrics][Discover] Fix time range losing sync in metrics grid

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/hooks/use_chart_layers_from_esql.test.ts

@@ -40,7 +40,7 @@ describe('useChartLayers', () => {
     services: servicesMock as UnifiedHistogramServices,
   };
 
-  const getTimeRange = (): TimeRange => ({ from: 'now-1h', to: 'now' });
+  const timeRange: TimeRange = { from: 'now-1h', to: 'now' };
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -59,7 +59,7 @@ describe('useChartLayers', () => {
     const { result } = renderHook(() =>
       useChartLayersFromEsql({
         query: 'FROM metrics-*',
-        getTimeRange,
+        timeRange,
         seriesType: 'line',
         color: 'red',
         services: mockServices.services,
@@ -88,7 +88,7 @@ describe('useChartLayers', () => {
     const { result } = renderHook(() =>
       useChartLayersFromEsql({
         query: 'FROM metrics-*',
-        getTimeRange,
+        timeRange,
         seriesType: 'area',
         color: 'blue',
         services: mockServices.services,
@@ -125,7 +125,7 @@ describe('useChartLayers', () => {
     const { result } = renderHook(() =>
       useChartLayersFromEsql({
         query: 'FROM metrics-*',
-        getTimeRange,
+        timeRange,
         seriesType: 'area',
         color: 'blue',
         services: mockServices.services,
@@ -162,7 +162,7 @@ describe('useChartLayers', () => {
     const { result } = renderHook(() =>
       useChartLayersFromEsql({
         query: 'FROM metrics-*',
-        getTimeRange,
+        timeRange,
         seriesType: 'bar',
         services: mockServices.services,
       })

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/hooks/use_chart_layers_from_esql.ts

@@ -11,15 +11,14 @@ import type { LensBaseLayer, LensSeriesLayer } from '@kbn/lens-embeddable-utils'
 import type { ChartSectionProps } from '@kbn/unified-histogram/types';
 import useAsync from 'react-use/lib/useAsync';
 import { useMemo } from 'react';
-import type { TimeRange } from '@kbn/data-plugin/common';
 import { getESQLQueryColumns } from '@kbn/esql-utils';
 import type { MetricUnit } from '@kbn/metrics-experience-plugin/common/types';
 import { useEsqlQueryInfo } from '../../../hooks';
 import { DIMENSIONS_COLUMN, getLensMetricFormat } from '../../../common/utils';
 
 export const useChartLayersFromEsql = ({
   query,
-  getTimeRange,
+  timeRange,
   color,
   seriesType,
   services,
@@ -29,11 +28,10 @@ export const useChartLayersFromEsql = ({
   query: string;
   color?: string;
   unit?: MetricUnit;
-  getTimeRange: () => TimeRange;
   seriesType: LensSeriesLayer['seriesType'];
   services: ChartSectionProps['services'];
   abortController?: AbortController;
-} & Pick<ChartSectionProps, 'services'>): LensSeriesLayer[] => {
+} & Pick<ChartSectionProps, 'services' | 'timeRange'>): LensSeriesLayer[] => {
   const queryInfo = useEsqlQueryInfo({ query });
 
   const { value: columns = [] } = useAsync(
@@ -42,10 +40,10 @@ export const useChartLayersFromEsql = ({
         esqlQuery: query,
         search: services.data.search.search,
         signal: abortController?.signal,
-        timeRange: getTimeRange(),
+        timeRange,
       }),
 
-    [query, services.data.search, abortController, getTimeRange]
+    [query, services.data.search, abortController, timeRange]
   );
 
   const layers = useMemo<LensSeriesLayer[]>(() => {

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/hooks/use_lens_props.test.ts

@@ -38,7 +38,7 @@ describe('useLensProps', () => {
     },
   ];
   let discoverFetch$: BehaviorSubject<UnifiedHistogramInputMessage>;
-  const getTimeRange = (): TimeRange => ({ from: 'now-1h', to: 'now' });
+  const timeRange: TimeRange = { from: 'now-1h', to: 'now' };
 
   const createMockChartRef = () => {
     return React.createRef<HTMLDivElement>();
@@ -102,7 +102,7 @@ describe('useLensProps', () => {
         title: 'Test Chart',
         query: 'FROM metrics-*',
         services: servicesMock as UnifiedHistogramServices,
-        getTimeRange,
+        timeRange,
         discoverFetch$,
         chartRef,
         chartLayers: mockChartLayers,
@@ -134,7 +134,7 @@ describe('useLensProps', () => {
         title: 'Test Chart',
         query: 'FROM metrics-*',
         services: servicesMock as UnifiedHistogramServices,
-        getTimeRange,
+        timeRange,
         discoverFetch$,
         chartRef,
         chartLayers: mockChartLayers,
@@ -181,7 +181,7 @@ describe('useLensProps', () => {
         title: 'Test Chart',
         query: 'FROM metrics-*',
         services: servicesMock as UnifiedHistogramServices,
-        getTimeRange,
+        timeRange,
         discoverFetch$,
         chartRef,
         chartLayers: mockChartLayers,
@@ -199,7 +199,7 @@ describe('useLensProps', () => {
         id: 'metricsExperienceLensComponent',
         noPadding: true,
         searchSessionId: undefined,
-        timeRange: getTimeRange(),
+        timeRange,
         viewMode: 'view',
       });
     });
@@ -211,7 +211,7 @@ describe('useLensProps', () => {
         title: 'Test Chart',
         query: 'FROM metrics-*',
         services: servicesMock as UnifiedHistogramServices,
-        getTimeRange,
+        timeRange,
         discoverFetch$,
         chartRef: undefined,
         chartLayers: mockChartLayers,

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/hooks/use_lens_props.ts

@@ -26,7 +26,6 @@ import {
   combineLatest,
   map,
 } from 'rxjs';
-import type { TimeRange } from '@kbn/data-plugin/common';
 import { useEuiTheme } from '@elastic/eui';
 import type {
   LensYBoundsConfig,
@@ -48,7 +47,7 @@ export const useLensProps = ({
   title,
   query,
   services,
-  getTimeRange,
+  timeRange,
   searchSessionId,
   discoverFetch$,
   chartRef,
@@ -58,11 +57,10 @@ export const useLensProps = ({
   title: string;
   query: string;
   discoverFetch$: Observable<UnifiedHistogramInputMessage>;
-  getTimeRange: () => TimeRange;
   chartRef?: React.RefObject<HTMLDivElement>;
   chartLayers: LensSeriesLayer[];
   yBounds?: LensYBoundsConfig;
-} & Pick<ChartSectionProps, 'services' | 'searchSessionId'>) => {
+} & Pick<ChartSectionProps, 'services' | 'searchSessionId' | 'timeRange'>) => {
   const { euiTheme } = useEuiTheme();
   const chartConfigUpdates$ = useRef<BehaviorSubject<void>>(new BehaviorSubject<void>(undefined));
 
@@ -87,11 +85,11 @@ export const useLensProps = ({
     (attributes: LensAttributes) => {
       return getLensProps({
         searchSessionId,
-        getTimeRange,
+        timeRange,
         attributes,
       });
     },
-    [searchSessionId, getTimeRange]
+    [searchSessionId, timeRange]
   );
 
   const [lensPropsContext, setLensPropsContext] = useState<ReturnType<typeof buildLensProps>>();
@@ -183,16 +181,15 @@ const buildLensParams = ({
 
 const getLensProps = ({
   searchSessionId,
-  getTimeRange,
+  timeRange,
   attributes,
 }: {
   searchSessionId?: string;
   attributes: LensAttributes;
-  getTimeRange: () => TimeRange;
-}): LensProps => ({
+} & Pick<ChartSectionProps, 'timeRange'>) => ({
   id: 'metricsExperienceLensComponent',
-  viewMode: 'view',
-  timeRange: getTimeRange(),
+  viewMode: 'view' as const,
+  timeRange,
   attributes,
   noPadding: true,
   searchSessionId,

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/chart/index.tsx

@@ -25,7 +25,7 @@ export const ChartSizes = {
 };
 
 export type ChartSize = keyof typeof ChartSizes;
-export type ChartProps = Pick<ChartSectionProps, 'searchSessionId' | 'requestParams'> &
+export type ChartProps = Pick<ChartSectionProps, 'searchSessionId' | 'timeRange'> &
   Omit<LensWrapperProps, 'lensProps' | 'onViewDetails' | 'onCopyToDashboard' | 'description'> & {
     size?: ChartSize;
     discoverFetch$: Observable<UnifiedHistogramInputMessage>;
@@ -44,7 +44,7 @@ export const Chart = ({
   onBrushEnd,
   onFilter,
   onViewDetails,
-  requestParams,
+  timeRange,
   titleHighlight,
   discoverFetch$,
   size = 'm',
@@ -60,15 +60,14 @@ export const Chart = ({
 
   const [isSaveModalVisible, { toggle: toggleSaveModalVisible }] = useBoolean(false);
   const { SaveModalComponent } = services.lens;
-  const { getTimeRange } = requestParams;
 
   const lensProps = useLensProps({
     title,
     query: esqlQuery,
     services,
     searchSessionId,
     discoverFetch$,
-    getTimeRange,
+    timeRange,
     chartRef,
     chartLayers,
     yBounds,

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid.test.tsx

@@ -98,6 +98,7 @@ describe('MetricsExperienceGrid', () => {
       renderToggleActions: () => <div data-test-subj="toggleActions" />,
       chartToolbarCss: { name: '', styles: '' },
       histogramCss: { name: '', styles: '' },
+      timeRange: { from: 'now-15m', to: 'now' },
       requestParams: {
         getTimeRange: () => ({ from: 'now-15m', to: 'now' }),
         filters: [],

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid.tsx

@@ -50,7 +50,7 @@ export const MetricsExperienceGrid = ({
   const { toggleActions, leftSideActions, rightSideActions } = useToolbarActions({
     fields,
     renderToggleActions,
-    requestParams,
+    timeRange,
   });
 
   const onKeyDown = useCallback(

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_experience_grid_content.tsx

@@ -198,7 +198,7 @@ export const MetricsExperienceGridContent = ({
           onBrushEnd={onBrushEnd}
           onFilter={onFilter}
           discoverFetch$={discoverFetch$}
-          requestParams={requestParams}
+          timeRange={timeRange}
           abortController={abortController}
           searchTerm={searchTerm}
         />

src/platform/packages/shared/kbn-unified-metrics-grid/src/components/metrics_grid.test.tsx

@@ -35,16 +35,7 @@ describe('MetricsGrid', () => {
     discoverFetch$.complete();
   });
 
-  const requestParams: MetricsGridProps['requestParams'] = {
-    filters: [],
-    getTimeRange: () => ({ from: 'now-1h', to: 'now' }),
-    query: {
-      esql: 'FROM metrics-*',
-    },
-    esqlVariables: [],
-    relativeTimeRange: { from: 'now-1h', to: 'now' },
-    updateTimeRange: () => {},
-  };
+  const timeRange: MetricsGridProps['timeRange'] = { from: 'now-1h', to: 'now' };
 
   const services = {
     fieldsMetadata: fieldsMetadataPluginPublicMock.createStartContract(),
@@ -72,7 +63,7 @@ describe('MetricsGrid', () => {
         dimensions={[]}
         discoverFetch$={discoverFetch$}
         fields={fields}
-        requestParams={requestParams}
+        timeRange={timeRange}
         services={services}
       />
     );
@@ -88,7 +79,7 @@ describe('MetricsGrid', () => {
         dimensions={[{ name: 'host.name', type: ES_FIELD_TYPES.KEYWORD }]}
         discoverFetch$={discoverFetch$}
         fields={fields}
-        requestParams={requestParams}
+        timeRange={timeRange}
         services={services}
       />
     );
@@ -101,7 +92,7 @@ describe('MetricsGrid', () => {
         dimensions={[{ name: 'host.name', type: ES_FIELD_TYPES.KEYWORD }]}
         discoverFetch$={discoverFetch$}
         fields={fields}
-        requestParams={requestParams}
+        timeRange={timeRange}
         services={services}
       />
     );
@@ -126,7 +117,7 @@ describe('MetricsGrid', () => {
           dimensions={[]}
           discoverFetch$={discoverFetch$}
           fields={fields}
-          requestParams={requestParams}
+          timeRange={timeRange}
           services={services}
         />
       );
@@ -149,7 +140,7 @@ describe('MetricsGrid', () => {
           dimensions={[]}
           discoverFetch$={discoverFetch$}
           fields={fields}
-          requestParams={requestParams}
+          timeRange={timeRange}
           services={services}
         />
       );
@@ -177,7 +168,7 @@ describe('MetricsGrid', () => {
           dimensions={[]}
           discoverFetch$={discoverFetch$}
           fields={fields}
-          requestParams={requestParams}
+          timeRange={timeRange}
           services={services}
         />
       );
@@ -208,7 +199,7 @@ describe('MetricsGrid', () => {
           dimensions={[]}
           discoverFetch$={discoverFetch$}
           fields={fields}
-          requestParams={requestParams}
+          timeRange={timeRange}
           services={services}
         />
       );
@@ -246,7 +237,7 @@ describe('MetricsGrid', () => {
           dimensions={[]}
           discoverFetch$={discoverFetch$}
           fields={multipleFields}
-          requestParams={requestParams}
+          timeRange={timeRange}
           services={services}
         />
       );
@@ -291,7 +282,7 @@ describe('MetricsGrid', () => {
             dimensions={[]}
             discoverFetch$={discoverFetch$}
             fields={fields}
-            requestParams={requestParams}
+            timeRange={timeRange}
             services={services}
           />
         );
@@ -310,7 +301,7 @@ describe('MetricsGrid', () => {
             dimensions={[]}
             discoverFetch$={discoverFetch$}
             fields={fields}
-            requestParams={requestParams}
+            timeRange={timeRange}
             services={services}
           />
         );
@@ -341,7 +332,7 @@ describe('MetricsGrid', () => {
             dimensions={[]}
             discoverFetch$={discoverFetch$}
             fields={fields}
-            requestParams={requestParams}
+            timeRange={timeRange}
             services={services}
           />
         );
@@ -363,7 +354,7 @@ describe('MetricsGrid', () => {
             dimensions={[]}
             discoverFetch$={discoverFetch$}
             fields={fields}
-            requestParams={requestParams}
+            timeRange={timeRange}
             services={services}
           />
         );