ui: improve timeperiod display

maryliag · maryliag · commit d74648fd7d44 · 2023-06-19T17:49:54.000-04:00
Previously, the period being shown on SQL Activity page
could be confusing, since we no longer refresh the page
automatically. This could result in a scenario where
a query is executed, the user click on Apply on the Search
Criteria on X:05, but the page shows that the results
goes up to X:59, but then if you executed new statements
they won't show until Apply is clicked again, but because
we still show the message that the results are up to X:59
this is misleading.
This commit updates the value being displayed to use the
time the request was made, so we know the end window value,
and even if the user changes page and go back, the value
is still the X:05, making more obvious they need to click
on Apply again if they want to see newer results.

Epic: none

Release note: None
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -247,6 +247,9 @@ 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);
     }
@@ -491,7 +494,7 @@ export class StatementDetails extends React.Component<
           <TimeScaleDropdown
             options={timeScale1hMinOptions}
             currentScale={this.props.timeScale}
-            setTimeScale={this.props.onTimeScaleChange}
+            setTimeScale={this.changeTimeScale}
           />
         </PageConfigItem>
       </PageConfig>
@@ -510,7 +513,7 @@ export class StatementDetails extends React.Component<
           <TimeScaleDropdown
             options={timeScale1hMinOptions}
             currentScale={this.props.timeScale}
-            setTimeScale={this.props.onTimeScaleChange}
+            setTimeScale={this.changeTimeScale}
           />
         </PageConfigItem>
       </PageConfig>
@@ -944,7 +947,7 @@ export class StatementDetails extends React.Component<
         }
         onSortingChange={this.props.onSortingChange}
         currentScale={this.props.timeScale}
-        onChangeTimeScale={this.props.onTimeScaleChange}
+        onChangeTimeScale={this.changeTimeScale}
       />
     );
   };
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -262,6 +262,9 @@ export class StatementsPage extends React.Component<
   };
 
   changeTimeScale = (ts: TimeScale): void => {
+    if (ts.key !== "Custom") {
+      ts.fixedWindowEnd = moment();
+    }
     this.setState(prevState => ({
       ...prevState,
       timeScale: ts,
@@ -277,6 +280,8 @@ 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);
     }
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/formattedTimeScale.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/formattedTimeScale.tsx
@@ -29,7 +29,10 @@ export const FormattedTimescale = (props: { ts: TimeScale }) => {
   const dateEnd =
     omitDayFormat || startEndOnSameDay ? "" : endTz.format(dateFormat);
   const timeStart = startTz.format(timeFormat);
-  const timeEnd = endTz.format(timeFormat);
+  const timeEnd =
+    props.ts.key !== "Custom" && props.ts.fixedWindowEnd
+      ? props.ts.fixedWindowEnd.tz(timezone).format(timeFormat)
+      : endTz.format(timeFormat);
 
   return (
     <>
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
@@ -14,6 +14,7 @@ import classNames from "classnames/bind";
 import _ from "lodash";
 import { RouteComponentProps } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import moment from "moment-timezone";
 
 import statementsStyles from "../statementsPage/statementsPage.module.scss";
 import {
@@ -223,6 +224,9 @@ export class TransactionDetails extends React.Component<
   };
 
   changeTimeScale = (ts: TimeScale): void => {
+    if (ts.key !== "Custom") {
+      ts.fixedWindowEnd = moment();
+    }
     if (this.props.onTimeScaleChange) {
       this.props.onTimeScaleChange(ts);
     }
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -84,6 +84,7 @@ import { SearchCriteria } from "src/searchCriteria/searchCriteria";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 import { FormattedTimescale } from "../timeScaleDropdown/formattedTimeScale";
 import { RequestState } from "../api";
+import moment from "moment-timezone";
 
 const cx = classNames.bind(styles);
 const timeScaleStylesCx = classNames.bind(timeScaleStyles);
@@ -384,6 +385,9 @@ export class TransactionsPage extends React.Component<
   };
 
   changeTimeScale = (ts: TimeScale): void => {
+    if (ts.key !== "Custom") {
+      ts.fixedWindowEnd = moment();
+    }
     this.setState(prevState => ({ ...prevState, timeScale: ts }));
   };
 
@@ -404,6 +408,8 @@ export class TransactionsPage 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);
     }
