Merge cockroachdb#80660

80660: ui: Initialize the time picker custom option with the current selection r=jocrl a=jocrl Addresses cockroachdb#75552. Partially addresses cockroachdb#71205. This commit modifies the time picker custom selection to be prefilled with the currently selected time. https://user-images.githubusercontent.com/91907326/165617651-8b1c735b-fb5d-468b-bc88-aa8d2c8ccbe3.mov Release note (ui): The time picker (in the Metrics and SQL Activity, among other, pages) custom selection now defaults to the currently selected time. Co-authored-by: Josephine Lee <[email protected]>
gtr · Apr 28, 2022 · 7c45e41 · 7c45e41
2 parents 232e975 + 7aa4e1e
commit 7c45e41
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx b/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx
@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Alert, DatePicker, Form, Input, Popover, TimePicker } from "antd";
 import moment, { Moment } from "moment";
 import classNames from "classnames/bind";
@@ -52,6 +52,14 @@ export function DateRangeMenu({
   );
   const [endMoment, setEndMoment] = useState<Moment>(endInit || moment.utc());
 
+  useEffect(() => {
+    setStartMoment(startInit);
+  }, [startInit]);
+
+  useEffect(() => {
+    setEndMoment(endInit);
+  }, [endInit]);
+
   const onChangeStart = (m?: Moment) => {
     m && setStartMoment(m);
   };

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx
@@ -16,6 +16,7 @@ import { CaretDown } from "src/icon/caretDown";
 import classNames from "classnames/bind";
 
 import styles from "./rangeSelector.module.scss";
+import { TimeWindow } from "./timeScaleTypes";
 
 const cx = classNames.bind(styles);
 
@@ -32,6 +33,7 @@ export type Selected = {
   timeEnd?: string;
   title?: string;
   timeLabel?: string;
+  timeWindow: TimeWindow;
 };
 
 interface RangeSelectProps {
@@ -123,8 +125,8 @@ const RangeSelect = ({
       {custom ? (
         <div className={cx("custom-menu")}>
           <DateRangeMenu
-            startInit={moment.utc().subtract(10, "minutes")}
-            endInit={moment.utc()}
+            startInit={selected.timeWindow.start}
+            endInit={selected.timeWindow.end}
             onSubmit={onChangeDate}
             onCancel={() => setCustom(false)}
           />

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
@@ -85,11 +85,13 @@ export const getTimeRangeTitle = (
       timeEnd: moment.utc(end).format(timeFormat),
       title: "Custom",
       timeLabel: getTimeLabel(currentWindow),
+      timeWindow: currentWindow,
     };
   } else {
     return {
       title: currentScale.key,
       timeLabel: getTimeLabel(currentWindow),
+      timeWindow: currentWindow,
     };
   }
 };

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts
@@ -70,8 +70,9 @@ export type TimeRangeTitle =
       timeEnd: string;
       title: "Custom";
       timeLabel: string;
+      timeWindow: TimeWindow;
     }
-  | { title: string; timeLabel: string };
+  | { title: string; timeLabel: string; timeWindow: TimeWindow };
 
 export enum ArrowDirection {
   LEFT,

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx
@@ -113,7 +113,11 @@ describe("<TimeScaleDropdown>", function() {
     );
 
     const title = getTimeRangeTitle(currentWindow, state.currentScale);
-    assert.deepEqual(title, { title: "Past 10 Minutes", timeLabel: "10m" });
+    assert.deepEqual(title, {
+      title: "Past 10 Minutes",
+      timeLabel: "10m",
+      timeWindow: currentWindow,
+    });
   });
 
   describe("getTimeRangeTitle", () => {
@@ -137,6 +141,7 @@ describe("<TimeScaleDropdown>", function() {
         timeEnd,
         title: "Custom",
         timeLabel: "10m",
+        timeWindow: currentWindow,
       });
     });
 
@@ -177,6 +182,7 @@ describe("<TimeScaleDropdown>", function() {
         timeEnd,
         title: "Custom",
         timeLabel: "1d",
+        timeWindow: currentWindow,
       });
     });
   });