Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: improve tooltip UX with text updates #83420

Merged
merged 1 commit into from
Jun 28, 2022
Merged

ui: improve tooltip UX with text updates #83420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 12 additions & 32 deletions pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx
View file
Open in desktop
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 @@ -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 "}
Expand Down Expand Up @@ -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>
</>
}
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
</>
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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>
</>
}
Expand Down Expand Up @@ -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>
}
>
Expand Down
3 changes: 0 additions & 3 deletions pkg/ui/workspaces/cluster-ui/src/util/docs.ts
View file
Open in desktop
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
Open in desktop
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