@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/resource/PrometheusCharts.tsx

@@ -1,24 +1,29 @@
-import { useState, useMemo, useRef, useCallback } from 'react'
-import { clsx } from 'clsx'
-import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
+import { useState, useMemo } from 'react'
+import {
+  PrometheusChartsView,
+  MetricsSummary as BaseMetricsSummary,
+  type TimeSeries,
+  type ReferenceLine,
+} from '@skyhook-io/k8s-ui/components/charts'
 import {
   usePrometheusStatus,
   usePrometheusConnect,
   usePrometheusResourceMetrics,
+  useAutoPromConnect,
   type PrometheusMetricCategory,
   type PrometheusTimeRange,
-  type PrometheusSeries,
 } from '../../api/client'
 
 // ============================================================================
-// Types & Constants
+// Radar-specific category config (lives here, not in k8s-ui, so consumers
+// reusing AreaChart aren't forced to inherit Radar's category vocabulary).
 // ============================================================================
 
 const SUPPORTED_KINDS = new Set([
   'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
 ])
 
-interface CategoryDef {
+export interface CategoryDef {
   key: PrometheusMetricCategory
   label: string
   color: string       // tailwind text class
@@ -26,7 +31,7 @@ interface CategoryDef {
   fillColor: string   // hex with alpha for SVG fill
 }
 
-const WORKLOAD_CATEGORIES: CategoryDef[] = [
+export const WORKLOAD_CATEGORIES: CategoryDef[] = [
   { 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' },
@@ -34,28 +39,13 @@ const WORKLOAD_CATEGORIES: CategoryDef[] = [
   { key: 'filesystem', label: 'Disk I/O', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
 ]
 
-const NODE_CATEGORIES: CategoryDef[] = [
+export const NODE_CATEGORIES: CategoryDef[] = [
   { 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' },
 ]
 
-// Distinct colors for multi-series charts (up to 10 series).
-// Uses 500-level shades for adequate contrast on both dark (#1e293b) and light (#ffffff) surfaces.
-const SERIES_COLORS = [
-  '#3b82f6', // blue-500
-  '#10b981', // emerald-500
-  '#f97316', // orange-500
-  '#a855f7', // purple-500
-  '#ec4899', // pink-500
-  '#eab308', // yellow-500
-  '#06b6d4', // cyan-500
-  '#84cc16', // lime-500
-  '#ef4444', // red-500
-  '#6366f1', // indigo-500
-]
-
-const TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
+export const TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
   { value: '10m', label: '10m' },
   { value: '30m', label: '30m' },
   { value: '1h', label: '1h' },
@@ -66,6 +56,16 @@ const TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
   { value: '7d', label: '7d' },
 ]
 
+// Radar's MetricsSummary thin wrapper — adapts CategoryDef to the slim
+// interface of the shared k8s-ui primitive so callers downstream don't change.
+export function MetricsSummary({ series, category, unit }: {
+  series: TimeSeries[]
+  category: CategoryDef
+  unit: string
+}) {
+  return <BaseMetricsSummary series={series} unit={unit} currentColorClass={category.color} />
+}
+
 // ============================================================================
 // Main Component
 // ============================================================================
@@ -76,13 +76,22 @@ interface PrometheusChartsProps {
   name: string
   /** When true, show "no data" empty state instead of hiding. Defaults to false (hide when no data). */
   showEmptyState?: boolean
+  /**
+   * Full K8s resource. When provided, CPU and memory charts overlay the
+   * aggregate request/limit (summed across runtime containers including
+   * native sidecars, multiplied by readyReplicas for replicated workloads).
+   */
+  resource?: any
+  /** Notifies the parent when the user changes the time range, so sibling
+   * panels (e.g. restart lane) can mirror the selection. */
+  onTimeRangeChange?: (range: PrometheusTimeRange) => void
 }
 
-export function PrometheusCharts({ kind, namespace, name, showEmptyState = false }: PrometheusChartsProps) {
+export function PrometheusCharts({ kind, namespace, name, showEmptyState = false, resource, onTimeRangeChange }: PrometheusChartsProps) {
+  useAutoPromConnect()
   const { data: status, isLoading: statusLoading } = usePrometheusStatus()
   const connectMutation = usePrometheusConnect()
 
-  const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
   const [activeCategory, setActiveCategory] = useState<PrometheusMetricCategory>('cpu')
   const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
 
@@ -95,587 +104,154 @@ export function PrometheusCharts({ kind, namespace, name, showEmptyState = false
     isConnected && isSupported,
   )
 
-  if (!isSupported) {
-    return null
-  }
-
-  // Loading state — checking Prometheus availability (only show when explicitly requested)
-  if (statusLoading) {
-    if (!showEmptyState) return null
-    return (
-      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
-        <Loader2 className="w-5 h-5 animate-spin mr-2" />
-        Checking Prometheus availability...
-      </div>
-    )
-  }
-
-  // When embedded in Overview (showEmptyState=false), hide when not connected or no data
-  if (!showEmptyState) {
-    if (!isConnected) return null
-    if (!metricsLoading && !metricsError && !metrics?.result?.series?.length) return null
-  }
-
-  if (!isConnected) {
-    return (
-      <div className="flex flex-col items-center justify-center py-12 gap-4">
-        <WifiOff className="w-10 h-10 text-theme-text-quaternary" />
-        <div className="text-center">
-          <p className="text-sm text-theme-text-secondary mb-1">Prometheus not connected</p>
-          <p className="text-xs text-theme-text-tertiary mb-4">
-            {status?.error || 'Connect to view historical CPU, memory, and network metrics'}
-          </p>
-          <button
-            onClick={() => connectMutation.mutate()}
-            disabled={connectMutation.isPending}
-            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg btn-brand"
-          >
-            {connectMutation.isPending ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Wifi className="w-4 h-4" />
-            )}
-            Discover Prometheus
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  const activeCategoryDef = categories.find(c => c.key === activeCategory) || categories[0]
+  // Reference lines: aggregate request/limit overlaid on CPU and memory charts.
+  // Computed unconditionally and placed above early returns to keep hook order
+  // stable when connection state transitions (Rules of Hooks).
+  const referenceLines = useMemo<ReferenceLine[] | undefined>(() => {
+    if (!resource || (activeCategory !== 'cpu' && activeCategory !== 'memory')) return undefined
+    return computeRequestLimitLines(resource, kind, activeCategory)
+  }, [resource, kind, activeCategory])
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Toolbar */}
-      <div className="shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-theme-border bg-theme-surface/50">
-        {/* Category tabs */}
-        <div className="flex items-center gap-1">
-          <BarChart3 className="w-4 h-4 text-theme-text-tertiary mr-2" />
-          {categories.map(cat => (
-            <button
-              key={cat.key}
-              onClick={() => setActiveCategory(cat.key)}
-              className={clsx(
-                'px-2.5 py-1 text-xs font-medium rounded-md transition-colors',
-                activeCategory === cat.key
-                  ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
-                  : 'text-theme-text-tertiary hover:text-theme-text-secondary hover:bg-theme-elevated/50'
-              )}
-            >
-              {cat.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Time range selector */}
-        <select
-          value={timeRange}
-          onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
-          className="px-2 py-1 text-xs rounded-md bg-theme-elevated border border-theme-border text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
-        >
-          {TIME_RANGES.map(tr => (
-            <option key={tr.value} value={tr.value}>{tr.label}</option>
-          ))}
-        </select>
-      </div>
-
-      {/* Chart area — fixed min-height prevents layout shift while loading */}
-      <div className="min-h-[280px] p-4">
-        {metricsLoading ? (
-          <div className="flex items-center justify-center min-h-[240px] text-theme-text-tertiary">
-            <Loader2 className="w-5 h-5 animate-spin mr-2" />
-            Loading metrics...
-          </div>
-        ) : metricsError ? (
-          <div className="flex items-center justify-center h-full text-red-400 text-sm">
-            Failed to load metrics: {(metricsError as Error).message}
-          </div>
-        ) : metrics?.result?.series?.length ? (
-          <div className="h-full flex flex-col gap-4">
-            {/* Summary stats */}
-            <MetricsSummary
-              series={metrics.result.series}
-              category={activeCategoryDef}
-              unit={metrics.unit}
-            />
-
-            {/* Main chart */}
-            <div className="flex-1 min-h-0">
-              <AreaChart
-                series={metrics.result.series}
-                color={activeCategoryDef.chartColor}
-                fillColor={activeCategoryDef.fillColor}
-                unit={metrics.unit}
-              />
-            </div>
-
-            {/* Per-pod legend for workload-level queries */}
-            {metrics.result.series.length > 1 && (
-              <SeriesLegend series={metrics.result.series} color={activeCategoryDef.chartColor} />
-            )}
-          </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
-            <BarChart3 className="w-8 h-8 mb-2 opacity-40" />
-            <p className="text-sm">No data for this time range</p>
-            <p className="text-xs text-theme-text-quaternary mt-1">
-              Try a different time range or check that metrics are being collected
-            </p>
-            {metrics?.hint && (
-              <p className="mt-3 px-3 py-2 w-full max-w-lg text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-500/10 border border-yellow-500/30 rounded">
-                {metrics.hint}
-              </p>
-            )}
-            {metrics?.query && (
-              <details className="mt-3 w-full max-w-lg text-left">
-                <summary className="text-xs text-theme-text-quaternary cursor-pointer hover:text-theme-text-tertiary">
-                  Diagnostics: show PromQL query
-                </summary>
-                <div className="mt-2 p-2 bg-theme-base border border-theme-border rounded text-xs font-mono text-theme-text-secondary break-all">
-                  {metrics.query}
-                </div>
-                <p className="mt-1.5 text-xs text-theme-text-quaternary">
-                  This query returned no results. Verify in your Prometheus UI that the metric names and labels
-                  ({activeCategoryDef.key === 'cpu' ? 'pod, namespace, container' : 'pod, namespace'}) exist.
-                  Custom label relabeling in your Prometheus configuration may require adjustments.
-                </p>
-              </details>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
+    <PrometheusChartsView
+      kind={kind}
+      showEmptyState={showEmptyState}
+      statusLoading={statusLoading}
+      isConnected={isConnected}
+      statusError={status?.error}
+      onConnect={() => connectMutation.mutate()}
+      connecting={connectMutation.isPending}
+      category={activeCategory}
+      onCategoryChange={setActiveCategory}
+      range={timeRange}
+      onRangeChange={(r) => { setTimeRange(r); onTimeRangeChange?.(r) }}
+      metrics={metrics}
+      metricsLoading={metricsLoading}
+      metricsError={(metricsError as Error) ?? null}
+      referenceLines={referenceLines}
+    />
   )
 }
 
+
 // ============================================================================
-// Sub-Components
+// Request/limit overlay derivation
 // ============================================================================
 
-function MetricsSummary({ series, category, unit }: {
-  series: PrometheusSeries[]
-  category: CategoryDef
-  unit: string
-}) {
-  const stats = useMemo(() => {
-    // Aggregate all data points across series
-    const allValues: number[] = []
-    for (const s of series) {
-      for (const dp of s.dataPoints) {
-        allValues.push(dp.value)
-      }
-    }
-    if (allValues.length === 0) return null
-
-    // Latest = sum of each series' most recent data point
-    const lastValues = series.map(s => s.dataPoints[s.dataPoints.length - 1]?.value ?? 0)
-    const current = lastValues.reduce((a, b) => a + b, 0)
-    const max = Math.max(...allValues)
-    const avg = allValues.reduce((a, b) => a + b, 0) / allValues.length
-
-    return { current, max, avg }
-  }, [series])
-
-  if (!stats) return null
+/**
+ * Compute aggregate request + limit reference lines from a K8s resource spec.
+ * Sums across runtime containers (regular + native sidecars), excluding pure
+ * init containers. The values are per-pod — workload charts use
+ * `sum(...) by (pod, namespace)` (one series per pod, at per-pod scale), so
+ * the reference line lives on the same axis without any replica multiplier.
+ *
+ * Returns undefined when the spec doesn't have enough information to render
+ * a meaningful line (no runtime containers, or no values set on any container).
+ */
+export function computeRequestLimitLines(
+  resource: any,
+  kind: string,
+  category: 'cpu' | 'memory',
+): ReferenceLine[] | undefined {
+  if (!resource) return undefined
+  const podSpec = extractPodSpec(resource, kind)
+  if (!podSpec) return undefined
+
+  const runtimeContainers = collectRuntimeContainers(podSpec)
+  if (runtimeContainers.length === 0) return undefined
+
+  let reqSum = 0, reqAny = false
+  let limSum = 0, limAny = false
+  for (const c of runtimeContainers) {
+    const req = readQuantity(c.resources?.requests?.[category], category)
+    const lim = readQuantity(c.resources?.limits?.[category], category)
+    if (req != null) { reqSum += req; reqAny = true }
+    if (lim != null) { limSum += lim; limAny = true }
+  }
 
-  return (
-    <div className="flex items-center gap-6">
-      <StatPill label="Current" value={formatMetricValue(stats.current, unit)} className={category.color} />
-      <StatPill label="Average" value={formatMetricValue(stats.avg, unit)} className="text-theme-text-secondary" />
-      <StatPill label="Peak" value={formatMetricValue(stats.max, unit)} className="text-theme-text-secondary" />
-    </div>
-  )
+  const lines: ReferenceLine[] = []
+  if (reqAny) {
+    lines.push({
+      value: reqSum,
+      label: `request ${formatRequestLimitLabel(reqSum, category)}`,
+      kind: 'request',
+    })
+  }
+  if (limAny) {
+    lines.push({
+      value: limSum,
+      label: `limit ${formatRequestLimitLabel(limSum, category)}`,
+      kind: 'limit',
+    })
+  }
+  return lines.length > 0 ? lines : undefined
 }
 
-function StatPill({ label, value, className }: { label: string; value: string; className?: string }) {
-  return (
-    <div className="flex items-baseline gap-1.5">
-      <span className="text-xs text-theme-text-quaternary uppercase tracking-wide">{label}</span>
-      <span className={clsx('text-sm font-semibold tabular-nums', className)}>{value}</span>
-    </div>
-  )
+function extractPodSpec(resource: any, kind: string): any | undefined {
+  if (kind === 'Pod') return resource?.spec
+  if (kind === 'CronJob') return resource?.spec?.jobTemplate?.spec?.template?.spec
+  return resource?.spec?.template?.spec
 }
 
-// ============================================================================
-// Area Chart (pure SVG, no dependencies)
-// ============================================================================
-
-function seriesColor(index: number, fallback: string): string {
-  return SERIES_COLORS[index % SERIES_COLORS.length] ?? fallback
+function collectRuntimeContainers(podSpec: any): any[] {
+  const out: any[] = []
+  for (const c of (podSpec?.containers || [])) out.push(c)
+  // Native sidecars (initContainers with restartPolicy: Always, GA in 1.33)
+  // run for the pod's lifetime and contribute to steady-state usage. Pure
+  // init containers run to completion and don't.
+  for (const c of (podSpec?.initContainers || [])) {
+    if (c?.restartPolicy === 'Always') out.push(c)
+  }
+  return out
 }
 
-function seriesFill(index: number, fallback: string): string {
-  return (SERIES_COLORS[index % SERIES_COLORS.length] ?? fallback) + '22'
+const CPU_SUFFIXES: Record<string, number> = { n: 1e-9, u: 1e-6, m: 1e-3 }
+const MEMORY_SUFFIXES: Record<string, number> = {
+  Ki: 1024, Mi: 1024 ** 2, Gi: 1024 ** 3, Ti: 1024 ** 4, Pi: 1024 ** 5, Ei: 1024 ** 6,
+  K: 1e3, M: 1e6, G: 1e9, T: 1e12, P: 1e15, E: 1e18,
 }
 
-// Compute short labels that strip the shared prefix so pods are distinguishable.
-// e.g. ["backend-podinfo-849bd668f9-4tzkg", "backend-podinfo-849bd668f9-5z79f"] → ["4tzkg", "5z79f"]
-function computeShortLabels(labels: string[]): string[] {
-  if (labels.length <= 1) return labels
-  // Find longest common prefix
-  let prefix = labels[0]
-  for (let i = 1; i < labels.length; i++) {
-    while (!labels[i].startsWith(prefix)) {
-      prefix = prefix.slice(0, -1)
-    }
+// NOT a duplicate of @skyhook-io/k8s-ui/utils/format's parseCPUToNanocores /
+// parseMemoryToBytes — those return 0 on invalid input. We need null so that
+// "abcMi" doesn't silently poison the caller's running sum and produce a
+// missing/zeroed reference line on the chart (real garbage data must be
+// distinguishable from a legit 0).
+function readQuantity(raw: unknown, category: 'cpu' | 'memory'): number | null {
+  if (raw == null) return null
+  const s = String(raw).trim()
+  if (s === '') return null
+  if (category === 'cpu') {
+    if (s.endsWith('m')) return scaleOrNull(s, CPU_SUFFIXES.m)
+    if (s.endsWith('n')) return scaleOrNull(s, CPU_SUFFIXES.n)
+    if (s.endsWith('u')) return scaleOrNull(s, CPU_SUFFIXES.u)
+    const v = parseFloat(s)
+    return isNaN(v) ? null : v
   }
-  // Trim to last separator (- or /) for cleaner cuts
-  const lastSep = Math.max(prefix.lastIndexOf('-'), prefix.lastIndexOf('/'))
-  if (lastSep > 0) prefix = prefix.slice(0, lastSep + 1)
-
-  const suffixes = labels.map(l => l.slice(prefix.length))
-  // If stripping made them empty or all the same, fall back to originals
-  if (suffixes.some(s => s === '') || new Set(suffixes).size !== suffixes.length) return labels
-  return suffixes
-}
-
-function AreaChart({ series, color, fillColor, unit }: {
-  series: PrometheusSeries[]
-  color: string
-  fillColor: string
-  unit: string
-}) {
-  const svgRef = useRef<SVGSVGElement>(null)
-  const [hoverX, setHoverX] = useState<number | null>(null)
-  const multiSeries = series.length > 1
-
-  const chartData = useMemo(() => {
-    if (!series.length) return null
-
-    // Merge all series into a single timeline for the X axis
-    let minTs = Infinity
-    let maxTs = -Infinity
-    let maxVal = 0
-
-    for (const s of series) {
-      for (const dp of s.dataPoints) {
-        if (dp.timestamp < minTs) minTs = dp.timestamp
-        if (dp.timestamp > maxTs) maxTs = dp.timestamp
-        if (dp.value > maxVal) maxVal = dp.value
-      }
-    }
-
-    if (minTs === maxTs) maxTs = minTs + 60
-    if (maxVal === 0) {
-      // Use a small unit-appropriate default so the Y-axis isn't misleadingly large
-      maxVal = unit === 'cores' ? 0.01 : unit === 'bytes' ? 1024 * 1024 : unit === 'bytes/s' ? 1024 : 1
-    }
-
-    const padding = maxVal * 0.1
-    const yMax = maxVal + padding
-
-    return { minTs, maxTs, yMax, series }
-  }, [series, unit])
-
-  if (!chartData) return null
-
-  const { minTs, maxTs, yMax } = chartData
-  const width = 1000
-  const height = 300
-  const marginLeft = 60
-  const marginRight = 20
-  const marginTop = 10
-  const marginBottom = 30
-  const plotWidth = width - marginLeft - marginRight
-  const plotHeight = height - marginTop - marginBottom
-
-  const toX = (ts: number) => marginLeft + ((ts - minTs) / (maxTs - minTs)) * plotWidth
-  const toY = (val: number) => marginTop + plotHeight - (val / yMax) * plotHeight
-
-  // Y axis ticks
-  const yTicks = useMemo(() => {
-    const count = 4
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const val = (yMax / count) * i
-      return { val, y: toY(val), label: formatMetricValue(val, unit) }
-    })
-  }, [yMax, unit])
-
-  // X axis ticks
-  const xTicks = useMemo(() => {
-    const count = 6
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const ts = minTs + ((maxTs - minTs) / count) * i
-      return { ts, x: toX(ts), label: formatTimestamp(ts) }
-    })
-  }, [minTs, maxTs])
-
-  // Build paths for each series
-  const paths = useMemo(() => {
-    return chartData.series.map((s, seriesIdx) => {
-      if (s.dataPoints.length < 2) return null
-      const points = s.dataPoints.map(dp => ({ x: toX(dp.timestamp), y: toY(dp.value) }))
-
-      const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
-
-      // Area path: line + close to bottom
-      const areaPath = linePath +
-        ` L${points[points.length - 1].x},${marginTop + plotHeight}` +
-        ` L${points[0].x},${marginTop + plotHeight} Z`
-
-      return {
-        linePath,
-        areaPath,
-        strokeColor: multiSeries ? seriesColor(seriesIdx, color) : color,
-        areaFillColor: multiSeries ? seriesFill(seriesIdx, fillColor) : fillColor,
-        key: seriesIdx,
-      }
-    }).filter(Boolean)
-  }, [chartData])
-
-  // Hover data: find nearest data point per series at the hovered X position
-  const hoverData = useMemo(() => {
-    if (hoverX === null) return null
-    const clampedX = Math.max(marginLeft, Math.min(marginLeft + plotWidth, hoverX))
-    const frac = (clampedX - marginLeft) / plotWidth
-    const ts = minTs + frac * (maxTs - minTs)
-
-    const validSeries = chartData.series
-      .map((s, i) => ({ s, i }))
-      .filter(({ s }) => s.dataPoints.length >= 2)
-
-    const fullLabels = validSeries.map(({ s, i }) =>
-      s.labels.pod || s.labels.instance || s.labels.node || `series-${i}`
-    )
-    const shortLabels = computeShortLabels(fullLabels)
-
-    const points = validSeries.map(({ s, i }, vi) => {
-      let closest = s.dataPoints[0]
-      let closestDist = Infinity
-      for (const dp of s.dataPoints) {
-        const dist = Math.abs(dp.timestamp - ts)
-        if (dist < closestDist) {
-          closestDist = dist
-          closest = dp
-        }
-      }
-      return {
-        label: shortLabels[vi],
-        fullLabel: fullLabels[vi],
-        value: closest.value,
-        y: toY(closest.value),
-        color: multiSeries ? seriesColor(i, color) : color,
-      }
-    })
-
-    return { ts, x: clampedX, points }
-  }, [hoverX, chartData])
-
-  // Convert client mouse coordinates to SVG viewBox coordinates
-  const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
-    const svg = svgRef.current
-    if (!svg) return
-    const ctm = svg.getScreenCTM()
-    if (!ctm) return
-    setHoverX((e.clientX - ctm.e) / ctm.a)
-  }, [])
-
-  return (
-    <div className="relative">
-      <svg
-        ref={svgRef}
-        viewBox={`0 0 ${width} ${height}`}
-        className="w-full h-full"
-        preserveAspectRatio="xMidYMid meet"
-      >
-        {/* Grid lines */}
-        {yTicks.map((tick, i) => (
-          <line
-            key={`grid-${i}`}
-            x1={marginLeft}
-            y1={tick.y}
-            x2={width - marginRight}
-            y2={tick.y}
-            stroke="currentColor"
-            className="text-theme-border/30"
-            strokeWidth="1"
-            strokeDasharray={i === 0 ? undefined : '4 4'}
-          />
-        ))}
-
-        {/* Y axis labels */}
-        {yTicks.map((tick, i) => (
-          <text
-            key={`ylabel-${i}`}
-            x={marginLeft - 8}
-            y={tick.y + 4}
-            textAnchor="end"
-            className="fill-theme-text-secondary"
-            fontSize="11"
-            fontFamily="ui-monospace, monospace"
-          >
-            {tick.label}
-          </text>
-        ))}
-
-        {/* X axis labels */}
-        {xTicks.map((tick, i) => (
-          <text
-            key={`xlabel-${i}`}
-            x={tick.x}
-            y={height - 4}
-            textAnchor="middle"
-            className="fill-theme-text-secondary"
-            fontSize="11"
-            fontFamily="ui-monospace, monospace"
-          >
-            {tick.label}
-          </text>
-        ))}
-
-        {/* Area fills */}
-        {paths.map(p => p && (
-          <path
-            key={`area-${p.key}`}
-            d={p.areaPath}
-            fill={p.areaFillColor}
-          />
-        ))}
-
-        {/* Lines */}
-        {paths.map(p => p && (
-          <path
-            key={`line-${p.key}`}
-            d={p.linePath}
-            fill="none"
-            stroke={p.strokeColor}
-            strokeWidth="2"
-            strokeLinejoin="round"
-          />
-        ))}
-
-        {/* Hover crosshair + dots */}
-        {hoverData && (
-          <>
-            <line
-              x1={hoverData.x} y1={marginTop}
-              x2={hoverData.x} y2={marginTop + plotHeight}
-              stroke="currentColor"
-              className="text-theme-text-tertiary"
-              strokeWidth="1"
-              strokeDasharray="4 4"
-            />
-            {hoverData.points.map((p, i) => (
-              <circle
-                key={i}
-                cx={hoverData.x} cy={p.y}
-                r="4"
-                fill={p.color}
-                stroke="var(--color-theme-surface, #1a1a2e)"
-                strokeWidth="2"
-              />
-            ))}
-          </>
-        )}
-
-        {/* Invisible overlay for mouse events — must be last for event capture */}
-        <rect
-          x={marginLeft} y={marginTop}
-          width={plotWidth} height={plotHeight}
-          fill="transparent"
-          style={{ cursor: 'crosshair' }}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={() => setHoverX(null)}
-        />
-      </svg>
-
-      {/* Tooltip positioned outside SVG for proper HTML rendering */}
-      {hoverData && (
-        <div
-          className="absolute top-0 pointer-events-none z-10"
-          style={{
-            left: `${(hoverData.x / width) * 100}%`,
-            transform: hoverData.x > width * 0.65 ? 'translateX(calc(-100% - 12px))' : 'translateX(12px)',
-          }}
-        >
-          <div className="bg-theme-surface border border-theme-border rounded-lg shadow-lg px-3 py-2 text-xs whitespace-nowrap">
-            <div className="text-theme-text-tertiary mb-1.5 font-mono">
-              {new Date(hoverData.ts * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
-            </div>
-            {hoverData.points.map((p, i) => (
-              <div key={i} className="flex items-center gap-2 py-0.5">
-                <div
-                  className="w-2 h-2 rounded-full shrink-0"
-                  style={{ backgroundColor: p.color }}
-                />
-                <span className="text-theme-text-secondary font-mono" title={p.fullLabel}>
-                  {p.label}
-                </span>
-                <span className="text-theme-text-primary font-semibold ml-auto pl-3 tabular-nums">
-                  {formatMetricValue(p.value, unit)}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
+  // Memory: try two-character then one-character suffixes (Mi before M).
+  for (const suffix of ['Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei']) {
+    if (s.endsWith(suffix)) return scaleOrNull(s, MEMORY_SUFFIXES[suffix])
+  }
+  for (const suffix of ['K', 'M', 'G', 'T', 'P', 'E']) {
+    if (s.endsWith(suffix)) return scaleOrNull(s, MEMORY_SUFFIXES[suffix])
+  }
+  const v = parseFloat(s)
+  return isNaN(v) ? null : v
 }
 
-function SeriesLegend({ series, color }: { series: PrometheusSeries[]; color: string }) {
-  const labels = series.map((s, i) => s.labels.pod || s.labels.instance || `series-${i}`)
-  return (
-    <div className="flex flex-wrap gap-x-4 gap-y-1 px-1">
-      {series.slice(0, 10).map((_, i) => {
-        const shortName = labels[i].length > 40 ? '...' + labels[i].slice(-37) : labels[i]
-        return (
-          <div key={i} className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
-            <div
-              className="w-2.5 h-2.5 rounded-full shrink-0"
-              style={{ backgroundColor: seriesColor(i, color) }}
-            />
-            <span className="truncate" title={labels[i]}>{shortName}</span>
-          </div>
-        )
-      })}
-      {series.length > 10 && (
-        <span className="text-xs text-theme-text-quaternary">+{series.length - 10} more</span>
-      )}
-    </div>
-  )
+function scaleOrNull(s: string, scale: number): number | null {
+  const v = parseFloat(s)
+  return isNaN(v) ? null : v * scale
 }
 
-// ============================================================================
-// Formatters
-// ============================================================================
-
-function formatMetricValue(value: number, unit: string): string {
-  if (value === 0) return '0'
-
-  switch (unit) {
-    case 'cores': {
-      if (value < 0.0001) return '< 0.1m'
-      if (value < 0.001) return `${(value * 1000).toFixed(1)}m`
-      if (value < 1) return `${(value * 1000).toFixed(0)}m`
-      return `${value.toFixed(2)}`
-    }
-    case 'bytes': {
-      if (value < 1) return '< 1 B'
-      if (value < 1024) return `${value.toFixed(0)} B`
-      if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KiB`
-      if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MiB`
-      return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GiB`
-    }
-    case 'bytes/s': {
-      if (value < 1) return '< 1 B/s'
-      if (value < 1024) return `${value.toFixed(0)} B/s`
-      if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KiB/s`
-      if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MiB/s`
-      return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GiB/s`
-    }
-    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`
+function formatRequestLimitLabel(value: number, category: 'cpu' | 'memory'): string {
+  if (category === 'cpu') {
+    if (value < 1) return `${Math.round(value * 1000)}m`
+    return value.toFixed(2).replace(/\.?0+$/, '')
   }
-}
-
-function formatTimestamp(unix: number): string {
-  const d = new Date(unix * 1000)
-  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  // Memory — match formatMetricValue's tier breakpoints.
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(0)}KiB`
+  if (value < 1024 ** 3) return `${(value / (1024 ** 2)).toFixed(0)}MiB`
+  return `${(value / (1024 ** 3)).toFixed(1)}GiB`
 }
 
 // ============================================================================