diff --git a/pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx b/pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx
index bf2bd1a22a09..99ae50fe725c 100644
--- a/pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx
+++ b/pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx
@@ -17,7 +17,16 @@ 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";
@@ -44,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 (
+
+ { fingerprint }
+ }
+ overlayClassName="cl-table-link__statement-tooltip--fixed-width"
+ >
+ {shortenedStatement}
+
+
+ );
+ }
+ return (
+ {shortenedStatement}
+ );
+};
+
class StatementDiagnosticsHistoryView extends React.Component {
columns: ColumnsConfig = [
{
@@ -71,7 +107,7 @@ class StatementDiagnosticsHistoryView extends React.Component{fingerprint}
+ return ;
}
return (
@@ -79,9 +115,9 @@ class StatementDiagnosticsHistoryView extends React.Component
- {fingerprint}
+
- )
+ );
},
},
{
diff --git a/pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl b/pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl
index c8f07596764c..079d91af3c5f 100644
--- a/pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl
+++ b/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
\ No newline at end of file
+ white-space pre-wrap
+ margin-bottom 0
diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl
index a3d456f82471..f3649b832cce 100644
--- a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl
+++ b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl
@@ -53,7 +53,7 @@
margin-right $spacing-x-small
&__statements-link
- color $colors--title
+ color $colors--primary-text
&:hover
color $colors--link