ui: extend diagnostics column to allow activate and download reports

Previously, Statements table had a Diagnostics column which allowed users to request diagnostics reports for the first time and then displayed status for requested report only. As result it wasn't possible to download already generated report or request new one report from statements table. With current changes, Diagnostics column allows to request new reports everytime when previous reports are generated. Also it provides a list with links to download previous reports. The main change is to provide a list of available (or requested) reports for every statement (instead of a single, most recent report as it was before). Then extracted `StatementsPage` component (from `admin-ui-components` package) handles all rendering logic for this list of reports. Minor changes: - `WAITING FOR QUERY` status is renamed to `WAITING` for new design - `getDiagnosticsStatus` utility function is reused to reduce code duplication Resolves: #50824 Release note (admin ui change): Diagnostics column (on statements table) has been changed and includes `Activate` button and dropdown list to download completed reports. Also diagnostics badge status is changed from `WAITING FOR QUERY` to `WAITING`.
cockroachdb · Oct 16, 2020 · 28c4f9e · 28c4f9e
1 parent bb6c84f
commit 28c4f9e
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 22 deletions.
diff --git a/pkg/ui/package.json b/pkg/ui/package.json
@@ -13,7 +13,7 @@
  "cypress:update-snapshots": "yarn cypress run --env updateSnapshots=true --spec 'cypress/integration/**/*.visual.spec.ts'"
  },
  "dependencies": {
- "@cockroachlabs/admin-ui-components": "^0.1.17",
+ "@cockroachlabs/admin-ui-components": "^0.1.20",
  "analytics-node": "^3.4.0-beta.1",
  "antd": "^3.25.2",
  "babel-polyfill": "^6.26.0",

diff --git a/pkg/ui/src/redux/statements/statementsSelectors.ts b/pkg/ui/src/redux/statements/statementsSelectors.ts
@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { chain, sortBy, last } from "lodash";
+import { chain, orderBy } from "lodash";
 import { createSelector } from "reselect";
 import { AdminUIState } from "src/redux/state";
 import { cockroach } from "src/js/protos";
@@ -44,14 +44,13 @@ export const statementDiagnosticsReportsInFlight = createSelector(
 );
 
 type StatementDiagnosticsDictionary = {
- [statementFingerprint: string]: IStatementDiagnosticsReport;
+ [statementFingerprint: string]: IStatementDiagnosticsReport[];
 };
 
-export const selectLastDiagnosticsReportPerStatement = createSelector(
+export const selectDiagnosticsReportsPerStatement = createSelector(
  selectStatementDiagnosticsReports,
  (diagnosticsReports: IStatementDiagnosticsReport[]): StatementDiagnosticsDictionary => chain(diagnosticsReports)
  .groupBy(diagnosticsReport => diagnosticsReport.statement_fingerprint)
- // Perform ASC sorting and take the last item
- .mapValues(diagnostics => last(sortBy(diagnostics, d => d.requested_at.seconds.toNumber())))
+ .mapValues(diagnostics => orderBy(diagnostics, d => d.requested_at.seconds.toNumber(), ["desc"]))
  .value(),
 );
diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticStatusBadge.tsx b/pkg/ui/src/views/statements/diagnostics/diagnosticStatusBadge.tsx
@@ -24,7 +24,7 @@ function mapDiagnosticsStatusToBadge(diagnosticsStatus: DiagnosticStatuses) {
  switch (diagnosticsStatus) {
  case "READY":
  return "success";
- case "WAITING FOR QUERY":
+ case "WAITING":
  return "info";
  case "ERROR":
  return "danger";
@@ -50,7 +50,7 @@ function mapStatusToDescription(diagnosticsStatus: DiagnosticStatuses) {
  </p>
  </div>
  );
- case "WAITING FOR QUERY":
+ case "WAITING":
  return (
  <div className="tooltip__table--title">
  <p>

diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticStatuses.ts b/pkg/ui/src/views/statements/diagnostics/diagnosticStatuses.ts
@@ -8,4 +8,4 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-export type DiagnosticStatuses = "READY" | "WAITING FOR QUERY" | "ERROR";
+export type DiagnosticStatuses = "READY" | "WAITING" | "ERROR";
diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsUtils.ts b/pkg/ui/src/views/statements/diagnostics/diagnosticsUtils.ts
@@ -19,7 +19,7 @@ export function getDiagnosticsStatus(diagnosticsRequest: IStatementDiagnosticsRe
  return "READY";
  }
 
- return "WAITING FOR QUERY";
+ return "WAITING";
 }
 
 export function sortByRequestedAtField(a: IStatementDiagnosticsReport, b: IStatementDiagnosticsReport) {

diff --git a/pkg/ui/src/views/statements/statementsPage.tsx b/pkg/ui/src/views/statements/statementsPage.tsx
@@ -30,7 +30,7 @@ import { appAttr } from "src/util/constants";
 import { TimestampToMoment } from "src/util/convert";
 import { PrintTime } from "src/views/reports/containers/range/print";
 import {
- selectLastDiagnosticsReportPerStatement,
+ selectDiagnosticsReportsPerStatement,
 } from "src/redux/statements/statementsSelectors";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
 import { getMatchParamByName } from "src/util/query";
@@ -42,8 +42,10 @@ import {
  trackStatementsSearchAction,
  trackTableSortAction,
 } from "src/redux/analyticsActions";
+import { trackDownloadDiagnosticsBundle } from "src/util/analytics";
 
 type ICollectedStatementStatistics = protos.cockroach.server.serverpb.StatementsResponse.ICollectedStatementStatistics;
+type IStatementDiagnosticsReport = protos.cockroach.server.serverpb.IStatementDiagnosticsReport;
 
 interface StatementsSummaryData {
  statement: string;
@@ -60,11 +62,11 @@ function keyByStatementAndImplicitTxn(stmt: ExecutionStatistics): string {
 export const selectStatements = createSelector(
  (state: AdminUIState) => state.cachedData.statements,
  (_state: AdminUIState, props: RouteComponentProps) => props,
- selectLastDiagnosticsReportPerStatement,
+ selectDiagnosticsReportsPerStatement,
  (
  state: CachedDataReducerState<StatementsResponseMessage>,
  props: RouteComponentProps<any>,
- lastDiagnosticsReportPerStatement,
+ diagnosticsReportsPerStatement,
  ) => {
  if (!state.data) {
  return null;
@@ -108,7 +110,7 @@ export const selectStatements = createSelector(
  label: stmt.statement,
  implicitTxn: stmt.implicitTxn,
  stats: combineStatementStats(stmt.stats),
- diagnosticsReport: lastDiagnosticsReportPerStatement[stmt.statement],
+ diagnosticsReports: diagnosticsReportsPerStatement[stmt.statement],
  };
  });
  },
@@ -185,6 +187,7 @@ const StatementsPageConnected = withRouter(connect(
  onSearchComplete: (results: AggregateStatistics[]) => trackStatementsSearchAction(results.length),
  onPageChanged: trackStatementsPaginationAction,
  onSortingChange: trackTableSortAction,
+ onDiagnosticsReportDownload: (report: IStatementDiagnosticsReport) => trackDownloadDiagnosticsBundle(report.statement_fingerprint),
  },
 )(StatementsPage));
 

diff --git a/pkg/ui/src/views/statements/statementsTable.tsx b/pkg/ui/src/views/statements/statementsTable.tsx
@@ -22,6 +22,7 @@ import IStatementDiagnosticsReport = cockroach.server.serverpb.IStatementDiagnos
 import { ActivateDiagnosticsModalRef } from "./diagnostics/activateDiagnosticsModal";
 import styles from "./statementsTable.module.styl";
 import { StatementTableTitle, StatementTableCell, NodeNames } from "./statementsTableContent";
+import { getDiagnosticsStatus } from "src/views/statements/diagnostics";
 
 const cx = classNames.bind(styles);
 const longToInt = (d: number | Long) => FixLong(d).toInt();
@@ -78,7 +79,7 @@ export function makeStatementsColumns(
  cell: StatementTableCell.diagnostics(activateDiagnosticsRef),
  sort: (stmt) => {
  if (stmt.diagnosticsReport) {
- return stmt.diagnosticsReport.completed ? "READY" : "WAITING FOR QUERY";
+ return getDiagnosticsStatus(stmt.diagnosticsReport);
  }
  return null;
  },

diff --git a/pkg/ui/src/views/statements/statementsTableContent.tsx b/pkg/ui/src/views/statements/statementsTableContent.tsx
@@ -19,6 +19,7 @@ import { ActivateDiagnosticsModalRef } from "./diagnostics/activateDiagnosticsMo
 import { DiagnosticStatusBadge } from "./diagnostics/diagnosticStatusBadge";
 import { shortStatement } from "./statementsTable";
 import styles from "./statementsTableContent.module.styl";
+import { getDiagnosticsStatus } from "src/views/statements/diagnostics";
 
 export type NodeNames = { [nodeId: string]: string };
 
@@ -90,7 +91,7 @@ export const StatementTableTitle = {
  diagnostics
  </Anchor>
  {" for each statement. If activated, this displays the status of diagnostics collection ("}
- <code>WAITING FOR QUERY</code>, <code>READY</code>, OR <code>ERROR</code>).
+ <code>WAITING</code>, <code>READY</code>, OR <code>ERROR</code>).
  </p>
  </div>
  }
@@ -202,7 +203,7 @@ export const StatementTableCell = {
  ),
  diagnostics: (activateDiagnosticsRef: React.RefObject<ActivateDiagnosticsModalRef>) => (stmt: any) => {
  if (stmt.diagnosticsReport) {
- return <DiagnosticStatusBadge status={stmt.diagnosticsReport.completed ? "READY" : "WAITING FOR QUERY"}/>;
+ return <DiagnosticStatusBadge status={getDiagnosticsStatus(stmt.diagnosticsReport)}/>;
  }
  return (
  <Anchor

diff --git a/pkg/ui/yarn-vendor b/pkg/ui/yarn-vendor
diff --git a/pkg/ui/yarn.lock b/pkg/ui/yarn.lock
@@ -1806,10 +1806,10 @@
  lodash "^4.17.13"
  to-fast-properties "^2.0.0"
 
-"@cockroachlabs/admin-ui-components@^0.1.17":
- version "0.1.17"
- resolved "https://registry.yarnpkg.com/@cockroachlabs/admin-ui-components/-/admin-ui-components-0.1.17.tgz#8bd6d262a95229794ee6adcbb5403d85f284b24e"
- integrity sha512-CLG6cG04K4Wp6qr00xz+pFw+mYUGN4qg8ZwjgzTOF1pQxB1lpwL1JqWn+cnwH6CZa134K3+VAs03X2T6T1/McQ==
+"@cockroachlabs/admin-ui-components@^0.1.20":
+ version "0.1.20"
+ resolved "https://registry.yarnpkg.com/@cockroachlabs/admin-ui-components/-/admin-ui-components-0.1.20.tgz#3de5f68e7f93133bda52aeb53ec850901670ae77"
+ integrity sha512-UhMv45zb0EVi/2RAVkwgtFJVNLah9sQG6NSCrZG8e1vwZeDMF1DDQKuTozTU+AT6Ry+7I1XLUkPoORrdrdAg4w==
  dependencies:
  "@cockroachlabs/crdb-protobuf-client" "^0.0.3"
  "@cockroachlabs/icons" "^0.2.2"