diff --git a/pkg/ui/workspaces/db-console/src/views/keyVisualizer/index.tsx b/pkg/ui/workspaces/db-console/src/views/keyVisualizer/index.tsx
index 09b909647f11..efa21f68fab5 100644
--- a/pkg/ui/workspaces/db-console/src/views/keyVisualizer/index.tsx
+++ b/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);
diff --git a/pkg/ui/workspaces/db-console/src/views/keyVisualizer/timeWindow.tsx b/pkg/ui/workspaces/db-console/src/views/keyVisualizer/timeWindow.tsx
deleted file mode 100644
index 5fdc7d072151..000000000000
--- a/pkg/ui/workspaces/db-console/src/views/keyVisualizer/timeWindow.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2022 The Cockroach Authors.
-//
-// Use of this software is governed by the Business Source License
-// included in the file licenses/BSL.txt.
-//
-// As of the Change Date specified in that file, in accordance with
-// the Business Source License, use of this software will be governed
-// by the Apache License, Version 2.0, included in the file
-// licenses/APL.txt.
-
-import React from "react";
-import { TimeScaleOptions } from "@cockroachlabs/cluster-ui";
-import TimeScaleDropdown from "src/views/cluster/containers/timeScaleDropdownWithSearchParams";
-import moment from "moment-timezone";
-
-export const KeyVisualizerTimeWindow = () => {
-  const keyVisualizerTimeScaleOptions: 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"),
-    },
-  };
-
-  return (
-    <TimeScaleDropdown
-      options={keyVisualizerTimeScaleOptions}
-      hasCustomOption={false}
-    />
-  );
-};