Merge pull request #101803 from cockroachdb/blathers/backport-release…

…-23.1.0-101489 release-23.1.0: ui: add timescale to diag details page
cockroachdb · Apr 19, 2023 · dc5c429 · dc5c429
2 parents 65ee4b5 + dd664d0
commit dc5c429
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 155 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx b/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";

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsUtils.ts b/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,17 @@ 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.isSameOrBefore(moment(diag.requested_at)) &&
+      end.isSameOrAfter(moment(diag.requested_at)),
+  );
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.module.scss b/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;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.spec.tsx b/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>,
       );