ui: remove option 10/30 min from SQL Activity page

Previously we had the options for 10 and 30min on
SQL Activity pages, which created some confusion, since
we would always show the last 1h info.
This commit remove those 2 options.
If the user select any of those options on the Metrics
page, it will get updated to 1h on the SQL Activity
pages.

Fixes cockroachdb#82914

Release note (ui change): Removal of the 10 and 30min options
on the SQL Activity page.

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx

@@ -52,7 +52,9 @@ import { NodeSummaryStats } from "../nodes";
 import { UIConfigState } from "../store";
 import { StatementDetailsRequest } from "src/api/statementsApi";
 import {
+  getValidOption,
   TimeScale,
+  timeScale1hMinOptions,
   TimeScaleDropdown,
   timeScaleToString,
   toRoundedDateRange,
@@ -216,6 +218,14 @@ export class StatementDetails extends React.Component<
       currentTab: searchParams.get("tab") || "overview",
     };
     this.activateDiagnosticsRef = React.createRef();
+
+    // In case the user selected a option not available on this page,
+    // force a selection of a valid option. This is necessary for the case
+    // where the value 10/30 min is selected on the Metrics page.
+    const ts = getValidOption(this.props.timeScale, timeScale1hMinOptions);
+    if (ts !== this.props.timeScale) {
+      this.props.onTimeScaleChange(ts);
+    }
   }
 
   static defaultProps: Partial<StatementDetailsProps> = {
@@ -431,6 +441,7 @@ export class StatementDetails extends React.Component<
       <PageConfig>
         <PageConfigItem>
           <TimeScaleDropdown
+            options={timeScale1hMinOptions}
             currentScale={this.props.timeScale}
             setTimeScale={this.props.onTimeScaleChange}
           />
@@ -559,6 +570,7 @@ export class StatementDetails extends React.Component<
         <PageConfig>
           <PageConfigItem>
             <TimeScaleDropdown
+              options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
               setTimeScale={this.props.onTimeScaleChange}
             />
@@ -704,6 +716,7 @@ export class StatementDetails extends React.Component<
         <PageConfig>
           <PageConfigItem>
             <TimeScaleDropdown
+              options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
               setTimeScale={this.props.onTimeScaleChange}
             />

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -76,6 +76,8 @@ import {
   TimeScale,
   toDateRange,
   timeScaleToString,
+  timeScale1hMinOptions,
+  getValidOption,
 } from "../timeScaleDropdown";
 
 import { commonStyles } from "../common";
@@ -186,6 +188,14 @@ export class StatementsPage extends React.Component<
     const stateFromHistory = this.getStateFromHistory();
     this.state = merge(defaultState, stateFromHistory);
     this.activateDiagnosticsRef = React.createRef();
+
+    // In case the user selected a option not available on this page,
+    // force a selection of a valid option. This is necessary for the case
+    // where the value 10/30 min is selected on the Metrics page.
+    const ts = getValidOption(this.props.timeScale, timeScale1hMinOptions);
+    if (ts !== this.props.timeScale) {
+      this.changeTimeScale(ts);
+    }
   }
 
   static defaultProps: Partial<StatementsPageProps> = {
@@ -655,6 +665,7 @@ export class StatementsPage extends React.Component<
           </PageConfigItem>
           <PageConfigItem className={commonStyles("separator")}>
             <TimeScaleDropdown
+              options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
               setTimeScale={this.changeTimeScale}
             />

pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx

@@ -12,10 +12,10 @@ import React, { useMemo } from "react";
 import moment from "moment";
 import classNames from "classnames/bind";
 import {
-  TimeScale,
-  TimeWindow,
   ArrowDirection,
+  TimeScale,
   TimeScaleOptions,
+  TimeWindow,
 } from "./timeScaleTypes";
 import TimeFrameControls from "./timeFrameControls";
 import RangeSelect, {
@@ -263,3 +263,20 @@ export const TimeScaleDropdown: React.FC<TimeScaleDropdownProps> = ({
     </div>
   );
 };
+
+// getValidOption check if the option selected is valid. If is valid returns
+// the selected option, otherwise  returns the first valid option.
+export const getValidOption = (
+  currentScale: TimeScale,
+  options: TimeScaleOptions,
+): TimeScale => {
+  if (!(currentScale.key in options)) {
+    const firstValidKey = Object.keys(options)[0];
+    return {
+      ...options[firstValidKey],
+      key: firstValidKey,
+      fixedWindowEnd: false,
+    };
+  }
+  return currentScale;
+};

pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts

@@ -14,20 +14,10 @@ import { dateFormat, timeFormat } from "./timeScaleDropdown";
 import React from "react";
 
 /**
- * defaultTimeScaleOptions is a preconfigured set of time scales that can be
+ * timeScale1hMinOptions is a preconfigured set of time scales with 1h minimum that can be
  * selected by the user.
  */
-export const defaultTimeScaleOptions: TimeScaleOptions = {
-  "Past 10 Minutes": {
-    windowSize: moment.duration(10, "minutes"),
-    windowValid: moment.duration(10, "seconds"),
-    sampleSize: moment.duration(10, "seconds"),
-  },
-  "Past 30 Minutes": {
-    windowSize: moment.duration(30, "minutes"),
-    windowValid: moment.duration(30, "seconds"),
-    sampleSize: moment.duration(30, "seconds"),
-  },
+export const timeScale1hMinOptions: TimeScaleOptions = {
   "Past 1 Hour": {
     windowSize: moment.duration(1, "hour"),
     windowValid: moment.duration(1, "minute"),
@@ -75,6 +65,24 @@ export const defaultTimeScaleOptions: TimeScaleOptions = {
   },
 };
 
+/**
+ * defaultTimeScaleOptions is a preconfigured set of time scales that can be
+ * selected by the user.
+ */
+export const defaultTimeScaleOptions: TimeScaleOptions = {
+  "Past 10 Minutes": {
+    windowSize: moment.duration(10, "minutes"),
+    windowValid: moment.duration(10, "seconds"),
+    sampleSize: moment.duration(10, "seconds"),
+  },
+  "Past 30 Minutes": {
+    windowSize: moment.duration(30, "minutes"),
+    windowValid: moment.duration(30, "seconds"),
+    sampleSize: moment.duration(30, "seconds"),
+  },
+  ...timeScale1hMinOptions,
+};
+
 export const defaultTimeScaleSelected: TimeScale = {
   ...defaultTimeScaleOptions["Past 1 Hour"],
   key: "Past 1 Hour",

pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx

@@ -60,7 +60,9 @@ import { Transaction } from "src/transactionsTable";
 import Long from "long";
 import { StatementsRequest } from "../api";
 import {
+  getValidOption,
   TimeScale,
+  timeScale1hMinOptions,
   TimeScaleDropdown,
   timeScaleToString,
   toDateRange,
@@ -134,6 +136,14 @@ export class TransactionDetails extends React.Component<
       },
       latestTransactionText: "",
     };
+
+    // In case the user selected a option not available on this page,
+    // force a selection of a valid option. This is necessary for the case
+    // where the value 10/30 min is selected on the Metrics page.
+    const ts = getValidOption(this.props.timeScale, timeScale1hMinOptions);
+    if (ts !== this.props.timeScale) {
+      this.props.onTimeScaleChange(ts);
+    }
   }
 
   static defaultProps: Partial<TransactionDetailsProps> = {
@@ -253,6 +263,7 @@ export class TransactionDetails extends React.Component<
         <PageConfig>
           <PageConfigItem>
             <TimeScaleDropdown
+              options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
               setTimeScale={this.props.onTimeScaleChange}
             />

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -65,6 +65,8 @@ import {
   TimeScale,
   toDateRange,
   timeScaleToString,
+  timeScale1hMinOptions,
+  getValidOption,
 } from "../timeScaleDropdown";
 import { InlineAlert } from "@cockroachlabs/ui-components";
 import { TransactionViewType } from "./transactionsPageTypes";
@@ -135,6 +137,14 @@ export class TransactionsPage extends React.Component<
     };
     const stateFromHistory = this.getStateFromHistory();
     this.state = merge(this.state, stateFromHistory);
+
+    // In case the user selected a option not available on this page,
+    // force a selection of a valid option. This is necessary for the case
+    // where the value 10/30 min is selected on the Metrics page.
+    const ts = getValidOption(this.props.timeScale, timeScale1hMinOptions);
+    if (ts !== this.props.timeScale) {
+      this.changeTimeScale(ts);
+    }
   }
 
   getStateFromHistory = (): Partial<TState> => {
@@ -409,6 +419,7 @@ export class TransactionsPage extends React.Component<
           </PageConfigItem>
           <PageConfigItem className={commonStyles("separator")}>
             <TimeScaleDropdown
+              options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
               setTimeScale={this.changeTimeScale}
             />