ui: extend diagnostics column to allow activate and download reports

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",

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(),
 );

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>

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";

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) {

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));
 

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;
  },

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

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"