Merge cockroachdb#110809

110809: ui: update metrics charts UX to show legend r=maryliag a=maryliag 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 https://www.loom.com/share/e5ca4c678e514f0baad5f3a4c3bcfce4 Before (as tooltip) <img width="1004" alt="Screenshot 2023-09-18 at 10 17 55 AM" src="https://github.com/cockroachdb/cockroach/assets/1017486/ff642438-bc5e-4af7-a64f-67267fc74435"> After (always showing) <img width="995" alt="Screenshot 2023-09-18 at 10 16 39 AM" src="https://github.com/cockroachdb/cockroach/assets/1017486/60d56376-5f7f-467c-a3b8-1bcf3972fa50"> After (single selection) <img width="996" alt="Screenshot 2023-09-18 at 10 17 05 AM" src="https://github.com/cockroachdb/cockroach/assets/1017486/1715d3a6-a179-419f-9f6c-b022aa1ec1fb"> Release note (ui change): Always show the legend on Metrics charts, allowing single lines to be selected. Co-authored-by: maryliag <[email protected]>
kathancox · Sep 20, 2023 · bcac3fe · bcac3fe
2 parents 39dc158 + 096c49a
commit bcac3fe
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 7 deletions.
diff --git a/pkg/ui/pnpm-lock.yaml b/pkg/ui/pnpm-lock.yaml
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.