Merge #55164

55164: ui: extend diagnostics column to allow activate and download reports r=koorosh a=koorosh

Resolves #50824
~~Depends on cockroachdb/admin-ui-components#31
~~Depends on cockroachdb/yarn-vendored#42

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 the statements table.

With current changes, Diagnostics column allows requesting new
reports every time 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

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`

![Screen Shot 2020-10-01 at 4 55 32 PM](https://user-images.githubusercontent.com/3106437/94915373-77c62c80-04b5-11eb-8fef-4b33db15613b.png)


Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>

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"