ui: add timescale to diag details page

Fixes cockroachdb#92417

This commit adds a time scale picker to the Diagnostics
tab on Statement Details page. The time scale is aligned
with the other ones, and now is possible to see bundles
from only the selected period.

This commit also makes some UX updates on the same tab,
making it use the same SortedTable component as other pages,
removing the white background and title to align with
all other pages that no longer have those items.

Release note (ui change): Add a time scale selector to the Diagnostics
tab under the Statement Details page, make it possible to see bundles
only from the selected period.

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

@@ -11,16 +11,14 @@
 import React from "react";
 import classNames from "classnames/bind";
 import styles from "./searchCriteria.module.scss";
+import { PageConfig, PageConfigItem } from "src/pageConfig";
+import { Button } from "src/button";
+import { commonStyles, selectCustomStyles } from "src/common";
 import {
-  Button,
-  commonStyles,
-  PageConfig,
-  PageConfigItem,
-  selectCustomStyles,
   TimeScale,
   timeScale1hMinOptions,
   TimeScaleDropdown,
-} from "src";
+} from "src/timeScaleDropdown";
 import { applyBtn } from "../queryFilter/filterClasses";
 import Select from "react-select";
 import { limitOptions } from "../util/sqlActivityConstants";

pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsUtils.ts

@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { isUndefined } from "lodash";
+import { TimeScale, toDateRange } from "src/timeScaleDropdown";
 import { DiagnosticStatuses } from "src/statementsDiagnostics";
 import { StatementDiagnosticsReport } from "../../api";
 import moment from "moment-timezone";
@@ -19,60 +19,16 @@ export function getDiagnosticsStatus(
   if (diagnosticsRequest.completed) {
     return "READY";
   }
-
   return "WAITING";
 }
 
-export function sortByRequestedAtField(
-  a: StatementDiagnosticsReport,
-  b: StatementDiagnosticsReport,
-): number {
-  const activatedOnA = moment(a.requested_at)?.unix();
-  const activatedOnB = moment(b.requested_at)?.unix();
-  if (isUndefined(activatedOnA) && isUndefined(activatedOnB)) {
-    return 0;
-  }
-  if (activatedOnA < activatedOnB) {
-    return -1;
-  }
-  if (activatedOnA > activatedOnB) {
-    return 1;
-  }
-  return 0;
-}
-
-export function sortByCompletedField(
-  a: StatementDiagnosticsReport,
-  b: StatementDiagnosticsReport,
-): number {
-  const completedA = a.completed ? 1 : -1;
-  const completedB = b.completed ? 1 : -1;
-  if (completedA < completedB) {
-    return -1;
-  }
-  if (completedA > completedB) {
-    return 1;
-  }
-  return 0;
-}
-
-export function sortByStatementFingerprintField(
-  a: StatementDiagnosticsReport,
-  b: StatementDiagnosticsReport,
-): number {
-  const statementFingerprintA = a.statement_fingerprint;
-  const statementFingerprintB = b.statement_fingerprint;
-  if (
-    isUndefined(statementFingerprintA) &&
-    isUndefined(statementFingerprintB)
-  ) {
-    return 0;
-  }
-  if (statementFingerprintA < statementFingerprintB) {
-    return -1;
-  }
-  if (statementFingerprintA > statementFingerprintB) {
-    return 1;
-  }
-  return 0;
+export function filterByTimeScale(
+  diagnostics: StatementDiagnosticsReport[],
+  ts: TimeScale,
+): StatementDiagnosticsReport[] {
+  const [start, end] = toDateRange(ts);
+  return diagnostics.filter(
+    diag =>
+      start <= moment(diag.requested_at) && moment(diag.requested_at) <= end,
+  );
 }

pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
 
-  &__title {
+  &__header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -79,3 +79,19 @@
     margin-right: $spacing-x-small;
   }
 }
+
+.column-size-medium {
+  width: 230px;
+}
+
+.column-size-small {
+  width: 140px;
+}
+
+.sorted-table {
+  width: 100%;
+}
+
+.margin-bottom {
+  margin-bottom: $spacing-smaller;
+}

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

@@ -15,24 +15,31 @@ import { MemoryRouter } from "react-router-dom";
 import { Button } from "@cockroachlabs/ui-components";
 
 import { DiagnosticsView } from "./diagnosticsView";
-import { Table } from "src/table";
 import { TestStoreProvider } from "src/test-utils";
 import { StatementDiagnosticsReport } from "../../api";
 import moment from "moment-timezone";
+import { SortedTable } from "src/sortedtable";
 
 const activateDiagnosticsRef = { current: { showModalFor: jest.fn() } };
+const ts = {
+  windowSize: moment.duration(20, "day"),
+  sampleSize: moment.duration(5, "minutes"),
+  fixedWindowEnd: moment.utc("2023.01.5"),
+  key: "Custom",
+};
+const mockSetTimeScale = jest.fn();
 
 function generateDiagnosticsRequest(
   extendObject: Partial<StatementDiagnosticsReport> = {},
 ): StatementDiagnosticsReport {
-  const requestedAt = moment.now();
+  const requestedAt = moment("2023-01-01 00:00:00");
   const report: StatementDiagnosticsReport = {
     id: "124354678574635",
     statement_fingerprint: "SELECT * FROM table",
     completed: true,
     requested_at: moment(requestedAt),
     min_execution_latency: moment.duration(10),
-    expires_at: moment(requestedAt + 10),
+    expires_at: moment("2023-01-01 00:00:10"),
   };
   Object.assign(report, extendObject);
   return report;
@@ -52,6 +59,8 @@ describe("DiagnosticsView", () => {
             hasData={false}
             diagnosticsReports={[]}
             dismissAlertMessage={() => {}}
+            currentScale={ts}
+            onChangeTimeScale={mockSetTimeScale}
           />
         </MemoryRouter>,
       );
@@ -81,13 +90,15 @@ describe("DiagnosticsView", () => {
             hasData={true}
             diagnosticsReports={diagnosticsRequests}
             dismissAlertMessage={() => {}}
+            currentScale={ts}
+            onChangeTimeScale={mockSetTimeScale}
           />
         </TestStoreProvider>,
       );
     });
 
     it("renders Table component when diagnostics data is provided", () => {
-      assert.isTrue(wrapper.find(Table).exists());
+      assert.isTrue(wrapper.find(SortedTable).exists());
     });
 
     it("opens the statement diagnostics modal when Activate button is clicked", () => {
@@ -113,6 +124,8 @@ describe("DiagnosticsView", () => {
             hasData={true}
             diagnosticsReports={diagnosticsRequests}
             dismissAlertMessage={() => {}}
+            currentScale={ts}
+            onChangeTimeScale={mockSetTimeScale}
           />
         </TestStoreProvider>,
       );
@@ -135,6 +148,8 @@ describe("DiagnosticsView", () => {
             hasData={true}
             diagnosticsReports={diagnosticsRequests}
             dismissAlertMessage={() => {}}
+            currentScale={ts}
+            onChangeTimeScale={mockSetTimeScale}
           />
         </TestStoreProvider>,
       );