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.
cockroachdb · Jun 28, 2022 · b3571fe · b3571fe
1 parent 615051e
commit b3571fe
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 38 deletions.
diff --git 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={
           <>
             <p>
-              {`Cumulative number of executions of ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
+              {`Cumulative number of executions of ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}
             </p>
             <p>
               {"The bar indicates the ratio of runtime success (gray) to "}
@@ -412,11 +407,11 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={readFromDisk} target="_blank">
                 read
               </Anchor>
-              {" and "}
+              {" from and "}
               <Anchor href={writtenToDisk} target="_blank">
                 written
               </Anchor>
-              {` 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.`}
             </p>
           </>
         }
@@ -453,11 +448,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={readFromDisk} target="_blank">
                 read from disk
               </Anchor>
-              {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
+              {` across all operators for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}
             </p>
             <p>
               The gray bar indicates the mean number of bytes read from disk.
@@ -502,7 +493,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={planningExecutionTime} target="_blank">
                 planning and execution time
               </Anchor>
-              {` 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. `}
             </p>
             <p>
               The gray bar indicates the mean latency. The blue bar indicates
@@ -543,15 +534,12 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={contentionTime} target="_blank">
                 in contention
               </Anchor>
-              {` with other ${contentModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
+              {` with other ${contentModifier} within the specified time interval.`}
             </p>
             <p>
               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.
             </p>
           </>
         }
@@ -584,11 +572,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
         content={
           <>
             <p>
-              {`Maximum memory used by a ${contentModifier} with this fingerprint${fingerprintModifier} at any time during its execution within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
+              {`Maximum memory used by a ${contentModifier} with this fingerprint${fingerprintModifier} at any time during its execution within the specified time interval.`}
             </p>
             <p>
               The gray bar indicates the average max memory usage. The blue bar
@@ -629,11 +613,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={readsAndWrites} target="_blank">
                 data transferred over the network
               </Anchor>
-              {` (e.g., between regions and nodes) for ${contentModifier} with this fingerprint${fingerprintModifier} within the last hour or specified `}
-              <Anchor href={statementsTimeInterval} target="_blank">
-                time interval
-              </Anchor>
-              .&nbsp;
+              {` (e.g., between regions and nodes) for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}
             </p>
             <p>
               If this value is 0, the statement was executed on a single node.
@@ -677,7 +657,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
               <Anchor href={statementsRetries} target="_blank">
                 retries
               </Anchor>
-              {` 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.`}
             </p>
           </>
         }
@@ -710,7 +690,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
           <p>
             % 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.
           </p>
         }
       >

diff --git a/pkg/ui/workspaces/cluster-ui/src/util/docs.ts b/pkg/ui/workspaces/cluster-ui/src/util/docs.ts
@@ -57,9 +57,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
@@ -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",
 );