@skyhook-io/k8s-ui 1.12.0 → 1.13.3

package/src/components/resources/renderers/CNPGClusterRenderer.tsx

@@ -1,3 +1,4 @@
+import type React from 'react'
 import { Database, HardDrive, Activity, Clock, Shield, KeyRound } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { pluralize } from '../../../utils/pluralize'
@@ -22,15 +23,20 @@ import {
   getCNPGWALArchivingFailure,
   getCNPGLastBackupFailure,
   classifyCNPGClusterPhase,
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
 import { formatAge } from '../resource-utils'
+import { RecoveryTime } from './CNPGShared'
 
 interface CNPGClusterRendererProps {
+  /** Filled by the host with the Databases, Publications and Subscriptions
+   *  declared against this cluster — a reverse lookup the package cannot do. */
+  declared?: React.ReactNode
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererProps) {
+export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRendererProps) {
   const conditions = data.status?.conditions || []
   const instances = data.spec?.instances ?? 0
   // Presence matters — see getCNPGClusterStatus. A cluster whose status has no
@@ -230,6 +236,40 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
             <Property label="Target Primary" value={targetPrimary} />
           )}
           <Property label="Image" value={getCNPGClusterImage(data)} />
+          {/* When the image comes from a catalog rather than a literal tag, the
+              catalog is where an "incomplete or invalid image catalog" phase is
+              diagnosed — so it is named and reachable rather than implied. */}
+          {data?.spec?.imageCatalogRef?.name && (
+            <Property
+              label="Image Catalog"
+              value={
+                <span className="inline-flex items-baseline gap-1.5 min-w-0">
+                  <ResourceLink
+                    name={data.spec.imageCatalogRef.name}
+                    kind={
+                      data.spec.imageCatalogRef.kind === 'ClusterImageCatalog'
+                        ? 'clusterimagecatalogs'
+                        : 'imagecatalogs'
+                    }
+                    namespace={
+                      data.spec.imageCatalogRef.kind === 'ClusterImageCatalog'
+                        ? ''
+                        : (data.metadata?.namespace ?? '')
+                    }
+                    group="postgresql.cnpg.io"
+                    onNavigate={onNavigate}
+                  />
+                  {/* A catalog holds one image per major, so the name alone does
+                      not say which entry this cluster resolves to. */}
+                  {data.spec.imageCatalogRef.major != null && (
+                    <span className="text-xs text-theme-text-tertiary">
+                      {`PostgreSQL ${data.spec.imageCatalogRef.major}`}
+                    </span>
+                  )}
+                </span>
+              }
+            />
+          )}
           <Property label="Update Strategy" value={getCNPGClusterUpdateStrategy(data)} />
           {data.status?.writeService && (
             <Property label="Write Service" value={
@@ -347,6 +387,7 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
                 <ResourceLink
                   name={backupConfig.plugin.barmanObjectName}
                   kind="objectstores"
+                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
                   namespace={data.metadata?.namespace || ''}
                   onNavigate={onNavigate}
                 />
@@ -362,13 +403,13 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
               <Property label="Retention" value={backupConfig.retentionPolicy} />
             )}
             {backupConfig.lastSuccessfulBackup && (
-              <Property label="Last Successful" value={backupConfig.lastSuccessfulBackup} />
+              <Property label="Last Successful" value={<RecoveryTime at={backupConfig.lastSuccessfulBackup} />} />
             )}
             {lastFailedBackup && (
-              <Property label="Last Failed" value={lastFailedBackup} />
+              <Property label="Last Failed" value={<RecoveryTime at={lastFailedBackup} />} />
             )}
             {backupConfig.firstRecoverabilityPoint && (
-              <Property label="First Recoverability" value={backupConfig.firstRecoverabilityPoint} />
+              <Property label="First Recoverability" value={<RecoveryTime at={backupConfig.firstRecoverabilityPoint} />} />
             )}
           </PropertyList>
           {/* Without this note the section renders empty on plugin-migrated
@@ -385,6 +426,8 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         </Section>
       )}
 
+      {declared}
+
       {/* Certificates */}
       {certExpirations.length > 0 && (
         <Section title="Certificates" icon={KeyRound} defaultExpanded>

package/src/components/resources/renderers/CNPGDeclarativeRenderer.tsx

@@ -0,0 +1,243 @@
+import type React from 'react'
+import { Database, AlertTriangle, Table2 } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
+import {
+  getCNPGDeclarativeStatus,
+  getCNPGDeclarativeMessage,
+  getCNPGDeclarativeCluster,
+  getCNPGReclaimPolicy,
+  getCNPGImageCatalogEntries,
+} from '../resource-utils-cnpg'
+
+type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+
+/**
+ * Database, Publication and Subscription — CNPG's declarative objects.
+ *
+ * One renderer for three kinds because they share the state that matters:
+ * whether the operator has applied them to PostgreSQL, and what it said if it
+ * could not. They differ only in which spec fields identify the thing being
+ * declared, which the caller supplies.
+ *
+ * The status is deliberately three-valued. `applied: false` is a failure the
+ * operator can explain; an absent `applied` means it has not reconciled yet,
+ * and rendering that as a failure would condemn every object in its first
+ * seconds.
+ */
+/** Shared shell for the three declarative kinds; not part of the package API. */
+function CNPGDeclarativeRenderer({
+  data,
+  onNavigate,
+  details,
+  extra,
+}: {
+  data: any
+  onNavigate?: Nav
+  /** Kind-specific rows: what this object declares. */
+  details: Array<{ label: string; value: React.ReactNode }>
+  /** Sections the host adds below, e.g. reverse lookups needing a data fetch. */
+  extra?: React.ReactNode
+}) {
+  const status = getCNPGDeclarativeStatus(data)
+  const message = getCNPGDeclarativeMessage(data)
+  const cluster = getCNPGDeclarativeCluster(data)
+  const reclaim = getCNPGReclaimPolicy(data)
+  const namespace = data?.metadata?.namespace ?? ''
+
+  return (
+    <>
+      {/* The operator's own words, verbatim. A failure here means the object
+          exists in Kubernetes and not in PostgreSQL — a split an operator will
+          not spot from the CR alone. */}
+      {status.level === 'unhealthy' && message && (
+        <AlertBanner variant="error" title="Not applied to PostgreSQL" message={message} />
+      )}
+
+      <Section title="Status" icon={Database} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="Applied"
+            value={
+              <span className={clsx('badge', HEALTH_BADGE_COLORS[status.level as keyof typeof HEALTH_BADGE_COLORS])}>
+                {status.text}
+              </span>
+            }
+          />
+          {cluster && (
+            <Property
+              label="Cluster"
+              value={
+                <ResourceLink
+                  name={cluster}
+                  kind="clusters"
+                  namespace={namespace}
+                  group="postgresql.cnpg.io"
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {details.map((d) => (
+            <Property key={d.label} label={d.label} value={d.value} />
+          ))}
+          <Property
+            label="On delete"
+            value={
+              reclaim.destructive ? (
+                <span className="text-warning-text">
+                  {`${reclaim.value} — removing this resource drops it from PostgreSQL`}
+                </span>
+              ) : (
+                <span>{`${reclaim.value} — removing this resource leaves PostgreSQL untouched`}</span>
+              )
+            }
+          />
+        </PropertyList>
+        {/* Pending is not failure, and saying nothing here would leave the
+            reader to guess which of the two they are looking at. */}
+        {status.level === 'unknown' && (
+          <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+            The operator has not reported on this yet. It has not failed — it has not been applied.
+          </div>
+        )}
+        {status.level !== 'unhealthy' && message && (
+          <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">{message}</div>
+        )}
+      </Section>
+      {extra}
+    </>
+  )
+}
+
+export function CNPGDatabaseRenderer({
+  data,
+  onNavigate,
+  usedBy,
+}: {
+  data: any
+  onNavigate?: Nav
+  /** Filled by the host with what replicates out of this database. */
+  usedBy?: React.ReactNode
+}) {
+  const spec = data?.spec ?? {}
+  const details: Array<{ label: string; value: React.ReactNode }> = [
+    { label: 'Database', value: spec.name ?? '-' },
+    { label: 'Owner', value: spec.owner ?? '-' },
+  ]
+  if (spec.encoding) details.push({ label: 'Encoding', value: spec.encoding })
+  if (spec.locale) details.push({ label: 'Locale', value: spec.locale })
+  if (spec.connectionLimit != null) {
+    details.push({ label: 'Connection Limit', value: String(spec.connectionLimit) })
+  }
+  if (spec.allowConnections === false) {
+    details.push({ label: 'Connections', value: 'Not allowed' })
+  }
+  if (spec.isTemplate === true) details.push({ label: 'Template', value: 'Yes' })
+  return <CNPGDeclarativeRenderer data={data} onNavigate={onNavigate} details={details} extra={usedBy} />
+}
+
+export function CNPGPublicationRenderer({
+  data,
+  onNavigate,
+  links,
+}: {
+  data: any
+  onNavigate?: Nav
+  /** Resolved by the host: the PostgreSQL-side names below correspond to real
+   *  CRs, and naming them without a route is a dead end. */
+  links?: { database?: React.ReactNode }
+}) {
+  const spec = data?.spec ?? {}
+  const target = spec.target ?? {}
+  const scope = target.allTables
+    ? 'All tables'
+    : Array.isArray(target.objects)
+      ? `${target.objects.length} object${target.objects.length === 1 ? '' : 's'}`
+      : '-'
+  return (
+    <CNPGDeclarativeRenderer
+      data={data}
+      onNavigate={onNavigate}
+      details={[
+        { label: 'Publication', value: spec.name ?? '-' },
+        { label: 'In Database', value: links?.database ?? spec.dbname ?? '-' },
+        { label: 'Publishes', value: scope },
+      ]}
+    />
+  )
+}
+
+export function CNPGSubscriptionRenderer({
+  data,
+  onNavigate,
+  links,
+}: {
+  data: any
+  onNavigate?: Nav
+  links?: { database?: React.ReactNode; publication?: React.ReactNode }
+}) {
+  const spec = data?.spec ?? {}
+  return (
+    <CNPGDeclarativeRenderer
+      data={data}
+      onNavigate={onNavigate}
+      details={[
+        { label: 'Subscription', value: spec.name ?? '-' },
+        { label: 'In Database', value: links?.database ?? spec.dbname ?? '-' },
+        { label: 'Subscribes To', value: links?.publication ?? spec.publicationName ?? '-' },
+        // The upstream is declared on the destination Cluster, not here, which
+        // is why a missing one fails at apply time rather than at admission.
+        { label: 'Upstream Cluster', value: spec.externalClusterName ?? '-' },
+      ]}
+    />
+  )
+}
+
+/**
+ * ImageCatalog and ClusterImageCatalog — the PostgreSQL images a Cluster may
+ * use, pinned per major version.
+ *
+ * Worth its own surface because a Cluster referencing a catalog that lacks its
+ * major version reports "incomplete or invalid image catalog" and stops, and
+ * the catalog is where that is diagnosed.
+ */
+export function CNPGImageCatalogRenderer({
+  data,
+  usedBy,
+}: {
+  data: any
+  /** Filled by the host with the clusters pinned to this catalog — the question
+   *  an operator has when a cluster reports an invalid catalog. */
+  usedBy?: React.ReactNode
+}) {
+  const entries = getCNPGImageCatalogEntries(data)
+  return (
+    <>
+    <Section title={`Images (${entries.length})`} icon={Table2} defaultExpanded>
+      {entries.length === 0 ? (
+        <div className="flex items-start gap-2 text-sm text-theme-text-secondary">
+          <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+          <span>
+            No images are pinned. A cluster pointing at this catalog cannot resolve an image and will
+            not start.
+          </span>
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          {entries.map((e) => (
+            <div key={e.major} className="flex items-baseline gap-3 min-w-0">
+              <span className="badge shrink-0">{`PostgreSQL ${e.major}`}</span>
+              <span className="text-sm text-theme-text-secondary font-mono truncate" title={e.image}>
+                {e.image}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      </Section>
+      {usedBy}
+    </>
+  )
+}

package/src/components/resources/renderers/CNPGObjectStoreRenderer.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CNPGObjectStoreRenderer } from './CNPGObjectStoreRenderer'
+
+/**
+ * A recovery window is keyed by the archive's server name. It defaults to the
+ * cluster's name, but the plugin's `serverName` parameter overrides it — the
+ * ObjectStore refuses the field outright and points at the Cluster — so the key
+ * and the cluster name are not interchangeable. A link is an assertion that
+ * something is on the other end of it.
+ */
+const store = {
+  apiVersion: 'barmancloud.cnpg.io/v1',
+  kind: 'ObjectStore',
+  metadata: { name: 'pg-store', namespace: 'pg' },
+  spec: { configuration: { destinationPath: 's3://backups' } },
+  status: {
+    serverRecoveryWindow: {
+      'pg-main': { firstRecoverabilityPoint: '2026-08-01T00:00:00Z', lastSuccessfulBackupTime: '2026-08-10T00:00:00Z' },
+    },
+  },
+}
+
+const nav = () => {}
+
+describe('ObjectStore recovery-window server key', () => {
+  it('links the key to the cluster archiving under it', () => {
+    const html = renderToString(
+      <CNPGObjectStoreRenderer data={store} clusterForServer={new Map([['pg-main', 'pg-main']])} onNavigate={nav} />,
+    )
+    expect(html).toContain('>pg-main</button>')
+  })
+
+  // A key belonging to no cluster we found — an in-tree cluster, or one whose
+  // archive nothing here accounts for.
+  it('renders the key as text when nothing archives under it', () => {
+    const html = renderToString(
+      <CNPGObjectStoreRenderer data={store} clusterForServer={new Map([['other-server', 'other-cluster']])} onNavigate={nav} />,
+    )
+    expect(html).toContain('pg-main')
+    expect(html).not.toContain('>pg-main</button>')
+  })
+
+  // Absent means unresolved — still loading, lookup failed, or the host cannot
+  // ask. None of those establish that the cluster is there.
+  it('does not link when nothing resolved the key', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={store} onNavigate={nav} />)
+    expect(html).toContain('pg-main')
+    expect(html).not.toContain('>pg-main</button>')
+  })
+
+  // The whole reason the mapping exists: the key is the archive's name, and a
+  // cluster that renamed its archive must still be reachable from it.
+  it('links a renamed archive to the cluster behind it, showing the archive name', () => {
+    const html = renderToString(
+      <CNPGObjectStoreRenderer
+        data={store}
+        clusterForServer={new Map([['pg-main', 'pg-primary']])}
+        onNavigate={nav}
+      />,
+    )
+    expect(html).toContain('>pg-main</button>')
+    expect(html).not.toContain('>pg-primary</button>')
+  })
+})
+
+// The recovery window is read before a restore, and it is derived from the
+// ObjectStore alone — which cannot see that WAL archiving stopped on the cluster
+// feeding it. Left to itself the row keeps a green "Recoverable" and a
+// four-day-old successful backup while the recovery point has frozen, and the
+// warning lives on a different screen entirely.
+describe('a window that has stopped advancing', () => {
+  const store = {
+    metadata: { name: 'pg-store', namespace: 'pg' },
+    status: {
+      serverRecoveryWindow: {
+        'pg-doomed': {
+          firstRecoverabilityPoint: '2026-07-29T02:00:00Z',
+          lastSuccessfulBackupTime: '2026-08-12T02:00:00Z',
+        },
+      },
+    },
+  }
+
+  it('does not call a frozen window recoverable', () => {
+    const html = renderToString(
+      <CNPGObjectStoreRenderer data={store} archivingFailing={new Set(['pg-doomed'])} />,
+    )
+    expect(html).toContain('Not advancing')
+    expect(html).not.toContain('>Recoverable<')
+    expect(html).toContain('WAL archiving has stopped')
+  })
+
+  it('keeps the plain answer when archiving is healthy', () => {
+    const html = renderToString(<CNPGObjectStoreRenderer data={store} />)
+    expect(html).toContain('Recoverable')
+    expect(html).not.toContain('WAL archiving has stopped')
+  })
+})

package/src/components/resources/renderers/CNPGObjectStoreRenderer.tsx

@@ -0,0 +1,235 @@
+import { Archive, Clock, HardDrive } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
+import { RecoveryTime } from './CNPGShared'
+import {
+  getCNPGObjectStoreProvider,
+  getCNPGObjectStoreCredentialSecret,
+  getCNPGObjectStoreRecoveryWindows,
+  getCNPGObjectStoreDestination,
+  getCNPGObjectStoreRetention,
+  type CNPGObjectStoreRecoveryWindow,
+} from '../resource-utils-cnpg'
+
+/**
+ * ObjectStore (barmancloud.cnpg.io/v1) — where a plugin-backed CNPG Cluster's
+ * backups actually live.
+ *
+ * The Cluster page already tells operators the recovery window is tracked here,
+ * because a plugin-backed Cluster stops publishing recovery-point fields of its
+ * own. Until this renderer existed that sentence pointed at a page showing raw
+ * fields, so the restorable range was effectively unreachable in the product.
+ */
+
+export function CNPGObjectStoreRenderer({
+  data,
+  clusterForServer,
+  archivingFailing,
+  onNavigate,
+}: {
+  data: any
+  /** Server key -> the Cluster archiving under it, so a key is only linked when
+   *  something is behind it. See RecoveryWindowRow. */
+  clusterForServer?: Map<string, string>
+  /** Servers whose Cluster reports WAL archiving stopped. The window keeps its
+   *  last successful backup and reads as recoverable, while the recovery point
+   *  has stopped advancing — a claim this status alone cannot correct. */
+  archivingFailing?: Set<string>
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}) {
+  const windows = getCNPGObjectStoreRecoveryWindows(data)
+  const provider = getCNPGObjectStoreProvider(data)
+  const retention = getCNPGObjectStoreRetention(data)
+  const credentialSecret = getCNPGObjectStoreCredentialSecret(data)
+  const cfg = data?.spec?.configuration ?? {}
+  const failing = windows.filter((w) => w.failingSinceLastSuccess)
+
+  return (
+    <>
+      {failing.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title={`Backups failing for ${failing.length === 1 ? failing[0].server : `${failing.length} servers`}`}
+          message="The most recent backup attempt failed after the last success, so the recoverable range has stopped moving forward."
+        />
+      )}
+
+      <Section title="Recovery Window" icon={Clock} defaultExpanded>
+        {windows.length === 0 ? (
+          // Configured but empty is NOT the same as healthy. Saying nothing here
+          // would read as "backups are fine" on a store holding nothing.
+          <div className="text-sm text-theme-text-secondary">
+            No server has reported a backup yet, so there is nothing to restore from this store.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {windows.map((w) => (
+              <RecoveryWindowRow
+                archivingFailing={archivingFailing}
+                clusterForServer={clusterForServer}
+                key={w.server}
+                window={w}
+                retention={retention}
+                namespace={data?.metadata?.namespace ?? ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        )}
+      </Section>
+
+      <Section title="Destination" icon={Archive} defaultExpanded>
+        <PropertyList>
+          <Property label="Path" value={getCNPGObjectStoreDestination(data)} />
+          {cfg.endpointURL && <Property label="Endpoint" value={cfg.endpointURL} />}
+          {/* Only when set — a custom CA is the difference between "cannot reach
+              the bucket" and "does not trust it", and it is otherwise invisible. */}
+          {(cfg.endpointCA?.name || cfg.endpointCA?.key) && (
+            <Property
+              label="Endpoint CA"
+              value={cfg.endpointCA?.name ? `${cfg.endpointCA.name}${cfg.endpointCA.key ? ` · ${cfg.endpointCA.key}` : ''}` : cfg.endpointCA.key}
+            />
+          )}
+          {provider && <Property label="Provider" value={provider} />}
+          {credentialSecret && (
+            <Property
+              label="Credentials"
+              value={
+                <ResourceLink
+                  name={credentialSecret}
+                  kind="secrets"
+                  namespace={data?.metadata?.namespace ?? ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {cfg.serverName && <Property label="Server Name" value={cfg.serverName} />}
+          {retention && <Property label="Retention" value={retention} />}
+        </PropertyList>
+      </Section>
+
+      {(cfg.wal || cfg.data) && (
+        <Section title="Backup Settings" icon={HardDrive} defaultExpanded={false}>
+          <PropertyList>
+            {cfg.wal?.compression && <Property label="WAL Compression" value={cfg.wal.compression} />}
+            {cfg.wal?.encryption && <Property label="WAL Encryption" value={cfg.wal.encryption} />}
+            {cfg.wal?.maxParallel != null && (
+              <Property label="WAL Max Parallel" value={String(cfg.wal.maxParallel)} />
+            )}
+            {cfg.data?.compression && <Property label="Data Compression" value={cfg.data.compression} />}
+            {cfg.data?.encryption && <Property label="Data Encryption" value={cfg.data.encryption} />}
+            {cfg.data?.jobs != null && <Property label="Data Jobs" value={String(cfg.data.jobs)} />}
+            {cfg.data?.immediateCheckpoint != null && (
+              <Property label="Immediate Checkpoint" value={cfg.data.immediateCheckpoint ? 'Yes' : 'No'} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}
+
+/**
+ * One server's restorable range. The two timestamps are the answer to "how far
+ * back can I go, and how current is it" — the question the whole plugin path
+ * moved out of the Cluster.
+ */
+function RecoveryWindowRow({
+  window: w,
+  retention,
+  namespace,
+  clusterForServer,
+  archivingFailing,
+  onNavigate,
+}: {
+  window: CNPGObjectStoreRecoveryWindow
+  retention?: string
+  namespace: string
+  /** Server key -> the Cluster archiving under it. The key defaults to the
+   *  cluster's name but the plugin's `serverName` parameter overrides it, so the
+   *  two are not interchangeable and the mapping has to come from the plugin
+   *  parameters rather than from string equality.
+   *
+   *  Absent means unresolved, not "assume it resolves": the lookup may still be
+   *  loading, it may have failed, or the host may not be able to ask. All three
+   *  render the key as text, which is the part that is always true. */
+  clusterForServer?: Map<string, string>
+  /** Servers whose Cluster reports WAL archiving stopped. */
+  archivingFailing?: Set<string>
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}) {
+  const stalled = archivingFailing?.has(w.server)
+  const tone = w.failingSinceLastSuccess || stalled
+    ? 'degraded'
+    : w.lastSuccessfulBackupTime
+      ? 'healthy'
+      : 'unknown'
+  return (
+    <div className="card-inner">
+      <div className="flex items-center gap-2 mb-1">
+        {/* The server key is usually the Cluster this window belongs to, and
+            naming it without a route leaves the reader knowing a cluster is in
+            trouble and unable to open it. Only usually, though — see
+            `clusterNames`. */}
+        <span className="text-sm font-medium text-theme-text-primary">
+          {clusterForServer?.get(w.server) ? (
+            <ResourceLink
+              name={clusterForServer.get(w.server) as string}
+              label={w.server}
+              kind="clusters"
+              namespace={namespace}
+              group="postgresql.cnpg.io"
+              onNavigate={onNavigate}
+            />
+          ) : (
+            w.server
+          )}
+        </span>
+        <span className={clsx('badge', HEALTH_BADGE_COLORS[tone as keyof typeof HEALTH_BADGE_COLORS])}>
+          {w.failingSinceLastSuccess
+            ? 'Backups failing'
+            : stalled
+              ? 'Not advancing'
+              : w.lastSuccessfulBackupTime
+                ? 'Recoverable'
+                : 'No backups yet'}
+        </span>
+      </div>
+      {stalled && !w.failingSinceLastSuccess && (
+        <div className="text-xs text-warning-text mb-1">
+          {/* The timestamps below are real and still describe the last backup that
+              worked. What they no longer describe is a window still growing, and
+              "Recoverable" alone invites exactly that reading on the screen
+              someone checks before a restore. */}
+          WAL archiving has stopped on the cluster behind this server, so the times below are the
+          last ones recorded rather than a window still advancing.
+        </div>
+      )}
+      <PropertyList>
+        {w.firstRecoverabilityPoint && (
+          <Property
+            label="Restorable From"
+            value={<RecoveryTime at={w.firstRecoverabilityPoint} />}
+          />
+        )}
+        {w.lastSuccessfulBackupTime ? (
+          <Property label="Last Successful Backup" value={<RecoveryTime at={w.lastSuccessfulBackupTime} />} />
+        ) : (
+          <Property label="Last Successful Backup" value="never" />
+        )}
+        {w.lastFailedBackupTime && (
+          <Property label="Last Failed Attempt" value={<RecoveryTime at={w.lastFailedBackupTime} />} />
+        )}
+        {retention && <Property label="Retention" value={retention} />}
+      </PropertyList>
+      {w.failingSinceLastSuccess && (
+        <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+          Every backup since the last success has failed. The oldest restorable point will still age
+          out under the retention policy, so the window is shrinking from both ends.
+        </div>
+      )}
+    </div>
+  )
+}