@skyhook-io/radar-app 1.13.3 → 1.13.5

package/src/components/resource/HPACharts.render.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'react-dom/server'
+
+// The access state is what is under test, so the fetch is stubbed rather than
+// run. isForbiddenError is deliberately NOT stubbed: a looser stand-in would
+// pass while the real predicate sent a denial down the silent-hide path, which
+// is the failure this component exists to prevent.
+import { ApiError } from '../../api/client'
+
+const forbidden = new ApiError('forbidden', 403)
+let metricsResult: { data?: unknown; error?: unknown } = {}
+let connected = true
+
+vi.mock('../../api/client', async (importActual) => ({
+  ...(await importActual<typeof import('../../api/client')>()),
+  usePrometheusHPAMetrics: () => metricsResult,
+  usePrometheusStatus: () => ({ data: { connected } }),
+  useAutoPromConnect: () => undefined,
+}))
+
+const { HPACharts } = await import('./HPACharts')
+
+const hpa = {
+  kind: 'HorizontalPodAutoscaler',
+  metadata: { namespace: 'shop', name: 'web' },
+  spec: { minReplicas: 2, maxReplicas: 10 },
+}
+
+const series = (values: number[]) => ({
+  resultType: 'matrix',
+  series: [{ labels: {}, dataPoints: values.map((value, i) => ({ timestamp: 1700000000 + i * 60, value })) }],
+})
+
+/**
+ * A denied chart must not look like an HPA that never scaled: an empty
+ * "no history" and "you may not see the history" are different facts.
+ */
+describe('HPACharts — access state', () => {
+  it('says the caller has no access when the curated endpoint returns 403', () => {
+    connected = true
+    metricsResult = { error: forbidden }
+    const html = renderToString(<HPACharts data={hpa} />)
+    expect(html).toContain('have access to metrics for this resource')
+    expect(html).toContain('Activity (last 1h)')
+    expect(html).not.toContain('Replicas')
+  })
+
+  it('plots the replica history when the endpoint answers', () => {
+    connected = true
+    metricsResult = { data: { current: series([2, 3, 4]), desired: series([4, 4, 4]) } }
+    const html = renderToString(<HPACharts data={hpa} />)
+    expect(html).toContain('Replicas')
+    expect(html).toContain('min 2')
+    expect(html).toContain('max 10')
+    expect(html).not.toContain('access to metrics')
+  })
+
+  it('stays hidden when KSM reports nothing for the HPA', () => {
+    connected = true
+    metricsResult = { data: { current: { resultType: 'matrix', series: [] }, desired: { resultType: 'matrix', series: [] } } }
+    expect(renderToString(<HPACharts data={hpa} />)).toBe('')
+  })
+
+  // A fault is not a denial: the chart keeps its silent-hide behaviour and
+  // leaves the breadcrumb to the console.
+  it('stays hidden on a non-authorization failure', () => {
+    connected = true
+    metricsResult = { error: new Error('Prometheus query failed') }
+    expect(renderToString(<HPACharts data={hpa} />)).toBe('')
+  })
+
+  it('stays hidden when Prometheus is not connected, even on a denial', () => {
+    connected = false
+    metricsResult = { error: forbidden }
+    expect(renderToString(<HPACharts data={hpa} />)).toBe('')
+  })
+})

package/src/components/resource/HPACharts.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useMemo } from 'react'
-import { LineChart } from 'lucide-react'
-import { usePromQLRange, usePrometheusStatus, useAutoPromConnect, type PrometheusSeries } from '../../api/client'
+import { LineChart, Lock } from 'lucide-react'
+import { AlertBanner } from '@skyhook-io/k8s-ui'
+import { usePrometheusHPAMetrics, usePrometheusStatus, useAutoPromConnect, isForbiddenError, 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.
+ * Sources from KSM `kube_horizontalpodautoscaler_status_{current,desired}_replicas`
+ * through the curated HPA metrics endpoint, which is gated on reading the HPA
+ * itself. Hidden silently when Prom isn't connected or KSM isn't reporting the
+ * series; a denial is shown, because an empty chart would read as "no history".
  *
  * 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
@@ -25,35 +28,43 @@ export function HPACharts({ data }: { data: any }) {
   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 { data: metrics, error } = usePrometheusHPAMetrics(namespace, name, '1h', enabled)
 
   const replicasPoints = useMemo(() => combineSeries({
-    current: currentRes?.series,
-    desired: desiredRes?.series,
-  }), [currentRes, desiredRes])
+    current: metrics?.current?.series,
+    desired: metrics?.desired?.series,
+  }), [metrics])
 
   // 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 })
+    if (error && !isForbiddenError(error)) {
+      console.warn('[HPACharts] HPA metrics query failed', { error })
     }
-  }, [currentErr, desiredErr])
+  }, [error])
 
   if (!isConnected) return null
+
+  if (isForbiddenError(error)) {
+    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-2 text-sm font-medium text-theme-text-secondary">
+          <LineChart className="w-4 h-4 text-theme-text-tertiary" />
+          Activity (last 1h)
+        </div>
+        <AlertBanner
+          variant="info"
+          icon={Lock}
+          title="You don't have access to metrics for this resource"
+          message="Replica history is available to users who can read this HorizontalPodAutoscaler."
+        />
+      </section>
+    )
+  }
+
   if (!replicasPoints) return null
 
   return (
@@ -111,10 +122,6 @@ function combineSeries(args: { current?: PrometheusSeries[]; desired?: Prometheu
   }
 }
 
-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

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";