@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/cnpg/CNPGConfiguration.tsx

@@ -0,0 +1,190 @@
+import { useCNPGKubectlContext } from './useCNPGKubectlContext'
+import type { ReactNode } from 'react'
+import {
+  CNPG_GROUP, CNPG_BARMAN_OBJECTSTORE_GROUP, CNPGClusterCertificates, CNPGConnectSection,
+  FactGrid, FactRow, FoldSection, KeyValueBadgeList, PaneLoader, RefLink, SectionHeading,
+  cnpgConnectInfo, getCNPGClusterBackupConfig, getCNPGClusterPostgresParams,
+  getCNPGClusterReplicaSource, refToSelectedResource, type NavigateToRef,
+} from '@skyhook-io/k8s-ui'
+import { useResource } from '../../api/client'
+import type { SelectedResource } from '../../types'
+import { buildWorkloadPath } from '../../utils/navigation'
+import { RefreshFailedNotice } from '../workspace/layout'
+import { useCNPGClusterAssessment } from './useCNPGClusterAssessment'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { CNPGParametersInEffect } from './CNPGParametersInEffect'
+import { preflightFacts } from './recovery/restoreModel'
+import { cnpgScreenPath } from './routes'
+import { useConnection } from '../../context/ConnectionContext'
+import { currentPageLabel } from '../../utils/page-links'
+
+const cardClass = 'rounded-xl border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm'
+
+export function CNPGConfiguration({ namespace, name, onNavigate, onSelectTab }: {
+  namespace: string; name: string; onNavigate: (r: SelectedResource) => void; onSelectTab: (tab: string) => void
+}) {
+  const kubeconfigContext = useCNPGKubectlContext()
+  const object = useResource<any>('clusters', namespace, name, CNPG_GROUP)
+  const { query, row, ha } = useCNPGClusterAssessment(namespace, name)
+  const navigate = useCNPGNavigate()
+  const { connection } = useConnection()
+  const go: NavigateToRef = (ref) => onNavigate(refToSelectedResource(ref))
+  const cluster = object.data
+  if (!cluster) return object.isLoading ? <PaneLoader label="Loading Configuration…" className="h-40" /> : (
+    <p className="p-4 text-sm text-theme-text-tertiary">{object.error instanceof Error ? object.error.message : 'The Cluster could not be read.'}</p>
+  )
+  const info = cnpgConnectInfo(cluster, row?.poolerObjects)
+  const services = info.endpoints.filter((e) => e.role !== 'pooler').map((e) => e.name).join(', ')
+  const poolers = row?.poolersKnown ? info.endpoints.filter((e) => e.role === 'pooler').map((e) => e.name).join(', ') || 'none' : 'not read'
+  return (
+    <div className="space-y-4 p-4">
+      <RefreshFailedNotice queries={[object, ha, query]} />
+      <section className={cardClass}>
+        <FoldSection title="Connect" summary={`Services ${services} · poolers ${poolers} · database ${info.database.value ?? 'unknown'}`} attention={false}>
+          <CNPGConnectSection ha={ha.data} haUnavailableReason={ha.isLoading ? 'Reading availability…' : ha.error instanceof Error ? `Availability could not be read: ${ha.error.message}` : undefined} kubeconfigContext={kubeconfigContext?.name} kubeconfigSource={kubeconfigContext?.source} cluster={cluster} poolers={row?.poolerObjects} poolersKnown={row?.poolersKnown ?? false} showHeading={false} onNavigate={go}
+            onOpenReachability={(svc) => navigate(buildWorkloadPath({ kind: 'services', group: '', namespace: svc.namespace, name: svc.name, tab: 'reachability' }))} />
+        </FoldSection>
+      </section>
+      <section className={cardClass}>
+        <CNPGParametersInEffect namespace={namespace} name={name} declared={getCNPGClusterPostgresParams(cluster)} scope={{ declaredInstances: cluster.spec?.instances, expectedInstances: [...new Set<string>([...(cluster.status?.instanceNames ?? []), ...(ha.data?.expectedInstances ?? [])])] }} />
+      </section>
+      <CNPGDeclaredSettings cluster={cluster} onNavigate={go} onSelectTab={onSelectTab} onOpenDeclarations={() => navigate(`${cnpgScreenPath('declarations')}?${new URLSearchParams({ cluster: `${namespace}/${name}` })}`, { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } })} />
+      <section className={cardClass}>
+        {ha.data ? <CNPGClusterCertificates ha={ha.data} onNavigate={go} /> : <>
+          <SectionHeading>Certificates</SectionHeading>
+          <p className="text-sm text-theme-text-tertiary">{ha.isLoading ? 'Reading certificates…' : ha.error instanceof Error ? `Certificates could not be read: ${ha.error.message}` : 'Certificates could not be read.'}</p>
+        </>}
+      </section>
+      <section className={cardClass}>
+        <FoldSection title="Labels and annotations" summary={`${Object.keys(cluster.metadata?.labels ?? {}).length} labels · ${Object.keys(cluster.metadata?.annotations ?? {}).length} annotations`} attention={false}>
+          <SectionHeading>Labels</SectionHeading>
+          {Object.keys(cluster.metadata?.labels ?? {}).length > 0 ? <KeyValueBadgeList items={cluster.metadata.labels} /> : <p className="text-sm text-theme-text-tertiary">No labels</p>}
+          <SectionHeading>Annotations</SectionHeading>
+          <FactGrid>{Object.entries(cluster.metadata?.annotations ?? {}).map(([key, value]) => <FactRow key={key} label={key}><span className="break-all">{String(value)}</span></FactRow>)}</FactGrid>
+          {Object.keys(cluster.metadata?.annotations ?? {}).length === 0 && <p className="text-sm text-theme-text-tertiary">No annotations</p>}
+        </FoldSection>
+      </section>
+    </div>
+  )
+}
+
+type DeclaredFact = { label: string; path: string; value: ReactNode; raw?: string }
+
+export function CNPGDeclaredSettings({ cluster, onNavigate, onSelectTab, onOpenDeclarations }: {
+  cluster: any; onNavigate?: NavigateToRef; onSelectTab: (tab: string) => void; onOpenDeclarations: () => void
+}) {
+  const spec = cluster.spec ?? {}
+  const ns = cluster.metadata?.namespace ?? ''
+  const copied = preflightFacts(cluster).filter((f) => f.copied)
+  const basic: DeclaredFact[] = copied.filter((f) => f.path === 'spec.instances' || (f.label === 'Image' && (spec.imageName || spec.imageCatalogRef)))
+  if (spec.imageCatalogRef) {
+    const ref = spec.imageCatalogRef
+    const fact = basic.find((f) => f.label === 'Image')!
+    fact.value = <><RefLink refTo={{ kind: ref.kind ?? 'ImageCatalog', group: CNPG_GROUP, namespace: ref.kind === 'ClusterImageCatalog' ? '' : ns, name: ref.name }} onNavigate={onNavigate} mono /> · major {ref.major}</>
+  }
+  const add = (facts: DeclaredFact[], label: string, path: string, value: unknown) => {
+    if (value !== undefined && value !== null && value !== '' && !(Array.isArray(value) && value.length === 0)) facts.push({ label, path, value: typeof value === 'boolean' ? (value ? 'Enabled' : 'Disabled') : String(value) })
+  }
+  if (cluster.status?.image && (spec.imageCatalogRef || (spec.imageName && cluster.status.image !== spec.imageName))) {
+    const image = basic.find((f) => f.label === 'Image')
+    if (image) image.value = <>{image.value}<div className="text-xs text-theme-text-secondary">Target image (status.image): {cluster.status.image}</div></>
+  }
+  if (spec.primaryUpdateStrategy) basic.push({ label: 'Primary update strategy', path: 'spec.primaryUpdateStrategy', raw: spec.primaryUpdateStrategy, value: spec.primaryUpdateStrategy === 'unsupervised' ? 'Updates the primary automatically (switchover or restart per update method)' : spec.primaryUpdateStrategy === 'supervised' ? 'Waits for a manual switchover' : spec.primaryUpdateStrategy })
+  if (spec.primaryUpdateMethod) basic.push({ label: 'Primary update method', path: 'spec.primaryUpdateMethod', raw: spec.primaryUpdateMethod, value: spec.primaryUpdateMethod === 'restart' ? 'Updates the primary in place, interrupting its connections' : spec.primaryUpdateMethod === 'switchover' ? 'Promotes an updated standby before updating the old primary' : spec.primaryUpdateMethod })
+  add(basic, 'Superuser access', 'spec.enableSuperuserAccess', spec.enableSuperuserAccess)
+  add(basic, 'Minimum sync replicas', 'spec.minSyncReplicas', spec.minSyncReplicas)
+  add(basic, 'Maximum sync replicas', 'spec.maxSyncReplicas', spec.maxSyncReplicas)
+  if (spec.postgresql?.synchronous) {
+    for (const key of ['method', 'number', 'dataDurability', 'maxStandbyNamesFromCluster']) add(basic, `Synchronous ${key}`, `spec.postgresql.synchronous.${key}`, spec.postgresql.synchronous[key])
+  }
+
+  const placement: DeclaredFact[] = Object.keys(spec.resources?.requests ?? {}).length > 0 || Object.keys(spec.resources?.limits ?? {}).length > 0 ? copied.filter((f) => f.path === 'spec.resources') : []
+  const affinity = spec.affinity
+  if (affinity && Object.keys(affinity).length > 0) {
+    const bits: string[] = []
+    if (affinity.enablePodAntiAffinity !== undefined) bits.push(`pod anti-affinity ${affinity.enablePodAntiAffinity ? 'enabled' : 'disabled'}`)
+    if (affinity.podAntiAffinityType) placement.push({ label: 'Pod anti-affinity', path: 'spec.affinity.podAntiAffinityType', raw: affinity.podAntiAffinityType, value: affinity.enablePodAntiAffinity === false ? `Not applied: pod anti-affinity is disabled` : affinity.podAntiAffinityType === 'preferred' ? `Spreads instances across ${affinity.topologyKey && affinity.topologyKey !== 'kubernetes.io/hostname' ? 'topology domains' : 'nodes'} when possible` : affinity.podAntiAffinityType === 'required' ? `Requires instances on separate ${affinity.topologyKey && affinity.topologyKey !== 'kubernetes.io/hostname' ? 'topology domains' : 'nodes'}` : affinity.podAntiAffinityType })
+    if (affinity.topologyKey) bits.push(`topology ${affinity.topologyKey}`)
+    if (Object.keys(affinity.nodeSelector ?? {}).length > 0) bits.push(`nodes ${Object.entries(affinity.nodeSelector).map(([k, v]) => `${k}=${v}`).join(', ')}`)
+    for (const key of ['nodeAffinity', 'podAffinity', 'podAntiAffinity', 'additionalPodAffinity', 'additionalPodAntiAffinity', 'tolerations']) {
+      if (affinity[key] && Object.keys(affinity[key]).length > 0) bits.push(`${key} declared`)
+    }
+    add(placement, 'Affinity', 'spec.affinity', bits.join(' · '))
+  }
+  add(placement, 'Topology spread', 'spec.topologySpreadConstraints', spec.topologySpreadConstraints?.map((c: any) => `${c.topologyKey} · max skew ${c.maxSkew} · ${c.whenUnsatisfiable}`).join('; '))
+  add(placement, 'Priority class', 'spec.priorityClassName', spec.priorityClassName)
+
+  const storage: DeclaredFact[] = []
+  for (const volume of [
+    { label: 'Data', path: 'spec.storage', config: spec.storage },
+    { label: 'WAL', path: 'spec.walStorage', config: spec.walStorage },
+    ...(spec.tablespaces ?? []).map((t: any) => ({ label: `Tablespace ${t.name}`, path: `spec.tablespaces[name=${t.name}].storage`, config: t.storage })),
+  ]) {
+    if (!volume.config) continue
+    if (volume.config.size !== undefined) add(storage, `${volume.label} size`, `${volume.path}.size`, volume.config.size)
+    else add(storage, `${volume.label} size`, `${volume.path}.pvcTemplate.resources.requests.storage`, volume.config.pvcTemplate?.resources?.requests?.storage)
+    if (volume.config.storageClass !== undefined) add(storage, `${volume.label} storage class`, `${volume.path}.storageClass`, volume.config.storageClass)
+    else add(storage, `${volume.label} storage class`, `${volume.path}.pvcTemplate.storageClassName`, volume.config.pvcTemplate?.storageClassName)
+  }
+  const bootstrap: DeclaredFact[] = []
+  add(bootstrap, 'Application database', 'spec.bootstrap.initdb.database', spec.bootstrap?.initdb?.database)
+  add(bootstrap, 'Owner', 'spec.bootstrap.initdb.owner', spec.bootstrap?.initdb?.owner)
+  if (spec.bootstrap?.initdb && bootstrap.length === 0) add(bootstrap, 'Bootstrap', 'spec.bootstrap.initdb', 'initdb declared')
+  add(bootstrap, 'Recovery source', 'spec.bootstrap.recovery.source', spec.bootstrap?.recovery?.source)
+  if (spec.bootstrap?.recovery?.backup?.name) bootstrap.push({ label: 'Recovery backup', path: 'spec.bootstrap.recovery.backup.name', value: <RefLink refTo={{ kind: 'Backup', group: CNPG_GROUP, namespace: ns, name: spec.bootstrap.recovery.backup.name }} onNavigate={onNavigate} mono /> })
+  if (spec.bootstrap?.recovery && !spec.bootstrap.recovery.source && !spec.bootstrap.recovery.backup?.name) add(bootstrap, 'Bootstrap', 'spec.bootstrap.recovery', 'recovery declared')
+  add(bootstrap, 'Base backup source', 'spec.bootstrap.pg_basebackup.source', spec.bootstrap?.pg_basebackup?.source)
+  if (spec.replica) {
+    if (spec.replica.source || spec.replica.primary) add(bootstrap, 'Replica source', `spec.replica.${spec.replica.source ? 'source' : 'primary'}`, getCNPGClusterReplicaSource(cluster))
+    add(bootstrap, 'Replica enabled', 'spec.replica.enabled', spec.replica.enabled)
+  }
+  add(bootstrap, 'External clusters', 'spec.externalClusters', spec.externalClusters?.map((c: any) => c.name).join(', '))
+
+  const backups: DeclaredFact[] = []
+  const backup = getCNPGClusterBackupConfig(cluster)
+  if (spec.backup?.barmanObjectStore) {
+    add(backups, 'Method', 'spec.backup.barmanObjectStore', 'barmanObjectStore')
+    add(backups, 'Destination', 'spec.backup.barmanObjectStore.destinationPath', backup.destinationPath)
+  }
+  if (backup.plugin) {
+    add(backups, 'Method', 'spec.plugins', `plugin ${backup.plugin.name}`)
+    const pluginPath = `spec.plugins[name=${backup.plugin.name}]`
+    const declaredPlugin = spec.plugins.find((p: any) => p.name === backup.plugin!.name)
+    add(backups, 'WAL archiver', `${pluginPath}.isWALArchiver`, declaredPlugin.isWALArchiver)
+    add(backups, 'Archive server', `${pluginPath}.parameters.serverName`, declaredPlugin.parameters?.serverName)
+    if (backup.plugin.barmanObjectName) backups.push({ label: 'Destination', path: `spec.plugins[name=${backup.plugin.name}].parameters.barmanObjectName`, value: <RefLink refTo={{ kind: 'ObjectStore', group: CNPG_BARMAN_OBJECTSTORE_GROUP, namespace: ns, name: backup.plugin.barmanObjectName }} onNavigate={onNavigate} mono /> })
+  }
+  if (spec.backup?.volumeSnapshot) {
+    add(backups, 'Method', 'spec.backup.volumeSnapshot', 'volumeSnapshot')
+    add(backups, 'Snapshot class', 'spec.backup.volumeSnapshot.className', spec.backup.volumeSnapshot.className)
+    add(backups, 'WAL snapshot class', 'spec.backup.volumeSnapshot.walClassName', spec.backup.volumeSnapshot.walClassName)
+    add(backups, 'Snapshot ownership', 'spec.backup.volumeSnapshot.snapshotOwnerReference', spec.backup.volumeSnapshot.snapshotOwnerReference)
+  }
+  add(backups, 'Retention', 'spec.backup.retentionPolicy', backup.retentionPolicy)
+  add(backups, 'Backup target', 'spec.backup.target', spec.backup?.target)
+
+  const other: DeclaredFact[] = []
+  if (spec.managed?.roles?.length > 0) other.push({ label: 'Managed roles', path: 'spec.managed.roles', value: <>{spec.managed.roles.length} · <button type="button" onClick={onOpenDeclarations} className="text-xs text-accent-text hover:underline">Declarations →</button></> })
+  add(other, 'Additional services', 'spec.managed.services.additional', spec.managed?.services?.additional?.map((s: any) => s.serviceTemplate?.metadata?.name).join(', '))
+  add(other, 'Disabled services', 'spec.managed.services.disabledDefaultServices', spec.managed?.services?.disabledDefaultServices?.join(', '))
+  add(other, 'PodMonitor', 'spec.monitoring.enablePodMonitor', spec.monitoring?.enablePodMonitor)
+  for (const [field, kind] of [['customQueriesConfigMap', 'ConfigMap'], ['customQueriesSecret', 'Secret']] as const) {
+    if (spec.monitoring?.[field]?.length > 0) other.push({ label: `Query ${kind}s`, path: `spec.monitoring.${field}`, value: <div className="flex flex-wrap gap-x-3">{spec.monitoring[field].map((ref: { name: string; key: string }) => <span key={`${ref.name}/${ref.key}`}><RefLink refTo={{ kind, group: '', namespace: ns, name: ref.name }} onNavigate={onNavigate} mono /> · key {ref.key}</span>)}</div> })
+  }
+  add(other, 'Plugins', 'spec.plugins', spec.plugins?.map((p: any) => `${p.name}${p.enabled === false ? ' (disabled)' : ''}`).join(', '))
+
+  return <>{[
+    { title: 'Instances and image', facts: basic },
+    { title: 'Placement and resources', facts: placement },
+    { title: 'Storage', facts: storage, link: 'Usage → Storage tab', tab: 'storage' },
+    { title: 'Bootstrap and source', facts: bootstrap },
+    { title: 'Backups configuration', facts: backups, link: 'Runs and recovery evidence → Backups tab', tab: 'backups' },
+    { title: 'Roles, services and monitoring', facts: other },
+  ].filter((c) => c.facts.length > 0).map((c) => <section key={c.title} className={cardClass}>
+    <SectionHeading>{c.title}</SectionHeading>
+    <FactGrid>{c.facts.map((f) => <FactRow key={`${f.label}/${f.path}`} label={f.label}>
+      {f.value}<div className="mt-0.5 text-[11px] text-theme-text-tertiary">{f.raw ? `${f.raw} · ${f.path}` : f.path}</div>
+    </FactRow>)}</FactGrid>
+    {c.tab && <button type="button" onClick={() => onSelectTab(c.tab!)} className="mt-2 text-xs text-accent-text hover:underline">{c.link}</button>}
+  </section>)}</>
+}

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

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import yaml from 'yaml'
+import { CNPGCreateClusterDialog } from './CNPGCreateClusterDialog'
+
+const state = vi.hoisted(() => ({ context: 'kind-demo', namespaces: { data: [{ name: 'db' }, { name: 'prod' }], isError: false }, editor: {} as any }))
+vi.mock('../../api/client', () => ({ useNamespaces: () => state.namespaces, useResources: () => ({ data: [] }) }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: state.context } }) }))
+vi.mock('../shared/CreateResourceDialog', () => ({ CreateResourceDialog: (props: any) => { state.editor = props; return <pre>{props.initialYaml}</pre> } }))
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: ReturnType<typeof createRoot>, host: HTMLDivElement
+const button = (text: string) => [...document.querySelectorAll('button')].find((item) => item.textContent?.trim() === text)!
+const change = (id: string, value: string) => act(() => {
+  const input = document.querySelector<HTMLInputElement>(`#cnpg-create-${id}`)!
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+})
+const fillTarget = () => { change('name', 'orders-db'); change('size', '20Gi') }
+
+
+beforeEach(() => {
+  state.context = 'kind-demo'
+  state.editor = {}
+  state.namespaces = { data: [{ name: 'db' }, { name: 'prod' }], isError: false }
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+it('projects YAML fields back into setup and preserves advanced edits when resizing the target', async () => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  const doc = yaml.parseDocument(state.editor.initialYaml)
+  doc.setIn(['metadata', 'name'], 'custom-name')
+  doc.setIn(['spec', 'resources'], { requests: { memory: '1Gi' } })
+  act(() => state.editor.onBack(`${doc.toString()}\n# keep memory request\n`))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-name')!.value).toBe('custom-name')
+  change('size', '40Gi')
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml)).toMatchObject({ metadata: { name: 'custom-name' }, spec: { storage: { size: '40Gi' }, resources: { requests: { memory: '1Gi' } } } })
+  expect(state.editor.initialYaml).toContain('keep memory request')
+})
+
+it('preserves unsupported drafts until replacement is explicitly chosen', async () => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  act(() => state.editor.onBack(''))
+  act(() => button('Continue editing current YAML').click())
+  expect(state.editor.initialYaml).toBe('')
+  const incomplete = 'apiVersion: postgresql.cnpg.io/v1\nkind: Cluster\nmetadata:\n  name: orders-db\n  namespace: db\nspec: {}\n'
+  act(() => state.editor.onBack(incomplete))
+  expect(button('Review manifest').disabled).toBe(true)
+  act(() => button('Continue editing current YAML').click())
+  expect(state.editor.initialYaml).toBe(incomplete)
+  act(() => state.editor.onBack('kind: Secret\n'))
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(document.body.textContent).toContain('Replace the current manifest?')
+  act(() => button('Replace manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).kind).toBe('Cluster')
+})
+afterEach(() => { act(() => root.unmount()); host.remove() })
+
+it.each([{ namespaces: [] }, { namespaces: ['db', 'prod'] }])('requires a target namespace for scope $namespaces', async ({ namespaces }) => {
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={namespaces} onClose={vi.fn()} onCreated={vi.fn()} />))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-namespace')!.value).toBe('')
+  expect(button('Review manifest').disabled).toBe(true)
+})
+
+it('seeds the selected namespace and opens strict create for the exact CNPG identity', async () => {
+  const onCreated = vi.fn()
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={['prod']} onClose={vi.fn()} onCreated={onCreated} />))
+  expect(document.querySelector<HTMLInputElement>('#cnpg-create-namespace')!.value).toBe('prod')
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml)).toMatchObject({ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', metadata: { namespace: 'prod' } })
+  expect(state.editor.initialMode).toBe('create')
+  expect(state.editor.lockMode).toBe(true)
+  state.editor.onCreated({ apiVersion: 'cluster.x-k8s.io/v1beta1', kind: 'Cluster', namespace: 'prod', name: 'capi' })
+  expect(onCreated).not.toHaveBeenCalled()
+  state.editor.onCreated({ apiVersion: 'postgresql.cnpg.io/v1', kind: 'Cluster', namespace: 'prod', name: 'pg' })
+  expect(onCreated).toHaveBeenCalledWith({ kind: 'clusters', group: 'postgresql.cnpg.io', namespace: 'prod', name: 'pg' })
+})
+
+it('allows an explicit namespace when suggestions are unavailable', async () => {
+  state.namespaces = { data: [], isError: true }
+  await act(async () => root.render(<CNPGCreateClusterDialog namespaces={[]} onClose={vi.fn()} onCreated={vi.fn()} />))
+  expect(document.body.textContent).toContain('Namespace suggestions could not be read')
+  act(() => {
+    const input = document.querySelector('#cnpg-create-namespace')!
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(input, 'restricted')
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  fillTarget()
+  act(() => button('Review manifest').click())
+  expect(yaml.parse(state.editor.initialYaml).metadata.namespace).toBe('restricted')
+})
+
+it('does not carry a prepared manifest into a different context', async () => {
+  const render = () => root.render(<CNPGCreateClusterDialog namespaces={['db']} onClose={vi.fn()} onCreated={vi.fn()} />)
+  await act(async () => render())
+  fillTarget()
+  act(() => button('Review manifest').click())
+  state.context = 'kind-other'
+  await act(async () => render())
+  expect(host.querySelector('pre')).toBeNull()
+  expect(document.body.textContent).toContain('The Kubernetes context changed')
+  expect(button('Review manifest').disabled).toBe(true)
+})

package/src/components/cnpg/CNPGCreateClusterDialog.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import yaml from 'yaml'
+import { ActionConfirmDialog, ConfirmDialog, isApiGroup } from '@skyhook-io/k8s-ui'
+import { useNamespaces, useResources } from '../../api/client'
+import { useConnection } from '../../context/ConnectionContext'
+import type { SelectedResource } from '../../types'
+import { getSkeletonYaml } from '../../utils/skeleton-yaml'
+import { CreateResourceDialog } from '../shared/CreateResourceDialog'
+import { CNPGTargetFields } from './creation/CNPGTargetFields'
+import { cnpgTargetDraft, cnpgTargetFromManifest, cnpgTargetIssue, updateCNPGTargetYaml, withCNPGTarget, type CNPGTarget } from './creation/targetModel'
+import { clusterResource } from './shared'
+
+export function CNPGCreateClusterDialog({ namespaces, onClose, onCreated }: {
+  namespaces: string[]
+  onClose: () => void
+  onCreated: (resource: SelectedResource) => void
+}) {
+  const { connection } = useConnection()
+  const [context] = useState(connection.context)
+  const [base] = useState(() => yaml.parse(getSkeletonYaml('Cluster', 'postgresql.cnpg.io')))
+  const [target, setTarget] = useState<CNPGTarget>(() => ({ ...cnpgTargetFromManifest(base), name: '', namespace: namespaces.length === 1 ? namespaces[0] : '', size: '' }))
+  const [manifest, setManifest] = useState<string | null>(null)
+  const [editing, setEditing] = useState(false)
+  const [replace, setReplace] = useState(false)
+  const availableNamespaces = useNamespaces()
+  const storageClasses = useResources<any>('storageclasses', undefined, 'storage.k8s.io')
+  const contextChanged = context !== connection.context
+  const generated = () => yaml.stringify(withCNPGTarget(base, target))
+
+  if (contextChanged) return <ActionConfirmDialog open onClose={onClose} onConfirm={() => {}} title="Create Cluster" subject={{ kind: 'Cluster', namespace: target.namespace, name: target.name || 'new cluster' }} context={context || undefined} effect="The Kubernetes context changed." confirmLabel="Review manifest" disabledReason="Close this dialog and start again in the current context." />
+  if (replace) return <ConfirmDialog open onClose={() => setReplace(false)} onConfirm={() => { setManifest(generated()); setReplace(false); setEditing(true) }} variant="warning" showWarning={false} title="Replace the current manifest?" message="This YAML cannot be represented by the Cluster setup. Rebuilding uses your setup choices and discards the current YAML." confirmLabel="Replace manifest" cancelLabel="Keep editing setup" />
+  if (editing && manifest !== null) return <CreateResourceDialog
+    open
+    onClose={onClose}
+    onBack={(draft) => {
+      setManifest(draft)
+      const parsed = cnpgTargetDraft(draft)
+      if (parsed) setTarget(cnpgTargetFromManifest(parsed))
+      setEditing(false)
+    }}
+    backLabel="Back to cluster setup"
+    initialYaml={manifest}
+    initialMode="create"
+    lockMode
+    title="Create Cluster"
+    onCreated={(created) => {
+      if (created.kind === 'Cluster' && isApiGroup(created.apiVersion, 'postgresql.cnpg.io')) onCreated(clusterResource(created.namespace, created.name))
+    }}
+  />
+
+  return <ActionConfirmDialog
+    open
+    onClose={onClose}
+    onConfirm={() => {
+      if (manifest !== null) {
+        const updated = updateCNPGTargetYaml(manifest, target)
+        if (updated === null) { setReplace(true); return }
+        setManifest(updated)
+      } else setManifest(generated())
+      setEditing(true)
+    }}
+    title="Create Cluster"
+    subject={{ kind: 'Cluster', namespace: target.namespace.trim(), name: target.name.trim() || 'new cluster' }}
+    context={context || undefined}
+    effect="Create a PostgreSQL Cluster with the placement and resources below, then review the exact manifest."
+    confirmLabel="Review manifest"
+    incompleteReason={cnpgTargetIssue(target)}
+    notes={['An existing Cluster will not be updated. This does not change the namespace filter.', 'The new Cluster starts without backups or WAL archiving. Its Backups tab guides the next step.']}
+  >
+    {manifest !== null && <div className="mb-4 space-y-2 text-sm text-theme-text-secondary">{!cnpgTargetDraft(manifest) && <p>The current YAML cannot be represented by these fields. Rebuilding from setup requires confirmation.</p>}<button type="button" className="btn-secondary px-3 py-1.5 text-xs" onClick={() => setEditing(true)}>Continue editing current YAML</button></div>}
+    <CNPGTargetFields value={target} onChange={setTarget} idPrefix="cnpg-create" namespaces={availableNamespaces.data?.map((item) => item.name)} storageClasses={storageClasses.data?.map((item) => item.metadata.name)} defaultClassDisabled={manifest !== null && cnpgTargetDraft(manifest)?.spec.storage?.pvcTemplate?.storageClassName === ''} />
+    {(availableNamespaces.isError || storageClasses.isError) && <p className="mt-3 text-xs text-theme-text-tertiary">{availableNamespaces.isError && 'Namespace suggestions could not be read. '}{storageClasses.isError && 'Storage class suggestions could not be read. '}You can enter names directly; access and configuration are checked at manifest review.</p>}
+  </ActionConfirmDialog>
+}

package/src/components/cnpg/CNPGDeclarations.test.ts

@@ -0,0 +1,107 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { createElement } from 'react'
+import { buildCNPGFleet, CNPG_WORKSPACE_KEYS, type CNPGWorkspaceResponse } from '@skyhook-io/k8s-ui'
+import { describe, expect, it, vi } from 'vitest'
+import { CNPGDeclarations, cnpgDeclarationBlocks, type DeclItem } from './CNPGDeclarations'
+
+const item = (kind: DeclItem['kind'], pgName: string, database: string | undefined, state: DeclItem['state'] = 'applied'): DeclItem => ({
+  key: `${kind}/${pgName}`,
+  kind,
+  pgName,
+  database,
+  state,
+  resource: { kind, namespace: 'pg', name: pgName } as DeclItem['resource'],
+  isField: false,
+})
+
+const items = [
+  item('Database', 'demo_app', 'demo_app'),
+  item('Publication', 'demo_app_pub', 'demo_app'),
+  item('Subscription', 'demo_app_sub', 'demo_app', 'failed'),
+  item('Database', 'demo_reporting', 'demo_reporting'),
+  item('Publication', 'missing_pub', 'no_such_database', 'failed'),
+  item('DatabaseRole', 'reader', undefined),
+]
+
+describe('cnpgDeclarationBlocks', () => {
+  it('nests what lives in each database under it, undeclared databases after the declared ones, roles last', () => {
+    const blocks = cnpgDeclarationBlocks(items, null)
+    expect(blocks.map((b) => [b.database, b.head?.pgName, b.children.map((c) => c.pgName)])).toEqual([
+      ['demo_app', 'demo_app', ['demo_app_pub', 'demo_app_sub']],
+      ['demo_reporting', 'demo_reporting', []],
+      ['no_such_database', undefined, ['missing_pub']],
+      [undefined, undefined, ['reader']],
+    ])
+  })
+
+  it('keeps a database as context for a matching item in it, and drops what does not match', () => {
+    const blocks = cnpgDeclarationBlocks(items, 'failed')
+    expect(blocks.map((b) => [b.database, b.head?.pgName, b.children.map((c) => c.pgName)])).toEqual([
+      ['demo_app', 'demo_app', ['demo_app_sub']],
+      ['no_such_database', undefined, ['missing_pub']],
+    ])
+  })
+})
+
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+
+const G = 'postgresql.cnpg.io/v1'
+const declaration = (cluster: string, name: string, applied?: boolean, stale = false) => ({ apiVersion: G, kind: 'Database', metadata: { name, namespace: 'pg', generation: 2 }, spec: { name, cluster: { name: cluster } }, status: { applied, observedGeneration: stale ? 1 : 2 } })
+
+function renderDeclarations(query: string, pgName?: string, partial: false | 'pg' | 'other' = false) {
+  const data: CNPGWorkspaceResponse = {
+    installed: true, context: 'test', namespaces: null,
+    coverage: Object.fromEntries(CNPG_WORKSPACE_KEYS.map((k) => [k, { state: 'full' }])),
+    objects: {
+      clusters: ['a', 'b'].map((name) => ({ apiVersion: G, kind: 'Cluster', metadata: { name, namespace: 'pg' }, spec: {} })),
+      databases: [declaration('a', 'failed-a', false), declaration('a', 'stale-a', true, true), declaration('b', 'failed-b1', false), declaration('b', 'failed-b2', false), declaration('b', 'pending-b')],
+    }, issues: [], audit: [], backupsOmitted: 0,
+  }
+  if (partial) data.coverage.publications = { state: 'partial', allowedNamespaces: [partial] }
+  if (pgName) data.objects.databases![0].spec.name = pgName
+  return renderToStaticMarkup(createElement(CNPGDeclarations, {
+    data, fleet: buildCNPGFleet(data), namespaces: [], searchParams: new URLSearchParams(query), onSetParams: () => {}, onInspect: () => {}, inspected: null, onClearNamespaces: () => {},
+  }))
+}
+
+it('counts the selected cluster’s actual items before applying the state filter', () => {
+  const html = renderDeclarations('cluster=pg/a&show=failed')
+  expect(html).toMatch(/Not applied[^<]*<[^>]*>1</)
+  expect(html).toMatch(/Pending[^<]*<[^>]*>1</)
+  expect(html).toContain('failed-a')
+  expect(html).not.toContain('failed-b1')
+  expect(html).not.toContain('stale-a')
+})
+
+it('shows stale success as pending in the declaration list', () => {
+  const html = renderDeclarations('cluster=pg/a&show=pending')
+  expect(html).toContain('stale-a')
+  expect(html).toContain('awaiting the operator for the current spec')
+  expect(html).not.toContain('failed-a')
+})
+
+it('offers inspection with the Kubernetes object identity beside the database name', () => {
+  const html = renderDeclarations('cluster=pg/a', 'appdb')
+  expect(html).toContain('appdb')
+  expect(html).toContain('Inspect →')
+  expect(html).toContain('Database failed-a')
+  expect(html).toContain('role="button"')
+  expect(html).toContain('tabindex="0"')
+})
+
+it('qualifies declaration filter counts over partial coverage including zero matches', () => {
+  expect(renderDeclarations('cluster=pg/a', undefined, 'other')).toMatch(/Not applied[^<]*<[^>]*>≥1</)
+  expect(renderDeclarations('cluster=pg/a', undefined, 'other')).toMatch(/Pending[^<]*<[^>]*>≥1</)
+  const empty = renderDeclarations('cluster=pg/missing', undefined, 'other')
+  expect(empty).toMatch(/Not applied[^<]*<[^>]*>Unknown</)
+  expect(empty).toMatch(/Pending[^<]*<[^>]*>Unknown</)
+  expect(renderDeclarations('cluster=pg/missing')).toMatch(/Not applied[^<]*<[^>]*>0</)
+})
+
+it('keeps filtered counts exact in a fully read namespace even when another namespace is unread', () => {
+  const html = renderDeclarations('cluster=pg/a', undefined, 'pg')
+  expect(html).toMatch(/Not applied[^<]*<[^>]*>1</)
+  expect(html).toMatch(/Pending[^<]*<[^>]*>1</)
+  expect(renderDeclarations('cluster=pg/missing', undefined, 'pg')).toMatch(/Not applied[^<]*<[^>]*>0</)
+  expect(renderDeclarations('', undefined, 'pg')).toMatch(/Not applied[^<]*<[^>]*>≥3</)
+})