Merge #70594

70594: [CC-4714] ui: fix drag-to-zoom granularity issue r=Santamaura a=Santamaura

This PR addresses the issue where a user drags-to-zoom on a small timeframe and the resulting graphs retain the previous timewindow's sample size. This is due to the MetricsDataProvider component prematurely requesting a set of timeseries query data before the redux store can update the timescale sample size. The PR solves the issue by using the currentwindow state as the source of truth for the timescale sample size.

Note: Fixing this issue seems to further expose [this issue](https://cockroachlabs.atlassian.net/browse/CC-4709) as now when a user drags to zoom a tight time window thats earlier than 11 days ago, the datasets returned seem to be empty thus rendering an empty graph. Therefore it may be beneficial to wait until CC-4709 is resolved before merging this fix in.

Release note (ui change): fix drag-to-zoom granularity issue

Screenshots:
Before:

https://user-images.githubusercontent.com/17861665/134422292-a710e3e3-e3c9-401c-8a20-b0aed6660db3.mp4

After:

https://user-images.githubusercontent.com/17861665/134422658-aac28d53-cc13-474f-83ce-6ffb273c7666.mp4





Co-authored-by: Santamaura <[email protected]>

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 { MilliToNano } from "src/util/convert";
+import { MilliToNano, MilliToSeconds } from "src/util/convert";
 import { findChildrenOfType } from "src/util/find";
 import {
   Metric,
@@ -29,7 +29,11 @@ import {
   QueryTimeInfo,
 } from "src/views/shared/components/metricQuery";
 import { PayloadAction } from "src/interfaces/action";
-import { TimeWindow, TimeScale } from "src/redux/timewindow";
+import {
+  TimeWindow,
+  TimeScale,
+  findClosestTimeScale,
+} from "src/redux/timewindow";
 import { History } from "history";
 import { refreshSettings } from "src/redux/apiReducers";
 
@@ -249,11 +253,20 @@ const timeInfoSelector = createSelector(
     if (!_.isObject(tw.currentWindow)) {
       return null;
     }
+
+    // It is possible for the currentWindow and scale to be out of sync due to
+    // the flow of some events such as drag-to-zoom. Thus, the source of truth for
+    // scale here should be based on the currentWindow.
+    const { currentWindow } = tw;
+    const start = currentWindow.start.valueOf();
+    const end = currentWindow.end.valueOf();
+    const syncedScale = findClosestTimeScale(MilliToSeconds(end - start));
+
     return {
-      start: Long.fromNumber(MilliToNano(tw.currentWindow.start.valueOf())),
-      end: Long.fromNumber(MilliToNano(tw.currentWindow.end.valueOf())),
+      start: Long.fromNumber(MilliToNano(start)),
+      end: Long.fromNumber(MilliToNano(end)),
       sampleDuration: Long.fromNumber(
-        MilliToNano(tw.scale.sampleSize.asMilliseconds()),
+        MilliToNano(syncedScale.sampleSize.asMilliseconds()),
       ),
     };
   },