@skyhook-io/k8s-ui 1.10.5 → 1.12.0

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

@@ -0,0 +1,170 @@
+import { ShieldCheck, ShieldAlert, ShieldQuestion } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section } from '../../ui/drawer-components'
+import { SEVERITY_BADGE } from '../../../utils/badge-colors'
+import { isForbiddenError } from '../../../types/fetch-error'
+import type { PolicyResourceResponse, PolicyResourceFinding } from '../../../types/policy'
+
+interface PolicySectionProps {
+  data: PolicyResourceResponse | null
+  loading?: boolean
+  error?: Error | null
+}
+
+const TITLE = 'Policy'
+
+// Result → badge tone. `error` means the engine could not evaluate the rule,
+// which is not the same as the rule failing, so it does not share fail's red.
+function resultTone(result: string): { badge: string; label: string } {
+  switch (result.toLowerCase()) {
+    case 'fail':
+      return { badge: SEVERITY_BADGE.error, label: 'Fail' }
+    case 'warn':
+      return { badge: SEVERITY_BADGE.warning, label: 'Warn' }
+    case 'error':
+      return { badge: SEVERITY_BADGE.alert, label: 'Error' }
+    case 'skip':
+      return { badge: SEVERITY_BADGE.neutral, label: 'Skipped' }
+    default:
+      return { badge: SEVERITY_BADGE.neutral, label: result }
+  }
+}
+
+/**
+ * PolicySection reports what the cluster's policy engine says about this one
+ * resource.
+ *
+ * The unhappy paths carry the weight here. An empty finding list means one of
+ * several unrelated things, and rendering them all as blank space would tell an
+ * operator they are compliant in the cases where nothing was actually checked —
+ * the failure mode this section exists to avoid. Each state therefore says which
+ * one it is, in its own words, and the red treatment is reserved for genuine
+ * faults. Same division the RBAC sections already draw.
+ */
+export function PolicySection({ data, loading, error }: PolicySectionProps) {
+  if (loading) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">Loading policy results…</div>
+      </Section>
+    )
+  }
+
+  if (error) {
+    // A denial is an expected state on a namespace-scoped account, not a fault.
+    if (isForbiddenError(error)) {
+      return (
+        <Section title={TITLE} icon={ShieldQuestion}>
+          <div className="text-sm text-theme-text-tertiary">
+            You don’t have permission to view policy results in this namespace.
+          </div>
+        </Section>
+      )
+    }
+    return (
+      <Section title={TITLE} icon={ShieldAlert}>
+        <div className="text-sm text-red-400">{`Could not load policy results: ${error.message}`}</div>
+      </Section>
+    )
+  }
+
+  // No engine installed — the section is genuinely not applicable, so it is
+  // absent rather than showing a reassuring "nothing to report". A disclaimer on
+  // every cluster without a policy engine would be noise.
+  if (!data || data.status === 'not_installed') return null
+
+  if (!data.evaluated) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">
+          {(data.status === 'warmup'
+            ? 'Policy results are still loading from the cluster.'
+            : 'Policy results are unavailable, so this resource has not been checked.') +
+            (data.reasonCode ? ` (${data.reasonCode})` : '')}
+        </div>
+      </Section>
+    )
+  }
+
+  const { counts, findings } = data
+  const checked = counts.pass + counts.fail + counts.warn + counts.error + counts.skip
+
+  // Evaluated, but no policy selected this resource at all. Distinct from
+  // "passing everything": nothing examined it, so there is nothing to pass.
+  if (checked === 0) {
+    return (
+      <Section title={TITLE} icon={ShieldQuestion}>
+        <div className="text-sm text-theme-text-tertiary">
+          No policy applies to this resource.
+        </div>
+        <PartialCoverageNote data={data} />
+      </Section>
+    )
+  }
+
+  const failing = findings.length
+
+  return (
+    <Section
+      title={TITLE}
+      icon={failing > 0 ? ShieldAlert : ShieldCheck}
+      defaultExpanded={failing > 0}
+    >
+      {failing === 0 ? (
+        <div className="text-sm text-theme-text-secondary">
+          {`All ${counts.pass} ${counts.pass === 1 ? 'check' : 'checks'} passing.`}
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {findings.map((f, i) => (
+            <PolicyFindingRow key={`${f.policy}/${f.rule}/${i}`} finding={f} />
+          ))}
+          {counts.pass > 0 && (
+            <div className="text-xs text-theme-text-tertiary pt-1">
+              {`${counts.pass} other ${counts.pass === 1 ? 'check' : 'checks'} passing`}
+            </div>
+          )}
+        </div>
+      )}
+      <PartialCoverageNote data={data} />
+    </Section>
+  )
+}
+
+function PolicyFindingRow({ finding }: { finding: PolicyResourceFinding }) {
+  const tone = resultTone(finding.result)
+  return (
+    <div className="flex items-start gap-2 min-w-0">
+      <span className={clsx('badge shrink-0', tone.badge)}>{tone.label}</span>
+      <div className="min-w-0">
+        <div className="text-sm text-theme-text-primary truncate" title={finding.policy}>
+          {finding.policy}
+          {finding.rule && finding.rule !== finding.policy && (
+            <span className="text-theme-text-tertiary"> · {finding.rule}</span>
+          )}
+        </div>
+        {finding.message && (
+          <div className="text-xs text-theme-text-secondary">{finding.message}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * A result can be real and incomplete at the same time: some report families
+ * may be unreadable by this identity, or the index may be frozen. Saying
+ * "all checks passing" without mentioning that claims coverage we do not have.
+ */
+function PartialCoverageNote({ data }: { data: PolicyResourceResponse }) {
+  const denied = data.deniedGroups ?? []
+  if (denied.length === 0 && data.liveUpdates) return null
+  return (
+    <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-tertiary">
+      {denied.length > 0 && (
+        <div>{`Some policy results could not be read (${denied.join(', ')}), so this list may be incomplete.`}</div>
+      )}
+      {!data.liveUpdates && <div>These results are not updating live.</div>}
+    </div>
+  )
+}

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/WorkloadRenderer.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
+import { PolicySection } from './PolicySection'
+import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
@@ -40,6 +42,14 @@ interface WorkloadRendererProps {
   rbacData?: RBACSubjectResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /**
+   * Policy findings for this workload. Undefined means the host didn't wire the
+   * fetch, so the section is omitted entirely — consumers that skip it get the
+   * original sections and nothing breaks.
+   */
+  policyData?: PolicyResourceResponse | null
+  policyLoading?: boolean
+  policyError?: Error | null
 }
 
 // Check if the workload is actively progressing (scaling, rolling update)
@@ -140,7 +150,7 @@ function compactHPASummary(diagnosis: HPADiagnosis): string {
   return diagnosis.summary
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -372,6 +382,10 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
         </div>
       </DialogPortal>
 
+      {policyData !== undefined && (
+        <PolicySection data={policyData} loading={policyLoading} error={policyError} />
+      )}
+
       <Section title="Strategy">
         <PropertyList>
           {isDaemonSet || isStatefulSet ? (

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'
@@ -156,3 +160,4 @@ export * from './ResourceSliceRenderer'
 export * from './nvidia-cells'
 export * from './NvidiaClusterPolicyRenderer'
 export * from './NvidiaDriverRenderer'
+export { PolicySection } from './PolicySection'

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

@@ -2,6 +2,7 @@
 
 import { clsx } from 'clsx'
 import {
+  getPolicyReportScope,
   getPolicyReportStatus,
   getPolicyReportSummary,
   getKyvernoPolicyStatus,
@@ -19,6 +20,14 @@ export function PolicyReportCell({ resource, column }: { resource: any; column:
         </span>
       )
     }
+    // Kyverno names a per-resource report after the subject's UID, so the Name
+    // column reads as a bare UUID. Without the subject the whole table is
+    // unidentifiable rows with counts beside them — you cannot tell which of
+    // your workloads a failing report belongs to without opening every one.
+    case 'scope': {
+      const scope = getPolicyReportScope(resource)
+      return <span className="truncate text-theme-text-primary" title={scope}>{scope}</span>
+    }
     case 'pass': {
       const summary = getPolicyReportSummary(resource)
       return <span className={clsx('text-sm', summary.pass > 0 ? 'text-green-400' : 'text-theme-text-tertiary')}>{summary.pass}</span>