@skyhook-io/radar-app 1.16.3 → 1.17.1

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</)
+})

package/src/components/cnpg/CNPGDeclarations.tsx

@@ -1,31 +1,39 @@
 import { useMemo, type ReactNode } from 'react'
 import { clsx } from 'clsx'
 import { AlertTriangle } from 'lucide-react'
-import { Badge, cnpgGitOpsSource, isApiGroup, toneTextClass, type CNPGFleetRow } from '@skyhook-io/k8s-ui'
-import type { SelectedResource } from '../../types'
 import {
-  CNPGWorkspaceHeader,
-  CoverageNotice,
-  FilterChips,
-  ScreenBody,
-  Segments,
-  Sub,
-  clusterResource,
-  cnpgResource,
-  coverageEmpty,
-  worstCoverage,
-  namespaceChip,
-  type CNPGScreenProps,
-} from './shared'
-import { sameResource } from './routes'
+  Badge,
+  CNPGLogicalPathView,
+  cnpgDatabaseRoleFacts,
+  coverageReadable,
+  cnpgRoleState,
+  cnpgDatabaseRoleMeta,
+  cnpgManagedBy,
+  managedByLabel,
+  type CNPGWorkspaceResponse,
+  cnpgLogicalPaths,
+  cnpgLogicalSlotFact,
+  isApiGroup,
+  refToSelectedResource,
+  relationUnavailable,
+  toneTextClass,
+  type CNPGFleetRow,
+  type CNPGLogicalPath,
+} from '@skyhook-io/k8s-ui'
+import { useCNPGPublisherSlots } from './logicalSlots'
+import type { SelectedResource } from '../../types'
+import { CNPGWorkspaceHeader, CoverageNotice, clusterResource, cnpgResource, coverageEmpty, worstCoverage, type CNPGScreenProps } from './shared'
+import { FilterChips, namespaceChip, RefreshFailedNotice, ScreenBody, Segments, Sub } from '../workspace/layout'
+import { sameSelectedResource } from '../../utils/drawer-trail'
 
 type State = 'applied' | 'failed' | 'pending'
 
-interface DeclItem {
+export interface DeclItem {
   key: string
-  kind: 'Database' | 'Publication' | 'Subscription' | 'Managed role'
+  kind: 'Database' | 'Publication' | 'Subscription' | 'Managed role' | 'DatabaseRole'
   pgName: string
-  indent: boolean
+  /** The PostgreSQL database the item lives in (a Database's own name); unset for roles, which are cluster-wide. */
+  database?: string
   state: State
   meta?: string
   error?: string
@@ -41,17 +49,48 @@ interface DeclGroup {
   items: DeclItem[]
 }
 
-function stateOf(obj: any): State {
-  const applied = obj?.status?.applied
-  if (applied === true) return 'applied'
-  if (applied === false) return 'failed'
-  return 'pending'
+/** A database and the Publications and Subscriptions in it; without `database`, the cluster's roles. */
+export interface DeclBlock {
+  database?: string
+  /** The Database declaration; absent when the database is not declared (the bootstrap database, or one that does not exist). */
+  head?: DeclItem
+  children: DeclItem[]
+}
+
+/**
+ * Groups a cluster's declarations for display: each database with what lives
+ * in it, declared databases first, then roles. A filter keeps a database's
+ * row as context for a matching Publication or Subscription in it.
+ */
+export function cnpgDeclarationBlocks(items: DeclItem[], show: State | null): DeclBlock[] {
+  const match = (i: DeclItem) => !show || i.state === show
+  const byDatabase = new Map<string, DeclBlock>()
+  const roles: DeclItem[] = []
+  for (const i of items) {
+    if (i.database === undefined) {
+      if (match(i)) roles.push(i)
+      continue
+    }
+    let b = byDatabase.get(i.database)
+    if (!b) {
+      b = { database: i.database, children: [] }
+      byDatabase.set(i.database, b)
+    }
+    if (i.kind === 'Database' && !b.head) b.head = i
+    else b.children.push(i)
+  }
+  const out: DeclBlock[] = []
+  const blocks = [...byDatabase.values()].sort((a, b) => (a.head ? 0 : 1) - (b.head ? 0 : 1))
+  for (const b of blocks) {
+    const children = b.children.filter(match)
+    if ((b.head && match(b.head)) || children.length > 0) out.push({ ...b, children })
+  }
+  if (roles.length > 0) out.push({ children: roles })
+  return out
 }
 
-function gitopsSource(obj: any): string | undefined {
-  const src = cnpgGitOpsSource(obj)
-  if (!src) return undefined
-  return `${src.tool === 'argocd' ? 'Argo CD' : 'Flux'} ${src.name}`
+function gitopsSource(managedBy: CNPGWorkspaceResponse['managedBy'], obj: any): string | undefined {
+  return managedByLabel(cnpgManagedBy({ managedBy }, obj))
 }
 
 const STATE_BADGE: Record<State, { severity: 'success' | 'warning' | 'neutral'; text: string }> = {
@@ -73,7 +112,7 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
   const clusterFilter = searchParams.get('cluster')
   const show = (searchParams.get('show') as 'failed' | 'pending' | null) ?? null
 
-  const groups = useMemo<DeclGroup[]>(() => {
+  const scopedGroups = useMemo(() => {
     const byCluster = new Map<string, DeclGroup>()
     const group = (ns: string, cluster: string) => {
       const k = `${ns}/${cluster}`
@@ -93,16 +132,16 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
       const ns = d.metadata?.namespace ?? ''
       const cluster = d.spec?.cluster?.name ?? '(no cluster)'
       const g = group(ns, cluster)
-      const st = stateOf(d)
+      const st = cnpgRoleState(d)
       g.items.push({
         key: `db/${ns}/${d.metadata?.name}`,
         kind: 'Database',
         pgName: d.spec?.name ?? d.metadata?.name,
-        indent: false,
+        database: d.spec?.name ?? d.metadata?.name,
         state: st,
         meta: d.spec?.owner ? `owner ${d.spec.owner}` : undefined,
         error: st === 'failed' ? d.status?.message : undefined,
-        source: gitopsSource(d),
+        source: gitopsSource(data.managedBy, d),
         resource: cnpgResource('databases', ns, d.metadata?.name),
         isField: false,
       })
@@ -110,19 +149,16 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
         for (const p of list) {
           if (p.metadata?.namespace !== ns || p.spec?.cluster?.name !== d.spec?.cluster?.name || p.spec?.dbname !== d.spec?.name) continue
           placed.add(p)
-          const pst = stateOf(p)
+          const pst = cnpgRoleState(p)
           g.items.push({
             key: `${kind}/${ns}/${p.metadata?.name}`,
             kind,
             pgName: p.spec?.name ?? p.metadata?.name,
-            indent: true,
+            database: d.spec?.name ?? d.metadata?.name,
             state: pst,
-            meta:
-              kind === 'Publication'
-                ? p.spec?.target?.allTables ? 'all tables' : 'selected objects'
-                : `from ${p.spec?.publicationName ?? '?'} on ${p.spec?.externalClusterName ?? '?'}`,
+            meta: logicalMeta(kind, p),
             error: pst === 'failed' ? p.status?.message : undefined,
-            source: gitopsSource(p),
+            source: gitopsSource(data.managedBy, p),
             resource: cnpgResource(kind === 'Publication' ? 'publications' : 'subscriptions', ns, p.metadata?.name),
             isField: false,
           })
@@ -134,21 +170,38 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
         if (placed.has(p)) continue
         const ns = p.metadata?.namespace ?? ''
         const g = group(ns, p.spec?.cluster?.name ?? '(no cluster)')
-        const pst = stateOf(p)
+        const pst = cnpgRoleState(p)
         g.items.push({
           key: `${kind}/${ns}/${p.metadata?.name}`,
           kind,
           pgName: p.spec?.name ?? p.metadata?.name,
-          indent: false,
+          database: p.spec?.dbname ?? '(no database named)',
           state: pst,
-          meta: p.spec?.dbname ? `database ${p.spec.dbname}` : undefined,
+          meta: logicalMeta(kind, p),
           error: pst === 'failed' ? p.status?.message : undefined,
-          source: gitopsSource(p),
+          source: gitopsSource(data.managedBy, p),
           resource: cnpgResource(kind === 'Publication' ? 'publications' : 'subscriptions', ns, p.metadata?.name),
           isField: false,
         })
       }
     }
+    for (const r of (data.objects.databaseRoles ?? []).filter(valid)) {
+      const ns = r.metadata?.namespace ?? ''
+      const clusterName = r.spec?.cluster?.name ?? '(no cluster)'
+      const g = group(ns, clusterName)
+      const f = cnpgDatabaseRoleFacts(r, g.row?.cluster ?? null)
+      g.items.push({
+        key: `databaserole/${ns}/${r.metadata?.name}`,
+        kind: 'DatabaseRole',
+        pgName: f.pgName,
+        state: f.state,
+        meta: cnpgDatabaseRoleMeta(f),
+        error: f.state === 'failed' ? f.message : undefined,
+        source: gitopsSource(data.managedBy, r),
+        resource: cnpgResource('databaseroles', ns, r.metadata?.name),
+        isField: false,
+      })
+    }
     for (const row of fleet.rows) {
       const roles: any[] = Array.isArray(row.cluster?.spec?.managed?.roles) ? row.cluster.spec.managed.roles : []
       if (roles.length === 0) continue
@@ -160,7 +213,6 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
           key: `role/${row.namespace}/${row.name}/${r.name}`,
           kind: 'Managed role',
           pgName: r.name,
-          indent: false,
           state: rs.state,
           meta: r.ensure === 'absent' ? 'ensure absent' : 'spec.managed.roles',
           error: rs.error,
@@ -172,25 +224,49 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
     }
     return [...byCluster.values()]
       .filter((g) => !clusterFilter || `${g.namespace}/${g.cluster}` === clusterFilter)
-      .map((g) => ({ ...g, items: show ? g.items.filter((i) => i.state === show) : g.items }))
-      .filter((g) => g.items.length > 0)
+  }, [data.objects.databases, data.objects.publications, data.objects.subscriptions, data.objects.databaseRoles, data.managedBy, fleet.rows, clusterFilter])
+
+  const groups = useMemo(() =>
+    scopedGroups
+      .map((g) => ({ ...g, matched: show ? g.items.filter((i) => i.state === show) : g.items, blocks: cnpgDeclarationBlocks(g.items, show) }))
+      .filter((g) => g.matched.length > 0)
       .sort((a, b) => {
-        const fa = a.items.some((i) => i.state === 'failed') ? 0 : 1
-        const fb = b.items.some((i) => i.state === 'failed') ? 0 : 1
+        const fa = a.matched.some((i) => i.state === 'failed') ? 0 : 1
+        const fb = b.matched.some((i) => i.state === 'failed') ? 0 : 1
         return fa - fb || a.namespace.localeCompare(b.namespace) || a.cluster.localeCompare(b.cluster)
-      })
-  }, [data.objects.databases, data.objects.publications, data.objects.subscriptions, fleet.rows, clusterFilter, show])
+      }),
+    [scopedGroups, show],
+  )
 
   const totals = useMemo(() => {
     let failed = 0
     let pending = 0
-    for (const r of fleet.rows) {
-      failed += r.declarations.failed
-      pending += r.declarations.pending
+    for (const g of scopedGroups) {
+      failed += g.items.filter((i) => i.state === 'failed').length
+      pending += g.items.filter((i) => i.state === 'pending').length
     }
     return { failed, pending }
-  }, [fleet.rows])
-  const declCoverage = worstCoverage(data.coverage.databases, data.coverage.publications, data.coverage.subscriptions)
+  }, [scopedGroups])
+  const logicalPaths = useMemo(() => {
+    const valid = (o: any) => isApiGroup(o?.apiVersion, 'postgresql.cnpg.io')
+    const paths = cnpgLogicalPaths(
+      (data.objects.subscriptions ?? []).filter(valid),
+      data.objects.clusters ?? [],
+      (data.objects.publications ?? []).filter(valid),
+      data.objects.poolers ?? [],
+      (ns) => relationUnavailable(data, 'publications', ns, 'Publications'),
+    )
+    if (!clusterFilter) return paths
+    return paths.filter(
+      (p) =>
+        `${p.subscription.namespace}/${p.subscription.cluster}` === clusterFilter ||
+        (p.publisher.kind === 'cluster' && `${p.publisher.namespace}/${p.publisher.name}` === clusterFilter),
+    )
+  }, [data, clusterFilter])
+
+  const declarationCoverage = [data.coverage.clusters, data.coverage.databases, data.coverage.publications, data.coverage.subscriptions, data.coverage.databaseRoles]
+  const declCoverage = worstCoverage(...declarationCoverage)
+  const countsComplete = declarationCoverage.every((cov) => cov && (cov.state === 'notInstalled' || coverageReadable(cov, clusterFilter?.split('/')[0])))
 
   const chips = [
     ...(clusterFilter ? [{ label: `Cluster: ${clusterFilter}`, onClear: () => onSetParams({ cluster: null }) }] : []),
@@ -201,10 +277,10 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
     <div className="flex min-h-0 flex-1 flex-col">
       <CNPGWorkspaceHeader
         title="Declarations"
-        subtitle="Databases, managed roles, publications and subscriptions, by PostgreSQL cluster. Declared is not the same as reconciled."
+        subtitle="Databases, roles, publications and subscriptions, by PostgreSQL cluster. Declared is not the same as reconciled."
       />
       <ScreenBody>
-        <CoverageNotice fleet={fleet} data={data} />
+        <CoverageNotice fleet={fleet} data={data} kinds={['clusters', 'databases', 'databaseRoles', 'publications', 'subscriptions', 'poolers']} />
         <div className="flex flex-wrap items-center gap-2">
           <Segments
             label="Declarations"
@@ -212,8 +288,8 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
             onChange={(id) => onSetParams({ show: id === 'all' ? null : id })}
             options={[
               { id: 'all', label: 'All declarations' },
-              { id: 'failed', label: 'Not applied', count: totals.failed },
-              { id: 'pending', label: 'Pending', count: totals.pending },
+              { id: 'failed', label: 'Not applied', count: countsComplete ? totals.failed : totals.failed > 0 ? `≥${totals.failed}` : 'Unknown' },
+              { id: 'pending', label: 'Pending', count: countsComplete ? totals.pending : totals.pending > 0 ? `≥${totals.pending}` : 'Unknown' },
             ]}
           />
         </div>
@@ -226,11 +302,13 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
               : show === 'pending'
                 ? 'No declaration in this scope is waiting for the operator.'
                 : coverageEmpty(declCoverage, 'declarations')}
-            {show && declCoverage?.state !== 'full' ? ' Some declarations are not readable with your access.' : ''}
+            {show && !countsComplete ? ' Some declarations are not readable with your access.' : ''}
           </div>
         ) : (
           groups.map((g) => {
-            const failed = g.items.filter((i) => i.state === 'failed').length
+            const failed = g.matched.filter((i) => i.state === 'failed').length
+            const noSources = g.items.every((i) => !i.source)
+            const hasDatabases = g.blocks.some((b) => b.database !== undefined)
             return (
               <section key={`${g.namespace}/${g.cluster}`} className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
                 <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-theme-border px-4 py-2.5">
@@ -245,31 +323,105 @@ export function CNPGDeclarations({ data, fleet, namespaces, searchParams, onSetP
                   )}
                   <span className="text-xs text-theme-text-tertiary">{g.namespace}</span>
                   <span className={clsx('text-xs', failed > 0 ? toneTextClass('degraded') : 'text-theme-text-tertiary')}>
-                    {g.items.length} {g.items.length === 1 ? 'declaration' : 'declarations'}
+                    {g.matched.length} {g.matched.length === 1 ? 'declaration' : 'declarations'}
                     {failed > 0 ? ` · ${failed} not reconciled` : ''}
                     {!g.row ? ' · target cluster not visible' : ''}
                   </span>
+                  {noSources && <span className="text-xs text-theme-text-tertiary">no GitOps source recorded on any of them</span>}
                 </div>
                 <div className="table-divide-subtle">
-                  {g.items.map((i) => (
-                    <DeclarationRow
-                      key={i.key}
-                      item={i}
-                      active={!i.isField && sameResource(inspected, i.resource)}
-                      onInspect={() => onInspect(i.resource)}
-                    />
+                  {g.blocks.map((b) => (
+                    <div key={b.database === undefined ? 'roles' : `db/${b.database}`}>
+                      {b.database === undefined ? (
+                        hasDatabases && <div className="px-4 pb-1 pt-2.5 text-[11px] font-medium uppercase tracking-wide text-theme-text-tertiary">Roles</div>
+                      ) : b.head ? (
+                        <DeclarationRow
+                          item={b.head}
+                          sourceStated={noSources}
+                          active={sameSelectedResource(inspected, b.head.resource)}
+                          onInspect={() => onInspect(b.head!.resource)}
+                        />
+                      ) : (
+                        <div className="flex flex-wrap items-center gap-2 px-4 pb-1 pt-2.5 text-sm">
+                          <span className="text-xs text-theme-text-tertiary">Database</span>
+                          <span className="font-mono text-theme-text-secondary">{b.database}</span>
+                          <span className="text-xs text-theme-text-tertiary">no Database declaration</span>
+                        </div>
+                      )}
+                      {b.children.map((i) => (
+                        <DeclarationRow
+                          key={i.key}
+                          item={i}
+                          nested={b.database !== undefined}
+                          sourceStated={noSources}
+                          active={!i.isField && sameSelectedResource(inspected, i.resource)}
+                          onInspect={() => onInspect(i.resource)}
+                        />
+                      ))}
+                    </div>
                   ))}
                 </div>
               </section>
             )
           })
         )}
+
+        {!show && logicalPaths.length > 0 && (
+          <section className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+            <div className="flex flex-wrap items-baseline gap-x-3 border-b border-theme-border px-4 py-2.5">
+              <span className="text-sm font-semibold text-theme-text-primary">Logical replication</span>
+              <span className="text-xs text-theme-text-tertiary">
+                Each Subscription to its publication and the slot the publisher keeps for it · Subscriptions created in SQL are not listed
+              </span>
+            </div>
+            <div className="table-divide-subtle">
+              {logicalPaths.map((p) => (
+                <LogicalPathRow key={`${p.subscription.namespace}/${p.subscription.name}`} path={p} onInspect={onInspect} />
+              ))}
+            </div>
+          </section>
+        )}
       </ScreenBody>
     </div>
   )
 }
 
-function DeclarationRow({ item, active, onInspect }: { item: DeclItem; active: boolean; onInspect: () => void }) {
+function LogicalPathRow({ path, onInspect }: { path: CNPGLogicalPath; onInspect: CNPGScreenProps['onInspect'] }) {
+  const { observed, query } = useCNPGPublisherSlots(path.publisher)
+  return (
+    <div className="px-4 py-3">
+      <CNPGLogicalPathView
+        path={path}
+        slot={cnpgLogicalSlotFact(path, observed)}
+        notice={<RefreshFailedNotice queries={[query]} />}
+        onNavigate={(ref) => onInspect(refToSelectedResource(ref))}
+        compact
+      />
+    </div>
+  )
+}
+
+function logicalMeta(kind: 'Publication' | 'Subscription', p: { spec?: { target?: { allTables?: boolean }; publicationName?: string; externalClusterName?: string } }): string {
+  if (kind === 'Publication') return p.spec?.target?.allTables ? 'all tables' : 'selected objects'
+  return `from ${p.spec?.publicationName ?? 'an unnamed publication'} on ${p.spec?.externalClusterName ?? 'an unnamed external cluster'}`
+}
+
+// `sourceStated`: the cluster header already says none of its rows records a
+// GitOps source, so the row has no source column. `nested`: it lives in the
+// database above it; a guide line joins it to that row.
+function DeclarationRow({
+  item,
+  active,
+  onInspect,
+  sourceStated,
+  nested,
+}: {
+  item: DeclItem
+  active: boolean
+  onInspect: () => void
+  sourceStated?: boolean
+  nested?: boolean
+}) {
   const badge = STATE_BADGE[item.state]
   let detail: ReactNode = null
   if (item.error) {
@@ -285,27 +437,33 @@ function DeclarationRow({ item, active, onInspect }: { item: DeclItem; active: b
       role="button"
       tabIndex={0}
       onClick={onInspect}
-      onKeyDown={(e) => { if (e.key === 'Enter') onInspect() }}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onInspect() } }}
       className={clsx(
-        'grid cursor-pointer grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,1fr)] gap-x-4 px-4 py-2.5 text-sm transition-colors hover:bg-theme-hover/50',
+        'relative grid cursor-pointer gap-x-4 px-4 py-2.5 text-sm transition-colors hover:bg-theme-hover/50',
+        sourceStated ? 'grid-cols-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,1fr)]',
         active && 'selection',
       )}
     >
-      <div className={clsx('min-w-0', item.indent && 'pl-6')}>
+      {nested && <span aria-hidden className="absolute bottom-0 left-[1.6rem] top-0 w-px bg-theme-border" />}
+      <div className={clsx('min-w-0', nested && 'pl-6')}>
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs text-theme-text-tertiary">{item.kind}</span>
           <span className="font-mono font-medium text-theme-text-primary">{item.pgName}</span>
+          <span className="text-xs text-theme-text-tertiary">· {item.kind}{!item.isField && ` ${item.resource.name}`}</span>
           {item.meta && <span className="text-xs text-theme-text-tertiary">{item.meta}</span>}
         </div>
         {detail}
       </div>
-      <div>
+      <div className={clsx(sourceStated && 'text-right')}>
         <Badge severity={badge.severity} size="sm">{badge.text}</Badge>
+        <div className="mt-1 text-xs text-accent-text">Inspect →</div>
+        {item.state === 'pending' && <Sub>awaiting the operator for the current spec</Sub>}
         {item.isField && <Sub>field of the Cluster</Sub>}
       </div>
-      <div className="min-w-0 text-xs text-theme-text-secondary break-words">
-        {item.source ?? <span className="text-theme-text-tertiary">GitOps source not recorded</span>}
-      </div>
+      {!sourceStated && (
+        <div className="min-w-0 text-xs text-theme-text-secondary break-words">
+          {item.source ?? <span className="text-theme-text-tertiary">GitOps source not recorded</span>}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,62 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { expect, it, vi } from 'vitest'
+import { CNPGDetailPage } from './CNPGDetailPage'
+const state = vi.hoisted(() => ({ extraTabs: undefined as any, support: 'supported' as 'supported' | 'unsupported' | 'unknown', refresh: undefined as undefined | (() => Promise<unknown>), refetch: vi.fn(async () => {}), specTab: undefined as any, renderStatusBadge: undefined as undefined | ((resource: any) => any) }))
+vi.mock('./refresh', () => ({ refetchCNPGDetail: state.refetch }))
+vi.mock('../workload/WorkloadView', () => ({ WorkloadView: ({ onRefresh, specTab, renderStatusBadge, extraTabs }: { onRefresh?: () => Promise<unknown>; extraTabs?: any; specTab?: any; renderStatusBadge?: (resource: any) => any }) => { state.extraTabs = extraTabs; state.refresh = onRefresh; state.specTab = specTab; state.renderStatusBadge = renderStatusBadge; return <div>detail</div> } }))
+vi.mock('../../context/ConnectionContext', () => ({ useConnection: () => ({ connection: { context: 'test' } }) }))
+vi.mock('../../api/client', () => ({ useRadarFeature: () => ({ support: state.support }) }))
+vi.mock('./CNPGOperatorBanner', () => ({ CNPGOperatorBanner: () => null }))
+it('passes the detail target to the awaited CNPG refresh hook', async () => {
+  const client = new QueryClient()
+  const target = { plural: 'clusters' as const, namespace: 'db', name: 'pg', group: 'postgresql.cnpg.io' }
+  renderToStaticMarkup(<QueryClientProvider client={client}><MemoryRouter initialEntries={['/cnpg/clusters/db/pg?ctx=test']}><CNPGDetailPage target={target} namespaces={['db']} onOpenResource={() => {}} /></MemoryRouter></QueryClientProvider>)
+  expect(state.refresh).toBeTypeOf('function')
+  await state.refresh!()
+  expect(state.refetch).toHaveBeenCalledWith(client, target)
+  client.clear()
+})
+it('replaces only the CNPG Cluster Configuration body, retaining the spec tab identity', () => {
+  const client = new QueryClient()
+  for (const target of [
+    { plural: 'clusters' as const, group: 'postgresql.cnpg.io' },
+    { plural: 'backups' as const, group: 'postgresql.cnpg.io' },
+    { plural: 'clusters' as const, group: 'cluster.x-k8s.io' },
+  ]) {
+    renderToStaticMarkup(<QueryClientProvider client={client}><MemoryRouter initialEntries={['/cnpg/clusters/db/pg?ctx=test&tab=spec']}><CNPGDetailPage target={{ ...target, namespace: 'db', name: 'pg' }} namespaces={['db']} onOpenResource={() => {}} /></MemoryRouter></QueryClientProvider>)
+    if (target.plural === 'clusters' && target.group === 'postgresql.cnpg.io') {
+      expect(state.specTab.label).toBe('Configuration')
+      expect(state.renderStatusBadge).toBeTypeOf('function')
+      const badge = state.renderStatusBadge!({ spec: { instances: 2 }, status: { readyInstances: 1, phase: 'Cluster in healthy state' } })
+      const html = renderToStaticMarkup(badge)
+      expect(html).toContain('>Phase</span>Cluster in healthy state')
+      expect(html).not.toContain('Degraded')
+      expect(badge.props.content).toContain('status.phase, reported by CloudNativePG: Cluster in healthy state')
+      const creating = renderToStaticMarkup(state.renderStatusBadge!({ status: { phase: 'Creating a new replica' } }))
+      expect(creating).toContain('Creating a new replica')
+      expect(creating).not.toMatch(/amber|emerald/)
+      expect(renderToStaticMarkup(state.renderStatusBadge!({ status: {} }))).toContain('Not reported')
+      expect(state.specTab.render).toBeTypeOf('function')
+      expect(state.specTab.lead).toBeUndefined()
+    } else { expect(state.specTab).toBeUndefined(); expect(state.renderStatusBadge).toBeUndefined() }
+  }
+  client.clear()
+})
+
+it('keeps the ordinary detail and omits advanced tabs/configuration until advertised', () => {
+  const client = new QueryClient()
+  for (const support of ['unsupported', 'unknown'] as const) {
+    state.support = support
+    const html = renderToStaticMarkup(<QueryClientProvider client={client}><MemoryRouter initialEntries={['/cnpg/clusters/db/pg?ctx=test&tab=activity']}><CNPGDetailPage target={{ plural: 'clusters', group: 'postgresql.cnpg.io', namespace: 'db', name: 'pg' }} namespaces={['db']} onOpenResource={() => {}} /></MemoryRouter></QueryClientProvider>)
+    expect(html).toContain('detail')
+    expect(state.specTab).toBeUndefined()
+    expect(state.renderStatusBadge).toBeUndefined()
+    expect(state.refresh).toBeUndefined()
+    expect(state.extraTabs.map((tab: any) => tab.id)).toEqual(['activity'])
+    expect(state.extraTabs[0].render().props).toMatchObject({ namespace: 'db', name: 'pg' })
+  }
+  state.support = 'supported'
+  client.clear()
+})