Merge pull request #109468 from maryliag/backport23.1-109164

release-23.1: ui: show warning when data is not old enough
cockroachdb · Aug 25, 2023 · f2db522 · f2db522
2 parents f5a69a7 + d950593
commit f2db522
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 45 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -94,6 +94,7 @@ import { CockroachCloudContext } from "../contexts";
 import { filterByTimeScale } from "./diagnostics/diagnosticsUtils";
 import { FormattedTimescale } from "../timeScaleDropdown/formattedTimeScale";
 import { Timestamp } from "../timestamp";
+import { TimeScaleLabel } from "src/timeScaleDropdown/timeScaleLabel";
 
 type StatementDetailsResponse =
   cockroach.server.serverpb.StatementDetailsResponse;
@@ -706,13 +707,10 @@ export class StatementDetails extends React.Component<
           </PageConfigItem>
         </PageConfig>
         <p className={timeScaleStylesCx("time-label", "label-margin")}>
-          Showing aggregated stats from{" "}
-          <span className={timeScaleStylesCx("bold")}>
-            <FormattedTimescale
-              ts={this.props.timeScale}
-              requestTime={moment(this.props.requestTime)}
-            />
-          </span>
+          <TimeScaleLabel
+            timeScale={this.props.timeScale}
+            requestTime={moment(this.props.requestTime)}
+          />
         </p>
         <section className={cx("section")}>
           <Row gutter={24}>

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts
@@ -20,12 +20,15 @@ import { StatementDiagnosticsReport } from "../api";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import ILatencyInfo = cockroach.sql.ILatencyInfo;
 import { AggregateStatistics } from "src/statementsTable";
-import { DEFAULT_STATS_REQ_OPTIONS } from "../api/statementsApi";
+import { DEFAULT_STATS_REQ_OPTIONS } from "src/api/statementsApi";
 
 type IStatementStatistics = protos.cockroach.sql.IStatementStatistics;
 type IExecStats = protos.cockroach.sql.IExecStats;
 
 const history = createMemoryHistory({ initialEntries: ["/statements"] });
+const timestamp = new protos.google.protobuf.Timestamp({
+  seconds: new Long(Date.parse("Sep 15 2021 01:00:00 GMT") * 1e-3),
+});
 
 const execStats: IExecStats = {
   count: Long.fromNumber(180),
@@ -604,6 +607,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   isTenant: false,
   hasViewActivityRedactedRole: false,
   hasAdminRole: true,
+  oldestDataAvailable: timestamp,
   dismissAlertMessage: noop,
   refreshDatabases: noop,
   refreshStatementDiagnosticsRequests: noop,

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -32,7 +32,7 @@ import {
   updateFiltersQueryParamsOnTab,
 } from "../queryFilter";
 
-import { syncHistory, unique } from "src/util";
+import { Timestamp, TimestampToMoment, syncHistory, unique } from "src/util";
 import {
   AggregateStatistics,
   makeStatementsColumns,
@@ -88,7 +88,7 @@ import {
 } from "src/util/sqlActivityConstants";
 import { SearchCriteria } from "src/searchCriteria/searchCriteria";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
-import { FormattedTimescale } from "../timeScaleDropdown/formattedTimeScale";
+import { TimeScaleLabel } from "src/timeScaleDropdown/timeScaleLabel";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -152,6 +152,7 @@ export interface StatementsPageStateProps {
   hasAdminRole?: UIConfigState["hasAdminRole"];
   stmtsTotalRuntimeSecs: number;
   requestTime: moment.Moment;
+  oldestDataAvailable: Timestamp;
 }
 
 export interface StatementsPageState {
@@ -608,12 +609,6 @@ export class StatementsPage extends React.Component<
       isSelectedColumn(userSelectedColumnsToShow, c),
     );
 
-    const period = (
-      <FormattedTimescale
-        ts={this.props.timeScale}
-        requestTime={moment(this.props.requestTime)}
-      />
-    );
     const sortSettingLabel = getSortLabel(
       this.props.reqSortSetting,
       "Statement",
@@ -663,8 +658,14 @@ export class StatementsPage extends React.Component<
           <PageConfig className={cx("float-right")}>
             <PageConfigItem>
               <p className={timeScaleStylesCx("time-label")}>
-                Showing aggregated stats from{" "}
-                <span className={timeScaleStylesCx("bold")}>{period}</span>
+                <TimeScaleLabel
+                  timeScale={this.props.timeScale}
+                  requestTime={moment(this.props.requestTime)}
+                  oldestDataTime={
+                    this.props.oldestDataAvailable &&
+                    TimestampToMoment(this.props.oldestDataAvailable)
+                  }
+                />
                 {", "}
                 <ResultsPerPageLabel
                   pagination={{ ...pagination, total: data.length }}

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx
@@ -115,6 +115,8 @@ export const ConnectedStatementsPage = withRouter(
         reqSortSetting: selectStmtsPageReqSort(state),
         stmtsTotalRuntimeSecs:
           state.adminUI?.statements?.data?.stmts_total_runtime_secs ?? 0,
+        oldestDataAvailable:
+          state.adminUI?.statements?.data?.oldest_aggregated_ts_returned,
       },
       activePageProps: mapStateToRecentStatementsPageProps(state),
     }),

diff --git a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx
@@ -15,6 +15,9 @@ import { Button } from "src/button";
 import { ResultsPerPageLabel } from "src/pagination";
 import classNames from "classnames/bind";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
+import { TimeScaleLabel } from "src/timeScaleDropdown/timeScaleLabel";
+import { TimeScale } from "src/timeScaleDropdown";
+import moment from "moment-timezone";
 
 const { statistic, countTitle } = statisticsClasses;
 const timeScaleStylesCx = classNames.bind(timeScaleStyles);
@@ -26,7 +29,8 @@ interface TableStatistics {
   activeFilters: number;
   search?: string;
   onClearFilters?: () => void;
-  period?: string;
+  timeScale?: TimeScale;
+  requestTime?: moment.Moment;
 }
 
 // TableStatistics shows statistics about the results being
@@ -41,14 +45,14 @@ export const TableStatistics: React.FC<TableStatistics> = ({
   arrayItemName,
   onClearFilters,
   activeFilters,
-  period,
+  timeScale,
+  requestTime,
 }) => {
-  const periodLabel = (
+  const periodLabel = timeScale && requestTime && (
     <>
       &nbsp;&nbsp;&nbsp;| &nbsp;
       <p className={timeScaleStylesCx("time-label")}>
-        Showing aggregated stats from{" "}
-        <span className={timeScaleStylesCx("bold")}>{period}</span>
+        <TimeScaleLabel timeScale={timeScale} requestTime={requestTime} />
       </p>
     </>
   );
@@ -60,7 +64,7 @@ export const TableStatistics: React.FC<TableStatistics> = ({
         pageName={arrayItemName}
         search={search}
       />
-      {period && periodLabel}
+      {periodLabel}
     </>
   );
 
@@ -76,7 +80,7 @@ export const TableStatistics: React.FC<TableStatistics> = ({
   const resultsCountAndClear = (
     <>
       {totalCount} {totalCount === 1 ? "result" : "results"}
-      {period && periodLabel}
+      {periodLabel}
       &nbsp;&nbsp;&nbsp;{onClearFilters && clearBtn}
     </>
   );

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScale.module.scss b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScale.module.scss
@@ -37,6 +37,10 @@
     font-family: $font-family--bold;
     color: $colors--neutral-7;
   }
+  .warning-icon-area {
+    margin-bottom: -3px;
+    margin-right: 2px;
+  }
 }
 
 .label-margin {

diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleLabel.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleLabel.tsx
@@ -0,0 +1,77 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React, { useContext } from "react";
+import moment from "moment-timezone";
+import { TimeScale } from "./timeScaleTypes";
+import { FormattedTimescale } from "./formattedTimeScale";
+import classNames from "classnames/bind";
+import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
+import { Icon } from "@cockroachlabs/ui-components";
+import { Tooltip } from "antd";
+import "antd/lib/tooltip/style";
+import { Timezone } from "src/timestamp";
+import { dateFormat, timeFormat } from "./timeScaleDropdown";
+import { TimezoneContext } from "src/contexts/timezoneContext";
+import { toRoundedDateRange } from "./utils";
+
+const timeScaleStylesCx = classNames.bind(timeScaleStyles);
+
+interface TimeScaleLabelProps {
+  timeScale: TimeScale;
+  requestTime: moment.Moment;
+  oldestDataTime?: moment.Moment;
+}
+
+export const TimeScaleLabel: React.FC<TimeScaleLabelProps> = ({
+  timeScale,
+  requestTime,
+  oldestDataTime,
+}): React.ReactElement => {
+  const period = (
+    <FormattedTimescale ts={timeScale} requestTime={moment(requestTime)} />
+  );
+  const label = (
+    <>
+      Showing aggregated stats from{" "}
+      <span className={timeScaleStylesCx("bold")}>{period}</span>
+    </>
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [start, _] = toRoundedDateRange(timeScale);
+  const showWarning = oldestDataTime && oldestDataTime.diff(start, "hours") > 1;
+  const timezone = useContext(TimezoneContext);
+  const oldestTz = moment(oldestDataTime)?.tz(timezone);
+  const oldestLabel = (
+    <>
+      {`SQL Stats are available since ${oldestTz?.format(
+        dateFormat,
+      )} ${oldestTz?.format(timeFormat)} `}
+      <Timezone />
+    </>
+  );
+
+  const warning = (
+    <Tooltip placement="bottom" title={oldestLabel}>
+      <Icon
+        iconName="Caution"
+        fill="warning"
+        className={timeScaleStylesCx("warning-icon-area")}
+      />
+    </Tooltip>
+  );
+
+  return (
+    <>
+      {showWarning && warning} {label}
+    </>
+  );
+};
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
@@ -89,7 +89,7 @@ import {
 } from "../insightsTable/insightsTable";
 import { CockroachCloudContext } from "../contexts";
 import { SqlStatsSortType } from "src/api/statementsApi";
-import { FormattedTimescale } from "../timeScaleDropdown/formattedTimeScale";
+import { TimeScaleLabel } from "src/timeScaleDropdown/timeScaleLabel";
 const { containerClass } = tableClasses;
 const cx = classNames.bind(statementsStyles);
 const timeScaleStylesCx = classNames.bind(timeScaleStyles);
@@ -291,12 +291,6 @@ export class TransactionDetails extends React.Component<
     const { latestTransactionText } = this.state;
     const statementsForTransaction = this.getStatementsForTransaction();
     const transactionStats = transaction?.stats_data?.stats;
-    const period = (
-      <FormattedTimescale
-        ts={this.props.timeScale}
-        requestTime={moment(this.props.requestTime)}
-      />
-    );
 
     return (
       <div>
@@ -326,8 +320,10 @@ export class TransactionDetails extends React.Component<
         <p
           className={timeScaleStylesCx("time-label", "label-no-margin-bottom")}
         >
-          Showing aggregated stats from{" "}
-          <span className={timeScaleStylesCx("bold")}>{period}</span>
+          <TimeScaleLabel
+            timeScale={this.props.timeScale}
+            requestTime={moment(this.props.requestTime)}
+          />
         </p>
         <Loading
           error={error}

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx
@@ -22,6 +22,7 @@ import {
   routeProps,
   sortSetting,
   timeScale,
+  timestamp,
 } from "./transactions.fixture";
 
 import { TransactionsPage } from ".";
@@ -47,6 +48,7 @@ storiesOf("Transactions Page", module)
       filters={filters}
       nodeRegions={nodeRegions}
       hasAdminRole={true}
+      oldestDataAvailable={timestamp}
       onFilterChange={noop}
       onSortingChange={noop}
       refreshData={noop}
@@ -77,6 +79,7 @@ storiesOf("Transactions Page", module)
         filters={filters}
         nodeRegions={nodeRegions}
         hasAdminRole={true}
+        oldestDataAvailable={timestamp}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
@@ -115,6 +118,7 @@ storiesOf("Transactions Page", module)
         history={history}
         nodeRegions={nodeRegions}
         hasAdminRole={true}
+        oldestDataAvailable={timestamp}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
@@ -146,6 +150,7 @@ storiesOf("Transactions Page", module)
         filters={filters}
         nodeRegions={nodeRegions}
         hasAdminRole={true}
+        oldestDataAvailable={timestamp}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
@@ -184,6 +189,7 @@ storiesOf("Transactions Page", module)
         filters={filters}
         nodeRegions={nodeRegions}
         hasAdminRole={true}
+        oldestDataAvailable={timestamp}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}