ui: fix timescale for rolling window

The change introduced on #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 new
parameter for 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.

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

@@ -841,6 +841,7 @@ export const getStatementDetailsPropsFixture = (
     sampleSize: moment.duration(5, "minutes"),
     fixedWindowEnd: moment.utc("2021.12.12"),
     key: "Custom",
+    requestTime: false,
   },
   statementFingerprintID: "4705782015019656142",
   statementDetails: withData ? statementDetailsData : statementDetailsNoData,

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

@@ -248,7 +248,7 @@ export class StatementDetails extends React.Component<
 
   changeTimeScale = (ts: TimeScale): void => {
     if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
+      ts.requestTime = moment();
     }
     if (this.props.onTimeScaleChange) {
       this.props.onTimeScaleChange(ts);
@@ -701,7 +701,7 @@ export class StatementDetails extends React.Component<
             <TimeScaleDropdown
               options={timeScale1hMinOptions}
               currentScale={this.props.timeScale}
-              setTimeScale={this.props.onTimeScaleChange}
+              setTimeScale={this.changeTimeScale}
             />
           </PageConfigItem>
         </PageConfig>

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

@@ -375,6 +375,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
     sampleSize: moment.duration(5, "minutes"),
     fixedWindowEnd: moment.utc("2021.12.12"),
     key: "Custom",
+    requestTime: false,
   },
   columns: null,
   isTenant: false,

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

@@ -263,7 +263,7 @@ export class StatementsPage extends React.Component<
 
   changeTimeScale = (ts: TimeScale): void => {
     if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
+      ts.requestTime = moment();
     }
     this.setState(prevState => ({
       ...prevState,
@@ -280,7 +280,7 @@ export class StatementsPage extends React.Component<
       this.props.onChangeReqSort(this.state.reqSortSetting);
     }
 
-    // Force an update on TimeScale to update the fixedWindowEnd
+    // Force an update on TimeScale to update the requestTime.
     this.changeTimeScale(this.state.timeScale);
     if (this.props.timeScale !== this.state.timeScale) {
       this.props.onTimeScaleChange(this.state.timeScale);

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

@@ -30,8 +30,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.ts.requestTime
+      ? props.ts.requestTime.tz(timezone).format(timeFormat)
       : endTz.format(timeFormat);
 
   return (

pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts

@@ -42,6 +42,9 @@ export interface TimeScale {
    * It is unclear if there are legitimate reasons for the two being out of sync.
    */
   fixedWindowEnd: moment.Moment | false;
+  // For cases where the value is not custom and we want to clarify the time a request was made,
+  // because we're pausing the rolling window.
+  requestTime: moment.Moment | false;
 }
 
 export class TimeScaleState {
@@ -56,7 +59,7 @@ export class TimeScaleState {
   }
 }
 
-export type TimeScaleOption = Omit<TimeScale, "fixedWindowEnd">;
+export type TimeScaleOption = Omit<TimeScale, "fixedWindowEnd" | "requestTime">;
 
 export interface TimeScaleOptions {
   [key: string]: TimeScaleOption;

pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/utils.ts

@@ -85,6 +85,7 @@ export const defaultTimeScaleSelected: TimeScale = {
   ...defaultTimeScaleOptions["Past Hour"],
   key: "Past Hour",
   fixedWindowEnd: false,
+  requestTime: false,
 };
 
 // toDateRange returns the actual value of start and end date, based on
@@ -172,6 +173,7 @@ export const createTimeScaleFromDateRange = (
     windowSize: moment.duration(end.diff(start)),
     fixedWindowEnd: end,
     key: "Custom",
+    requestTime: false,
   };
 
   return timeScale;

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

@@ -225,7 +225,7 @@ export class TransactionDetails extends React.Component<
 
   changeTimeScale = (ts: TimeScale): void => {
     if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
+      ts.requestTime = moment();
     }
     if (this.props.onTimeScaleChange) {
       this.props.onTimeScaleChange(ts);

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

@@ -386,7 +386,7 @@ export class TransactionsPage extends React.Component<
 
   changeTimeScale = (ts: TimeScale): void => {
     if (ts.key !== "Custom") {
-      ts.fixedWindowEnd = moment();
+      ts.requestTime = moment();
     }
     this.setState(prevState => ({ ...prevState, timeScale: ts }));
   };
@@ -408,7 +408,7 @@ export class TransactionsPage extends React.Component<
       this.props.onChangeReqSort(this.state.reqSortSetting);
     }
 
-    // Force an update on TimeScale to update the fixedWindowEnd
+    // Force an update on TimeScale to update the requestTime
     this.changeTimeScale(this.state.timeScale);
     if (this.props.timeScale !== this.state.timeScale) {
       this.props.onTimeScaleChange(this.state.timeScale);