@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/capacity/shared.tsx

@@ -2,7 +2,6 @@ import {
   useCallback,
   useEffect,
   useState,
-  type ComponentType,
   type ReactNode,
 } from "react";
 import {
@@ -14,6 +13,7 @@ import {
 } from "lucide-react";
 import {
   FreshnessControl,
+  healthToSeverity,
   formatDuration,
   getRadarUpgradeRequirement,
   RadarUpgradeAction,
@@ -24,6 +24,8 @@ import {
   ResourceBar,
   Tooltip,
   WithTooltip,
+  certaintyValueLabel,
+  CertaintyGlyph,
   type CapacityActivityEpisode,
   type CapacityCertainty,
   type CapacityClaimStage,
@@ -38,6 +40,7 @@ import {
   type CapacityManagerRollupStatus,
   type CapacityManagerSummary,
   type CapacityMemberType,
+  type CapacityNodeMember,
   type CapacityPoolSummary,
   type CapacityQuantityObservation,
   type CapacityResourceIdentity,
@@ -59,22 +62,19 @@ import {
 } from "../../api/client";
 import type { SelectedResource } from "../../types";
 import { refToSelectedResource } from "../../utils/navigation";
+import { Notice, ScreenEmptyState } from "../workspace/layout";
 
 // ============================================================================
 // Route model + navigation
 // ============================================================================
 
-export type CapacityTopTab = "overview" | "demand" | "activity";
-export type PoolSection = "summary" | "workloads" | "members" | "configuration";
+import type { PoolSection } from './routes'
+export { capacityPoolPath, parseCapacityRoute } from './routes'
+export type { CapacityRoute, CapacityTopTab, PoolSection } from './routes'
+
 export type CapacityConnectionState =
   "connected" | "disconnected" | "connecting";
 
-export interface CapacityRoute {
-  topTab: CapacityTopTab;
-  poolName?: string;
-  poolSection: PoolSection;
-}
-
 export const POOL_SECTIONS: { id: PoolSection; label: string }[] = [
   { id: "summary", label: "Summary" },
   { id: "workloads", label: "Workloads" },
@@ -82,40 +82,6 @@ export const POOL_SECTIONS: { id: PoolSection; label: string }[] = [
   { id: "configuration", label: "Configuration" },
 ];
 
-export function parseCapacityRoute(pathname: string): CapacityRoute {
-  const segments = pathname.replace(/^\/+|\/+$/g, "").split("/");
-  if (segments[0] !== "capacity")
-    return { topTab: "overview", poolSection: "summary" };
-  if (segments[1] === "pools" && segments[2]) {
-    const section = segments[3];
-    return {
-      topTab: "overview",
-      poolName: decodePathSegment(segments[2]),
-      poolSection:
-        section === "workloads" ||
-        section === "members" ||
-        section === "configuration"
-          ? section
-          : "summary",
-    };
-  }
-  if (segments[1] === "demand" || segments[1] === "activity")
-    return { topTab: segments[1], poolSection: "summary" };
-  return { topTab: "overview", poolSection: "summary" };
-}
-
-function decodePathSegment(value: string): string {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-
-export function capacityPoolPath(name: string): string {
-  return `/capacity/pools/${encodeURIComponent(name)}`;
-}
-
 export function identityToSelectedResource(
   identity: CapacityResourceIdentity,
 ): SelectedResource {
@@ -264,20 +230,6 @@ function missingUsageMessage(coverage?: CapacitySourceCoverage): string {
 // = exact · ≥ lower bound · ≤ upper bound · ? unknown
 // ============================================================================
 
-export function certaintyGlyph(certainty: CapacityCertainty): string {
-  if (certainty === "exact") return "=";
-  if (certainty === "lower_bound") return "≥";
-  if (certainty === "upper_bound") return "≤";
-  return "?";
-}
-
-export function certaintyValueLabel(certainty: CapacityCertainty): string {
-  if (certainty === "exact") return "Exact";
-  if (certainty === "lower_bound") return "Lower bound";
-  if (certainty === "upper_bound") return "Upper bound";
-  return "Unknown certainty";
-}
-
 export function observationTitle(
   observation: CapacityQuantityObservation,
   definition?: string,
@@ -293,28 +245,6 @@ export function observationTitle(
   return parts.join(" ");
 }
 
-/** Small bordered mono glyph chip; hover reveals certainty/source/asOf. */
-export function CertaintyGlyph({
-  certainty,
-  title,
-}: {
-  certainty: CapacityCertainty;
-  title?: string;
-}) {
-  return (
-    <WithTooltip tip={title ?? certaintyValueLabel(certainty)}>
-      <span
-        tabIndex={0}
-        role="note"
-        aria-label={title ?? certaintyValueLabel(certainty)}
-        className="cursor-help rounded border border-theme-border-light px-1 font-mono text-[10px] leading-tight text-theme-text-tertiary focus-visible:outline focus-visible:outline-2 focus-visible:outline-skyhook-500"
-      >
-        {certaintyGlyph(certainty)}
-      </span>
-    </WithTooltip>
-  );
-}
-
 // ============================================================================
 // Quantity / resource formatting
 // ============================================================================
@@ -603,32 +533,21 @@ export function PoolReadyBadge({ ready }: { ready?: boolean }) {
 export function NodeReadyBadge({
   ready,
   cordoned,
+  lifecycle,
 }: {
   ready?: boolean;
   cordoned: boolean;
+  lifecycle?: CapacityNodeMember["lifecycle"];
 }) {
-  if (ready === false)
-    return (
-      <Badge severity="error" size="sm">
-        NotReady
-      </Badge>
-    );
-  if (ready === undefined)
-    return (
-      <Badge severity="neutral" size="sm">
-        Unknown
-      </Badge>
-    );
-  if (cordoned)
-    return (
-      <Badge severity="warning" size="sm">
-        Cordoned
-      </Badge>
-    );
+  if (lifecycle) {
+    return <Badge severity={healthToSeverity(lifecycle.level)} size="sm">{lifecycle.label}</Badge>;
+  }
   return (
-    <Badge severity="success" size="sm">
-      Ready
-    </Badge>
+    <WithTooltip tip="Kubernetes readiness only; removal status is unavailable from this Radar.">
+      <Badge severity={ready === false ? "error" : ready === undefined ? "neutral" : cordoned ? "warning" : "success"} size="sm">
+        {ready === false ? "NotReady (condition)" : ready === undefined ? "Readiness unknown" : cordoned ? "Cordoned" : "Ready (condition)"}
+      </Badge>
+    </WithTooltip>
   );
 }
 
@@ -1250,15 +1169,6 @@ export function TokenGroup({
   );
 }
 
-export function Notice({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-surface px-3 py-2 text-sm text-theme-text-secondary">
-      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary" />
-      <div>{children}</div>
-    </div>
-  );
-}
-
 export function RefreshError({ message }: { message: string }) {
   return (
     <Notice>
@@ -1336,31 +1246,6 @@ export function InlineEmpty({
   );
 }
 
-export function EmptyState({
-  icon: Icon,
-  title,
-  detail,
-  action,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  title: string;
-  detail: ReactNode;
-  action?: ReactNode;
-}) {
-  return (
-    <div className="flex min-h-0 flex-1 items-center justify-center bg-theme-base p-6">
-      <div className="max-w-md text-center">
-        <Icon className="mx-auto h-9 w-9 text-theme-text-tertiary/50" />
-        <h2 className="mt-3 text-lg font-medium text-theme-text-primary">
-          {title}
-        </h2>
-        <p className="mt-1 text-sm text-theme-text-secondary">{detail}</p>
-        {action}
-      </div>
-    </div>
-  );
-}
-
 export function ScrollableContent({ children }: { children: ReactNode }) {
   // Expanding/collapsing cards can toggle the scrollbar; a stable gutter
   // keeps the centered column from shifting sideways when that happens.
@@ -1469,7 +1354,7 @@ rules:
 export function DeniedCapacityState({ detail }: { detail: string }) {
   const [copied, setCopied] = useState(false);
   return (
-    <EmptyState
+    <ScreenEmptyState
       icon={Shield}
       title="Capacity access denied"
       detail={detail}
@@ -1528,7 +1413,7 @@ export function integrationBlock(
     const upgrade = getRadarUpgradeRequirement(error);
     if (upgrade)
       return (
-        <EmptyState
+        <ScreenEmptyState
           icon={Gauge}
           title={radarUpgradeHeadline("Capacity")}
           detail={radarUpgradeDetail(upgrade)}
@@ -1540,7 +1425,7 @@ export function integrationBlock(
         />
       );
     return (
-      <EmptyState
+      <ScreenEmptyState
         icon={AlertTriangle}
         title="Capacity unavailable"
         detail={errorMessage(error)}
@@ -1558,7 +1443,7 @@ export function integrationBlock(
     );
   if (response.state === "not_detected")
     return (
-      <EmptyState
+      <ScreenEmptyState
         icon={Gauge}
         title="Karpenter not detected"
         detail="Capacity appears automatically when this cluster exposes Karpenter NodePools."
@@ -1847,15 +1732,3 @@ export function PoolSelector({
     </div>
   );
 }
-
-// ============================================================================
-// Shared table cell classes (keeps every capacity table visually identical)
-// ============================================================================
-
-export const TABLE_WRAP = "overflow-x-auto";
-export const TABLE_HEAD =
-  "border-b border-theme-border bg-theme-base/60 text-[11px] uppercase tracking-wide text-theme-text-tertiary";
-export const TH = "px-3 py-2.5 text-left font-medium whitespace-nowrap";
-export const TD = "px-3 py-2.5 align-top text-sm text-theme-text-primary";
-export const TBODY = "table-divide-subtle";
-export const ROW_HOVER = "transition-colors hover:bg-theme-hover/50";

package/src/components/capacity/workspaceRoute.ts

@@ -0,0 +1,18 @@
+import type { WorkspaceRoute } from '../../integrations/workspaceRoute'
+import { parseCapacityRoute } from './routes'
+
+export const capacityWorkspaceRoute: WorkspaceRoute = {
+  id: 'capacity',
+  path: '/capacity',
+  label: 'Capacity',
+  navView: 'capacity',
+  namespaceScope: 'cluster',
+  namespaceFilterTooltip: 'Capacity is reported across the cluster — the namespace filter doesn’t apply here.',
+  pageTitle(pathname) {
+    const route = parseCapacityRoute(pathname)
+    if (route.poolName) return route.poolName
+    if (route.topTab === 'demand') return 'Capacity Demand'
+    if (route.topTab === 'activity') return 'Capacity Activity'
+    return 'Capacity'
+  },
+}

package/src/components/cnpg/CNPGActionHost.compatibility.test.tsx

@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { cnpgHost } from './host'
+import { renderCNPGHeaderActions } from './actions/renderCNPGHeaderActions'
+import { radarFeatureSupport } from '../../api/radarFeatures'
+const state = vi.hoisted(() => ({ capabilities: { features: { resourceIssues: true } } as any }))
+vi.mock('../../api/client', async original => ({ ...await original<typeof import('../../api/client')>(), useRadarFeature: () => ({ support: radarFeatureSupport('cnpgWorkspace', state.capabilities, 'v1.16.0') }) }))
+vi.mock('./CNPGClusterTabs', () => ({ CNPGInvestigationAction: () => <span>CNPG investigation</span> }))
+vi.mock('./actions/CNPGClusterActions', () => ({ CNPGClusterActions: () => <span>CNPG write actions</span> }))
+vi.mock('./actions/CNPGConnectButton', () => ({ CNPGConnectButton: () => null }))
+vi.mock('./actions/CNPGScheduleActions', () => ({ CNPGScheduleActions: () => null }))
+vi.mock('./actions/CNPGPoolerActions', () => ({ CNPGPoolerActions: () => null }))
+vi.mock('./operations/CNPGOperationTracker', () => ({ CNPGOperationTracker: () => null }))
+vi.mock('./recovery/CNPGRestoreButton', () => ({ CNPGRestoreButton: () => null }))
+beforeEach(() => { state.capabilities = { features: { resourceIssues: true } } })
+const context = { kind: 'Cluster', group: 'postgresql.cnpg.io', namespace: 'db', name: 'pg', compact: false }
+const resource = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { name: 'pg', namespace: 'db', uid: 'uid-pg' } }
+it('preserves ordinary Diagnose and omits new action affordances on the shipped missing-flag state', () => {
+  const original = vi.fn(() => <span>ordinary investigation</span>)
+  expect(renderToStaticMarkup(cnpgHost.diagnoseAction(original)!(context))).toContain('ordinary investigation')
+  expect(original).toHaveBeenCalledWith(context)
+  expect(renderToStaticMarkup(renderCNPGHeaderActions({ resource, namespace: 'db', name: 'pg', compact: false }))).toBe('')
+})
+it('mounts the CNPG decorations once their contracts are advertised', () => {
+  state.capabilities = { features: { cnpgWorkspace: true } }
+  const original = vi.fn(() => <span>ordinary investigation</span>)
+  expect(renderToStaticMarkup(cnpgHost.diagnoseAction(original)!(context))).toContain('CNPG investigation')
+  expect(original).not.toHaveBeenCalled()
+  expect(renderToStaticMarkup(renderCNPGHeaderActions({ resource, namespace: 'db', name: 'pg', compact: false }))).toContain('CNPG write actions')
+})

package/src/components/cnpg/CNPGArchivingRepair.tsx

@@ -0,0 +1,191 @@
+import { cnpgClusterPlugins, cnpgPluginPhase, formatAge, getCNPGClusterBarmanPlugin, StatusDot, toneTextClass, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import type { CNPGRuntimeInstance } from '../../api/cnpg'
+import { backupMethod, cnpgArchiveDestination, cnpgRecoveryBase, resumeBoundary, type CNPGRecoveryBase } from './archivingRepair'
+
+const RESUMED_WINDOW_MS = 24 * 60 * 60 * 1000
+
+/**
+ * WAL archiving, as a repair: why it fails, where the destination and its
+ * credentials are declared, where the archiver logs, then whether archiving
+ * resumed and a fresh base backup exists. Shown while archiving fails, and
+ * for a day after it resumes so the fix can be confirmed here.
+ */
+export function CNPGArchivingRepair({
+  row,
+  primary,
+  objectStores,
+  backups,
+  onOpenLogs,
+  onOpenOperator,
+  onInspect,
+}: {
+  row: CNPGFleetRow
+  primary?: CNPGRuntimeInstance
+  objectStores: any[]
+  /** This namespace's CNPG Backups, or null when they could not be read. */
+  backups: any[] | null
+  onOpenLogs?: (pod: string, container: string) => void
+  onOpenOperator?: () => void
+  onInspect: (r: SelectedResource) => void
+}) {
+  const wal = row.protection.walArchiving
+  const arch = primary && (primary.status.state === 'ok' || primary.status.state === 'partial') ? primary.status.archiving : undefined
+  const failedAt = arch?.lastFailedAt ? Date.parse(arch.lastFailedAt) : NaN
+  const archivedAt = arch?.lastArchivedAt ? Date.parse(arch.lastArchivedAt) : NaN
+  const failingNow = wal.tone === 'unhealthy' || (Number.isFinite(failedAt) && (!Number.isFinite(archivedAt) || failedAt > archivedAt))
+  // Only the instance manager records that archiving failed: the condition
+  // turning True also happens when archiving is first set up, so it marks a
+  // resume only after a failure the instance manager saw. Its stats restart
+  // with the primary, and the panel then has nothing left to show.
+  const runtimeResumed = Number.isFinite(failedAt) && Number.isFinite(archivedAt) && archivedAt > failedAt
+  const boundary = resumeBoundary(row.cluster, failedAt)
+  const resumed = !failingNow && wal.tone === 'healthy' && runtimeResumed && Number.isFinite(boundary) && Date.now() - boundary < RESUMED_WINDOW_MS
+  if (!failingNow && !resumed) return null
+
+  // A plugin archives WAL only when it is marked isWALArchiver; otherwise the
+  // in-tree barmanObjectStore (if any) does, from the postgres container.
+  const barman = getCNPGClusterBarmanPlugin(row.cluster)
+  const plugin = barman?.isWALArchiver ? barman : null
+  const storeName = plugin?.barmanObjectName
+  const store = storeName ? objectStores.find((s) => s?.metadata?.namespace === row.namespace && s?.metadata?.name === storeName) : undefined
+  const inTree = row.cluster?.spec?.backup?.barmanObjectStore
+  const dest = store
+    ? cnpgArchiveDestination(store.spec?.configuration, `ObjectStore ${storeName}`)
+    : inTree
+      ? cnpgArchiveDestination(inTree, 'the Cluster’s spec.backup.barmanObjectStore')
+      : undefined
+  const archiverContainer = plugin ? 'plugin-barman-cloud' : 'postgres'
+  const pluginPhase = cnpgPluginPhase(row.cluster)
+  const primaryPod = primary?.pod ?? row.cluster?.status?.currentPrimary
+  const lastBackup = row.protection.lastSuccessfulBackup
+  const base = resumed ? cnpgRecoveryBase(row, backups, boundary, plugin ? { method: 'plugin', plugin: plugin.name } : { method: 'barmanObjectStore' }, arch?.lastFailedWal) : undefined
+  const baseDone = base?.state === 'verified'
+
+  return (
+    <section className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      <h3 className={`text-sm font-semibold ${failingNow ? toneTextClass('unhealthy') : toneTextClass('healthy')}`}>
+        {failingNow ? 'WAL archiving is failing' : 'WAL archiving resumed'}
+      </h3>
+      <div className="mt-1.5 space-y-1.5 text-sm">
+        {failingNow && (
+          <p className="text-theme-text-primary">
+            {wal.tone === 'unhealthy' ? (
+              wal.detail ? (
+                <>
+                  The operator reports: <span className="font-mono text-xs">{wal.detail}</span>
+                </>
+              ) : (
+                'The operator reports ContinuousArchiving False without a message.'
+              )
+            ) : (
+              `The primary’s instance manager reports a failed archive after its last archived WAL${wal.tone === 'healthy' ? '; the operator’s ContinuousArchiving condition still reads True' : ''}.`
+            )}
+          </p>
+        )}
+        {arch && (
+          <p className="text-xs text-theme-text-secondary">
+            {arch.lastArchivedAt ? `Last archived ${formatAge(arch.lastArchivedAt)} ago${arch.lastArchivedWal ? ` (${arch.lastArchivedWal})` : ''}` : 'Nothing archived since the instance manager started'}
+            {arch.lastFailedAt ? ` · last failure ${formatAge(arch.lastFailedAt)} ago${arch.lastFailedWal ? ` (${arch.lastFailedWal})` : ''}` : ''}
+            {arch.readyWalFiles !== undefined ? ` · ${arch.readyWalFiles} files waiting` : ''} · from the primary’s instance manager
+          </p>
+        )}
+        {failingNow && dest && (
+          <div className="text-xs text-theme-text-secondary">
+            <div>
+              Destination <span className="font-mono text-theme-text-primary">{dest.path ?? 'path not declared'}</span>
+              {dest.endpointURL && <> via <span className="font-mono">{dest.endpointURL}</span></>}, declared in{' '}
+              {store ? (
+                <button type="button" className="text-accent-text hover:underline" onClick={() => onInspect({ kind: 'objectstores', group: 'barmancloud.cnpg.io', namespace: row.namespace, name: storeName! })}>
+                  {dest.declaredIn}
+                </button>
+              ) : (
+                dest.declaredIn
+              )}
+              .
+            </div>
+            <div className="mt-0.5">
+              Credentials:{' '}
+              {dest.identity && (
+                <>
+                  {dest.identity}
+                  {dest.secrets.length > 0 && ' · '}
+                </>
+              )}
+              {!dest.identity && dest.secrets.length === 0
+                ? 'none referenced'
+                : dest.secrets.map((s, i) => (
+                      <span key={`${s.secret}/${s.key}/${s.what}`}>
+                        {i > 0 && ' · '}
+                        {s.what} in Secret{' '}
+                        <button type="button" className="font-mono text-accent-text hover:underline" onClick={() => onInspect({ kind: 'secrets', group: '', namespace: row.namespace, name: s.secret })}>
+                          {s.secret}
+                        </button>
+                        {s.key ? <span className="font-mono">/{s.key}</span> : null}
+                      </span>
+                    ))}
+              . Radar names them and does not read them.
+            </div>
+          </div>
+        )}
+        {failingNow && primaryPod && (
+          <p className="text-xs text-theme-text-secondary">
+            The primary archives from its <span className="font-mono">{archiverContainer}</span> container; the failing command’s output is in its logs.{' '}
+            {onOpenLogs && (
+              <button type="button" className="text-accent-text hover:underline" onClick={() => onOpenLogs(primaryPod, archiverContainer)}>
+                {archiverContainer} logs of {primaryPod} →
+              </button>
+            )}
+          </p>
+        )}
+        {failingNow && pluginPhase && (
+          <p className="text-xs text-theme-text-secondary">
+            Separately, the Cluster’s phase says the operator {pluginPhase === 'unknownPlugin' ? 'does not know a plugin this cluster requires' : 'hit an error talking to one of this cluster’s plugins'} (spec.plugins:{' '}
+            {cnpgClusterPlugins(row.cluster).join(', ') || 'none listed'}), so it cannot reconcile this cluster until that clears.{' '}
+            {onOpenOperator && (
+              <button type="button" className="text-accent-text hover:underline" onClick={onOpenOperator}>
+                Operator and plugins →
+              </button>
+            )}
+          </p>
+        )}
+        <ol className="mt-1 space-y-1 text-xs">
+          <li className="flex items-start gap-2">
+            <span className="flex h-4 shrink-0 items-center"><StatusDot tone={failingNow ? 'unknown' : 'healthy'} /></span>
+            <span className={failingNow ? 'text-theme-text-secondary' : 'text-theme-text-primary'}>
+              Archiving resumes: the operator reports ContinuousArchiving True and a WAL file archives after the last failure.
+              {failingNow ? ' Not yet.' : ` Done${arch?.lastArchivedAt ? `, ${formatAge(arch.lastArchivedAt)} ago` : ''}.`}
+            </span>
+          </li>
+          <li className="flex items-start gap-2">
+            <span className="flex h-4 shrink-0 items-center"><StatusDot tone={baseDone ? 'healthy' : 'unknown'} /></span>
+            <span className={baseDone ? 'text-theme-text-primary' : 'text-theme-text-secondary'}>
+              A base backup that begins after the last WAL that failed to archive completes (Back up now, above), so a restore from it needs none of that WAL.{' '}
+              {failingNow || !base
+                ? `Not yet. Newest successful backup: ${lastBackup.at ? `${formatAge(lastBackup.at)} ago` : lastBackup.text.toLowerCase()}.`
+                : recoveryBaseText(base)}
+            </span>
+          </li>
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+function recoveryBaseText(base: CNPGRecoveryBase): string {
+  const label = (b: any) => `Backup ${b?.metadata?.name} (${backupMethod(b)})`
+  switch (base.state) {
+    case 'unread':
+      return 'Radar cannot read this namespace’s Backups, so it cannot tell.'
+    case 'none':
+      return 'No completed Backup of this cluster has started since archiving resumed.'
+    case 'verified':
+      return `Done: ${label(base.backup)} begins at WAL ${base.backup.status.beginWal}, after ${base.failedWal}, and completed ${formatAge(base.backup.status.stoppedAt ?? base.backup.status.startedAt)} ago.`
+    case 'beginsBefore':
+      return `${label(base.backup)} started after archiving resumed but begins at WAL ${base.backup?.status?.beginWal ?? '(not reported)'}, not after ${base.failedWal} — likely from a standby that had not replayed past it. Take another.`
+    case 'unverifiable':
+      return base.missing === 'beginWal'
+        ? `${label(base.backup)} started after archiving resumed and completed, but its status does not say which WAL it begins at, so Radar cannot compare it with the last failed one.`
+        : `${label(base.backup)} started after archiving resumed and completed; Radar cannot compare where it begins with the last failed WAL, which only the primary’s instance manager reports and is not reporting now.`
+  }
+}

package/src/components/cnpg/CNPGBlockingSessions.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+const state = vi.hoisted(() => ({ data: { pod: 'pg-1', state: 'denied', permission: { exec: 'denied', grant: { verb: 'create', resource: 'pods', subresource: 'exec', namespace: 'db' } }, instances: [] } as any, navigate: vi.fn() }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => state.navigate }))
+vi.mock('react-router-dom', async (original) => ({ ...await original<typeof import('react-router-dom')>(), useLocation: () => ({ pathname: '/cnpg/clusters/db/pg', search: '?ctx=test&tab=performance&drawer=x', state: { returnLabel: 'Clusters' } }) }))
+vi.mock('@tanstack/react-query', async (original) => ({ ...await original<typeof import('@tanstack/react-query')>(), useQueries: () => [{ data: { containers: [] } }] }))
+vi.mock('../../api/client', () => ({ podMetricsQuery: () => ({}), usePodMetrics: () => ({ data: { containers: [{ name: 'postgres', usage: { cpu: '30000000n', memory: '59Mi' } }] } }) }))
+vi.mock('../../api/cnpg-sessions', () => ({
+  useCNPGSessions: () => ({
+    data: state.data,
+    isLoading: false,
+    error: null,
+    isRefetchError: false,
+    dataUpdatedAt: Date.now(),
+  }),
+}))
+
+const { CNPGBlockingSessions } = await import('./CNPGBlockingSessions')
+
+describe('CNPGBlockingSessions with exec denied', () => {
+  it('explains only the exec grant for blocking detail', () => {
+    const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+    expect(html).toContain('Who blocks whom is read inside PostgreSQL')
+    expect(html).toContain('create pods/exec')
+    expect(html).not.toContain('aggregate')
+    expect(html).not.toContain('get pods/proxy')
+  })
+})
+
+it('keeps query-text prose out of unavailable states while the host owns the prerequisite', () => {
+  expect(renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)).not.toContain('Query text')
+  state.data = { pod: '', state: 'unavailable', permission: { exec: 'unknown' }, instances: [] }
+  const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+  expect(html).toContain('Blocking detail not measured')
+  expect(html).not.toContain('Available once the primary is running')
+  expect(html).not.toContain('See Overview')
+  expect(html).not.toContain('could not be read')
+  expect(html).not.toContain('Query text')
+})
+it('keeps CPU and memory measurements and limits on separate rows with unbreakable units', () => {
+  state.data = { pod: 'pg-1', state: 'ok', permission: { exec: 'allowed' }, sessions: [], instances: [{ pod: 'pg-1', role: 'primary', memoryLimit: '384Mi' }] }
+  const html = renderToStaticMarkup(<CNPGBlockingSessions namespace="db" cluster="pg" />)
+  expect(html).toMatch(/CPU <span class="whitespace-nowrap">0.03 cores<\/span>/)
+  expect(html).toMatch(/Memory <span class="whitespace-nowrap">59 MiB<\/span>/)
+  expect(html).toContain('limit <span class="whitespace-nowrap">384 MiB</span>')
+  expect(html).not.toContain('Query text')
+  expect(html.indexOf('No session is waiting')).toBeLessThan(html.indexOf('Resource usage'))
+})