Skip to content

Commit

Permalink
ui: improve tooltip UX with text updates
Browse files Browse the repository at this point in the history 
Fixes cockroachdb#81374.
Fixes cockroachdb#83256.
Fixes cockroachdb#81248.
Fixes cockroachdb#79018.

Release note (ui change): Updated tooltips on the Statements and
Transactions pages in the DB Console for improved UX.
  • Loading branch information
@ericharmeling
ericharmeling committed Jun 28, 2022
1 parent 443c4d5 commit 777b2e6
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 47 deletions.
54 changes: 13 additions & 41 deletions pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
statementDiagnostics,
statementsRetries,
statementsSql,
statementsTimeInterval,
readFromDisk,
writtenToDisk,
planningExecutionTime,
Expand Down Expand Up @@ -344,11 +343,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 "}
Expand Down Expand Up @@ -409,15 +404,11 @@ export const statisticsTableTitles: StatisticTableTitleType = {
content={
<>
<p>
{"Aggregation of all rows "}
{"Average (mean) number of rows "}
<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;
{` per execution for ${contentModifier} with this fingerprint${fingerprintModifier} within the specified time interval.`}
</p>
<p>
The gray bar indicates the mean number of rows read from disk. The
Expand Down Expand Up @@ -458,11 +449,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.
Expand Down Expand Up @@ -503,11 +490,7 @@ export const statisticsTableTitles: StatisticTableTitleType = {
<Anchor href={writtenToDisk} target="_blank">
written to 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 rows written to disk.
Expand Down Expand Up @@ -552,11 +535,12 @@ 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
one standard deviation from the mean.
one standard deviation from the mean. This time does not include
the time it takes to stream results back to the client.
</p>
</>
}
Expand Down Expand Up @@ -593,11 +577,7 @@ 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
Expand Down Expand Up @@ -634,11 +614,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
Expand Down Expand Up @@ -679,11 +655,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.
Expand Down Expand Up @@ -727,7 +699,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>
</>
}
Expand Down Expand Up @@ -760,7 +732,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>
}
>
Expand Down
3 changes: 0 additions & 3 deletions pkg/ui/workspaces/cluster-ui/src/util/docs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
);
Expand Down
3 changes: 0 additions & 3 deletions pkg/ui/workspaces/db-console/src/util/docs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
);
Expand Down

0 comments on commit 777b2e6

Please sign in to comment.