ui: fix infinite re-render on the key visualizer page

Since #101258, the TimeScaleDropdownWithSearchParams
can cause infinite re-renders. The exact cause of the bug
is not yet diagnosed, but it occurs on the key visualizer page,
and seems to be related to the custom duration options. This
is tracked in #106395.

This commit removes the dependency on TimeScaleDropdownWithSearchParams
from the key visualizer, and replaces it with the vanilla TimeScaleDropdown.
The custom duration options are still present.

Informs: #106395
Epic: none
Release note: None

pkg/ui/workspaces/db-console/src/views/keyVisualizer/index.tsx

@@ -18,21 +18,64 @@ import {
   SampleBucket,
 } from "src/views/keyVisualizer/interfaces";
 import { CanvasHeight, XAxisPadding } from "./constants";
-import { KeyVisualizerTimeWindow } from "src/views/keyVisualizer/timeWindow";
 import { AdminUIState } from "src/redux/state";
 import { connect } from "react-redux";
-import { TimeScale, util } from "@cockroachlabs/cluster-ui";
+import {
+  TimeScale,
+  TimeScaleDropdown,
+  TimeScaleOptions,
+  util,
+} from "@cockroachlabs/cluster-ui";
 import { selectClusterSettings } from "src/redux/clusterSettings";
-import { selectTimeScale } from "src/redux/timeScale";
+import { selectTimeScale, setTimeScale } from "src/redux/timeScale";
 import { refreshSettings } from "src/redux/apiReducers";
 import KeyVisSamplesRequest = cockroach.server.serverpb.KeyVisSamplesRequest;
 import KeyVisSamplesResponse = cockroach.server.serverpb.KeyVisSamplesResponse;
 import { BackToAdvanceDebug } from "../reports/containers/util";
 import { RouteComponentProps } from "react-router-dom";
+import moment from "moment-timezone";
 
 const EnabledSetting = "keyvisualizer.enabled";
 const IntervalSetting = "keyvisualizer.sample_interval";
 
+const timeScaleOptions: TimeScaleOptions = {
+  "Past 30 Minutes": {
+    windowSize: moment.duration(30, "minutes"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past Hour": {
+    windowSize: moment.duration(1, "hour"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past 6 Hours": {
+    windowSize: moment.duration(6, "hours"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past Day": {
+    windowSize: moment.duration(1, "day"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past 2 Days": {
+    windowSize: moment.duration(2, "day"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past 3 Days": {
+    windowSize: moment.duration(3, "day"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+  "Past Week": {
+    windowSize: moment.duration(7, "days"),
+    windowValid: moment.duration(15, "minutes"),
+    sampleSize: moment.duration(1, "minutes"),
+  },
+};
+
 export function getRequestsAsNumber(requests: number | Long | null): number {
   if (typeof requests === "number") {
     return requests;
@@ -135,6 +178,7 @@ function buildKeyVisualizerProps(
 interface KeyVisualizerContainerProps {
   refreshInterval: number;
   timeScale: TimeScale;
+  setTimeScale: typeof setTimeScale;
 }
 
 class KeyVisualizerContainer extends React.Component<
@@ -184,7 +228,11 @@ class KeyVisualizerContainer extends React.Component<
       <>
         <BackToAdvanceDebug history={this.props.history} />
         <div style={{ position: "relative" }}>
-          <KeyVisualizerTimeWindow />
+          <TimeScaleDropdown
+            options={timeScaleOptions}
+            currentScale={this.props.timeScale}
+            setTimeScale={this.props.setTimeScale}
+          />
           <KeyVisualizer
             samples={samples}
             yOffsetsForKey={yOffsetsForKey}
@@ -202,6 +250,7 @@ interface KeyVisualizerPageProps {
     [key: string]: cockroach.server.serverpb.SettingsResponse.IValue;
   };
   refreshSettings: typeof refreshSettings;
+  setTimeScale: typeof setTimeScale;
   timeScale: TimeScale;
 }
 
@@ -245,5 +294,6 @@ export default connect(
   }),
   {
     refreshSettings,
+    setTimeScale,
   },
 )(KeyVisualizerPage);