@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/cnpg/CNPGClusterTabs.tsx

@@ -0,0 +1,187 @@
+import { useRef, type ReactNode } from 'react'
+import type { RenderDiagnoseAction } from '../../context/DiagnoseCustomization'
+import { useSearchParams } from 'react-router-dom'
+import { CNPGDimensionMark, CNPGDimensionVerdict, CNPGServingStatus, coverageReadable, toneTextClass, type CNPGDimension, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useCNPGRuntime } from '../../api/cnpg'
+import { CNPGStorage } from './CNPGStorage'
+import { CNPGArchivingRepair } from './CNPGArchivingRepair'
+import { CNPGProtection } from './CNPGProtection'
+import { CNPGRestoreValidation } from './recovery/CNPGRestoreValidation'
+import { CNPGRestoreButton } from './recovery/CNPGRestoreButton'
+import { assessRestoreSources } from './recovery/restoreModel'
+import { useCNPGRestoreCapability } from '../../api/cnpg-recovery'
+import { CNPGScreenGate } from './shared'
+import { useCNPGClusterAssessment } from './useCNPGClusterAssessment'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { CNPGProtectionSetup } from './protection/CNPGProtectionSetup'
+
+/** The health mark beside a tab: the same assessment the Overview explains, for the dimension that tab holds. */
+export function CNPGTabMark({ namespace, name, id }: { namespace: string; name: string; id: CNPGDimension['id'] }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === id)
+  return dimension ? <CNPGDimensionMark dimension={dimension} /> : null
+}
+
+/** Why a tab carries its mark, as the tab's first line; nothing when the dimension is fine. */
+export function CNPGTabVerdict({ namespace, name, id, className, alwaysShow }: { namespace: string; name: string; id: CNPGDimension['id']; className?: string; alwaysShow?: boolean }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === id)
+  return dimension ? <CNPGDimensionVerdict dimension={dimension} className={className} alwaysShow={alwaysShow} /> : null
+}
+
+/** Whether the cluster serves writes, on its title line, opening the tab that explains it. */
+export function CNPGClusterServing({ namespace, name, onSelect }: { namespace: string; name: string; onSelect: () => void }) {
+  const { dimensions } = useCNPGClusterAssessment(namespace, name)
+  const dimension = dimensions?.find((d) => d.id === 'serving')
+  return dimension ? <CNPGServingStatus dimension={dimension} onSelect={onSelect} /> : null
+}
+
+/** Storage: volumes, what holds WAL, and resize, with the history of both one click away. */
+export function CNPGStorageTab({
+  namespace,
+  name,
+  onOpenHistory,
+  onOpenReplication,
+}: {
+  namespace: string
+  name: string
+  onOpenHistory?: () => void
+  onOpenReplication?: () => void
+}) {
+  const runtime = useCNPGRuntime(namespace, name)
+  const { row, query } = useCNPGClusterAssessment(namespace, name)
+  const clusterObject = row?.cluster
+  const primary = runtime.data?.instances.find((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">Volumes and WAL</h2>
+        {onOpenHistory && (
+          <button type="button" onClick={onOpenHistory} className="ml-auto text-xs text-accent-text hover:underline">
+            Storage history →
+          </button>
+        )}
+      </div>
+      <CNPGTabVerdict namespace={namespace} name={name} id="storage" />
+      {row && <SlotRelief row={row} onOpenReplication={onOpenReplication} />}
+      <CNPGStorage namespace={namespace} name={name} primary={primary} runtime={runtime} clusterObject={clusterObject} restoreState={assessRestoreSources(query.data, namespace, clusterObject).recoveryState} walArchiving={row?.protection.walArchiving} />
+    </div>
+  )
+}
+
+/**
+ * What to do about WAL an inactive slot holds: the standby it is kept for,
+ * whether that standby receives anything, and the two ways the WAL is freed.
+ */
+function SlotRelief({ row, onOpenReplication }: { row: CNPGFleetRow; onOpenReplication?: () => void }) {
+  const slots = row.problems.filter((p) => p.reason === 'CNPGInactiveSlot')
+  if (slots.length === 0) return null
+  const gaps = new Set(row.problems.filter((p) => p.reason === 'CNPGStandbyNotReceiving').map((p) => p.subject.name))
+  return (
+    <section className="rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      {slots.map((p) => {
+        const standby = p.instance
+        return (
+          <div key={p.id} className="space-y-1 text-sm">
+            <div className={toneTextClass('degraded')}>{p.title}</div>
+            <p className="text-theme-text-secondary">
+              The primary keeps that WAL until {standby ?? 'the slot’s consumer'} catches up or the slot is dropped.
+              {standby && gaps.has(standby) ? ` ${standby} is not streaming from the primary, and the slot advances only while it does — even if ${standby} replays WAL from the archive meanwhile.` : ''}
+            </p>
+            {standby && (
+              <p className="text-theme-text-secondary">
+                To free it, get {standby} streaming again — restart it, after checking its logs for why it stopped — or destroy it so CloudNativePG recreates it from
+                a fresh copy of the primary; the operator drops the HA slot of an instance that no longer exists.
+              </p>
+            )}
+            {onOpenReplication && (
+              <button type="button" onClick={onOpenReplication} className="text-xs text-accent-text hover:underline">
+                {standby ? `${standby} on Replication →` : 'Replication →'}
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </section>
+  )
+}
+
+/** Backups: this cluster's recovery evidence, runs, schedules and destination, plus restore validation once it was restored. */
+export function CNPGBackupsTab({
+  namespace,
+  name,
+  onInspect,
+  onOpenLogs,
+  onOpenOperator,
+  onOpenYaml,
+}: {
+  namespace: string
+  name: string
+  onInspect: (r: SelectedResource) => void
+  onOpenLogs?: (pod: string, container: string) => void
+  onOpenOperator?: () => void
+  onOpenYaml?: () => void
+}) {
+  const { query, fleet } = useCNPGFleet([namespace])
+  const { row, runtime } = useCNPGClusterAssessment(namespace, name)
+  const primary = runtime.data?.instances.find((i) => i.role === 'primary')
+  const [searchParams] = useSearchParams()
+  const archivingRepairRef = useRef<HTMLDivElement>(null)
+  const restore = useCNPGRestoreCapability(namespace)
+  const restoreBlocked = restore.data ? (restore.data.allowed ? undefined : restore.data.reason ?? 'Not allowed') : restore.isLoading ? 'Checking whether you can create a Cluster here…' : undefined
+  return (
+    <CNPGScreenGate query={query} fleet={fleet}>
+      {(data, readyFleet) => {
+        const cluster = readyFleet.rows.find((r) => r.namespace === namespace && r.name === name)?.cluster
+        const nothing = assessRestoreSources(data, namespace, cluster).disabledReason
+        return (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <CNPGTabVerdict namespace={namespace} name={name} id="protection" className="px-4 pt-4" />
+          <div className="flex flex-wrap items-center gap-2 px-4 pt-3">
+            <CNPGProtectionSetup key={`${namespace}/${name}`} namespace={namespace} name={name} onInspect={onInspect} onOpenYaml={onOpenYaml} onOpenOperator={onOpenOperator} onOpenArchivingRepair={() => archivingRepairRef.current?.scrollIntoView({ block: 'start' })} />
+            <CNPGRestoreButton namespace={namespace} entry={{ kind: 'cluster', name }} disabledReason={restoreBlocked ?? nothing} />
+            <span className="text-xs text-theme-text-tertiary">{restoreBlocked ?? nothing ?? 'Restores into a new Cluster beside this one; this cluster is not changed.'}</span>
+          </div>
+          {row && (
+            <div ref={archivingRepairRef} className="px-4 pt-4">
+              <CNPGArchivingRepair
+                row={row}
+                primary={primary}
+                objectStores={data.objects.objectStores ?? []}
+                backups={coverageReadable(data.coverage?.backups ?? { state: 'notInstalled' }, namespace) ? (data.objects.backups ?? []) : null}
+                onOpenLogs={onOpenLogs}
+                onOpenOperator={onOpenOperator}
+                onInspect={onInspect}
+              />
+            </div>
+          )}
+          {readyFleet.rows.find((r) => r.namespace === namespace && r.name === name)?.cluster?.spec?.bootstrap?.recovery && (
+            <CNPGRestoreValidation namespace={namespace} name={name} />
+          )}
+          <CNPGProtection
+            data={data}
+            fleet={readyFleet}
+            namespaces={[namespace]}
+            searchParams={searchParams}
+            onSetParams={() => {}}
+            onInspect={onInspect}
+            inspected={null}
+            onClearNamespaces={() => {}}
+            scopeCluster={{ namespace, name }}
+          />
+        </div>
+        )
+      }}
+    </CNPGScreenGate>
+  )
+}
+
+export function CNPGInvestigationAction({ namespace, name, render, context }: {
+  namespace: string; name: string; render: RenderDiagnoseAction; context: Parameters<RenderDiagnoseAction>[0]
+}): ReactNode {
+  const { row, dimensions } = useCNPGClusterAssessment(namespace, name)
+  const problem = !!row?.problems.length || dimensions?.some((d) => ['degraded', 'alert', 'unhealthy'].includes(d.tone))
+  const assessed = !!row && !!dimensions && dimensions.every((d) => d.tone !== 'unknown')
+  return render({ ...context, health: problem ? 'problem' : assessed ? 'healthy' : 'unknown' })
+}

package/src/components/cnpg/CNPGClustersKindView.tsx

@@ -0,0 +1,46 @@
+import type { SelectedResource } from '../../types'
+import { CNPGOverview } from './CNPGOverview'
+import { CNPGScreenGate } from './shared'
+import { useCNPGFleet } from './useCNPGSidebarWorkspace'
+import { useCNPGScreenParams } from './useCNPGScreenParams'
+
+/**
+ * The CloudNativePG Cluster kind's list on its Resources route: the Clusters
+ * view of /cnpg, over the same data and URL parameters, inspecting rows in the
+ * Resources page's drawer.
+ */
+export function CNPGClustersKindView({
+  namespaces,
+  inspected,
+  onInspect,
+  onClearNamespaces,
+  onCreate,
+}: {
+  namespaces: string[]
+  inspected: SelectedResource | null
+  onInspect: (resource: SelectedResource) => void
+  onClearNamespaces: () => void
+  onCreate: () => void
+}) {
+  const { query, fleet } = useCNPGFleet(namespaces)
+  const [searchParams, setParams] = useCNPGScreenParams()
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-theme-base">
+      <CNPGScreenGate query={query} fleet={fleet}>
+        {(data, readyFleet) => (
+          <CNPGOverview
+            data={data}
+            fleet={readyFleet}
+            namespaces={namespaces}
+            searchParams={searchParams}
+            onSetParams={setParams}
+            onInspect={onInspect}
+            inspected={inspected}
+            onClearNamespaces={onClearNamespaces}
+            onCreate={onCreate}
+          />
+        )}
+      </CNPGScreenGate>
+    </div>
+  )
+}

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

@@ -0,0 +1,223 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+vi.mock('./useCNPGKubectlContext', () => ({ useCNPGKubectlContext: () => ({ name: 'kind-test', source: 'test-config' }) }))
+import { CNPGConfiguration, CNPGDeclaredSettings } from './CNPGConfiguration'
+
+const state = vi.hoisted(() => ({ cluster: {} as any, params: {} as any, ha: {} as any, row: undefined as any, workspace: {} as any, navigate: vi.fn() }))
+vi.mock('../../api/client', () => ({ useResource: (kind: string, ns: string, name: string, group: string) => {
+  expect([kind, ns, name, group]).toEqual(['clusters', 'db', 'pg', 'postgresql.cnpg.io'])
+  return { data: state.cluster }
+} }))
+vi.mock('../../api/cnpg-inspect', () => ({ useCNPGParameters: () => state.params }))
+vi.mock('./useCNPGClusterAssessment', () => ({ useCNPGClusterAssessment: () => ({ query: state.workspace, row: state.row, ha: state.ha }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+vi.mock('./useCNPGNavigate', () => ({ useCNPGNavigate: () => state.navigate }))
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const render = () => renderToStaticMarkup(<MemoryRouter><CNPGConfiguration namespace="db" name="pg" onNavigate={() => {}} onSelectTab={() => {}} /></MemoryRouter>)
+beforeEach(() => {
+  state.cluster = { apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { namespace: 'db', name: 'pg' }, spec: { postgresql: { parameters: { shared_buffers: '256MB', work_mem: '8MB' } } }, status: { conditions: [{ type: 'Ready', status: 'False' }] } }
+  state.params = { data: { state: 'denied', declared: [], permission: { exec: 'denied', grant: { verb: 'create', resource: 'pods', subresource: 'exec', namespace: 'db' } }, instances: [] } }
+  state.ha = { error: new Error('HA read denied') }
+  state.row = undefined
+  state.workspace = {}
+  state.navigate.mockClear()
+})
+
+describe('Configuration composition', () => {
+  it('shows declarations when exec is denied, without duplicating status, events or certificates', () => {
+    const html = render()
+    for (const text of ['shared_buffers', '256MB', 'work_mem', '8MB', 'Reported by instance', 'create pods/exec', 'Certificates could not be read: HA read denied']) expect(html).toContain(text)
+    for (const text of ['Conditions', 'Recent Events', 'Audit Findings', 'Cluster Overview', 'on this tab below']) expect(html).not.toContain(text)
+    expect(html.match(/>Certificates</g)).toHaveLength(1)
+    expect(html.indexOf('Connect')).toBeLessThan(html.indexOf('PostgreSQL parameters'))
+    expect(html.indexOf('PostgreSQL parameters')).toBeLessThan(html.indexOf('Certificates'))
+    expect(html.indexOf('Certificates')).toBeLessThan(html.indexOf('Labels and annotations'))
+    expect(html).toContain('aria-expanded="false"')
+    expect(html).toContain('kubectl --context kind-test -n db port-forward service/pg-rw')
+    expect(html).toContain('Context as named in your kubeconfig (test-config); kubectl must read the same kubeconfig file.')
+  })
+  it.each([{ isLoading: true }, { error: new Error('runtime failed') }])('keeps Cluster declarations when observations are unavailable: %j', (query) => {
+    state.params = query
+    const html = render()
+    expect(html).toContain('shared_buffers')
+    expect(html).toContain('256MB')
+    expect(html).toContain('Not read:')
+    expect(html).not.toContain('>In effect<')
+  })
+  it('names which instances answered each parameter and which restart is pending', () => {
+    state.params = { data: { state: 'partial', declared: [{ name: 'shared_buffers', value: '256MB' }, { name: 'work_mem', value: '8MB' }], permission: { exec: 'allowed' }, instances: [
+      { pod: 'pg-1', state: 'ok', settings: [{ name: 'shared_buffers', value: '256MB', source: 'configuration file', context: 'postmaster' }, { name: 'work_mem', value: '8MB', context: 'user' }] },
+      { pod: 'pg-2', state: 'ok', settings: [{ name: 'shared_buffers', value: '128MB', source: 'configuration file', context: 'postmaster', pendingRestart: true }] },
+      { pod: 'pg-3', state: 'unreachable', error: 'timeout' },
+    ] } }
+    const html = render()
+    for (const text of ['pg-1: 256MB', 'pg-2: 128MB', 'Restart pending on pg-2', 'Not reported by pg-2', 'pg-3 (timeout)', '>restart<', 'reload']) expect(html).toContain(text)
+  })
+  it('shows parameters beyond the sampled set as declared and unreported', () => {
+    state.cluster.spec.postgresql.parameters.extra = 'x'
+    state.params = { data: { state: 'ok', declared: [{ name: 'shared_buffers', value: 'old declaration' }], permission: { exec: 'allowed' }, instances: [], omitted: 1 } }
+    const html = render()
+    expect(html).toContain('extra')
+    expect(html).toContain('256MB')
+    expect(html).not.toContain('old declaration')
+    expect(html).toContain('no instance Pod to read')
+    expect(html).toContain('1 declaration was not sampled')
+    expect(html).not.toContain('>unknown<')
+  })
+  it('renders the shared certificate section once when HA answers, including the renewal owner', () => {
+    state.ha = { data: { cluster: { namespace: 'db', name: 'pg' }, rwEndpoints: { state: 'denied', pods: [] }, pods: { state: 'denied' }, instances: [], certificates: [{ secret: 'pg-server', raw: '2100-01-01', expiresAt: '2100-01-01T00:00:00Z', renewal: 'operator' }] } }
+    const html = render()
+    expect(html.match(/>Certificates</g)).toHaveLength(1)
+    expect(html).toContain('pg-server')
+    expect(html).toContain('CloudNativePG renews it')
+    expect(html).not.toContain('Certificates could not be read')
+  })
+  it('keeps cached parameter observations with a refresh-failed notice', () => {
+    state.params = { isRefetchError: true, dataUpdatedAt: Date.now() - 60_000, error: new Error('refresh timed out'), data: { state: 'ok', sampledAt: '2026-10-04T00:00:00Z', declared: [{ name: 'work_mem', value: '8MB' }], permission: { exec: 'allowed' }, instances: [{ pod: 'pg-1', state: 'ok', settings: [{ name: 'work_mem', value: '8MB', context: 'user' }] }] } }
+    const html = render()
+    expect(html).toContain('Last refresh failed: refresh timed out')
+    expect(html).toContain('showing data from')
+    expect(html).toContain('>8MB</span>')
+    expect(html).toContain('read on pg-1')
+    expect(html).not.toContain('Not read: refresh timed out')
+  })
+  it('distinguishes skipped names, no readable instances and a parameter missing from a successful read', () => {
+    state.cluster.spec.postgresql.parameters['invalid name'] = 'x'
+    state.params = { data: { state: 'ok', declared: Object.entries(state.cluster.spec.postgresql.parameters).map(([name, value]) => ({ name, value })), skipped: ['invalid name'], permission: { exec: 'allowed' }, instances: [{ pod: 'pg-1', state: 'unreachable', error: 'timeout' }] } }
+    let html = render()
+    expect(html).toContain('Not read (not a parameter name): invalid name')
+    expect(html).toContain('no instance answered')
+    expect(html).not.toContain('>unknown<')
+    state.params.data.instances = [{ pod: 'pg-1', state: 'ok', settings: [] }]
+    html = render()
+    expect(html).toContain('Not reported by pg-1')
+  })
+  it('opens Declarations scoped to this Cluster with return context', () => {
+    state.cluster.spec.managed = { roles: [{ name: 'reader' }] }
+    const host = document.createElement('div')
+    const root = createRoot(host)
+    act(() => root.render(<MemoryRouter><CNPGConfiguration namespace="db" name="pg" onNavigate={() => {}} onSelectTab={() => {}} /></MemoryRouter>))
+    act(() => [...host.querySelectorAll('button')].find((b) => b.textContent === 'Declarations →')!.click())
+    expect(state.navigate).toHaveBeenCalledWith('/cnpg/declarations?cluster=db%2Fpg', { state: { returnLabel: expect.any(String), returnCtx: 'test' } })
+    act(() => root.unmount())
+  })
+  it('labels a retained workspace row when its Pooler refresh fails', () => {
+    state.row = { poolersKnown: true, poolerObjects: [{ metadata: { namespace: 'db', name: 'pg-pool' }, spec: { cluster: { name: 'pg' } } }] }
+    state.workspace = { isRefetchError: true, dataUpdatedAt: Date.now() - 60_000, error: new Error('workspace timed out') }
+    const html = render()
+    expect(html).toContain('pg-pool')
+    expect(html).toContain('Last refresh failed: workspace timed out')
+    expect(html).toContain('showing data from')
+  })
+  it('labels newly declared parameters as unsampled rather than inferring absent Pods', () => {
+    state.params = { data: { state: 'ok', declared: [], instances: [], permission: { exec: 'allowed' } } }
+    const html = render()
+    expect(html).toContain('2 declared · no parameters sampled')
+    expect(html).not.toContain('no instance Pod')
+    expect(html).toContain('no parameters sampled')
+    expect(html).not.toContain('>unknown<')
+  })
+})
+
+describe('Declared settings', () => {
+  const settings = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  it('omits empty cards and does not invent defaults from the restore preflight', () => {
+    state.cluster.spec = {}
+    state.cluster.status.image = 'running:17'
+    expect(settings()).toBe('')
+    state.cluster.spec = { instances: 2, enableSuperuserAccess: false }
+    const html = settings()
+    expect(html).toContain('Instances and image')
+    expect(html).toContain('Disabled')
+    for (const title of ['Placement and resources', 'Storage', 'Bootstrap and source', 'Backups configuration', 'Roles, services and monitoring']) expect(html).not.toContain(title)
+  })
+  it('omits empty storage stanzas and names PVC template size and class paths precisely', () => {
+    state.cluster.spec = { storage: {}, walStorage: {}, tablespaces: [], resources: { requests: {}, limits: {} }, affinity: { tolerations: [], nodeSelector: {} }, replica: {}, monitoring: {}, managed: { roles: [], services: { additional: [], disabledDefaultServices: [] } }, plugins: [] }
+    expect(settings()).toBe('')
+    state.cluster.spec.storage = { pvcTemplate: { resources: { requests: { storage: '30Gi' } }, storageClassName: 'template-class' } }
+    const html = settings()
+    for (const text of ['30Gi', 'template-class', 'spec.storage.pvcTemplate.resources.requests.storage', 'spec.storage.pvcTemplate.storageClassName']) expect(html).toContain(text)
+    expect(html).not.toContain('size from pvcTemplate')
+  })
+  it('shows each populated card with spec paths and links to operational evidence', () => {
+    state.cluster.spec = {
+      instances: 3, imageName: 'desired:17', primaryUpdateStrategy: 'supervised', primaryUpdateMethod: 'switchover', minSyncReplicas: 1, maxSyncReplicas: 2, postgresql: { synchronous: { method: 'any', number: 1, dataDurability: 'required' } },
+      affinity: { enablePodAntiAffinity: true, topologyKey: 'zone', nodeSelector: { disk: 'ssd' } },
+      topologySpreadConstraints: [{ topologyKey: 'zone', maxSkew: 1, whenUnsatisfiable: 'DoNotSchedule' }], resources: { requests: { cpu: '500m' }, limits: { memory: '1Gi' } }, priorityClassName: 'database',
+      storage: { size: '20Gi', storageClass: 'fast' }, walStorage: { size: '5Gi', storageClass: 'wal' }, tablespaces: [{ name: 'analytics', storage: { size: '10Gi', storageClass: 'slow' } }],
+      bootstrap: { initdb: { database: 'appdb', owner: 'owner' } }, replica: { enabled: false, source: 'origin' }, externalClusters: [{ name: 'origin', connectionParameters: { password: 'DO-NOT-DISPLAY' } }],
+      backup: { barmanObjectStore: { destinationPath: 's3://bucket' }, retentionPolicy: '7d', volumeSnapshot: { className: 'csi' }, target: 'primary' },
+      managed: { roles: [{ name: 'reader' }], services: { disabledDefaultServices: ['ro'], additional: [{ serviceTemplate: { metadata: { name: 'custom' } } }] } },
+      monitoring: { enablePodMonitor: false, customQueriesConfigMap: [{ name: 'queries', key: 'sql' }], customQueriesSecret: [{ name: 'secret-queries', key: 'sql' }] },
+      plugins: [{ name: 'barman-cloud.cloudnative-pg.io', isWALArchiver: true, parameters: { barmanObjectName: 'archive', serverName: 'origin-server' } }],
+    }
+    state.cluster.status.image = 'running:16'
+    const html = settings()
+    for (const title of ['Instances and image', 'Placement and resources', 'Storage', 'Bootstrap and source', 'Backups configuration', 'Roles, services and monitoring']) expect(html).toContain(title)
+    for (const value of ['desired:17', 'running:16', 'status.image', 'spec.instances', 'spec.primaryUpdateMethod', 'disk=ssd', 'max skew 1', '500m', '20Gi', '5Gi', 'analytics', 'appdb', 'owner', 'origin', 's3://bucket', 'volumeSnapshot', '7d', 'archive', 'custom', 'queries', 'secret-queries', 'Declarations', 'Usage → Storage tab', 'Runs and recovery evidence → Backups tab']) expect(html).toContain(value)
+    expect(html).not.toContain('DO-NOT-DISPLAY')
+    for (const path of ['spec.minSyncReplicas', 'spec.maxSyncReplicas', 'spec.postgresql.synchronous.method', 'spec.backup.target', '.isWALArchiver', '.parameters.serverName']) expect(html).toContain(path)
+  })
+  it('links image catalogs and preserves their declared major alongside the resolved image', () => {
+    state.cluster.spec = { imageCatalogRef: { kind: 'ClusterImageCatalog', name: 'catalog', major: 17 } }
+    state.cluster.status.image = 'resolved:17'
+    const html = settings()
+    expect(html).toContain('catalog')
+    expect(html).toContain('major 17')
+    expect(html).toContain('resolved:17')
+    expect(html).toContain('spec.imageCatalogRef')
+  })
+})
+
+it.each(['unsupervised', 'supervised'])('explains %s and anti-affinity while keeping raw fields', (strategy) => {
+  state.cluster.spec = { primaryUpdateStrategy: strategy, primaryUpdateMethod: 'restart', affinity: { podAntiAffinityType: 'preferred' } }
+  const html = renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(html).toContain(strategy === 'unsupervised' ? 'Updates the primary automatically' : 'Waits for a manual switchover')
+  expect(html).toContain(`${strategy} · spec.primaryUpdateStrategy`)
+  expect(html).toContain('Pod anti-affinity')
+  expect(html).toContain('Spreads instances across nodes when possible')
+  expect(html).toContain('preferred · spec.affinity.podAntiAffinityType')
+  expect(html).toContain('Updates the primary in place')
+})
+
+it('does not promise spreading when anti-affinity is disabled and respects its topology', () => {
+  state.cluster.spec = { affinity: { podAntiAffinityType: 'preferred', enablePodAntiAffinity: false } }
+  const render = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(render()).toContain('Not applied: pod anti-affinity is disabled')
+  expect(render()).not.toContain('Spreads instances across')
+  state.cluster.spec.affinity = { podAntiAffinityType: 'preferred', topologyKey: 'topology.kubernetes.io/zone' }
+  expect(render()).toContain('Spreads instances across topology domains when possible')
+  expect(render()).toContain('topology.kubernetes.io/zone')
+})
+
+it('explains required anti-affinity for node and zone topology', () => {
+  state.cluster.spec = { affinity: { podAntiAffinityType: 'required' } }
+  const render = () => renderToStaticMarkup(<CNPGDeclaredSettings cluster={state.cluster} onSelectTab={() => {}} onOpenDeclarations={() => {}} />)
+  expect(render()).toContain('Requires instances on separate nodes')
+  state.cluster.spec.affinity.topologyKey = 'topology.kubernetes.io/zone'
+  expect(render()).toContain('Requires instances on separate topology domains')
+  expect(render()).toContain('required · spec.affinity.podAntiAffinityType')
+})
+
+it('shows one shared denial while retaining every declaration with empty observation cells', () => {
+  const host = document.createElement('div'); host.innerHTML = render()
+  const table = [...host.querySelectorAll('table')].find((t) => t.textContent?.includes('Reported by instance'))!
+  expect(table.querySelectorAll('tbody tr')).toHaveLength(2)
+  for (const r of table.querySelectorAll('tbody tr')) {
+    expect(r.children[2].textContent).toBe('')
+    expect(r.children[3].textContent).toBe('')
+  }
+  expect(host.textContent!.match(/Reading instance values needs/g)).toHaveLength(1)
+})
+it('labels the operator target image without claiming a running image', () => {
+  state.cluster.spec = { imageName: 'declared:17' }; state.cluster.status.image = 'target:17'
+  const html = render()
+  expect(html).toContain('Target image (status.image): target:17')
+  expect(html).not.toContain('Running target:17')
+})