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