@skyhook-io/radar-app 1.1.1 → 1.1.2

package/src/components/compare/useCompareLauncher.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { CompareResourcePicker, refToParam, type CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useCompareCandidates } from './useCompareCandidates'
+import { useNavCustomization } from '../../context/NavCustomization'
+
+interface UseCompareLauncherArgs {
+  /** API plural kind (e.g. "deployments") — must match the route segment used by `/api/resources/{kind}`. */
+  kind: string
+  namespace: string
+  name: string
+  /** API group for the resource — required for CRDs that collide with core kinds. */
+  group?: string
+}
+
+interface CompareLauncher {
+  /** Wire this to ResourceActionsBar's `onCompareTo` prop. */
+  onCompareTo: () => void
+  /**
+   * Wire this to ResourceActionsBar's `onCompareAcrossClusters` prop. Undefined
+   * when the host (NavCustomization.crossClusterCompareHref) hasn't opted in
+   * — keeps the standalone Radar experience identical.
+   */
+  onCompareAcrossClusters?: () => void
+  /** Render this anywhere in the same tree to surface the picker dialog. */
+  picker: React.ReactNode
+}
+
+export function useCompareLauncher({ kind, namespace, name, group }: UseCompareLauncherArgs): CompareLauncher {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+  const kindLower = kind.toLowerCase()
+  const { candidates, isPending, error } = useCompareCandidates(kindLower, group, open)
+  const { crossClusterCompareHref } = useNavCustomization()
+
+  const onCompareTo = useCallback(() => setOpen(true), [])
+
+  const onCompareAcrossClusters = useCallback(() => {
+    if (!crossClusterCompareHref) return
+    const href = crossClusterCompareHref({ kind: kindLower, namespace, name, group })
+    window.location.assign(href)
+  }, [crossClusterCompareHref, kindLower, namespace, name, group])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      setOpen(false)
+      const params = new URLSearchParams()
+      params.set('kind', kindLower)
+      if (group) params.set('apiGroup', group)
+      params.set('a', refToParam({ namespace, name }))
+      params.set('b', refToParam({ namespace: picked.namespace, name: picked.name }))
+      navigate({ pathname: '/compare', search: params.toString() })
+    },
+    [navigate, kindLower, group, namespace, name],
+  )
+
+  const source: CompareResourceRef = { kind: kindLower, namespace, name, group }
+
+  const picker = (
+    <CompareResourcePicker
+      open={open}
+      onClose={() => setOpen(false)}
+      source={source}
+      candidates={candidates}
+      loading={open && isPending}
+      error={open ? error : null}
+      onPick={handlePick}
+    />
+  )
+
+  return {
+    onCompareTo,
+    onCompareAcrossClusters: crossClusterCompareHref ? onCompareAcrossClusters : undefined,
+    picker,
+  }
+}

package/src/components/cost/CostView.tsx

@@ -417,7 +417,7 @@ function CostHelpDialog({ onClose }: { onClose: () => void }) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative dialog max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto">
+      <div className="relative dialog max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-theme-border sticky top-0 bg-theme-surface rounded-t-lg">
           <div className="flex items-center gap-2">

package/src/components/gitops/GitOpsView.tsx

@@ -685,7 +685,7 @@ function extractHelmValues(kind: string, resource: any): HelmValuesData | null {
 
 function safeStringifyYaml(value: unknown): string {
   try {
-    return yaml.stringify(value)
+    return yaml.stringify(value, { lineWidth: 0 })
   } catch {
     return JSON.stringify(value, null, 2)
   }

package/src/components/helm/InstallWizard.tsx

@@ -106,11 +106,11 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
       }
     }
     if (baseValues && defaultValues) {
-      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues)))
+      setValuesYaml(yaml.stringify(deepMerge(baseValues, defaultValues), { lineWidth: 0 }))
     } else if (defaultValues && !baseValues) {
-      setValuesYaml(yaml.stringify(defaultValues))
+      setValuesYaml(yaml.stringify(defaultValues, { lineWidth: 0 }))
     } else if (baseValues) {
-      setValuesYaml(yaml.stringify(baseValues))
+      setValuesYaml(yaml.stringify(baseValues, { lineWidth: 0 }))
     }
   }, [localChartDetail?.values, artifactHubDetail?.values, isLocal, defaultValues])
 
@@ -349,7 +349,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   valuesYaml={valuesYaml}
                   defaultValuesYaml={
                     isLocal
-                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values) : '')
+                      ? (localChartDetail?.values ? yaml.stringify(localChartDetail.values, { lineWidth: 0 }) : '')
                       : (artifactHubDetail?.values || '')
                   }
                 />
@@ -664,7 +664,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   const ahDetail = chartDetail as ArtifactHubChartDetail | undefined
 
   const defaultValues = isLocal
-    ? (localDetail?.values ? yaml.stringify(localDetail.values) : '')
+    ? (localDetail?.values ? yaml.stringify(localDetail.values, { lineWidth: 0 }) : '')
     : (ahDetail?.values || '')
 
   const hasDefaults = Boolean(defaultValues)

package/src/components/helm/ValuesViewer.tsx

@@ -320,43 +320,7 @@ function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onTog
   )
 }
 
-// Simple JSON to YAML converter for display
-function jsonToYaml(obj: Record<string, unknown>, indent = 0): string {
-  const spaces = '  '.repeat(indent)
-  let result = ''
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === undefined) {
-      result += `${spaces}${key}: null\n`
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      result += jsonToYaml(value as Record<string, unknown>, indent + 1)
-    } else if (Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      for (const item of value) {
-        if (typeof item === 'object' && item !== null) {
-          result += `${spaces}- \n`
-          const itemYaml = jsonToYaml(item as Record<string, unknown>, indent + 2)
-          result += itemYaml
-        } else {
-          result += `${spaces}- ${formatValue(item)}\n`
-        }
-      }
-    } else {
-      result += `${spaces}${key}: ${formatValue(value)}\n`
-    }
-  }
-
-  return result
-}
-
-function formatValue(value: unknown): string {
-  if (typeof value === 'string') {
-    // Quote strings that contain special characters
-    if (value.includes(':') || value.includes('#') || value.includes('\n') || value.startsWith(' ') || value.endsWith(' ')) {
-      return `"${value.replace(/"/g, '\\"')}"`
-    }
-    return value
-  }
-  return String(value)
+function jsonToYaml(obj: Record<string, unknown>): string {
+  if (!obj || Object.keys(obj).length === 0) return ''
+  return yaml.stringify(obj, { lineWidth: 0 })
 }

package/src/components/home/HomeView.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useDashboard, useDashboardCRDs, useDashboardHelm } from '../../api/client'
 import type { DashboardResponse } from '../../api/client'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
@@ -25,6 +26,21 @@ interface HomeViewProps {
 
 export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToResourceKind, onNavigateToResource }: HomeViewProps) {
   const { data, isLoading, error } = useDashboard(namespaces)
+
+  // SSE is cluster-wide on small/medium clusters; the picker only narrows the
+  // dashboard summary, so re-apply the filter here or the legend disagrees.
+  const scopedTopology = useMemo<Topology | null>(() => {
+    if (!topology) return null
+    if (namespaces.length === 0) return topology
+    const nsSet = new Set(namespaces)
+    const nodes = topology.nodes.filter(n => {
+      const ns = n.data.namespace as string | undefined
+      return !ns || nsSet.has(ns)
+    })
+    const nodeIds = new Set(nodes.map(n => n.id))
+    const edges = topology.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+    return { nodes, edges }
+  }, [topology, namespaces])
   // CRDs and Helm load lazily after main dashboard to keep initial load fast
   const { data: crdsData } = useDashboardCRDs(namespaces)
   const { data: helmData } = useDashboardHelm(namespaces)
@@ -100,7 +116,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
             {/* Primary cards — 2-col grid */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
-                topology={topology}
+                topology={scopedTopology}
                 summary={data.topologySummary}
                 onNavigate={() => onNavigateToView('topology')}
               />
@@ -110,7 +126,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
               />
               <ActivitySummary
                 namespaces={namespaces}
-                topology={topology}
+                topology={scopedTopology}
                 onNavigate={() => onNavigateToView('timeline')}
               />
               <TrafficSummary

package/src/components/resource/HPACharts.tsx

@@ -0,0 +1,232 @@
+import { useEffect, useMemo } from 'react'
+import { LineChart } from 'lucide-react'
+import { usePromQLRange, usePrometheusStatus, useAutoPromConnect, type PrometheusSeries } from '../../api/client'
+
+/**
+ * HPACharts — replicas-over-time chart for an HPA.
+ *
+ * Sources from KSM `kube_horizontalpodautoscaler_status_{current,desired}_replicas`.
+ * Hidden silently when Prom isn't connected or KSM isn't reporting the series.
+ *
+ * Only the replicas series is plotted — KSM doesn't expose the observed metric
+ * the HPA target compares against, so an "observed vs target" chart would need
+ * cAdvisor derivation.
+ */
+export function HPACharts({ data }: { data: any }) {
+  // HPA detail can be the first Prometheus-backed surface a user opens; without
+  // this, the chart silently stays empty until they open a workload metrics tab.
+  useAutoPromConnect()
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const spec = data?.spec ?? {}
+  const min = spec.minReplicas ?? 1
+  const max = spec.maxReplicas
+
+  const currentQuery = useMemo(
+    () => `kube_horizontalpodautoscaler_status_current_replicas{namespace="${escapeLabel(namespace)}",horizontalpodautoscaler="${escapeLabel(name)}"}`,
+    [namespace, name],
+  )
+  const desiredQuery = useMemo(
+    () => `kube_horizontalpodautoscaler_status_desired_replicas{namespace="${escapeLabel(namespace)}",horizontalpodautoscaler="${escapeLabel(name)}"}`,
+    [namespace, name],
+  )
+
+  const enabled = isConnected && Boolean(namespace && name)
+  const { data: currentRes, error: currentErr } = usePromQLRange(currentQuery, '1h', enabled)
+  const { data: desiredRes, error: desiredErr } = usePromQLRange(desiredQuery, '1h', enabled)
+
+  const replicasPoints = useMemo(() => combineSeries({
+    current: currentRes?.series,
+    desired: desiredRes?.series,
+  }), [currentRes, desiredRes])
+
+  // Surface Prom-side failures in the console so an operator debugging a
+  // missing HPA chart has a breadcrumb; the chart still hides silently when
+  // KSM isn't reporting (the common no-data case). Effect-gated so we log
+  // once per error change, not on every re-render.
+  useEffect(() => {
+    if (currentErr || desiredErr) {
+      console.warn('[HPACharts] PromQL query failed', { currentErr, desiredErr })
+    }
+  }, [currentErr, desiredErr])
+
+  if (!isConnected) return null
+  if (!replicasPoints) return null
+
+  return (
+    <section className="mt-4 rounded-lg border border-theme-border bg-theme-surface/30 p-3">
+      <div className="flex items-center gap-2 mb-3 text-sm font-medium text-theme-text-secondary">
+        <LineChart className="w-4 h-4 text-theme-text-tertiary" />
+        Activity (last 1h)
+      </div>
+
+      <DualLineChart
+        title="Replicas"
+        height={120}
+        primary={{ label: 'current', points: replicasPoints.current, color: '#3b82f6' }}
+        secondary={{ label: 'desired', points: replicasPoints.desired, color: '#a855f7', dashed: true }}
+        referenceLines={[
+          { value: min, label: `min ${min}`, color: '#94a3b8' },
+          ...(max != null ? [{ value: max, label: `max ${max}`, color: '#94a3b8' }] : []),
+        ]}
+        formatY={(v) => v.toFixed(0)}
+      />
+    </section>
+  )
+}
+
+// ============================================================================
+// Internals
+// ============================================================================
+
+interface FlatPoint { timestamp: number; value: number }
+
+function extractFirstSeries(series: PrometheusSeries[]): FlatPoint[] | null {
+  for (const s of series) {
+    if (s.dataPoints.length > 0) {
+      return s.dataPoints.map(dp => ({ timestamp: dp.timestamp, value: dp.value }))
+    }
+  }
+  return null
+}
+
+function combineSeries(args: { current?: PrometheusSeries[]; desired?: PrometheusSeries[] }): {
+  current: FlatPoint[]
+  desired: FlatPoint[]
+} | null {
+  const current = args.current ? extractFirstSeries(args.current) : null
+  const desired = args.desired ? extractFirstSeries(args.desired) : null
+  if (!current && !desired) return null
+  return {
+    current: current ?? [],
+    desired: desired ?? [],
+  }
+}
+
+function escapeLabel(s: string): string {
+  return s.replace(/[\\"]/g, '\\$&')
+}
+
+// ============================================================================
+// DualLineChart — minimal two-line chart for HPA-style time series.
+// Deliberately separate from PrometheusCharts.AreaChart: the chart shapes are
+// different (line not area, discrete integer Y axis for replicas), and
+// reusing the area chart would require adding more knobs to it.
+// ============================================================================
+
+interface LineSpec {
+  label: string
+  points: FlatPoint[]
+  color: string
+  dashed?: boolean
+}
+
+interface RefLine { value: number; label: string; color: string }
+
+function DualLineChart({ title, height, primary, secondary, referenceLines, formatY }: {
+  title: string
+  height: number
+  primary: LineSpec
+  secondary?: LineSpec
+  referenceLines?: RefLine[]
+  formatY: (v: number) => string
+}) {
+  const allPoints = [...primary.points, ...(secondary?.points ?? [])]
+  if (allPoints.length === 0) {
+    return (
+      <div className="text-xs text-theme-text-tertiary">{title} — no data</div>
+    )
+  }
+
+  const minTs = Math.min(...allPoints.map(p => p.timestamp))
+  const maxTs = Math.max(...allPoints.map(p => p.timestamp))
+  const tsSpan = Math.max(maxTs - minTs, 60)
+
+  let maxV = Math.max(...allPoints.map(p => p.value), 1)
+  if (referenceLines) {
+    for (const rl of referenceLines) maxV = Math.max(maxV, rl.value)
+  }
+  // Add 10% headroom so the top line isn't flush with the top edge.
+  maxV = maxV * 1.1
+
+  const width = 600
+  const marginL = 36
+  const marginR = 16
+  const marginT = 4
+  const marginB = 18
+  const plotW = width - marginL - marginR
+  const plotH = height - marginT - marginB
+
+  const toX = (ts: number) => marginL + ((ts - minTs) / tsSpan) * plotW
+  const toY = (v: number) => marginT + plotH - (v / maxV) * plotH
+
+  const drawLine = (spec: LineSpec) => {
+    if (spec.points.length === 0) return null
+    const d = spec.points.map((p, i) => `${i === 0 ? 'M' : 'L'}${toX(p.timestamp).toFixed(1)},${toY(p.value).toFixed(1)}`).join(' ')
+    return (
+      <path
+        d={d}
+        fill="none"
+        stroke={spec.color}
+        strokeWidth="1.75"
+        strokeLinejoin="round"
+        strokeDasharray={spec.dashed ? '4 3' : undefined}
+      />
+    )
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-theme-text-secondary">{title}</span>
+        <div className="flex items-center gap-3">
+          <Legend color={primary.color} label={primary.label} />
+          {secondary && <Legend color={secondary.color} label={secondary.label} dashed />}
+        </div>
+      </div>
+      <svg viewBox={`0 0 ${width} ${height}`} className="w-full" preserveAspectRatio="none">
+        {/* Y ticks */}
+        {[0, 0.5, 1].map(frac => {
+          const v = maxV * frac
+          const y = toY(v)
+          return (
+            <g key={frac}>
+              <line x1={marginL} y1={y} x2={width - marginR} y2={y} stroke="currentColor" className="text-theme-border/30" strokeWidth="1" />
+              <text x={marginL - 4} y={y + 3} textAnchor="end" fontSize="9" fontFamily="ui-monospace, monospace" className="fill-theme-text-tertiary">
+                {formatY(v)}
+              </text>
+            </g>
+          )
+        })}
+        {/* Reference lines */}
+        {referenceLines?.map((rl, i) => {
+          const y = toY(rl.value)
+          return (
+            <g key={`rl-${i}`}>
+              <line x1={marginL} y1={y} x2={width - marginR} y2={y} stroke={rl.color} strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
+              <text x={width - marginR - 4} y={y - 2} textAnchor="end" fontSize="9" fontFamily="ui-monospace, monospace" fill={rl.color} opacity="0.85">
+                {rl.label}
+              </text>
+            </g>
+          )
+        })}
+        {drawLine(primary)}
+        {secondary && drawLine(secondary)}
+      </svg>
+    </div>
+  )
+}
+
+function Legend({ color, label, dashed }: { color: string; label: string; dashed?: boolean }) {
+  return (
+    <span className="flex items-center gap-1 text-[11px] text-theme-text-tertiary">
+      <svg width="14" height="6" aria-hidden>
+        <line x1="0" y1="3" x2="14" y2="3" stroke={color} strokeWidth="1.75" strokeDasharray={dashed ? '3 2' : undefined} />
+      </svg>
+      {label}
+    </span>
+  )
+}

package/src/components/resource/PVCUsageBar.tsx

@@ -0,0 +1,59 @@
+import { formatMemoryBytes } from '@skyhook-io/k8s-ui/utils/format'
+import { useAutoPromConnect, usePrometheusPVCUsage, usePrometheusStatus } from '../../api/client'
+
+/**
+ * PVCUsageBar — single-line capacity gauge derived from kubelet_volume_stats_*.
+ *
+ * Hidden silently when:
+ *  - Prometheus isn't connected
+ *  - The CSI driver doesn't implement NodeGetVolumeStats
+ *  - Prometheus isn't scraping kubelet endpoints (notably GMP default config)
+ *
+ * Operators get nothing rather than a "no data" message that'd look like Radar
+ * is broken — the absence is information enough.
+ */
+export function PVCUsageBar({ namespace, name }: { namespace: string; name: string }) {
+  // PVC detail can be the first Prometheus-backed surface a user opens; without
+  // this, the gauge silently stays hidden until they open a workload metrics tab.
+  useAutoPromConnect()
+  const { data: status } = usePrometheusStatus()
+  const isConnected = status?.connected === true
+  const { data: usage } = usePrometheusPVCUsage(namespace, name, isConnected)
+
+  if (!usage || !usage.hasData) return null
+
+  const pct = Math.max(0, Math.min(1, usage.ratio))
+  const usedLabel = formatMemoryBytes(usage.used)
+  const capLabel = formatMemoryBytes(usage.capacity)
+  const pctLabel = `${(pct * 100).toFixed(0)}%`
+
+  // Tone: green well under, amber > 75%, red > 90%. PVCs fill silently — the
+  // top tone is justified because the consequence (write failures) is severe.
+  const tone = pct >= 0.9 ? 'critical' : pct >= 0.75 ? 'warning' : 'ok'
+  const barColor =
+    tone === 'critical' ? 'bg-red-500' :
+    tone === 'warning' ? 'bg-amber-500' :
+    'bg-emerald-500'
+  // Light/dark-paired text tones — `text-red-400` alone washes out in light
+  // mode (Tailwind's 400 stop is calibrated for dark backgrounds).
+  const textColor =
+    tone === 'critical' ? 'text-red-700 dark:text-red-400' :
+    tone === 'warning' ? 'text-amber-700 dark:text-amber-400' :
+    'text-theme-text-secondary'
+
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface/30 p-3">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide">Usage</span>
+        <span className={`text-sm font-semibold tabular-nums ${textColor}`}>
+          {usedLabel} <span className="text-theme-text-quaternary font-normal">/</span> {capLabel}
+          <span className="ml-2 text-theme-text-tertiary text-xs font-normal">({pctLabel})</span>
+        </span>
+      </div>
+      <div className="h-2 rounded-full bg-theme-elevated overflow-hidden">
+        <div className={`h-full ${barColor} transition-all`} style={{ width: `${pct * 100}%` }} />
+      </div>
+    </section>
+  )
+}
+