From 9880ad04cbe1cf4a19e9c5a1f19a4fc4b9c749d9 Mon Sep 17 00:00:00 2001
From: David Hartunian <davidh@cockroachlabs.com>
Date: Mon, 27 Mar 2023 14:51:42 -0400
Subject: [PATCH] ui: connect metrics provider to metrics timescale object

Previously, the `MetricsDataProvider` component queried the redux
store for the `TimeScale` object which contained details of the
currently active time window. This piece of state was assumed to
update to account for the "live" moving window that metrics show when
pre-set lookback time windows are selected.

A recent PR: #98331 removed the feature that polled new data from SQL
pages, which also disabled polling on metrics pages due to the re-use
of `TimeScale`.

This commit modifies the `MetricsDataProvider` to instead read the
`metricsTime` field of the `TimeScaleState` object. This object was
constructed for use by the `MetricsDataProvider` but was not wired up
to the component.

Resolves #99524

Epic: None

Release note: None
---
 pkg/ui/workspaces/db-console/src/redux/timeScale.ts  |  3 +++
 .../shared/containers/metricDataProvider/index.tsx   | 12 ++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/pkg/ui/workspaces/db-console/src/redux/timeScale.ts b/pkg/ui/workspaces/db-console/src/redux/timeScale.ts
index 576f3e9fb527..9cef25cf17f7 100644
--- a/pkg/ui/workspaces/db-console/src/redux/timeScale.ts
+++ b/pkg/ui/workspaces/db-console/src/redux/timeScale.ts
@@ -167,6 +167,9 @@ export const selectTimeScale = createSelector(
   timeScaleState => timeScaleState.scale,
 );
 
+export const selectMetricsTime = (state: AdminUIState) =>
+  state.timeScale.metricsTime;
+
 export type AdjustTimeScaleReturnType = {
   timeScale: TimeScale;
   adjustmentReason?: "low_resolution_period" | "deleted_data_period";
diff --git a/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx b/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx
index f34bcf33fb39..e38e899bbb10 100644
--- a/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx
@@ -20,7 +20,7 @@ import {
   requestMetrics as requestMetricsAction,
 } from "src/redux/metrics";
 import { AdminUIState } from "src/redux/state";
-import { toDateRange, util } from "@cockroachlabs/cluster-ui";
+import { util } from "@cockroachlabs/cluster-ui";
 import { findChildrenOfType } from "src/util/find";
 import {
   Metric,
@@ -37,7 +37,7 @@ import {
 } from "@cockroachlabs/cluster-ui";
 import { History } from "history";
 import { refreshSettings } from "src/redux/apiReducers";
-import { selectTimeScale, adjustTimeScale } from "src/redux/timeScale";
+import { adjustTimeScale, selectMetricsTime } from "src/redux/timeScale";
 import {
   selectResolution10sStorageTTL,
   selectResolution30mStorageTTL,
@@ -255,12 +255,12 @@ class MetricsDataProvider extends React.Component<
 const timeInfoSelector = createSelector(
   selectResolution10sStorageTTL,
   selectResolution30mStorageTTL,
-  selectTimeScale,
-  (sTTL, mTTL, scale) => {
-    if (!_.isObject(scale)) {
+  selectMetricsTime,
+  (sTTL, mTTL, metricsTime) => {
+    if (!_.isObject(metricsTime.currentWindow)) {
       return null;
     }
-    const [startMoment, endMoment] = toDateRange(scale);
+    const { start: startMoment, end: endMoment } = metricsTime.currentWindow;
     const start = startMoment.valueOf();
     const end = endMoment.valueOf();
     const syncedScale = findClosestTimeScale(