@skyhook-io/radar-app 1.1.1 → 1.2.0

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -0,0 +1,339 @@
+import { useMemo, useState } from 'react'
+import { BarChart3, ChevronDown, ChevronRight, 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,
+  usePrometheusRightsizing,
+  useAutoPromConnect,
+  type PrometheusMetricCategory,
+  type PrometheusTimeRange,
+  type RightsizingTone,
+} from '../../api/client'
+import {
+  MetricsSummary,
+  TIME_RANGES,
+  WORKLOAD_CATEGORIES,
+  NODE_CATEGORIES,
+  computeRequestLimitLines,
+  type CategoryDef,
+} from './PrometheusCharts'
+import { RestartEventLane } from './RestartChart'
+
+// 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) {
+  // Node-kind workloads don't have container restart semantics — KSM would
+  // return empty series anyway, but suppressing the lane spares the query.
+  const showRestartLane = kind !== 'Node'
+  useAutoPromConnect()
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
+  const connectMutation = usePrometheusConnect()
+  const isConnected = status?.connected === true
+  const isSupported = SUPPORTED_KINDS.has(kind)
+
+  const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
+  const [diskExpanded, setDiskExpanded] = useState(false)
+
+  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)
+
+  // Disk I/O is collapsed by default — niche metric.
+  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')
+
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      <div className="shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-theme-border bg-theme-surface/50">
+        <div className="flex items-center gap-2 text-sm font-medium text-theme-text-secondary">
+          <BarChart3 className="w-4 h-4 text-theme-text-tertiary" />
+          Metrics
+          <WorkloadHealthBadge kind={kind} namespace={namespace} name={name} />
+        </div>
+        <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>
+
+      {/* 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">
+        {primaryCats.map(({ def, refLines }) => (
+          <MetricsPanel
+            key={def.key}
+            category={def}
+            kind={kind}
+            namespace={namespace}
+            name={name}
+            timeRange={timeRange}
+            referenceLines={refLines}
+          />
+        ))}
+      </div>
+
+      {disk && (
+        <div className="px-4 pb-4">
+          <button
+            type="button"
+            onClick={() => setDiskExpanded(v => !v)}
+            className="flex items-center gap-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary py-1"
+          >
+            {diskExpanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            Disk I/O
+          </button>
+          {diskExpanded && (
+            <div className="mt-2">
+              <MetricsPanel
+                category={disk}
+                kind={kind}
+                namespace={namespace}
+                name={name}
+                timeRange={timeRange}
+              />
+            </div>
+          )}
+        </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>
+}
+
+// Severity ordering for rightsizing tones. Aligned with `Tone` constants in
+// `internal/prometheus/rightsizing.go` — adding a new tone there triggers a
+// TypeScript exhaustiveness error on the Record key set here.
+const TONE_RANK: Record<RightsizingTone, number> = {
+  ok: 0,
+  info: 1,
+  warning: 2,
+  alert: 3,
+  critical: 4,
+}
+
+function WorkloadHealthBadge({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
+  const supported = kind === 'Deployment' || kind === 'StatefulSet' || kind === 'DaemonSet'
+  const { data, error } = usePrometheusRightsizing(kind, namespace, name, supported)
+  if (!supported) return null
+  // Surface a neutral "Health unknown" pill when the rightsizing endpoint
+  // errors — otherwise an actually-throttled or OOM-risk workload would
+  // silently render as fine while we have no signal to display.
+  if (error && !data) {
+    const msg = error instanceof Error ? error.message : String(error)
+    return <span className={`badge badge-sm ${SEVERITY_BADGE.neutral}`} title={`Health check failed: ${msg}`}>Health unknown</span>
+  }
+  if (!data?.sampleAvailable || data.rows.length === 0) return null
+
+  const worst = data.rows.reduce<RightsizingTone>(
+    (acc, r) => (TONE_RANK[r.tone] > TONE_RANK[acc] ? r.tone : acc),
+    'ok',
+  )
+  // Skip the chip for the steady-state tones to avoid badge-blindness — we
+  // only want to draw the eye when there's something to address.
+  if (worst === 'ok' || worst === 'info') return null
+
+  const { label, severity }: { label: string; severity: Severity } =
+    worst === 'critical' ? { label: 'OOM risk', severity: 'error' } :
+    worst === 'alert' ? { label: 'CPU throttling', severity: 'alert' } :
+    /* warning */ { label: 'Needs review', severity: 'warning' }
+  return <span className={`badge badge-sm ${SEVERITY_BADGE[severity]}`}>{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
+      <span className="text-theme-text-quaternary mt-0.5 line-clamp-2" title={message}>{message}</span>
+    </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,124 @@
+import { useEffect, useMemo } from 'react'
+import { AlertCircle } from 'lucide-react'
+import { usePrometheusResourceMetrics, usePrometheusStatus, type PrometheusSeries, type PrometheusTimeRange } from '../../api/client'
+
+/**
+ * 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 (
+            <div
+              key={i}
+              className="absolute top-0 h-full w-px bg-amber-500/80"
+              style={{ left }}
+              title={`${new Date(r.timestamp * 1000).toLocaleString()} · ${r.label}${r.value > 1 ? ` ×${r.value}` : ''}`}
+            >
+              <div className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-amber-500" />
+            </div>
+          )
+        })}
+      </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) {
+      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.tsx

@@ -0,0 +1,167 @@
+import { ArrowRight, Check, Info, AlertTriangle } from 'lucide-react'
+import { SEVERITY_TEXT, SEVERITY_BADGE, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { usePrometheusRightsizing, usePrometheusStatus, type RightsizingTone, type RightsizingRow } from '../../api/client'
+
+const RIGHTSIZING_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
+
+/**
+ * RightsizingStrip — compact "current → recommended" table per container.
+ *
+ * Tone policy is deliberately mild:
+ *  - "Well-sized" or "Nx headroom" → neutral, no badge
+ *  - 5×+ over-provisioning → info ("could reduce"), not a problem
+ *  - P95 exceeds request but within limit → warning
+ *  - P95 exceeds CPU limit → alert (throttling)
+ *  - Memory P95 near limit → critical (active OOM risk)
+ *
+ * Anything below severe over-provisioning displays without flagging it as
+ * an issue. 2-3× headroom is the common, sensible default and should not nag.
+ */
+export function RightsizingStrip({ kind, namespace, name }: {
+  kind: string
+  namespace: string
+  name: string
+}) {
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+  const supported = RIGHTSIZING_KINDS.has(kind)
+  const { data, error, isLoading } = usePrometheusRightsizing(kind, namespace, name, isConnected && supported)
+
+  if (!supported || !isConnected || isLoading) return null
+  // Stay consistent with WorkloadHealthBadge — when the rightsizing query
+  // fails, surface a small inline note so the absence of recommendations
+  // doesn't read as "everything is fine."
+  if (error && !data) {
+    const msg = error instanceof Error ? error.message : String(error)
+    return (
+      <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
+        <header className="flex items-center justify-between mb-1">
+          <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
+        </header>
+        <p className="text-xs text-theme-text-tertiary" title={msg}>Right-sizing unavailable — Prometheus query failed.</p>
+      </section>
+    )
+  }
+  if (!data) return null
+  if (!data.sampleAvailable || data.rows.length === 0) {
+    // Backend distinguishes "workload too new / retention short" from "Prometheus
+    // query failed" — show the reason inline so operators have an actionable signal
+    // instead of an empty section.
+    if (!data.reason) return null
+    return (
+      <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
+        <header className="flex items-center justify-between mb-1">
+          <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
+        </header>
+        <p className="text-xs text-theme-text-tertiary">{data.reason}</p>
+      </section>
+    )
+  }
+
+  // Group rows by container so each container is a compact two-row block (cpu+mem).
+  const byContainer = new Map<string, RightsizingRow[]>()
+  for (const row of data.rows) {
+    if (!byContainer.has(row.container)) byContainer.set(row.container, [])
+    byContainer.get(row.container)!.push(row)
+  }
+
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface/40 p-3 mb-3">
+      <header className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-medium text-theme-text-primary">Right-sizing</h3>
+        <span className="text-[11px] text-theme-text-tertiary">
+          based on last {data.window} · P95
+        </span>
+      </header>
+      <div className="space-y-1.5">
+        {Array.from(byContainer.entries()).map(([container, rows]) => (
+          <div key={container} className="text-xs">
+            <div className="text-theme-text-secondary font-medium mb-0.5">{container}</div>
+            <div className="space-y-0.5 pl-2">
+              {rows.map(row => (
+                <RightsizingLine key={row.resource} row={row} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function RightsizingLine({ row }: { row: RightsizingRow }) {
+  const showRec = row.recommendedRequest && row.recommendedRequest !== row.currentRequest
+  const toneClass = toneClasses(row.tone)
+  const Icon = toneIcon(row.tone)
+
+  return (
+    <div className="flex items-center gap-2 text-theme-text-tertiary tabular-nums">
+      <span className="w-12 text-theme-text-quaternary uppercase tracking-wide text-[10px]">
+        {row.resource}
+      </span>
+
+      <span className="text-theme-text-secondary min-w-[3.5rem]">
+        {row.currentRequest ?? <span className="text-theme-text-quaternary italic">unset</span>}
+      </span>
+
+      {showRec && (
+        <>
+          <ArrowRight className="w-3 h-3 text-theme-text-quaternary shrink-0" />
+          <span className={`min-w-[3.5rem] ${toneClass.value}`}>
+            {row.recommendedRequest}
+          </span>
+        </>
+      )}
+
+      {row.p95 && (
+        <span className="text-theme-text-quaternary text-[10px]">
+          (P95 {row.p95})
+        </span>
+      )}
+
+      {row.tone !== 'ok' && Icon && (
+        <span className={`ml-auto inline-flex items-center gap-1 ${toneClass.badge} px-1.5 py-0.5 rounded text-[10px]`}>
+          <Icon className="w-3 h-3" />
+          <span>{row.message}</span>
+        </span>
+      )}
+
+      {row.tone === 'ok' && row.message && (
+        <span className="ml-auto text-theme-text-quaternary text-[10px]">{row.message}</span>
+      )}
+    </div>
+  )
+}
+
+const TONE_TO_SEVERITY: Record<RightsizingTone, Severity> = {
+  critical: 'error',
+  alert: 'alert',
+  warning: 'warning',
+  info: 'info',
+  ok: 'neutral',
+}
+
+function toneClasses(tone: RightsizingTone): { value: string; badge: string } {
+  if (tone === 'ok') return { value: 'text-theme-text-secondary', badge: '' }
+  if (tone === 'info') {
+    // "Could reduce" is a suggestion, not a problem — mute the badge.
+    return { value: SEVERITY_TEXT.info, badge: 'text-theme-text-tertiary bg-theme-elevated/60' }
+  }
+  const sev = TONE_TO_SEVERITY[tone]
+  return { value: SEVERITY_TEXT[sev], badge: SEVERITY_BADGE[sev] }
+}
+
+function toneIcon(tone: RightsizingTone) {
+  switch (tone) {
+    case 'critical':
+    case 'alert':
+    case 'warning':
+      return AlertTriangle
+    case 'info':
+      return Info
+    case 'ok':
+      return Check
+    default:
+      return null
+  }
+}