Merge cockroachdb#106623 cockroachdb#106757

106623: ui: fix timescale for rolling window r=maryliag a=maryliag

The change introduced on cockroachdb#105157 had an undesired
change on the Metrics page. We want to show the end period
of the select, but when the fixed window end for that this
caused the Metrics page to stop loading new data.
We want the metrics page to keep updating when any of the
rolling windows is selected, and we also want to know
the time a time period was requested, so it can be used
to provide more information on SQL Activity pages.

This commit remove the setting of the fixedWindowEnd, since
that was not the best approach and instead creates a value
on local storage for the requestTime, that can be used to create
the label for the timescale, without interferring on
Metrics page (or any other that have an automatic update).

Epic: none

Release note (bug fix): Fix the Metrics page that was not
updating automatically on rolling window options.

Release note (bug fix): Statement Diagnostics not always 
showing is now fixed and they show for the correct time period selected.

106757: upgrademanager: skip TestMigrationFailure r=JeffSwenson a=JeffSwenson

Skip TestMigrationFailure until the source of flakes can be fixed.

Release note: None
Part of: cockroachdb#106648

Co-authored-by: maryliag <[email protected]>
Co-authored-by: Jeff <[email protected]>

Author: 3 people

pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.spec.tsx

@@ -19,9 +19,10 @@ import { TestStoreProvider } from "src/test-utils";
 import { StatementDiagnosticsReport } from "../../api";
 import moment from "moment-timezone";
 import { SortedTable } from "src/sortedtable";
+import { TimeScale } from "src/timeScaleDropdown";
 
 const activateDiagnosticsRef = { current: { showModalFor: jest.fn() } };
-const ts = {
+const ts: TimeScale = {
   windowSize: moment.duration(20, "day"),
   sampleSize: moment.duration(5, "minutes"),
   fixedWindowEnd: moment.utc("2023.01.5"),

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts

@@ -851,6 +851,7 @@ export const getStatementDetailsPropsFixture = (
     "3": "gcp-us-west1",
     "4": "gcp-europe-west1",
   },
+  requestTime: moment.utc("2021.12.12"),
   refreshStatementDetails: noop,
   refreshStatementDiagnosticsRequests: noop,
   refreshNodes: noop,
@@ -860,6 +861,7 @@ export const getStatementDetailsPropsFixture = (
   diagnosticsReports: [],
   dismissStatementDiagnosticsAlertMessage: noop,
   onTimeScaleChange: noop,
+  onRequestTimeChange: noop,
   createStatementDiagnosticsReport: noop,
   uiConfig: {
     showStatementDiagnosticsLink: true,

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

@@ -144,6 +144,7 @@ export interface StatementDetailsDispatchProps {
     ascending: boolean,
   ) => void;
   onBackToStatementsClick?: () => void;
+  onRequestTimeChange: (t: moment.Moment) => void;
 }
 
 export interface StatementDetailsStateProps {
@@ -160,6 +161,7 @@ export interface StatementDetailsStateProps {
   hasViewActivityRedactedRole?: UIConfigState["hasViewActivityRedactedRole"];
   hasAdminRole?: UIConfigState["hasAdminRole"];
   statementFingerprintInsights?: StmtInsightEvent[];
+  requestTime: moment.Moment;
 }
 
 export type StatementDetailsOwnProps = StatementDetailsDispatchProps &
@@ -247,12 +249,10 @@ export class StatementDetails extends React.Component<
     this.props.diagnosticsReports.length > 0;
 
   changeTimeScale = (ts: TimeScale): void => {
-    if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
-    }
     if (this.props.onTimeScaleChange) {
       this.props.onTimeScaleChange(ts);
     }
+    this.props.onRequestTimeChange(moment());
   };
 
   refreshStatementDetails = (): void => {
@@ -701,14 +701,17 @@ export class StatementDetails extends React.Component<
             <TimeScaleDropdown
               options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
-              setTimeScale={this.props.onTimeScaleChange}
+              setTimeScale={this.changeTimeScale}
             />
           </PageConfigItem>
         </PageConfig>
         <p className={timeScaleStylesCx("time-label", "label-margin")}>
           Showing aggregated stats from{" "}
           <span className={timeScaleStylesCx("bold")}>
-            <FormattedTimescale ts={this.props.timeScale} />
+            <FormattedTimescale
+              ts={this.props.timeScale}
+              requestTime={moment(this.props.requestTime)}
+            />
           </span>
         </p>
         <section className={cx("section")}>
@@ -899,7 +902,10 @@ export class StatementDetails extends React.Component<
         <p className={timeScaleStylesCx("time-label", "label-margin")}>
           Showing explain plans from{" "}
           <span className={timeScaleStylesCx("bold")}>
-            <FormattedTimescale ts={this.props.timeScale} />
+            <FormattedTimescale
+              ts={this.props.timeScale}
+              requestTime={moment(this.props.requestTime)}
+            />
           </span>
         </p>
         <section className={cx("section")}>

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetailsConnected.ts

@@ -50,6 +50,7 @@ import {
 } from "src/api";
 import { TimeScale } from "../timeScaleDropdown";
 import { getMatchParamByName, statementAttr } from "src/util";
+import { selectRequestTime } from "src/statementsPage/statementsPage.selectors";
 
 // For tenant cases, we don't show information about node, regions and
 // diagnostics.
@@ -76,6 +77,7 @@ const mapStateToProps = (state: AppState, props: RouteComponentProps) => {
     isTenant: selectIsTenant(state),
     hasViewActivityRedactedRole: selectHasViewActivityRedactedRole(state),
     hasAdminRole: selectHasAdminRole(state),
+    requestTime: selectRequestTime(state),
     statementFingerprintInsights: selectStatementFingerprintInsights(
       state,
       props,
@@ -169,6 +171,14 @@ const mapDispatchToProps = (
         tableName,
       }),
     ),
+  onRequestTimeChange: (t: moment.Moment) => {
+    dispatch(
+      localStorageActions.update({
+        key: "requestTime/StatementsPage",
+        value: t,
+      }),
+    );
+  },
   onBackToStatementsClick: () =>
     dispatch(
       analyticsActions.track({

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts

@@ -355,6 +355,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
     ascending: false,
     columnTitle: "executionCount",
   },
+  requestTime: moment.utc("2021.12.12"),
   search: "",
   filters: {
     app: "",
@@ -380,6 +381,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   isTenant: false,
   hasViewActivityRedactedRole: false,
   hasAdminRole: true,
+  statementDiagnostics: [],
   dismissAlertMessage: noop,
   refreshDatabases: noop,
   refreshStatementDiagnosticsRequests: noop,
@@ -398,7 +400,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   onChangeLimit: noop,
   onChangeReqSort: noop,
   onApplySearchCriteria: noop,
-  statementDiagnostics: [],
+  onRequestTimeChange: noop,
 };
 
 export const statementsPagePropsWithRequestError: StatementsPageProps = {

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.selectors.ts

@@ -38,6 +38,11 @@ export const selectSortSetting = createSelector(
   localStorage => localStorage["sortSetting/StatementsPage"],
 );
 
+export const selectRequestTime = createSelector(
+  localStorageSelector,
+  localStorage => localStorage["requestTime/StatementsPage"],
+);
+
 export const selectFilters = createSelector(
   localStorageSelector,
   localStorage => localStorage["filters/StatementsPage"],

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

@@ -135,6 +135,7 @@ export interface StatementsPageDispatchProps {
   onChangeLimit: (limit: number) => void;
   onChangeReqSort: (sort: SqlStatsSortType) => void;
   onApplySearchCriteria: (ts: TimeScale, limit: number, sort: string) => void;
+  onRequestTimeChange: (t: moment.Moment) => void;
 }
 export interface StatementsPageStateProps {
   statementsResponse: RequestState<SqlStatsResponse>;
@@ -152,6 +153,7 @@ export interface StatementsPageStateProps {
   hasAdminRole?: UIConfigState["hasAdminRole"];
   stmtsTotalRuntimeSecs: number;
   statementDiagnostics: StatementDiagnosticsResponse | null;
+  requestTime: moment.Moment;
 }
 
 export interface StatementsPageState {
@@ -264,9 +266,6 @@ export class StatementsPage extends React.Component<
   };
 
   changeTimeScale = (ts: TimeScale): void => {
-    if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
-    }
     this.setState(prevState => ({
       ...prevState,
       timeScale: ts,
@@ -282,8 +281,6 @@ export class StatementsPage extends React.Component<
       this.props.onChangeReqSort(this.state.reqSortSetting);
     }
 
-    // Force an update on TimeScale to update the fixedWindowEnd
-    this.changeTimeScale(this.state.timeScale);
     if (this.props.timeScale !== this.state.timeScale) {
       this.props.onTimeScaleChange(this.state.timeScale);
     }
@@ -294,6 +291,7 @@ export class StatementsPage extends React.Component<
         getSortLabel(this.state.reqSortSetting, "Statement"),
       );
     }
+    this.props.onRequestTimeChange(moment());
     this.refreshStatements();
     const ss: SortSetting = {
       ascending: false,
@@ -588,7 +586,12 @@ export class StatementsPage extends React.Component<
       isSelectedColumn(userSelectedColumnsToShow, c),
     );
 
-    const period = <FormattedTimescale ts={this.props.timeScale} />;
+    const period = (
+      <FormattedTimescale
+        ts={this.props.timeScale}
+        requestTime={moment(this.props.requestTime)}
+      />
+    );
     const sortSettingLabel = getSortLabel(
       this.props.reqSortSetting,
       "Statement",

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

@@ -33,6 +33,7 @@ import {
   selectSortSetting,
   selectFilters,
   selectSearch,
+  selectRequestTime,
 } from "./statementsPage.selectors";
 import {
   selectTimeScale,
@@ -96,6 +97,7 @@ export const ConnectedStatementsPage = withRouter(
         search: selectSearch(state),
         sortSetting: selectSortSetting(state),
         limit: selectStmtsPageLimit(state),
+        requestTime: selectRequestTime(state),
         reqSortSetting: selectStmtsPageReqSort(state),
         stmtsTotalRuntimeSecs:
           state.adminUI?.statements?.data?.stmts_total_runtime_secs ?? 0,
@@ -221,6 +223,14 @@ export const ConnectedStatementsPage = withRouter(
             }),
           );
         },
+        onRequestTimeChange: (t: moment.Moment) => {
+          dispatch(
+            localStorageActions.update({
+              key: "requestTime/StatementsPage",
+              value: t,
+            }),
+          );
+        },
         onStatementClick: () =>
           dispatch(
             analyticsActions.track({

pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts

@@ -84,6 +84,8 @@ export type LocalStorageState = {
   "showSetting/JobsPage": string;
   [LocalStorageKeys.DB_DETAILS_VIEW_MODE]: ViewMode;
   [LocalStorageKeys.ACTIVE_EXECUTIONS_IS_AUTOREFRESH_ENABLED]: boolean;
+  "requestTime/StatementsPage": moment.Moment;
+  "requestTime/TransactionsPage": moment.Moment;
 };
 
 type Payload = {
@@ -283,6 +285,8 @@ const initialState: LocalStorageState = {
         LocalStorageKeys.ACTIVE_EXECUTIONS_IS_AUTOREFRESH_ENABLED,
       ),
     ) || defaultIsAutoRefreshEnabledSetting,
+  "requestTime/StatementsPage": null,
+  "requestTime/TransactionsPage": null,
 };
 
 const localStorageSlice = createSlice({

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

@@ -16,7 +16,10 @@ import { toRoundedDateRange } from "./utils";
 import { TimeScale } from "./timeScaleTypes";
 import { Timezone } from "src/timestamp";
 
-export const FormattedTimescale = (props: { ts: TimeScale }) => {
+export const FormattedTimescale = (props: {
+  ts: TimeScale;
+  requestTime?: moment.Moment;
+}) => {
   const timezone = useContext(TimezoneContext);
 
   const [start, end] = toRoundedDateRange(props.ts);
@@ -30,8 +33,8 @@ export const FormattedTimescale = (props: { ts: TimeScale }) => {
     omitDayFormat || startEndOnSameDay ? "" : endTz.format(dateFormat);
   const timeStart = startTz.format(timeFormat);
   const timeEnd =
-    props.ts.key !== "Custom" && props.ts.fixedWindowEnd
-      ? props.ts.fixedWindowEnd.tz(timezone).format(timeFormat)
+    props.ts.key !== "Custom" && props.requestTime?.isValid()
+      ? props.requestTime.tz(timezone).format(timeFormat)
       : endTz.format(timeFormat);
 
   return (