@skyhook-io/k8s-ui 1.12.0 → 1.13.3

package/src/components/resources/renderers/cnpg-cells.tsx

@@ -24,6 +24,14 @@ import {
   getCNPGPoolerType,
   getCNPGPoolerMode,
   getCNPGPoolerInstances,
+  getCNPGObjectStoreStatus,
+  getCNPGObjectStoreDestination,
+  getCNPGObjectStoreRetention,
+  getCNPGObjectStoreRecoveryWindows,
+  getCNPGDeclarativeStatus,
+  getCNPGDeclarativeCluster,
+  getCNPGDeclarativeMessage,
+  getCNPGImageCatalogEntries,
 } from '../resource-utils-cnpg'
 
 /** Terminal = the operator has stopped reconciling; neighbouring cells are stale. */
@@ -122,6 +130,98 @@ export function CNPGBackupCell({ resource, column }: { resource: any; column: st
   }
 }
 
+export function CNPGDeclarativeCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGDeclarativeStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'cluster':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {getCNPGDeclarativeCluster(resource) || '-'}
+        </span>
+      )
+    case 'target':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {resource?.spec?.name || '-'}
+        </span>
+      )
+    case 'dbname':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {resource?.spec?.dbname || resource?.spec?.owner || '-'}
+        </span>
+      )
+    case 'message':
+      return (
+        <span
+          className="text-sm text-theme-text-secondary truncate block"
+          title={getCNPGDeclarativeMessage(resource) || ''}
+        >
+          {getCNPGDeclarativeMessage(resource) || '-'}
+        </span>
+      )
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGImageCatalogCell({ resource, column }: { resource: any; column: string }) {
+  const entries = getCNPGImageCatalogEntries(resource)
+  switch (column) {
+    case 'majors':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {entries.length === 0 ? 'none' : entries.map((e) => e.major).join(', ')}
+        </span>
+      )
+    case 'images':
+      return <span className="text-sm text-theme-text-secondary">{String(entries.length)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGObjectStoreCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGObjectStoreStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'destination':
+      // `block` is load-bearing: an inline span with `truncate` establishes no
+      // box, so the column collapses to almost nothing regardless of its width.
+      // Every sibling cell that renders a long value pairs the two.
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {getCNPGObjectStoreDestination(resource)}
+        </span>
+      )
+    case 'retention':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {getCNPGObjectStoreRetention(resource) || '-'}
+        </span>
+      )
+    case 'servers': {
+      const windows = getCNPGObjectStoreRecoveryWindows(resource)
+      if (windows.length === 0) {
+        return <span className="text-sm text-theme-text-tertiary">none</span>
+      }
+      const failing = windows.filter((w) => w.failingSinceLastSuccess).length
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {failing > 0 ? `${windows.length} (${failing} failing)` : String(windows.length)}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 export function CNPGScheduledBackupCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {

package/src/components/resources/renderers/index.ts

@@ -4,6 +4,12 @@ export * from './argo-cells'
 export * from './CertificateRenderer'
 export * from './CertificateRequestRenderer'
 export * from './certmanager-cells'
+export * from './CalicoHostEndpointRenderer'
+export * from './CalicoIPPoolRenderer'
+export * from './CalicoNetworkPolicyRenderer'
+export * from './CalicoNetworkPolicyDiagram'
+export * from './CalicoTierRenderer'
+export * from './calico-cells'
 export * from './ChallengeRenderer'
 export * from './ClusterComplianceReportRenderer'
 export * from './ClusterExternalSecretRenderer'
@@ -74,6 +80,7 @@ export * from './KyvernoPolicyShared'
 export * from './KyvernoCELPolicyRenderers'
 export * from './KyvernoExceptionRenderers'
 export * from './LeaseRenderer'
+export * from './LookupFailureNote'
 export * from './NetworkPolicyRenderer'
 export * from './NetworkPolicyDiagram'
 export * from './CiliumNetworkPolicyRenderer'
@@ -94,6 +101,7 @@ export * from './ReplicaSetRenderer'
 export * from './RoleBindingRenderer'
 export * from './RoleRenderer'
 export * from './RolloutRenderer'
+export * from './AnalysisRunRenderer'
 export * from './RuntimeClassRenderer'
 export * from './SbomReportRenderer'
 export * from './SealedSecretRenderer'
@@ -109,10 +117,12 @@ export * from './trivy-cells'
 export * from './trivy-shared'
 export * from './velero-cells'
 export * from './VeleroBackupRenderer'
+export * from './VeleroRunMessages'
 export * from './VeleroBSLRenderer'
 export * from './VeleroRestoreRenderer'
 export * from './VeleroScheduleRenderer'
 export * from './VeleroVSLRenderer'
+export * from './VeleroBackupRepositoryRenderer'
 export * from './VPARenderer'
 export * from './VulnerabilityReportRenderer'
 export * from './WebhookConfigRenderer'
@@ -160,4 +170,9 @@ export * from './ResourceSliceRenderer'
 export * from './nvidia-cells'
 export * from './NvidiaClusterPolicyRenderer'
 export * from './NvidiaDriverRenderer'
-export { PolicySection } from './PolicySection'
+export * from './PolicySection'
+export * from './PolicyCoverageSection'
+export * from './KyvernoGlobalContextRenderer'
+export * from './KyvernoQueueRenderers'
+export * from './CNPGObjectStoreRenderer'
+export * from './CNPGDeclarativeRenderer'

package/src/components/resources/renderers/kyverno-cells.tsx

@@ -9,6 +9,16 @@ import {
   getKyvernoPolicyAction,
   getKyvernoPolicyRuleCount,
 } from '../resource-utils-kyverno'
+import {
+  getKyvernoRequestState,
+  getKyvernoRequestType,
+  getKyvernoRequestPolicy,
+  getKyvernoRequestTriggers,
+  getKyvernoReportStatus,
+  getKyvernoReportSubject,
+  getKyvernoReportSource,
+  getKyvernoReportSummary,
+} from '../resource-utils-kyverno-queue'
 
 export function PolicyReportCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
@@ -92,3 +102,74 @@ export function ClusterPolicyCell({ resource, column }: { resource: any; column:
   // Same rendering logic as KyvernoPolicy
   return <KyvernoPolicyCell resource={resource} column={column} />
 }
+
+// ============================================================================
+// UpdateRequest / EphemeralReport
+// ============================================================================
+
+export function KyvernoUpdateRequestCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const state = getKyvernoRequestState(resource)
+      return <span className={clsx('badge', state.color)}>{state.text}</span>
+    }
+    case 'type': {
+      const t = getKyvernoRequestType(resource)
+      return <span className="text-sm text-theme-text-secondary">{t === 'unknown' ? '-' : t}</span>
+    }
+    case 'policy':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={getKyvernoRequestPolicy(resource)}>
+          {getKyvernoRequestPolicy(resource) || '-'}
+        </span>
+      )
+    case 'triggers': {
+      // A generate request carries every trigger it was queued for, so the row
+      // has to say "and N more" rather than pretend it is about one resource.
+      const triggers = getKyvernoRequestTriggers(resource)
+      if (triggers.length === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
+      const first = triggers[0]
+      const label = `${first.kind ?? ''}/${first.name ?? ''}`
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={label}>
+          {triggers.length === 1 ? label : `${label} +${triggers.length - 1}`}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function KyvernoEphemeralReportCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKyvernoReportStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'subject': {
+      const s = getKyvernoReportSubject(resource)
+      if (!s?.kind) return <span className="text-sm text-theme-text-tertiary">-</span>
+      const label = s.name ? `${s.kind}/${s.name}` : `${s.kind} (deleted)`
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={label}>
+          {label}
+        </span>
+      )
+    }
+    case 'source':
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block">
+          {(getKyvernoReportSource(resource) || '-').replace(/-/g, ' ')}
+        </span>
+      )
+    case 'results':
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {String(getKyvernoReportSummary(resource).total)}
+        </span>
+      )
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/network-policy-peer-styles.ts

@@ -0,0 +1,25 @@
+export type NetworkPolicyPeerType =
+  | "pod"
+  | "namespace"
+  | "cidr"
+  | "all"
+  | "deny"
+  | "combined";
+
+export const NETWORK_POLICY_PEER_STYLES = {
+  pod: "border-emerald-500/30 bg-emerald-500/8",
+  namespace: "border-sky-500/30 bg-sky-500/8",
+  cidr: "border-amber-500/30 bg-amber-500/8",
+  combined: "border-emerald-500/30 bg-emerald-500/8",
+  all: "border-theme-border bg-theme-elevated/50",
+  deny: "border-red-500/30 bg-red-500/8",
+} as const satisfies Record<NetworkPolicyPeerType, string>;
+
+export const NETWORK_POLICY_PEER_DOTS = {
+  pod: "bg-emerald-500",
+  namespace: "bg-sky-500",
+  cidr: "bg-amber-500",
+  combined: "bg-emerald-500",
+  all: "bg-theme-text-tertiary",
+  deny: "bg-red-500",
+} as const satisfies Record<NetworkPolicyPeerType, string>;

package/src/components/resources/renderers/velero-cells.tsx

@@ -16,6 +16,7 @@ import {
   getRestoreIncludedNamespaces,
   getRestoreDuration,
   getRestoreErrors,
+  getRestoreWarnings,
   getScheduleStatus,
   getSchedulePaused,
   getScheduleCronInfo,
@@ -37,6 +38,10 @@ import {
 // whenever the two differ. Without this the three collapsed partial-failure
 // phases would be unreachable outside the YAML tab, and the label would stop
 // being a display choice and start being a loss of information.
+// Foreground colours here carry a light counterpart as well as the dark one.
+// A bare `text-*-400` is tuned for the dark ground and washes out on the light
+// one — the same defect rbac-badges.ts was created to fix, and these cells sit
+// in a table next to badges that already do this correctly.
 export function VeleroPhaseValue({
   status,
   phase,
@@ -84,7 +89,7 @@ export function BackupCell({ resource, column }: { resource: any; column: string
     case 'expiry': {
       const exp = getBackupExpiry(resource)
       const isExpired = exp === 'Expired'
-      return <span className={clsx('text-sm', isExpired ? 'text-red-400' : 'text-theme-text-secondary')}>{exp}</span>
+      return <span className={clsx('text-sm', isExpired ? 'text-red-600 dark:text-red-400' : 'text-theme-text-secondary')}>{exp}</span>
     }
     case 'errors': {
       const errors = getBackupErrors(resource)
@@ -94,9 +99,9 @@ export function BackupCell({ resource, column }: { resource: any; column: string
       }
       return (
         <span className="text-sm">
-          {errors > 0 && <span className="text-red-400">{errors}E</span>}
+          {errors > 0 && <span className="text-red-600 dark:text-red-400">{errors}E</span>}
           {errors > 0 && warnings > 0 && <span className="text-theme-text-tertiary"> / </span>}
-          {warnings > 0 && <span className="text-yellow-400">{warnings}W</span>}
+          {warnings > 0 && <span className="text-amber-600 dark:text-amber-400">{warnings}W</span>}
         </span>
       )
     }
@@ -128,11 +133,21 @@ export function RestoreCell({ resource, column }: { resource: any; column: strin
       return <span className="text-sm text-theme-text-secondary">{dur}</span>
     }
     case 'errors': {
+      // Errors AND warnings, the same shape the Backup column uses. A restore
+      // that reported only warnings showed "-" here while carrying a non-zero
+      // count on the object, which is the row a reader scans to decide whether
+      // the restore is worth opening.
       const errors = getRestoreErrors(resource)
-      if (errors === 0) {
+      const warnings = getRestoreWarnings(resource)
+      if (errors === 0 && warnings === 0) {
         return <span className="text-sm text-theme-text-tertiary">-</span>
       }
-      return <span className="text-sm text-red-400">{errors}</span>
+      return (
+        <span className="text-sm flex gap-1.5">
+          {errors > 0 && <span className="text-red-600 dark:text-red-400">{errors}E</span>}
+          {warnings > 0 && <span className="text-amber-600 dark:text-amber-400">{warnings}W</span>}
+        </span>
+      )
     }
     default:
       return <span className="text-sm text-theme-text-tertiary">-</span>
@@ -157,7 +172,14 @@ export function ScheduleCell({ resource, column }: { resource: any; column: stri
           </span>
           {alsoPaused && (
             <Tooltip content="Also paused — this schedule will not run until it is resumed">
-              <Pause className="w-3 h-3 shrink-0 text-amber-600 dark:text-amber-400" />
+              <>
+                <Pause className="w-3 h-3 shrink-0 text-amber-600 dark:text-amber-400" aria-hidden="true" />
+                {/* The badge beside this says "Rejected", so without a label the
+                    row reads as a schedule that is merely broken rather than one
+                    that is also switched off — and the tooltip carrying that
+                    second fact needs a pointer to reach. */}
+                <span className="sr-only">Also paused — this schedule will not run until it is resumed</span>
+              </>
             </Tooltip>
           )}
         </span>
@@ -271,7 +293,7 @@ export function BackupStorageLocationCell({ resource, column }: { resource: any;
     }
     case 'default': {
       const isDefault = getBSLDefault(resource)
-      return <span className={clsx('text-sm', isDefault ? 'text-blue-400' : 'text-theme-text-tertiary')}>{isDefault ? 'Yes' : '-'}</span>
+      return <span className={clsx('text-sm', isDefault ? 'text-blue-600 dark:text-blue-400' : 'text-theme-text-tertiary')}>{isDefault ? 'Yes' : '-'}</span>
     }
     case 'lastValidation': {
       const lastVal = getBSLLastValidation(resource)

package/src/components/resources/renderers/velero-dead-ends.test.tsx

@@ -0,0 +1,142 @@
+import { describe, expect, it, vi } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { VeleroBackupRenderer } from './VeleroBackupRenderer'
+import { VeleroRestoreRenderer } from './VeleroRestoreRenderer'
+
+/**
+ * Every screen has to end somewhere the reader can act.
+ *
+ * These two pages each name another object as the reason the reader should care
+ * — a storage location that is holding a backup hostage, and the backup a
+ * restore came from — and each rendered that name as plain text. The page said
+ * "go look at dr-replica" and gave no way to get there.
+ *
+ * The link has to disappear cleanly when the host does not wire navigation:
+ * library consumers render these renderers without it, and a button that goes
+ * nowhere is worse than text.
+ */
+
+const backup = (location: string) => ({
+  metadata: { name: 'nightly', namespace: 'velero' },
+  spec: { storageLocation: location },
+  status: { phase: 'Completed' },
+})
+
+const restore = {
+  metadata: { name: 'recovery', namespace: 'velero' },
+  spec: { backupName: 'nightly' },
+  status: { phase: 'Completed' },
+}
+
+describe('a backup that blames its storage location', () => {
+  it('lets the reader get to the location', () => {
+    const html = renderToString(
+      <VeleroBackupRenderer
+        data={backup('dr-replica')}
+        storageLocationPhase="Unavailable"
+        onNavigate={vi.fn()}
+      />,
+    )
+    // The name is a control, not a label.
+    expect(html).toMatch(/<button[^>]*>dr-replica<\/button>/)
+  })
+
+  it('renders the location as text when navigation is not wired', () => {
+    const html = renderToString(
+      <VeleroBackupRenderer data={backup('dr-replica')} storageLocationPhase="Unavailable" />,
+    )
+    expect(html).toContain('dr-replica')
+    expect(html).not.toMatch(/<button[^>]*>dr-replica<\/button>/)
+  })
+
+  // The link is the way to the location whether or not it is broken — a healthy
+  // one is still the thing you check when deciding where a backup lives.
+  it('links the location even when it is healthy', () => {
+    const html = renderToString(
+      <VeleroBackupRenderer data={backup('default')} storageLocationPhase="Available" onNavigate={vi.fn()} />,
+    )
+    expect(html).toMatch(/<button[^>]*>default<\/button>/)
+  })
+})
+
+describe('a restore that names its backup', () => {
+  it('lets the reader get to the backup it restored from', () => {
+    const html = renderToString(<VeleroRestoreRenderer data={restore} onNavigate={vi.fn()} />)
+    expect(html).toMatch(/<button[^>]*>nightly<\/button>/)
+  })
+
+  it('renders the backup as text when navigation is not wired', () => {
+    const html = renderToString(<VeleroRestoreRenderer data={restore} />)
+    expect(html).toContain('nightly')
+    expect(html).not.toMatch(/<button[^>]*>nightly<\/button>/)
+  })
+})
+
+/**
+ * The stalled-run issue says a run is "past the 1m Velero allows for one
+ * operation". That budget is spec.itemOperationTimeout, and the Options section
+ * listed every sibling spec option except it — so the page quoted a number whose
+ * source it did not show, next to the place that source belongs.
+ */
+describe('the budget the stall message measures against', () => {
+  it('shows the timeout the message quotes', () => {
+    const html = renderToString(
+      <VeleroBackupRenderer
+        data={{
+          metadata: { name: 'stuck', namespace: 'velero' },
+          spec: { storageLocation: 'default', itemOperationTimeout: '1m0s' },
+          status: { phase: 'InProgress' },
+        }}
+      />,
+    )
+    expect(html).toContain('Item Operation Timeout')
+    expect(html).toContain('1m0s')
+  })
+
+  // Unset is the common case, and it is not "none" — a default applies. But the
+  // number is not ours to print: Velero's built-in four hours can be overridden
+  // on the controller, so a page that renders "4h" would be stating an install
+  // setting it cannot read.
+  it('does not invent a number when the field is unset', () => {
+    const html = renderToString(
+      <VeleroBackupRenderer
+        data={{
+          metadata: { name: 'plain', namespace: 'velero' },
+          spec: { storageLocation: 'default' },
+          status: { phase: 'InProgress' },
+        }}
+      />,
+    )
+    // 'default' is this file's own word for "unset, and something else decides".
+    expect(html).toContain('default')
+    expect(html).not.toContain('4h0m0s')
+  })
+})
+
+/**
+ * Claims the phase does not support.
+ *
+ * The warning banner fired on any run with warnings that was not failed or
+ * partially failed — which includes runs still in flight — and said the run
+ * "completed". A count taken mid-run is not a final count, and saying otherwise
+ * is the same defect as calling a Completed backup restorable.
+ */
+describe('a run that has warnings but has not finished', () => {
+  const withWarnings = (phase: string) => ({
+    metadata: { name: 'w', namespace: 'velero' },
+    spec: { storageLocation: 'default' },
+    status: { phase, warnings: 2 },
+  })
+
+  it('does not say a run in flight completed', () => {
+    const html = renderToString(<VeleroBackupRenderer data={withWarnings('InProgress')} />)
+    expect(html).not.toMatch(/completed, with/)
+    expect(html).toContain('not a final count')
+  })
+
+  it('still says completed when it did', () => {
+    const html = renderToString(<VeleroBackupRenderer data={withWarnings('Completed')} />)
+    expect(html).toContain('completed, with 2 warning(s)')
+    expect(html).not.toContain('not a final count')
+  })
+})