@skyhook-io/k8s-ui 1.14.4 → 1.14.5

package/src/components/charts/PrometheusChartsView.tsx

@@ -1,10 +1,10 @@
-import { clsx } from 'clsx'
-import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
-import { AreaChart } from './AreaChart'
-import { PaneLoader } from '../ui/PaneLoader'
-import { MetricsSummary } from './MetricsSummary'
-import { SeriesLegend } from './SeriesLegend'
-import type { TimeSeries, ReferenceLine } from './types'
+import { clsx } from "clsx";
+import { BarChart3, Wifi, WifiOff, Loader2 } from "lucide-react";
+import { AreaChart } from "./AreaChart";
+import { PaneLoader } from "../ui/PaneLoader";
+import { MetricsSummary } from "./MetricsSummary";
+import { SeriesLegend } from "./SeriesLegend";
+import type { TimeSeries, ReferenceLine } from "./types";
 
 // Pure presentational Prometheus charts view, shared between radar's WorkloadView
 // and Radar Hub's Application metrics tab. It owns NO data fetching — the host
@@ -13,73 +13,160 @@ import type { TimeSeries, ReferenceLine } from './types'
 // per-cluster tunnel fetches. Built on the AreaChart/MetricsSummary/SeriesLegend
 // primitives already in this package.
 
-export type PrometheusMetricCategory = 'cpu' | 'memory' | 'network_rx' | 'network_tx' | 'filesystem' | 'restarts'
-export type PrometheusTimeRange = '10m' | '30m' | '1h' | '3h' | '6h' | '12h' | '24h' | '48h' | '7d' | '14d'
+export type PrometheusMetricCategory =
+  "cpu" | "memory" | "network_rx" | "network_tx" | "filesystem" | "restarts";
+export type PrometheusTimeRange =
+  "10m" | "30m" | "1h" | "3h" | "6h" | "12h" | "24h" | "48h" | "7d" | "14d";
 
 export interface MetricCategoryDef {
-  key: PrometheusMetricCategory
-  label: string
-  color: string // tailwind text class for the summary's current value
-  chartColor: string // hex for the SVG line
-  fillColor: string // hex + alpha for the SVG fill
+  key: PrometheusMetricCategory;
+  label: string;
+  color: string; // tailwind text class for the summary's current value
+  chartColor: string; // hex for the SVG line
+  fillColor: string; // hex + alpha for the SVG fill
 }
 
 export const WORKLOAD_METRIC_CATEGORIES: MetricCategoryDef[] = [
-  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
-  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
-  { key: 'network_rx', label: 'Net RX', color: 'text-emerald-400', chartColor: '#34d399', fillColor: '#34d39922' },
-  { key: 'network_tx', label: 'Net TX', color: 'text-orange-400', chartColor: '#fb923c', fillColor: '#fb923c22' },
-  { key: 'filesystem', label: 'Disk I/O', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
-]
+  {
+    key: "cpu",
+    label: "CPU",
+    color: "text-blue-400",
+    chartColor: "#60a5fa",
+    fillColor: "#60a5fa22",
+  },
+  {
+    key: "memory",
+    label: "Memory",
+    color: "text-purple-400",
+    chartColor: "#c084fc",
+    fillColor: "#c084fc22",
+  },
+  {
+    key: "network_rx",
+    label: "Net RX",
+    color: "text-emerald-400",
+    chartColor: "#34d399",
+    fillColor: "#34d39922",
+  },
+  {
+    key: "network_tx",
+    label: "Net TX",
+    color: "text-orange-400",
+    chartColor: "#fb923c",
+    fillColor: "#fb923c22",
+  },
+  {
+    key: "filesystem",
+    label: "Disk I/O",
+    color: "text-amber-400",
+    chartColor: "#fbbf24",
+    fillColor: "#fbbf2422",
+  },
+];
 
 export const NODE_METRIC_CATEGORIES: MetricCategoryDef[] = [
-  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
-  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
-  { key: 'filesystem', label: 'Disk', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
-]
-
-export const METRIC_TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
-  { value: '10m', label: '10m' },
-  { value: '30m', label: '30m' },
-  { value: '1h', label: '1h' },
-  { value: '3h', label: '3h' },
-  { value: '6h', label: '6h' },
-  { value: '12h', label: '12h' },
-  { value: '24h', label: '24h' },
-  { value: '7d', label: '7d' },
-]
+  {
+    key: "cpu",
+    label: "CPU",
+    color: "text-blue-400",
+    chartColor: "#60a5fa",
+    fillColor: "#60a5fa22",
+  },
+  {
+    key: "memory",
+    label: "Memory",
+    color: "text-purple-400",
+    chartColor: "#c084fc",
+    fillColor: "#c084fc22",
+  },
+  {
+    key: "filesystem",
+    label: "Disk",
+    color: "text-amber-400",
+    chartColor: "#fbbf24",
+    fillColor: "#fbbf2422",
+  },
+];
+
+export const METRIC_TIME_RANGES: {
+  value: PrometheusTimeRange;
+  label: string;
+}[] = [
+  { value: "10m", label: "10m" },
+  { value: "30m", label: "30m" },
+  { value: "1h", label: "1h" },
+  { value: "3h", label: "3h" },
+  { value: "6h", label: "6h" },
+  { value: "12h", label: "12h" },
+  { value: "24h", label: "24h" },
+  { value: "7d", label: "7d" },
+];
 
 const SUPPORTED_KINDS = new Set([
-  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
-])
+  "Pod",
+  "Deployment",
+  "StatefulSet",
+  "DaemonSet",
+  "ReplicaSet",
+  "Job",
+  "CronJob",
+  "Node",
+]);
 
 export interface PrometheusResourceMetricsResult {
-  unit: string
-  result?: { series?: TimeSeries[] }
-  query?: string
-  hint?: string
+  unit: string;
+  result?: { series?: TimeSeries[] };
+  query?: string;
+  hint?: string;
+  /**
+   * For workload kinds, the pods the chart covers: the ones the workload
+   * controls now, established by controller ownership. podsTotal is the
+   * workload's full set when the query's cap cut the list.
+   */
+  pods?: number;
+  podsTotal?: number;
+}
+
+/**
+ * One line under a workload chart saying which pods it covers. Membership is
+ * the population at load time, so a pod replaced earlier in the window is not
+ * in the chart — worth saying, because the line still spans the whole window.
+ */
+export function describePodCoverage(
+  metrics: PrometheusResourceMetricsResult,
+): string | undefined {
+  const pods = metrics.pods;
+  if (pods === undefined) return undefined;
+  // Zero is a fact about the workload, not a failure to establish one: a
+  // workload Radar cannot resolve pods for reports an error instead of a
+  // count, so this line never stands for "Radar could not tell".
+  if (pods === 0)
+    return "This workload has no pods running, so there is nothing to chart";
+  const total = metrics.podsTotal ?? pods;
+  const count = total > pods ? `first ${pods} of ${total}` : `${pods}`;
+  return `${count} current pod${total === 1 ? "" : "s"}; pods replaced during the window are not included`;
 }
 
 export interface PrometheusChartsViewProps {
-  kind: string
+  kind: string;
   /** When false (embedded in an Overview), hide entirely when not connected or no data. */
-  showEmptyState?: boolean
+  showEmptyState?: boolean;
   // Connection status (host-provided)
-  statusLoading: boolean
-  isConnected: boolean
-  statusError?: string
-  onConnect: () => void
-  connecting: boolean
+  statusLoading: boolean;
+  isConnected: boolean;
+  statusError?: string;
+  onConnect: () => void;
+  connecting: boolean;
   // Selection (controlled by host)
-  category: PrometheusMetricCategory
-  onCategoryChange: (c: PrometheusMetricCategory) => void
-  range: PrometheusTimeRange
-  onRangeChange: (r: PrometheusTimeRange) => void
+  category: PrometheusMetricCategory;
+  onCategoryChange: (c: PrometheusMetricCategory) => void;
+  range: PrometheusTimeRange;
+  onRangeChange: (r: PrometheusTimeRange) => void;
   // Metrics (host-fetched)
-  metrics?: PrometheusResourceMetricsResult
-  metricsLoading: boolean
-  metricsError?: Error | null
-  referenceLines?: ReferenceLine[]
+  metrics?: PrometheusResourceMetricsResult;
+  metricsLoading: boolean;
+  metricsError?: Error | null;
+  referenceLines?: ReferenceLine[];
 }
 
 export function PrometheusChartsView({
@@ -99,23 +186,26 @@ export function PrometheusChartsView({
   metricsError,
   referenceLines,
 }: PrometheusChartsViewProps) {
-  const categories = kind === 'Node' ? NODE_METRIC_CATEGORIES : WORKLOAD_METRIC_CATEGORIES
-  const isSupported = SUPPORTED_KINDS.has(kind)
-  const activeCategoryDef = categories.find((c) => c.key === category) || categories[0]
-  const series = metrics?.result?.series ?? []
+  const categories =
+    kind === "Node" ? NODE_METRIC_CATEGORIES : WORKLOAD_METRIC_CATEGORIES;
+  const isSupported = SUPPORTED_KINDS.has(kind);
+  const activeCategoryDef =
+    categories.find((c) => c.key === category) || categories[0];
+  const series = metrics?.result?.series ?? [];
+  const coverageNote = metrics ? describePodCoverage(metrics) : undefined;
 
-  if (!isSupported) return null
+  if (!isSupported) return null;
 
   if (statusLoading) {
-    if (!showEmptyState) return null
+    if (!showEmptyState) return null;
     return (
       <PaneLoader label="Checking Prometheus availability…" className="py-12" />
-    )
+    );
   }
 
   if (!showEmptyState) {
-    if (!isConnected) return null
-    if (!metricsLoading && !metricsError && !series.length) return null
+    if (!isConnected) return null;
+    if (!metricsLoading && !metricsError && !series.length) return null;
   }
 
   if (!isConnected) {
@@ -123,9 +213,12 @@ export function PrometheusChartsView({
       <div className="flex flex-col items-center justify-center gap-4 py-12">
         <WifiOff className="h-10 w-10 text-theme-text-tertiary" />
         <div className="text-center">
-          <p className="mb-1 text-sm text-theme-text-secondary">Prometheus not connected</p>
+          <p className="mb-1 text-sm text-theme-text-secondary">
+            Prometheus not connected
+          </p>
           <p className="mb-4 text-xs text-theme-text-tertiary">
-            {statusError || 'Connect to view historical CPU, memory, and network metrics'}
+            {statusError ||
+              "Connect to view historical CPU, memory, and network metrics"}
           </p>
           <button
             type="button"
@@ -133,12 +226,16 @@ export function PrometheusChartsView({
             disabled={connecting}
             className="btn-brand inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
           >
-            {connecting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Wifi className="h-4 w-4" />}
+            {connecting ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Wifi className="h-4 w-4" />
+            )}
             Discover Prometheus
           </button>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -153,10 +250,10 @@ export function PrometheusChartsView({
               type="button"
               onClick={() => onCategoryChange(cat.key)}
               className={clsx(
-                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
+                "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
                 category === cat.key
-                  ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
-                  : 'text-theme-text-tertiary hover:bg-theme-elevated/50 hover:text-theme-text-secondary',
+                  ? "bg-theme-elevated text-theme-text-primary shadow-sm"
+                  : "text-theme-text-tertiary hover:bg-theme-elevated/50 hover:text-theme-text-secondary",
               )}
             >
               {cat.label}
@@ -186,7 +283,11 @@ export function PrometheusChartsView({
           </div>
         ) : series.length ? (
           <div className="flex h-full flex-col gap-4">
-            <MetricsSummary series={series} unit={metrics!.unit} currentColorClass={activeCategoryDef.color} />
+            <MetricsSummary
+              series={series}
+              unit={metrics!.unit}
+              currentColorClass={activeCategoryDef.color}
+            />
             <div className="min-h-0 flex-1">
               <AreaChart
                 series={series}
@@ -196,15 +297,31 @@ export function PrometheusChartsView({
                 referenceLines={referenceLines}
               />
             </div>
-            {series.length > 1 && <SeriesLegend series={series} color={activeCategoryDef.chartColor} />}
+            {series.length > 1 && (
+              <SeriesLegend
+                series={series}
+                color={activeCategoryDef.chartColor}
+              />
+            )}
+            {coverageNote && (
+              <p className="text-xs text-theme-text-tertiary">{coverageNote}</p>
+            )}
           </div>
         ) : (
           <div className="flex h-full flex-col items-center justify-center text-theme-text-tertiary">
             <BarChart3 className="mb-2 h-8 w-8 opacity-40" />
             <p className="text-sm">No data for this time range</p>
             <p className="mt-1 text-xs text-theme-text-quaternary">
-              Try a different time range or check that metrics are being collected
+              Try a different time range or check that metrics are being
+              collected
             </p>
+            {/* An empty chart is where the pod set matters most: it separates
+                "these pods reported nothing" from "we charted the wrong pods". */}
+            {coverageNote && (
+              <p className="mt-2 max-w-lg text-center text-xs text-theme-text-tertiary">
+                {coverageNote}
+              </p>
+            )}
             {metrics?.hint && (
               <p className="mt-3 w-full max-w-lg rounded border border-yellow-500/30 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-700 dark:text-yellow-400">
                 {metrics.hint}
@@ -224,5 +341,5 @@ export function PrometheusChartsView({
         )}
       </div>
     </div>
-  )
+  );
 }

package/src/components/charts/SeriesLegend.tsx

@@ -1,10 +1,15 @@
-import { seriesColor } from './colors'
+import { seriesColor, seriesDisplayLabels } from './colors'
 import type { TimeSeries } from './types'
 
 // Caps visible entries to match AreaChart's SERIES_COLORS length; extras
 // collapse to "+N more".
-export function SeriesLegend({ series, color }: { series: TimeSeries[]; color: string }) {
-  const labels = series.map((s, i) => s.labels.pod || s.labels.instance || `series-${i}`)
+export function SeriesLegend({ series, color, seriesLabels }: {
+  series: TimeSeries[]
+  color: string
+  /** Display name per series, parallel to `series`; defaults to label-derived names. */
+  seriesLabels?: string[]
+}) {
+  const labels = seriesLabels ?? seriesDisplayLabels(series)
   return (
     <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
       {series.slice(0, 10).map((_, i) => {

package/src/components/charts/annotations.ts

@@ -0,0 +1,59 @@
+import type { ChartAnnotation } from './types'
+
+export interface PlacedAnnotation {
+  annotation: ChartAnnotation
+  x: number
+  /** Left edge of the label pill, kept inside the plot. */
+  labelX: number
+  /** Stacking row for the label pill; 0 is the top row. */
+  row: number
+  labelText: string
+  labelWidth: number
+  /** True when the label could not find a free row and only the line renders. */
+  labelHidden: boolean
+}
+
+export const ANNOTATION_LABEL_MAX_CHARS = 28
+export const ANNOTATION_LABEL_ROWS = 3
+const LABEL_GAP = 6
+
+export function truncateAnnotationLabel(label: string): string {
+  return label.length > ANNOTATION_LABEL_MAX_CHARS
+    ? `${label.slice(0, ANNOTATION_LABEL_MAX_CHARS - 1)}…`
+    : label
+}
+
+/**
+ * Positions annotation labels so none overlap: markers are sorted by time and
+ * each label takes the first row whose previous label ends before it starts,
+ * shifting left only as far as the plot edge allows. A label that fits no row
+ * is hidden; its line still renders and its text remains in the hover tooltip.
+ */
+export function layoutAnnotations(
+  annotations: readonly ChartAnnotation[],
+  toX: (timestamp: number) => number,
+  domain: { minTs: number; maxTs: number },
+  plot: { left: number; right: number },
+): PlacedAnnotation[] {
+  const inWindow = annotations
+    .filter(a => Number.isFinite(a.timestamp) && a.timestamp >= domain.minTs && a.timestamp <= domain.maxTs)
+    .map(a => ({ annotation: a, x: toX(a.timestamp) }))
+    .sort((a, b) => a.x - b.x)
+  const rowEnds: number[] = []
+  return inWindow.map(({ annotation, x }) => {
+    const labelText = truncateAnnotationLabel(annotation.label)
+    const labelWidth = labelText.length * 6.5 + 10
+    const start = Math.max(plot.left, Math.min(plot.right - labelWidth, x + 4))
+    let row = rowEnds.findIndex(end => end + LABEL_GAP <= start)
+    if (row === -1) {
+      if (rowEnds.length >= ANNOTATION_LABEL_ROWS) {
+        return { annotation, x, labelX: start, row: -1, labelText, labelWidth, labelHidden: true }
+      }
+      row = rowEnds.length
+      rowEnds.push(start + labelWidth)
+    } else {
+      rowEnds[row] = start + labelWidth
+    }
+    return { annotation, x, labelX: start, row, labelText, labelWidth, labelHidden: false }
+  })
+}

package/src/components/charts/axis.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { chartLayout, integerAxisTop, yAxisValues } from './axis'
+
+describe('integer axes', () => {
+  it('ends a count axis on a whole step that reaches the maximum', () => {
+    expect(integerAxisTop(0, 4)).toBe(1)
+    expect(integerAxisTop(1, 4)).toBe(1)
+    expect(integerAxisTop(3, 4)).toBe(3)
+    expect(integerAxisTop(18, 4)).toBe(20)
+    expect(integerAxisTop(250, 4)).toBe(300)
+    expect(integerAxisTop(1.1, 4)).toBe(2)
+    expect(integerAxisTop(18, 1)).toBe(20)
+    expect(integerAxisTop(7, 1)).toBe(10)
+  })
+
+  it('never yields fractional ticks on an integer axis', () => {
+    expect(yAxisValues(0, 1, 4, true)).toEqual([0, 1])
+    expect(yAxisValues(0, 3, 4, true)).toEqual([0, 1, 2, 3])
+    expect(yAxisValues(0, 20, 4, true)).toEqual([0, 5, 10, 15, 20])
+    expect(yAxisValues(0, 20, 1, true)).toEqual([0, 20])
+    expect(yAxisValues(0, 1.1, 4, false)).toEqual([0, 0.275, 0.55, 0.8250000000000001, 1.1])
+  })
+
+  it('has a compact layout with two ticks per axis and larger text', () => {
+    const full = chartLayout(false)
+    const compact = chartLayout(true)
+    expect([full.yIntervals, full.xIntervals, full.fontSize]).toEqual([4, 6, 11])
+    expect([compact.yIntervals, compact.xIntervals]).toEqual([1, 1])
+    expect(compact.fontSize).toBeGreaterThan(full.fontSize)
+    expect(compact.height / compact.width).toBeGreaterThan(full.height / full.width)
+  })
+})

package/src/components/charts/axis.ts

@@ -0,0 +1,60 @@
+// Axis helpers shared by the chart's full and compact layouts. Pure so the
+// tick choices can be tested without rendering.
+
+export interface ChartLayout {
+  width: number
+  height: number
+  marginLeft: number
+  marginRight: number
+  marginTop: number
+  marginBottom: number
+  fontSize: number
+  /** Number of Y intervals between the lowest and highest tick. */
+  yIntervals: number
+  /** Number of X intervals between the first and last tick. */
+  xIntervals: number
+}
+
+// The compact layout trades tick density for legible text: a 400-unit
+// viewBox scaled into a ~280px pane keeps 14-unit text near 10px, where the
+// full layout's 11-unit text in a 1000-unit viewBox would be 3px.
+export function chartLayout(compact: boolean): ChartLayout {
+  return compact
+    ? { width: 400, height: 260, marginLeft: 60, marginRight: 14, marginTop: 12, marginBottom: 28, fontSize: 14, yIntervals: 1, xIntervals: 1 }
+    : { width: 1000, height: 300, marginLeft: 84, marginRight: 40, marginTop: 10, marginBottom: 30, fontSize: 11, yIntervals: 4, xIntervals: 6 }
+}
+
+export function isCountUnit(unit: string): boolean {
+  return unit === 'count' || unit === 'restarts'
+}
+
+/**
+ * Top of an integer axis: the smallest 1/2/5×10ⁿ step that reaches `max`
+ * within `intervals` ticks, rounded up to a whole step. `max` 0 or 1 gives 1,
+ * 18 gives 20 (step 5), 3 gives 3 (step 1).
+ */
+export function integerAxisTop(max: number, intervals: number): number {
+  const target = Math.max(1, Math.ceil(max))
+  const steps = Math.max(1, intervals)
+  let magnitude = 1
+  for (;;) {
+    for (const base of [1, 2, 5]) {
+      const step = base * magnitude
+      if (step * steps >= target) return step * Math.ceil(target / step)
+    }
+    magnitude *= 10
+  }
+}
+
+/** Tick values from yMin to yMax; integer axes never produce fractional ticks. */
+export function yAxisValues(yMin: number, yMax: number, intervals: number, integer: boolean): number[] {
+  if (integer && yMin === 0) {
+    const step = yMax / intervals
+    const wholeStep = Number.isInteger(step) ? step : Math.max(1, Math.ceil(step))
+    const values: number[] = []
+    for (let value = 0; value <= yMax; value += wholeStep) values.push(value)
+    if (values[values.length - 1] !== yMax) values.push(yMax)
+    return values
+  }
+  return Array.from({ length: intervals + 1 }, (_, i) => yMin + ((yMax - yMin) / intervals) * i)
+}

package/src/components/charts/colors.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { seriesDisplayLabels } from './colors'
+
+describe('seriesDisplayLabels', () => {
+  it('prefers pod, instance or node labels when they are distinct', () => {
+    expect(seriesDisplayLabels([
+      { labels: { pod: 'api-a', container: 'api' } },
+      { labels: { instance: '10.0.0.2:9100' } },
+      { labels: { node: 'n1' } },
+    ])).toEqual(['api-a', '10.0.0.2:9100', 'n1'])
+  })
+
+  it('shows every label when the preferred label is missing or shared', () => {
+    expect(seriesDisplayLabels([
+      { labels: { container: 'api' } },
+      { labels: { container: 'envoy' } },
+    ])).toEqual(['container=api', 'container=envoy'])
+    expect(seriesDisplayLabels([
+      { labels: { pod: 'api-a', container: 'api' } },
+      { labels: { pod: 'api-a', container: 'envoy' } },
+    ])).toEqual(['pod=api-a, container=api', 'pod=api-a, container=envoy'])
+  })
+
+  it('falls back to a positional name for an unlabelled series', () => {
+    expect(seriesDisplayLabels([{ labels: {} }, { labels: { pod: 'a' } }])).toEqual(['series-0', 'a'])
+  })
+})

package/src/components/charts/colors.ts

@@ -22,6 +22,29 @@ export function seriesFill(index: number, fallback: string): string {
   return (SERIES_COLORS[index % SERIES_COLORS.length] ?? fallback) + '22'
 }
 
+const PREFERRED_SERIES_LABELS = ['pod', 'instance', 'node'] as const
+
+function allLabels(labels: Record<string, string>): string {
+  return Object.entries(labels).map(([key, value]) => `${key}=${value}`).join(', ')
+}
+
+/**
+ * One display name per series. A pod, instance or node label is the name
+ * operators recognise, but an aggregation may drop it or two series may
+ * share it (one per container); then every label is shown so no two series
+ * become indistinguishable.
+ */
+export function seriesDisplayLabels(series: readonly { labels: Record<string, string> }[]): string[] {
+  const preferred = series.map((s, i) => {
+    for (const key of PREFERRED_SERIES_LABELS) {
+      if (s.labels[key]) return s.labels[key]
+    }
+    return Object.keys(s.labels).length > 0 ? allLabels(s.labels) : `series-${i}`
+  })
+  if (new Set(preferred).size === preferred.length) return preferred
+  return series.map((s, i) => (Object.keys(s.labels).length > 0 ? allLabels(s.labels) : `series-${i}`))
+}
+
 /**
  * Strip the shared prefix from a set of labels so the differentiating suffix
  * is what's shown. Example:

package/src/components/charts/format.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { formatMetricValue } from './format'
+
+describe('formatMetricValue', () => {
+  it('scales unitless values with SI prefixes instead of a runaway k', () => {
+    expect(formatMetricValue(19_027_100, '')).toBe('19.0M')
+    expect(formatMetricValue(38_054_300, '')).toBe('38.1M')
+    expect(formatMetricValue(57_081, '')).toBe('57.1k')
+    expect(formatMetricValue(4_200_000_000, '')).toBe('4.20G')
+    expect(formatMetricValue(812, '')).toBe('812')
+  })
+
+  it('formats seconds and negative values', () => {
+    expect(formatMetricValue(0.25, 'seconds')).toBe('250ms')
+    expect(formatMetricValue(90, 'seconds')).toBe('1.5m')
+    expect(formatMetricValue(-3.5, '')).toBe('-3.50')
+    expect(formatMetricValue(-2048, 'bytes')).toBe('-2.0 KiB')
+  })
+})

package/src/components/charts/format.ts

@@ -4,6 +4,7 @@
 
 export function formatMetricValue(value: number, unit: string): string {
   if (value === 0) return '0'
+  if (value < 0) return `-${formatMetricValue(-value, unit)}`
 
   switch (unit) {
     case 'cores': {
@@ -26,12 +27,27 @@ export function formatMetricValue(value: number, unit: string): string {
       if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MiB/s`
       return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GiB/s`
     }
+    case 'count':
+    case 'restarts': {
+      if (value < 10000) return value.toFixed(0)
+      if (value < 1e6) return `${(value / 1e3).toFixed(1)}k`
+      return `${(value / 1e6).toFixed(1)}M`
+    }
+    case 'seconds': {
+      if (value < 0.001) return `${(value * 1_000_000).toFixed(0)}µs`
+      if (value < 1) return `${(value * 1000).toFixed(value < 0.01 ? 2 : 0)}ms`
+      if (value < 60) return `${value.toFixed(value < 10 ? 2 : 1)}s`
+      if (value < 3600) return `${(value / 60).toFixed(1)}m`
+      return `${(value / 3600).toFixed(1)}h`
+    }
     default:
       if (value < 0.01) return value.toExponential(1)
       if (value < 1) return value.toFixed(3)
       if (value < 100) return value.toFixed(2)
       if (value < 10000) return value.toFixed(0)
-      return `${(value / 1000).toFixed(1)}k`
+      if (value < 1e6) return `${(value / 1e3).toFixed(1)}k`
+      if (value < 1e9) return `${(value / 1e6).toFixed(1)}M`
+      return `${(value / 1e9).toFixed(2)}G`
   }
 }