@skyhook-io/k8s-ui 1.11.0 → 1.13.0

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'
@@ -7,6 +8,7 @@ import {
   getCNPGClusterImage,
   getCNPGClusterStorage,
   getCNPGClusterStorageClass,
+  getCNPGVolumeHealth,
   getCNPGClusterWALStorage,
   getCNPGClusterBootstrapMethod,
   getCNPGClusterUpdateStrategy,
@@ -21,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
@@ -43,6 +50,7 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
   const monitoring = getCNPGClusterMonitoring(data)
   const isReplica = getCNPGClusterIsReplica(data)
   const walStorage = getCNPGClusterWALStorage(data)
+  const volumeHealth = getCNPGVolumeHealth(data)
   const postgresParams = getCNPGClusterPostgresParams(data)
   const instanceNames = getCNPGClusterInstanceNames(data)
   const bootstrapMethod = getCNPGClusterBootstrapMethod(data)
@@ -210,6 +218,14 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         />
       )}
 
+      {volumeHealth && volumeHealth.unusable.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Unusable storage volume"
+          message={`${volumeHealth.unusable.join(', ')} cannot be used because a paired volume is missing. An instance backed by it will not start, and the cluster cannot return to full size until the volume is restored or removed.`}
+        />
+      )}
+
       {/* Cluster Overview */}
       <Section title="Cluster Overview" icon={Database} defaultExpanded>
         <PropertyList>
@@ -220,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={
@@ -290,6 +340,20 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         <PropertyList>
           <Property label="Data Size" value={getCNPGClusterStorage(data)} />
           <Property label="Storage Class" value={getCNPGClusterStorageClass(data)} />
+          {/* Requested size and class are spec-side intentions. These are what the
+              operator reports about the volumes that actually exist. */}
+          {volumeHealth?.total !== undefined && (
+            <Property label="Volumes" value={`${volumeHealth.healthy.length}/${volumeHealth.total} healthy`} />
+          )}
+          {volumeHealth && volumeHealth.unusable.length > 0 && (
+            <Property label="Unusable" value={volumeHealth.unusable.join(', ')} />
+          )}
+          {volumeHealth && volumeHealth.resizing.length > 0 && (
+            <Property label="Resizing" value={volumeHealth.resizing.join(', ')} />
+          )}
+          {volumeHealth && volumeHealth.dangling.length > 0 && (
+            <Property label="Detached" value={volumeHealth.dangling.join(', ')} />
+          )}
         </PropertyList>
         {walStorage && (
           <div className="mt-2 pt-2 border-t border-theme-border">
@@ -323,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}
                 />
@@ -338,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
@@ -361,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')
+  })
+})