Merge #158546

158546: ui: add new cluster explorer page to advanced debug r=jasonlmfong a=jasonlmfong

This new page contains a new hexagon heatmap powered by d3.
This is used to display node activity like CPU percentage and write bytes.

This also features a uplot histogram for range level drill-down once a node is selected.
This histogram is similar to the existing BarGraphTimeSeries component.

Epic: None
Release note(ui): The cluster explorer page adds a new interactive way to visualize a cluster.

Co-authored-by: Jason Fong <[email protected]>

Author: craig[bot]

pkg/ui/pnpm-lock.yaml

@@ -17,9 +17,12 @@ import { Visualization } from "../visualization";
 
 import styles from "./bargraph.module.scss";
 import { getStackedBarOpts, stack } from "./bars";
+import { categoricalBarTooltipPlugin, BarMetadata } from "./plugins";
 
 const cx = classNames.bind(styles);
 
+export type { BarMetadata };
+
 export type BarGraphTimeSeriesProps = {
   alignedData?: AlignedData;
   colourPalette?: string[]; // Series colour palette.
@@ -113,3 +116,121 @@ export const BarGraphTimeSeries: React.FC<BarGraphTimeSeriesProps> = ({
     </Visualization>
   );
 };
+
+export type BarGraphDataPoint = {
+  label: string;
+  value: number;
+  databases?: string[];
+  tables?: string[];
+  indexes?: string[];
+};
+
+export type BarGraphProps = {
+  data: Array<BarGraphDataPoint>;
+  colourPalette?: string[];
+  preCalcGraphSize?: boolean;
+  title: string;
+  tooltip?: React.ReactNode;
+  yAxisUnits: AxisUnits;
+};
+
+// Simple bar graph component for categorical data
+export const BarGraph: React.FC<BarGraphProps> = ({
+  data,
+  colourPalette = ["#2196F3"],
+  preCalcGraphSize = true,
+  title,
+  tooltip,
+  yAxisUnits,
+}) => {
+  const graphRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!data || data.length === 0) return;
+
+    const xValues = data.map((_, i) => i);
+    const yValues = data.map(d => d.value);
+    const plotData: AlignedData = [xValues, yValues];
+
+    const yAxisDomain = calculateYAxisDomain(yAxisUnits, yValues);
+
+    // Extract labels and metadata for tooltip
+    const labels = data.map(d => d.label);
+    const metadata: BarMetadata[] = data.map(d => ({
+      databases: d.databases,
+      tables: d.tables,
+      indexes: d.indexes,
+    }));
+
+    // Standard uPlot bar chart configuration
+    const opts: Options = {
+      id: "chart",
+      class: cx("bargraph"),
+      width: 800,
+      height: 450,
+      legend: {
+        show: false,
+      },
+      cursor: {
+        points: {
+          show: false,
+        },
+      },
+      series: [
+        {},
+        {
+          label: "Value",
+          fill: colourPalette[0],
+          stroke: colourPalette[0],
+          paths: uPlot.paths.bars({ size: [0.9, 80] }),
+          points: { show: false },
+        },
+      ],
+      axes: [
+        {
+          // X-axis: categorical labels
+          values: (_u, splits) => splits.map(i => labels[Math.round(i)] || ""),
+        },
+        {
+          // Y-axis: numeric values with units
+          label: yAxisDomain.label,
+          values: (_u, vals) =>
+            vals.map(v => yAxisDomain.tickFormat(v as number)),
+          splits: () => [
+            yAxisDomain.extent[0],
+            ...yAxisDomain.ticks,
+            yAxisDomain.extent[1],
+          ],
+        },
+      ],
+      scales: {
+        x: {
+          range: () => [-0.5, data.length - 0.5],
+        },
+        y: {
+          range: () => [yAxisDomain.extent[0], yAxisDomain.extent[1]],
+        },
+      },
+      plugins: [categoricalBarTooltipPlugin(yAxisUnits, labels, metadata)],
+    };
+
+    const plot = new uPlot(opts, plotData, graphRef.current);
+
+    return () => {
+      plot?.destroy();
+    };
+  }, [data, yAxisUnits, colourPalette]);
+
+  return (
+    <Visualization
+      title={title}
+      loading={!data || data.length === 0}
+      preCalcGraphSize={preCalcGraphSize}
+      tooltip={tooltip}
+    >
+      <div className={cx("bargraph")}>
+        <div ref={graphRef} />
+      </div>
+    </Visualization>
+  );
+};

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx

@@ -101,6 +101,133 @@ function getFormattedValue(value: number, yAxisUnits: AxisUnits): string {
   }
 }
 
+export interface BarMetadata {
+  databases?: string[];
+  tables?: string[];
+  indexes?: string[];
+}
+
+// Tooltip plugin for categorical bar charts (non-time-series)
+export function categoricalBarTooltipPlugin(
+  yAxis: AxisUnits,
+  labels: string[],
+  metadata?: BarMetadata[],
+): Plugin {
+  const cursorToolTip = {
+    tooltip: document.createElement("div"),
+  };
+
+  function escapeHtml(str: string): string {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function setCursor(u: uPlot) {
+    const { tooltip } = cursorToolTip;
+    const { left = 0, idx } = u.cursor;
+
+    if (idx === null || idx === undefined || idx < 0 || idx >= labels.length) {
+      tooltip.style.display = "none";
+      return;
+    }
+
+    const label = labels[idx];
+    const value = u.data[1][idx];
+    const meta = metadata?.[idx];
+
+    // Build tooltip content
+    let content = `<div style="font-weight: bold; margin-bottom: 8px;">${escapeHtml(label)}</div>`;
+    content += `<div style="margin-bottom: 8px;">Value: ${getFormattedValue(value, yAxis)}</div>`;
+
+    // Add metadata if available
+    if (meta) {
+      if (meta.databases && meta.databases.length > 0) {
+        content += `<div style="margin-top: 8px;"><strong>Database${meta.databases.length > 1 ? "s" : ""}:</strong></div>`;
+        content += meta.databases
+          .map(db => `<div style="margin-left: 8px;">• ${escapeHtml(db)}</div>`)
+          .join("");
+      } else if (label.toLowerCase().includes("range")) {
+        content += `<div style="margin-top: 8px;"><strong>Database:</strong> System range</div>`;
+      }
+
+      if (meta.tables && meta.tables.length > 0) {
+        content += `<div style="margin-top: 8px;"><strong>Table${meta.tables.length > 1 ? "s" : ""}:</strong></div>`;
+        content += meta.tables
+          .map(
+            table =>
+              `<div style="margin-left: 8px;">• ${escapeHtml(table)}</div>`,
+          )
+          .join("");
+      }
+
+      if (meta.indexes && meta.indexes.length > 0) {
+        content += `<div style="margin-top: 8px;"><strong>Index${meta.indexes.length > 1 ? "es" : ""}:</strong></div>`;
+        content += meta.indexes
+          .map(
+            index =>
+              `<div style="margin-left: 8px;">• ${escapeHtml(index)}</div>`,
+          )
+          .join("");
+      }
+    }
+
+    tooltip.innerHTML = content;
+
+    // Position tooltip
+    const tooltipWidth = tooltip.offsetWidth;
+    const plotWidth = u.over.offsetWidth;
+    let tooltipLeft = left + 20;
+
+    // Adjust if tooltip goes off the right edge
+    if (tooltipLeft + tooltipWidth > plotWidth) {
+      tooltipLeft = left - tooltipWidth - 20;
+    }
+
+    tooltip.style.left = `${tooltipLeft}px`;
+    tooltip.style.top = `20px`;
+    tooltip.style.display = "";
+  }
+
+  function ready(u: uPlot) {
+    const plot = u.root.querySelector(".u-over");
+    const { tooltip } = cursorToolTip;
+
+    plot?.addEventListener("mouseleave", () => {
+      tooltip.style.display = "none";
+    });
+  }
+
+  function init(u: uPlot) {
+    const plot = u.root.querySelector(".u-over");
+    const { tooltip } = cursorToolTip;
+
+    tooltip.style.display = "none";
+    tooltip.style.pointerEvents = "none";
+    tooltip.style.position = "absolute";
+    tooltip.style.padding = "12px";
+    tooltip.style.minWidth = "150px";
+    tooltip.style.maxWidth = "350px";
+    tooltip.style.background = "#fff";
+    tooltip.style.borderRadius = "4px";
+    tooltip.style.boxShadow = "0 2px 4px rgba(0,0,0,0.1)";
+    tooltip.style.border = "1px solid #999";
+    tooltip.style.zIndex = "1000";
+    tooltip.style.fontSize = "12px";
+    tooltip.style.lineHeight = "1.4";
+
+    plot?.appendChild(tooltip);
+  }
+
+  return {
+    hooks: {
+      init,
+      ready,
+      setCursor,
+    },
+  };
+}
+
 // Tooltip legend plugin for bar charts.
 export function barTooltipPlugin(yAxis: AxisUnits, timezone: string): Plugin {
   const cursorToolTip = {

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/plugins.ts

@@ -5,3 +5,4 @@
 
 export * from "./visualization";
 export * from "./utils/domain";
+export * from "./bargraph";

pkg/ui/workspaces/cluster-ui/src/graphs/index.ts

@@ -38,6 +38,7 @@
     "d3-format": "^3.1.0",
     "d3-geo": "^3.1.1",
     "d3-geo-projection": "^4.0.0",
+    "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
@@ -101,6 +102,7 @@
     "@types/d3-drag": "^3.0.7",
     "@types/d3-format": "^3.0.4",
     "@types/d3-geo": "^3.1.0",
+    "@types/d3-interpolate": "^3.0.1",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-shape": "^3.1.7",

pkg/ui/workspaces/db-console/package.json

@@ -58,6 +58,7 @@ import { IndexDetailsPage } from "src/views/databases/indexDetailsPage";
 import Raft from "src/views/devtools/containers/raft";
 import RaftMessages from "src/views/devtools/containers/raftMessages";
 import RaftRanges from "src/views/devtools/containers/raftRanges";
+import ClusterExplorerPage from "src/views/explorer/explorer";
 import HotRangesPage from "src/views/hotRanges/index";
 import JobDetails from "src/views/jobs/jobDetails";
 import JobsPage from "src/views/jobs/jobsPage";
@@ -357,6 +358,13 @@ export const App: React.FC<AppProps> = (props: AppProps) => {
                           component={StatementInsightDetailsPage}
                         />
 
+                        {/* cluster explorer */}
+                        <Route
+                          exact
+                          path="/cluster-explorer"
+                          component={ClusterExplorerPage}
+                        />
+
                         {/* debug pages */}
                         <Route exact path="/debug" component={Debug} />
                         <Route