@skyhook-io/k8s-ui 1.7.10 → 1.7.12

package/src/components/resources/column-filter-serialization.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { parseColumnFilters, serializeColumnFilters } from './resource-utils'
+
+describe('column filter serialization round-trip', () => {
+  it('round-trips built-in keys', () => {
+    const filters = { status: ['Running'], namespace: ['kube-system', 'default'] }
+    expect(parseColumnFilters(serializeColumnFilters(filters))).toEqual(filters)
+  })
+
+  it('round-trips custom-column keys whose own colon collides with the delimiter', () => {
+    const filters = { 'label:tier': ['control-plane'], 'annotation:foo/bar': ['x'] }
+    const serialized = serializeColumnFilters(filters)
+    // The key colon must be encoded so the first literal ':' is the delimiter.
+    expect(serialized).toBe('label%3Atier:control-plane|annotation%3Afoo%2Fbar:x')
+    expect(parseColumnFilters(serialized)).toEqual(filters)
+  })
+
+  it('preserves commas inside values', () => {
+    const filters = { conditions: ['Ready,SchedulingDisabled'] }
+    expect(parseColumnFilters(serializeColumnFilters(filters))).toEqual(filters)
+  })
+
+  it('parses legacy unencoded built-in keys', () => {
+    expect(parseColumnFilters('status:Running')).toEqual({ status: ['Running'] })
+  })
+})

package/src/components/resources/get-default-container-name.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { getDefaultContainerName } from './resource-utils'
+
+const podWith = (annotation: string | undefined, ...containers: string[]) => ({
+  metadata: annotation
+    ? { annotations: { 'kubectl.kubernetes.io/default-container': annotation } }
+    : {},
+  spec: { containers: containers.map((name) => ({ name })) },
+})
+
+describe('getDefaultContainerName', () => {
+  it('honors the default-container annotation over the first container', () => {
+    expect(getDefaultContainerName(podWith('app', 'istio-proxy', 'app'))).toBe('app')
+  })
+
+  it('falls back to the first container when no annotation is present', () => {
+    expect(getDefaultContainerName(podWith(undefined, 'istio-proxy', 'app'))).toBe('istio-proxy')
+  })
+
+  it('ignores an annotation naming a container that does not exist', () => {
+    expect(getDefaultContainerName(podWith('ghost', 'istio-proxy', 'app'))).toBe('istio-proxy')
+  })
+
+  it('returns the only container for a single-container pod', () => {
+    expect(getDefaultContainerName(podWith(undefined, 'app'))).toBe('app')
+  })
+
+  it('returns undefined for a pod with no containers', () => {
+    expect(getDefaultContainerName(podWith(undefined))).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,49 @@
+import { Filter, Settings } from 'lucide-react'
+import { Section } from '../../ui/drawer-components'
+
+interface DeviceClassRendererProps {
+  data: any
+}
+
+export function DeviceClassRenderer({ data }: DeviceClassRendererProps) {
+  const selectors = data.spec?.selectors || []
+  const config = data.spec?.config || []
+
+  return (
+    <>
+      <Section title={`Selectors (${selectors.length})`} icon={Filter} defaultExpanded>
+        {selectors.length > 0 ? (
+          <div className="space-y-2">
+            {selectors.map((sel: any, i: number) => (
+              <div key={i} className="card-inner">
+                {sel?.cel?.expression ? (
+                  <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">{sel.cel.expression}</pre>
+                ) : (
+                  <span className="text-sm text-theme-text-tertiary">-</span>
+                )}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">No selectors — matches all devices</div>
+        )}
+      </Section>
+
+      {config.length > 0 && (
+        <Section title={`Configuration (${config.length})`} icon={Settings}>
+          <div className="space-y-2">
+            {config.map((c: any, i: number) => (
+              <div key={i} className="card-inner text-sm">
+                {c?.opaque?.driver ? (
+                  <span className="text-theme-text-secondary">opaque config for driver <span className="text-theme-text-primary font-medium">{c.opaque.driver}</span></span>
+                ) : (
+                  <span className="text-theme-text-tertiary">config entry {i + 1}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
 import { MetricsChart } from '../../ui/MetricsChart'
 import { formatMemoryString } from '../../../utils/format'
+import { getExtendedCapacityRows } from '../../../utils/extended-resources'
 import type { MetricsDataPoint } from '../../../types/core'
 
 interface NodeRendererProps {
@@ -132,6 +133,12 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
               allocatable: formatStorage(allocatable['ephemeral-storage']),
               inUse: undefined,
             },
+            ...getExtendedCapacityRows(capacity, allocatable).map((row) => ({
+              label: row.key,
+              capacity: row.capacity,
+              allocatable: row.allocatable,
+              inUse: undefined,
+            })),
           ].map((row) => (
             <div key={row.label} className="card-inner">
               <div className="text-xs font-medium text-theme-text-secondary mb-1">{row.label}</div>

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

@@ -0,0 +1,57 @@
+import { Cpu, Boxes } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import {
+  getNvidiaClusterPolicyStatus,
+  getNvidiaClusterPolicyEnabledComponents,
+  getNvidiaClusterPolicyMigStrategy,
+} from '../resource-utils-nvidia'
+import { healthColors } from '../resource-utils'
+
+interface NvidiaClusterPolicyRendererProps {
+  data: any
+}
+
+export function NvidiaClusterPolicyRenderer({ data }: NvidiaClusterPolicyRendererProps) {
+  const status = getNvidiaClusterPolicyStatus(data)
+  const components = getNvidiaClusterPolicyEnabledComponents(data)
+  const mig = getNvidiaClusterPolicyMigStrategy(data)
+
+  return (
+    <>
+      {status.level === 'alert' && (
+        <AlertBanner
+          variant="warning"
+          title="GPU Operator not ready"
+          items={['One or more operator components have not reached ready state.']}
+        />
+      )}
+
+      <Section title="Operator Status" icon={Cpu} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="State"
+            value={<span className={clsx('badge', status.color)}>{status.text}</span>}
+          />
+          {data.status?.namespace && <Property label="Operator Namespace" value={data.status.namespace} />}
+          {mig !== '-' && <Property label="MIG Strategy" value={mig} />}
+        </PropertyList>
+      </Section>
+
+      {components.length > 0 && (
+        <Section title={`Components (${components.length})`} icon={Boxes} defaultExpanded>
+          <div className="flex flex-wrap gap-1.5">
+            {components.map((c) => (
+              <span
+                key={c.label}
+                className={clsx('badge', c.enabled ? healthColors.healthy : healthColors.neutral)}
+              >
+                {c.label}{c.enabled ? '' : ' (off)'}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { Cpu } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, LabelSelectorDisplay } from '../../ui/drawer-components'
+import { getNvidiaDriverStatus } from '../resource-utils-nvidia'
+
+interface NvidiaDriverRendererProps {
+  data: any
+}
+
+export function NvidiaDriverRenderer({ data }: NvidiaDriverRendererProps) {
+  const status = getNvidiaDriverStatus(data)
+  const spec = data.spec || {}
+
+  return (
+    <>
+      {status.level === 'alert' && (
+        <AlertBanner
+          variant="warning"
+          title="Driver rollout not ready"
+          items={['The driver DaemonSet has not reached ready state on all selected nodes.']}
+        />
+      )}
+
+      <Section title="Driver" icon={Cpu} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="State"
+            value={<span className={clsx('badge', status.color)}>{status.text}</span>}
+          />
+          <Property label="Type" value={spec.driverType} />
+          <Property label="Version" value={spec.version} />
+          {spec.image && <Property label="Image" value={spec.image} />}
+          {spec.repository && <Property label="Repository" value={spec.repository} />}
+          {spec.usePrecompiled !== undefined && (
+            <Property label="Precompiled" value={spec.usePrecompiled ? 'Yes' : 'No'} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {spec.nodeSelector && Object.keys(spec.nodeSelector).length > 0 && (
+        <Section title="Node Selector">
+          <LabelSelectorDisplay selector={{ matchLabels: spec.nodeSelector }} />
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -2,7 +2,7 @@ import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import {
   rbacVerbBadgeClass,
@@ -286,7 +286,7 @@ export function PodRenderer({
   const [podFilesContainer, setPodFilesContainer] = useState<string | null>(null)
 
   const handleOpenTerminal = (containerName?: string) => {
-    const container = containerName || containers[0]?.name
+    const container = containerName || getDefaultContainerName(data)
     if (namespace && podName && container) {
       onOpenTerminal?.({
         namespace,

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

@@ -0,0 +1,118 @@
+import { Cpu, Layers, Users } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getResourceClaimStatus,
+  getResourceClaimAllocation,
+  getResourceClaimReservedFor,
+} from '../resource-utils-dra'
+
+interface ResourceClaimRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function requestDeviceClass(req: any): string {
+  return req?.exactly?.deviceClassName ||
+    req?.deviceClassName ||
+    (req?.firstAvailable || []).map((s: any) => s?.deviceClassName).filter(Boolean).join(' | ') ||
+    '-'
+}
+
+export function ResourceClaimRenderer({ data, onNavigate }: ResourceClaimRendererProps) {
+  const status = getResourceClaimStatus(data)
+  const requests = data.spec?.devices?.requests || []
+  const allocation = getResourceClaimAllocation(data)
+  const reservedFor = getResourceClaimReservedFor(data)
+  const deviceStatuses = data.status?.devices || []
+
+  return (
+    <>
+      {status.level === 'degraded' && (
+        <AlertBanner
+          variant="warning"
+          title="Allocated but unreserved"
+          items={['A device is allocated to this claim but no consumer holds it — long-lived, this leaks the device.']}
+        />
+      )}
+
+      {/* Device Requests */}
+      {requests.length > 0 && (
+        <Section title={`Device Requests (${requests.length})`} icon={Cpu} defaultExpanded>
+          <div className="space-y-2">
+            {requests.map((req: any, i: number) => {
+              const detail = req?.exactly || req
+              return (
+                <div key={req?.name || i} className="card-inner">
+                  <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                    <span className="text-theme-text-primary font-medium">{req?.name || `request-${i}`}</span>
+                    <span className="text-theme-text-secondary">{requestDeviceClass(req)}</span>
+                    {detail?.count != null && (
+                      <span className="text-theme-text-tertiary">count: {String(detail.count)}</span>
+                    )}
+                    {detail?.allocationMode && (
+                      <span className="text-theme-text-tertiary">{detail.allocationMode}</span>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {/* Allocation */}
+      <Section title="Allocation" icon={Layers} defaultExpanded>
+        {allocation.length > 0 ? (
+          <div className="space-y-2">
+            {allocation.map((r, i) => (
+              <div key={i} className="card-inner">
+                <PropertyList>
+                  <Property label="Driver" value={r.driver} />
+                  <Property label="Pool" value={r.pool} />
+                  <Property label="Device" value={r.device} />
+                </PropertyList>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">Not allocated — waiting for a driver to satisfy this claim</div>
+        )}
+      </Section>
+
+      {/* Reserved For */}
+      {reservedFor.length > 0 && (
+        <Section title={`Reserved For (${reservedFor.length})`} icon={Users} defaultExpanded>
+          <div className="space-y-1">
+            {reservedFor.map((r, i) => (
+              <div key={i} className="card-inner text-sm">
+                {r.resource === 'pods' ? (
+                  <ResourceLink name={r.name} kind="pods" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+                ) : (
+                  <span className="text-theme-text-secondary">{r.resource}/{r.name}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Per-device health (beta, populated by drivers that report it) */}
+      {deviceStatuses.length > 0 && (
+        <Section title={`Device Status (${deviceStatuses.length})`}>
+          <div className="space-y-2">
+            {deviceStatuses.map((d: any, i: number) => (
+              <div key={i} className="card-inner text-sm">
+                <div className="text-theme-text-primary font-medium">{d.device || '-'}</div>
+                {(d.conditions || []).map((c: any, j: number) => (
+                  <div key={j} className="text-xs text-theme-text-secondary mt-0.5">
+                    {c.type}: {c.status}{c.message ? ` — ${c.message}` : ''}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { Cpu } from 'lucide-react'
+import { Section } from '../../ui/drawer-components'
+
+interface ResourceClaimTemplateRendererProps {
+  data: any
+}
+
+export function ResourceClaimTemplateRenderer({ data }: ResourceClaimTemplateRendererProps) {
+  const requests = data.spec?.spec?.devices?.requests || []
+
+  return (
+    <>
+      <Section title={`Device Requests (${requests.length})`} icon={Cpu} defaultExpanded>
+        {requests.length > 0 ? (
+          <div className="space-y-2">
+            {requests.map((req: any, i: number) => {
+              const detail = req?.exactly || req
+              const deviceClass = detail?.deviceClassName ||
+                (req?.firstAvailable || []).map((s: any) => s?.deviceClassName).filter(Boolean).join(' | ') || '-'
+              return (
+                <div key={req?.name || i} className="card-inner">
+                  <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                    <span className="text-theme-text-primary font-medium">{req?.name || `request-${i}`}</span>
+                    <span className="text-theme-text-secondary">{deviceClass}</span>
+                    {detail?.count != null && (
+                      <span className="text-theme-text-tertiary">count: {String(detail.count)}</span>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">No device requests in template</div>
+        )}
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,72 @@
+import { HardDrive, Cpu } from 'lucide-react'
+import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
+
+interface ResourceSliceRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+const DEVICE_DISPLAY_LIMIT = 20
+
+export function ResourceSliceRenderer({ data, onNavigate }: ResourceSliceRendererProps) {
+  const spec = data.spec || {}
+  const devices = spec.devices || []
+  const visible = devices.slice(0, DEVICE_DISPLAY_LIMIT)
+
+  return (
+    <>
+      <Section title="Slice Info" icon={HardDrive} defaultExpanded>
+        <PropertyList>
+          <Property label="Driver" value={spec.driver} />
+          <Property label="Pool" value={spec.pool?.name} />
+          {spec.nodeName && (
+            <Property
+              label="Node"
+              value={<ResourceLink name={spec.nodeName} kind="nodes" namespace="" onNavigate={onNavigate} />}
+            />
+          )}
+          {spec.allNodes && <Property label="Scope" value="All nodes" />}
+        </PropertyList>
+      </Section>
+
+      <Section title={`Devices (${devices.length})`} icon={Cpu} defaultExpanded>
+        {devices.length > 0 ? (
+          <div className="space-y-2">
+            {visible.map((d: any, i: number) => {
+              // v1 puts attributes/capacity at the device level; v1beta1 nested them under "basic"
+              const attrs = d?.attributes || d?.basic?.attributes || {}
+              const capacity = d?.capacity || d?.basic?.capacity || {}
+              const attrEntries = Object.entries(attrs).slice(0, 6)
+              return (
+                <div key={d?.name || i} className="card-inner">
+                  <div className="text-sm text-theme-text-primary font-medium">{d?.name || `device-${i}`}</div>
+                  {attrEntries.length > 0 && (
+                    <div className="mt-1 space-y-0.5">
+                      {attrEntries.map(([k, v]: [string, any]) => (
+                        <div key={k} className="text-xs text-theme-text-secondary">
+                          {k}: {String(v?.string ?? v?.int ?? v?.bool ?? v?.version ?? '-')}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {Object.keys(capacity).length > 0 && (
+                    <div className="mt-1 text-xs text-theme-text-tertiary">
+                      capacity: {Object.entries(capacity).map(([k, v]: [string, any]) => `${k}=${v?.value ?? v}`).join(', ')}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+            {devices.length > DEVICE_DISPLAY_LIMIT && (
+              <div className="text-xs text-theme-text-tertiary">
+                +{devices.length - DEVICE_DISPLAY_LIMIT} more devices — see YAML for the full list
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">No devices published in this slice</div>
+        )}
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,80 @@
+// DRA (resource.k8s.io) cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getResourceClaimStatus,
+  getResourceClaimDeviceClasses,
+  getResourceClaimAllocation,
+  getResourceClaimReservedFor,
+  getResourceClaimTemplateDeviceClasses,
+  getDeviceClassSelectorCount,
+  getResourceSliceDriver,
+  getResourceSlicePool,
+  getResourceSliceNode,
+  getResourceSliceDeviceCount,
+} from '../resource-utils-dra'
+
+export function ResourceClaimCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getResourceClaimStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'deviceClass': {
+      const classes = getResourceClaimDeviceClasses(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{classes.join(', ') || '-'}</span>
+    }
+    case 'allocated': {
+      const results = getResourceClaimAllocation(resource)
+      if (results.length === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary truncate block">{results[0].driver}{results.length > 1 ? ` +${results.length - 1}` : ''}</span>
+    }
+    case 'reservedFor': {
+      const reserved = getResourceClaimReservedFor(resource)
+      if (reserved.length === 0) return <span className="text-sm text-theme-text-tertiary">-</span>
+      return <span className="text-sm text-theme-text-secondary truncate block">{reserved.map(r => r.name).join(', ')}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ResourceClaimTemplateCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'deviceClass': {
+      const classes = getResourceClaimTemplateDeviceClasses(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{classes.join(', ') || '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function DeviceClassCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'selectors': {
+      // 0 is meaningful — a class with no selectors matches all devices
+      const count = getDeviceClassSelectorCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ResourceSliceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'driver':
+      return <span className="text-sm text-theme-text-secondary truncate block">{getResourceSliceDriver(resource)}</span>
+    case 'pool':
+      return <span className="text-sm text-theme-text-secondary truncate block">{getResourceSlicePool(resource)}</span>
+    case 'node': {
+      const node = getResourceSliceNode(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{node || '-'}</span>
+    }
+    case 'devices':
+      return <span className="text-sm text-theme-text-secondary">{getResourceSliceDeviceCount(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -142,3 +142,11 @@ export * from './azure-capi-cells'
 export * from './AzureManagedControlPlaneRenderer'
 export * from './AzureManagedMachinePoolRenderer'
 export * from './AzureMachineRenderer'
+export * from './dra-cells'
+export * from './ResourceClaimRenderer'
+export * from './ResourceClaimTemplateRenderer'
+export * from './DeviceClassRenderer'
+export * from './ResourceSliceRenderer'
+export * from './nvidia-cells'
+export * from './NvidiaClusterPolicyRenderer'
+export * from './NvidiaDriverRenderer'

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

@@ -0,0 +1,43 @@
+// NVIDIA GPU Operator (nvidia.com) cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getNvidiaClusterPolicyStatus,
+  getNvidiaClusterPolicyEnabledComponents,
+  getNvidiaClusterPolicyMigStrategy,
+  getNvidiaDriverStatus,
+  getNvidiaDriverType,
+  getNvidiaDriverVersion,
+} from '../resource-utils-nvidia'
+
+export function NvidiaClusterPolicyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNvidiaClusterPolicyStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'components': {
+      const enabled = getNvidiaClusterPolicyEnabledComponents(resource).filter(c => c.enabled)
+      return <span className="text-sm text-theme-text-secondary truncate block">{enabled.length ? enabled.map(c => c.label).join(', ') : '-'}</span>
+    }
+    case 'mig':
+      return <span className="text-sm text-theme-text-secondary">{getNvidiaClusterPolicyMigStrategy(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function NvidiaDriverCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNvidiaDriverStatus(resource)
+      return <span className={clsx('badge', status.color)}>{status.text}</span>
+    }
+    case 'driverType':
+      return <span className="text-sm text-theme-text-secondary">{getNvidiaDriverType(resource)}</span>
+    case 'version':
+      return <span className="text-sm text-theme-text-secondary">{getNvidiaDriverVersion(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}