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 #78187 Fixes #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.
cockroachdb · Jun 20, 2022 · 80a728b · 80a728b
1 parent 877542d
commit 80a728b
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 55 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts
@@ -83,8 +83,9 @@ export const toDateRange = (ts: TimeScale): [moment.Moment, moment.Moment] => {
   const end = ts.fixedWindowEnd
     ? moment.utc(ts.fixedWindowEnd)
     : moment().utc();
-  const start = moment.utc(end).subtract(ts.windowSize);
-  return [start, end];
+  const endRounded = end.set({ millisecond: 0 });
+  const start = moment.utc(endRounded).subtract(ts.windowSize);
+  return [start, endRounded];
 };
 
 // toRoundedDateRange round the TimeScale selected, with the start

diff --git a/...-console/src/redux/statementsTimeScale.ts → ...s/db-console/src/redux/globalTimeScale.ts b/...-console/src/redux/statementsTimeScale.ts → ...s/db-console/src/redux/globalTimeScale.ts
@@ -14,7 +14,7 @@ import { TimeScale, defaultTimeScaleSelected } from "@cockroachlabs/cluster-ui";
 
 const localSettingsSelector = (state: AdminUIState) => state.localSettings;
 
-export const statementsTimeScaleLocalSetting = new LocalSetting<
+export const globalTimeScaleLocalSetting = new LocalSetting<
   AdminUIState,
   TimeScale
 >("timeScale/SQLActivity", localSettingsSelector, defaultTimeScaleSelected);
diff --git a/pkg/ui/workspaces/db-console/src/redux/sqlActivity.ts b/pkg/ui/workspaces/db-console/src/redux/sqlActivity.ts
@@ -9,7 +9,7 @@
 // licenses/APL.txt.
 import { Action } from "redux";
 import _ from "lodash";
-import { PayloadAction } from "oss/src/interfaces/action";
+import { PayloadAction } from "src/interfaces/action";
 
 /**
  * SqlActivityState maintains a MetricQuerySet collection, along with some

diff --git a/pkg/ui/workspaces/db-console/src/redux/statements/statementsActions.ts b/pkg/ui/workspaces/db-console/src/redux/statements/statementsActions.ts
@@ -108,14 +108,14 @@ export function createOpenDiagnosticsModalAction(
         Combined Stats Actions
 ****************************************/
 
-export const SET_COMBINED_STATEMENTS_TIME_SCALE =
-  "cockroachui/statements/SET_COMBINED_STATEMENTS_TIME_SCALE";
+export const SET_GLOBAL_TIME_SCALE =
+  "cockroachui/statements/SET_GLOBAL_TIME_SCALE";
 
-export function setCombinedStatementsTimeScaleAction(
+export function setGlobalTimeScaleAction(
   ts: TimeScale,
 ): PayloadAction<TimeScale> {
   return {
-    type: SET_COMBINED_STATEMENTS_TIME_SCALE,
+    type: SET_GLOBAL_TIME_SCALE,
     payload: ts,
   };
 }
diff --git a/pkg/ui/workspaces/db-console/src/redux/statements/statementsSagas.ts b/pkg/ui/workspaces/db-console/src/redux/statements/statementsSagas.ts
@@ -21,7 +21,7 @@ import {
   CreateStatementDiagnosticsReportPayload,
   createStatementDiagnosticsReportCompleteAction,
   createStatementDiagnosticsReportFailedAction,
-  SET_COMBINED_STATEMENTS_TIME_SCALE,
+  SET_GLOBAL_TIME_SCALE,
   CANCEL_STATEMENT_DIAGNOSTICS_REPORT,
   cancelStatementDiagnosticsReportCompleteAction,
   cancelStatementDiagnosticsReportFailedAction,
@@ -41,7 +41,7 @@ import {
   createStatementDiagnosticsAlertLocalSetting,
   cancelStatementDiagnosticsAlertLocalSetting,
 } from "src/redux/alerts";
-import { statementsTimeScaleLocalSetting } from "src/redux/statementsTimeScale";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 import { TimeScale, toDateRange } from "@cockroachlabs/cluster-ui";
 import Long from "long";
 
@@ -156,7 +156,7 @@ export function* setCombinedStatementsTimeScaleSaga(
 ) {
   const ts = action.payload;
 
-  yield put(statementsTimeScaleLocalSetting.set(ts));
+  yield put(globalTimeScaleLocalSetting.set(ts));
   const [start, end] = toDateRange(ts);
   const req = new CombinedStatementsRequest({
     combined: true,
@@ -171,9 +171,6 @@ export function* statementsSaga() {
   yield all([
     takeEvery(CREATE_STATEMENT_DIAGNOSTICS_REPORT, createDiagnosticsReportSaga),
     takeEvery(CANCEL_STATEMENT_DIAGNOSTICS_REPORT, cancelDiagnosticsReportSaga),
-    takeLatest(
-      SET_COMBINED_STATEMENTS_TIME_SCALE,
-      setCombinedStatementsTimeScaleSaga,
-    ),
+    takeLatest(SET_GLOBAL_TIME_SCALE, setCombinedStatementsTimeScaleSaga),
   ]);
 }
diff --git a/pkg/ui/workspaces/db-console/src/redux/timeScale.ts b/pkg/ui/workspaces/db-console/src/redux/timeScale.ts
@@ -108,11 +108,7 @@ export function timeScaleReducer(
     case SET_SCALE: {
       const { payload: scale } = action as PayloadAction<TimeScale>;
       state = _.cloneDeep(state);
-      if (scale.key === "Custom") {
-        state.metricsTime.isFixedWindow = true;
-      } else {
-        state.metricsTime.isFixedWindow = false;
-      }
+      state.metricsTime.isFixedWindow = scale.key === "Custom";
       state.scale = scale;
       state.metricsTime.shouldUpdateMetricsWindowFromScale = true;
       return state;

diff --git a/pkg/ui/workspaces/db-console/src/views/app/containers/metricsTimeManager/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/containers/metricsTimeManager/index.tsx
@@ -70,7 +70,6 @@ class MetricsTimeManager extends React.Component<
 
     // Fixed time ranges can't expire.
     if (props.timeScale.scale.fixedWindowEnd) {
-      // this.setWindow(props);
       return;
     }
 

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
@@ -26,7 +26,6 @@ import {
   MetricProps,
   MetricsDataComponentProps,
 } from "src/views/shared/components/metricQuery";
-import {} from "@cockroachlabs/cluster-ui";
 import {
   calculateXAxisDomain,
   calculateYAxisDomain,

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeGraphs/index.tsx
@@ -22,7 +22,6 @@ import {
   PageConfig,
   PageConfigItem,
 } from "src/views/shared/components/pageconfig";
-import TimeScaleDropdown from "src/views/cluster/containers/timeScaleDropdownWithSearchParams";
 import ClusterSummaryBar from "./summaryBar";
 
 import { AdminUIState } from "src/redux/state";
@@ -66,19 +65,20 @@ import { getMatchParamByName } from "src/util/query";
 import { PayloadAction } from "src/interfaces/action";
 import {
   setMetricsFixedWindow,
-  setTimeScale,
   TimeWindow,
   TimeScale,
   adjustTimeScale,
 } from "src/redux/timeScale";
 import { InlineAlert } from "src/components";
-import { Anchor } from "@cockroachlabs/cluster-ui";
+import { Anchor, TimeScaleDropdown } from "@cockroachlabs/cluster-ui";
 import { reduceStorageOfTimeSeriesDataOperationalFlags } from "src/util/docs";
 import moment from "moment";
 import {
   selectResolution10sStorageTTL,
   selectResolution30mStorageTTL,
 } from "src/redux/clusterSettings";
+import { setGlobalTimeScaleAction } from "src/redux/statements";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 interface GraphDashboard {
   label: string;
   component: (props: GraphDashboardProps) => React.ReactElement<any>[];
@@ -113,6 +113,7 @@ type MapStateToProps = {
   hoverState: HoverState;
   resolution10sStorageTTL: moment.Duration;
   resolution30mStorageTTL: moment.Duration;
+  timeScale: TimeScale;
 };
 
 type MapDispatchToProps = {
@@ -350,6 +351,8 @@ export class NodeGraphs extends React.Component<
           </PageConfigItem>
           <PageConfigItem>
             <TimeScaleDropdown
+              currentScale={this.props.timeScale}
+              setTimeScale={this.props.setTimeScale}
               adjustTimeScaleOnChange={this.adjustTimeScaleOnChange}
             />
           </PageConfigItem>
@@ -420,6 +423,7 @@ const mapStateToProps = (state: AdminUIState): MapStateToProps => ({
   hoverState: hoverStateSelector(state),
   resolution10sStorageTTL: selectResolution10sStorageTTL(state),
   resolution30mStorageTTL: selectResolution30mStorageTTL(state),
+  timeScale: globalTimeScaleLocalSetting.selector(state),
 });
 
 const mapDispatchToProps: MapDispatchToProps = {
@@ -429,7 +433,7 @@ const mapDispatchToProps: MapDispatchToProps = {
   hoverOn,
   hoverOff,
   setMetricsFixedWindow: setMetricsFixedWindow,
-  setTimeScale: setTimeScale,
+  setTimeScale: setGlobalTimeScaleAction,
 };
 
 export default compose(

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
@@ -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(

diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/customChart/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/customChart/index.tsx
@@ -42,8 +42,8 @@ import {
   TimeWindow,
   TimeScale,
   setMetricsFixedWindow,
-  setTimeScale,
 } from "src/redux/timeScale";
+import { setGlobalTimeScaleAction } from "src/redux/statements";
 
 export interface CustomChartProps {
   refreshNodes: typeof refreshNodes;
@@ -307,7 +307,7 @@ export class CustomChart extends React.Component<
             <div className="chart-group l-columns__left">
               {this.renderCharts()}
             </div>
-            <div className="l-columns__right"></div>
+            <div className="l-columns__right" />
           </div>
         </section>
         <section className="section">{this.renderChartTables()}</section>
@@ -326,7 +326,7 @@ const mapDispatchToProps = {
   refreshNodes,
   refreshMetricMetadata,
   setMetricsFixedWindow: setMetricsFixedWindow,
-  setTimeScale,
+  setTimeScale: setGlobalTimeScaleAction,
 };
 
 export default withRouter(

diff --git a/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx b/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx
@@ -37,6 +37,7 @@ import {
 } from "@cockroachlabs/cluster-ui";
 import { History } from "history";
 import { refreshSettings } from "src/redux/apiReducers";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 
 /**
  * queryFromProps is a helper method which generates a TimeSeries Query data
@@ -248,13 +249,10 @@ class MetricsDataProvider extends React.Component<
 // timeInfoSelector converts the current global time window into a set of Long
 // timestamps, which can be sent with requests to the server.
 const timeInfoSelector = createSelector(
-  (state: AdminUIState) => state.timeScale,
-  tw => {
-    if (!_.isObject(tw.scale)) {
-      return null;
-    }
-
-    const [startMoment, endMoment] = toDateRange(tw.scale);
+  (state: AdminUIState) => state,
+  state => {
+    const scale = globalTimeScaleLocalSetting.selector(state);
+    const [startMoment, endMoment] = toDateRange(scale);
     const start = startMoment.valueOf();
     const end = endMoment.valueOf();
     const syncedScale = findClosestTimeScale(

diff --git a/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx b/pkg/ui/workspaces/db-console/src/views/statements/statementDetails.tsx
@@ -37,10 +37,10 @@ import {
 import {
   cancelStatementDiagnosticsReportAction,
   createStatementDiagnosticsReportAction,
-  setCombinedStatementsTimeScaleAction,
+  setGlobalTimeScaleAction,
 } from "src/redux/statements";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
-import { statementsTimeScaleLocalSetting } from "src/redux/statementsTimeScale";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 import { selectHasViewActivityRedactedRole } from "src/redux/user";
 import {
   trackCancelDiagnosticsBundleAction,
@@ -67,7 +67,7 @@ export const selectStatementDetails = createSelector(
   (_state: AdminUIState, props: RouteComponentProps): string =>
     queryByName(props.location, appNamesAttr),
   (state: AdminUIState): TimeScale =>
-    statementsTimeScaleLocalSetting.selector(state),
+    globalTimeScaleLocalSetting.selector(state),
   (state: AdminUIState) => state.cachedData.statementDetails,
   (
     fingerprintID,
@@ -113,7 +113,7 @@ const mapStateToProps = (
     latestFormattedQuery:
       state.sqlActivity.statementDetailsLatestFormattedQuery,
     statementsError: state.cachedData.statements.lastError,
-    timeScale: statementsTimeScaleLocalSetting.selector(state),
+    timeScale: globalTimeScaleLocalSetting.selector(state),
     nodeNames: nodeDisplayNameByIDSelector(state),
     nodeRegions: nodeRegionsByIDSelector(state),
     diagnosticsReports: selectDiagnosticsReportsByStatementFingerprint(
@@ -131,7 +131,7 @@ const mapDispatchToProps: StatementDetailsDispatchProps = {
     createStatementDiagnosticsAlertLocalSetting.set({ show: false }),
   createStatementDiagnosticsReport: createStatementDiagnosticsReportAction,
   onTabChanged: trackStatementDetailsSubnavSelectionAction,
-  onTimeScaleChange: setCombinedStatementsTimeScaleAction,
+  onTimeScaleChange: setGlobalTimeScaleAction,
   onDiagnosticBundleDownload: trackDownloadDiagnosticsBundleAction,
   onDiagnosticCancelRequest: (report: IStatementDiagnosticsReport) => {
     return (dispatch: AppDispatch) => {

diff --git a/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx b/pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx
@@ -28,7 +28,7 @@ import {
   createStatementDiagnosticsAlertLocalSetting,
   cancelStatementDiagnosticsAlertLocalSetting,
 } from "src/redux/alerts";
-import { statementsTimeScaleLocalSetting } from "src/redux/statementsTimeScale";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 import { selectHasViewActivityRedactedRole } from "src/redux/user";
 import { queryByName } from "src/util/query";
 
@@ -48,7 +48,7 @@ import {
   cancelStatementDiagnosticsReportAction,
   createOpenDiagnosticsModalAction,
   createStatementDiagnosticsReportAction,
-  setCombinedStatementsTimeScaleAction,
+  setGlobalTimeScaleAction,
 } from "src/redux/statements";
 import {
   trackCancelDiagnosticsBundleAction,
@@ -278,7 +278,7 @@ export const searchLocalSetting = new LocalSetting(
 
 const fingerprintsPageActions = {
   refreshStatements,
-  onTimeScaleChange: setCombinedStatementsTimeScaleAction,
+  onTimeScaleChange: setGlobalTimeScaleAction,
   refreshStatementDiagnosticsRequests,
   refreshUserSQLRoles,
   resetSQLStats: resetSQLStatsAction,
@@ -353,7 +353,7 @@ export default withRouter(
         apps: selectApps(state),
         columns: statementColumnsLocalSetting.selectorToArray(state),
         databases: selectDatabases(state),
-        timeScale: statementsTimeScaleLocalSetting.selector(state),
+        timeScale: globalTimeScaleLocalSetting.selector(state),
         filters: filtersLocalSetting.selector(state),
         lastReset: selectLastReset(state),
         nodeRegions: nodeRegionsByIDSelector(state),

diff --git a/pkg/ui/workspaces/db-console/src/views/transactions/transactionDetails.tsx b/pkg/ui/workspaces/db-console/src/views/transactions/transactionDetails.tsx
@@ -20,14 +20,14 @@ import {
   selectData,
   selectLastError,
 } from "src/views/transactions/transactionsPage";
-import { statementsTimeScaleLocalSetting } from "src/redux/statementsTimeScale";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
 import {
   TransactionDetailsStateProps,
   TransactionDetailsDispatchProps,
   TransactionDetailsProps,
   TransactionDetails,
 } from "@cockroachlabs/cluster-ui";
-import { setCombinedStatementsTimeScaleAction } from "src/redux/statements";
+import { setGlobalTimeScaleAction } from "src/redux/statements";
 
 export const selectTransaction = createSelector(
   (state: AdminUIState) => state.cachedData.statements,
@@ -65,7 +65,7 @@ export default withRouter(
     ): TransactionDetailsStateProps => {
       const { isLoading, transaction } = selectTransaction(state, props);
       return {
-        timeScale: statementsTimeScaleLocalSetting.selector(state),
+        timeScale: globalTimeScaleLocalSetting.selector(state),
         error: selectLastError(state),
         isTenant: false,
         nodeRegions: nodeRegionsByIDSelector(state),
@@ -81,7 +81,7 @@ export default withRouter(
     {
       refreshData: refreshStatements,
       refreshUserSQLRoles,
-      onTimeScaleChange: setCombinedStatementsTimeScaleAction,
+      onTimeScaleChange: setGlobalTimeScaleAction,
     },
   )(TransactionDetails),
 );
diff --git a/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx b/pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx
@@ -31,8 +31,8 @@ import {
   TransactionsPageRootProps,
 } from "@cockroachlabs/cluster-ui";
 import { nodeRegionsByIDSelector } from "src/redux/nodes";
-import { statementsTimeScaleLocalSetting } from "src/redux/statementsTimeScale";
-import { setCombinedStatementsTimeScaleAction } from "src/redux/statements";
+import { globalTimeScaleLocalSetting } from "src/redux/globalTimeScale";
+import { setGlobalTimeScaleAction } from "src/redux/statements";
 import { LocalSetting } from "src/redux/localsettings";
 import { bindActionCreators } from "redux";
 import {
@@ -95,7 +95,7 @@ export const transactionColumnsLocalSetting = new LocalSetting(
 const fingerprintsPageActions = {
   refreshData: refreshStatements,
   resetSQLStats: resetSQLStatsAction,
-  onTimeScaleChange: setCombinedStatementsTimeScaleAction,
+  onTimeScaleChange: setGlobalTimeScaleAction,
   // We use `null` when the value was never set and it will show all columns.
   // If the user modifies the selection and no columns are selected,
   // the function will save the value as a blank space, otherwise
@@ -139,7 +139,7 @@ const TransactionsPageConnected = withRouter(
         ...props,
         columns: transactionColumnsLocalSetting.selectorToArray(state),
         data: selectData(state),
-        timeScale: statementsTimeScaleLocalSetting.selector(state),
+        timeScale: globalTimeScaleLocalSetting.selector(state),
         error: selectLastError(state),
         filters: filtersLocalSetting.selector(state),
         lastReset: selectLastReset(state),
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,7 +70,6 @@ class MetricsTimeManager extends React.Component< @@
         // Fixed time ranges can't expire.
         if (props.timeScale.scale.fixedWindowEnd) {
-          // this.setWindow(props);
           return;
         }
@@ Expand Down @@