cluster-ui: tooltip fixes (cockroachdb#292)

before: in cluster-ui package we used legacy versions of tootips based on antd and with a bunch of code duplicates and hacks. after: used ui-components tooltip component, removed unneeded code and styles. also on process of work find out that barchats legend tooltips missing styles - added them.
koorosh · May 18, 2021 · fb45f99 · fb45f99
1 parent 68ee6be
commit fb45f99
Show file tree

Hide file tree

Showing 22 changed files with 207 additions and 392 deletions.
diff --git a/pkg/ui/cluster-ui/package.json b/pkg/ui/cluster-ui/package.json
@@ -29,7 +29,7 @@
     "@babel/runtime": "^7.12.13",
     "@cockroachlabs/crdb-protobuf-client": "^0.0.10-beta.0",
     "@cockroachlabs/icons": "0.3.0",
-    "@cockroachlabs/ui-components": "0.2.14-alpha.0",
+    "@cockroachlabs/ui-components": "0.2.18",
     "@popperjs/core": "^2.4.0",
     "@reduxjs/toolkit": "^1.5.0",
     "babel-polyfill": "^6.26.0",

diff --git a/pkg/ui/cluster-ui/src/barCharts/barChartFactory.tsx b/pkg/ui/cluster-ui/src/barCharts/barChartFactory.tsx
@@ -2,8 +2,7 @@ import { scaleLinear } from "d3-scale";
 import { extent as d3Extent } from "d3-array";
 import _ from "lodash";
 import React from "react";
-import { Tooltip } from "src/tooltip";
-import { Tooltip2 } from "src/tooltip2";
+import { Tooltip } from "@cockroachlabs/ui-components";
 import classNames from "classnames/bind";
 import styles from "./barCharts.module.scss";
 import { NumericStatLegend } from "./numericStatLegend";
@@ -56,9 +55,9 @@ export function barChartFactory<T>(
 
       if (options?.displayNoSamples ? options.displayNoSamples(d) : false) {
         return (
-          <Tooltip2
+          <Tooltip
             placement="bottom"
-            title={
+            content={
               <div className={cx("tooltip__table--title")}>
                 <p>
                   Either the statement sample rate is set to 0, disabling
@@ -70,7 +69,7 @@ export function barChartFactory<T>(
             }
           >
             no samples
-          </Tooltip2>
+          </Tooltip>
         );
       }
 
@@ -119,7 +118,7 @@ export function barChartFactory<T>(
         );
         return (
           <div className={className}>
-            <Tooltip text={titleText} short>
+            <Tooltip content={titleText} style="light">
               <div className={cx("bar-chart__label", options?.classes?.label)}>
                 {formatter(getTotal(d))}
               </div>

diff --git a/pkg/ui/cluster-ui/src/barCharts/barCharts.module.scss b/pkg/ui/cluster-ui/src/barCharts/barCharts.module.scss
@@ -1,4 +1,4 @@
-@import '../core/index.module';
+@import "../core/index.module";
 
 .bar-chart {
   height: 14px;
@@ -42,43 +42,104 @@
     }
   }
 
-  .count-first-try, .count-total, .count-retry, .count-max-retries {
+  .count-first-try,
+  .count-total,
+  .count-retry,
+  .count-max-retries {
     border-radius: 3px;
     position: absolute;
     left: 40px;
   }
 
-  .count-first-try, .count-total {
+  .count-first-try,
+  .count-total {
     background-color: $colors--neutral-4;
   }
-  .count-retry, .count-max-retries {
+  .count-retry,
+  .count-max-retries {
     background-color: $colors--alert;
   }
 
-  .rows, .rows-read, .bytes-read, .max-mem-usage, .network-bytes {
+  .rows,
+  .rows-read,
+  .bytes-read,
+  .max-mem-usage,
+  .network-bytes {
     background-color: $colors--neutral-4;
     border-radius: 3px;
   }
 
-  .rows-dev, .rows-read-dev, .bytes-read-dev, .contention-dev, .max-mem-usage-dev, .network-bytes-dev {
+  .rows-dev,
+  .rows-read-dev,
+  .bytes-read-dev,
+  .contention-dev,
+  .max-mem-usage-dev,
+  .network-bytes-dev {
     background-color: $colors--primary-blue-3;
   }
 
   .bar-chart {
-    &__parse, &__plan, &__run, &__overhead, &__overall {
+    &__parse,
+    &__plan,
+    &__run,
+    &__overhead,
+    &__overall {
       background-color: $colors--neutral-4;
     }
   }
 
   &-red {
     .bar-chart {
-      &__parse, &__plan, &__run, &__overhead, &__overall {
+      &__parse,
+      &__plan,
+      &__run,
+      &__overhead,
+      &__overall {
         background-color: $colors--functional-red-2;
       }
     }
   }
 
-  &__parse-dev, &__plan-dev, &__run-dev, &__overhead-dev, &__overall-dev {
+  &__parse-dev,
+  &__plan-dev,
+  &__run-dev,
+  &__overhead-dev,
+  &__overall-dev {
     background-color: $colors--primary-blue-3;
   }
+
+  .numeric-stat-legend {
+    white-space: nowrap;
+    width: 282px;
+    font-family: $font-family--semi-bold;
+    font-size: $font-size--small;
+    line-height: 1.67;
+    letter-spacing: 0.3px;
+    color: $adminui-grey-1;
+    font-weight: 600;
+
+    th {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    td {
+      text-align: right;
+    }
+    &__bar {
+      width: 41px;
+      border-radius: 10px;
+      margin-right: 14px;
+
+      &--mean {
+        height: 13px;
+        background-color: $grey-light;
+      }
+      &--dev {
+        height: 3px;
+        background-color: $colors--primary-blue-3;
+      }
+    }
+  }
 }
diff --git a/pkg/ui/cluster-ui/src/barCharts/genericBarChart.tsx b/pkg/ui/cluster-ui/src/barCharts/genericBarChart.tsx
@@ -4,7 +4,7 @@ import { scaleLinear } from "d3-scale";
 import { format as d3Format } from "d3-format";
 
 import { stdDevLong } from "src/util";
-import { Tooltip } from "src/tooltip";
+import { Tooltip } from "@cockroachlabs/ui-components";
 import { NumericStat } from "../util";
 import { clamp, longToInt, normalizeClosedDomain } from "./utils";
 import styles from "./barCharts.module.scss";
@@ -73,7 +73,7 @@ export function genericBarChart(
     const spread = scale(sd + (sd > mean ? mean : sd));
     const title = renderNumericStatLegend(count, mean, sd, format);
     return (
-      <Tooltip text={title} short>
+      <Tooltip content={title} style="light">
         <div className={cx("bar-chart", "bar-chart--breakdown")}>
           <div className={cx("bar-chart__label")}>{format(mean)}</div>
           <div className={cx("bar-chart__multiplebars")}>

diff --git a/pkg/ui/cluster-ui/src/barCharts/latencyBreakdown.tsx b/pkg/ui/cluster-ui/src/barCharts/latencyBreakdown.tsx
@@ -4,7 +4,7 @@ import { stdDevLong } from "src/util";
 import { NumericStatLegend } from "./numericStatLegend";
 import { scaleLinear } from "d3-scale";
 import { Duration } from "src/util/format";
-import { Tooltip } from "src/tooltip";
+import { Tooltip } from "@cockroachlabs/ui-components";
 import classNames from "classnames/bind";
 import styles from "./barCharts.module.scss";
 import { clamp, normalizeClosedDomain } from "./utils";
@@ -53,7 +53,7 @@ export function latencyBreakdown(s: StatementStatistics) {
         format,
       );
       return (
-        <Tooltip text={title} short>
+        <Tooltip content={title} style="light">
           <div className={cx("bar-chart", "bar-chart--breakdown")}>
             <div className={cx("bar-chart__label")}>
               {Duration(parseMean * 1e9)}
@@ -88,7 +88,7 @@ export function latencyBreakdown(s: StatementStatistics) {
       const spread = scale(planSd + (planSd > planMean ? planMean : planSd));
       const title = NumericStatLegend(s.stats.count, planMean, planSd, format);
       return (
-        <Tooltip text={title} short>
+        <Tooltip content={title} style="light">
           <div className={cx("bar-chart", "bar-chart--breakdown")}>
             <div className={cx("bar-chart__label")}>
               {Duration(planMean * 1e9)}
@@ -127,7 +127,7 @@ export function latencyBreakdown(s: StatementStatistics) {
       const spread = scale(runSd + (runSd > runMean ? runMean : runSd));
       const title = NumericStatLegend(s.stats.count, runMean, runSd, format);
       return (
-        <Tooltip text={title} short>
+        <Tooltip content={title} style="light">
           <div className={cx("bar-chart", "bar-chart--breakdown")}>
             <div className={cx("bar-chart__label")}>
               {Duration(runMean * 1e9)}
@@ -173,7 +173,7 @@ export function latencyBreakdown(s: StatementStatistics) {
         format,
       );
       return (
-        <Tooltip text={title} short>
+        <Tooltip content={title} style="light">
           <div className={cx("bar-chart", "bar-chart--breakdown")}>
             <div className={cx("bar-chart__label")}>
               {Duration(overheadMean * 1e9)}
@@ -221,7 +221,7 @@ export function latencyBreakdown(s: StatementStatistics) {
         format,
       );
       return (
-        <Tooltip text={title} short>
+        <Tooltip content={title} style="light">
           <div className={cx("bar-chart", "bar-chart--breakdown")}>
             <div className={cx("bar-chart__label")}>
               {Duration(overallMean * 1e9)}

diff --git a/pkg/ui/cluster-ui/src/index.ts b/pkg/ui/cluster-ui/src/index.ts
@@ -24,7 +24,5 @@ export * from "./table";
 export * from "./store";
 export * from "./transactionsPage";
 export * from "./text";
-export * from "./tooltip";
-export * from "./tooltip2";
 export { util, api };
 export * from "./sessions";
diff --git a/pkg/ui/cluster-ui/src/sessions/sessionsTable.tsx b/pkg/ui/cluster-ui/src/sessions/sessionsTable.tsx
@@ -34,7 +34,7 @@ import {
   DropdownOption as DropdownItem,
 } from "src/dropdown/dropdown";
 import { Button } from "src/button/button";
-import { Tooltip2 } from "src/tooltip2";
+import { Tooltip } from "@cockroachlabs/ui-components";
 
 const cx = classNames.bind(styles);
 
@@ -65,32 +65,32 @@ const SessionLink = (props: { session: ISession; onClick?: () => void }) => {
 
   return (
     <div className={cx("sessionLink")}>
-      <Tooltip2
+      <Tooltip
         placement="bottom"
-        tableTitle
-        title={<>Session started at {start.format(DATE_FORMAT)}</>}
+        style="tableTitle"
+        content={<>Session started at {start.format(DATE_FORMAT)}</>}
       >
         <Link onClick={onClick} to={`${base}/${encodeURIComponent(sessionID)}`}>
           <div>{start.fromNow(true)}</div>
         </Link>
-      </Tooltip2>
+      </Tooltip>
     </div>
   );
 };
 
 const AgeLabel = (props: { start: Moment; thingName: string }) => {
   return (
-    <Tooltip2
+    <Tooltip
       placement="bottom"
-      tableTitle
-      title={
+      style="tableTitle"
+      content={
         <>
           {props.thingName} started at {props.start.format(DATE_FORMAT)}
         </>
       }
     >
       {props.start.fromNow(true)}
-    </Tooltip2>
+    </Tooltip>
   );
 };