@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -0,0 +1,270 @@
+import { useMemo, useState } from 'react'
+import { Loader2, Wifi, WifiOff } from 'lucide-react'
+import {
+  AreaChart,
+  SeriesLegend,
+  computeSaturation,
+  type ReferenceLine,
+} from '@skyhook-io/k8s-ui/components/charts'
+import { SEVERITY_BADGE, SEVERITY_TEXT, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import {
+  usePrometheusStatus,
+  usePrometheusConnect,
+  usePrometheusResourceMetrics,
+  useAutoPromConnect,
+  type PrometheusMetricCategory,
+  type PrometheusTimeRange,
+} from '../../api/client'
+import {
+  MetricsSummary,
+  TIME_RANGES,
+  WORKLOAD_CATEGORIES,
+  NODE_CATEGORIES,
+  computeRequestLimitLines,
+  type CategoryDef,
+} from './PrometheusCharts'
+import { RestartEventLane } from './RestartChart'
+import { Tooltip } from '../ui/Tooltip'
+
+// Used when MetricsTabContent is in expanded (full-screen) mode. Drawer mode
+// uses the single-chart tabbed `PrometheusCharts` instead — drawer width
+// can't fit the grid cleanly.
+export interface PrometheusChartsGridProps {
+  kind: string
+  namespace: string
+  name: string
+  /** Optional full K8s resource for request/limit overlay derivation. */
+  resource?: any
+}
+
+const SUPPORTED_KINDS = new Set([
+  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
+])
+
+export function PrometheusChartsGrid({
+  kind,
+  namespace,
+  name,
+  resource,
+}: PrometheusChartsGridProps) {
+  useAutoPromConnect()
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
+  const connectMutation = usePrometheusConnect()
+  const isConnected = status?.connected === true
+  const isSupported = SUPPORTED_KINDS.has(kind)
+  const showRestartLane = isSupported && kind !== 'Node'
+
+  const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
+
+  const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
+
+  // CPU + memory get reference-line overlays when a resource is provided.
+  // Computed once at the parent so each panel can stay otherwise generic.
+  const cpuRefLines = useMemo<ReferenceLine[] | undefined>(
+    () => (resource ? computeRequestLimitLines(resource, kind, 'cpu') : undefined),
+    [resource, kind],
+  )
+  const memRefLines = useMemo<ReferenceLine[] | undefined>(
+    () => (resource ? computeRequestLimitLines(resource, kind, 'memory') : undefined),
+    [resource, kind],
+  )
+
+  if (!isSupported) return null
+
+  if (statusLoading) {
+    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>
+    )
+  }
+
+  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 findCategory = (key: PrometheusMetricCategory): CategoryDef | undefined =>
+    categories.find(c => c.key === key)
+
+  const primaryCats: { def: CategoryDef; refLines?: ReferenceLine[] }[] = []
+  const cpu = findCategory('cpu')
+  if (cpu) primaryCats.push({ def: cpu, refLines: cpuRefLines })
+  const mem = findCategory('memory')
+  if (mem) primaryCats.push({ def: mem, refLines: memRefLines })
+  if (kind !== 'Node') {
+    const rx = findCategory('network_rx')
+    if (rx) primaryCats.push({ def: rx })
+    const tx = findCategory('network_tx')
+    if (tx) primaryCats.push({ def: tx })
+  }
+  const disk = findCategory('filesystem')
+  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats
+
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      <div className="flex shrink-0 justify-end px-4 pt-3">
+        <select
+          aria-label="Metrics time range"
+          value={timeRange}
+          onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
+          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary shadow-theme-sm focus:outline-none focus:ring-1 focus:ring-accent/50"
+        >
+          {TIME_RANGES.map(tr => (
+            <option key={tr.value} value={tr.value}>{tr.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Restart lane sits above the grid so its markers visually align with
+          the time axis of the charts below. */}
+      {showRestartLane && (
+        <div className="px-4 pt-3">
+          <RestartEventLane kind={kind} namespace={namespace} name={name} range={timeRange} />
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
+        {chartPanels.map(({ def, refLines }) => (
+          <MetricsPanel
+            key={def.key}
+            category={def}
+            kind={kind}
+            namespace={namespace}
+            name={name}
+            timeRange={timeRange}
+            referenceLines={refLines}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface MetricsPanelProps {
+  category: CategoryDef
+  kind: string
+  namespace: string
+  name: string
+  timeRange: PrometheusTimeRange
+  referenceLines?: ReferenceLine[]
+}
+
+function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLines }: MetricsPanelProps) {
+  const { data: metrics, isLoading, error } = usePrometheusResourceMetrics(
+    kind, namespace, name, category.key, timeRange, true,
+  )
+
+  const series = metrics?.result?.series
+  const hasData = (series?.length ?? 0) > 0
+
+  // "% of limit / request" derived from current peak vs reference lines.
+  // Without this, a low-utilization workload with a high limit looks like
+  // an empty chart — the user can't tell healthy from starved at a glance.
+  const saturation = hasData && series && referenceLines
+    ? computeSaturation(series, referenceLines)
+    : undefined
+
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface/30 p-3 flex flex-col min-h-[260px]">
+      <header className="flex items-center justify-between mb-2 gap-3">
+        <div className="flex items-center gap-2">
+          <h3 className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide">
+            {category.label}
+          </h3>
+          {saturation && <SaturationChip {...saturation} />}
+        </div>
+        {hasData && series && (
+          <MetricsSummary series={series} category={category} unit={metrics!.unit} />
+        )}
+      </header>
+
+      <div className="flex-1 min-h-[200px]">
+        {isLoading ? (
+          <PanelLoading />
+        ) : error ? (
+          <PanelError message={(error as Error).message} />
+        ) : hasData && series ? (
+          <>
+            <AreaChart
+              series={series}
+              color={category.chartColor}
+              fillColor={category.fillColor}
+              unit={metrics!.unit}
+              referenceLines={referenceLines}
+            />
+            {series.length > 1 && (
+              <div className="mt-1.5">
+                <SeriesLegend series={series} color={category.chartColor} />
+              </div>
+            )}
+          </>
+        ) : (
+          <PanelNoData hint={metrics?.hint} />
+        )}
+      </div>
+    </section>
+  )
+}
+
+function SaturationChip({ ratio, against }: { ratio: number; against: 'limit' | 'request' }) {
+  // Thresholds match the rightsizing tone vocabulary: amber from 75% (start
+  // watching), red at 90% (the same OOM-risk boundary the backend uses for
+  // memory in classifyRightsizing).
+  const tone: Severity = ratio >= 0.9 ? 'error' : ratio >= 0.75 ? 'warning' : ratio < 0.05 ? 'info' : 'neutral'
+  const label = `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}% of ${against}`
+  return <span className={`badge badge-sm ${SEVERITY_BADGE[tone]}`}>{label}</span>
+}
+
+function PanelLoading() {
+  return (
+    <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">
+      <Loader2 className="w-4 h-4 animate-spin mr-2" />
+      Loading…
+    </div>
+  )
+}
+
+function PanelError({ message }: { message: string }) {
+  return (
+    <div className={`flex flex-col items-center justify-center h-full min-h-[160px] ${SEVERITY_TEXT.warning} text-xs px-3 text-center`}>
+      Query failed
+      <Tooltip content={message} wrapperClassName="!block w-full">
+      <span className="text-theme-text-quaternary mt-0.5 line-clamp-2">{message}</span>
+      </Tooltip>
+    </div>
+  )
+}
+
+function PanelNoData({ hint }: { hint?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs px-3 text-center">
+      No data
+      {hint && <span className="text-theme-text-quaternary mt-1 max-w-xs">{hint}</span>}
+    </div>
+  )
+}
+
+export { isPrometheusSupported } from './PrometheusCharts'

package/src/components/resource/RestartChart.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useMemo } from 'react'
+import { AlertCircle } from 'lucide-react'
+import { usePrometheusResourceMetrics, usePrometheusStatus, type PrometheusSeries, type PrometheusTimeRange } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
+
+/**
+ * RestartEventLane — vertical markers at each restart event, on a dedicated
+ * row below the chart. Markers stay readable when they cluster because they
+ * don't overlay the chart waveform. KSM-gated (uses kube_pod_container_status_restarts_total)
+ * — silently hidden when Prom isn't connected or the series doesn't exist.
+ */
+export function RestartEventLane({ kind, namespace, name, range = '1h' }: {
+  kind: string
+  namespace: string
+  name: string
+  range?: PrometheusTimeRange
+}) {
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+  const { data: metrics, isLoading, error } = usePrometheusResourceMetrics(kind, namespace, name, 'restarts', range, isConnected)
+
+  const restarts = useMemo(() => collectRestartEvents(metrics?.result?.series), [metrics])
+
+  // A real Prom-side failure shouldn't look identical to "no restarts" — log
+  // it so an operator investigating a missing lane has a breadcrumb. The lane
+  // still hides because we don't want a permanent red banner on every pod.
+  // Effect-gated so we log once per error change, not on every re-render.
+  useEffect(() => {
+    if (error) {
+      console.warn('[RestartEventLane] restart query failed', error)
+    }
+  }, [error])
+
+  if (!isConnected || isLoading) return null
+  if (restarts.length === 0) return null
+
+  // Position markers within the chart's full time window — not the
+  // min/max of detected events — so a cluster of restarts at the start
+  // of the window doesn't visually spread across the whole lane.
+  const nowSec = Date.now() / 1000
+  const windowStart = nowSec - rangeToSeconds(range)
+  const span = nowSec - windowStart
+
+  return (
+    <div className="rounded-md border border-amber-500/20 bg-amber-500/[0.04] px-3 py-2">
+      <div className="flex items-center gap-2 mb-1.5">
+        <AlertCircle className="w-3.5 h-3.5 text-amber-500/70" />
+        <span className="text-xs font-medium text-theme-text-secondary">
+          Restarts in last {range}
+        </span>
+        <span className="text-xs text-theme-text-quaternary tabular-nums">
+          {restarts.reduce((n, r) => n + r.value, 0)} total
+        </span>
+      </div>
+      <div className="relative h-5">
+        {/* Baseline */}
+        <div className="absolute inset-x-0 top-1/2 h-px bg-theme-border/40" />
+        {/* Markers */}
+        {restarts.map((r, i) => {
+          const left = `${Math.max(0, Math.min(100, ((r.timestamp - windowStart) / span) * 100))}%`
+          return (
+            <Tooltip
+              key={i}
+              content={`${new Date(r.timestamp * 1000).toLocaleString()} · ${r.label}${r.value > 1 ? ` ×${r.value}` : ''}`}
+              wrapperClassName="absolute top-0 h-full w-px bg-amber-500/80"
+              wrapperStyle={{ left }}
+            >
+              <div className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-amber-500" />
+            </Tooltip>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Internals
+// ============================================================================
+
+interface RestartEvent {
+  timestamp: number
+  value: number
+  label: string
+}
+
+function collectRestartEvents(series: PrometheusSeries[] | undefined): RestartEvent[] {
+  if (!series) return []
+  const events: RestartEvent[] = []
+  for (const s of series) {
+    const pod = s.labels.pod ?? 'pod'
+    // `changes(...[1h])` produces a rolling count, so a single restart shows
+    // value=1 for ~60 consecutive samples (the whole 1h window). Emit a marker
+    // only when the count increases — that's when a *new* restart entered the
+    // window — and use the increase as the marker's restart count.
+    let prev: number | null = null
+    for (const dp of s.dataPoints) {
+      // Skip gap samples and drop the previous reference, so the next finite
+      // sample isn't diffed across the gap — a delta across a gap is
+      // meaningless and could fabricate a restart count. We compare only
+      // consecutive finite samples.
+      if (dp.value == null) {
+        prev = null
+        continue
+      }
+      if (prev !== null) {
+        // Only count positive deltas — restarts that entered the rolling 1h
+        // window during the chart range. The first sample's value covers
+        // [start-1h, start] which is outside the user's chosen window; counting
+        // it would inflate the total with pre-window restarts.
+        const delta = dp.value - prev
+        if (delta > 0) {
+          events.push({ timestamp: dp.timestamp, value: delta, label: pod })
+        }
+      }
+      prev = dp.value
+    }
+  }
+  events.sort((a, b) => a.timestamp - b.timestamp)
+  return events
+}
+
+function rangeToSeconds(range: PrometheusTimeRange): number {
+  const match = range.match(/^(\d+)([mhd])$/)
+  if (!match) return 3600 // default to 1h if unrecognized
+  const n = parseInt(match[1], 10)
+  switch (match[2]) {
+    case 'm': return n * 60
+    case 'h': return n * 3600
+    case 'd': return n * 86400
+    default: return 3600
+  }
+}

package/src/components/resource/RightsizingStrip.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest'
+import type { RightsizingRow } from '../../api/client'
+import {
+  getRightsizingExplanation,
+  getRightsizingPresentation,
+  RIGHTSIZING_METHODOLOGY,
+  RIGHTSIZING_DOCS_URL,
+  RIGHTSIZING_SUMMARY,
+} from './RightsizingStrip'
+
+const row = (overrides: Partial<RightsizingRow> = {}): RightsizingRow => ({
+  container: 'server',
+  resource: 'cpu',
+  fit: 'balanced',
+  confidence: 'high',
+  sampleCount: 2016,
+  expectedSamples: 2016,
+  coverage: 1,
+  hpaManaged: false,
+  hpaEvidenceAvailable: true,
+  oomEvidenceAvailable: true,
+  throttleAvailable: true,
+  ...overrides,
+})
+
+describe('rightsizing presentation', () => {
+  it('keeps fit, confidence, and runtime risk as separate concepts', () => {
+    expect(getRightsizingPresentation('oversized')).toEqual({
+      label: 'Oversized',
+      severity: 'info',
+    })
+    expect(getRightsizingPresentation('under_requested')).toEqual({
+      label: 'Under-requested',
+      severity: 'warning',
+    })
+    expect(getRightsizingPresentation('insufficient_history')).toEqual({
+      label: 'Insufficient history',
+      severity: 'neutral',
+    })
+  })
+
+  it('labels query failures independently from insufficient history', () => {
+    expect(getRightsizingPresentation('insufficient_history', 'usage query failed')).toEqual({
+      label: 'Query failed',
+      severity: 'error',
+    })
+  })
+
+  it('explains why recommendations are withheld without inventing a zero-risk result', () => {
+    expect(getRightsizingExplanation(row({ recommendationReason: 'hpa_managed' }))).toContain(
+      'HPA manages cpu',
+    )
+    expect(
+      getRightsizingExplanation(row({ resource: 'memory', recommendationReason: 'oom_evidence' })),
+    ).toContain('OOM evidence')
+    expect(
+      getRightsizingExplanation(row({ recommendationReason: 'hpa_evidence_unavailable' })),
+    ).toContain('could not verify HPA')
+    expect(
+      getRightsizingExplanation(
+        row({
+          resource: 'memory',
+          recommendationReason: 'oom_evidence_unavailable',
+        }),
+      ),
+    ).toContain('could not verify recent OOM')
+    expect(getRightsizingExplanation(row({ throttleAvailable: false }))).toContain(
+      'throttling metrics are unavailable',
+    )
+  })
+
+  it('separates the demand target from a conservative reduction step', () => {
+    const explanation = getRightsizingExplanation(
+      row({
+        fit: 'oversized',
+        currentRequest: '1',
+        recommendedRequest: '500m',
+        calculatedRequest: '10m',
+        reductionLimited: true,
+        bursty: true,
+        peak: { name: 'P99', value: 0.2, formatted: '200m' },
+      }),
+    )
+    expect(explanation).toContain('Demand-based target: 10m')
+    expect(explanation).toContain('conservative next step')
+    expect(explanation).toContain('CPU P99 reached 200m')
+  })
+
+  it('does not revive the misleading efficiency vocabulary', () => {
+    const copy = [
+      getRightsizingPresentation('balanced').label,
+      getRightsizingPresentation('oversized').label,
+      getRightsizingExplanation(row({ recommendationReason: 'request_within_fit_range' })),
+    ]
+      .join(' ')
+      .toLowerCase()
+    expect(copy).not.toContain('efficien')
+    expect(copy).not.toContain('waste')
+  })
+
+  it('sets the workload-level scope and methodology without promising savings or changes', () => {
+    expect(RIGHTSIZING_SUMMARY).toContain('this workload')
+    expect(RIGHTSIZING_SUMMARY).toContain('not a savings estimate or automatic change')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('CPU P95 and memory maximum')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Reductions are staged')
+    expect(RIGHTSIZING_METHODOLOGY).toContain('Radar does not change requests')
+    expect(RIGHTSIZING_DOCS_URL).toContain('/features/rightsizing')
+  })
+})