@skyhook-io/k8s-ui 1.13.3 → 1.13.4

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
+import { Server, ExternalLink, Scale, Minus, Plus, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { PolicySection } from './PolicySection'
 import type { PolicyResourceResponse } from '../../../types/policy'
@@ -7,7 +7,7 @@ import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection,
 import { DialogPortal } from '../../ui/DialogPortal'
 import { Tooltip } from '../../ui/Tooltip'
 import { Badge, type BadgeSeverity } from '../../ui/Badge'
-import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef, HPADiagnosis } from '../../../types'
+import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef, HPADiagnosis, WorkloadPodInfo } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import { hpaStateLabel, hpaStateLevel } from '../resource-utils-hpa'
@@ -16,6 +16,9 @@ import {
   rbacResourceBadgeClass,
   rbacApiGroupBadgeClass,
 } from '../../../utils/rbac-badges'
+import { getWorkloadRolloutActivity } from '../../../utils/workload-rollout'
+import { useProgressiveRefresh } from '../../../hooks/useProgressiveRefresh'
+import { WorkloadRolloutNotice } from '../../workload/WorkloadRolloutNotice'
 
 export interface ScalerDiagnosis {
   ref: ResourceRef
@@ -33,6 +36,7 @@ interface WorkloadRendererProps {
   isScalePending?: boolean
   scaleBlockedBy?: ResourceRef[]
   scalerDiagnostics?: ScalerDiagnosis[]
+  workloadPods?: WorkloadPodInfo[]
   onRequestRefresh?: () => void
   /**
    * RBAC reverse-lookup for the workload's pod-template ServiceAccount.
@@ -52,21 +56,13 @@ interface WorkloadRendererProps {
   policyError?: Error | null
 }
 
-// Check if the workload is actively progressing (scaling, rolling update)
-function isWorkloadProgressing(status: any): boolean {
-  const conditions = status.conditions || []
-  const progressing = conditions.find((c: any) => c.type === 'Progressing')
-  return progressing?.status === 'True' && progressing?.reason !== 'ProgressDeadlineExceeded'
-}
-
 // Extract real problems from workload status (excludes normal rollout progress)
-function getWorkloadProblems(status: any, spec: any, kind: string): string[] {
+function getWorkloadProblems(status: any, spec: any, kind: string, rolloutExplainsShortfall: boolean): string[] {
   const problems: string[] = []
-  const progressing = isWorkloadProgressing(status)
   const isDaemonSet = kind === 'daemonsets'
 
   // Check replica/pod counts — only flag as problem if NOT actively progressing
-  if (!progressing) {
+  if (!rolloutExplainsShortfall) {
     if (isDaemonSet) {
       const ready = status.numberReady || 0
       const desired = status.desiredNumberScheduled || 0
@@ -78,7 +74,7 @@ function getWorkloadProblems(status: any, spec: any, kind: string): string[] {
       }
     } else {
       const ready = status.readyReplicas || 0
-      const desired = spec.replicas || 0
+      const desired = spec.replicas ?? 1
       if (desired > 0 && ready < desired) {
         problems.push(`${desired - ready} of ${desired} replicas are not ready`)
       }
@@ -96,7 +92,7 @@ function getWorkloadProblems(status: any, spec: any, kind: string): string[] {
     }
     // Show condition failures, but skip Available=False during active rollout (that's expected)
     if (cond.status === 'False' && cond.message) {
-      if (progressing && cond.type === 'Available') continue
+      if (rolloutExplainsShortfall && cond.type === 'Available') continue
       problems.push(`${cond.type}: ${cond.message}`)
     }
   }
@@ -104,27 +100,6 @@ function getWorkloadProblems(status: any, spec: any, kind: string): string[] {
   return problems
 }
 
-// Get progress info for active rollouts
-function getWorkloadProgress(status: any, spec: any, kind: string): string | null {
-  if (!isWorkloadProgressing(status)) return null
-
-  const isDaemonSet = kind === 'daemonsets'
-  if (isDaemonSet) {
-    const ready = status.numberReady || 0
-    const desired = status.desiredNumberScheduled || 0
-    if (desired > 0 && ready < desired) {
-      return `${ready} of ${desired} pods ready`
-    }
-  } else {
-    const ready = status.readyReplicas || 0
-    const desired = spec.replicas || 0
-    if (desired > 0 && ready < desired) {
-      return `${ready} of ${desired} replicas ready`
-    }
-  }
-  return null
-}
-
 function formatScalerLabel(ref: ResourceRef): string {
   const prefix = ref.namespace ? `${ref.namespace}/` : ''
   return `${ref.kind} ${prefix}${ref.name}`
@@ -150,7 +125,7 @@ function compactHPASummary(diagnosis: HPADiagnosis): string {
   return diagnosis.summary
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError }: WorkloadRendererProps) {
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, scalerDiagnostics, workloadPods, onRequestRefresh, rbacData, rbacLoading, rbacError, policyData, policyLoading, policyError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
@@ -165,7 +140,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
 
   // Scale dialog state
   const [showScaleDialog, setShowScaleDialog] = useState(false)
-  const [targetReplicas, setTargetReplicas] = useState(spec.replicas || 0)
+  const [targetReplicas, setTargetReplicas] = useState(spec.replicas ?? 1)
   const [scaledTo, setScaledTo] = useState<number | null>(null)
 
   // Clear scaledTo once the backend data catches up
@@ -179,19 +154,15 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
   // Issues section is shown — it carries the workload's own issues plus its pods'
   // (richer, with cause/action), so the workload-status problems would duplicate.
   const operationalIssuesShown = useOperationalIssuesShown()
-  const problems = operationalIssuesShown ? [] : getWorkloadProblems(status, spec, kind)
+  const rolloutActivity = getWorkloadRolloutActivity(data, kind, workloadPods)
+  const rolloutExplainsShortfall = rolloutActivity.phase === 'applying' || rolloutActivity.phase === 'progressing'
+  const problems = operationalIssuesShown ? [] : getWorkloadProblems(status, spec, kind, rolloutExplainsShortfall)
   const hasProblems = problems.length > 0
-  const progressMessage = getWorkloadProgress(status, spec, kind)
+  const displayedActivity = scaledTo !== null && rolloutActivity.phase === 'idle'
+    ? { ...rolloutActivity, phase: 'applying' as const, active: true, label: 'Scaling workload', detail: `Waiting for the controller to apply ${scaledTo} replicas` }
+    : rolloutActivity
 
-  // Request data refresh while scaling is in progress
-  const isScaling = scaledTo !== null || progressMessage !== null
-  useEffect(() => {
-    if (!isScaling || !onRequestRefresh) return
-    const interval = setInterval(() => {
-      onRequestRefresh()
-    }, 2000)
-    return () => clearInterval(interval)
-  }, [isScaling, onRequestRefresh])
+  useProgressiveRefresh(scaledTo !== null, onRequestRefresh)
 
   useEffect(() => {
     if (isScaleBlocked) {
@@ -211,24 +182,13 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
   }
 
   const openScaleDialog = () => {
-    setTargetReplicas(spec.replicas || 0)
+    setTargetReplicas(spec.replicas ?? 1)
     setShowScaleDialog(true)
   }
 
   return (
     <>
-      {/* Scaling in progress banner — amber: replicas short of desired is an
-          attention state, not an info note (it may be a stuck rollout). */}
-      {(scaledTo !== null || progressMessage) && !hasProblems && (
-        <div className="mb-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-          <div className="flex items-center gap-2">
-            <Loader2 className="w-4 h-4 text-amber-500 animate-spin shrink-0" />
-            <div className="text-sm text-amber-700 dark:text-amber-300">
-              {progressMessage || `Scaling to ${scaledTo} replicas...`}
-            </div>
-          </div>
-        </div>
-      )}
+      {(!hasProblems || displayedActivity.phase === 'stalled') && <WorkloadRolloutNotice activity={displayedActivity} className="mb-4" />}
 
       {/* Problems alert - shown at top when there are real issues */}
       {hasProblems && (
@@ -262,7 +222,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
             </>
           ) : (
             <>
-              <Property label="Replicas" value={`${status.readyReplicas || 0}/${spec.replicas || 0}`} />
+              <Property label="Replicas" value={`${status.readyReplicas || 0}/${spec.replicas ?? 1}`} />
               {scaleBlockedBy && scaleBlockedBy.length > 0 && (
                 <Property
                   label="Controlled by"
@@ -357,8 +317,8 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
         </div>
 
         <div className="text-xs text-theme-text-tertiary text-center mb-4">
-          Current: {spec.replicas || 0} replicas
-          {targetReplicas !== (spec.replicas || 0) && (
+          Current: {spec.replicas ?? 1} replicas
+          {targetReplicas !== (spec.replicas ?? 1) && (
             <span className="text-theme-text-secondary">
               {' '}→ {targetReplicas}
             </span>
@@ -374,7 +334,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
           </button>
           <button
             onClick={handleScale}
-            disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
+            disabled={isScalePending || targetReplicas === (spec.replicas ?? 1)}
             className="flex-1 px-3 py-2 text-sm btn-brand disabled:cursor-not-allowed rounded-lg"
           >
             {isScalePending ? 'Scaling...' : 'Apply'}

package/src/components/resources/renderers/amd-gpu-cells.tsx

@@ -0,0 +1,36 @@
+// AMD GPU Operator cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getAMDDeviceConfigStatus,
+  getAMDDeviceConfigDriver,
+  getAMDDeviceConfigDevicePluginImage,
+  getAMDDeviceConfigNodeCount,
+} from '../resource-utils-amd-gpu'
+
+export function AMDDeviceConfigCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getAMDDeviceConfigStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'driver': {
+      const driver = getAMDDeviceConfigDriver(resource)
+      return <span className="text-sm text-theme-text-secondary">{driver}</span>
+    }
+    case 'devicePluginImage': {
+      const image = getAMDDeviceConfigDevicePluginImage(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{image}</span>
+    }
+    case 'nodes': {
+      const nodes = getAMDDeviceConfigNodeCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{nodes}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/inference-gateway-cells.tsx

@@ -0,0 +1,62 @@
+// Gateway API Inference Extension cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getInferencePoolStatus,
+  getInferencePoolSelector,
+  getInferencePoolTargetPorts,
+  getInferencePoolExtensionRef,
+  getInferenceObjectiveStatus,
+  getInferenceObjectivePoolRef,
+  getInferenceObjectivePriority,
+} from '../resource-utils-inference-gateway'
+
+export function InferencePoolCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getInferencePoolStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'selector': {
+      const selector = getInferencePoolSelector(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{selector}</span>
+    }
+    case 'targetPorts': {
+      const ports = getInferencePoolTargetPorts(resource)
+      return <span className="text-sm text-theme-text-secondary">{ports}</span>
+    }
+    case 'extensionRef': {
+      const ref = getInferencePoolExtensionRef(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{ref}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function InferenceObjectiveCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getInferenceObjectiveStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'poolRef': {
+      const poolRef = getInferenceObjectivePoolRef(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{poolRef}</span>
+    }
+    case 'priority': {
+      const priority = getInferenceObjectivePriority(resource)
+      return <span className="text-sm text-theme-text-secondary">{priority}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/jobset-lws-cells.tsx

@@ -0,0 +1,82 @@
+// LeaderWorkerSet and JobSet cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getLeaderWorkerSetStatus,
+  getLeaderWorkerSetReplicas,
+  getLeaderWorkerSetSize,
+  getLeaderWorkerSetReady,
+  getLeaderWorkerSetUpdated,
+  getJobSetStatus,
+  getJobSetReplicatedJobs,
+  getJobSetReadyJobs,
+  getJobSetSucceededJobs,
+  getJobSetFailedJobs,
+  getJobSetRestarts,
+} from '../resource-utils-jobset-lws'
+
+export function LeaderWorkerSetCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getLeaderWorkerSetStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'replicas': {
+      const replicas = getLeaderWorkerSetReplicas(resource)
+      return <span className="text-sm text-theme-text-secondary">{replicas}</span>
+    }
+    case 'size': {
+      const size = getLeaderWorkerSetSize(resource)
+      return <span className="text-sm text-theme-text-secondary">{size}</span>
+    }
+    case 'ready': {
+      const ready = getLeaderWorkerSetReady(resource)
+      return <span className="text-sm text-theme-text-secondary">{ready}</span>
+    }
+    case 'updated': {
+      const updated = getLeaderWorkerSetUpdated(resource)
+      return <span className="text-sm text-theme-text-secondary">{updated}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function JobSetCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getJobSetStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'replicatedJobs': {
+      const count = getJobSetReplicatedJobs(resource)
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    case 'ready': {
+      const ready = getJobSetReadyJobs(resource)
+      return <span className="text-sm text-theme-text-secondary">{ready}</span>
+    }
+    case 'succeeded': {
+      const succeeded = getJobSetSucceededJobs(resource)
+      return <span className="text-sm text-theme-text-secondary">{succeeded}</span>
+    }
+    case 'failed': {
+      const failed = getJobSetFailedJobs(resource)
+      return <span className={clsx('text-sm', failed > 0 ? 'text-theme-text-primary' : 'text-theme-text-secondary')}>{failed}</span>
+    }
+    case 'restarts': {
+      const restarts = getJobSetRestarts(resource)
+      return <span className="text-sm text-theme-text-secondary">{restarts}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,67 @@
+// KAI Scheduler cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getKaiQueueStatus,
+  getKaiQueueParent,
+  getKaiQueuePriority,
+  getKaiQueueQuota,
+  getKaiQueueAllocated,
+  getKaiPodGroupStatus,
+  getKaiPodGroupQueue,
+  getKaiPodGroupMinMember,
+} from '../resource-utils-kai'
+
+export function KaiQueueCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKaiQueueStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'parentQueue': {
+      const parent = getKaiQueueParent(resource)
+      return <span className="text-sm text-theme-text-secondary">{parent}</span>
+    }
+    case 'priority': {
+      const priority = getKaiQueuePriority(resource)
+      return <span className="text-sm text-theme-text-secondary">{priority}</span>
+    }
+    case 'quota': {
+      const quota = getKaiQueueQuota(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{quota}</span>
+    }
+    case 'allocated': {
+      const allocated = getKaiQueueAllocated(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{allocated}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function KaiPodGroupCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKaiPodGroupStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'queue': {
+      const queue = getKaiPodGroupQueue(resource)
+      return <span className="text-sm text-theme-text-secondary">{queue}</span>
+    }
+    case 'minMember': {
+      const minMember = getKaiPodGroupMinMember(resource)
+      return <span className="text-sm text-theme-text-secondary">{minMember}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,62 @@
+// KAITO cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getKaitoWorkspaceStatus,
+  getKaitoWorkspaceInstanceType,
+  getKaitoWorkspacePreset,
+  getKaitoWorkspaceNodeCount,
+  getRAGEngineStatus,
+  getRAGEngineEmbeddingModel,
+  getRAGEngineInstanceType,
+} from '../resource-utils-kaito'
+
+export function KaitoWorkspaceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKaitoWorkspaceStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'instanceType': {
+      const instanceType = getKaitoWorkspaceInstanceType(resource)
+      return <span className="text-sm text-theme-text-secondary">{instanceType}</span>
+    }
+    case 'preset': {
+      const preset = getKaitoWorkspacePreset(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{preset}</span>
+    }
+    case 'nodes': {
+      const nodes = getKaitoWorkspaceNodeCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{nodes}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function RAGEngineCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getRAGEngineStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'embedding': {
+      const model = getRAGEngineEmbeddingModel(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{model}</span>
+    }
+    case 'instanceType': {
+      const instanceType = getRAGEngineInstanceType(resource)
+      return <span className="text-sm text-theme-text-secondary">{instanceType}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,145 @@
+// KServe cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getInferenceServiceStatus,
+  getInferenceServiceUrl,
+  getInferenceServiceModelFormat,
+  getInferenceServiceRuntime,
+  getInferenceServiceDeploymentMode,
+  getServingRuntimeStatus,
+  getServingRuntimeModelFormats,
+  getServingRuntimeImage,
+  getInferenceGraphStatus,
+  getInferenceGraphNodeCount,
+  getTrainedModelStatus,
+  getTrainedModelFramework,
+  getTrainedModelStorageUri,
+  getTrainedModelInferenceService,
+  getLLMInferenceServiceStatus,
+  getLLMInferenceServiceModel,
+  getLLMInferenceServiceReplicas,
+} from '../resource-utils-kserve'
+
+export function InferenceServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getInferenceServiceStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'url': {
+      const url = getInferenceServiceUrl(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{url}</span>
+    }
+    case 'modelFormat': {
+      const format = getInferenceServiceModelFormat(resource)
+      return <span className="text-sm text-theme-text-secondary">{format}</span>
+    }
+    case 'runtime': {
+      const runtime = getInferenceServiceRuntime(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{runtime}</span>
+    }
+    case 'deploymentMode': {
+      const mode = getInferenceServiceDeploymentMode(resource)
+      return <span className="text-sm text-theme-text-secondary">{mode}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ServingRuntimeCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getServingRuntimeStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'modelFormats': {
+      const formats = getServingRuntimeModelFormats(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{formats}</span>
+    }
+    case 'image': {
+      const image = getServingRuntimeImage(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{image}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function InferenceGraphCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getInferenceGraphStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'nodes': {
+      const count = getInferenceGraphNodeCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function TrainedModelCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getTrainedModelStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'framework': {
+      const framework = getTrainedModelFramework(resource)
+      return <span className="text-sm text-theme-text-secondary">{framework}</span>
+    }
+    case 'storageUri': {
+      const uri = getTrainedModelStorageUri(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{uri}</span>
+    }
+    case 'inferenceService': {
+      const parent = getTrainedModelInferenceService(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{parent}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function LLMInferenceServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getLLMInferenceServiceStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'model': {
+      const model = getLLMInferenceServiceModel(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{model}</span>
+    }
+    case 'replicas': {
+      const replicas = getLLMInferenceServiceReplicas(resource)
+      return <span className="text-sm text-theme-text-secondary">{replicas}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}