ui: make Metrics and SQL timepicker align

Previously, the timepicker from Metrics page and
the timepicker on SQL Activity pages acted independently.
Now, if the value of one changes, the other value changes
to the same period selected.

This commit also fixes a bug where the period selected
would change to a custom value if the Metrics page was
refreshed.

Fixes cockroachdb#78187
Fixes cockroachdb#82152

Release note (ui change): The period selected on the Metrics
page and the SQL Activity pages are now aligned. If the user
changes in one page, the value will be the same for the other.

Release note (bug fix): The period selected continues the same
when refreshing the page, no longer changing to a custom period.

pkg/ui/workspaces/db-console/src/views/devtools/containers/raftMessages/index.tsx

@@ -23,6 +23,7 @@ import {
 } from "src/redux/hover";
 import { NodesSummary, nodesSummarySelector } from "src/redux/nodes";
 import { AdminUIState } from "src/redux/state";
+import { setGlobalTimeScaleAction } from "src/redux/statements";
 import { nodeIDAttr } from "src/util/constants";
 import {
   GraphDashboardProps,
@@ -42,7 +43,6 @@ import {
   TimeWindow,
   TimeScale,
   setMetricsFixedWindow,
-  setTimeScale,
 } from "src/redux/timeScale";
 
 interface NodeGraphsOwnProps {
@@ -203,7 +203,7 @@ const mapDispatchToProps = {
   hoverOn: hoverOnAction,
   hoverOff: hoverOffAction,
   setMetricsFixedWindow: setMetricsFixedWindow,
-  setTimeScale,
+  setTimeScale: setGlobalTimeScaleAction,
 };
 
 export default withRouter(