From 096c49a490c9004800e8fd7ab269fbd29ade94f7 Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Mon, 28 Aug 2023 12:33:16 -0400
Subject: [PATCH] ui: update metrics charts UX to show legend

Update Metrics charts UX to always show the legend. The
option to show as a tooltip is still available. Now
single lines can also be selected when clicking on its name
on the legend.

Epic: none

Release note (ui change): Always show the legend on Metrics charts,
allowing single lines to be selected.
---
 pkg/ui/pnpm-lock.yaml                            |  2 +-
 pkg/ui/workspaces/db-console/package.json        |  2 +-
 .../views/cluster/components/linegraph/index.tsx | 16 +++++++++++++---
 .../components/linegraph/linegraph.spec.tsx      |  1 +
 .../cluster/components/linegraph/linegraph.styl  |  2 +-
 .../db-console/src/views/cluster/util/graphs.ts  |  3 ++-
 6 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/pkg/ui/pnpm-lock.yaml b/pkg/ui/pnpm-lock.yaml
index 06603decda85..33b0fdc8eb0d 100644
--- a/pkg/ui/pnpm-lock.yaml
+++ b/pkg/ui/pnpm-lock.yaml
@@ -953,7 +953,7 @@ importers:
         specifier: ^2.8.15
         version: 2.8.15
       uplot:
-        specifier: ^1.6.8
+        specifier: ^1.6.19
         version: 1.6.19
       url-loader:
         specifier: 4.1.1
diff --git a/pkg/ui/workspaces/db-console/package.json b/pkg/ui/workspaces/db-console/package.json
index 4bd42439995f..ed5b1a47cdde 100644
--- a/pkg/ui/workspaces/db-console/package.json
+++ b/pkg/ui/workspaces/db-console/package.json
@@ -175,7 +175,7 @@
     "ts-loader": "^6.2.1",
     "typescript": "5.1.6",
     "uglify-js": "^2.8.15",
-    "uplot": "^1.6.8",
+    "uplot": "^1.6.19",
     "url-loader": "4.1.1",
     "us-atlas": "^1.0.2",
     "webpack": "^4.41.5",
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
index 3bf610baea14..e25e1129f3fb 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
@@ -66,6 +66,7 @@ export interface OwnProps extends MetricsDataComponentProps {
   hoverOff?: typeof hoverOff;
   hoverState?: HoverState;
   preCalcGraphSize?: boolean;
+  legendAsTooltip?: boolean;
 }
 
 export type LineGraphProps = OwnProps & WithTimezoneProps;
@@ -354,6 +355,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
         this.setNewTimeRange,
         () => this.xAxisDomain,
         () => this.yAxisDomain,
+        this.props.legendAsTooltip,
       );
 
       if (this.u) {
@@ -371,8 +373,15 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
   }
 
   render() {
-    const { title, subtitle, tooltip, data, tenantSource, preCalcGraphSize } =
-      this.props;
+    const {
+      title,
+      subtitle,
+      tooltip,
+      data,
+      tenantSource,
+      preCalcGraphSize,
+      legendAsTooltip,
+    } = this.props;
     if (!this.hasDataPoints(data) && isSecondaryTenant(tenantSource)) {
       return (
         <div className="linegraph-empty">
@@ -390,6 +399,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
         </div>
       );
     }
+    const legendClassName = legendAsTooltip ? "linegraph-tooltip" : "linegraph";
     return (
       <Visualization
         title={title}
@@ -398,7 +408,7 @@ export class InternalLineGraph extends React.Component<LineGraphProps, {}> {
         loading={!data}
         preCalcGraphSize={preCalcGraphSize}
       >
-        <div className="linegraph">
+        <div className={legendClassName}>
           <div ref={this.el} />
         </div>
       </Visualization>
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.spec.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.spec.tsx
index 7cf37f152656..be8529714340 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.spec.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.spec.tsx
@@ -162,6 +162,7 @@ describe("<LineGraph>", function () {
           util.NanoToMilli(mockProps.timeInfo.start.toNumber()),
           util.NanoToMilli(mockProps.timeInfo.end.toNumber()),
         ),
+      false,
     );
     instance.u = new uPlot(mockOptions);
     const setDataSpy = jest.spyOn(instance.u, "setData");
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.styl b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.styl
index 17d842de30af..dde672415eb8 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.styl
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/linegraph.styl
@@ -22,7 +22,7 @@ $viz-sides = 62px
     color gray
     text-decoration underline
 
-.linegraph
+.linegraph-tooltip
   height 100%
   .uplot
     display flex
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts b/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
index 1d9b11e9be36..bfd11d837c2c 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
@@ -88,6 +88,7 @@ export function configureUPlotLineChart(
   setMetricsFixedWindow: (startMillis: number, endMillis: number) => void,
   getLatestXAxisDomain: () => AxisDomain,
   getLatestYAxisDomain: () => AxisDomain,
+  legendAsTooltip: boolean,
 ): uPlot.Options {
   const formattedRaw = formatMetricData(metrics, data);
   // Copy palette over since we mutate it in the `series` function
@@ -225,7 +226,7 @@ export function configureUPlotLineChart(
         range: () => getLatestYAxisDomain().extent,
       },
     },
-    plugins: [tooltipPlugin()],
+    plugins: legendAsTooltip ? [tooltipPlugin()] : null,
     hooks: {
       // setSelect is a hook that fires when a selection is made on the graph
       // by dragging a range to zoom.