@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGConnectSection.tsx

@@ -0,0 +1,178 @@
+import type { CNPGClusterHA } from './ha'
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+import { CNPG_GROUP } from '../resources/resource-utils-cnpg'
+import { CNPG_DEFAULT_PORT, cnpgEndpointAvailability, cnpgConnectionURI, cnpgConnectInfo, cnpgPsqlCommand, cnpgPortForwardCommand, type CNPGConnectEndpoint } from './connect'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { FactGrid, FactRow } from '../facts'
+import { SectionHeading } from '../ui/FoldSection'
+import { copyText } from '../../utils/clipboard'
+
+function CopyButton({ text, label }: { text: string; label: string }) {
+  const [copied, setCopied] = useState(false)
+  const copy = () => {
+    void copyText(text).then((ok) => {
+      if (!ok) return
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+  return (
+    <Tooltip content={copied ? 'Copied' : `Copy ${label}`} position="top">
+      <button
+        type="button"
+        onClick={copy}
+        aria-label={`Copy ${label}`}
+        className="rounded p-1 text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary"
+      >
+        {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+      </button>
+    </Tooltip>
+  )
+}
+
+function Snippet({ text, label }: { text: string; label: string }) {
+  return (
+    <div className="flex items-center gap-1 rounded-md bg-theme-elevated px-2 py-1">
+      <code className="min-w-0 flex-1 break-all font-mono text-xs text-theme-text-primary">{text}</code>
+      <CopyButton text={text} label={label} />
+    </div>
+  )
+}
+
+const ROLE_LABEL: Record<CNPGConnectEndpoint['role'], string> = {
+  rw: 'Read-write',
+  ro: 'Read-only',
+  r: 'Any instance',
+  pooler: 'Pooler',
+  additional: 'Additional',
+}
+
+/**
+ * How applications reach the cluster: Services, application database and
+ * owner, and the credentials Secret by name. Never reads the Secret.
+ */
+
+/**
+ * Selects the Connect heading inside one summary. A data attribute, not an
+ * id: a drawer summary can sit over a page summary of the same kind, so a host
+ * scrolls to it within its own summary's element.
+ */
+export function CNPGConnectSection({
+  cluster,
+  poolers,
+  poolersKnown,
+  onNavigate,
+  onOpenReachability,
+  showHeading = true,
+  kubeconfigContext,
+  kubeconfigSource,
+  ha,
+  haUnavailableReason,
+}: {
+  cluster: any
+  kubeconfigContext?: string
+  kubeconfigSource?: string
+  ha?: CNPGClusterHA
+  haUnavailableReason?: string
+  poolers?: any[]
+  /** False when Poolers could not be listed, so a Pooler may exist that is not shown. */
+  poolersKnown?: boolean
+  onNavigate?: NavigateToRef
+  /** Opens a host's Service on its Reachability tab; the link shows only when given. */
+  onOpenReachability?: (service: { namespace: string; name: string }) => void
+  /** False where the host already titles it (e.g. the Connect dialog). */
+  showHeading?: boolean
+}) {
+  const info = cnpgConnectInfo(cluster, poolers)
+  const ns: string = cluster?.metadata?.namespace ?? ''
+  const primary = info.endpoints[0]
+  const local = { ...primary, host: '127.0.0.1', port: CNPG_DEFAULT_PORT }
+  return (
+    <>
+      {showHeading && <SectionHeading hint="addresses from the Cluster spec · availability from HA evidence · hosts resolve inside Kubernetes">Connect</SectionHeading>}
+      <FactGrid>
+        <FactRow label="Services">
+          <ul className="grid grid-cols-[5rem_minmax(0,1fr)_auto] items-baseline gap-x-2 gap-y-2">
+            {info.endpoints.map((ep) => {
+              const availability = cnpgEndpointAvailability(ep, ha, haUnavailableReason)
+              return (
+              <li key={`${ep.role}/${ep.name}`} className="contents">
+                <span className="w-20 shrink-0 text-xs text-theme-text-tertiary">{ROLE_LABEL[ep.role]}</span>
+                <div className="min-w-0 text-xs [overflow-wrap:anywhere]">
+                  <RefLink refTo={{ kind: ep.role === 'pooler' ? 'Pooler' : 'Service', group: ep.role === 'pooler' ? CNPG_GROUP : '', namespace: ns, name: ep.name }} onNavigate={onNavigate} mono>
+                    {`${ep.host}:${ep.port}`}
+                  </RefLink>
+                  <div className="mt-0.5 text-xs text-theme-text-secondary">{ep.selects}</div>
+                  <div className="text-xs text-theme-text-secondary">{availability.text}{availability.source ? ` · ${availability.source}` : ''}</div>
+                  {ep.portFromTemplate && <div className="text-xs text-theme-text-tertiary">port from serviceTemplate</div>}
+                </div>
+                {onOpenReachability ? (
+                  <Tooltip
+                    content="Radar's check of this Service's path: endpoints, ready Pods and the NetworkPolicy rules in the way. It does not log in to PostgreSQL."
+                    position="top"
+                  >
+                    <button type="button" onClick={() => onOpenReachability({ namespace: ns, name: ep.name })} className="text-xs text-accent-text hover:underline">
+                      Reachability →
+                    </button>
+                  </Tooltip>
+                ) : <span />}
+              </li>
+              )
+            })}
+          </ul>
+          {info.disabled.length > 0 && (
+            <div className="mt-1 text-[11.5px] text-theme-text-tertiary">
+              Disabled in spec.managed.services: {info.disabled.map((t) => `${cluster?.metadata?.name}-${t}`).join(', ')}
+            </div>
+          )}
+          {poolersKnown === false && <div className="mt-1 text-[11.5px] text-theme-text-tertiary">No access to Poolers: one may also front this cluster.</div>}
+          {info.replicaCluster && (
+            <div className="mt-1 text-[11.5px] text-theme-text-tertiary">A replica cluster: every Service reaches instances that only replay until it is promoted.</div>
+          )}
+        </FactRow>
+        <FactRow label="Database">
+          {info.database.value ? <span className="font-mono text-xs">{info.database.value}</span> : <span className="text-theme-text-tertiary">Unknown</span>}
+          <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{info.database.source}</div>
+        </FactRow>
+        <FactRow label="Owner">
+          {info.owner.value ? <span className="font-mono text-xs">{info.owner.value}</span> : <span className="text-theme-text-tertiary">Unknown</span>}
+          <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{info.owner.source}</div>
+        </FactRow>
+        <FactRow label="Credentials">
+          <span className="text-xs">
+            <RefLink refTo={{ kind: 'Secret', group: '', namespace: ns, name: info.secret.name }} onNavigate={onNavigate} mono>
+              {info.secret.name}
+            </RefLink>
+          </span>
+          <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">
+            {info.secret.source} · Radar does not read it; the password is its <span className="font-mono">password</span> key
+          </div>
+        </FactRow>
+        {info.database.value && (
+          <FactRow label="Inside Kubernetes">
+            <div className="space-y-1">
+              <Snippet text={cnpgConnectionURI(primary, info)} label="connection string" />
+              <Snippet text={cnpgPsqlCommand(primary, info)} label="psql command" />
+            </div>
+            <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">
+              Via <span className="font-mono">{primary.name}</span>. Replace <span className="font-mono">{'<password>'}</span>; psql prompts for it.
+            </div>
+          </FactRow>
+        )}
+        {info.database.value && (
+          <FactRow label="From this computer">
+            <div className="space-y-1">
+              <Snippet text={cnpgPortForwardCommand(primary, ns, CNPG_DEFAULT_PORT, kubeconfigContext)} label="port-forward command" />
+              <div className="text-xs text-theme-text-tertiary">{kubeconfigContext ? `Context as named in your kubeconfig${kubeconfigSource ? ` (${kubeconfigSource})` : ''}; kubectl must read the same kubeconfig file.` : 'uses your current kubectl context'}</div>
+              <Snippet text={cnpgConnectionURI(local, info)} label="local connection string" />
+              <Snippet text={cnpgPsqlCommand(local, info)} label="local psql command" />
+            </div>
+            <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">Keep port-forward running, then connect in another terminal. Local port 5432 must be free. Replace {'<password>'}; psql prompts for it.</div>
+          </FactRow>
+        )}
+      </FactGrid>
+    </>
+  )
+}

package/src/components/cnpg/CNPGDeclarativeSummary.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react'
 import { getCNPGDeclarativeMessage, getCNPGReclaimPolicy } from '../resources/resource-utils-cnpg'
-import type { CNPGWorkspaceResponse } from './workspace'
-import { FactGrid, FactRow, FactValue, RefLink, SummaryHeading, toneTextClass, type CNPGNavigate } from './primitives'
-import { ClusterLink, NotReported, ObjectProblems, SummaryShell } from './CNPGSharedSummary'
+import { cnpgManagedBy, type CNPGWorkspaceResponse } from './workspace'
+import { type Fact } from '../facts'
+import { cnpgLogicalPaths, type CNPGLogicalPath } from './logicalReplication'
+import { CNPGLogicalPathView } from './CNPGLogicalPath'
+import { cnpgDatabaseRoleFacts } from './databaseRole'
+import { ClusterLink, NotReported, Note, ObjectProblems, SummaryShell } from './CNPGSharedSummary'
 import {
   appliedFact,
   clustersIn,
   databaseForDeclaration,
-  gitopsSourceOf,
   missingManagedRole,
   observedGenerationFact,
   refOf,
@@ -16,11 +18,15 @@ import {
   targetCluster,
   workspaceList,
 } from './relations'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { toneTextClass } from '../ui/status-tone'
+import { FactGrid, FactRow, FactValue, ManagedByText, managedByLabel } from '../facts'
+import { SectionHeading } from '../ui/FoldSection'
 
 interface SummaryProps {
   resource: any
   workspace: CNPGWorkspaceResponse | null
-  onNavigate?: CNPGNavigate
+  onNavigate?: NavigateToRef
 }
 
 function ReclaimRow({ resource }: { resource: any }) {
@@ -41,7 +47,7 @@ function Reconciled({ resource, extra }: { resource: any; extra?: ReactNode }) {
   const applied = appliedFact(resource)
   return (
     <>
-      <SummaryHeading>Reconciled</SummaryHeading>
+      <SectionHeading>Reconciled</SectionHeading>
       <FactGrid>
         <FactRow label="Applied">
           <FactValue fact={applied} />
@@ -62,14 +68,10 @@ function Reconciled({ resource, extra }: { resource: any; extra?: ReactNode }) {
   )
 }
 
-function DeclaredIn({ resource }: { resource: any }) {
-  const src = gitopsSourceOf(resource)
-  if (!src) return <NotReported text="GitOps source not recorded" />
-  return (
-    <span>
-      {src.tool === 'argocd' ? 'Argo CD application' : 'Flux'} <span className="font-mono">{src.namespace ? `${src.namespace}/${src.name}` : src.name}</span>
-    </span>
-  )
+function DeclaredIn({ resource, workspace, onNavigate }: { resource: any; workspace: CNPGWorkspaceResponse | null; onNavigate?: NavigateToRef }) {
+  const manager = cnpgManagedBy(workspace, resource)
+  if (!manager || !managedByLabel(manager)) return <NotReported text="GitOps source not recorded" />
+  return <ManagedByText refTo={manager} onNavigate={onNavigate} />
 }
 
 function DatabaseRef({ resource, workspace, onNavigate }: SummaryProps) {
@@ -92,7 +94,7 @@ function DatabaseRef({ resource, workspace, onNavigate }: SummaryProps) {
   )
 }
 
-function LinkList({ items, kind, onNavigate }: { items: any[]; kind: string; onNavigate?: CNPGNavigate }) {
+function LinkList({ items, kind, onNavigate }: { items: any[]; kind: string; onNavigate?: NavigateToRef }) {
   return (
     <span className="flex flex-wrap gap-x-3">
       {items.map((o) => (
@@ -114,7 +116,7 @@ export function CNPGDatabaseSummary({ resource, workspace, onNavigate }: Summary
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Database')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Declared</SummaryHeading>
+      <SectionHeading>Declared</SectionHeading>
       <FactGrid>
         <FactRow label="PostgreSQL database">
           {resource?.spec?.name ? <span className="font-mono">{resource.spec.name}</span> : <NotReported text="Not set" />}
@@ -137,10 +139,10 @@ export function CNPGDatabaseSummary({ resource, workspace, onNavigate }: Summary
         }
       />
 
-      <SummaryHeading>Source and target</SummaryHeading>
+      <SectionHeading>Source and target</SectionHeading>
       <FactGrid>
         <FactRow label="Declared in">
-          <DeclaredIn resource={resource} />
+          <DeclaredIn resource={resource} workspace={workspace} onNavigate={onNavigate} />
         </FactRow>
         <FactRow label="Cluster">
           <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
@@ -149,7 +151,7 @@ export function CNPGDatabaseSummary({ resource, workspace, onNavigate }: Summary
           {pubsUnavailable ? (
             <NotReported text={pubsUnavailable} />
           ) : related.publications.length === 0 ? (
-            <span className="text-theme-text-secondary">None on this database</span>
+            <span className="text-theme-text-secondary">No visible Publication declarations</span>
           ) : (
             <LinkList items={related.publications} kind="Publication" onNavigate={onNavigate} />
           )}
@@ -158,12 +160,13 @@ export function CNPGDatabaseSummary({ resource, workspace, onNavigate }: Summary
           {subsUnavailable ? (
             <NotReported text={subsUnavailable} />
           ) : related.subscriptions.length === 0 ? (
-            <span className="text-theme-text-secondary">None on this database</span>
+            <span className="text-theme-text-secondary">No visible Subscription declarations</span>
           ) : (
             <LinkList items={related.subscriptions} kind="Subscription" onNavigate={onNavigate} />
           )}
         </FactRow>
       </FactGrid>
+      <Note>Objects created in SQL are not shown.</Note>
     </SummaryShell>
   )
 }
@@ -191,12 +194,39 @@ function publicationTargets(resource: any): ReactNode {
   )
 }
 
-export function CNPGPublicationSummary({ resource, workspace, onNavigate }: SummaryProps) {
+function workspacePaths(workspace: CNPGWorkspaceResponse | null | undefined, subscriptions: any[]): CNPGLogicalPath[] {
+  return cnpgLogicalPaths(subscriptions, clustersIn(workspace), workspaceList(workspace, 'publications'), workspaceList(workspace, 'poolers'), (ns) =>
+    relationUnavailable(workspace, 'publications', ns, 'Publications'),
+  )
+}
+
+export interface CNPGLogicalPathReading {
+  path: CNPGLogicalPath
+  /** The publisher primary's report of the slot; absent when not read. */
+  slot?: Fact
+  notice?: ReactNode
+}
+
+export function CNPGPublicationSummary({
+  resource,
+  workspace,
+  onNavigate,
+  subscribers,
+}: SummaryProps & {
+  /** Subscriptions reading this publication, with their slots; derived from the workspace when omitted. */
+  subscribers?: CNPGLogicalPathReading[]
+}) {
+  const readings: CNPGLogicalPathReading[] =
+    subscribers ??
+    workspacePaths(workspace, workspaceList(workspace, 'subscriptions'))
+      .filter((p) => p.publication.object?.namespace === resource?.metadata?.namespace && p.publication.object?.name === resource?.metadata?.name)
+      .map((path) => ({ path }))
+  const subsUnavailable = relationUnavailable(workspace, 'subscriptions', resource?.metadata?.namespace ?? '', 'Subscriptions')
   return (
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Publication')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Declared</SummaryHeading>
+      <SectionHeading>Declared</SectionHeading>
       <FactGrid>
         <FactRow label="Publication">
           {resource?.spec?.name ? <span className="font-mono">{resource.spec.name}</span> : <NotReported text="Not set" />}
@@ -210,23 +240,117 @@ export function CNPGPublicationSummary({ resource, workspace, onNavigate }: Summ
         <FactRow label="Publishes">{publicationTargets(resource)}</FactRow>
         <ReclaimRow resource={resource} />
         <FactRow label="Declared in">
-          <DeclaredIn resource={resource} />
+          <DeclaredIn resource={resource} workspace={workspace} onNavigate={onNavigate} />
         </FactRow>
       </FactGrid>
 
       <Reconciled resource={resource} />
+
+      <SectionHeading hint="Subscription objects Radar can see">Subscribers</SectionHeading>
+      {readings.length === 0 ? (
+        <div className="text-sm text-theme-text-tertiary">
+          {subsUnavailable ?? 'No visible Subscription object reads this publication. Subscribers outside Radar\'s view, or created in SQL, are not listed.'}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {readings.map((r) => (
+            <CNPGLogicalPathView key={`${r.path.subscription.namespace}/${r.path.subscription.name}`} path={r.path} slot={r.slot} notice={r.notice} onNavigate={onNavigate} compact />
+          ))}
+        </div>
+      )}
     </SummaryShell>
   )
 }
 
-export function CNPGSubscriptionSummary({ resource, workspace, onNavigate }: SummaryProps) {
+export function CNPGDatabaseRoleSummary({ resource, workspace, onNavigate }: SummaryProps) {
+  const ns = resource?.metadata?.namespace ?? ''
+  const clusterUnavailable = relationUnavailable(workspace, 'clusters', ns, 'Clusters')
+  const cluster = clusterUnavailable ? null : targetCluster(resource, clustersIn(workspace))
+  const f = cnpgDatabaseRoleFacts(resource, cluster)
+  return (
+    <SummaryShell>
+      <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'DatabaseRole')} onNavigate={onNavigate} />
+
+      <SectionHeading>Declared</SectionHeading>
+      <FactGrid>
+        <FactRow label="PostgreSQL role">{f.pgName ? <span className="font-mono">{f.pgName}</span> : <NotReported text="Not set" />}</FactRow>
+        <FactRow label="Cluster">
+          <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
+        </FactRow>
+        <FactRow label="Login">{f.login ? 'Allowed' : 'Not allowed'}{f.superuser ? ' · superuser' : ''}</FactRow>
+        <FactRow label="Password">
+          {f.passwordDisabled ? (
+            'Disabled'
+          ) : f.passwordSecret ? (
+            <span>
+              From Secret <span className="font-mono">{f.passwordSecret}</span>
+            </span>
+          ) : (
+            <span className="text-theme-text-secondary">No password Secret declared</span>
+          )}
+          {f.passwordValidUntil && (
+            <div className="text-xs text-theme-text-secondary">
+              Valid until {f.passwordValidUntil} (PostgreSQL VALID UNTIL; the operator does not rotate it)
+            </div>
+          )}
+        </FactRow>
+        <FactRow label="Client certificate">
+          {f.clientCertificate ? (
+            <span>
+              Operator-issued in Secret <span className="font-mono">{f.clientCertificate.secret}</span>
+              <span className="text-theme-text-secondary">
+                {' · '}
+                {f.clientCertificate.expiration ? `expires ${f.clientCertificate.expiration}` : 'expiry not reported yet'}
+              </span>
+              {f.clientCertificate.message && <div className="text-xs text-theme-text-secondary">{f.clientCertificate.message}</div>}
+            </span>
+          ) : (
+            <span className="text-theme-text-secondary">Not requested</span>
+          )}
+        </FactRow>
+        <ReclaimRow resource={resource} />
+        <FactRow label="Declared in">
+          <DeclaredIn resource={resource} workspace={workspace} onNavigate={onNavigate} />
+        </FactRow>
+      </FactGrid>
+
+      <Reconciled
+        resource={resource}
+        extra={
+          <FactRow label="Cluster spec">
+            {f.overriddenByCluster === null ? (
+              <NotReported text={clusterUnavailable ?? 'Target Cluster not visible, so whether its spec.managed.roles overrides this role is unknown'} />
+            ) : f.overriddenByCluster ? (
+              <span className={toneTextClass('degraded')}>
+                The Cluster declares “{f.pgName}” in spec.managed.roles, which takes precedence: this DatabaseRole is not reconciled while that entry exists
+              </span>
+            ) : (
+              <span className="text-theme-text-secondary">No spec.managed.roles entry for this role</span>
+            )}
+          </FactRow>
+        }
+      />
+    </SummaryShell>
+  )
+}
+
+export function CNPGSubscriptionSummary({
+  resource,
+  workspace,
+  onNavigate,
+  logicalPath,
+}: SummaryProps & {
+  /** The path and slot reading; derived from the workspace (slot not read) when omitted. */
+  logicalPath?: CNPGLogicalPathReading
+}) {
+  const reading: Partial<CNPGLogicalPathReading> = logicalPath ?? { path: workspacePaths(workspace, [resource])[0] }
   const pub = resource?.spec?.publicationName
   const ext = resource?.spec?.externalClusterName
   return (
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Subscription')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Declared</SummaryHeading>
+      <SectionHeading>Declared</SectionHeading>
       <FactGrid>
         <FactRow label="Subscription">
           {resource?.spec?.name ? <span className="font-mono">{resource.spec.name}</span> : <NotReported text="Not set" />}
@@ -254,11 +378,18 @@ export function CNPGSubscriptionSummary({ resource, workspace, onNavigate }: Sum
         </FactRow>
         <ReclaimRow resource={resource} />
         <FactRow label="Declared in">
-          <DeclaredIn resource={resource} />
+          <DeclaredIn resource={resource} workspace={workspace} onNavigate={onNavigate} />
         </FactRow>
       </FactGrid>
 
       <Reconciled resource={resource} />
+
+      {reading.path && (
+        <>
+          <SectionHeading>Replication path</SectionHeading>
+          <CNPGLogicalPathView path={reading.path} slot={reading.slot} notice={reading.notice} onNavigate={onNavigate} />
+        </>
+      )}
     </SummaryShell>
   )
 }

package/src/components/cnpg/CNPGImageCatalogSummary.tsx

@@ -1,8 +1,11 @@
 import { CNPG_GROUP, getCNPGImageCatalogEntries } from '../resources/resource-utils-cnpg'
 import type { CNPGWorkspaceResponse } from './workspace'
-import { FactGrid, FactRow, RefLink, SummaryHeading, toneTextClass, type CNPGNavigate } from './primitives'
 import { NotReported, Note, ObjectProblems, SummaryShell } from './CNPGSharedSummary'
 import { clustersIn, clustersUsingCatalog, refOf, relationUnavailable } from './relations'
+import { type NavigateToRef, RefLink } from '../ui/RefLink'
+import { toneTextClass } from '../ui/status-tone'
+import { FactGrid, FactRow } from '../facts'
+import { SectionHeading } from '../ui/FoldSection'
 
 export function CNPGImageCatalogSummary({
   resource,
@@ -11,7 +14,7 @@ export function CNPGImageCatalogSummary({
 }: {
   resource: any
   workspace: CNPGWorkspaceResponse | null
-  onNavigate?: CNPGNavigate
+  onNavigate?: NavigateToRef
 }) {
   const clusterScoped = resource?.kind === 'ClusterImageCatalog'
   const ns = resource?.metadata?.namespace ?? ''
@@ -27,7 +30,7 @@ export function CNPGImageCatalogSummary({
     <SummaryShell>
       <ObjectProblems issues={workspace?.issues} subject={refOf(resource, resource?.kind ?? 'ImageCatalog')} onNavigate={onNavigate} />
 
-      <SummaryHeading>Images</SummaryHeading>
+      <SectionHeading>Images</SectionHeading>
       {entries.length === 0 ? (
         <div className="text-sm">
           <NotReported text="No images listed" />
@@ -42,7 +45,7 @@ export function CNPGImageCatalogSummary({
         </FactGrid>
       )}
 
-      <SummaryHeading>Used by</SummaryHeading>
+      <SectionHeading>Used by</SectionHeading>
       {unavailable ? (
         <div className="text-sm">
           <NotReported text={unavailable} />

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

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { CNPGLogicalPathView } from './CNPGLogicalPath'
+import type { CNPGLogicalPath } from './logicalReplication'
+
+const path: CNPGLogicalPath = {
+  subscription: { namespace: 'db', name: 'sub', cluster: 'pg', applied: true },
+  externalCluster: { name: 'upstream', declared: true },
+  publisher: { kind: 'external', reason: 'the external cluster names no host' },
+  publication: { name: 'pub' },
+  slot: { name: 'sub' },
+  failover: { text: 'unknown', tone: 'unknown' },
+}
+
+describe('CNPGLogicalPathView', () => {
+  it('says unknown parts of the path in words, never as "?"', () => {
+    const html = renderToStaticMarkup(<CNPGLogicalPathView path={path} />)
+    expect(html).toContain('external cluster upstream')
+    expect(html).toContain('database unknown')
+    expect(html).not.toMatch(/upstream<\/span>\/\?|\/\?/)
+  })
+})