ui: Link from statement diagnostics to details page

pkg/ui/src/components/table/table.styl

@@ -11,6 +11,9 @@
 @require '~src/components/core/index.styl'
 
 .crl-table-wrapper
+  .ant-table
+    color $colors--primary-text
+
   // Table header
   .ant-table-thead
     background-color $colors--neutral-1

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx

@@ -14,19 +14,32 @@ import { connect } from "react-redux";
 import moment from "moment";
 import { Action, Dispatch } from "redux";
 import Long from "long";
+import { isUndefined } from "lodash";
+import { Link } from "react-router-dom";
 
-import { Button, ColumnsConfig, DownloadFile, DownloadFileRef, Table, Text, TextTypes } from "src/components";
+import {
+  Button,
+  ColumnsConfig,
+  DownloadFile,
+  DownloadFileRef,
+  Table,
+  Text,
+  TextTypes,
+  Tooltip,
+} from "src/components";
 import HeaderSection from "src/views/shared/components/headerSection";
 import { AdminUIState } from "src/redux/state";
 import { getStatementDiagnostics } from "src/util/api";
 import { trustIcon } from "src/util/trust";
 import DownloadIcon from "!!raw-loader!assets/download.svg";
 import {
+  selectStatementByFingerprint,
   selectStatementDiagnosticsReports,
 } from "src/redux/statements/statementsSelectors";
 import {
   invalidateStatementDiagnosticsRequests,
   refreshStatementDiagnosticsRequests,
+  refreshStatements,
 } from "src/redux/apiReducers";
 import { DiagnosticStatusBadge } from "src/views/statements/diagnostics/diagnosticStatusBadge";
 import "./statementDiagnosticsHistoryView.styl";
@@ -40,9 +53,36 @@ import {
   sortByStatementFingerprintField,
 } from "src/views/statements/diagnostics";
 import { trackDownloadDiagnosticsBundle } from "src/util/analytics";
+import { shortStatement } from "src/views/statements/statementsTable";
+import { summarize } from "src/util/sql/summarize";
 
 type StatementDiagnosticsHistoryViewProps = MapStateToProps & MapDispatchToProps;
 
+const StatementColumn: React.FC<{ fingerprint: string }> = ({ fingerprint }) => {
+  const summary = summarize(fingerprint);
+  const shortenedStatement = shortStatement(summary, fingerprint);
+  const showTooltip = fingerprint !== shortenedStatement;
+
+  if (showTooltip) {
+    return (
+      <Text textType={TextTypes.Code}>
+        <Tooltip
+          placement="bottom"
+          title={
+            <pre className="cl-table-link__description">{ fingerprint }</pre>
+          }
+          overlayClassName="cl-table-link__statement-tooltip--fixed-width"
+        >
+          {shortenedStatement}
+        </Tooltip>
+      </Text>
+    );
+  }
+  return (
+    <Text textType={TextTypes.Code}>{shortenedStatement}</Text>
+  );
+};
+
 class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosticsHistoryViewProps> {
   columns: ColumnsConfig<IStatementDiagnosticsReport> = [
     {
@@ -60,9 +100,25 @@ class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosti
       key: "statement",
       title: "statement",
       sorter: sortByStatementFingerprintField,
-      render: (_text, record) => (
-        <Text textType={TextTypes.Code}>{record.statement_fingerprint}</Text>
-      ),
+      render: (_text, record) => {
+        const { getStatementByFingerprint } = this.props;
+        const fingerprint = record.statement_fingerprint;
+        const statement = getStatementByFingerprint(fingerprint);
+        const { implicit_txn: implicitTxn = "true", query } = statement?.key?.key_data || {};
+
+        if (isUndefined(query)) {
+          return <StatementColumn fingerprint={fingerprint} />;
+        }
+
+        return (
+          <Link
+            to={ `/statement/${implicitTxn}/${encodeURIComponent(query)}` }
+            className="crl-statements-diagnostics-view__statements-link"
+          >
+            <StatementColumn fingerprint={fingerprint} />
+          </Link>
+        );
+      },
     },
     {
       key: "status",
@@ -182,6 +238,7 @@ class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosti
 
 interface MapStateToProps {
   diagnosticsReports: IStatementDiagnosticsReport[];
+  getStatementByFingerprint: (fingerprint: string) => ReturnType<typeof selectStatementByFingerprint>;
 }
 
 interface MapDispatchToProps {
@@ -190,12 +247,14 @@ interface MapDispatchToProps {
 
 const mapStateToProps = (state: AdminUIState): MapStateToProps => ({
   diagnosticsReports: selectStatementDiagnosticsReports(state) || [],
+  getStatementByFingerprint: (fingerprint: string) => selectStatementByFingerprint(state, fingerprint),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action, AdminUIState>): MapDispatchToProps => ({
   refresh: () => {
     dispatch(invalidateStatementDiagnosticsRequests());
     dispatch(refreshStatementDiagnosticsRequests());
+    dispatch(refreshStatements());
   },
 });
 

pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl

@@ -107,4 +107,5 @@
   font-size $font-size--small
   line-height 22px
   color $colors--neutral-1
-  white-space pre-wrap
+  white-space pre-wrap
+  margin-bottom 0

pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl

@@ -52,6 +52,11 @@
     vertical-align -0.125em
     margin-right $spacing-x-small
 
+  &__statements-link
+    color $colors--primary-text
+    &:hover
+      color $colors--link
+
 .summary--card__empty-sate
   background-color $colors--white
   background-image url("../../../../assets/statementsPage/emptyTracingBackground.svg")