))}
diff --git a/apps/console/src/components/cluster-usage/ResourceCard.test.tsx b/apps/console/src/components/cluster-usage/ResourceCard.test.tsx
deleted file mode 100644
index 86f030b..0000000
--- a/apps/console/src/components/cluster-usage/ResourceCard.test.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@testing-library/react"
-import { ResourceCard } from "./ResourceCard.tsx"
-
-describe("ResourceCard", () => {
- it("renders the title verbatim", () => {
- render(
- ,
- )
- expect(screen.getByText("nvidia.com/gpu")).toBeInTheDocument()
- })
-
- it("renders capacity and allocatable for any resource", () => {
- render(
- ,
- )
- expect(screen.getByText(/capacity/i)).toBeInTheDocument()
- expect(screen.getByText(/allocatable/i)).toBeInTheDocument()
- })
-
- it("omits the Used line when used is undefined", () => {
- render(
- ,
- )
- expect(screen.queryByText(/used/i)).toBeNull()
- })
-
- it("renders the Used line when used is defined", () => {
- render(
- ,
- )
- expect(screen.getByText(/used/i)).toBeInTheDocument()
- })
-
- it("renders an em dash for divide-by-zero (allocatable=0)", () => {
- render(
- ,
- )
- expect(screen.getAllByText("—").length).toBeGreaterThan(0)
- })
-
- it("clamps percentage display at 100% for over-committed resources", () => {
- render(
- ,
- )
- const bars = document.querySelectorAll('[role="progressbar"]')
- const requestedBar = Array.from(bars).find(
- (b) => b.getAttribute("data-resource-bar") === "requested",
- )
- expect(requestedBar?.getAttribute("aria-valuenow")).toBe("100")
- })
-})
diff --git a/apps/console/src/components/cluster-usage/ResourceCard.tsx b/apps/console/src/components/cluster-usage/ResourceCard.tsx
deleted file mode 100644
index eba7e2d..0000000
--- a/apps/console/src/components/cluster-usage/ResourceCard.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { humanizeBytes, humanizeCpu } from "../../lib/k8s-quantity.ts"
-import type { ResourceTotals } from "../../lib/cluster-usage/types.ts"
-
-export type ResourceFormat = "cpu" | "bytes" | "count"
-
-interface ResourceCardProps {
- title: string
- format: ResourceFormat
- totals: ResourceTotals
- /**
- * When true, the Requested figure is treated as unknown (cluster-wide
- * pod read access was denied or the request failed). The numeric value
- * is replaced with an em dash and a tooltip explains why.
- */
- requestedUnavailable?: boolean
-}
-
-function formatValue(value: number, format: ResourceFormat): string {
- switch (format) {
- case "cpu":
- return humanizeCpu(value)
- case "bytes":
- return humanizeBytes(value)
- case "count":
- default:
- return value % 1 === 0 ? `${value}` : value.toFixed(2)
- }
-}
-
-function percent(value: number, allocatable: number): number | null {
- if (allocatable <= 0) return null
- return Math.min(100, Math.round((value / allocatable) * 100))
-}
-
-function barColorClass(pct: number | null): string {
- if (pct === null) return "bg-slate-300"
- if (pct > 90) return "bg-red-500"
- if (pct > 70) return "bg-amber-500"
- return "bg-blue-500"
-}
-
-interface ProgressBarProps {
- pct: number | null
- resourceBar: "requested" | "used"
- ariaLabel: string
-}
-
-function ProgressBar({ pct, resourceBar, ariaLabel }: ProgressBarProps) {
- return (
-
-
-
- )
-}
-
-/**
- * A single aggregate-resource card showing capacity, allocatable, and
- * up to two progress bars: requested (always rendered when allocatable
- * is non-zero) and used (rendered only when totals.used is defined,
- * which happens for cpu/memory when metrics.k8s.io is discovered).
- *
- * A zero-allocatable resource renders em dashes for every number and
- * no progress bar — that combination is rare but represents nodes that
- * have not yet reported their capacity, and crashing the panel is much
- * worse than rendering placeholders.
- */
-export function ResourceCard({
- title,
- format,
- totals,
- requestedUnavailable = false,
-}: ResourceCardProps) {
- const allocatableZero = totals.allocatable <= 0
- const requestedPct = percent(totals.requested, totals.allocatable)
- const usedDefined = totals.used !== undefined
- const usedPct = usedDefined ? percent(totals.used ?? 0, totals.allocatable) : null
- const REQUESTED_UNAVAILABLE_REASON = "Requires cluster-wide pod read access"
-
- return (
-
{item.metadata.name}
diff --git a/apps/console/src/routes/CapacityAdminGuard.test.tsx b/apps/console/src/routes/CapacityAdminGuard.test.tsx
new file mode 100644
index 0000000..4956e48
--- /dev/null
+++ b/apps/console/src/routes/CapacityAdminGuard.test.tsx
@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from "vitest"
+import { screen, waitFor } from "@testing-library/react"
+import { Route, Routes } from "react-router"
+import { K8sClient, K8sApiError } from "@cozystack/k8s-client"
+import { renderWithK8sProvider } from "../test-utils/render.tsx"
+import { CapacityAdminGuard } from "./CapacityAdminGuard.tsx"
+
+type SsarOutcome = { allowed: boolean } | "pending" | K8sApiError
+
+function makeClient(outcome: SsarOutcome): K8sClient {
+ const client = new K8sClient({ baseUrl: "/mock" })
+ vi.spyOn(client, "create").mockImplementation(async (_g, _v, _p, body) => {
+ if (outcome === "pending") return new Promise(() => {}) as never
+ if (outcome instanceof K8sApiError) throw outcome
+ return { ...(body as object), status: { allowed: outcome.allowed } }
+ })
+ return client
+}
+
+function renderGuard(client: K8sClient) {
+ return renderWithK8sProvider(
+
+ }>
+ CAPACITY CONTENT} />
+
+ ,
+ { client, initialRoute: "/cap" },
+ )
+}
+
+describe("CapacityAdminGuard", () => {
+ it("renders the child route when nodes/list is allowed", async () => {
+ renderGuard(makeClient({ allowed: true }))
+ await waitFor(() =>
+ expect(screen.getByText("CAPACITY CONTENT")).toBeInTheDocument(),
+ )
+ })
+
+ it("renders permission-denied instead of the child route when denied", async () => {
+ renderGuard(makeClient({ allowed: false }))
+ await waitFor(() =>
+ expect(
+ screen.getByText(/do not have permission to view cluster capacity/i),
+ ).toBeInTheDocument(),
+ )
+ expect(screen.queryByText("CAPACITY CONTENT")).not.toBeInTheDocument()
+ expect(screen.getByRole("link", { name: /back to console/i })).toHaveAttribute(
+ "href",
+ "/console",
+ )
+ })
+
+ it("fails closed (denied) on SSAR error", async () => {
+ renderGuard(makeClient(new K8sApiError(500, "boom")))
+ await waitFor(() =>
+ expect(
+ screen.getByText(/do not have permission to view cluster capacity/i),
+ ).toBeInTheDocument(),
+ )
+ expect(screen.queryByText("CAPACITY CONTENT")).not.toBeInTheDocument()
+ })
+
+ it("shows neither content nor denial while the review is loading", () => {
+ renderGuard(makeClient("pending"))
+ expect(screen.queryByText("CAPACITY CONTENT")).not.toBeInTheDocument()
+ expect(
+ screen.queryByText(/do not have permission to view cluster capacity/i),
+ ).not.toBeInTheDocument()
+ })
+})
diff --git a/apps/console/src/routes/CapacityAdminGuard.tsx b/apps/console/src/routes/CapacityAdminGuard.tsx
new file mode 100644
index 0000000..7941aa3
--- /dev/null
+++ b/apps/console/src/routes/CapacityAdminGuard.tsx
@@ -0,0 +1,39 @@
+import { Link, Outlet } from "react-router"
+import { Section, Spinner } from "@cozystack/ui"
+import { useClusterUsageAccess } from "../hooks/useClusterUsageAccess.ts"
+
+/**
+ * Layout route guard for the Capacity pages (Cluster / Nodes / Storage and the
+ * per-resource drill-downs). Renders the matched child route only for users who
+ * may list cluster nodes; everyone else gets a permission-denied message
+ * instead of the page (and instead of a browser 403 on direct URL navigation).
+ */
+export function CapacityAdminGuard() {
+ const { allowed, isLoading } = useClusterUsageAccess()
+
+ if (isLoading) {
+ return (
+
+ Loading…
+
+ )
+ }
+
+ if (!allowed) {
+ return (
+
+
+
+ You do not have permission to view cluster capacity.{" "}
+
+ Back to console
+
+ .
+
+
+
+ )
+ }
+
+ return
+}
diff --git a/apps/console/src/routes/ClusterUsagePage.test.tsx b/apps/console/src/routes/ClusterUsagePage.test.tsx
index 3275004..4a2da18 100644
--- a/apps/console/src/routes/ClusterUsagePage.test.tsx
+++ b/apps/console/src/routes/ClusterUsagePage.test.tsx
@@ -83,19 +83,22 @@ describe("ClusterUsagePage", () => {
expect(screen.getByText(/loading/i)).toBeInTheDocument()
})
- it("renders both panels on a healthy cluster with metrics", async () => {
+ it("renders the aggregate resources table on a healthy cluster with metrics", async () => {
const client = makeClient({
nodes: nodesListFixture,
pods: podsListFixture,
metrics: nodeMetricsListFixture,
groups: groupsWithMetrics,
})
- renderWithK8sProvider(, { client })
- expect(await screen.findByText("Cluster Usage")).toBeInTheDocument()
- // "CPU" appears in both the aggregate card and the table column header,
- // so assert via the aggregate-specific "Allocatable" label instead.
+ const { container } = renderWithK8sProvider(, { client })
+ expect(await screen.findByText("Cluster")).toBeInTheDocument()
expect(await screen.findAllByText(/allocatable/i)).not.toHaveLength(0)
- expect(await screen.findByText("worker-gpu-1")).toBeInTheDocument()
+ // The per-node table moved to its own Nodes page; this page now shows
+ // only the cluster-wide resources table.
+ await waitFor(() =>
+ expect(container.querySelector('[data-resource-row="CPU"]')).not.toBeNull(),
+ )
+ expect(screen.queryByText("worker-gpu-1")).toBeNull()
})
it("renders the empty state when no nodes exist", async () => {
@@ -161,15 +164,22 @@ describe("ClusterUsagePage", () => {
).toBeInTheDocument()
})
- it("omits the Used line everywhere when metrics-server is not registered", async () => {
+ it("shows only em-dashes in the aggregate Used column when metrics-server is not registered", async () => {
const client = makeClient({
nodes: nodesListFixture,
pods: podsListFixture,
groups: groupsWithoutMetrics,
})
- renderWithK8sProvider(, { client })
- // Wait for the page to settle by waiting on an aggregate-card label.
+ const { container } = renderWithK8sProvider(, { client })
+ // Wait for the page to settle by waiting on an aggregate label.
await screen.findAllByText(/allocatable/i)
- expect(screen.queryByText(/used/i)).toBeNull()
+ // The aggregate resources table always renders a Used column; without
+ // metrics every Used cell (last column of each resource row) is "—".
+ const rows = container.querySelectorAll("[data-resource-row]")
+ expect(rows.length).toBeGreaterThan(0)
+ for (const row of rows) {
+ const cells = row.querySelectorAll("td")
+ expect(cells[cells.length - 1].textContent).toBe("—")
+ }
})
})
diff --git a/apps/console/src/routes/ClusterUsagePage.tsx b/apps/console/src/routes/ClusterUsagePage.tsx
index b59f877..872bf65 100644
--- a/apps/console/src/routes/ClusterUsagePage.tsx
+++ b/apps/console/src/routes/ClusterUsagePage.tsx
@@ -2,7 +2,6 @@ import { Link } from "react-router"
import { Section, Spinner } from "@cozystack/ui"
import { useClusterUsageData } from "../hooks/useClusterUsageData.tsx"
import { ClusterUsageAggregates } from "../components/cluster-usage/ClusterUsageAggregates.tsx"
-import { ClusterUsageTable } from "../components/cluster-usage/ClusterUsageTable.tsx"
/**
* Administration → Cluster Usage. Single cluster-scoped page that
@@ -20,7 +19,6 @@ import { ClusterUsageTable } from "../components/cluster-usage/ClusterUsageTable
export function ClusterUsagePage() {
const {
nodes,
- perNode,
aggregates,
nodeSummary,
isLoading,
@@ -28,12 +26,11 @@ export function ClusterUsagePage() {
errorStatus,
podsUnavailable,
} = useClusterUsageData()
- const extendedKeys = Object.keys(aggregates.extended).sort()
return (
-
Cluster Usage
+
Cluster
Cluster-scoped capacity, allocation and usage across all nodes,
including any discovered extended resources.
@@ -67,21 +64,11 @@ export function ClusterUsagePage() {
No nodes found.
) : (
- <>
-
-
-
Nodes
-
-
-
+
)}
)
diff --git a/apps/console/src/routes/ClusterUsageResourcePage.test.tsx b/apps/console/src/routes/ClusterUsageResourcePage.test.tsx
new file mode 100644
index 0000000..ef42c24
--- /dev/null
+++ b/apps/console/src/routes/ClusterUsageResourcePage.test.tsx
@@ -0,0 +1,243 @@
+import { describe, it, expect, vi, beforeAll } from "vitest"
+import { screen, within } from "@testing-library/react"
+import { Route, Routes } from "react-router"
+import { K8sClient, type K8sList } from "@cozystack/k8s-client"
+import { ClusterUsageResourcePage } from "./ClusterUsageResourcePage.tsx"
+import { aggregateNodeResources } from "../lib/cluster-usage/aggregate.ts"
+import { humanizeCpu } from "../lib/k8s-quantity.ts"
+import type { Node, Pod } from "../lib/cluster-usage/types.ts"
+import { TenantProvider } from "../lib/tenant-context.tsx"
+import { renderWithK8sProvider } from "../test-utils/render.tsx"
+
+interface PodOpts {
+ nodeName?: string | null
+ phase?: string
+ limits?: Record[]
+}
+
+function pod(
+ namespace: string,
+ name: string,
+ labels: Record,
+ requests: Record[],
+ opts: PodOpts = {},
+) {
+ const { nodeName = "node-1", phase = "Running", limits } = opts
+ return {
+ apiVersion: "v1",
+ kind: "Pod",
+ metadata: { name, namespace, labels },
+ spec: {
+ ...(nodeName ? { nodeName } : {}),
+ containers: requests.map((r, i) => ({
+ name: `c${i}`,
+ resources: { requests: r, ...(limits?.[i] ? { limits: limits[i] } : {}) },
+ })),
+ },
+ status: { phase },
+ }
+}
+
+function node(name: string) {
+ return {
+ apiVersion: "v1",
+ kind: "Node",
+ metadata: { name },
+ status: { capacity: {}, allocatable: {} },
+ }
+}
+
+function appDef(kind: string, plural: string) {
+ return {
+ apiVersion: "cozystack.io/v1alpha1",
+ kind: "ApplicationDefinition",
+ metadata: { name: plural },
+ spec: { application: { kind, plural, singular: kind.toLowerCase() } },
+ }
+}
+
+const GPU = "nvidia.com/gpu"
+const DEFAULT_NODES = [node("node-1")]
+
+function makeClient(
+ pods: unknown[],
+ appDefs: unknown[] = [],
+ nodes: unknown[] = DEFAULT_NODES,
+): K8sClient {
+ const client = new K8sClient()
+ vi.spyOn(client, "list").mockImplementation(async (_g, _v, plural) => {
+ const items =
+ plural === "applicationdefinitions"
+ ? appDefs
+ : plural === "tenantnamespaces"
+ ? []
+ : plural === "nodes"
+ ? nodes
+ : pods
+ return {
+ apiVersion: "v1",
+ kind: `${plural}List`,
+ metadata: {},
+ items,
+ } as K8sList
+ })
+ return client
+}
+
+function renderResource(client: K8sClient, resource: string) {
+ return renderWithK8sProvider(
+
+
+ } />
+
+ ,
+ { client, initialRoute: `/r/${resource}` },
+ )
+}
+
+// TenantProvider reads window.localStorage on mount.
+beforeAll(() => {
+ if (typeof globalThis.localStorage?.getItem !== "function") {
+ const store = new Map()
+ vi.stubGlobal("localStorage", {
+ getItem: (k: string) => store.get(k) ?? null,
+ setItem: (k: string, v: string) => void store.set(k, v),
+ removeItem: (k: string) => void store.delete(k),
+ clear: () => store.clear(),
+ })
+ }
+})
+
+describe("ClusterUsageResourcePage", () => {
+ it("groups consumers of a resource by tenant namespace and owning app, summing requests", async () => {
+ const client = makeClient([
+ pod(
+ "tenant-foo",
+ "vm1-abc",
+ {
+ "apps.cozystack.io/application.kind": "VMInstance",
+ "apps.cozystack.io/application.name": "vm1",
+ },
+ [{ [GPU]: "2" }],
+ ),
+ pod(
+ "tenant-foo",
+ "vm1-def",
+ {
+ "apps.cozystack.io/application.kind": "VMInstance",
+ "apps.cozystack.io/application.name": "vm1",
+ },
+ [{ [GPU]: "1" }],
+ ),
+ // No GPU request → must be excluded.
+ pod("tenant-bar", "web-1", { "app.kubernetes.io/instance": "web" }, [
+ { cpu: "500m" },
+ ]),
+ ])
+ renderResource(client, GPU)
+
+ const row = await screen.findByText("vm1")
+ const tr = row.closest("tr") as HTMLElement
+ expect(within(tr).getByText("tenant-foo")).toBeInTheDocument()
+ // Kind is shown as a subtitle within the Workload cell.
+ expect(within(tr).getByText("VMInstance")).toBeInTheDocument()
+ const cells = tr.querySelectorAll("td")
+ // Columns: Tenant | Workload | Requested — last cell is the summed request.
+ expect(cells[cells.length - 1].textContent).toBe("3")
+ expect(screen.queryByText("tenant-bar")).toBeNull()
+ })
+
+ it("links a consumer to its deployed application page in the Console", async () => {
+ const client = makeClient(
+ [
+ pod(
+ "tenant-root",
+ "demo-vm-launcher",
+ {
+ "apps.cozystack.io/application.kind": "VMInstance",
+ "apps.cozystack.io/application.name": "demo-vm",
+ },
+ [{ [GPU]: "1" }],
+ ),
+ ],
+ [appDef("VMInstance", "vminstances")],
+ )
+ renderResource(client, GPU)
+
+ const link = await screen.findByRole("link", { name: "demo-vm" })
+ expect(link).toHaveAttribute("href", "/console/vminstances/demo-vm/workloads")
+ })
+
+ it("does not link a consumer whose kind is not a known application", async () => {
+ const client = makeClient(
+ [
+ pod("tenant-root", "rogue", { "app.kubernetes.io/instance": "rogue" }, [
+ { [GPU]: "1" },
+ ]),
+ ],
+ [appDef("VMInstance", "vminstances")],
+ )
+ renderResource(client, GPU)
+ // Owner falls back to the Helm instance label; with no matching app
+ // definition it must render as plain text, not a link.
+ await screen.findByText("rogue")
+ expect(screen.queryByRole("link", { name: "rogue" })).toBeNull()
+ })
+
+ it("shows an empty state when nothing requests the resource", async () => {
+ const client = makeClient([
+ pod("tenant-bar", "web-1", { "app.kubernetes.io/instance": "web" }, [
+ { cpu: "500m" },
+ ]),
+ ])
+ renderResource(client, GPU)
+ expect(
+ await screen.findByText(/no workloads are requesting/i),
+ ).toBeInTheDocument()
+ })
+
+ it("renders the resource key as the page heading", async () => {
+ const client = makeClient([])
+ renderResource(client, GPU)
+ expect(await screen.findByRole("heading", { name: GPU })).toBeInTheDocument()
+ })
+
+ it("counts requested like the aggregate: requests only, scheduled non-terminal pods", async () => {
+ const pods = [
+ pod("tenant-foo", "alpha-0", { "app.kubernetes.io/instance": "alpha" }, [{ cpu: "500m" }]),
+ pod("tenant-foo", "beta-0", { "app.kubernetes.io/instance": "beta" }, [{ cpu: "250m" }]),
+ // limits-only → excluded (the aggregate counts requests, never limits)
+ pod("tenant-foo", "gamma-0", { "app.kubernetes.io/instance": "gamma" }, [{}], {
+ limits: [{ cpu: "1" }],
+ }),
+ // terminal → excluded
+ pod("tenant-foo", "delta-0", { "app.kubernetes.io/instance": "delta" }, [{ cpu: "1" }], {
+ phase: "Succeeded",
+ }),
+ // unscheduled → excluded
+ pod("tenant-foo", "epsilon-0", { "app.kubernetes.io/instance": "epsilon" }, [{ cpu: "1" }], {
+ nodeName: null,
+ }),
+ // scheduled to an unknown node → excluded
+ pod("tenant-foo", "zeta-0", { "app.kubernetes.io/instance": "zeta" }, [{ cpu: "1" }], {
+ nodeName: "ghost",
+ }),
+ ]
+ const nodes = [node("node-1")]
+ renderResource(makeClient(pods, [], nodes), "cpu")
+
+ // The displayed total reconciles with aggregateNodeResources over the same
+ // input (all pods are tenant-scoped here, so the subset equals the whole).
+ const expected = aggregateNodeResources(nodes as Node[], pods as Pod[], undefined).standard.cpu
+ .requested
+ const totalRow = (await screen.findByText(/tenant total/i)).closest("tr") as HTMLElement
+ const totalCells = totalRow.querySelectorAll("td")
+ expect(totalCells[totalCells.length - 1].textContent).toBe(humanizeCpu(expected))
+
+ expect(screen.getByText("alpha")).toBeInTheDocument()
+ expect(screen.getByText("beta")).toBeInTheDocument()
+ for (const excluded of ["gamma", "delta", "epsilon", "zeta"]) {
+ expect(screen.queryByText(excluded)).toBeNull()
+ }
+ })
+})
diff --git a/apps/console/src/routes/ClusterUsageResourcePage.tsx b/apps/console/src/routes/ClusterUsageResourcePage.tsx
new file mode 100644
index 0000000..4e3f4ae
--- /dev/null
+++ b/apps/console/src/routes/ClusterUsageResourcePage.tsx
@@ -0,0 +1,174 @@
+import { useMemo } from "react"
+import { Link, useParams } from "react-router"
+import { Section, Spinner } from "@cozystack/ui"
+import { useK8sList } from "@cozystack/k8s-client"
+import { ChevronLeft } from "lucide-react"
+import { parseQuantity, humanizeBytes, humanizeCpu } from "../lib/k8s-quantity.ts"
+import { workloadOwner } from "../lib/workload.ts"
+import { podCountsTowardRequested } from "../lib/cluster-usage/aggregate.ts"
+import { TENANT_NAMESPACE_PREFIX } from "../lib/constants.ts"
+import { WorkloadCell } from "../components/WorkloadCell.tsx"
+import type { Node, Pod } from "../lib/cluster-usage/types.ts"
+
+/**
+ * Admin → Resources → per-resource drill-down. Given a resource key
+ * (e.g. `cpu`, `memory`, or an extended resource like
+ * `nvidia.com/GH100_H200_SXM_141GB`) this lists the tenant workloads requesting
+ * it, grouped by namespace and owning application. To stay consistent with the
+ * Cluster page headline it counts the same way the aggregate does — requests
+ * only (never limits), scheduled non-terminal pods only — but scoped to tenant
+ * namespaces, so the Total is the tenant portion of the cluster-wide figure
+ * (system/control-plane usage is excluded).
+ *
+ * Ownership is read from pod labels — Cozystack stamps
+ * `apps.cozystack.io/application.{kind,name}` on every workload pod; we
+ * fall back to the Helm `app.kubernetes.io/{instance,name}` labels and finally
+ * to the bare pod name so nothing is silently dropped.
+ *
+ * The resource key arrives via a splat param (`cluster-usage/r/*`) so keys
+ * containing slashes (every `vendor.com/model` GPU name) survive routing
+ * without encoding.
+ */
+
+interface UsageRow {
+ namespace: string
+ kind: string
+ name: string
+ pods: number
+ requested: number
+}
+
+function formatResource(resource: string, value: number): string {
+ if (resource === "cpu") return humanizeCpu(value)
+ if (resource === "memory" || resource === "ephemeral-storage") {
+ return humanizeBytes(value)
+ }
+ return value % 1 === 0 ? `${value}` : value.toFixed(2)
+}
+
+/** Sum a single resource's requests across a pod's containers (requests only). */
+function podRequestedResource(pod: Pod, resource: string): number {
+ let total = 0
+ for (const container of pod.spec?.containers ?? []) {
+ const value = container.resources?.requests?.[resource]
+ if (value !== undefined) total += parseQuantity(value)
+ }
+ return total
+}
+
+export function ClusterUsageResourcePage() {
+ const params = useParams()
+ const resource = params["*"] ?? ""
+
+ const pods = useK8sList({ apiGroup: "", apiVersion: "v1", plural: "pods" })
+ const nodes = useK8sList({ apiGroup: "", apiVersion: "v1", plural: "nodes" })
+ const isLoading = pods.isLoading || nodes.isLoading
+ const error = pods.error ?? nodes.error
+
+ const { rows, totalRequested } = useMemo(() => {
+ const knownNodes = new Set((nodes.data?.items ?? []).map((n) => n.metadata.name))
+ const byKey = new Map()
+ let totalRequested = 0
+ for (const pod of pods.data?.items ?? []) {
+ // Match the aggregate's definition of "requested" so this breakdown
+ // reconciles with the headline number it drills into.
+ if (!podCountsTowardRequested(pod, knownNodes)) continue
+ const requested = podRequestedResource(pod, resource)
+ if (requested <= 0) continue
+ const namespace = pod.metadata.namespace ?? "—"
+ // Tenant-scoped: skip system/control-plane namespaces (cozy-*, kube-system,
+ // …). The Total is therefore the tenant portion of the cluster figure.
+ if (!namespace.startsWith(TENANT_NAMESPACE_PREFIX)) continue
+ const { kind, name } = workloadOwner(pod.metadata.labels, pod.metadata.name)
+ const key = `${namespace}/${kind}/${name}`
+ const existing = byKey.get(key)
+ if (existing) {
+ existing.pods += 1
+ existing.requested += requested
+ } else {
+ byKey.set(key, { namespace, kind, name, pods: 1, requested })
+ }
+ totalRequested += requested
+ }
+ const rows = [...byKey.values()].sort((a, b) => b.requested - a.requested)
+ return { rows, totalRequested }
+ }, [pods.data, nodes.data, resource])
+
+ return (
+
+
+
+ Cluster
+
+
+ {resource}
+
+
+ Tenant workloads requesting this resource, grouped by namespace and
+ owning application (derived from pod labels). System and control-plane
+ usage is excluded, so the total is the tenant portion of the
+ cluster-wide figure.
+
+
+
+ {isLoading ? (
+
+ Loading…
+
+ ) : error ? (
+
+
+ Failed to load cluster usage: {error.message}
+
+
+ ) : rows.length === 0 ? (
+
+
+ No workloads are requesting{" "}
+ {resource}.
+
+ )
+}
diff --git a/apps/console/src/routes/StoragePage.tsx b/apps/console/src/routes/StoragePage.tsx
new file mode 100644
index 0000000..08e7735
--- /dev/null
+++ b/apps/console/src/routes/StoragePage.tsx
@@ -0,0 +1,20 @@
+import { ClusterStorageSection } from "../components/cluster-usage/ClusterStorageSection.tsx"
+
+/**
+ * Admin → Capacity → Storage. PersistentVolumeClaims across tenant namespaces
+ * aggregated by StorageClass; each class drills down to the consuming
+ * workloads. Split out of the Cluster page onto its own tab.
+ */
+export function StoragePage() {
+ return (
+
+
+
Storage
+
+ PersistentVolumeClaims across all tenants, grouped by StorageClass.
+
+
+
+
+ )
+}
diff --git a/apps/console/src/routes/sidebar-sections.test.tsx b/apps/console/src/routes/sidebar-sections.test.tsx
index a553d70..f3ecca3 100644
--- a/apps/console/src/routes/sidebar-sections.test.tsx
+++ b/apps/console/src/routes/sidebar-sections.test.tsx
@@ -4,12 +4,15 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import {
K8sClient,
K8sProvider,
- K8sApiError,
type K8sList,
type SelfSubjectAccessReview,
} from "@cozystack/k8s-client"
import type { ReactNode } from "react"
-import { useConsoleSidebarSections } from "./sidebar-sections.tsx"
+import {
+ useAdminSidebarSections,
+ useCanSeeAdmin,
+ useConsoleSidebarSections,
+} from "./sidebar-sections.tsx"
const emptyAppDefList: K8sList = {
apiVersion: "cozystack.io/v1alpha1",
@@ -18,27 +21,19 @@ const emptyAppDefList: K8sList = {
items: [],
}
-function ssarResponse(allowed: boolean): SelfSubjectAccessReview {
- return {
- apiVersion: "authorization.k8s.io/v1",
- kind: "SelfSubjectAccessReview",
- metadata: { name: "" },
- spec: { resourceAttributes: { resource: "nodes", verb: "list" } },
- status: { allowed },
- }
-}
-
-interface ClientConfig {
- ssar?: SelfSubjectAccessReview | "pending" | K8sApiError
-}
-
-function makeClient(config: ClientConfig = {}): K8sClient {
+// The admin gates issue two SSARs (nodes/list for Cluster Usage,
+// backupclasses/update for Backup Classes); answer each by requested resource.
+function makeClient(allow: Record): K8sClient {
const client = new K8sClient()
vi.spyOn(client, "list").mockResolvedValue(emptyAppDefList as K8sList)
- vi.spyOn(client, "create").mockImplementation(async () => {
- if (config.ssar === "pending") return new Promise(() => ({})) as never
- if (config.ssar instanceof K8sApiError) throw config.ssar
- return (config.ssar ?? ssarResponse(false)) as unknown
+ vi.spyOn(client, "create").mockImplementation(async (_g, _v, _p, body) => {
+ const resource =
+ (body as SelfSubjectAccessReview).spec?.resourceAttributes?.resource ?? ""
+ if (allow[resource] === "pending") return new Promise(() => ({})) as never
+ return {
+ ...(body as object),
+ status: { allowed: allow[resource] === true },
+ } as unknown
})
return client
}
@@ -58,7 +53,10 @@ function makeWrapper(client: K8sClient) {
}
}
-function findItem(sections: ReturnType, label: string) {
+function findItem(
+ sections: { title: string; items: { label: string; to: string }[] }[],
+ label: string,
+) {
for (const section of sections) {
const found = section.items.find((i) => i.label === label)
if (found) return found
@@ -66,107 +64,89 @@ function findItem(sections: ReturnType, label:
return undefined
}
-describe("useConsoleSidebarSections — Cluster Usage gate", () => {
- it("renders the Cluster Usage entry when SSAR allows nodes list", async () => {
- const client = makeClient({ ssar: ssarResponse(true) })
+function hasItemTo(
+ sections: { items: { to: string }[] }[],
+ to: string,
+) {
+ return sections.some((s) => s.items.some((i) => i.to === to))
+}
+
+describe("useConsoleSidebarSections — admin areas moved out", () => {
+ it("keeps the per-tenant Backups group but drops Cluster Usage and admin Backup Classes", async () => {
+ const client = makeClient({ nodes: true, backupclasses: true })
const { result } = renderHook(() => useConsoleSidebarSections(), {
wrapper: makeWrapper(client),
})
- await waitFor(() =>
- expect(findItem(result.current, "Cluster Usage")).toBeDefined(),
- )
- expect(findItem(result.current, "Cluster Usage")?.to).toBe(
- "/console/cluster-usage",
- )
+ await waitFor(() => expect(result.current.length).toBeGreaterThan(0))
+ // Per-tenant backups stay in Console.
+ expect(findItem(result.current, "Plans")?.to).toBe("/console/backups/plans")
+ // Cluster-wide admin areas are gone from Console.
+ expect(findItem(result.current, "Cluster")).toBeUndefined()
+ expect(hasItemTo(result.current, "/console/backups/backupclasses")).toBe(false)
})
+})
- it("hides the Cluster Usage entry when SSAR denies nodes list", async () => {
- const client = makeClient({ ssar: ssarResponse(false) })
- const { result } = renderHook(() => useConsoleSidebarSections(), {
+describe("useAdminSidebarSections", () => {
+ it("shows Cluster Usage and Backup Classes when both gates allow", async () => {
+ const client = makeClient({ nodes: true, backupclasses: true })
+ const { result } = renderHook(() => useAdminSidebarSections(), {
wrapper: makeWrapper(client),
})
- // Wait until the SSAR request has actually fired (so the absence is the
- // result of a deny, not of the query still being in flight) and the
- // gated entry is not present.
- await waitFor(() => {
- expect(client.create).toHaveBeenCalled()
- expect(findItem(result.current, "Cluster Usage")).toBeUndefined()
- })
+ await waitFor(() =>
+ expect(findItem(result.current, "Cluster")).toBeDefined(),
+ )
+ expect(findItem(result.current, "Cluster")?.to).toBe("/admin/capacity/cluster")
+ expect(findItem(result.current, "Backup Classes")?.to).toBe(
+ "/admin/backups/backupclasses",
+ )
})
- it("hides the Cluster Usage entry while SSAR is still loading (no flicker)", () => {
- const client = makeClient({ ssar: "pending" })
- const { result } = renderHook(() => useConsoleSidebarSections(), {
+ it("shows only Backup Classes when the user lacks nodes/list", async () => {
+ const client = makeClient({ nodes: false, backupclasses: true })
+ const { result } = renderHook(() => useAdminSidebarSections(), {
wrapper: makeWrapper(client),
})
- expect(findItem(result.current, "Cluster Usage")).toBeUndefined()
+ await waitFor(() =>
+ expect(findItem(result.current, "Backup Classes")).toBeDefined(),
+ )
+ expect(findItem(result.current, "Cluster")).toBeUndefined()
})
- it("hides the Cluster Usage entry on SSAR error", async () => {
- const client = makeClient({ ssar: new K8sApiError(500, "boom") })
- const { result } = renderHook(() => useConsoleSidebarSections(), {
+ it("shows only Cluster Usage when the user cannot manage backup classes", async () => {
+ const client = makeClient({ nodes: true, backupclasses: false })
+ const { result } = renderHook(() => useAdminSidebarSections(), {
wrapper: makeWrapper(client),
})
- // Wait until the failing SSAR request has fired and settled; the gated
- // entry must stay absent rather than relying on an arbitrary delay.
- await waitFor(() => {
- expect(client.create).toHaveBeenCalled()
- expect(findItem(result.current, "Cluster Usage")).toBeUndefined()
- })
+ await waitFor(() =>
+ expect(findItem(result.current, "Cluster")).toBeDefined(),
+ )
+ expect(findItem(result.current, "Backup Classes")).toBeUndefined()
})
})
-// The sidebar issues two SSARs (nodes/list for Cluster Usage, and
-// backupclasses/update for Backup Classes); this client answers each by the
-// requested resource so the two gates can be exercised independently.
-function makeResourceClient(allow: Record): K8sClient {
- const client = new K8sClient()
- vi.spyOn(client, "list").mockResolvedValue(emptyAppDefList as K8sList)
- vi.spyOn(client, "create").mockImplementation(async (_g, _v, _p, body) => {
- const resource =
- (body as SelfSubjectAccessReview).spec?.resourceAttributes?.resource ?? ""
- return {
- ...(body as object),
- status: { allowed: allow[resource] ?? false },
- } as unknown
+describe("useCanSeeAdmin", () => {
+ it("is true when nodes/list is allowed", async () => {
+ const client = makeClient({ nodes: true, backupclasses: false })
+ const { result } = renderHook(() => useCanSeeAdmin(), {
+ wrapper: makeWrapper(client),
+ })
+ await waitFor(() => expect(result.current).toBe(true))
})
- return client
-}
-
-// The admin "Backups" entry collides by label with the per-tenant "Backups"
-// item in the Backups group, so locate the admin one by section + URL.
-function findAdminBackupsItem(
- sections: ReturnType,
-) {
- const admin = sections.find((s) => s.title === "Administration")
- return admin?.items.find((i) => i.to === "/console/backups/backupclasses")
-}
-describe("useConsoleSidebarSections — Backup Classes gate", () => {
- it("shows the admin Backups entry when update on backupclasses is allowed", async () => {
- const client = makeResourceClient({ backupclasses: true })
- const { result } = renderHook(() => useConsoleSidebarSections(), {
+ it("is true when only backupclasses/update is allowed", async () => {
+ const client = makeClient({ nodes: false, backupclasses: true })
+ const { result } = renderHook(() => useCanSeeAdmin(), {
wrapper: makeWrapper(client),
})
- await waitFor(() => {
- const item = findAdminBackupsItem(result.current)
- expect(item).toBeDefined()
- expect(item?.label).toBe("Backups")
- })
+ await waitFor(() => expect(result.current).toBe(true))
})
- it("hides the admin Backups entry when update on backupclasses is denied (read-only tenant)", async () => {
- // list allowed, update denied — the read a tenant actually has must NOT
- // be enough to surface the admin entry.
- const client = makeResourceClient({ backupclasses: false })
- const { result } = renderHook(() => useConsoleSidebarSections(), {
+ it("is false when neither admin area is allowed", async () => {
+ const client = makeClient({ nodes: false, backupclasses: false })
+ const { result } = renderHook(() => useCanSeeAdmin(), {
wrapper: makeWrapper(client),
})
- await waitFor(() => {
- expect(client.create).toHaveBeenCalled()
- expect(findAdminBackupsItem(result.current)).toBeUndefined()
- })
- // The per-tenant "Backups" group item (different URL) remains visible.
- expect(findItem(result.current, "Plans")).toBeDefined()
+ await waitFor(() => expect(client.create).toHaveBeenCalled())
+ expect(result.current).toBe(false)
})
})
diff --git a/apps/console/src/routes/sidebar-sections.tsx b/apps/console/src/routes/sidebar-sections.tsx
index 4e7b69a..b223b2e 100644
--- a/apps/console/src/routes/sidebar-sections.tsx
+++ b/apps/console/src/routes/sidebar-sections.tsx
@@ -5,17 +5,19 @@ import {
Database,
Gauge,
Globe,
+ HardDrive,
Info,
LayoutGrid,
Layers,
Network,
+ Server,
ToyBrick,
Users,
type LucideIcon,
} from "lucide-react"
import type { SidebarSection } from "@cozystack/ui"
-import { useSelfSubjectAccessReview } from "@cozystack/k8s-client"
import { useBackupClassAdminAccess } from "../hooks/useBackupClassAdminAccess.ts"
+import { useClusterUsageAccess } from "../hooks/useClusterUsageAccess.ts"
import { useApplicationDefinitions, groupByCategory } from "../lib/app-definitions.ts"
import { humanizeKind } from "../lib/humanize.ts"
import {
@@ -72,20 +74,6 @@ export function useMarketplaceSidebarSections(): SidebarSection[] {
export function useConsoleSidebarSections(): SidebarSection[] {
const { data } = useApplicationDefinitions()
const grouped = useMemo(() => groupByCategory(data), [data])
- // Permission gate for the Cluster Usage entry: only operators with
- // cluster-wide nodes/list see the menu item. Loading and error states
- // resolve as "not allowed" so the entry never flickers in then out
- // for users who can't see it.
- const clusterUsageReview = useSelfSubjectAccessReview({
- resourceAttributes: { resource: "nodes", verb: "list" },
- })
- const canSeeClusterUsage =
- !clusterUsageReview.isLoading &&
- !clusterUsageReview.error &&
- clusterUsageReview.allowed
- // Backup Classes is admin-only: tenants have cluster-wide read on
- // backupclasses, so the entry is gated on write (update), not list.
- const { allowed: canManageBackupClasses } = useBackupClassAdminAccess()
return useMemo(() => {
const sorted = [...grouped]
@@ -126,12 +114,6 @@ export function useConsoleSidebarSections(): SidebarSection[] {
const administrationSection: SidebarSection = {
title: "Administration",
items: [
- ...(canSeeClusterUsage
- ? [{ label: "Cluster Usage", to: "/console/cluster-usage", icon: Gauge }]
- : []),
- ...(canManageBackupClasses
- ? [{ label: "Backups", to: "/console/backups/backupclasses", icon: Archive }]
- : []),
{ label: "Info", to: "/console/info", icon: Info },
{ label: "Modules", to: "/console/modules", icon: ToyBrick },
{ label: "External IPs", to: "/console/external-ips", icon: Globe },
@@ -140,5 +122,67 @@ export function useConsoleSidebarSections(): SidebarSection[] {
}
return [...categorySections, backupsSection, administrationSection]
- }, [grouped, canSeeClusterUsage, canManageBackupClasses])
+ }, [grouped])
+}
+
+/**
+ * Access check for the Admin portal. The portal hosts two cluster-wide
+ * operator areas with independent permissions: Cluster Usage (proxied by
+ * `nodes/list`) and Backup Classes (`backupclasses/update`, via
+ * {@link useBackupClassAdminAccess}). A user sees the portal if they can use
+ * at least one. `isLoading` lets route guards wait instead of redirecting
+ * mid-flight; the per-area booleans gate the individual sidebar entries.
+ */
+export function useAdminAccess(): {
+ allowed: boolean
+ isLoading: boolean
+ canClusterUsage: boolean
+ canBackupClasses: boolean
+} {
+ const clusterUsage = useClusterUsageAccess()
+ const backupClasses = useBackupClassAdminAccess()
+ const canClusterUsage = clusterUsage.allowed
+ const canBackupClasses = backupClasses.allowed
+ return {
+ isLoading: clusterUsage.isLoading || backupClasses.isLoading,
+ allowed: canClusterUsage || canBackupClasses,
+ canClusterUsage,
+ canBackupClasses,
+ }
+}
+
+/** Boolean convenience wrapper around {@link useAdminAccess} for nav gating. */
+export function useCanSeeAdmin(): boolean {
+ return useAdminAccess().allowed
+}
+
+/**
+ * Admin sidebar: the cluster-wide operator areas (Capacity and Backup Classes).
+ * Each entry is gated by its own permission so the sidebar never shows an area
+ * the user cannot open.
+ */
+export function useAdminSidebarSections(): SidebarSection[] {
+ const { canClusterUsage, canBackupClasses } = useAdminAccess()
+ return useMemo(() => {
+ const sections: SidebarSection[] = []
+ if (canClusterUsage) {
+ sections.push({
+ title: "Capacity",
+ items: [
+ { label: "Cluster", to: "/admin/capacity/cluster", icon: Gauge },
+ { label: "Nodes", to: "/admin/capacity/nodes", icon: Server },
+ { label: "Storage", to: "/admin/capacity/storage", icon: HardDrive },
+ ],
+ })
+ }
+ if (canBackupClasses) {
+ sections.push({
+ title: "Backups",
+ items: [
+ { label: "Backup Classes", to: "/admin/backups/backupclasses", icon: Archive },
+ ],
+ })
+ }
+ return sections
+ }, [canClusterUsage, canBackupClasses])
}