@skyhook-io/radar-app 1.13.4 → 1.13.5

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,12 +1,17 @@
-import { useMemo, useState } from 'react'
-import { Loader2, Wifi, WifiOff } from 'lucide-react'
+import { useMemo, useState } from "react";
+import { Loader2, Wifi, WifiOff } from "lucide-react";
 import {
   AreaChart,
   SeriesLegend,
   computeSaturation,
+  describePodCoverage,
   type ReferenceLine,
-} from '@skyhook-io/k8s-ui/components/charts'
-import { SEVERITY_BADGE, SEVERITY_TEXT, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
+} 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,
@@ -14,7 +19,7 @@ import {
   useAutoPromConnect,
   type PrometheusMetricCategory,
   type PrometheusTimeRange,
-} from '../../api/client'
+} from "../../api/client";
 import {
   MetricsSummary,
   TIME_RANGES,
@@ -22,24 +27,31 @@ import {
   NODE_CATEGORIES,
   computeRequestLimitLines,
   type CategoryDef,
-} from './PrometheusCharts'
-import { RestartEventLane } from './RestartChart'
-import { Tooltip } from '../ui/Tooltip'
+} 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
+  kind: string;
+  namespace: string;
+  name: string;
   /** Optional full K8s resource for request/limit overlay derivation. */
-  resource?: any
+  resource?: any;
 }
 
 const SUPPORTED_KINDS = new Set([
-  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
-])
+  "Pod",
+  "Deployment",
+  "StatefulSet",
+  "DaemonSet",
+  "ReplicaSet",
+  "Job",
+  "CronJob",
+  "Node",
+]);
 
 export function PrometheusChartsGrid({
   kind,
@@ -47,29 +59,31 @@ export function PrometheusChartsGrid({
   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'
+  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 [timeRange, setTimeRange] = useState<PrometheusTimeRange>("1h");
 
-  const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
+  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 ? computeRequestLimitLines(resource, kind, "cpu") : undefined,
     [resource, kind],
-  )
+  );
   const memRefLines = useMemo<ReferenceLine[] | undefined>(
-    () => (resource ? computeRequestLimitLines(resource, kind, 'memory') : undefined),
+    () =>
+      resource ? computeRequestLimitLines(resource, kind, "memory") : undefined,
     [resource, kind],
-  )
+  );
 
-  if (!isSupported) return null
+  if (!isSupported) return null;
 
   if (statusLoading) {
     return (
@@ -77,7 +91,7 @@ export function PrometheusChartsGrid({
         <Loader2 className="w-5 h-5 animate-spin mr-2" />
         Checking Prometheus availability...
       </div>
-    )
+    );
   }
 
   if (!isConnected) {
@@ -85,9 +99,12 @@ export function PrometheusChartsGrid({
       <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-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'}
+            {status?.error ||
+              "Connect to view historical CPU, memory, and network metrics"}
           </p>
           <button
             onClick={() => connectMutation.mutate()}
@@ -103,25 +120,26 @@ export function PrometheusChartsGrid({
           </button>
         </div>
       </div>
-    )
+    );
   }
 
-  const findCategory = (key: PrometheusMetricCategory): CategoryDef | undefined =>
-    categories.find(c => c.key === key)
+  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 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
+  const disk = findCategory("filesystem");
+  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats;
 
   return (
     <div className="flex flex-col h-full overflow-auto">
@@ -129,11 +147,13 @@ export function PrometheusChartsGrid({
         <select
           aria-label="Metrics time range"
           value={timeRange}
-          onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
+          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>
+          {TIME_RANGES.map((tr) => (
+            <option key={tr.value} value={tr.value}>
+              {tr.label}
+            </option>
           ))}
         </select>
       </div>
@@ -142,11 +162,16 @@ export function PrometheusChartsGrid({
           the time axis of the charts below. */}
       {showRestartLane && (
         <div className="px-4 pt-3">
-          <RestartEventLane kind={kind} namespace={namespace} name={name} range={timeRange} />
+          <RestartEventLane
+            kind={kind}
+            namespace={namespace}
+            name={name}
+            range={timeRange}
+          />
         </div>
       )}
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 px-4 pt-4">
         {chartPanels.map(({ def, refLines }) => (
           <MetricsPanel
             key={def.key}
@@ -159,33 +184,85 @@ export function PrometheusChartsGrid({
           />
         ))}
       </div>
+
+      {/* Every chart here covers the same pods, so which pods those are is
+          stated once for the grid rather than repeated under each one. */}
+      <PodCoverageNote
+        kind={kind}
+        namespace={namespace}
+        name={name}
+        timeRange={timeRange}
+      />
     </div>
-  )
+  );
+}
+
+function PodCoverageNote({
+  kind,
+  namespace,
+  name,
+  timeRange,
+}: {
+  kind: string;
+  namespace: string;
+  name: string;
+  timeRange: PrometheusTimeRange;
+}) {
+  // Any category answers this: the pod scope is per workload, not per metric.
+  // This is the same query key the CPU panel uses, so it is already cached.
+  const { data } = usePrometheusResourceMetrics(
+    kind,
+    namespace,
+    name,
+    "cpu",
+    timeRange,
+    true,
+  );
+  const note = data ? describePodCoverage(data) : undefined;
+  if (!note) return null;
+  return <p className="px-4 pb-4 text-xs text-theme-text-tertiary">{note}</p>;
 }
 
 interface MetricsPanelProps {
-  category: CategoryDef
-  kind: string
-  namespace: string
-  name: string
-  timeRange: PrometheusTimeRange
-  referenceLines?: ReferenceLine[]
+  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,
-  )
+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
+  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
+  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]">
@@ -197,7 +274,11 @@ function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLin
           {saturation && <SaturationChip {...saturation} />}
         </div>
         {hasData && series && (
-          <MetricsSummary series={series} category={category} unit={metrics!.unit} />
+          <MetricsSummary
+            series={series}
+            category={category}
+            unit={metrics!.unit}
+          />
         )}
       </header>
 
@@ -226,16 +307,31 @@ function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLin
         )}
       </div>
     </section>
-  )
+  );
 }
 
-function SaturationChip({ ratio, against }: { ratio: number; against: 'limit' | 'request' }) {
+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>
+  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() {
@@ -244,27 +340,33 @@ function PanelLoading() {
       <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`}>
+    <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>
+        <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>}
+      {hint && (
+        <span className="text-theme-text-quaternary mt-1 max-w-xs">{hint}</span>
+      )}
     </div>
-  )
+  );
 }
 
-export { isPrometheusSupported } from './PrometheusCharts'
+export { isPrometheusSupported } from "./PrometheusCharts";

package/src/components/resources/PodFilePreview.test.tsx

@@ -0,0 +1,131 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { curateError, detectLanguage } from './PodFilePreview'
+
+// Every backend error code becomes a curated screen. What matters here is
+// that each code carries the right action affordances (Download vs Retry)
+// and never leaks a raw stderr line as the primary description.
+
+describe('curateError — action affordances per code', () => {
+  it('offers Download for file_too_large and names the actual size', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'file_too_large',
+      message: 'File is 12582912 bytes; preview is limited to 1048576 bytes.',
+      size: 12 * 1024 * 1024,
+    })
+    expect(shape.actions).toEqual({ download: true, retry: false })
+    expect(shape.description).toMatch(/MiB|MB/i)
+    // The raw byte-count message must not be the primary description.
+    expect(shape.description).not.toContain('12582912')
+  })
+
+  it('offers Download for binary_file and names the detected mime type', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'binary_file',
+      message: 'server-side detail',
+      mimeType: 'application/x-executable',
+    })
+    expect(shape.actions).toEqual({ download: true, retry: false })
+    expect(shape.description).toContain('application/x-executable')
+    expect(shape.description).not.toContain('server-side detail')
+  })
+
+  it('offers Retry for not_found — the file may have been rotated', () => {
+    const shape = curateError({ ok: false, code: 'not_found', message: 'x' })
+    expect(shape.actions.retry).toBe(true)
+    expect(shape.actions.download).toBe(false)
+  })
+
+  it('offers neither Download nor Retry for permission_denied', () => {
+    const shape = curateError({ ok: false, code: 'permission_denied', message: 'x' })
+    expect(shape.actions).toEqual({ download: false, retry: false })
+  })
+
+  it('offers neither for no_shell — the container cannot be read this way', () => {
+    const shape = curateError({ ok: false, code: 'no_shell', message: 'x' })
+    expect(shape.actions).toEqual({ download: false, retry: false })
+    expect(shape.description).toMatch(/distroless|scratch|no shell/i)
+  })
+
+  it('offers Retry for network_error and reveals details for diagnostics', () => {
+    const shape = curateError({
+      ok: false,
+      code: 'network_error',
+      message: 'Failed to fetch',
+    })
+    expect(shape.actions.retry).toBe(true)
+    expect(shape.details).toBe('Failed to fetch')
+  })
+
+  it('falls unknown/read_failed to a generic curated line with both actions', () => {
+    const shape = curateError({ ok: false, code: 'read_failed', message: 'stderr blob' })
+    expect(shape.actions).toEqual({ download: true, retry: true })
+    // The raw stderr belongs behind the details disclosure, not in the headline.
+    expect(shape.description).not.toContain('stderr blob')
+    expect(shape.details).toBe('stderr blob')
+  })
+})
+
+// The primary description is what an operator reads first. It must never be
+// the raw server message on any curated code — that was the maintainer's
+// specific concern ("curated error message rather than only dumping raw error").
+describe('curateError — no raw messages in primary text', () => {
+  const rawStderr = 'sh: /etc/shadow: Permission denied — some raw text'
+  it.each([
+    'file_too_large',
+    'binary_file',
+    'not_a_regular_file',
+    'not_found',
+    'permission_denied',
+    'no_shell',
+    'container_missing_tools',
+    'read_failed',
+  ] as const)('%s does not leak the raw server message into the title or description', (code) => {
+    const shape = curateError({ ok: false, code, message: rawStderr })
+    expect(shape.title).not.toContain(rawStderr)
+    expect(shape.description).not.toContain(rawStderr)
+  })
+})
+
+describe('detectLanguage', () => {
+  it.each([
+    ['nginx.conf', 'ini'],
+    ['deployment.yaml', 'yaml'],
+    ['deployment.yml', 'yaml'],
+    ['schema.json', 'yaml'],
+    ['Dockerfile', 'dockerfile'],
+    ['index.html', 'html'],
+    ['README.md', 'markdown'],
+    ['app.log', 'plaintext'],
+    ['unknown', 'plaintext'],
+    ['UPPERCASE.YAML', 'yaml'],
+  ])('%s → %s', (name, want) => {
+    expect(detectLanguage(name)).toBe(want)
+  })
+})
+
+// The empty state and the loading state each render distinct content so an
+// operator can tell them apart. These are the two states most likely to look
+// like a bug if they collide.
+describe('curated states are distinguishable', () => {
+  it('an empty file description is not confusable with a failure', () => {
+    const shape = curateError({ ok: false, code: 'read_failed', message: '' })
+    // The empty-file state is rendered separately (PreviewEmptyState) and does
+    // NOT come through curateError — a read_failed with an empty message must
+    // therefore never say "empty" in its curated description.
+    expect(shape.description.toLowerCase()).not.toContain('empty')
+  })
+})
+
+// Static markup smoke: the module imports at all and the exported pure helpers
+// stay tree-shakeable / server-renderable. If curateError were to reach for
+// browser-only globals this would trip.
+describe('curated shapes render on the server', () => {
+  it('renders a title node without throwing in a server context', () => {
+    const shape = curateError({ ok: false, code: 'binary_file', message: 'x', mimeType: 'application/octet-stream' })
+    const html = renderToStaticMarkup(<span>{shape.title}</span>)
+    expect(html).toContain('Binary')
+  })
+})