From 5c7d42b3b9b8d92c3767289a8ee0e92c4b7462a8 Mon Sep 17 00:00:00 2001 From: Eric Harmeling Date: Mon, 27 Jun 2022 15:27:58 +0000 Subject: [PATCH] ui: improve tooltip UX with text updates Fixes #81374. Fixes #83256. Fixes #81248. Fixes #79018. Release note (ui change): Updated tooltips on the Statements and Transactions pages in the DB Console for improved UX. --- .../src/statsTableUtil/statsTableUtil.tsx | 44 +++++-------------- pkg/ui/workspaces/cluster-ui/src/util/docs.ts | 3 -- pkg/ui/workspaces/db-console/src/util/docs.ts | 3 -- 3 files changed, 12 insertions(+), 38 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx index a756925756c7..484444f74331 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx @@ -17,7 +17,6 @@ import { statementDiagnostics, statementsRetries, statementsSql, - statementsTimeInterval, readFromDisk, writtenToDisk, planningExecutionTime, @@ -343,11 +342,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { content={ <>

- {`Cumulative number of executions of ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `} - - time interval - - .  + {`Cumulative number of executions of ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}

{"The bar indicates the ratio of runtime success (gray) to "} @@ -412,11 +407,11 @@ export const statisticsTableTitles: StatisticTableTitleType = { read - {" and "} + {" from and "} written - {` to disk across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`} + {` to disk per execution for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}

} @@ -453,11 +448,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { read from disk - {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `} - - time interval - - .  + {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}

The gray bar indicates the mean number of bytes read from disk. @@ -502,7 +493,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { planning and execution time - {` of ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified time interval. `} + {` of ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval. `}

The gray bar indicates the mean latency. The blue bar indicates @@ -543,15 +534,12 @@ export const statisticsTableTitles: StatisticTableTitleType = { in contention - {` with other ${contentModifier} within the last hour or specified `} - - time interval - - .  + {` with other ${contentModifier} within the specified time interval.`}

The gray bar indicates mean contention time. The blue bar - indicates one standard deviation from the mean. + indicates one standard deviation from the mean. This time does not + include the time it takes to stream results back to the client.

} @@ -584,11 +572,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { content={ <>

- {`Maximum memory used by a ${contentModifier} with this fingerprint${fingerprintModifier} at any time during its execution within the last hour or specified `} - - time interval - - .  + {`Maximum memory used by a ${contentModifier} with this fingerprint${fingerprintModifier} at any time during its execution within the specified time interval.`}

The gray bar indicates the average max memory usage. The blue bar @@ -629,11 +613,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { data transferred over the network - {` (e.g., between regions and nodes) for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `} - - time interval - - .  + {` (e.g., between regions and nodes) for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}

If this value is 0, the statement was executed on a single node. @@ -677,7 +657,7 @@ export const statisticsTableTitles: StatisticTableTitleType = { retries - {` of ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified time interval.`} + {` (including internal and automatic retries) of ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}

} @@ -710,7 +690,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {

% of runtime all {contentModifier} with this fingerprint {fingerprintModifier} represent, compared to the cumulative runtime - of all queries within the last hour or specified time interval. + of all queries within the specified time interval.

} > diff --git a/pkg/ui/workspaces/cluster-ui/src/util/docs.ts b/pkg/ui/workspaces/cluster-ui/src/util/docs.ts index 258083b4083e..c103924f98c2 100644 --- a/pkg/ui/workspaces/cluster-ui/src/util/docs.ts +++ b/pkg/ui/workspaces/cluster-ui/src/util/docs.ts @@ -55,9 +55,6 @@ export const statementsSql = docsURL( export const statementsRetries = docsURL( "transactions.html#transaction-retries", ); -export const statementsTimeInterval = docsURL( - "ui-statements-page.html#time-interval", -); export const readFromDisk = docsURL( "architecture/life-of-a-distributed-transaction.html#reads-from-the-storage-layer", ); diff --git a/pkg/ui/workspaces/db-console/src/util/docs.ts b/pkg/ui/workspaces/db-console/src/util/docs.ts index 0b7fc8de8d10..21f037259b14 100644 --- a/pkg/ui/workspaces/db-console/src/util/docs.ts +++ b/pkg/ui/workspaces/db-console/src/util/docs.ts @@ -71,9 +71,6 @@ export const statementsRetries = docsURL( export const transactionRetryErrorReference = docsURL( "transaction-retry-error-reference.html", ); -export const statementsTimeInterval = docsURL( - "ui-statements-page.html#time-interval", -); export const capacityMetrics = docsURL( "ui-cluster-overview-page.html#capacity-metrics", );