ui: remove option 10/30 min from 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}
             />

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(