@skyhook-io/radar-app 1.9.1 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -22,6 +22,7 @@ import { HelmView } from './components/helm/HelmView'
 import { HelmCompareRoute } from './components/helm/HelmCompareRoute'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
+import { CapacityView } from './components/capacity/CapacityView'
 import { AuditView } from './components/audit/AuditView'
 import { IssuesPane } from './components/issues/IssuesPane'
 import { GitOpsView } from './components/gitops/GitOpsView'
@@ -56,7 +57,7 @@ import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import { useDocumentTitle } from './hooks/useDocumentTitle'
 import type { ClusterLoadState } from './types/clusterLoadState'
 import { useClusterLoadState } from './hooks/useClusterLoadState'
-import { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, HelpCircle, Loader2, RefreshCw } from 'lucide-react'
+import { Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, SquareTerminal, ShieldCheck, GitBranch, Gauge, HelpCircle, Loader2, RefreshCw } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
@@ -114,7 +115,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -127,6 +128,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'helm') return 'helm'
   if (path === 'traffic') return 'traffic'
   if (path === 'cost') return 'cost'
+  if (path === 'capacity') return 'capacity'
   if (path === 'workload') return 'workload'
   if (path === 'checks' || path === 'audit') return 'checks'  // /audit = legacy → checks
   if (path === 'gitops') return 'gitops'
@@ -162,6 +164,12 @@ function namespaceFilterDisabled(
       tooltip: 'Cost is reported per namespace across the whole cluster — the namespace filter doesn’t apply here.',
     }
   }
+  if (view === 'capacity') {
+    return {
+      disabled: true,
+      tooltip: 'Capacity is reported across the cluster — the namespace filter doesn’t apply here.',
+    }
+  }
   const segments = pathname.replace(/^\//, '').split('/')
   if (view === 'gitops' && segments[1] === 'detail') {
     return {
@@ -226,6 +234,12 @@ function radarPageTitle(pathname: string, search = '', apiResources?: APIResourc
   }
 
   // The landing view reads "Overview" rather than "Home" in the tab.
+  if (view === 'capacity') {
+    if (pathSegments[1] === 'pools') return decode(pathSegments[2] ?? '') || 'Capacity'
+    if (pathSegments[1] === 'demand') return 'Capacity Demand'
+    if (pathSegments[1] === 'activity') return 'Capacity Activity'
+  }
+
   if (view === 'home') return 'Overview'
   // Every other view's label is its id capitalized — getViewFromPath has already
   // normalized aliases (e.g. /audit → 'checks'), so no lookup table is needed.
@@ -785,7 +799,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const VIEW_SHORTCUT_KEYS: Record<ExtendedMainView, string> = {
     home: 'g h', resources: 'g r', issues: 'g i', topology: 'g t',
     applications: 'g a', timeline: 'g l', traffic: 'g f', helm: 'g m',
-    gitops: 'g o', checks: 'g u', cost: 'g c',
+    gitops: 'g o', checks: 'g u', cost: 'g c', capacity: 'g p',
     // Non-rail views (reachable via deep links / actions, not the rail) get no
     // dedicated mnemonic — listed for exhaustiveness so the type stays total.
     workload: '', compare: '', helmCompare: '',
@@ -965,9 +979,11 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   const fastInvalidationRef = useRef<{
     changedKinds: Set<string>   // every changed kind (any op) → detail drawer
     structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
+    environmentNamespaces: Set<string>
+    environmentPods: Map<string, Set<string>>
     secretsChanged: boolean
     timer: number | null
-  }>({ changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null })
+  }>({ changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
   const slowInvalidationRef = useRef<{
     updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
@@ -1002,6 +1018,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     fast.changedKinds.add(kind)
     if (structural) fast.structuralKinds.add(kind)
     if (kind === 'secrets') fast.secretsChanged = true
+    if ((kind === 'configmaps' || kind === 'secrets') && event.namespace) fast.environmentNamespaces.add(event.namespace)
+    if (kind === 'pods' && event.namespace && event.name) {
+      const names = fast.environmentPods.get(event.namespace) ?? new Set<string>()
+      names.add(event.name)
+      fast.environmentPods.set(event.namespace, names)
+    }
 
     const slow = slowInvalidationRef.current
     if (!structural) slow.updatedKinds.add(kind)
@@ -1023,11 +1045,19 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         if (f.secretsChanged) {
           queryClient.invalidateQueries({ queryKey: ['secret-cert-expiry'] })
         }
+        for (const namespace of f.environmentNamespaces) {
+          queryClient.invalidateQueries({ queryKey: ['pod-environment', namespace] })
+        }
+        for (const [namespace, names] of f.environmentPods) {
+          for (const name of names) {
+            queryClient.invalidateQueries({ queryKey: ['pod-environment', namespace, name] })
+          }
+        }
         // GitOps behavior unchanged from before — refreshes every batch when a
         // GitOps view is mounted (Phase 2 will make this relevance-aware).
         queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
         queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
-        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+        fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       }, 3000)
     }
 
@@ -1053,7 +1083,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
     if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
     if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
     slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
     timelineInvalidationRef.current = { timer: null }
   }, [])
@@ -1076,7 +1106,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
       if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
       if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), secretsChanged: false, timer: null }
+      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
       timelineInvalidationRef.current = { timer: null }
 
@@ -1729,6 +1759,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
             { view: 'home' as const, icon: Home, label: 'Home' },
             { view: 'topology' as const, icon: Network, label: 'Topology' },
             { view: 'resources' as const, icon: List, label: 'Resources' },
+            { view: 'capacity' as const, icon: Gauge, label: 'Capacity' },
             { view: 'timeline' as const, icon: Clock, label: 'Timeline' },
             { view: 'helm' as const, icon: Package, label: 'Helm' },
             { view: 'gitops' as const, icon: GitBranch, label: 'GitOps' },
@@ -2238,6 +2269,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           <CostView namespaces={namespaces} onBack={() => setMainView('home')} onOpenResource={navigateToResource} />
         )}
 
+        {mainView === 'capacity' && (
+          <CapacityView onOpenResource={navigateToResource} />
+        )}
+
         {/* Takeover splash. When the host claims the current view via
             fleetTakeoverHref, the redirect effect above is mid-flight — render a
             brief splash instead of the inline view (which would flash + fire its

package/src/api/apiResources.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { hasKarpenterNodePools } from './apiResources'
+
+describe('hasKarpenterNodePools', () => {
+  it('uses exact API discovery rather than top-CRD counts or kind name alone', () => {
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'karpenter.sh', verbs: ['get', 'list'] } as any])).toBe(true)
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'example.io', verbs: ['list'] } as any])).toBe(false)
+    expect(hasKarpenterNodePools([{ name: 'nodepools', kind: 'NodePool', group: 'karpenter.sh', verbs: ['get'] } as any])).toBe(false)
+    expect(hasKarpenterNodePools(undefined)).toBe(false)
+  })
+})

package/src/api/apiResources.ts

@@ -1,28 +1,67 @@
-import { useQuery } from '@tanstack/react-query'
-import type { APIResource } from '../types'
-import { apiUrl, getAuthHeaders, getCredentialsMode } from './config'
+import { useQuery } from "@tanstack/react-query";
+import type { APIResource } from "../types";
+import { apiUrl, getAuthHeaders, getCredentialsMode } from "./config";
 
 // Re-export pure functions from package
-export { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute, formatGroupName, shortenGroupName, getKindLabel, getKindPlural } from '@skyhook-io/k8s-ui'
-export type { ResourceCategory } from '@skyhook-io/k8s-ui'
+export {
+  categorizeResources,
+  CORE_RESOURCES,
+  findAPIResourceForRoute,
+  formatGroupName,
+  shortenGroupName,
+  getKindLabel,
+  getKindPlural,
+} from "@skyhook-io/k8s-ui";
+export type { ResourceCategory } from "@skyhook-io/k8s-ui";
 
 async function fetchJSON<T>(path: string): Promise<T> {
   const response = await fetch(apiUrl(path), {
     credentials: getCredentialsMode(),
     headers: getAuthHeaders(),
-  })
+  });
   if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Unknown error' }))
-    throw new Error(error.error || `HTTP ${response.status}`)
+    const error = await response
+      .json()
+      .catch(() => ({ error: "Unknown error" }));
+    throw new Error(error.error || `HTTP ${response.status}`);
   }
-  return response.json()
+  return response.json();
 }
 
 // Fetch all API resources from the cluster
 export function useAPIResources() {
   return useQuery<APIResource[]>({
-    queryKey: ['api-resources'],
-    queryFn: () => fetchJSON('/api-resources'),
+    queryKey: ["api-resources"],
+    queryFn: () => fetchJSON("/api-resources"),
     staleTime: 5 * 60 * 1000, // 5 minutes - resources don't change often
-  })
+  });
+}
+
+export function hasKarpenterNodePools(
+  resources: APIResource[] | undefined,
+): boolean {
+  return (
+    resources?.some(
+      (resource) =>
+        resource.name === "nodepools" &&
+        resource.group === "karpenter.sh" &&
+        resource.verbs?.includes("list"),
+    ) ?? false
+  );
+}
+
+// Whether the Capacity screens are reachable for this caller — the gate on
+// links and entry points into them. The per-request capability is authoritative
+// once it has resolved discovery + RBAC: available opens, denied/not_detected
+// closes (an RBAC-denied user would otherwise land on a 403 page). While the
+// capability is still syncing pre-discovery (cluster connecting), fall back to
+// the discovery signal so entry points don't flicker.
+export function karpenterCapacityAvailable(
+  capability: { state: string } | undefined,
+  apiResources: APIResource[] | undefined,
+): boolean {
+  if (capability?.state === "available") return true;
+  if (capability?.state === "denied" || capability?.state === "not_detected")
+    return false;
+  return hasKarpenterNodePools(apiResources);
 }

package/src/api/client.capacity.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import {
+  ApiError,
+  capacityRefetchInterval,
+  isCapacityCursorInvalidError,
+  shouldRetryCapacityQuery,
+} from "./client";
+
+describe("isCapacityCursorInvalidError", () => {
+  it("uses the structured capacity error code", () => {
+    expect(
+      isCapacityCursorInvalidError(
+        new ApiError("cursor expired", 400, {
+          error_code: "capacity_cursor_invalid",
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("does not infer cursor failures from status or message text", () => {
+    expect(
+      isCapacityCursorInvalidError(new ApiError("cursor expired", 400)),
+    ).toBe(false);
+    expect(
+      isCapacityCursorInvalidError(
+        new ApiError("unrelated", 400, { code: "another_error" }),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("shouldRetryCapacityQuery", () => {
+  it("does not retry stable client or authorization failures", () => {
+    expect(
+      shouldRetryCapacityQuery(0, new ApiError("invalid since", 400)),
+    ).toBe(false);
+    expect(shouldRetryCapacityQuery(0, new ApiError("forbidden", 403))).toBe(
+      false,
+    );
+    expect(shouldRetryCapacityQuery(0, new ApiError("not found", 404))).toBe(
+      false,
+    );
+  });
+
+  it("bounds retries for transient failures", () => {
+    expect(shouldRetryCapacityQuery(0, new ApiError("unavailable", 503))).toBe(
+      true,
+    );
+    expect(shouldRetryCapacityQuery(3, new ApiError("unavailable", 503))).toBe(
+      false,
+    );
+  });
+});
+
+describe("capacityRefetchInterval", () => {
+  const withData = (data?: { state?: string }) => ({ state: { data } });
+
+  it("suspends polling while the user holds a page cursor", () => {
+    // A background refetch on page 2 races membership changes and yanks the
+    // user back to page 1.
+    expect(
+      capacityRefetchInterval(undefined, true, "cursor-abc")(withData()),
+    ).toBe(false);
+  });
+
+  it("polls fast while the server reports syncing", () => {
+    expect(
+      capacityRefetchInterval(undefined, true)(withData({ state: "syncing" })),
+    ).toBe(2_500);
+  });
+
+  it("arms the normal cadence for a settled, enabled query", () => {
+    expect(
+      capacityRefetchInterval(
+        undefined,
+        true,
+      )(withData({ state: "available" })),
+    ).toBe(30_000);
+    expect(
+      capacityRefetchInterval(
+        { refetchInterval: 5_000 },
+        true,
+      )(withData({ state: "available" })),
+    ).toBe(5_000);
+  });
+
+  it("does not poll a disabled query, even while syncing", () => {
+    expect(
+      capacityRefetchInterval(undefined, false)(withData({ state: "syncing" })),
+    ).toBe(false);
+  });
+});