@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/charts/AreaChart.tsx

@@ -1,19 +1,53 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type * as React from 'react'
-import { seriesColor, seriesFill, computeShortLabels } from './colors'
+import { seriesColor, seriesFill, computeShortLabels, seriesDisplayLabels } from './colors'
 import { formatMetricValue, formatTimestamp } from './format'
-import type { TimeSeries, ReferenceLine } from './types'
-
-export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
+import { layoutAnnotations } from './annotations'
+import { chartLayout, integerAxisTop, isCountUnit, yAxisValues } from './axis'
+import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
+import { nearestSample } from './nearestSample'
+
+// Below this rendered width the annotation label pills would cover most of the
+// plot once the 1000-unit viewBox is scaled down; the lines stay and the label
+// text moves into the hover tooltip.
+export const ANNOTATION_LABEL_MIN_WIDTH_PX = 420
+const ANNOTATION_HOVER_TOLERANCE = 8
+
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full' }: {
   series: TimeSeries[]
   color: string
   fillColor: string
   unit: string
   referenceLines?: ReferenceLine[]
+  /** Vertical markers; only those inside the X domain render. */
+  annotations?: ChartAnnotation[]
+  /** X axis window in unix seconds. Defaults to the sample extent. */
+  domain?: { start: number; end: number }
+  /** Expected positive sample interval; omitted evaluations break paths and cannot supply hover values. */
+  stepSeconds?: number
+  /**
+   * Display name per series, parallel to `series`. Pass it when the chart
+   * shows a subset of a larger result so names stay distinguishable across
+   * the whole result; defaults to names derived from the labels given.
+   */
+  seriesLabels?: string[]
+  /**
+   * 'full' is the fixed wide layout every existing caller gets. 'auto' switches
+   * to the compact layout (two ticks per axis, larger text, taller plot) when
+   * the rendered chart is narrower than ANNOTATION_LABEL_MIN_WIDTH_PX;
+   * 'compact' forces it. 'dashboard' uses readable, medium-width axes and
+   * keeps text and plot height stable as its container resizes.
+   */
+  layout?: 'full' | 'auto' | 'compact' | 'dashboard'
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
+  const [labelsFit, setLabelsFit] = useState(true)
+  const [renderedWidth, setRenderedWidth] = useState(0)
   const multiSeries = series.length > 1
+  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit) || (layout === 'dashboard' && renderedWidth > 0 && renderedWidth < 300)
+  const countAxis = isCountUnit(unit)
 
   const chartData = useMemo(() => {
     if (!series.length) return null
@@ -21,17 +55,23 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
     let minTs = Infinity
     let maxTs = -Infinity
     let maxVal = 0
+    let minVal = 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 != null && dp.value > maxVal) maxVal = dp.value
+        if (dp.value != null && dp.value < minVal) minVal = dp.value
       }
     }
 
+    if (domain && Number.isFinite(domain.start) && Number.isFinite(domain.end) && domain.end > domain.start) {
+      minTs = domain.start
+      maxTs = domain.end
+    }
     if (minTs === maxTs) maxTs = minTs + 60
-    if (maxVal === 0) {
+    if (maxVal === 0 && minVal === 0) {
       // Unit-appropriate floor so the Y-axis isn't misleadingly large.
       maxVal = unit === 'cores' ? 0.01 : unit === 'bytes' ? 1024 * 1024 : unit === 'bytes/s' ? 1024 : 1
     }
@@ -44,21 +84,28 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       }
     }
 
-    const padding = maxVal * 0.1
-    const yMax = maxVal + padding
+    const padding = Math.max(maxVal, -minVal) * 0.1
+    // A count axis ends on a whole step so its ticks are integers; other
+    // units keep headroom above the maximum.
+    const yMax = countAxis && minVal >= 0 ? integerAxisTop(maxVal, compact ? 1 : 4) : maxVal + padding
+    const yMin = minVal < 0 ? minVal - padding : 0
 
-    return { minTs, maxTs, yMax, series }
-  }, [series, unit, referenceLines])
+    return { minTs, maxTs, yMax, yMin, series }
+  }, [series, unit, referenceLines, domain, countAxis, compact])
 
   // Layout constants. marginLeft sized for the widest expected Y-tick label
   // ("422.4 MiB" etc.) — narrow grid panels squeeze the X axis so labels
   // need extra viewBox-space to survive the down-scale.
-  const width = 1000
-  const height = 300
-  const marginLeft = 84
-  const marginRight = 40
-  const marginTop = 10
-  const marginBottom = 30
+  const base = chartLayout(compact, layout === 'dashboard', renderedWidth)
+  const { width, height, marginRight, marginTop, marginBottom, fontSize, yIntervals, xIntervals } = base
+  const yValues = chartData ? yAxisValues(chartData.yMin, chartData.yMax, yIntervals, countAxis) : []
+  const yLabels = yValues.map(val => formatMetricValue(val, unit))
+  // The compact layout's larger text makes a label like "161.5 MiB" wider
+  // than the fixed margin, and SVG clips it; grow the margin to the widest
+  // label there. The full layout keeps its fixed margin for existing callers.
+  const marginLeft = compact || layout === 'dashboard'
+    ? Math.max(base.marginLeft, Math.ceil(Math.max(0, ...yLabels.map(label => label.length)) * fontSize * 0.62 + 12))
+    : base.marginLeft
   const plotWidth = width - marginLeft - marginRight
   const plotHeight = height - marginTop - marginBottom
 
@@ -71,31 +118,31 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
   }
   const toY = (val: number) => {
     if (!chartData) return marginTop + plotHeight
-    return marginTop + plotHeight - (val / chartData.yMax) * plotHeight
+    return marginTop + plotHeight - ((val - chartData.yMin) / (chartData.yMax - chartData.yMin)) * plotHeight
   }
 
   const yTicks = useMemo(() => {
     if (!chartData) return []
-    const { yMax } = chartData
-    const count = 4
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const val = (yMax / count) * i
-      return { val, y: toY(val), label: formatMetricValue(val, unit) }
-    })
-  }, [chartData, unit])
+    return yValues.map((val, i) => ({ val, y: toY(val), label: yLabels[i] }))
+  }, [chartData, yValues, yLabels])
 
   const xTicks = useMemo(() => {
     if (!chartData) return []
     const { minTs, maxTs } = chartData
-    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) }
+    return Array.from({ length: xIntervals + 1 }, (_, i) => {
+      const ts = minTs + ((maxTs - minTs) / xIntervals) * i
+      // In the compact layout the two labels sit at the plot edges and would
+      // otherwise spill past the viewBox.
+      const anchor: 'start' | 'middle' | 'end' = !(compact || layout === 'dashboard') ? 'middle' : i === 0 ? 'start' : i === xIntervals ? 'end' : 'middle'
+      return { ts, x: toX(ts), label: formatTimestamp(ts), anchor }
     })
-  }, [chartData])
+  }, [chartData, xIntervals, compact, layout, marginLeft, plotWidth])
 
   const paths = useMemo(() => {
     if (!chartData) return []
+    // The area fills toward zero, not the plot floor, so a series that dips
+    // below zero is shaded on the correct side of the axis.
+    const baseline = toY(0)
     const segments: {
       linePath: string
       areaPath: string
@@ -113,13 +160,14 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       // rather than bridging across missing data or dropping to y=0. Each run
       // becomes its own path segment; a run needs >=2 points to render a line.
       let run: { x: number; y: number }[] = []
+      let previousTimestamp: number | undefined
       let runIdx = 0
       const flush = () => {
         if (run.length >= 2) {
           const linePath = run.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
           const areaPath = linePath +
-            ` L${run[run.length - 1].x},${marginTop + plotHeight}` +
-            ` L${run[0].x},${marginTop + plotHeight} Z`
+            ` L${run[run.length - 1].x},${baseline}` +
+            ` L${run[0].x},${baseline} Z`
           segments.push({
             linePath,
             areaPath,
@@ -135,15 +183,42 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       for (const dp of s.dataPoints) {
         if (dp.value == null) {
           flush()
+          previousTimestamp = undefined
           continue
         }
+        if (stepSeconds !== undefined && previousTimestamp !== undefined && dp.timestamp - previousTimestamp > stepSeconds * 1.5) flush()
         run.push({ x: toX(dp.timestamp), y: toY(dp.value) })
+        previousTimestamp = dp.timestamp
       }
       flush()
     })
 
     return segments
-  }, [chartData])
+  }, [chartData, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, fillColor, stepSeconds])
+
+  const placedAnnotations = useMemo(() => {
+    if (!chartData || !annotations?.length) return []
+    return layoutAnnotations(
+      annotations,
+      toX,
+      { minTs: chartData.minTs, maxTs: chartData.maxTs },
+      { left: marginLeft, right: width - marginRight },
+    )
+  }, [chartData, annotations, width, marginLeft, marginRight])
+
+  useEffect(() => {
+    const el = wrapperRef.current
+    if (!el || (placedAnnotations.length === 0 && layout !== 'auto' && layout !== 'dashboard') || typeof ResizeObserver === 'undefined') return
+    const update = () => {
+      const measuredWidth = el.getBoundingClientRect().width
+      setLabelsFit(measuredWidth >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+      if (layout === 'dashboard') setRenderedWidth(measuredWidth)
+    }
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [placedAnnotations.length, layout])
 
   // Hover: only emit a tooltip row when the hovered timestamp lies within
   // the series' actual sample range (with 2× median-step tolerance). Without
@@ -159,9 +234,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       .map((s, i) => ({ s, i }))
       .filter(({ s }) => s.dataPoints.filter(dp => dp.value != null).length >= 2)
 
-    const fullLabels = validSeries.map(({ s, i }) =>
-      s.labels.pod || s.labels.instance || s.labels.node || `series-${i}`
-    )
+    const allLabels = seriesLabels ?? seriesDisplayLabels(chartData.series)
+    const fullLabels = validSeries.map(({ i }) => allLabels[i] ?? `series-${i}`)
     const shortLabels = computeShortLabels(fullLabels)
 
     const points = validSeries.map(({ s, i }, vi) => {
@@ -175,18 +249,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       if (ts < seriesMin - tolerance || ts > seriesMax + tolerance) {
         return null
       }
-      // Only snap to finite points — a gap (undefined value) has no value to
-      // show and would render NaN in the tooltip / a dot at y=NaN.
-      let closest: { timestamp: number; value: number } | null = null
-      let closestDist = Infinity
-      for (const dp of dps) {
-        if (dp.value == null) continue
-        const dist = Math.abs(dp.timestamp - ts)
-        if (dist < closestDist) {
-          closestDist = dist
-          closest = { timestamp: dp.timestamp, value: dp.value }
-        }
-      }
+      const closest = nearestSample(dps, ts, stepSeconds)
       if (!closest) return null
       return {
         label: shortLabels[vi],
@@ -197,8 +260,12 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
       }
     }).filter((p): p is NonNullable<typeof p> => p !== null)
 
-    return { ts, x: clampedX, points }
-  }, [hoverX, chartData])
+    const nearbyAnnotations = placedAnnotations.filter(
+      p => Math.abs(p.x - clampedX) <= ANNOTATION_HOVER_TOLERANCE,
+    )
+
+    return { ts, x: clampedX, points, nearbyAnnotations }
+  }, [hoverX, chartData, placedAnnotations, seriesLabels, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, stepSeconds])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current
@@ -212,13 +279,18 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
   // every hook has been invoked (Rules of Hooks).
   if (!chartData) return null
 
+  const annotationLabelHeight = 14
+  const zeroLineY = chartData.yMin < 0 ? toY(0) : null
+
   return (
-    <div className="relative">
+    <div className="relative" ref={wrapperRef}>
       <svg
         ref={svgRef}
         viewBox={`0 0 ${width} ${height}`}
         className="w-full h-full"
+        style={layout === 'dashboard' ? { height: 240 } : undefined}
         preserveAspectRatio="xMidYMid meet"
+        data-chart-layout={compact ? 'compact' : 'full'}
       >
         {/* Grid lines */}
         {yTicks.map((tick, i) => (
@@ -235,6 +307,19 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
           />
         ))}
 
+        {zeroLineY !== null && (
+          <line
+            data-chart-zero-line
+            x1={marginLeft}
+            y1={zeroLineY}
+            x2={width - marginRight}
+            y2={zeroLineY}
+            stroke="currentColor"
+            className="text-theme-border/60"
+            strokeWidth="1"
+          />
+        )}
+
         {/* Y axis labels */}
         {yTicks.map((tick, i) => (
           <text
@@ -243,7 +328,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             y={tick.y + 4}
             textAnchor="end"
             className="fill-theme-text-secondary"
-            fontSize="11"
+            fontSize={fontSize}
             fontFamily="ui-monospace, monospace"
           >
             {tick.label}
@@ -256,9 +341,9 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             key={`xlabel-${i}`}
             x={tick.x}
             y={height - 4}
-            textAnchor="middle"
+            textAnchor={tick.anchor}
             className="fill-theme-text-secondary"
-            fontSize="11"
+            fontSize={fontSize}
             fontFamily="ui-monospace, monospace"
           >
             {tick.label}
@@ -335,6 +420,67 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
           )
         })}
 
+        {/* Annotation markers: a vertical line per recorded instant, labelled
+            in stacked rows at the top of the plot. */}
+        {placedAnnotations.map((placed, i) => {
+          const labelY = marginTop + placed.row * (annotationLabelHeight + 2)
+          const showLabel = labelsFit && !compact && !placed.labelHidden
+          return (
+            <g
+              key={`annotation-${i}`}
+              data-chart-annotation={placed.annotation.kind}
+              data-chart-annotation-label={showLabel ? 'visible' : 'hidden'}
+            >
+              <line
+                x1={placed.x}
+                y1={marginTop}
+                x2={placed.x}
+                y2={marginTop + plotHeight}
+                stroke="currentColor"
+                className="text-accent"
+                strokeWidth="1.5"
+                strokeDasharray="3 3"
+                opacity="0.9"
+              />
+              {showLabel && (
+                <>
+                  <rect
+                    x={placed.labelX}
+                    y={labelY}
+                    width={placed.labelWidth}
+                    height={annotationLabelHeight}
+                    rx="3"
+                    fill="currentColor"
+                    className="text-theme-surface"
+                    opacity="0.9"
+                  />
+                  <rect
+                    x={placed.labelX}
+                    y={labelY}
+                    width={placed.labelWidth}
+                    height={annotationLabelHeight}
+                    rx="3"
+                    fill="none"
+                    stroke="currentColor"
+                    className="text-accent/50"
+                    strokeWidth="1"
+                  />
+                  <text
+                    x={placed.labelX + 5}
+                    y={labelY + annotationLabelHeight - 3.5}
+                    fontSize="11"
+                    fontFamily="ui-monospace, monospace"
+                    fontWeight="500"
+                    className="fill-accent-text"
+                  >
+                    {placed.labelText}
+                  </text>
+                </>
+              )}
+            </g>
+          )
+        })}
+
         {/* Hover crosshair + dots */}
         {hoverData && (
           <>
@@ -383,6 +529,15 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines }: {
             <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.nearbyAnnotations.map((placed, i) => (
+              <div key={`annotation-${i}`} className="flex items-center gap-2 py-0.5">
+                <span className="w-2 h-2 rounded-full shrink-0 bg-accent" />
+                <span className="text-accent-text">Change recorded</span>
+                <span className="text-theme-text-primary font-mono ml-auto pl-3">
+                  {placed.annotation.label}
+                </span>
+              </div>
+            ))}
             {hoverData.points.map((p, i) => (
               <div key={i} className="flex items-center gap-2 py-0.5">
                 <div

package/src/components/charts/PrometheusChartsView.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { describePodCoverage } from "./PrometheusChartsView";
+import type { PrometheusResourceMetricsResult } from "./PrometheusChartsView";
+
+function result(
+  patch: Partial<PrometheusResourceMetricsResult>,
+): PrometheusResourceMetricsResult {
+  return { unit: "cores", ...patch } as PrometheusResourceMetricsResult;
+}
+
+describe("describePodCoverage", () => {
+  it("names the pods a chart covers and what it therefore misses", () => {
+    expect(describePodCoverage(result({ pods: 3, podsTotal: 3 }))).toBe(
+      "3 current pods; pods replaced during the window are not included",
+    );
+    expect(describePodCoverage(result({ pods: 1, podsTotal: 1 }))).toBe(
+      "1 current pod; pods replaced during the window are not included",
+    );
+  });
+
+  it("says when the cap cut the list, so a short count is not read as the workload", () => {
+    expect(describePodCoverage(result({ pods: 50, podsTotal: 120 }))).toBe(
+      "first 50 of 120 current pods; pods replaced during the window are not included",
+    );
+  });
+
+  it("distinguishes a workload with no pods from a kind that has none to report", () => {
+    expect(describePodCoverage(result({ pods: 0 }))).toBe(
+      "This workload has no pods running, so there is nothing to chart",
+    );
+    // A Node chart carries no pod count at all; it gets no caption rather
+    // than a claim about pods.
+    expect(describePodCoverage(result({}))).toBeUndefined();
+  });
+});