@skyhook-io/k8s-ui 1.13.3 → 1.14.0

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>
+  }
+}

package/src/components/resources/renderers/kubeflow-training-cells.tsx

@@ -0,0 +1,72 @@
+// Kubeflow training cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import type { StatusBadge } from '../resource-utils'
+import {
+  getPyTorchJobStatus,
+  getTFJobStatus,
+  getMPIJobStatus,
+  getTrainingJobReplicas,
+  getTrainingJobElapsed,
+  getTrainJobStatus,
+  getTrainJobRuntime,
+  getTrainJobSuspended,
+} from '../resource-utils-kubeflow-training'
+
+function TrainingOperatorJobCell({ resource, column, getStatus }: { resource: any; column: string; getStatus: (resource: any) => StatusBadge }) {
+  switch (column) {
+    case 'status': {
+      const status = getStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'replicas': {
+      const replicas = getTrainingJobReplicas(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{replicas}</span>
+    }
+    case 'elapsed': {
+      const elapsed = getTrainingJobElapsed(resource)
+      return <span className="text-sm text-theme-text-secondary">{elapsed}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function PyTorchJobCell({ resource, column }: { resource: any; column: string }) {
+  return <TrainingOperatorJobCell resource={resource} column={column} getStatus={getPyTorchJobStatus} />
+}
+
+export function TFJobCell({ resource, column }: { resource: any; column: string }) {
+  return <TrainingOperatorJobCell resource={resource} column={column} getStatus={getTFJobStatus} />
+}
+
+export function MPIJobCell({ resource, column }: { resource: any; column: string }) {
+  return <TrainingOperatorJobCell resource={resource} column={column} getStatus={getMPIJobStatus} />
+}
+
+export function TrainJobCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getTrainJobStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'runtime': {
+      const runtime = getTrainJobRuntime(resource)
+      return <span className="text-sm text-theme-text-secondary">{runtime}</span>
+    }
+    case 'suspended': {
+      const suspended = getTrainJobSuspended(resource)
+      return <span className="text-sm text-theme-text-secondary">{suspended ? 'Yes' : '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,176 @@
+// Kueue + Cluster Autoscaler ProvisioningRequest cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getClusterQueueStatus,
+  getClusterQueueCohort,
+  getClusterQueuePendingWorkloads,
+  getClusterQueueAdmittedWorkloads,
+  getClusterQueueFlavors,
+  getLocalQueueStatus,
+  getLocalQueueClusterQueue,
+  getLocalQueuePendingWorkloads,
+  getLocalQueueAdmittedWorkloads,
+  getKueueWorkloadStatus,
+  getKueueWorkloadQueueName,
+  getKueueWorkloadAdmittedBy,
+  getKueueWorkloadPriority,
+  getResourceFlavorStatus,
+  getResourceFlavorNodeLabelCount,
+  getResourceFlavorTaintCount,
+  getAdmissionCheckStatus,
+  getAdmissionCheckControllerName,
+  getProvisioningRequestStatus,
+  getProvisioningRequestClassName,
+  getProvisioningRequestPodSetCount,
+} from '../resource-utils-kueue'
+
+export function ClusterQueueCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getClusterQueueStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'cohort': {
+      const cohort = getClusterQueueCohort(resource)
+      return <span className="text-sm text-theme-text-secondary">{cohort}</span>
+    }
+    case 'pendingWorkloads': {
+      const pending = getClusterQueuePendingWorkloads(resource)
+      return <span className="text-sm text-theme-text-secondary">{pending}</span>
+    }
+    case 'admittedWorkloads': {
+      const admitted = getClusterQueueAdmittedWorkloads(resource)
+      return <span className="text-sm text-theme-text-secondary">{admitted}</span>
+    }
+    case 'flavors': {
+      const flavors = getClusterQueueFlavors(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{flavors}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function LocalQueueCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getLocalQueueStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'clusterQueue': {
+      const clusterQueue = getLocalQueueClusterQueue(resource)
+      return <span className="text-sm text-theme-text-secondary">{clusterQueue}</span>
+    }
+    case 'pendingWorkloads': {
+      const pending = getLocalQueuePendingWorkloads(resource)
+      return <span className="text-sm text-theme-text-secondary">{pending}</span>
+    }
+    case 'admittedWorkloads': {
+      const admitted = getLocalQueueAdmittedWorkloads(resource)
+      return <span className="text-sm text-theme-text-secondary">{admitted}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function KueueWorkloadCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKueueWorkloadStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'queueName': {
+      const queueName = getKueueWorkloadQueueName(resource)
+      return <span className="text-sm text-theme-text-secondary">{queueName}</span>
+    }
+    case 'admittedBy': {
+      const admittedBy = getKueueWorkloadAdmittedBy(resource)
+      return <span className="text-sm text-theme-text-secondary">{admittedBy}</span>
+    }
+    case 'priority': {
+      const priority = getKueueWorkloadPriority(resource)
+      return <span className="text-sm text-theme-text-secondary">{priority}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ResourceFlavorCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getResourceFlavorStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'nodeLabels': {
+      const count = getResourceFlavorNodeLabelCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    case 'taints': {
+      const count = getResourceFlavorTaintCount(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 AdmissionCheckCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getAdmissionCheckStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'controllerName': {
+      const controllerName = getAdmissionCheckControllerName(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{controllerName}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ProvisioningRequestCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getProvisioningRequestStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'provisioningClassName': {
+      const className = getProvisioningRequestClassName(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{className}</span>
+    }
+    case 'podSets': {
+      const count = getProvisioningRequestPodSetCount(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>
+  }
+}

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

@@ -6,7 +6,7 @@ import {
   getPolicyReportStatus,
   getPolicyReportSummary,
   getKyvernoPolicyStatus,
-  getKyvernoPolicyAction,
+  getKyvernoEnforcement,
   getKyvernoPolicyRuleCount,
 } from '../resource-utils-kyverno'
 import {
@@ -79,13 +79,17 @@ export function KyvernoPolicyCell({ resource, column }: { resource: any; column:
       )
     }
     case 'action': {
-      const action = getKyvernoPolicyAction(resource)
+      const { label, blocks, discrepancy } = getKyvernoEnforcement(resource)
       return (
         <span className={clsx(
           'badge',
-          action === 'Enforce' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400',
+          blocks
+            ? 'bg-red-500/20 text-red-400'
+            : discrepancy
+              ? 'bg-orange-500/20 text-orange-400'
+              : 'bg-yellow-500/20 text-yellow-400',
         )}>
-          {action}
+          {label}
         </span>
       )
     }

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

@@ -0,0 +1,81 @@
+// NVIDIA NIM Operator cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getNIMServiceStatus,
+  getNIMServiceModel,
+  getNIMServiceReplicas,
+  getNIMCacheStatus,
+  getNIMCacheSourceType,
+  getNIMCacheModelSource,
+  getNIMCacheStorageSize,
+  getNIMPipelineStatus,
+  getNIMPipelineServiceCount,
+} from '../resource-utils-nim'
+
+export function NIMServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNIMServiceStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'model': {
+      const model = getNIMServiceModel(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{model}</span>
+    }
+    case 'replicas': {
+      const replicas = getNIMServiceReplicas(resource)
+      return <span className="text-sm text-theme-text-secondary">{replicas}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function NIMCacheCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNIMCacheStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'source': {
+      const type = getNIMCacheSourceType(resource)
+      const model = getNIMCacheModelSource(resource)
+      const text = type !== '-' && model !== '-' ? `${type}: ${model}` : model
+      return <span className="text-sm text-theme-text-secondary truncate block">{text}</span>
+    }
+    case 'storage': {
+      const size = getNIMCacheStorageSize(resource)
+      return <span className="text-sm text-theme-text-secondary">{size}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function NIMPipelineCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNIMPipelineStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'services': {
+      const count = getNIMPipelineServiceCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,124 @@
+// KubeRay cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getRayClusterStatus,
+  getRayClusterVersion,
+  getRayClusterWorkers,
+  getRayClusterHeadService,
+  getRayJobStatus,
+  getRayJobJobStatus,
+  getRayJobDeploymentStatus,
+  getRayJobClusterName,
+  getRayServiceStatus,
+  getRayServiceServiceStatus,
+  getRayServiceClusters,
+  getRayCronJobStatus,
+  getRayCronJobSchedule,
+  getRayCronJobSuspend,
+  getRayCronJobLastSchedule,
+} from '../resource-utils-ray'
+
+export function RayClusterCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getRayClusterStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'rayVersion': {
+      const version = getRayClusterVersion(resource)
+      return <span className="text-sm text-theme-text-secondary">{version}</span>
+    }
+    case 'workers': {
+      const workers = getRayClusterWorkers(resource)
+      return <span className="text-sm text-theme-text-secondary">{workers}</span>
+    }
+    case 'headService': {
+      const svc = getRayClusterHeadService(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{svc}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function RayJobCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getRayJobStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'jobStatus': {
+      const jobStatus = getRayJobJobStatus(resource)
+      return <span className="text-sm text-theme-text-secondary">{jobStatus}</span>
+    }
+    case 'deploymentStatus': {
+      const deploymentStatus = getRayJobDeploymentStatus(resource)
+      return <span className="text-sm text-theme-text-secondary">{deploymentStatus}</span>
+    }
+    case 'cluster': {
+      const cluster = getRayJobClusterName(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{cluster}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function RayServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getRayServiceStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'serviceStatus': {
+      const serviceStatus = getRayServiceServiceStatus(resource)
+      return <span className="text-sm text-theme-text-secondary">{serviceStatus}</span>
+    }
+    case 'clusters': {
+      const clusters = getRayServiceClusters(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{clusters}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function RayCronJobCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getRayCronJobStatus(resource)
+      return (
+        <span className={clsx('badge', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'schedule': {
+      const schedule = getRayCronJobSchedule(resource)
+      return <span className="text-sm font-mono text-theme-text-secondary">{schedule}</span>
+    }
+    case 'suspend': {
+      const suspended = getRayCronJobSuspend(resource)
+      return <span className="text-sm text-theme-text-secondary">{suspended ? 'Yes' : 'No'}</span>
+    }
+    case 'lastSchedule': {
+      const lastSchedule = getRayCronJobLastSchedule(resource)
+      return <span className="text-sm text-theme-text-secondary">{lastSchedule}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}