@skyhook-io/radar-app 1.9.0 → 1.9.2

package/src/components/home/CapacityCard.test.tsx

@@ -0,0 +1,150 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderToString } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type {
+  CapacityOverviewResponse,
+  CapacityResponseMeta,
+  CapacitySourceCoverage,
+} from "@skyhook-io/k8s-ui";
+import { CapacityCard } from "./CapacityCard";
+
+let mockKarpenterState = "available";
+vi.mock("../../contexts/CapabilitiesContext", () => ({
+  useCapabilitiesContext: () => ({ karpenter: { state: mockKarpenterState } }),
+}));
+beforeEach(() => {
+  mockKarpenterState = "available";
+});
+
+const generatedAt = "2026-07-13T08:00:00Z";
+
+function sourceCoverage(
+  scope: CapacitySourceCoverage["scope"] = "cluster",
+): CapacitySourceCoverage {
+  return {
+    status: "available",
+    scope,
+    observedAt: generatedAt,
+    impactFields: [],
+  };
+}
+
+const meta: CapacityResponseMeta = {
+  schemaVersion: "v1alpha1",
+  generatedAt,
+  clusterContext: { contextName: "radar-test-eks" },
+  provider: {
+    type: "karpenter",
+    controllerMode: "self_managed",
+    apiVersionsByKind: {},
+    nodeClassKinds: [],
+    features: {},
+  },
+  coverage: { nodes: sourceCoverage(), pods: sourceCoverage() },
+};
+
+function overview(
+  summary: Partial<CapacityOverviewResponse["summary"]> = {},
+  coverage: CapacityResponseMeta["coverage"] = meta.coverage,
+): CapacityOverviewResponse {
+  return {
+    ...meta,
+    coverage,
+    state: "available",
+    summary: {
+      actions: [],
+      poolCount: 2,
+      claimCount: 4,
+      nodeCount: 6,
+      pendingPodCount: 3,
+      managers: [],
+      ...summary,
+    },
+    pools: [],
+    poolsTruncated: false,
+    groups: [],
+    orphanAutoscalerGroups: [],
+    orphanAutoscalerGroupsMeta: { total: 0, returned: 0, truncated: false },
+  };
+}
+
+function renderCard(data: CapacityOverviewResponse): string {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, retryOnMount: false } },
+  });
+  client.setQueryData(["capacity", "overview"], data);
+  return renderToString(
+    <QueryClientProvider client={client}>
+      <CapacityCard onNavigate={() => {}} />
+    </QueryClientProvider>,
+  );
+}
+
+describe("CapacityCard", () => {
+  it("shows exact counts under cluster-wide coverage", () => {
+    const html = renderCard(overview());
+    expect(html).toContain(">3<");
+    expect(html).not.toContain("≥");
+  });
+
+  it("hedges the pending-pod count when pod coverage is a lower bound", () => {
+    const html = renderCard(
+      overview(
+        {},
+        {
+          ...meta.coverage,
+          pods: sourceCoverage("all_authorized_namespaces"),
+        },
+      ),
+    );
+    expect(html).toContain("≥3");
+  });
+
+  it("renders the softened truth for a denied Karpenter instead of vanishing", () => {
+    mockKarpenterState = "denied";
+    const html = renderCard({
+      ...overview({ poolCount: undefined, claimCount: undefined }),
+      state: "denied",
+    });
+    expect(html).toContain("Karpenter view unavailable");
+    expect(html).not.toContain("No active signals");
+    expect(html).toContain("NodePools");
+    expect(html).toContain("—");
+    expect(html).toContain(">6<");
+  });
+
+  it("renders a cluster card on a Karpenter-less cluster with managers", () => {
+    mockKarpenterState = "not_detected";
+    const html = renderCard({
+      ...overview({
+        poolCount: undefined,
+        claimCount: undefined,
+        managers: [
+          { manager: "gke_autoscaler", groupCount: 2, status: "healthy" },
+        ],
+      }),
+      state: "not_detected",
+    });
+    expect(html).toContain("Node groups");
+    expect(html).toContain("Managers");
+    expect(html).not.toContain("NodePools");
+    expect(html).not.toContain("NodeClaims");
+  });
+
+  it("keeps a quiet Home on a bare cluster with no capacity story", () => {
+    mockKarpenterState = "not_detected";
+    const html = renderCard({
+      ...overview({ poolCount: undefined, claimCount: undefined, managers: [] }),
+      state: "not_detected",
+    });
+    expect(html).toBe("");
+  });
+
+  it("renders an omitted NodePool count as unavailable, never zero", () => {
+    // The server omits poolCount when NodePools were not observed.
+    const html = renderCard(overview({ poolCount: undefined }));
+    expect(html).toContain("NodePools");
+    expect(html).toContain("—");
+    expect(html).not.toContain(">0<");
+  });
+});

package/src/components/home/CapacityCard.tsx

@@ -0,0 +1,125 @@
+import { Layers3 } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useCapacityOverview } from '../../api/client'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
+import { coverageIsLowerBound, humanizeCode } from '../capacity/shared'
+
+// CapacityCard surfaces the cluster's capacity posture on the Home dashboard
+// so morning triage reaches the Capacity view without knowing it exists. It
+// renders whenever the cluster has a capacity story: Karpenter available, a
+// Karpenter the caller is denied (softened rows, honest header — the denied
+// Overview shape carries real node/pod truth), or detected managers/groups on
+// a Karpenter-less cluster. Bare clusters with no story keep a quiet Home.
+// Numbers the backend omitted (RBAC-denied / unobserved) render as "—",
+// never zero.
+export function CapacityCard({ onNavigate }: { onNavigate: () => void }) {
+  const karpenterState = useCapabilitiesContext().karpenter?.state
+  const mayHaveStory =
+    karpenterState === 'available' || karpenterState === 'denied' || karpenterState === 'not_detected'
+  const { data } = useCapacityOverview({ enabled: mayHaveStory })
+  if (!mayHaveStory || !data) return null
+  const karpenterDenied = data.state === 'denied'
+  const karpenterless = data.state === 'not_detected'
+  if (!karpenterDenied && !karpenterless && data.state !== 'available') return null
+  if (karpenterless && (data.summary.managers?.length ?? 0) === 0 && data.groups.length === 0)
+    return null
+
+  const actions = data.summary.actions ?? []
+  const worst = actions.find((a) => a.highestSeverity === 'critical') ?? actions.find((a) => a.highestSeverity === 'warning')
+  // A denied Karpenter must not read as healthy: "no signals" would be a
+  // claim about a fleet this identity cannot see.
+  const headerTone = karpenterDenied
+    ? 'text-theme-text-tertiary'
+    : worst
+      ? worst.highestSeverity === 'critical'
+        ? 'text-red-500'
+        : 'text-amber-400'
+      : 'text-emerald-500'
+  const headerLabel = karpenterDenied
+    ? 'Karpenter view unavailable'
+    : worst
+      ? humanizeCode(worst.code)
+      : 'No active signals'
+
+  // Namespace-scoped pod coverage hides pending pods this identity cannot see,
+  // so the count is a floor — it must not read as the cluster total.
+  const pendingIsLowerBound = coverageIsLowerBound(data.coverage.pods)
+  const pendingStat = {
+    label: 'Pending pods',
+    value: absentAsDash(data.summary.pendingPodCount, pendingIsLowerBound ? '≥' : ''),
+  }
+  const stats: { label: string; value: string }[] = karpenterless
+    ? [
+        { label: 'Node groups', value: `${data.groups.length}` },
+        pendingStat,
+        { label: 'Managers', value: `${data.summary.managers?.length ?? 0}` },
+        { label: 'Nodes', value: absentAsDash(data.summary.nodeCount) },
+      ]
+    : [
+        { label: 'NodePools', value: absentAsDash(data.summary.poolCount) },
+        pendingStat,
+        { label: 'NodeClaims', value: absentAsDash(data.summary.claimCount) },
+        { label: 'Nodes', value: absentAsDash(data.summary.nodeCount) },
+      ]
+
+  return (
+    <button
+      type="button"
+      onClick={onNavigate}
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left animate-fade-in-up"
+    >
+      <div className="flex flex-col h-full w-full">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
+          <div className="flex items-center gap-2">
+            <Layers3 className={clsx('h-4 w-4', headerTone)} />
+            <span className={clsx('text-xs font-semibold uppercase tracking-wider', headerTone)}>
+              Capacity
+            </span>
+          </div>
+          <span className={clsx('max-w-[55%] truncate text-[11px] font-medium', headerTone)}>{headerLabel}</span>
+        </div>
+
+        <div className="flex-1 min-h-0 px-5 py-3">
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            {stats.map((stat) => (
+              <div key={stat.label}>
+                <div className="text-lg font-semibold tabular-nums text-theme-text-primary">{stat.value}</div>
+                <div className="text-[11px] text-theme-text-tertiary">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+          {actions.length > 0 && (
+            <div className="mt-3 space-y-1">
+              {actions.slice(0, 2).map((action) => (
+                <div key={action.code} className="flex items-center gap-1.5 text-[11px] text-theme-text-secondary">
+                  <span
+                    className={clsx(
+                      'h-1.5 w-1.5 shrink-0 rounded-full',
+                      action.highestSeverity === 'critical'
+                        ? 'bg-red-500'
+                        : action.highestSeverity === 'warning'
+                          ? 'bg-amber-400'
+                          : 'bg-sky-400',
+                    )}
+                  />
+                  <span className="truncate">
+                    {humanizeCode(action.code)}
+                    {action.count > 1 ? ` (${action.count})` : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="px-5 py-2.5 border-t border-theme-border/50 text-[11px] text-theme-text-tertiary group-hover:text-theme-text-secondary transition-colors">
+          Open Capacity →
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function absentAsDash(value: number | undefined, prefix = ''): string {
+  return value === undefined ? '—' : `${prefix}${value}`
+}

package/src/components/home/HomeView.tsx

@@ -11,6 +11,8 @@ import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { GitOpsControllersCard } from './GitOpsControllersCard'
+import { CapacityCard } from './CapacityCard'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { Tooltip } from '../ui/Tooltip'
 import {
   AuditCard,
@@ -45,6 +47,13 @@ interface HomeViewProps {
 }
 
 export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
+  // The card itself decides whether the cluster has a capacity story
+  // (available, softened-denied, or karpenterless-with-managers/groups) and
+  // returns null otherwise — the outer gate only excludes states with nothing
+  // to fetch against.
+  const karpenterState = useCapabilitiesContext().karpenter?.state
+  const capacityCardPossible =
+    karpenterState === 'available' || karpenterState === 'denied' || karpenterState === 'not_detected'
   const { data, isLoading, error, dataUpdatedAt, refetch } = useDashboard(namespaces)
   const { connection } = useConnection()
   const { data: issuesData, isLoading: issuesLoading, isFetching: issuesFetching, error: issuesError } = useIssues(namespaces)
@@ -175,7 +184,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
             {/* Posture band — same flex-grow wrap so any subset of compliance cards
                 fills its row instead of stranding the last one (the old 3-col grid
                 left Cluster Audit alone with two empty cells beside it). */}
-            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers) && (
+            {(data.certificateHealth || data.networkPolicyCoverage || data.audit || data.gitopsControllers || capacityCardPossible) && (
               <div className="flex flex-wrap gap-6">
                 {data.certificateHealth && (
                   <BandItem>
@@ -201,6 +210,11 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
                     />
                   </BandItem>
                 )}
+                {capacityCardPossible && (
+                  <BandItem>
+                    <CapacityCard onNavigate={() => onNavigateToView('capacity')} />
+                  </BandItem>
+                )}
                 {data.audit && (
                   <BandItem>
                     <AuditCard

package/src/components/issues/IssuesPane.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import type { Issue } from "@skyhook-io/k8s-ui";
+import { capacityHrefForIssue } from "./IssuesPane";
+
+function issue(partial: Partial<Issue>): Issue {
+  return {
+    id: "1",
+    severity: "critical",
+    source: "problem",
+    category: "x",
+    category_group: "x",
+    grouping_scope: "x",
+    kind: "Pod",
+    name: "p",
+    reason: "r",
+    ...partial,
+  } as Issue;
+}
+
+describe("capacityHrefForIssue", () => {
+  it("returns null when Karpenter is not detected", () => {
+    expect(capacityHrefForIssue(issue({ source: "scheduling" }), false)).toBeNull();
+    expect(
+      capacityHrefForIssue(
+        issue({ kind: "NodePool", group: "karpenter.sh", name: "core" }),
+        false),
+    ).toBeNull();
+  });
+
+  it("links a backend-flagged capacity-relevant pod to the Demand queue", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({ source: "scheduling", capacity_relevant: true }),
+        true),
+    ).toBe("/capacity/demand");
+  });
+
+  it("preserves namespace scope on the Demand link", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          namespace: "payments",
+          owner: { kind: "Deployment", name: "api" },
+        }),
+        true),
+    ).toBe(`/capacity/demand?owner=${encodeURIComponent("payments/Deployment/api")}`);
+  });
+
+  it("does NOT link a scheduling failure the backend did not flag", () => {
+    // Generic unschedulable (insufficient cpu, node-pinned, zonal, non-Karpenter
+    // node group): the backend leaves capacity_relevant unset → no link, even in
+    // a Karpenter cluster. No message parsing is involved.
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          message: "Unschedulable — Insufficient cpu (0/9 nodes available)",
+        }),
+        true),
+    ).toBeNull();
+    expect(
+      capacityHrefForIssue(
+        issue({ source: "scheduling", capacity_relevant: false }),
+        true),
+    ).toBeNull();
+  });
+
+  it("links a NodePool-subject issue to its pool detail", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          kind: "NodePool",
+          group: "karpenter.sh",
+          name: "core-on-demand",
+          source: "condition",
+        }),
+        true),
+    ).toBe("/capacity/pools/core-on-demand");
+  });
+
+  it("does not link non-Karpenter issues even when Karpenter is present", () => {
+    expect(
+      capacityHrefForIssue(issue({ source: "problem", kind: "Service" }), true),
+    ).toBeNull();
+    // A NodePool from a different API group must not be treated as Karpenter's.
+    expect(
+      capacityHrefForIssue(
+        issue({ kind: "NodePool", group: "example.com", name: "x" }),
+        true),
+    ).toBeNull();
+  });
+});
+
+describe("capacityHrefForIssue subject carry", () => {
+  it("carries the grouped subject (the workload) into a filtered Demand", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Deployment",
+          namespace: "shop",
+          name: "web",
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand?owner=shop%2FDeployment%2Fweb");
+  });
+
+  it("prefers the flat row's owner over its Pod subject", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Pod",
+          namespace: "shop",
+          name: "web-abc12",
+          owner: { kind: "Deployment", name: "web" },
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand?owner=shop%2FDeployment%2Fweb");
+  });
+
+  it("fails closed to the unfiltered link when no complete subject exists", () => {
+    expect(
+      capacityHrefForIssue(
+        issue({
+          source: "scheduling",
+          capacity_relevant: true,
+          kind: "Pod",
+          namespace: "shop",
+          name: "orphan-abc12",
+        }),
+        true,
+      ),
+    ).toBe("/capacity/demand");
+  });
+});