@skyhook-io/k8s-ui 1.7.11 → 1.7.13

package/src/components/resources/resource-utils-dra.ts

@@ -0,0 +1,90 @@
+// DRA (Dynamic Resource Allocation, resource.k8s.io) utility functions.
+// Accessors tolerate all served shapes: v1/v1beta2 nest device-class refs
+// under requests[].exactly (or firstAvailable subrequests); v1beta1 had
+// deviceClassName directly on the request.
+
+import type { StatusBadge } from './resource-utils'
+import { healthColors } from './resource-utils'
+
+function requestDeviceClasses(requests: any[]): string[] {
+  const seen = new Set<string>()
+  for (const req of requests || []) {
+    const direct = req?.exactly?.deviceClassName || req?.deviceClassName
+    if (direct) seen.add(direct)
+    for (const sub of req?.firstAvailable || []) {
+      if (sub?.deviceClassName) seen.add(sub.deviceClassName)
+    }
+  }
+  return [...seen]
+}
+
+export function getResourceClaimDeviceClasses(resource: any): string[] {
+  return requestDeviceClasses(resource?.spec?.devices?.requests)
+}
+
+export function getResourceClaimTemplateDeviceClasses(resource: any): string[] {
+  return requestDeviceClasses(resource?.spec?.spec?.devices?.requests)
+}
+
+export function getResourceClaimAllocation(resource: any): { driver: string; pool: string; device: string }[] {
+  const results = resource?.status?.allocation?.devices?.results || []
+  return results.map((r: any) => ({
+    driver: r?.driver || '',
+    pool: r?.pool || '',
+    device: r?.device || '',
+  }))
+}
+
+export function getResourceClaimReservedFor(resource: any): { resource: string; name: string }[] {
+  return (resource?.status?.reservedFor || []).map((r: any) => ({
+    resource: r?.resource || r?.apiGroup || '',
+    name: r?.name || '',
+  }))
+}
+
+export function getResourceClaimStatus(resource: any): StatusBadge {
+  // Allocated means devices were actually assigned — keyed to devices.results
+  // so the badge always agrees with the Allocation section.
+  const allocated = (resource?.status?.allocation?.devices?.results || []).length > 0
+  const reserved = (resource?.status?.reservedFor || []).length > 0
+  if (allocated && reserved) {
+    return { text: 'Allocated', color: healthColors.healthy, level: 'healthy' }
+  }
+  if (allocated) {
+    // Allocated-but-unreserved is normal transiently; long-lived it leaks a device
+    return { text: 'Unreserved', color: healthColors.degraded, level: 'degraded' }
+  }
+  return { text: 'Pending', color: healthColors.unknown, level: 'unknown' }
+}
+
+export function getResourceClaimTemplateStatus(_resource: any): StatusBadge {
+  return { text: 'Template', color: healthColors.neutral, level: 'neutral' }
+}
+
+export function getDeviceClassStatus(_resource: any): StatusBadge {
+  return { text: 'Available', color: healthColors.neutral, level: 'neutral' }
+}
+
+export function getDeviceClassSelectorCount(resource: any): number {
+  return (resource?.spec?.selectors || []).length
+}
+
+export function getResourceSliceStatus(_resource: any): StatusBadge {
+  return { text: 'Published', color: healthColors.neutral, level: 'neutral' }
+}
+
+export function getResourceSliceDriver(resource: any): string {
+  return resource?.spec?.driver || '-'
+}
+
+export function getResourceSlicePool(resource: any): string {
+  return resource?.spec?.pool?.name || '-'
+}
+
+export function getResourceSliceNode(resource: any): string {
+  return resource?.spec?.nodeName || ''
+}
+
+export function getResourceSliceDeviceCount(resource: any): number {
+  return (resource?.spec?.devices || []).length
+}

package/src/components/resources/resource-utils-nvidia.ts

@@ -0,0 +1,63 @@
+// NVIDIA GPU Operator (nvidia.com) utility functions.
+// ClusterPolicy here is nvidia.com's — distinct from Kyverno's ClusterPolicy;
+// dispatch call sites guard on apiVersion before reaching these.
+
+import type { StatusBadge } from './resource-utils'
+import { healthColors } from './resource-utils'
+
+function stateBadge(state: string | undefined): StatusBadge {
+  switch (state) {
+    case 'ready':
+      return { text: 'Ready', color: healthColors.healthy, level: 'healthy' }
+    case 'notReady':
+      return { text: 'Not Ready', color: healthColors.alert, level: 'alert' }
+    case 'disabled':
+      return { text: 'Disabled', color: healthColors.neutral, level: 'neutral' }
+    default:
+      return { text: state || 'Unknown', color: healthColors.unknown, level: 'unknown' }
+  }
+}
+
+export function getNvidiaClusterPolicyStatus(resource: any): StatusBadge {
+  return stateBadge(resource?.status?.state)
+}
+
+export const NVIDIA_CLUSTER_POLICY_COMPONENTS = [
+  { key: 'driver', label: 'Driver' },
+  { key: 'toolkit', label: 'Container Toolkit' },
+  { key: 'devicePlugin', label: 'Device Plugin' },
+  { key: 'dcgmExporter', label: 'DCGM Exporter' },
+  { key: 'dcgm', label: 'DCGM' },
+  { key: 'gfd', label: 'GPU Feature Discovery' },
+  { key: 'migManager', label: 'MIG Manager' },
+  { key: 'nodeStatusExporter', label: 'Node Status Exporter' },
+  { key: 'vgpuManager', label: 'vGPU Manager' },
+  { key: 'gds', label: 'GPUDirect Storage' },
+] as const
+
+export function getNvidiaClusterPolicyEnabledComponents(resource: any): { label: string; enabled: boolean }[] {
+  const spec = resource?.spec || {}
+  return NVIDIA_CLUSTER_POLICY_COMPONENTS
+    .filter(({ key }) => spec[key]?.enabled !== undefined)
+    .map(({ key, label }) => ({ label, enabled: !!spec[key].enabled }))
+}
+
+export function getNvidiaClusterPolicyMigStrategy(resource: any): string {
+  return resource?.spec?.mig?.strategy || '-'
+}
+
+export function getNvidiaDriverStatus(resource: any): StatusBadge {
+  return stateBadge(resource?.status?.state)
+}
+
+export function getNvidiaDriverType(resource: any): string {
+  return resource?.spec?.driverType || '-'
+}
+
+export function getNvidiaDriverVersion(resource: any): string {
+  return resource?.spec?.version || '-'
+}
+
+export function isNvidiaResource(resource: any): boolean {
+  return !!resource?.apiVersion?.startsWith('nvidia.com/')
+}

package/src/components/resources/resource-utils.ts

@@ -10,6 +10,8 @@ import { getScaledObjectStatus, getScaledJobStatus } from './resource-utils-keda
 import { getGitRepositoryStatus, getOCIRepositoryStatus, getHelmRepositoryStatus, getHelmRepositoryType, getKustomizationStatus, getFluxHelmReleaseStatus, getFluxAlertStatus } from './resource-utils-flux'
 import { getArgoApplicationStatus, getArgoApplicationSetStatus, getArgoApplicationSync, getArgoApplicationHealth, getArgoApplicationProject } from './resource-utils-argo'
 import { getPolicyReportStatus as _getPolicyReportStatus, getKyvernoPolicyStatus as _getKyvernoPolicyStatus } from './resource-utils-kyverno'
+import { getResourceClaimStatus as _getResourceClaimStatus, getResourceClaimDeviceClasses as _getResourceClaimDeviceClasses, getResourceClaimTemplateDeviceClasses as _getResourceClaimTemplateDeviceClasses, getResourceClaimAllocation as _getResourceClaimAllocation, getResourceClaimReservedFor as _getResourceClaimReservedFor } from './resource-utils-dra'
+import { getNvidiaClusterPolicyStatus as _getNvidiaClusterPolicyStatus, getNvidiaClusterPolicyEnabledComponents as _getNvidiaClusterPolicyEnabledComponents, getNvidiaDriverStatus as _getNvidiaDriverStatus } from './resource-utils-nvidia'
 import { getBackupStatus as _getBackupStatus, getRestoreStatus as _getRestoreStatus, getScheduleStatus as _getScheduleStatus, getBSLStatus as _getBSLStatus } from './resource-utils-velero'
 import { getExternalSecretStatus as _getExternalSecretStatus, getClusterExternalSecretStatus as _getClusterExternalSecretStatus, getSecretStoreStatus as _getSecretStoreStatus, getClusterSecretStoreStatus as _getClusterSecretStoreStatus, getSecretStoreProviderType as _getSecretStoreProviderType } from './resource-utils-eso'
 
@@ -418,6 +420,23 @@ export interface ContainerSquareState {
   }
 }
 
+/**
+ * The container to default to for exec / logs on a multi-container pod. Honors
+ * the kubectl.kubernetes.io/default-container annotation (the convention
+ * kubectl, k9s, and Lens follow, and what service meshes like Istio set to
+ * point past their injected sidecar), falling back to the first container.
+ * Without this, mesh-injected pods default to their distroless sidecar — which
+ * has no shell — making the terminal appear broken.
+ */
+export function getDefaultContainerName(pod: any): string | undefined {
+  const containers = pod?.spec?.containers || []
+  const annotated = pod?.metadata?.annotations?.['kubectl.kubernetes.io/default-container']
+  if (annotated && containers.some((c: any) => c.name === annotated)) {
+    return annotated
+  }
+  return containers[0]?.name
+}
+
 export function getContainerSquareStates(pod: any): ContainerSquareState[] {
   const result: ContainerSquareState[] = []
   const initStatuses = pod.status?.initContainerStatuses || []
@@ -1610,6 +1629,10 @@ export function formatResources(resources: any): string {
   if (resources.memory) {
     parts.push(`Mem: ${formatMemoryString(resources.memory)}`)
   }
+  for (const [key, value] of Object.entries(resources)) {
+    if (key === 'cpu' || key === 'memory') continue
+    parts.push(`${key}: ${value}`)
+  }
   return parts.join(', ') || '-'
 }
 
@@ -1631,8 +1654,12 @@ export function parseColumnFilters(filtersParam: string | null): Record<string,
   for (const pair of filtersParam.split('|')) {
     const colonIdx = pair.indexOf(':')
     if (colonIdx > 0) {
-      const key = pair.slice(0, colonIdx).trim()
+      const rawKey = pair.slice(0, colonIdx).trim()
       const valStr = pair.slice(colonIdx + 1).trim()
+      // Keys are URI-encoded so a custom-column key's own colon (e.g.
+      // "label:tier") doesn't collide with the key:value delimiter.
+      let key: string
+      try { key = decodeURIComponent(rawKey) } catch { key = rawKey }
       if (key && valStr) {
         filters[key] = valStr.split(',').map(v => {
           try { return decodeURIComponent(v.trim()) } catch { return v.trim() }
@@ -1643,12 +1670,13 @@ export function parseColumnFilters(filtersParam: string | null): Record<string,
   return filters
 }
 
-// Serialize column filters to URL param format
-// Values are URI-encoded so commas inside values (e.g. "Ready,SchedulingDisabled") survive the round-trip.
+// Serialize column filters to URL param format. Keys and values are both
+// URI-encoded so a colon inside a custom-column key (e.g. "label:tier") or a
+// comma inside a value (e.g. "Ready,SchedulingDisabled") survives the round-trip.
 export function serializeColumnFilters(filters: Record<string, string[]>): string {
   const result = Object.entries(filters)
     .filter(([, v]) => v.length > 0)
-    .map(([k, vals]) => `${k}:${vals.map(v => encodeURIComponent(v)).join(',')}`)
+    .map(([k, vals]) => `${encodeURIComponent(k)}:${vals.map(v => encodeURIComponent(v)).join(',')}`)
     .join('|')
   return result
 }
@@ -1706,6 +1734,9 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
       if (kindLower === 'scaledjobs') return getScaledJobStatus(resource).text
       if (kindLower === 'policyreports' || kindLower === 'clusterpolicyreports') return _getPolicyReportStatus(resource).text
       if (kindLower === 'kyvernopolicies' || kindLower === 'clusterpolicies') return _getKyvernoPolicyStatus(resource).text
+      if (kindLower === 'nvidiaclusterpolicies') return _getNvidiaClusterPolicyStatus(resource).text
+      if (kindLower === 'nvidiadrivers') return _getNvidiaDriverStatus(resource).text
+      if (kindLower === 'resourceclaims') return _getResourceClaimStatus(resource).text
       if (kindLower === 'backups') return _getBackupStatus(resource).text
       if (kindLower === 'restores') return _getRestoreStatus(resource).text
       if (kindLower === 'schedules') return _getScheduleStatus(resource).text
@@ -1766,6 +1797,33 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
     case 'provider':
       if (kindLower === 'secretstores' || kindLower === 'clustersecretstores') return _getSecretStoreProviderType(resource)
       return resource.spec?.provider || ''
+    // DRA + NVIDIA columns. Unmatched kinds break to the generic fallback —
+    // these keys are shared (e.g. 'components' is also a Trivy SBOM column).
+    case 'deviceClass':
+      if (kindLower === 'resourceclaims') return _getResourceClaimDeviceClasses(resource).join(', ')
+      if (kindLower === 'resourceclaimtemplates') return _getResourceClaimTemplateDeviceClasses(resource).join(', ')
+      break
+    case 'allocated':
+      if (kindLower === 'resourceclaims') return _getResourceClaimAllocation(resource).map(r => r.driver).join(', ')
+      break
+    case 'reservedFor':
+      if (kindLower === 'resourceclaims') return _getResourceClaimReservedFor(resource).map(r => r.name).join(', ')
+      break
+    case 'pool':
+      if (kindLower === 'resourceslices') return resource.spec?.pool?.name || ''
+      break
+    case 'devices':
+      if (kindLower === 'resourceslices') return String((resource.spec?.devices || []).length)
+      break
+    case 'selectors':
+      if (kindLower === 'deviceclasses') return String((resource.spec?.selectors || []).length)
+      break
+    case 'components':
+      if (kindLower === 'nvidiaclusterpolicies') return _getNvidiaClusterPolicyEnabledComponents(resource).filter(c => c.enabled).map(c => c.label).join(', ')
+      break
+    case 'mig':
+      if (kindLower === 'nvidiaclusterpolicies') return resource.spec?.mig?.strategy || ''
+      break
   }
 
   // Fallback: try common paths

package/src/components/shared/DetailShell.tsx

@@ -30,6 +30,8 @@ export interface DetailShellProps<TId extends string = string> {
   onTabChange: (id: TId) => void
   tabStripEnd?: ReactNode
   overlay?: ReactNode
+  /** Hide breadcrumb/identity/header actions when a host page already owns that chrome. */
+  compactHeader?: boolean
   children: ReactNode
 }
 
@@ -44,6 +46,7 @@ export function DetailShell<TId extends string = string>({
   onTabChange,
   tabStripEnd,
   overlay,
+  compactHeader = false,
   children,
 }: DetailShellProps<TId>) {
   const visibleTabs = tabs.filter((t) => !t.hidden)
@@ -52,15 +55,19 @@ export function DetailShell<TId extends string = string>({
     <div className="flex flex-col h-full w-full bg-theme-surface">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface">
-        {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-        <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
-          {nav}
-          <div className="flex-1 min-w-0">{identity}</div>
-          {headerActions}
-        </div>
+        {!compactHeader && (
+          <>
+            {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
+            <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+              {nav}
+              <div className="flex-1 min-w-0">{identity}</div>
+              {headerActions}
+            </div>
+          </>
+        )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
-        <div className="px-6 flex items-center border-t border-theme-border">
+        <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
           <div className="flex gap-1" role="tablist">
             {visibleTabs.map((t) => (
               <DetailShellTabButton key={t.id} active={activeTab === t.id} onClick={() => onTabChange(t.id)}>

package/src/components/shared/EditableYamlView.tsx

@@ -66,19 +66,27 @@ function formatSaveError(error: string): { summary: string; details?: string } {
     const errorPart = parts[1]?.trim() || ''
 
     if (errorPart.includes('Forbidden:')) {
-      const forbiddenMatch = errorPart.match(/([^:]+):\s*Forbidden:\s*([^.{]+)/)
-      if (forbiddenMatch) {
+      const forbiddenAt = errorPart.indexOf(': Forbidden:')
+      if (forbiddenAt > 0) {
+        const target = errorPart.slice(0, forbiddenAt).trim()
+        const messageStart = forbiddenAt + ': Forbidden:'.length
+        const dotAt = errorPart.indexOf('.', messageStart)
+        const braceAt = errorPart.indexOf('{', messageStart)
+        const endCandidates = [dotAt, braceAt].filter((i) => i >= 0)
+        const messageEnd = endCandidates.length ? Math.min(...endCandidates) : errorPart.length
+        const message = errorPart.slice(messageStart, messageEnd).trim()
         return {
-          summary: `Cannot update ${forbiddenMatch[1]}: ${forbiddenMatch[2].trim()}`,
+          summary: `Cannot update ${target}: ${message}`,
           details: error.length > 200 ? error : undefined
         }
       }
     }
 
-    const summaryMatch = errorPart.match(/^([^{]+)/)
-    if (summaryMatch) {
+    const braceAt = errorPart.indexOf('{')
+    const summary = (braceAt >= 0 ? errorPart.slice(0, braceAt) : errorPart).trim()
+    if (summary) {
       return {
-        summary: summaryMatch[1].trim(),
+        summary,
         details: error.length > 200 ? error : undefined
       }
     }
@@ -111,6 +119,8 @@ interface EditableYamlViewProps {
   data: any
   onCopy: (text: string) => void
   copied: boolean
+  /** Hide edit affordances when the host surface is read-only. */
+  readOnly?: boolean
   /** Called after a successful save so the parent can refetch */
   onSaved?: () => void
   /** Save handler — injected by the platform wrapper */
@@ -128,13 +138,13 @@ interface EditableYamlViewProps {
   onDownload?: (content: string, mime: string, filename: string) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, readOnly = false, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
   // All sessionStorage calls are wrapped in try-catch — storage can throw
   // QuotaExceededError or be blocked by browser security policies.
-  const savedDraft = useRef(safeSessionGet(draftKey))
+  const savedDraft = useRef(readOnly ? null : safeSessionGet(draftKey))
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -153,12 +163,19 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
 
   // Autosave draft to sessionStorage while editing (best-effort)
   useEffect(() => {
+    if (readOnly) {
+      setIsEditing(false)
+      setEditedYaml('')
+      setYamlErrors([])
+      safeSessionRemove(draftKey)
+      return
+    }
     if (isEditing && editedYaml) {
       safeSessionSet(draftKey, editedYaml)
     } else {
       safeSessionRemove(draftKey)
     }
-  }, [isEditing, editedYaml, draftKey])
+  }, [isEditing, editedYaml, draftKey, readOnly])
 
   const handleDownload = useCallback(() => {
     const yaml = resourceToYaml(data)
@@ -170,10 +187,11 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
   }, [data, resource.kind, resource.name, onDownload])
 
   const handleStartEdit = useCallback(() => {
+    if (readOnly) return
     setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
     setIsEditing(true)
-  }, [data])
+  }, [data, readOnly])
 
   const handleCancelEdit = useCallback(() => {
     setIsEditing(false)
@@ -345,13 +363,15 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium text-theme-text-secondary">YAML</span>
         <div className="flex items-center gap-2">
-          <button
-            onClick={handleStartEdit}
-            className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
-          >
-            <Pencil className="w-3.5 h-3.5" />
-            Edit
-          </button>
+          {!readOnly && (
+            <button
+              onClick={handleStartEdit}
+              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
+            >
+              <Pencil className="w-3.5 h-3.5" />
+              Edit
+            </button>
+          )}
           <button
             onClick={() => onCopy(yamlContent)}
             className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"

package/src/components/shared/ResourceActionsBar.tsx

@@ -24,6 +24,7 @@ import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
 import { formatKindName } from '../ui/drawer-components'
+import { getDefaultContainerName } from '../resources/resource-utils'
 
 // ============================================================================
 // ACTIONS BAR - Interactive buttons that change based on resource kind
@@ -64,7 +65,7 @@ interface ResourceActionsBarProps {
   renderPortForward?: (props: { type: 'pod' | 'service'; namespace: string; name: string; className?: string }) => React.ReactNode
 
   // Delete
-  onDelete?: (params: { kind: string; namespace: string; name: string; force: boolean }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
+  onDelete?: (params: { kind: string; group?: string; namespace: string; name: string; force: boolean }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
   isDeleting?: boolean
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
@@ -165,7 +166,7 @@ export function ResourceActionsBar({
 
   function handleDeleteConfirm(force: boolean) {
     onDelete?.(
-      { kind: resource.kind, namespace: resource.namespace, name: resource.name, force },
+      { kind: resource.kind, group: resource.group, namespace: resource.namespace, name: resource.name, force },
       {
         onSuccess: () => {
           setShowDeleteConfirm(false)
@@ -183,7 +184,7 @@ export function ResourceActionsBar({
       onOpenTerminal?.({
         namespace: resource.namespace,
         podName: resource.name,
-        containerName: containers[0],
+        containerName: getDefaultContainerName(data) || containers[0],
         containers,
       })
     }
@@ -195,7 +196,7 @@ export function ResourceActionsBar({
         namespace: resource.namespace,
         podName: resource.name,
         containers,
-        containerName,
+        containerName: containerName || getDefaultContainerName(data),
       })
     }
   }

package/src/components/shared/ResourceRendererDispatch.test.tsx

@@ -43,3 +43,106 @@ describe('ResourceRendererDispatch', () => {
     expect(html).toContain('none')
   })
 })
+
+function renderKind(kind: string, data: any, namespace = ''): string {
+  return renderToString(
+    <ResourceRendererDispatch
+      resource={{ kind, namespace, name: data?.metadata?.name || 'x' }}
+      data={data}
+      onCopy={() => {}}
+      copied={null}
+      showCommonSections={false}
+    />,
+  )
+}
+
+describe('ClusterPolicy kind collision (nvidia.com vs kyverno.io)', () => {
+  it('routes nvidia.com ClusterPolicy to the GPU Operator renderer', () => {
+    const html = renderKind('clusterpolicies', {
+      apiVersion: 'nvidia.com/v1',
+      kind: 'ClusterPolicy',
+      metadata: { name: 'cluster-policy' },
+      spec: { driver: { enabled: true }, devicePlugin: { enabled: true } },
+      status: { state: 'ready' },
+    })
+    expect(html).toContain('Operator Status')
+    expect(html).not.toContain('Rules')
+  })
+
+  it('routes kyverno.io ClusterPolicy to the Kyverno renderer', () => {
+    const html = renderKind('clusterpolicies', {
+      apiVersion: 'kyverno.io/v1',
+      kind: 'ClusterPolicy',
+      metadata: { name: 'require-labels' },
+      spec: { rules: [{ name: 'check-labels' }] },
+    })
+    expect(html).not.toContain('Operator Status')
+  })
+})
+
+describe('DRA renderers dispatch', () => {
+  it('renders ResourceClaim with allocation sections (not GenericRenderer)', () => {
+    const html = renderKind('resourceclaims', {
+      apiVersion: 'resource.k8s.io/v1',
+      kind: 'ResourceClaim',
+      metadata: { name: 'gpu-claim', namespace: 'ml' },
+      spec: { devices: { requests: [{ name: 'gpu', exactly: { deviceClassName: 'gpu.nvidia.com', count: 1 } }] } },
+      status: {
+        allocation: { devices: { results: [{ request: 'gpu', driver: 'gpu.nvidia.com', pool: 'node-1', device: 'gpu-0' }] } },
+        reservedFor: [{ resource: 'pods', name: 'train-1' }],
+      },
+    }, 'ml')
+    expect(html).toContain('Device Requests')
+    expect(html).toContain('gpu.nvidia.com')
+    expect(html).toContain('Reserved For')
+  })
+
+  it('does not treat an empty allocation block as allocated', () => {
+    const html = renderKind('resourceclaims', {
+      apiVersion: 'resource.k8s.io/v1',
+      kind: 'ResourceClaim',
+      metadata: { name: 'partial-claim', namespace: 'ml' },
+      spec: { devices: { requests: [{ name: 'gpu', exactly: { deviceClassName: 'gpu.example.com' } }] } },
+      status: { allocation: {} },
+    }, 'ml')
+    expect(html).toContain('Not allocated')
+    expect(html).not.toContain('Allocated but unreserved')
+  })
+
+  it('reads v1beta1 request shape (deviceClassName at request level)', () => {
+    const html = renderKind('resourceclaims', {
+      apiVersion: 'resource.k8s.io/v1beta1',
+      kind: 'ResourceClaim',
+      metadata: { name: 'old-claim', namespace: 'ml' },
+      spec: { devices: { requests: [{ name: 'gpu', deviceClassName: 'gpu.example.com' }] } },
+    }, 'ml')
+    expect(html).toContain('gpu.example.com')
+  })
+
+  it('renders ResourceSlice with device inventory', () => {
+    const html = renderKind('resourceslices', {
+      apiVersion: 'resource.k8s.io/v1',
+      kind: 'ResourceSlice',
+      metadata: { name: 'node-1-gpus' },
+      spec: {
+        driver: 'gpu.nvidia.com',
+        pool: { name: 'node-1' },
+        nodeName: 'node-1',
+        devices: [{ name: 'gpu-0', attributes: { productName: { string: 'H100' } } }],
+      },
+    })
+    expect(html).toContain('Slice Info')
+    expect(html).toContain('H100')
+  })
+
+  it('renders DeviceClass selectors', () => {
+    const html = renderKind('deviceclasses', {
+      apiVersion: 'resource.k8s.io/v1',
+      kind: 'DeviceClass',
+      metadata: { name: 'gpu.nvidia.com' },
+      spec: { selectors: [{ cel: { expression: "device.driver == 'gpu.nvidia.com'" } }] },
+    })
+    expect(html).toContain('Selectors (1)')
+    expect(html).toContain('device.driver')
+  })
+})

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -50,6 +50,8 @@ import { getNodePoolStatus, getNodeClaimStatus, getEC2NodeClassStatus } from '..
 import { getScaledObjectStatus, getScaledJobStatus } from '../resources/resource-utils-keda'
 import { getServiceMonitorStatus, getPrometheusRuleStatus, getPodMonitorStatus } from '../resources/resource-utils-prometheus'
 import { getPolicyReportStatus, getKyvernoPolicyStatus } from '../resources/resource-utils-kyverno'
+import { getResourceClaimStatus, getResourceClaimTemplateStatus, getDeviceClassStatus, getResourceSliceStatus } from '../resources/resource-utils-dra'
+import { getNvidiaClusterPolicyStatus, getNvidiaDriverStatus } from '../resources/resource-utils-nvidia'
 import { getBackupStatus, getRestoreStatus, getScheduleStatus, getBSLStatus } from '../resources/resource-utils-velero'
 import {
   getVirtualServiceStatus,
@@ -208,6 +210,12 @@ import {
   CompositionRenderer,
   CompositionRevisionRenderer,
   XRDRenderer,
+  ResourceClaimRenderer,
+  ResourceClaimTemplateRenderer,
+  DeviceClassRenderer,
+  ResourceSliceRenderer,
+  NvidiaClusterPolicyRenderer,
+  NvidiaDriverRenderer,
 } from '../resources/renderers'
 import type { ComposedRefStatus } from '../resources/renderers/CompositeRenderer'
 import {
@@ -318,6 +326,8 @@ const KNOWN_KINDS = new Set([
   'triggerauthentications', 'clustertriggerauthentications',
   'servicemonitors', 'prometheusrules', 'podmonitors',
   'policyreports', 'clusterpolicyreports', 'kyvernopolicies', 'clusterpolicies',
+  'resourceclaims', 'resourceclaimtemplates', 'deviceclasses', 'resourceslices',
+  'nvidiadrivers',
   'vulnerabilityreports', 'configauditreports', 'exposedsecretreports',
   'rbacassessmentreports', 'clusterrbacassessmentreports',
   'clustercompliancereports', 'sbomreports', 'clustersbomreports',
@@ -557,7 +567,14 @@ export function ResourceRendererDispatch({
         {kind === 'prometheusrules' && <PrometheusRuleRenderer data={data} />}
         {kind === 'podmonitors' && <PodMonitorRenderer data={data} />}
         {(kind === 'policyreports' || kind === 'clusterpolicyreports') && <PolicyReportRenderer data={data} />}
-        {(kind === 'kyvernopolicies' || kind === 'clusterpolicies') && <KyvernoPolicyRenderer data={data} />}
+        {(kind === 'kyvernopolicies' || (kind === 'clusterpolicies' && !data?.apiVersion?.startsWith('nvidia.com/'))) && <KyvernoPolicyRenderer data={data} />}
+        {(kind === 'clusterpolicies' && data?.apiVersion?.startsWith('nvidia.com/')) && <NvidiaClusterPolicyRenderer data={data} />}
+        {kind === 'nvidiadrivers' && <NvidiaDriverRenderer data={data} />}
+        {/* DRA (resource.k8s.io) */}
+        {kind === 'resourceclaims' && <ResourceClaimRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'resourceclaimtemplates' && <ResourceClaimTemplateRenderer data={data} />}
+        {kind === 'deviceclasses' && <DeviceClassRenderer data={data} />}
+        {kind === 'resourceslices' && <ResourceSliceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && data.apiVersion?.includes('cnpg.io') && <CNPGBackupRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && !data.apiVersion?.includes('cnpg.io') && <VeleroBackupRenderer data={data} />}
         {kind === 'restores' && <VeleroRestoreRenderer data={data} />}
@@ -760,7 +777,15 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'clustercompliancereports') return getClusterComplianceReportStatus(data)
   if (k === 'sbomreports' || k === 'clustersbomreports') return getSbomReportStatus(data)
   if (k === 'policyreports' || k === 'clusterpolicyreports') return getPolicyReportStatus(data)
-  if (k === 'kyvernopolicies' || k === 'clusterpolicies') return getKyvernoPolicyStatus(data)
+  if (k === 'kyvernopolicies' || k === 'clusterpolicies') {
+    if (data?.apiVersion?.startsWith('nvidia.com/')) return getNvidiaClusterPolicyStatus(data)
+    return getKyvernoPolicyStatus(data)
+  }
+  if (k === 'nvidiadrivers') return getNvidiaDriverStatus(data)
+  if (k === 'resourceclaims') return getResourceClaimStatus(data)
+  if (k === 'resourceclaimtemplates') return getResourceClaimTemplateStatus(data)
+  if (k === 'deviceclasses') return getDeviceClassStatus(data)
+  if (k === 'resourceslices') return getResourceSliceStatus(data)
   if (k === 'backups') {
     if (data.apiVersion?.includes('cnpg.io')) return getCNPGBackupStatus(data)
     return getBackupStatus(data)