@skyhook-io/k8s-ui 1.10.4 → 1.11.0

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

@@ -0,0 +1,212 @@
+// Shared building blocks for the modern Kyverno CEL policy family
+// (policies.kyverno.io). Each of the five policy kinds gets its own thin
+// renderer; everything they genuinely have in common lives here so the
+// enforcement-posture answer can't drift between them.
+
+import { Shield, Filter, Code, AlertTriangle } from 'lucide-react'
+import { Section, PropertyList, Property, LabelSelectorDisplay, AlertBanner } from '../../ui/drawer-components'
+import {
+  formatKyvernoResourceRule,
+  getKyvernoEnforcementPosture,
+  getKyvernoExcludeResourceRules,
+  getKyvernoFailurePolicy,
+  getKyvernoMatchConditions,
+  getKyvernoNamespaceSelector,
+  getKyvernoObjectSelector,
+  getKyvernoPolicyReady,
+  getKyvernoPolicyStatusMessage,
+  getKyvernoResourceRules,
+  getKyvernoVariables,
+  isKyvernoAdmissionEnabled,
+  isKyvernoBackgroundEnabled,
+  type KyvernoNamedExpression,
+  type KyvernoPolicyFamily,
+} from '../resource-utils-kyverno-modern'
+
+const POSTURE_TONE: Record<string, string> = {
+  healthy: 'status-healthy',
+  degraded: 'status-degraded',
+  alert: 'status-alert',
+  unhealthy: 'status-unhealthy',
+  neutral: 'status-neutral',
+  unknown: 'status-unknown',
+}
+
+/**
+ * The answer to the operator's first question — "does this block, and what
+ * does it match?" — rendered above everything else.
+ *
+ * It states the EFFECTIVE posture, not the declared one. A policy declaring
+ * `validationActions: [Deny]` with admission evaluation disabled blocks
+ * nothing, and showing it as a red "Deny" badge would report a cluster as
+ * protected when it isn't.
+ */
+export function KyvernoPostureHeader({
+  data,
+  family,
+}: {
+  data: any
+  family: KyvernoPolicyFamily | undefined
+}) {
+  const posture = getKyvernoEnforcementPosture(data, family)
+  const ready = getKyvernoPolicyReady(data)
+  const statusMessage = getKyvernoPolicyStatusMessage(data)
+  const rules = getKyvernoResourceRules(data)
+
+  return (
+    <div className="space-y-2">
+      {/* A policy that failed to compile enforces nothing whatever its spec
+          says — the most common "why isn't my policy working" cause, so it
+          outranks the posture badge. */}
+      {ready === false && (
+        <AlertBanner
+          variant="error"
+          icon={AlertTriangle}
+          title="Policy not ready"
+          message={
+            statusMessage ||
+            'The controller has not accepted this policy. It is not being enforced — check the CEL expressions for compile errors.'
+          }
+        />
+      )}
+
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Enforcement</span>
+          <span className={`badge ${POSTURE_TONE[posture.level] || 'status-unknown'}`}>{posture.label}</span>
+          {posture.summary && <span className="text-xs text-theme-text-secondary">{posture.summary}</span>}
+        </div>
+
+        {posture.note && <div className="mt-2 text-xs text-theme-text-secondary">{posture.note}</div>}
+
+        {rules.length > 0 && (
+          <div className="mt-3">
+            <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Applies to</div>
+            <div className="space-y-1">
+              {rules.map((rule, i) => (
+                <div key={i} className="text-xs font-mono text-theme-text-primary break-all">
+                  {formatKyvernoResourceRule(rule)}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Match scope beyond the headline resourceRules — exclusions and selectors.
+ * The header already shows what the policy applies to; this section is the
+ * detail an operator opens when the headline doesn't explain why a given
+ * resource was or wasn't caught.
+ */
+export function KyvernoMatchScopeSection({ data }: { data: any }) {
+  const excludeRules = getKyvernoExcludeResourceRules(data)
+  const namespaceSelector = getKyvernoNamespaceSelector(data)
+  const objectSelector = getKyvernoObjectSelector(data)
+  const matchConditions = getKyvernoMatchConditions(data)
+
+  const hasSelectors =
+    (namespaceSelector && Object.keys(namespaceSelector).length > 0) ||
+    (objectSelector && Object.keys(objectSelector).length > 0)
+
+  if (excludeRules.length === 0 && !hasSelectors && matchConditions.length === 0) return null
+
+  return (
+    <Section title="Match Scope" icon={Filter}>
+      <PropertyList>
+        {namespaceSelector && Object.keys(namespaceSelector).length > 0 && (
+          <Property label="Namespace Selector" value={<LabelSelectorDisplay selector={namespaceSelector} inline />} />
+        )}
+        {objectSelector && Object.keys(objectSelector).length > 0 && (
+          <Property label="Object Selector" value={<LabelSelectorDisplay selector={objectSelector} inline />} />
+        )}
+      </PropertyList>
+
+      {excludeRules.length > 0 && (
+        <div className="mt-3">
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Excluded</div>
+          <div className="space-y-1">
+            {excludeRules.map((rule, i) => (
+              <div key={i} className="text-xs font-mono text-theme-text-secondary break-all">
+                {formatKyvernoResourceRule(rule)}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {matchConditions.length > 0 && (
+        <div className="mt-3">
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">
+            Match Conditions ({matchConditions.length})
+          </div>
+          <KyvernoExpressionList items={matchConditions} />
+        </div>
+      )}
+    </Section>
+  )
+}
+
+/** A list of named CEL expressions in a mono block. */
+export function KyvernoExpressionList({ items }: { items: KyvernoNamedExpression[] }) {
+  if (items.length === 0) return null
+  return (
+    <div className="space-y-2">
+      {items.map((item, i) => (
+        <div key={i} className="card-inner">
+          {item.name && <div className="text-xs font-medium text-theme-text-primary mb-1">{item.name}</div>}
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {item.expression}
+          </pre>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KyvernoVariablesSection({ data }: { data: any }) {
+  const variables = getKyvernoVariables(data)
+  if (variables.length === 0) return null
+  return (
+    <Section title={`Variables (${variables.length})`} icon={Code} defaultExpanded={false}>
+      <KyvernoExpressionList items={variables} />
+    </Section>
+  )
+}
+
+/**
+ * The evaluation/webhook knobs shared by the four admission-shaped kinds.
+ * DeletingPolicy has none of these — it is scheduled, not admission-driven —
+ * and deliberately does not render this section.
+ */
+export function KyvernoEvaluationSection({ data }: { data: any }) {
+  const failurePolicy = getKyvernoFailurePolicy(data)
+  return (
+    <Section title="Evaluation" icon={Shield} defaultExpanded={false}>
+      <PropertyList>
+        <Property label="Admission" value={isKyvernoAdmissionEnabled(data) ? 'Enabled' : 'Disabled'} />
+        <Property label="Background Scans" value={isKyvernoBackgroundEnabled(data) ? 'Enabled' : 'Disabled'} />
+        {failurePolicy && (
+          <Property
+            label="Failure Policy"
+            value={
+              <span className="flex items-center gap-2">
+                <span className={`badge ${failurePolicy === 'Ignore' ? 'status-degraded' : 'status-neutral'}`}>
+                  {failurePolicy}
+                </span>
+                <span className="text-xs text-theme-text-tertiary">
+                  {failurePolicy === 'Ignore'
+                    ? 'requests are admitted when the engine itself errors'
+                    : 'requests are rejected when the engine itself errors'}
+                </span>
+              </span>
+            }
+          />
+        )}
+      </PropertyList>
+    </Section>
+  )
+}

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

@@ -1,5 +1,4 @@
 import { HardDrive, Clock } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
 import {
   getBSLStatus,
@@ -12,6 +11,7 @@ import {
   getBSLLastValidation,
   getBSLLastSynced,
 } from '../resource-utils-velero'
+import { VeleroPhaseValue } from './velero-cells'
 
 interface VeleroBSLRendererProps {
   data: any
@@ -29,9 +29,7 @@ export function VeleroBSLRenderer({ data }: VeleroBSLRendererProps) {
       <Section title="Status" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('badge', bslStatus.color)}>
-              {bslStatus.text}
-            </span>
+            <VeleroPhaseValue status={bslStatus} phase={status.phase || ''} />
           } />
           <Property label="Last Validation" value={getBSLLastValidation(data)} />
           <Property label="Last Synced" value={getBSLLastSynced(data)} />

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

@@ -1,5 +1,4 @@
 import { Archive, Clock, HardDrive, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import {
   getBackupStatus,
@@ -18,7 +17,11 @@ import {
   getBackupSnapshotVolumes,
   getBackupDefaultVolumesToFsBackup,
   getBackupVolumeSnapshotLocations,
+  getBackupQueuePosition,
+  isBackupActivePhase,
+  isBackupPartialFailurePhase,
 } from '../resource-utils-velero'
+import { VeleroPhaseValue } from './velero-cells'
 import { formatAge } from '../resource-utils'
 
 interface VeleroBackupRendererProps {
@@ -39,9 +42,12 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
   const excludedResources = getBackupExcludedResources(data)
   const vslLocations = getBackupVolumeSnapshotLocations(data)
 
+  const phase = status.phase || ''
   const isFailed = backupStatus.level === 'unhealthy'
-  const isPartiallyFailed = backupStatus.text === 'PartiallyFailed'
-  const isInProgress = backupStatus.text === 'InProgress' || backupStatus.text === 'Uploading'
+  const isValidationFailure = phase === 'FailedValidation'
+  const isPartiallyFailed = isBackupPartialFailurePhase(phase)
+  const isInProgress = isBackupActivePhase(phase)
+  const queuePosition = getBackupQueuePosition(data)
 
   // Progress data
   const progress = status.progress
@@ -52,15 +58,31 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
   return (
     <>
       {/* Problem alerts */}
-      {(isFailed || isPartiallyFailed) && (
+      {isValidationFailure && (
         <AlertBanner
           variant="error"
-          title={isFailed ? 'Backup Failed' : 'Backup Partially Failed'}
+          title="Backup Validation Failed"
+          message={status.failureReason || 'Velero rejected this backup before it started — nothing was backed up.'}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
+        />
+      )}
+      {isFailed && !isValidationFailure && (
+        <AlertBanner
+          variant="error"
+          title="Backup Failed"
           message={status.failureReason || `${errors} error(s) occurred during backup.`}
           items={validationErrors.length > 0 ? validationErrors : undefined}
         />
       )}
-      {warnings > 0 && !isFailed && (
+      {isPartiallyFailed && (
+        <AlertBanner
+          variant="warning"
+          title="Backup Partially Failed"
+          message={status.failureReason || `${errors} error(s) occurred — some items were not backed up. Do not assume this backup is complete.`}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
+        />
+      )}
+      {warnings > 0 && !isFailed && !isPartiallyFailed && (
         <AlertBanner
           variant="warning"
           title={`${warnings} Warning(s)`}
@@ -72,10 +94,11 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
       <Section title="Status" icon={Archive} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('badge', backupStatus.color)}>
-              {backupStatus.text}
-            </span>
+            <VeleroPhaseValue status={backupStatus} phase={phase} />
           } />
+          {queuePosition !== null && (
+            <Property label="Queue Position" value={String(queuePosition)} />
+          )}
           {status.startTimestamp && (
             <Property label="Started" value={formatAge(status.startTimestamp) + ' ago'} />
           )}

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

@@ -1,5 +1,4 @@
 import { ArchiveRestore, Filter } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import {
   getRestoreStatus,
@@ -13,7 +12,11 @@ import {
   getRestoreWarnings,
   getRestorePVs,
   getRestoreExistingResourcePolicy,
+  getRestoreValidationErrors,
+  isBackupActivePhase,
+  isBackupPartialFailurePhase,
 } from '../resource-utils-velero'
+import { VeleroPhaseValue } from './velero-cells'
 import { formatAge } from '../resource-utils'
 
 interface VeleroRestoreRendererProps {
@@ -32,9 +35,12 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
   const includedResources = getRestoreIncludedResources(data)
   const excludedResources = getRestoreExcludedResources(data)
 
+  const phase = status.phase || ''
+  const validationErrors = getRestoreValidationErrors(data)
   const isFailed = restoreStatus.level === 'unhealthy'
-  const isPartiallyFailed = restoreStatus.text === 'PartiallyFailed'
-  const isInProgress = restoreStatus.text === 'InProgress'
+  const isValidationFailure = phase === 'FailedValidation'
+  const isPartiallyFailed = isBackupPartialFailurePhase(phase)
+  const isInProgress = isBackupActivePhase(phase)
 
   // Progress data
   const progress = status.progress
@@ -45,14 +51,31 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
   return (
     <>
       {/* Problem alerts */}
-      {(isFailed || isPartiallyFailed) && (
+      {isValidationFailure && (
         <AlertBanner
           variant="error"
-          title={isFailed ? 'Restore Failed' : 'Restore Partially Failed'}
+          title="Restore Validation Failed"
+          message={status.failureReason || 'Velero rejected this restore before it started — nothing was restored.'}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
+        />
+      )}
+      {isFailed && !isValidationFailure && (
+        <AlertBanner
+          variant="error"
+          title="Restore Failed"
           message={status.failureReason || `${errors} error(s) occurred during restore.`}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
+        />
+      )}
+      {isPartiallyFailed && (
+        <AlertBanner
+          variant="warning"
+          title="Restore Partially Failed"
+          message={status.failureReason || `${errors} error(s) occurred — some items were not restored.`}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
         />
       )}
-      {warnings > 0 && !isFailed && (
+      {warnings > 0 && !isFailed && !isPartiallyFailed && (
         <AlertBanner
           variant="warning"
           title={`${warnings} Warning(s)`}
@@ -64,9 +87,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
       <Section title="Status" icon={ArchiveRestore} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('badge', restoreStatus.color)}>
-              {restoreStatus.text}
-            </span>
+            <VeleroPhaseValue status={restoreStatus} phase={phase} />
           } />
           <Property label="Backup" value={getRestoreBackupName(data)} />
           {status.startTimestamp && (

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

@@ -1,5 +1,4 @@
 import { Clock, Archive } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import {
   getScheduleStatus,
@@ -8,7 +7,9 @@ import {
   getSchedulePaused,
   getScheduleTemplate,
   getScheduleUseOwnerReferences,
+  getScheduleValidationErrors,
 } from '../resource-utils-velero'
+import { VeleroPhaseValue } from './velero-cells'
 
 interface VeleroScheduleRendererProps {
   data: any
@@ -21,6 +22,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
   const scheduleStatus = getScheduleStatus(data)
   const isPaused = getSchedulePaused(data)
   const template = getScheduleTemplate(data)
+  const validationErrors = getScheduleValidationErrors(data)
 
   const templateIncludedNs = template.includedNamespaces || []
   const templateExcludedNs = template.excludedNamespaces || []
@@ -37,11 +39,17 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
           message="This backup schedule is currently paused. No new backups will be created."
         />
       )}
-      {scheduleStatus.text === 'FailedValidation' && (
+      {/* Gated on the errors themselves, not on the badge: a paused schedule
+          badges as "Paused", which would otherwise hide the validation errors
+          the user needs to fix before resuming. */}
+      {(validationErrors.length > 0 || status.phase === 'FailedValidation') && (
         <AlertBanner
           variant="error"
           title="Validation Failed"
-          message="The schedule spec failed validation and is not active."
+          message={isPaused
+            ? 'The schedule spec failed validation. It will not create backups when resumed until this is fixed.'
+            : 'The schedule spec failed validation and is not active — no backups are being created.'}
+          items={validationErrors.length > 0 ? validationErrors : undefined}
         />
       )}
 
@@ -49,9 +57,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('badge', scheduleStatus.color)}>
-              {scheduleStatus.text}
-            </span>
+            <VeleroPhaseValue status={scheduleStatus} phase={status.phase || ''} />
           } />
           <Property label="Cron Schedule" value={
             <span className="font-mono text-sm">{getScheduleCron(data)}</span>

package/src/components/resources/renderers/badge-no-handrolled.test.tsx

@@ -23,7 +23,7 @@ const BASELINE = new Set<string>([
   'AlertRenderer.tsx', 'ArgoApplicationRenderer.tsx', 'CertificateRenderer.tsx',
   'CertificateRequestRenderer.tsx', 'ChallengeRenderer.tsx', 'CiliumNetworkPolicyRenderer.tsx',
   'ClusterExternalSecretRenderer.tsx', 'ClusterIssuerRenderer.tsx', 'ClusterNetworkPolicyRenderer.tsx',
-  'cnpg-cells.tsx', 'CNPGClusterRenderer.tsx', 'EventRenderer.tsx', 'GatewayRenderer.tsx',
+  'cnpg-cells.tsx', 'CNPGClusterRenderer.tsx', 'GatewayRenderer.tsx',
   'GenericRenderer.tsx', 'IngressClassRenderer.tsx', 'IstioPeerAuthenticationRenderer.tsx',
   'IstioServiceEntryRenderer.tsx', 'KarpenterNodeClaimRenderer.tsx', 'knative-cells.tsx',
   'KnativeEventingRenderer.tsx', 'KnativeRevisionRenderer.tsx', 'kyverno-cells.tsx',

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

@@ -1,8 +1,10 @@
 // CloudNativePG cell components for ResourcesView table
 
 import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
 import {
   getCNPGClusterStatus,
+  classifyCNPGClusterPhase,
   getCNPGClusterInstances,
   getCNPGClusterPrimary,
   getCNPGClusterImageTag,
@@ -11,6 +13,7 @@ import {
   getCNPGBackupCluster,
   getCNPGBackupMethod,
   getCNPGBackupDuration,
+  getCNPGBackupStartedAt,
   getCNPGScheduledBackupStatus,
   getCNPGScheduledBackupCluster,
   getCNPGScheduleCron,
@@ -23,6 +26,11 @@ import {
   getCNPGPoolerInstances,
 } from '../resource-utils-cnpg'
 
+/** Terminal = the operator has stopped reconciling; neighbouring cells are stale. */
+function isTerminalPhase(resource: any): boolean {
+  return classifyCNPGClusterPhase(resource?.status?.phase || '') === 'terminal'
+}
+
 export function CNPGClusterCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'status': {
@@ -36,15 +44,38 @@ export function CNPGClusterCell({ resource, column }: { resource: any; column: s
     case 'instances': {
       const instances = getCNPGClusterInstances(resource)
       const desired = resource.spec?.instances ?? 0
-      const ready = resource.status?.readyInstances ?? 0
+      const readyKnown = typeof resource.status?.readyInstances === 'number'
+      const ready = readyKnown ? resource.status.readyInstances : 0
+      // A terminal cluster still reports a ready count, and the count is true —
+      // unrecoverable at 2/2 means the data is probably intact, at 0/2 it is down
+      // too. That distinction is worth keeping, so the cell is muted rather than
+      // hidden. Muting alone reads as "less important"; the tooltip is what says
+      // "this does not mean what you think".
+      if (isTerminalPhase(resource)) {
+        return (
+          <Tooltip content="Reconciliation has stopped — this count reflects the pods still running, not a working cluster.">
+            <span className="text-sm text-theme-text-tertiary">{instances}</span>
+          </Tooltip>
+        )
+      }
       return (
-        <span className={clsx('text-sm', ready < desired ? 'text-yellow-400' : 'text-theme-text-secondary')}>
+        <span className={clsx('text-sm', readyKnown && ready < desired ? 'text-yellow-400' : 'text-theme-text-secondary')}>
           {instances}
         </span>
       )
     }
     case 'primary': {
       const primary = getCNPGClusterPrimary(resource)
+      // status.currentPrimary is LAST KNOWN — CNPG never clears it. Naming a
+      // primary on a cluster that cannot elect one is an assertion Radar makes,
+      // not one CNPG makes, so say so rather than presenting it as current.
+      if (isTerminalPhase(resource)) {
+        return (
+          <Tooltip content="Last known primary — this cluster cannot currently elect one.">
+            <span className="text-sm text-theme-text-tertiary truncate block">{primary}</span>
+          </Tooltip>
+        )
+      }
       return <span className="text-sm text-theme-text-secondary truncate block">{primary}</span>
     }
     case 'image': {
@@ -78,6 +109,10 @@ export function CNPGBackupCell({ resource, column }: { resource: any; column: st
       const method = getCNPGBackupMethod(resource)
       return <span className="text-sm text-theme-text-secondary">{method}</span>
     }
+    case 'started': {
+      const started = getCNPGBackupStartedAt(resource)
+      return <span className="text-sm text-theme-text-secondary">{started}</span>
+    }
     case 'duration': {
       const duration = getCNPGBackupDuration(resource)
       return <span className="text-sm text-theme-text-secondary">{duration}</span>

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

@@ -68,7 +68,11 @@ export * from './KnativeServiceRenderer'
 export * from './KnativeSourceRenderer'
 export * from './KustomizationRenderer'
 export * from './kyverno-cells'
+export * from './kyverno-modern-cells'
 export * from './KyvernoPolicyReportRenderer'
+export * from './KyvernoPolicyShared'
+export * from './KyvernoCELPolicyRenderers'
+export * from './KyvernoExceptionRenderers'
 export * from './LeaseRenderer'
 export * from './NetworkPolicyRenderer'
 export * from './NetworkPolicyDiagram'