@skyhook-io/k8s-ui 1.12.0 → 1.13.0

package/src/components/resources/index.ts

@@ -3,6 +3,33 @@ export * from './resource-utils-hpa'
 export * from './resource-utils-argo'
 export * from './resource-utils-certmanager'
 export * from './resource-utils-cnpg'
+export {
+  CALICO_GROUPS,
+  type CalicoApiGroup,
+  isCalicoApiGroup,
+  isCalicoApiVersion,
+  isCalicoPolicyKind,
+  isCalicoNetworkPolicyKind,
+  isCalicoStagedKubernetesNetworkPolicyKind,
+  formatKubernetesLabelSelector,
+  isCalicoPolicyResource,
+  isCoreNetworkPolicyApiVersion,
+  isCoreNetworkPolicyResource,
+  isCoreNetworkPolicyKind,
+  getCalicoPolicyKindLabel,
+  getCalicoPolicyTypes,
+  getCalicoPolicyRuleCount,
+  getCalicoPolicySelector,
+  getCalicoIPPoolAllowedUses,
+  getCalicoIPPoolBlockSize,
+  getCalicoIPPoolEncapsulation,
+  getCalicoStagedAction,
+  isCalicoStagedDeletion,
+  isCalicoStagedIgnored,
+  CALICO_SELECTOR_NOT_APPLICABLE,
+  getCalicoPolicyNamespaceSelector,
+  getCalicoPolicyServiceAccountSelector,
+} from './resource-utils-calico'
 export * from './resource-utils-crossplane'
 export * from './resource-utils-eso'
 export * from './resource-utils-flux'

package/src/components/resources/kyverno-legacy-action.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { getKyvernoPolicyAction } from './resource-utils-kyverno'
+
+function cpol(spec: any) {
+  return { apiVersion: 'kyverno.io/v1', kind: 'ClusterPolicy', metadata: { name: 'p' }, spec }
+}
+
+/**
+ * The Enforce cases here were confirmed against a live Kyverno 1.18 admission
+ * controller: each one creates a pod the apiserver actually rejects, while
+ * `spec.validationFailureAction` on the same policy reads Audit.
+ */
+describe('getKyvernoPolicyAction', () => {
+  it('lets a rule-level failureAction override the spec-level one', () => {
+    // Live result: pod REJECTED by validate.kyverno.svc-fail.
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Audit',
+          rules: [{ name: 'r', validate: { failureAction: 'Enforce' } }],
+        }),
+      ),
+    ).toBe('Enforce')
+  })
+
+  it('reads the failureAction on an image-verification rule', () => {
+    // Live result: pod REJECTED by mutate.kyverno.svc-fail. Kyverno had
+    // defaulted spec.validationFailureAction to Audit on its own.
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Audit',
+          rules: [{ name: 'r', verifyImages: [{ failureAction: 'Enforce' }] }],
+        }),
+      ),
+    ).toBe('Enforce')
+  })
+
+  it('does not claim Enforce when every rule overrides it away', () => {
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Enforce',
+          rules: [{ name: 'r', validate: { failureAction: 'Audit' } }],
+        }),
+      ),
+    ).toBe('Audit')
+  })
+
+  it('applies the spec-level action to rules that declare none', () => {
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Enforce',
+          rules: [{ name: 'r', validate: { pattern: {} } }],
+        }),
+      ),
+    ).toBe('Enforce')
+  })
+
+  // Only validate and verifyImages rules can reject, so only they inherit the
+  // spec-level action. A mutate rule alongside them would otherwise report a
+  // policy as blocking when its one validating rule audits.
+  it('does not let a mutate rule carry the spec-level Enforce', () => {
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Enforce',
+          rules: [{ name: 'v', validate: { failureAction: 'Audit' } }, { name: 'm', mutate: {} }],
+        }),
+      ),
+    ).toBe('Audit')
+  })
+
+  it('reports Audit for a policy whose rules cannot reject at all', () => {
+    expect(
+      getKyvernoPolicyAction(
+        cpol({ validationFailureAction: 'Enforce', rules: [{ name: 'g', generate: {} }] }),
+      ),
+    ).toBe('Audit')
+  })
+
+  it('still inherits the spec action for a validating rule that declares none', () => {
+    expect(
+      getKyvernoPolicyAction(
+        cpol({
+          validationFailureAction: 'Enforce',
+          rules: [{ name: 'm', mutate: {} }, { name: 'v', validate: { pattern: {} } }],
+        }),
+      ),
+    ).toBe('Enforce')
+  })
+
+  it('falls back to Audit when nothing declares an action', () => {
+    expect(getKyvernoPolicyAction(cpol({ rules: [{ name: 'r', validate: {} }] }))).toBe('Audit')
+    expect(getKyvernoPolicyAction(cpol({}))).toBe('Audit')
+  })
+})

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

@@ -0,0 +1,241 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { AnalysisRunRenderer } from './AnalysisRunRenderer'
+import { getAnalysisRunStatus, summarizeAnalysisMetrics } from '../resource-utils'
+
+// SSR splits interpolated text with <!-- --> markers; strip so assertions read as prose.
+function render(element: Parameters<typeof renderToString>[0]): string {
+  return renderToString(element).replace(/<!-- -->/g, '')
+}
+
+function analysisRun(overrides: {
+  phase?: string
+  message?: string
+  labels?: Record<string, string>
+  metricResults?: any[]
+  runSummary?: Record<string, number>
+  metrics?: any[]
+}) {
+  return {
+    metadata: {
+      name: 'web-6c4f-2',
+      namespace: 'prod',
+      labels: overrides.labels,
+      ownerReferences: [{ kind: 'Rollout', name: 'web' }],
+    },
+    spec: { metrics: overrides.metrics ?? [] },
+    status: {
+      phase: overrides.phase,
+      message: overrides.message,
+      metricResults: overrides.metricResults,
+      runSummary: overrides.runSummary,
+    },
+  }
+}
+
+describe('AnalysisRunRenderer verdict banner', () => {
+  it('escalates Failed to an error banner naming the abort consequence', () => {
+    const html = render(
+      <AnalysisRunRenderer
+        data={analysisRun({
+          phase: 'Failed',
+          metricResults: [{ name: 'success-rate', phase: 'Failed', message: 'result 0 breached fail if result == 0' }],
+        })}
+      />,
+    )
+    expect(html).toContain('the rollout will be aborted')
+    expect(html).toContain('result 0 breached fail if result == 0')
+  })
+
+  it('distinguishes Error (could not run) from Failed (metric breached)', () => {
+    const html = render(<AnalysisRunRenderer data={analysisRun({ phase: 'Error' })} />)
+    expect(html).toContain('Analysis could not run')
+    expect(html).not.toContain('the rollout will be aborted')
+  })
+
+  it('frames Inconclusive as awaiting a human decision, not a failure', () => {
+    const html = render(
+      <AnalysisRunRenderer
+        data={analysisRun({
+          phase: 'Inconclusive',
+          metricResults: [{ name: 'success-rate', phase: 'Inconclusive', message: 'result 2 met neither condition' }],
+        })}
+      />,
+    )
+    expect(html).toContain('paused for a human decision')
+    expect(html).toContain('result 2 met neither condition')
+  })
+
+  it('falls back to a generic reason when no metric carried a message', () => {
+    const html = render(
+      <AnalysisRunRenderer data={analysisRun({ phase: 'Inconclusive', metricResults: [{ name: 'm', phase: 'Inconclusive' }] })} />,
+    )
+    expect(html).toContain('none met its success condition either')
+  })
+
+  it('renders no banner for a run still in flight', () => {
+    for (const phase of ['Pending', 'Running', 'Successful']) {
+      const html = render(<AnalysisRunRenderer data={analysisRun({ phase })} />)
+      expect(html).not.toContain('paused for a human decision')
+      expect(html).not.toContain('the rollout will be aborted')
+      expect(html).not.toContain('Analysis could not run')
+    }
+  })
+})
+
+describe('AnalysisRunRenderer detail', () => {
+  it('surfaces the trigger and canary step the controller labelled the run with', () => {
+    const html = render(
+      <AnalysisRunRenderer
+        data={analysisRun({ phase: 'Running', labels: { 'rollout-type': 'Step', 'step-index': '3' } })}
+      />,
+    )
+    expect(html).toContain('Triggered as')
+    expect(html).toContain('Step')
+    expect(html).toContain('Canary step')
+  })
+
+  it('pairs each metric result with its condition from the spec', () => {
+    const html = render(
+      <AnalysisRunRenderer
+        data={analysisRun({
+          phase: 'Inconclusive',
+          metrics: [
+            { name: 'success-rate', successCondition: 'result == 1', failureCondition: 'result == 0', failureLimit: 2 },
+          ],
+          metricResults: [
+            {
+              name: 'success-rate',
+              phase: 'Inconclusive',
+              count: 3,
+              inconclusive: 3,
+              measurements: [{ value: '2', phase: 'Inconclusive' }],
+            },
+          ],
+        })}
+      />,
+    )
+    expect(html).toContain('success if: result == 1')
+    expect(html).toContain('fail if: result == 0')
+    expect(html).toContain('failure limit 2')
+    expect(html).toContain('latest: 2')
+    expect(html).toContain('3 measured')
+    expect(html).toContain('3 inconclusive')
+  })
+
+  it('flags a dry-run metric so its phase is not read as load-bearing', () => {
+    const html = render(
+      <AnalysisRunRenderer
+        data={analysisRun({ phase: 'Successful', metricResults: [{ name: 'canary-error-rate', phase: 'Failed', dryRun: true }] })}
+      />,
+    )
+    expect(html).toContain('(dry-run)')
+  })
+
+  it('renders the tally and metric sections only when populated', () => {
+    const bare = render(<AnalysisRunRenderer data={analysisRun({ phase: 'Pending' })} />)
+    expect(bare).not.toContain('Measurement Tally')
+    expect(bare).not.toContain('Metrics (')
+
+    const full = render(
+      <AnalysisRunRenderer
+        data={analysisRun({ phase: 'Successful', runSummary: { count: 4, successful: 4 }, metricResults: [{ name: 'm', phase: 'Successful' }] })}
+      />,
+    )
+    expect(full).toContain('Measurement Tally')
+    expect(full).toContain('Metrics (1)')
+  })
+
+  it('renders without a status, spec, or owner', () => {
+    expect(() => render(<AnalysisRunRenderer data={{ metadata: { name: 'ar' } }} />)).not.toThrow()
+  })
+})
+
+describe('getAnalysisRunStatus', () => {
+  // Inconclusive is the alert tier: worse than Running, not as bad as Failed.
+  it('maps each phase to the right health tier', () => {
+    const cases: Array<[string | undefined, string]> = [
+      ['Successful', 'healthy'],
+      ['Running', 'degraded'],
+      ['Pending', 'degraded'],
+      ['Inconclusive', 'alert'],
+      ['Failed', 'unhealthy'],
+      ['Error', 'unhealthy'],
+      [undefined, 'unknown'],
+      ['Bogus', 'unknown'],
+    ]
+    for (const [phase, level] of cases) {
+      expect(getAnalysisRunStatus({ status: { phase } }).level).toBe(level)
+    }
+  })
+
+  it('labels an absent phase Unknown rather than blank', () => {
+    expect(getAnalysisRunStatus({}).text).toBe('Unknown')
+  })
+})
+
+describe('summarizeAnalysisMetrics', () => {
+  const run = (...phases: string[]) => ({
+    status: { metricResults: phases.map((phase, i) => ({ name: `m${i}`, phase })) },
+  })
+
+  it('does not count in-flight metrics as passing', () => {
+    expect(summarizeAnalysisMetrics(run('Successful', 'Running', 'Pending'))).toEqual({
+      total: 3,
+      passing: 1,
+      notPassing: 0,
+      dryRun: 0,
+    })
+  })
+
+  it('counts every failure phase as not passing', () => {
+    expect(summarizeAnalysisMetrics(run('Failed', 'Error', 'Inconclusive', 'Successful'))).toEqual({
+      total: 4,
+      passing: 1,
+      notPassing: 3,
+      dryRun: 0,
+    })
+  })
+
+  it('reports all passing only once every metric is Successful', () => {
+    const { total, passing } = summarizeAnalysisMetrics(run('Successful', 'Successful'))
+    expect(passing).toBe(total)
+  })
+
+  it('handles a run with no metric results', () => {
+    expect(summarizeAnalysisMetrics({})).toEqual({ total: 0, passing: 0, notPassing: 0, dryRun: 0 })
+  })
+
+  // Argo excludes dryRun metrics from worstStatus, so a failed dry-run must not
+  // paint the row amber while the run itself reports Successful.
+  it('excludes dry-run metrics from the verdict counts', () => {
+    const run = {
+      status: {
+        phase: 'Successful',
+        metricResults: [
+          { name: 'real', phase: 'Successful' },
+          { name: 'canary-only', phase: 'Failed', dryRun: true },
+        ],
+      },
+    }
+    expect(summarizeAnalysisMetrics(run)).toEqual({
+      total: 1,
+      passing: 1,
+      notPassing: 0,
+      dryRun: 1,
+    })
+  })
+
+  it('still counts a non-dry-run failure alongside a dry-run one', () => {
+    const run = {
+      status: {
+        metricResults: [
+          { name: 'real', phase: 'Failed' },
+          { name: 'shadow', phase: 'Failed', dryRun: true },
+        ],
+      },
+    }
+    const { total, notPassing, dryRun } = summarizeAnalysisMetrics(run)
+    expect({ total, notPassing, dryRun }).toEqual({ total: 1, notPassing: 1, dryRun: 1 })
+  })
+})

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

@@ -0,0 +1,166 @@
+import { Activity, BarChart3, Server } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Badge, type BadgeSeverity } from '../../ui/Badge'
+import { formatAge } from '../resource-utils'
+
+interface AnalysisRunRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+const PHASE_SEVERITY: Record<string, BadgeSeverity> = {
+  Successful: 'success',
+  Running: 'info',
+  Pending: 'neutral',
+  Inconclusive: 'warning',
+  Failed: 'error',
+  Error: 'error',
+}
+
+function phaseSeverity(phase: string): BadgeSeverity {
+  return PHASE_SEVERITY[phase] ?? 'neutral'
+}
+
+// The Rollout's own pause reason is only "InconclusiveAnalysisRun" — the metric
+// that actually decided it lives here, in metricResults[].
+export function AnalysisRunRenderer({ data, onNavigate }: AnalysisRunRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const phase = status.phase || 'Unknown'
+  const summary = status.runSummary || {}
+  const metricResults: any[] = status.metricResults || []
+  const labels = data.metadata?.labels || {}
+  const ownerRollout = (data.metadata?.ownerReferences || []).find((ref: any) => ref.kind === 'Rollout')
+
+  const failing = metricResults.filter((m) => m.phase === 'Failed' || m.phase === 'Error')
+  const inconclusive = metricResults.filter((m) => m.phase === 'Inconclusive')
+
+  const verdictMessage = status.message || failing[0]?.message || inconclusive[0]?.message
+
+  return (
+    <>
+      {(phase === 'Failed' || phase === 'Error') && (
+        <AlertBanner
+          variant="error"
+          title={phase === 'Error' ? 'Analysis could not run' : 'Analysis failed — the rollout will be aborted'}
+          message={verdictMessage || 'One or more metrics breached their failure condition.'}
+        />
+      )}
+
+      {phase === 'Inconclusive' && (
+        <AlertBanner
+          variant="warning"
+          title="Analysis was inconclusive — the rollout is paused for a human decision"
+          message={verdictMessage || 'No metric failed outright, but none met its success condition either.'}
+        />
+      )}
+
+      <Section title="Status" icon={Activity}>
+        <PropertyList>
+          <Property label="Phase" value={<Badge severity={phaseSeverity(phase)}>{phase}</Badge>} />
+          {labels['rollout-type'] && <Property label="Triggered as" value={labels['rollout-type']} />}
+          {labels['step-index'] && <Property label="Canary step" value={labels['step-index']} />}
+          <Property label="Started" value={status.startedAt ? formatAge(status.startedAt) : undefined} />
+          <Property label="Completed" value={status.completedAt ? formatAge(status.completedAt) : undefined} />
+          <Property label="Message" value={status.message} />
+          {ownerRollout && (
+            <Property
+              label="Rollout"
+              value={
+                onNavigate ? (
+                  <button
+                    onClick={() =>
+                      onNavigate({ kind: 'Rollout', namespace: data.metadata?.namespace, name: ownerRollout.name })
+                    }
+                    className="text-brand hover:underline"
+                  >
+                    {ownerRollout.name}
+                  </button>
+                ) : (
+                  ownerRollout.name
+                )
+              }
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {Object.keys(summary).length > 0 && (
+        <Section title="Measurement Tally" icon={BarChart3}>
+          <PropertyList>
+            <Property label="Measurements" value={summary.count} />
+            <Property label="Successful" value={summary.successful} />
+            <Property label="Failed" value={summary.failed} />
+            <Property label="Inconclusive" value={summary.inconclusive} />
+            <Property label="Errored" value={summary.error} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {metricResults.length > 0 && (
+        <Section title={`Metrics (${metricResults.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {metricResults.map((metric: any) => {
+              const definition = (spec.metrics || []).find((m: any) => m.name === metric.name)
+              const measurements: any[] = metric.measurements || []
+              const latest = measurements[measurements.length - 1]
+              return (
+                <div key={metric.name} className="card-inner space-y-1.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-sm text-theme-text-primary">{metric.name}</span>
+                    <Badge severity={phaseSeverity(metric.phase)} size="sm">
+                      {metric.phase || 'Unknown'}
+                      {metric.dryRun ? ' (dry-run)' : ''}
+                    </Badge>
+                  </div>
+                  {latest?.value && (
+                    <div className="font-mono text-xs text-theme-text-secondary">latest: {latest.value}</div>
+                  )}
+                  {definition?.successCondition && (
+                    <div className="font-mono text-xs text-theme-text-tertiary">
+                      success if: {definition.successCondition}
+                    </div>
+                  )}
+                  {definition?.failureCondition && (
+                    <div className="font-mono text-xs text-theme-text-tertiary">
+                      fail if: {definition.failureCondition}
+                    </div>
+                  )}
+                  <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-theme-text-secondary">
+                    {metric.count != null && <span>{metric.count} measured</span>}
+                    {metric.successful ? <span>{metric.successful} ok</span> : null}
+                    {metric.failed ? <span>{metric.failed} failed</span> : null}
+                    {metric.inconclusive ? <span>{metric.inconclusive} inconclusive</span> : null}
+                    {metric.error ? <span>{metric.error} errored</span> : null}
+                    {metric.consecutiveError ? <span>{metric.consecutiveError} consecutive errors</span> : null}
+                    {definition?.failureLimit != null && <span>failure limit {definition.failureLimit}</span>}
+                  </div>
+                  {metric.message && (
+                    <div className="text-xs text-theme-text-secondary">{metric.message}</div>
+                  )}
+                  {latest?.message && latest.message !== metric.message && (
+                    <div className="text-xs text-theme-text-secondary">{latest.message}</div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {(spec.args || []).length > 0 && (
+        <Section title={`Arguments (${spec.args.length})`} icon={Server} defaultExpanded={false}>
+          <PropertyList>
+            {spec.args.map((arg: any) => (
+              <Property
+                key={arg.name}
+                label={arg.name}
+                value={arg.value ?? (arg.valueFrom ? 'from reference' : undefined)}
+              />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -4,6 +4,7 @@ import {
   getCNPGBackupStatus,
   getCNPGBackupCluster,
   getCNPGBackupMethod,
+  getCNPGBackupPlugin,
   getCNPGBackupPhase,
   getCNPGBackupDuration,
   getCNPGBackupName,
@@ -11,6 +12,7 @@ import {
   getCNPGBackupServerName,
   getCNPGBackupError,
   getCNPGBackupTarget,
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
 
 interface CNPGBackupRendererProps {
@@ -24,6 +26,7 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
   const phase = getCNPGBackupPhase(data)
   const target = getCNPGBackupTarget(data)
   const clusterName = getCNPGBackupCluster(data)
+  const backupPlugin = getCNPGBackupPlugin(data)
 
   // WAL range fields
   const beginWal = data.status?.beginWal
@@ -48,6 +51,24 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
         <PropertyList>
           <Property label="Phase" value={phase} />
           <Property label="Method" value={getCNPGBackupMethod(data)} />
+          {/* A plugin-taken backup lands in an ObjectStore rather than in the
+              Cluster's own barmanObjectStore, so naming the plugin is what
+              tells an operator where to go looking. */}
+          {backupPlugin && <Property label="Plugin" value={backupPlugin.name} />}
+          {backupPlugin?.parameters?.barmanObjectName && (
+            <Property
+              label="Object Store"
+              value={
+                <ResourceLink
+                  name={backupPlugin.parameters.barmanObjectName}
+                  kind="objectstores"
+                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
           <Property label="Duration" value={getCNPGBackupDuration(data)} />
           <Property label="Backup Name" value={getCNPGBackupName(data)} />
           {data.status?.instanceID?.podName && (
@@ -81,8 +102,16 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
             }
             return clusterName
           })()} />
-          <Property label="Destination" value={getCNPGBackupDestinationPath(data)} />
-          <Property label="Server Name" value={getCNPGBackupServerName(data)} />
+          {/* Destination and server name are in-tree barmanObjectStore fields.
+              Under the plugin method they are never populated because both live
+              on the ObjectStore, and rendering them as "-" reads as "not
+              configured" rather than "recorded elsewhere". */}
+          {!backupPlugin && (
+            <>
+              <Property label="Destination" value={getCNPGBackupDestinationPath(data)} />
+              <Property label="Server Name" value={getCNPGBackupServerName(data)} />
+            </>
+          )}
         </PropertyList>
       </Section>
 

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

@@ -83,3 +83,36 @@ describe('the WAL banner must not claim nothing else looks wrong when something
     expect(html(walFailing(phase, 2))).not.toContain(CLAIM)
   })
 })
+
+describe('recovery points must be readable as ages, not raw machine timestamps', () => {
+  const withBackup = (lastSuccessful: string) => ({
+    apiVersion: 'postgresql.cnpg.io/v1',
+    kind: 'Cluster',
+    metadata: { name: 'pg', namespace: 'db' },
+    spec: { instances: 2, backup: { barmanObjectStore: { destinationPath: 's3://bucket' } } },
+    status: {
+      phase: 'Cluster in healthy state',
+      readyInstances: 2,
+      lastSuccessfulBackup: lastSuccessful,
+      firstRecoverabilityPoint: lastSuccessful,
+    },
+  })
+
+  it('states how old the last successful backup is', () => {
+    const old = new Date(Date.now() - 200 * 24 * 60 * 60 * 1000).toISOString()
+    const html = renderToString(<CNPGClusterRenderer data={withBackup(old)} />)
+    // The age is the whole point: a raw ISO string requires the reader to do
+    // date arithmetic to notice their newest backup is 200 days old.
+    expect(html).toContain('200d ago')
+    // And the ISO form with its milliseconds must not survive as the display value.
+    expect(html).not.toContain(old)
+  })
+
+  it('keeps the absolute timestamp beside the age', () => {
+    // Age alone is the wrong unit here: "1d ago" next to "1d ago" is the same
+    // string for events a week apart in a failure history.
+    const at = '2026-01-30T09:40:37.000Z'
+    const html = renderToString(<CNPGClusterRenderer data={withBackup(at)} />)
+    expect(html).toContain('2026-01-30 09:40:37 UTC')
+  })
+})