@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/cnpg/CNPGReplicationTab.tsx

@@ -0,0 +1,212 @@
+import { clsx } from 'clsx'
+import {
+  CNPGClusterHASection,
+  PaneLoader,
+  RefLink,
+  StatusDot,
+  cnpgHASlotInstance,
+  formatAge,
+  formatGrant,
+  toneTextClass,
+  type CNPGClusterHA,
+  type NavigateToRef,
+} from '@skyhook-io/k8s-ui'
+import { useCNPGRuntime, type CNPGRuntimeInstance } from '../../api/cnpg'
+import { useCNPGClusterHA } from '../../api/cnpg-ha'
+import { cnpgInstanceLive, cnpgInstanceLiveUnavailable } from './runtimeAssessment'
+import { CNPGReplicationView } from './CNPGReplicationView'
+import { CNPGTabVerdict } from './CNPGClusterTabs'
+import { formatBytes } from './lsn'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { Card, ProxyDenied, SourceState } from './runtimeParts'
+import { cnpgRuntimeMeasured } from './runtimeModel'
+import { buildWorkloadPath } from '../../utils/navigation'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { Notice, RefreshFailedNotice } from '../workspace/layout'
+
+/**
+ * Instances, replication and HA: every instance with what Kubernetes says
+ * about its Pod and what PostgreSQL reports about its role, each standby's
+ * streaming state and the slot the primary keeps for it, then the slots no
+ * instance accounts for and the HA configuration a switchover or failover meets.
+ */
+export function CNPGReplicationTab({
+  namespace,
+  name,
+  onOpenLogs,
+  onOpenHistory,
+  onNavigate,
+}: {
+  namespace: string
+  name: string
+  onOpenLogs?: (pod: string) => void
+  onOpenHistory?: () => void
+  onNavigate?: NavigateToRef
+}) {
+  const navigate = useCNPGNavigate()
+  const runtime = useCNPGRuntime(namespace, name)
+  const ha = useCNPGClusterHA(namespace, name)
+  const { fleet } = useCNPGFleet([namespace])
+  const clusterObject = fleet?.rows.find((r) => r.namespace === namespace && r.name === name)?.cluster
+  const data = runtime.data
+  const denied = data?.permission.proxy === 'denied'
+  const grant = formatGrant(data?.permission.grant) ?? `get pods/proxy in namespace ${namespace}`
+  const primary = data?.instances.find((i) => i.role === 'primary')
+  const replicas = data?.instances.filter((i) => i.role !== 'primary') ?? []
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <h2 className="text-sm font-semibold text-theme-text-primary">Instances, replication and HA</h2>
+        {data && (
+          <span className="text-xs text-theme-text-tertiary">
+            {denied ? 'Live instance data needs access you do not have' : cnpgRuntimeMeasured(data.instances, 'status') ? `Live instance data · sampled ${formatAge(data.sampledAt)} ago` : `No instance data yet; checked ${formatAge(data.sampledAt)} ago`}
+          </span>
+        )}
+        {onOpenHistory && (
+          <button type="button" onClick={onOpenHistory} className="ml-auto text-xs text-accent-text hover:underline">
+            Replication history →
+          </button>
+        )}
+      </div>
+      <CNPGTabVerdict namespace={namespace} name={name} id="serving" alwaysShow />
+      <CNPGTabVerdict namespace={namespace} name={name} id="replication" />
+      <RefreshFailedNotice queries={[runtime, ha]} />
+
+      {!data && runtime.isLoading ? (
+        <PaneLoader label="Reading live state…" className="h-32" />
+      ) : !data ? (
+        <Notice>Live instance data could not be loaded: {runtime.error instanceof Error ? runtime.error.message : 'unknown error'}</Notice>
+      ) : denied ? (
+        <>
+          <PodsOnly ha={ha.data} namespace={namespace} onNavigate={onNavigate} />
+          <Card title="Live replication"><ProxyDenied what="Streaming state, WAL positions, backlog and replication slots" grant={grant} /></Card>
+        </>
+      ) : (
+        <>
+          <CNPGReplicationView
+            namespace={namespace}
+            cluster={name}
+            primary={primary}
+            replicas={replicas}
+            onOpenLogs={onOpenLogs}
+            ha={ha.data}
+            clusterObject={clusterObject}
+          />
+          <OtherSlots
+            primary={primary}
+            instances={data.instances.map((i) => i.pod)}
+            expectedInstances={[...(clusterObject?.status?.instanceNames ?? []), ...(ha.data?.expectedInstances ?? [])]}
+            joiningInstances={ha.data?.jobs.items.filter((j) => j.role === 'join' && ['pending', 'active', 'running'].includes(j.phase)).map((j) => j.instance).filter((n): n is string => !!n)}
+            clusterObject={clusterObject}
+          />
+        </>
+      )}
+
+      <div className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+        <CNPGClusterHASection
+          ha={ha.data}
+          live={cnpgInstanceLive(data)}
+          liveUnavailable={cnpgInstanceLiveUnavailable(data, runtime.error)}
+          loading={ha.isLoading}
+          error={ha.error instanceof Error ? ha.error.message : undefined}
+          onNavigate={onNavigate}
+          title="High availability"
+          currentPrimary={clusterObject?.status?.currentPrimary}
+          hibernated={fleet?.rows.find((r) => r.namespace === namespace && r.name === name)?.hibernated}
+          onOpenReachability={(svc) => navigate(buildWorkloadPath({ kind: 'services', group: '', namespace: svc.namespace, name: svc.name, tab: 'reachability' }))}
+          showInstances={false}
+          showCertificates={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** Without pods/proxy: the instances as their Pods report them, never a streaming state. */
+function PodsOnly({ ha, namespace, onNavigate }: { ha?: CNPGClusterHA; namespace: string; onNavigate?: NavigateToRef }) {
+  return (
+    <Card title="Instances" footer="Role from the Pod's cnpg.io/instanceRole label and readiness from Kubernetes. Whether each standby is streaming is read from PostgreSQL, which needs the access named below.">
+      {!ha ? (
+        <div className="text-sm text-theme-text-tertiary">Reading instance Pods…</div>
+      ) : ha.pods.state !== 'ok' ? (
+        <div className="text-sm text-theme-text-tertiary">Instance Pods are not readable{ha.pods.grant ? `: needs ${formatGrant(ha.pods.grant)}` : ''}.</div>
+      ) : (
+        <div className="space-y-1.5">
+          {ha.instances.map((i) => (
+            <div key={i.pod} className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+              <StatusDot tone={i.ready ? 'healthy' : 'unhealthy'} />
+              <RefLink refTo={{ kind: 'Pod', group: '', namespace, name: i.pod }} onNavigate={onNavigate} mono />
+              <span className="text-theme-text-secondary">{i.role === 'replica' ? 'standby' : i.role === 'unknown' ? 'role unknown' : 'primary'}</span>
+              <span className={clsx('text-xs', i.ready ? 'text-theme-text-secondary' : toneTextClass('unhealthy'))}>Pod {i.ready ? 'ready' : 'not ready'}</span>
+              {i.node && <span className="text-xs text-theme-text-tertiary">node {i.node}</span>}
+              <span className="text-xs text-theme-text-tertiary">{i.role === 'replica' ? 'streaming not read' : 'live PostgreSQL status not read'}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  )
+}
+
+export function OtherSlots({ primary, instances, expectedInstances = [], joiningInstances = [], clusterObject }: { primary?: CNPGRuntimeInstance; instances: string[]; expectedInstances?: string[]; joiningInstances?: string[]; clusterObject?: any }) {
+  const readable = primary?.status.state === 'ok' || primary?.status.state === 'partial'
+  if (!primary) return null
+  if (!readable || !primary.status.slots) {
+    return (
+      <Card title="Replication slots">
+        <SourceState label="Slots" state={readable ? 'partial' : primary.status.state} error={primary.status.error ?? primary.status.reason ?? 'slots were not read'} />
+      </Card>
+    )
+  }
+  const standbys = instances.filter((name) => name !== primary.pod)
+  const expectedStandbys = expectedInstances.filter((name) => name !== primary.pod)
+  const allInstances = [...new Set([...standbys, ...expectedStandbys])]
+  const waiting = primary.status.slots.filter((sl) => sl.type === 'physical' && !cnpgHASlotInstance(clusterObject, sl.name, standbys) && cnpgHASlotInstance(clusterObject, sl.name, expectedStandbys))
+  const others = primary.status.slots.filter((sl) => sl.type !== 'physical' || !cnpgHASlotInstance(clusterObject, sl.name, allInstances))
+  return (
+    <Card title="Replication slots" footer="Slot inventory from the primary’s instance manager. Physical slot associations use CloudNativePG’s naming convention.">
+    {waiting.length > 0 && (
+      <div className="mb-3 space-y-2">
+        {waiting.map((sl) => {
+          const instance = cnpgHASlotInstance(clusterObject, sl.name, expectedStandbys)!
+          return (
+            <div key={sl.name} className={clsx('text-sm', sl.active === false ? toneTextClass('degraded') : 'text-theme-text-secondary')}>
+              <span className="font-mono">{instance}</span> — {joiningInstances.includes(instance) ? 'waiting to join' : 'no instance Pod observed'}
+              <div className="text-xs text-theme-text-tertiary">Slot {sl.name} · {sl.active === undefined ? 'state unknown' : sl.active ? 'active' : 'inactive'} · {sl.retainedBytes === undefined ? 'retained WAL not reported' : formatBytes(sl.retainedBytes)}</div>
+            </div>
+          )
+        })}
+      </div>
+    )}
+      {others.length === 0 ? (
+        <div className="text-xs text-theme-text-tertiary">{primary.status.slotsTruncated ? 'No other slots in the reported inventory; inventory incomplete' : 'No other slots reported'}</div>
+      ) : (
+        <table className="w-full text-sm">
+          <thead className="text-left text-[11px] uppercase tracking-wide text-theme-text-tertiary">
+            <tr>
+              <th className="py-1.5 pr-3">Slot</th>
+              <th className="pr-3">Type</th>
+              <th className="pr-3">Database</th>
+              <th className="pr-3">State</th>
+              <th className="pr-3">WAL status</th>
+              <th className="text-right">Holds</th>
+            </tr>
+          </thead>
+          <tbody className="table-divide-subtle">
+            {others.map((sl) => (
+              <tr key={sl.name}>
+                <td className="py-1.5 pr-3 font-mono text-xs">{sl.name}{sl.type === 'physical' && <div className="font-sans text-theme-text-tertiary">association unverified</div>}</td>
+                <td className="pr-3">{sl.type ?? '—'}</td>
+                <td className="pr-3 font-mono text-xs">{sl.database ?? '—'}</td>
+                <td className={clsx('pr-3', sl.active === false && toneTextClass('degraded'))}>{sl.active === undefined ? 'state unknown' : sl.active ? 'active' : 'inactive'}</td>
+                <td className="pr-3">{sl.walStatus ?? '—'}</td>
+                <td className="text-right font-mono">{formatBytes(sl.retainedBytes)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </Card>
+  )
+}

package/src/components/cnpg/CNPGReplicationView.tsx

@@ -0,0 +1,264 @@
+import { useId } from 'react'
+import { ArrowRight } from 'lucide-react'
+import { clsx } from 'clsx'
+import {
+  Badge,
+  CNPG_ROLE_DETAIL_TEXT,
+  CNPG_SLOT_RETENTION_WARNING_BYTES,
+  cnpgFormatLag,
+  cnpgHASlotName,
+  StatusDot,
+  Tooltip,
+  toneFillClass,
+  toneTextClass,
+  type CNPGClusterHA,
+  type CNPGHAInstance,
+} from '@skyhook-io/k8s-ui'
+import { useCNPGClusterCapabilities, type CNPGRuntimeInstance, type CNPGRuntimeReplication } from '../../api/cnpg'
+import { CNPGInstanceActions } from './actions/CNPGInstanceActions'
+import { formatBytes, lsnDistance, standbyOwnBacklog } from './lsn'
+import { CNPG_BACKLOG_DEGRADED, cnpgNoStandbyText, cnpgStandbyBacklogTone, cnpgStandbyHeadline } from './runtimeModel'
+import { Card, SourceState } from './runtimeParts'
+
+function seconds(s?: number): string {
+  return s === undefined ? '—' : cnpgFormatLag(s)
+}
+
+type RuntimeSlot = NonNullable<CNPGRuntimeInstance['status']['slots']>[number]
+
+/** Readiness, node and QoS from the instance Pod: what Kubernetes says, kept apart from what PostgreSQL reports. */
+function PodLine({ pod }: { pod?: CNPGHAInstance }) {
+  if (!pod) return null
+  return (
+    <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-theme-text-secondary">
+      <span className={pod.ready ? undefined : toneTextClass('unhealthy')}>Pod {pod.ready ? 'ready' : 'not ready'}</span>
+      {pod.node && <span>node <span className="font-mono">{pod.node}</span></span>}
+      {pod.qosClass && <span>QoS {pod.qosClass}</span>}
+      {pod.restartCount > 0 && <span>{pod.restartCount} container restart{pod.restartCount === 1 ? '' : 's'}</span>}
+      {pod.imageMatches === false && <Badge severity="warning" size="sm">image differs</Badge>}
+    </div>
+  )
+}
+
+/** The HA slot the primary keeps for this standby, beside the standby it serves, as `kubectl cnpg status` shows it. */
+function SlotLine({ slot, name }: { slot?: RuntimeSlot; name: string }) {
+  if (!slot) {
+    return <div className="mt-1 text-xs text-theme-text-tertiary">Slot <span className="font-mono">{name}</span>: not present on the primary</div>
+  }
+  const held = (slot.retainedBytes ?? 0) >= CNPG_SLOT_RETENTION_WARNING_BYTES && slot.active === false
+  return (
+    <div className="mt-1 text-xs">
+      <span className="text-theme-text-secondary">Slot on the primary </span>
+      <span className="font-mono">{slot.name}</span>
+      <span className={clsx(slot.active === false ? toneTextClass('degraded') : 'text-theme-text-secondary')}> · {slot.active === undefined ? 'state unknown' : slot.active ? 'active' : 'inactive'}</span>
+      <span className={held ? toneTextClass('degraded') : 'text-theme-text-secondary'}> · holds {formatBytes(slot.retainedBytes)} of WAL</span>
+      {slot.walStatus && <span className="text-theme-text-tertiary"> · WAL status {slot.walStatus}</span>}
+    </div>
+  )
+}
+
+function InstanceFacts({ inst, primaryVersion }: { inst: CNPGRuntimeInstance; primaryVersion?: string }) {
+  const s = inst.status
+  if (s.state !== 'ok' && s.state !== 'partial') return null
+  const skew = s.instanceManagerVersion && primaryVersion && s.instanceManagerVersion !== primaryVersion
+  return (
+    <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-theme-text-secondary">
+      {s.roleDetail && s.roleDetail !== 'replayPaused' && <span>{CNPG_ROLE_DETAIL_TEXT[s.roleDetail]}</span>}
+      {s.timeline !== undefined && <span className="font-mono">timeline {s.timeline}</span>}
+      {s.instanceManagerVersion && (
+        <span className={skew ? toneTextClass('degraded') : undefined}>
+          CNPG instance manager {s.instanceManagerVersion}
+          {skew ? ` (primary runs ${primaryVersion})` : ''}
+        </span>
+      )}
+      {s.pendingRestart && (
+        <Tooltip content={s.pendingRestartForDecrease ? 'A lowered setting is waiting: the primary must restart before its standbys.' : 'A changed parameter only takes effect after a restart.'}>
+          <Badge severity="warning" size="sm">pending restart</Badge>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+function Backlog({ primary, rep }: { primary?: CNPGRuntimeInstance; rep: CNPGRuntimeReplication }) {
+  const current = primary?.status.currentLsn
+  const replay = lsnDistance(current, rep.replayLsn)
+  const parts: [string, number | undefined][] = [
+    ['not sent', lsnDistance(current, rep.sentLsn)],
+    ['not written', lsnDistance(rep.sentLsn, rep.writeLsn)],
+    ['not flushed', lsnDistance(rep.writeLsn, rep.flushLsn)],
+    ['not replayed', lsnDistance(rep.flushLsn, rep.replayLsn)],
+  ]
+  return (
+    <div className="mt-1 text-xs">
+      <span className="text-theme-text-secondary">Replay backlog </span>
+      <span className="font-mono text-theme-text-primary">{formatBytes(replay)}</span>
+      <span className="text-theme-text-tertiary">
+        {' · '}
+        {parts.map(([label, v]) => `${label} ${formatBytes(v)}`).join(' · ')}
+      </span>
+    </div>
+  )
+}
+
+function Delays({ rep }: { rep: CNPGRuntimeReplication }) {
+  const none = rep.writeLag === undefined && rep.flushLag === undefined && rep.replayLag === undefined
+  return (
+    <div className="mt-0.5 text-xs text-theme-text-tertiary">
+      {none ? (
+        'Acknowledgement delay: none recorded (idle and caught up, or not yet measured)'
+      ) : (
+        <>
+          Acknowledgement delay · write <span className="font-mono">{seconds(rep.writeLag)}</span> · flush <span className="font-mono">{seconds(rep.flushLag)}</span> · replay{' '}
+          <span className="font-mono">{seconds(rep.replayLag)}</span>
+        </>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Instances and replication: each standby's catch-up measured as bytes of WAL
+ * behind the primary, beside PostgreSQL's acknowledgement delays, with each
+ * instance's own report of what it is doing.
+ */
+export function CNPGReplicationView({
+  namespace,
+  cluster,
+  primary,
+  replicas,
+  onOpenLogs,
+  ha,
+  clusterObject,
+}: {
+  namespace: string
+  cluster: string
+  primary?: CNPGRuntimeInstance
+  replicas: CNPGRuntimeInstance[]
+  onOpenLogs?: (pod: string) => void
+  /** The instance Pods as Kubernetes reports them (readiness, node, QoS). */
+  ha?: CNPGClusterHA
+  /** The Cluster object, for the HA slot prefix. */
+  clusterObject?: any
+}) {
+  const instanceId = useId()
+  const rows = new Map((primary?.status.replication ?? []).map((r) => [r.applicationName, r]))
+  // The instance manager keeps answering on a fenced Pod with PostgreSQL
+  // stopped, so fencing comes from the Cluster, not from the runtime read.
+  const fenced = new Set(useCNPGClusterCapabilities(namespace, cluster).data?.facts.instances.filter((i) => i.fenced).map((i) => i.pod))
+  const primaryVersion = primary?.status.instanceManagerVersion
+  const pods = new Map((ha?.pods.state === 'ok' ? ha.instances : []).map((i) => [i.pod, i]))
+  const slots = new Map((primary?.status.slots ?? []).map((sl) => [sl.name, sl]))
+  const slotsRead = !!primary?.status.slots
+  const standbyMeasurementShown = replicas.some((r) => {
+    const rep = rows.get(r.pod)
+    return !!(r.status.receivedLsn || r.status.replayLsn) || !!rep && [rep.sentLsn, rep.writeLsn, rep.flushLsn, rep.replayLsn, rep.writeLag, rep.flushLag, rep.replayLag].some((value) => value !== undefined)
+  })
+  const standbys = replicas.map((r) => {
+    const rep = rows.get(r.pod)
+    const replayBacklog = rep ? lsnDistance(primary?.status.currentLsn, rep.replayLsn) : standbyOwnBacklog(primary?.status, r.status)
+    const otherTimeline = r.status.timeline !== undefined && primary?.status.timeline !== undefined && r.status.timeline !== primary.status.timeline ? r.status.timeline : undefined
+    const backlogTone = cnpgStandbyBacklogTone(replayBacklog, rep?.replayLag)
+    const headline = cnpgStandbyHeadline(r, rep, backlogTone, { fenced: fenced.has(r.pod), primaryRead: primary?.status.state === 'ok' })
+    const backlogText = replayBacklog !== undefined ? `${formatBytes(replayBacklog)} behind` : otherTimeline !== undefined ? 'backlog not comparable' : 'backlog unknown'
+    return { r, rep, replayBacklog, otherTimeline, backlogTone, headline, backlogText }
+  })
+  return (
+    <Card
+      title="Instances and replication"
+      footer={
+        standbyMeasurementShown ? <>
+          Rows come from the primary’s pg_stat_replication through the instance manager. Replay backlog is the primary’s current WAL position minus what the
+          standby has replayed, in bytes: the catch-up measure. A standby that isn't connected has no row, so its backlog uses the position it reports itself — only on
+          the same timeline, since positions on different timelines aren't comparable.
+          Write, flush and replay delay are PostgreSQL’s acknowledgement delay for recent WAL; empty when idle and caught up.
+        </> : 'Source: instance manager status and the primary’s pg_stat_replication.'
+      }
+    >
+      <div aria-label="Replication relationships" className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-theme-border bg-theme-base p-3 text-xs">
+        <span className="font-mono font-medium">{primary?.pod || 'Primary unknown'}</span><span className="text-theme-text-tertiary">primary</span>
+        <ArrowRight className="h-4 w-4 text-theme-text-tertiary" aria-hidden />
+        {standbys.length === 0 ? <span className="text-theme-text-secondary">{cnpgNoStandbyText(clusterObject?.spec?.instances)}</span> : standbys.map(({ r, headline, backlogText }) => <a key={r.pod} href={`#${instanceId}-${r.pod}`} className="inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 rounded border border-theme-border bg-theme-surface px-2 py-1.5 hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"><StatusDot tone={headline.tone} size="xs" /><span className="font-mono">{r.pod}</span><span className={toneTextClass(headline.tone)}>{headline.text}</span><span className="text-theme-text-tertiary">· {backlogText}</span></a>)}
+      </div>
+      <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-[minmax(220px,300px)_minmax(0,1fr)]">
+        <div className="rounded-lg border border-theme-border border-l-4 border-l-accent bg-theme-base p-3">
+          {primary ? (
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm font-semibold">{primary.pod}</span>
+              <Badge tone="structural" size="sm">primary</Badge>
+            </div>
+          ) : (
+            <div className="text-sm text-theme-text-tertiary">No primary reported</div>
+          )}
+          {primary && (
+            <>
+              <div className="mt-1 font-mono text-xs text-theme-text-secondary">WAL position {primary.status.currentLsn ?? '—'}</div>
+              <PodLine pod={pods.get(primary.pod)} />
+              <InstanceFacts inst={primary} />
+              <SourceState label="Status" state={primary.status.state} error={primary.status.error ?? primary.status.reason} />
+              <div className="mt-2 flex flex-wrap gap-3 text-xs">
+                {onOpenLogs && (
+                  <button type="button" className="text-accent-text hover:underline" onClick={() => onOpenLogs(primary.pod)}>
+                    Logs
+                  </button>
+                )}
+                <CNPGInstanceActions namespace={namespace} cluster={cluster} pod={primary.pod} />
+              </div>
+            </>
+          )}
+        </div>
+        <div className="space-y-2">
+          {replicas.length === 0 && <div className="pt-[13px] text-sm text-theme-text-tertiary">{cnpgNoStandbyText(clusterObject?.spec?.instances)}</div>}
+          {standbys.map(({ r, rep, replayBacklog, otherTimeline, backlogTone, headline, backlogText }) => {
+            const tone = headline.tone
+            const pct = replayBacklog !== undefined ? Math.min(100, (replayBacklog / CNPG_BACKLOG_DEGRADED) * 100) : 0
+            return (
+              <div id={`${instanceId}-${r.pod}`} key={r.pod} className="scroll-mt-4 rounded-lg border border-theme-border bg-theme-base p-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <StatusDot tone={tone} />
+                  <span className="font-mono text-sm font-semibold">{r.pod}</span>
+                  <span className={clsx('text-xs', toneTextClass(tone))}>{headline.text}</span>
+                  {headline.secondary && <span className="text-xs text-theme-text-secondary">{headline.secondary}</span>}
+                  <span className="ml-auto font-mono text-xs text-theme-text-secondary">
+                    {backlogText}
+                  </span>
+                </div>
+                {otherTimeline !== undefined && !rep && (
+                  <div className={clsx('mt-1 text-xs', toneTextClass('degraded'))}>
+                    On timeline {otherTimeline} while the primary is on {primary?.status.timeline}: it has not followed the primary’s last promotion, so how far behind it is can’t be
+                    measured from WAL positions.
+                  </div>
+                )}
+                {replayBacklog !== undefined && (
+                  <div className="mt-2 flex items-center gap-2">
+                    <div className="h-1 flex-1 overflow-hidden rounded bg-theme-elevated">
+                      <div className={clsx('h-full', backlogTone === 'unknown' ? 'bg-transparent' : toneFillClass(backlogTone))} style={{ width: `${pct}%` }} />
+                    </div>
+                    <span className="text-[11px] text-theme-text-tertiary">scale: one 16 MiB WAL segment</span>
+                  </div>
+                )}
+                {rep && <Backlog primary={primary} rep={rep} />}
+                {rep && <Delays rep={rep} />}
+                <div className="mt-1 font-mono text-xs text-theme-text-tertiary">
+                  received {r.status.receivedLsn ?? '—'} · replayed {r.status.replayLsn ?? '—'}
+                </div>
+                {slotsRead && <SlotLine slot={slots.get(cnpgHASlotName(clusterObject, r.pod))} name={cnpgHASlotName(clusterObject, r.pod)} />}
+                <PodLine pod={pods.get(r.pod)} />
+                <InstanceFacts inst={r} primaryVersion={primaryVersion} />
+                <SourceState label="Status" state={r.status.state} error={r.status.error ?? r.status.reason} />
+                <div className="mt-2 flex flex-wrap gap-3 text-xs">
+                  {onOpenLogs && (
+                    <button type="button" className="text-accent-text hover:underline" onClick={() => onOpenLogs(r.pod)}>
+                      Logs
+                    </button>
+                  )}
+                  <CNPGInstanceActions namespace={namespace} cluster={cluster} pod={r.pod} />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </Card>
+  )
+}

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

@@ -0,0 +1,140 @@
+// @vitest-environment jsdom
+import { MemoryRouter } from 'react-router-dom'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it, vi } from 'vitest'
+import { CNPGStorage } from './CNPGStorage'
+const state = vi.hoisted(() => ({ permission: 'denied', error: null as Error | null, terminating: false, webhookRejects: false, noData: false, instances: [] as any[], usage: { state: 'notRead' } as any }))
+vi.mock('../../api/cnpg', () => ({ useCNPGClusterCapabilities: () => ({ data: state.noData ? undefined : { facts: { terminating: state.terminating }, operator: { webhookRejects: state.webhookRejects, webhookReason: 'no ready webhook endpoint' }, actions: { reload: { permission: state.permission, allowed: false, reason: 'Hibernated', grant: { verb: 'patch', group: 'postgresql.cnpg.io', resource: 'clusters', namespace: 'db' } } } }, error: state.error, isRefetchError: !!state.error && !state.noData, dataUpdatedAt: Date.now() - 120_000 }) }))
+vi.mock('../../api/cnpg-storage', () => ({ useCNPGClusterStorage: () => ({ data: { volumes: { state: 'ok' }, usage: state.usage, wal: { state: 'ok' }, expansion: { targets: [{ role: 'PG_DATA', field: 'spec.storage.size', declared: '1Gi' }] }, instances: state.instances, findings: [] } }) }))
+const render = () => renderToStaticMarkup(<MemoryRouter><CNPGStorage restoreState="none" namespace="db" name="pg" clusterObject={{ status: { currentPrimary: 'pg-1' } }} runtime={{ data: { instances: [{ pod: 'pg-1', role: 'primary' }], permission: { proxy: 'denied', grant: { verb: 'get', resource: 'pods', subresource: 'proxy', namespace: 'db' } } } } as any} /></MemoryRouter>)
+it('names the missing proxy grant and retains the primary identity', () => {
+  const html = render()
+  expect(html).toContain('Database sizes unavailable: needs')
+  expect(html).toContain('get pods/proxy')
+  expect(html).toContain('in namespace db')
+  expect(html).not.toContain('No primary reported')
+})
+it('refuses a known failed admission webhook or terminating Cluster even with patch access', () => {
+  state.permission = 'allowed'; state.error = null; state.webhookRejects = true
+  expect(render()).toContain('no ready webhook endpoint')
+  expect(render()).toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  state.webhookRejects = false; state.terminating = true
+  expect(render()).toContain('Cluster is being deleted')
+  expect(render()).toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  state.terminating = false
+})
+it('disables size editing for denied patch access and names the grant', () => {
+  state.permission = 'denied'; state.error = null
+  const html = render()
+  expect(html).toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  expect(html).toContain('patch clusters (postgresql.cnpg.io)')
+  state.permission = 'allowed'
+  expect(render()).not.toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  state.error = new Error('Permission timeout')
+  expect(render()).toContain('Last refresh failed: Permission timeout')
+  expect(render()).toContain('2m ago')
+  expect(render()).not.toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  state.noData = true
+  expect(render()).toContain('Permissions could not be checked: Permission timeout')
+  expect(render()).toMatch(/<button[^>]*disabled=""[^>]*>Edit size…/)
+  state.noData = false; state.error = null
+})
+
+it('offers declared-size editing without promising existing claims will expand', () => {
+  state.permission = 'allowed'
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [{ claim: 'pg-1', role: 'PG_DATA', requested: '1Gi', capacity: '1Gi', storageClass: { name: 'local-path', allowVolumeExpansion: false }, resize: {}, usage: { state: 'notRead' } }] }]
+  const html = render()
+  expect(html).toContain('Declared volume sizes')
+  expect(html).toContain('Edit declared size — existing volumes unchanged')
+  expect(html).toContain('larger size will not resize the existing claims')
+  expect(html).not.toContain('operator applies them to every instance')
+  state.instances = []
+})
+
+it('shows slot existence independently of retention and unrelated partial reads', () => {
+  const wal: any = { status: { state: 'ok' }, metrics: { state: 'partial' }, slotInventory: [{ name: '_cnpg_pg_2', active: false }], slots: [] }
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [], wal }]
+  expect(render()).toContain('1 inactive slot')
+  expect(render().match(/retained WAL not reported/g)).toHaveLength(1)
+  wal.status = { state: 'partial', reason: 'Replication connections were capped' }
+  wal.slotInventory = []
+  expect(render()).toContain('No slots')
+  wal.status = { state: 'unreachable' }
+  wal.metrics = { state: 'ok' }
+  wal.slotInventory = null
+  wal.slots = [{ slot: 'subscriber', bytes: 2048 }]
+  const html = render()
+  expect(html).toContain('≥2.0 KiB retained WAL reported; slot inventory not read')
+  expect(html).not.toContain('No slots')
+  state.instances = []
+})
+
+it('labels volumes for an absent instance as an expected standby and associates its slot once', () => {
+  const wal: any = { status: { state: 'ok' }, metrics: { state: 'ok' }, slotInventory: [{ name: '_cnpg_pg_2', active: false }], slots: [] }
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [], wal }, { name: 'pg-2', role: 'replica', volumes: [{ claim: 'pg-2', role: 'PG_DATA', requested: '1Gi', capacity: '1Gi', storageClass: {}, resize: {}, usage: { state: 'notRead' } }] }]
+  const html = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" clusterObject={{ status: { currentPrimary: 'pg-1', instanceNames: ['pg-1', 'pg-2'] } }} runtime={{ data: { permission: { proxy: 'allowed' }, instances: [{ pod: 'pg-1', role: 'primary' }] } } as any} /></MemoryRouter>)
+  expect(html).toContain('expected standby · not running')
+  expect(html).not.toContain('>replica<')
+  expect(html.match(/expected instance pg-2/g)).toHaveLength(1)
+  expect(html).toContain('<div>retained WAL not reported</div>')
+  expect(html.match(/retained WAL not reported/g)).toHaveLength(1)
+  const unread = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" /></MemoryRouter>)
+  expect(unread).not.toContain('expected standby · not running')
+  state.instances = []
+})
+
+it('keeps raw last-archived time folded when no recovery destination exists', () => {
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [], wal: { status: { state: 'ok' }, metrics: { state: 'ok' }, lastArchivedAt: '2026-10-01T12:00:00Z', readyToArchive: 0, slots: [], slotInventory: [] } }]
+  const host = document.createElement('div')
+  host.innerHTML = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" walArchiving={{ state: 'no_destination' as const, text: 'Not archived: no destination configured', tone: 'neutral' }} /></MemoryRouter>)
+  expect(host.textContent).toContain('Not archived: no destination configured')
+  expect(host.textContent).toContain('Instance manager record')
+  expect(host.querySelector('[inert]')?.textContent).toContain('as recorded by the instance manager')
+  expect(host.querySelector('[inert]')?.textContent).toContain('Last archived')
+  state.instances = []
+})
+it('attributes pending volume states and identifies the first instance without an observed role', () => {
+  state.instances = [{ name: 'analytics-1', role: 'unknown', volumes: [{ claim: 'analytics-1', role: 'PG_DATA', requested: '1Gi', phase: 'Pending', clusterState: 'initializing', storageClass: { name: 'local', allowVolumeExpansion: false }, resize: {}, usage: { state: 'notRead' } }] }]
+  const html = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="analytics" clusterObject={{ status: { phase: 'Setting up primary' } }} runtime={{ data: { permission: { proxy: 'allowed' }, instances: [] } } as any} /></MemoryRouter>)
+  for (const text of ['expected first instance · not running', 'WAL cannot be measured until the instance starts', 'Operator: initializing', 'Claim: Pending', 'No capacity provisioned yet', 'Edit the declared size for future claims']) expect(html).toContain(text)
+  expect(html).not.toContain('role unknown')
+  expect(html).not.toContain('Restore into a new Cluster')
+  state.instances = []
+})
+it('prescribes restore only with a verified source and uses intrinsic sibling volume rows', () => {
+  const v = { claim: 'pg-1', role: 'PG_DATA', requested: '1Gi', capacity: '1Gi', storageClass: { name: 'local', allowVolumeExpansion: false }, resize: {}, usage: { state: 'notRead' } }
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [v] }, { name: 'pg-2', role: 'replica', volumes: [{ ...v, claim: 'pg-2', clusterState: 'initializing' }] }]
+  const html = render()
+  expect(html).not.toContain('Restore into a new Cluster')
+  expect(html).toContain('Set up backups before moving to a new Cluster')
+  expect(html).toContain('Backups →')
+  expect(html).toContain('xl:grid-rows-subgrid')
+  expect(html.match(/--cnpg-instance-rows:5/g)).toHaveLength(2)
+  expect(renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" restoreState="available" /></MemoryRouter>)).toContain('Restore into a new Cluster')
+  state.instances = []
+})
+it('explains Prometheus discovery once with candidate details folded', () => {
+  state.usage = { state: 'noPrometheus', reason: 'Prometheus was not found.\nCandidate monitoring/prometheus: connection refused.' }
+  const host = document.createElement('div'); host.innerHTML = render()
+  expect(host.textContent!.match(/Prometheus was not found/g)).toHaveLength(1)
+  expect(host.querySelector('[inert]')?.textContent).toContain('monitoring/prometheus')
+  state.usage = { state: 'notRead' }
+})
+
+it('does not prescribe backup setup or restoration when the source is unread', () => {
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [{ claim: 'pg-1', role: 'PG_DATA', capacity: '1Gi', storageClass: { allowVolumeExpansion: false }, resize: {}, usage: { state: 'notRead' } }] }]
+  const html = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" restoreState="unknown" /></MemoryRouter>)
+  expect(html).toContain('A restore source has not been verified')
+  expect(html).not.toContain('Set up backups')
+  expect(html).not.toContain('Restore into a new Cluster')
+  state.instances = []
+})
+it('keeps a configured-destination absence independent of unread instance records', () => {
+  state.instances = [{ name: 'pg-1', role: 'primary', volumes: [], wal: { status: { state: 'unreachable', error: 'proxy timeout' }, metrics: { state: 'error' }, slots: [] } }]
+  const html = renderToStaticMarkup(<MemoryRouter><CNPGStorage namespace="db" name="pg" walArchiving={{ state: 'no_destination' as const, text: 'Not archived: no destination configured', tone: 'neutral' }} /></MemoryRouter>)
+  expect(html).toContain('Not archived: no destination configured')
+  expect(html).toContain('Archiving record not read: proxy timeout')
+  expect(html).not.toContain('Last archived time not reported')
+  expect(html).not.toContain('wait for the archive')
+  state.instances = []
+})