From e4d7f257f4c01a308d9fa0fdb9b692365bea0fc4 Mon Sep 17 00:00:00 2001 From: Marylia Gutierrez Date: Fri, 10 Jun 2022 18:28:34 -0400 Subject: [PATCH] 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 #82914 Release note (ui change): Removal of the 10 and 30min options on the SQL Activity page. --- .../src/statementDetails/statementDetails.tsx | 13 ++++++++ .../src/statementsPage/statementsPage.tsx | 11 +++++++ .../timeScaleDropdown/timeScaleDropdown.tsx | 21 ++++++++++-- .../cluster-ui/src/timeScaleDropdown/utils.ts | 32 ++++++++++++------- .../transactionDetails/transactionDetails.tsx | 11 +++++++ .../src/transactionsPage/transactionsPage.tsx | 11 +++++++ .../containers/raftMessages/index.tsx | 4 +-- 7 files changed, 87 insertions(+), 16 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx index 428ea5024c42..a5c2ecb64c1f 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx +++ b/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 = { @@ -431,6 +441,7 @@ export class StatementDetails extends React.Component< @@ -559,6 +570,7 @@ export class StatementDetails extends React.Component< @@ -704,6 +716,7 @@ export class StatementDetails extends React.Component< diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx index 7d7633f29a73..cd4450fd07b2 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx +++ b/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 = { @@ -655,6 +665,7 @@ export class StatementsPage extends React.Component< diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx index 06a275687d28..a5c0adb74b3b 100644 --- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx +++ b/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 = ({ ); }; + +// 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; +}; diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts index 11eda48412b1..845d05fd04ab 100644 --- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts +++ b/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", diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx index bd14ea111a1f..dd580e3cc07f 100644 --- a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx +++ b/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 = { @@ -253,6 +263,7 @@ export class TransactionDetails extends React.Component< diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx index b1d03b8df15e..3f75a47bcedd 100644 --- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx +++ b/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 => { @@ -409,6 +419,7 @@ export class TransactionsPage extends React.Component< diff --git a/pkg/ui/workspaces/db-console/src/views/devtools/containers/raftMessages/index.tsx b/pkg/ui/workspaces/db-console/src/views/devtools/containers/raftMessages/index.tsx index 190f122cf36a..58cac83382ab 100644 --- a/pkg/ui/workspaces/db-console/src/views/devtools/containers/raftMessages/index.tsx +++ b/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(