diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts index eea81a368279..ccbee2b96433 100644 --- 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/pkg/ui/workspaces/db-console/src/redux/statementsTimeScale.ts b/pkg/ui/workspaces/db-console/src/redux/globalTimeScale.ts similarity index 91% rename from pkg/ui/workspaces/db-console/src/redux/statementsTimeScale.ts rename to pkg/ui/workspaces/db-console/src/redux/globalTimeScale.ts index 9e68824f41e5..871dc90c11d1 100644 --- a/pkg/ui/workspaces/db-console/src/redux/statementsTimeScale.ts +++ b/pkg/ui/workspaces/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 index 9c34b0a2060e..2fbc7939998d 100644 --- 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 index db2454964daf..bc3cc69c21cf 100644 --- 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 { 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 index 0df68e1497c3..78b28d369b65 100644 --- 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 index e8539cfdaf89..f90c2acdd6e4 100644 --- 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; 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 index bd7b957eb1a7..78433f318ee8 100644 --- 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 index 357e8563413d..ce43466a5925 100644 --- 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 index 2a074dbc5fff..361936c232a8 100644 --- 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[]; @@ -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< @@ -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 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( 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 index 47577e31521e..f22906b90295 100644 --- 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<
{this.renderCharts()}
-
+
{this.renderChartTables()}
@@ -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 index c5007964e3b1..f6c7bae6b14c 100644 --- 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 index c1382431849e..57c06660ec69 100644 --- 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 index 31628f01934a..b66f149033f8 100644 --- 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 index 7a328fb97809..e8fb57dff633 100644 --- 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 index f52acf78f8cb..3bbf1a5fc211 100644 --- 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),