ui: ui updates to Statements Page

This commit introduces fixes to Statements Page:

- Update style of link on tooltip for diagnostic status and
add space before `When`
- Remove word `current` from the Cancel Diagnostics request
- Slow loading message only show after a few seconds of page loading
- Space between item (seach / filter/ time picker) are now 12px and
the size of both dividers are the same (using the heigh of all items)
- Update color of alert message on Conditional Diagnostic Request
- Change `trace` to `diagnostic bundle`
- Update link color/underline on hover for node and app name

Partially addresses #77982

Release note: None

pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss

@@ -56,5 +56,5 @@ h3.base-heading {
 
 .separator {
   border-left: 1px solid #C0C6D9;
-  padding-left: 25px;
+  padding-left: 12px;
 }

pkg/ui/workspaces/cluster-ui/src/core/colors.module.scss

@@ -18,6 +18,7 @@ $colors--primary-blue-4: #005fb3;
 $colors--primary-blue-5: #00294d;
 $colors--primary-blue-6: #89b0ff;
 $colors--primary-blue-7: #b6ceff;
+$colors--primary-blue-alert: #e1ecff;
 
 $colors--primary-green-0: #daf8d4;
 $colors--primary-green-1: #b4f1aa;

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss

@@ -23,7 +23,7 @@
     align-items: center;
 
     .page-config__item {
-      margin-right: 24px;
+      margin-right: 12px;
     }
   }
 

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss

@@ -4,6 +4,12 @@
   white-space: nowrap;
   line-height: $line-height--medium;
   font-weight: $font-weight--bold;
+  color: $colors--primary-blue-3;
+
+  &:hover {
+    color: $colors--primary-blue-3;
+    text-decoration: underline;
+  }
 
   &__unset {
     color: $tooltip-color;

pkg/ui/workspaces/cluster-ui/src/statementsDiagnostics/activateStatementDiagnosticsModal.scss

@@ -93,6 +93,11 @@
     margin-top: $spacing-small;
     margin-left: $spacing-medium;
 
+    .ant-alert-info {
+        background-color: $colors--primary-blue-alert;
+        border: none;
+    }
+
     &-icon {
       margin-top: $spacing-medium-small;
     }

pkg/ui/workspaces/cluster-ui/src/statementsDiagnostics/diagnosticStatusBadge.module.scss

@@ -1,5 +1,16 @@
+@import "src/core/index.module";
+
 .diagnostic-status-badge {
   &__content {
     width: fit-content;
   }
 }
+
+.tooltip--title a {
+    color: $colors--neutral-0;
+    text-decoration: underline;
+    &:hover {
+      opacity: 0.7;
+      color: $colors--neutral-0;
+    }
+}

pkg/ui/workspaces/cluster-ui/src/statementsDiagnostics/diagnosticStatusBadge.tsx

@@ -56,13 +56,13 @@ function mapStatusToDescription(diagnosticsStatus: DiagnosticStatuses) {
       );
     case "WAITING":
       return (
-        <div className={cx("tooltip__table--title")}>
+        <div className={cx("tooltip--title")}>
           <p>
             CockroachDB is waiting for the next SQL statement that matches this
             fingerprint.
           </p>
           <p>
-            {"When the most recent "}
+            {" When the most recent "}
             <Anchor href={statementDiagnostics} target="_blank">
               diagnostics
             </Anchor>

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss

@@ -51,6 +51,12 @@
   width: fit-content;
 }
 
+.reset-btn-area {
+  height: $line-height--larger;
+  display: flex;
+  align-items: center;
+}
+
 .app-filter-dropdown {
   /* 
     we are truncating the text in the filter, 

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -71,7 +71,6 @@ import ClearStats from "../sqlActivity/clearStats";
 import SQLActivityError from "../sqlActivity/errorComponent";
 import {
   TimeScaleDropdown,
-  defaultTimeScaleSelected,
   TimeScale,
   toDateRange,
 } from "../timeScaleDropdown";
@@ -135,6 +134,7 @@ export interface StatementsPageState {
   pagination: ISortedTablePagination;
   filters?: Filters;
   activeFilters?: number;
+  startRequest?: Date;
 }
 
 export type StatementsPageProps = StatementsPageDispatchProps &
@@ -183,6 +183,7 @@ export class StatementsPage extends React.Component<
         pageSize: 20,
         current: 1,
       },
+      startRequest: new Date(),
     };
     const stateFromHistory = this.getStateFromHistory();
     this.state = merge(defaultState, stateFromHistory);
@@ -250,6 +251,9 @@ export class StatementsPage extends React.Component<
     if (this.props.onTimeScaleChange) {
       this.props.onTimeScaleChange(ts);
     }
+    this.setState({
+      startRequest: new Date(),
+    });
   };
 
   resetPagination = (): void => {
@@ -270,9 +274,15 @@ export class StatementsPage extends React.Component<
   resetSQLStats = (): void => {
     const req = statementsRequestFromProps(this.props);
     this.props.resetSQLStats(req);
+    this.setState({
+      startRequest: new Date(),
+    });
   };
 
   componentDidMount(): void {
+    this.setState({
+      startRequest: new Date(),
+    });
     this.refreshStatements();
     this.props.refreshUserSQLRoles();
     if (!this.props.isTenant && !this.props.hasViewActivityRedactedRole) {
@@ -611,7 +621,12 @@ export class StatementsPage extends React.Component<
       ? []
       : unique(nodes.map(node => nodeRegions[node.toString()])).sort();
     const { filters, activeFilters } = this.state;
+
+    const timeNow = new Date();
+    const timeWaitingResponse =
+      (timeNow.getTime() - this.state.startRequest.getTime()) / 1000;
     const longLoadingMessage = isNil(this.props.statements) &&
+      timeWaitingResponse > 2 &&
       isNil(getValidErrorsList(this.props.statementsError)) && (
         <InlineAlert
           intent="info"
@@ -651,7 +666,9 @@ export class StatementsPage extends React.Component<
               setTimeScale={this.changeTimeScale}
             />
           </PageConfigItem>
-          <PageConfigItem className={commonStyles("separator")}>
+          <PageConfigItem
+            className={`${commonStyles("separator")} ${cx("reset-btn-area")} `}
+          >
             <ClearStats
               resetSQLStats={this.resetSQLStats}
               tooltipType="statement"

pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx

@@ -111,7 +111,7 @@ export const StatementTableCell = {
                   return {
                     name: (
                       <div className={cx("diagnostic-report-dropdown-option")}>
-                        {`Cancel current diagnostic request`}
+                        {`Cancel diagnostic request`}
                       </div>
                     ),
                     value: dr,

pkg/ui/workspaces/db-console/src/views/app/containers/layout/layout.styl

@@ -36,7 +36,7 @@ $subnav-background  = $background-color
     align-items center
 
     .page-config__item
-      margin-right 24px
+      margin-right 12px
 
   &__spread
     display flex

pkg/ui/workspaces/db-console/src/views/reports/containers/statementDiagnosticsHistory/index.tsx

@@ -209,14 +209,14 @@ class StatementDiagnosticsHistoryView extends React.Component<
     if (totalCount <= this.tablePageSize) {
       return (
         <div className="diagnostics-history-view__table-header">
-          <Text>{`${totalCount} traces`}</Text>
+          <Text>{`${totalCount} diagnostics bundles`}</Text>
         </div>
       );
     }
 
     return (
       <div className="diagnostics-history-view__table-header">
-        <Text>{`${this.tablePageSize} of ${totalCount} traces`}</Text>
+        <Text>{`${this.tablePageSize} of ${totalCount} diagnostics bundles`}</Text>
       </div>
     );
   };

pkg/ui/workspaces/db-console/src/views/shared/components/pageconfig/pageConfig.module.styl

@@ -34,7 +34,7 @@
     align-items center
 
     .page-config__item
-      margin-right 24px
+      margin-right 12px
 
   &__spread
     display flex