@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,253 @@
+// FluxCD cell components for ResourcesView table — extracted from ResourcesView.tsx
+
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getGitRepositoryUrl,
+  getGitRepositoryRef,
+  getGitRepositoryStatus,
+  getGitRepositoryRevision,
+  getOCIRepositoryUrl,
+  getOCIRepositoryRef,
+  getOCIRepositoryStatus,
+  getOCIRepositoryRevision,
+  getHelmRepositoryUrl,
+  getHelmRepositoryType,
+  getHelmRepositoryStatus,
+  getKustomizationSource,
+  getKustomizationPath,
+  getKustomizationStatus,
+  getKustomizationInventory,
+  getFluxHelmReleaseChart,
+  getFluxHelmReleaseVersion,
+  getFluxHelmReleaseStatus,
+  getFluxHelmReleaseRevision,
+  getFluxAlertProvider,
+  getFluxAlertEventCount,
+  getFluxAlertStatus,
+  formatAge,
+} from '../resource-utils'
+
+export function GitRepositoryCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'url': {
+      const url = getGitRepositoryUrl(resource)
+      return (
+        <Tooltip content={url}>
+          <span className="text-sm text-theme-text-secondary truncate block">{url}</span>
+        </Tooltip>
+      )
+    }
+    case 'ref': {
+      const ref = getGitRepositoryRef(resource)
+      return <span className="text-sm text-theme-text-secondary">{ref}</span>
+    }
+    case 'status': {
+      const status = getGitRepositoryStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'revision': {
+      const revision = getGitRepositoryRevision(resource)
+      return (
+        <span className="text-sm text-theme-text-tertiary font-mono">{revision}</span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function OCIRepositoryCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'url': {
+      const url = getOCIRepositoryUrl(resource)
+      return (
+        <Tooltip content={url}>
+          <span className="text-sm text-theme-text-secondary truncate block">{url}</span>
+        </Tooltip>
+      )
+    }
+    case 'ref': {
+      const ref = getOCIRepositoryRef(resource)
+      return <span className="text-sm text-theme-text-secondary">{ref}</span>
+    }
+    case 'status': {
+      const status = getOCIRepositoryStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'revision': {
+      const revision = getOCIRepositoryRevision(resource)
+      return (
+        <span className="text-sm text-theme-text-tertiary font-mono">{revision}</span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function HelmRepositoryCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'url': {
+      const url = getHelmRepositoryUrl(resource)
+      return (
+        <Tooltip content={url}>
+          <span className="text-sm text-theme-text-secondary truncate block">{url}</span>
+        </Tooltip>
+      )
+    }
+    case 'type': {
+      const type = getHelmRepositoryType(resource)
+      return <span className="text-sm text-theme-text-secondary">{type}</span>
+    }
+    case 'status': {
+      const status = getHelmRepositoryStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function KustomizationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'source': {
+      const source = getKustomizationSource(resource)
+      return (
+        <Tooltip content={source}>
+          <span className="text-sm text-theme-text-secondary truncate block">{source}</span>
+        </Tooltip>
+      )
+    }
+    case 'path': {
+      const path = getKustomizationPath(resource)
+      return <span className="text-sm text-theme-text-tertiary font-mono">{path}</span>
+    }
+    case 'status': {
+      const status = getKustomizationStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'revision': {
+      const revision = resource.status?.lastAppliedRevision || resource.status?.lastAttemptedRevision || ''
+      if (!revision) return <span className="text-sm text-theme-text-tertiary">-</span>
+      // Format: "refs/heads/main@sha1:abc123..." -> "main@abc123"
+      const formatted = revision
+        .replace(/^refs\/heads\//, '')
+        .replace(/^refs\/tags\//, '')
+        .replace(/@sha1:([a-f0-9]{8})[a-f0-9]*$/, '@$1')
+      return (
+        <Tooltip content={revision}>
+          <span className="text-sm text-theme-text-secondary font-mono truncate block">{formatted}</span>
+        </Tooltip>
+      )
+    }
+    case 'inventory': {
+      const count = getKustomizationInventory(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {count > 0 ? count : '-'}
+        </span>
+      )
+    }
+    case 'lastUpdated': {
+      // Kustomization uses history[0].lastReconciled or conditions[Ready].lastTransitionTime
+      const lastReconcile = resource.status?.history?.[0]?.lastReconciled ||
+        resource.status?.conditions?.find((c: any) => c.type === 'Ready')?.lastTransitionTime
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {lastReconcile ? formatAge(lastReconcile) : '-'}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function FluxHelmReleaseCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'chart': {
+      const chart = getFluxHelmReleaseChart(resource)
+      return (
+        <Tooltip content={chart}>
+          <span className="text-sm text-theme-text-secondary truncate block">{chart}</span>
+        </Tooltip>
+      )
+    }
+    case 'version': {
+      const version = getFluxHelmReleaseVersion(resource)
+      return <span className="text-sm text-theme-text-secondary">{version}</span>
+    }
+    case 'status': {
+      const status = getFluxHelmReleaseStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'revision': {
+      const revision = getFluxHelmReleaseRevision(resource)
+      return (
+        <span className="text-sm text-theme-text-tertiary">
+          {revision > 0 ? `#${revision}` : '-'}
+        </span>
+      )
+    }
+    case 'lastUpdated': {
+      // HelmRelease uses history[0].lastDeployed or conditions[Ready].lastTransitionTime
+      const lastReconcile = resource.status?.history?.[0]?.lastDeployed ||
+        resource.status?.conditions?.find((c: any) => c.type === 'Ready')?.lastTransitionTime
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {lastReconcile ? formatAge(lastReconcile) : '-'}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function FluxAlertCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'provider': {
+      const provider = getFluxAlertProvider(resource)
+      return <span className="text-sm text-theme-text-secondary">{provider}</span>
+    }
+    case 'events': {
+      const count = getFluxAlertEventCount(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {count > 0 ? count : '-'}
+        </span>
+      )
+    }
+    case 'status': {
+      const status = getFluxAlertStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,105 @@
+export * from './AlertRenderer'
+export * from './ArgoApplicationRenderer'
+export * from './argo-cells'
+export * from './CertificateRenderer'
+export * from './CertificateRequestRenderer'
+export * from './certmanager-cells'
+export * from './ChallengeRenderer'
+export * from './ClusterComplianceReportRenderer'
+export * from './ClusterExternalSecretRenderer'
+export * from './ClusterIssuerRenderer'
+export * from './cnpg-cells'
+export * from './CNPGBackupRenderer'
+export * from './CNPGClusterRenderer'
+export * from './CNPGPoolerRenderer'
+export * from './CNPGScheduledBackupRenderer'
+export * from './ConfigAuditReportRenderer'
+export * from './ConfigMapRenderer'
+export * from './CronJobRenderer'
+export * from './eso-cells'
+export * from './EventRenderer'
+export * from './ExposedSecretReportRenderer'
+export * from './ExternalSecretRenderer'
+export * from './flux-cells'
+export * from './FluxHelmReleaseRenderer'
+export * from './GatewayClassRenderer'
+export * from './GatewayRenderer'
+export * from './GenericRenderer'
+export * from './GitRepositoryRenderer'
+export * from './GRPCRouteRenderer'
+export * from './HelmRepositoryRenderer'
+export * from './HPARenderer'
+export * from './HTTPRouteRenderer'
+export * from './IngressClassRenderer'
+export * from './IngressRenderer'
+export * from './istio-cells'
+export * from './IstioAuthorizationPolicyRenderer'
+export * from './IstioDestinationRuleRenderer'
+export * from './IstioGatewayRenderer'
+export * from './IstioPeerAuthenticationRenderer'
+export * from './IstioServiceEntryRenderer'
+export * from './IstioVirtualServiceRenderer'
+export * from './JobRenderer'
+export * from './karpenter-cells'
+export * from './KarpenterEC2NodeClassRenderer'
+export * from './KarpenterNodeClaimRenderer'
+export * from './KarpenterNodePoolRenderer'
+export * from './keda-cells'
+export * from './KedaScaledJobRenderer'
+export * from './KedaScaledObjectRenderer'
+export * from './KedaTriggerAuthRenderer'
+export * from './knative-cells'
+export * from './KnativeConfigurationRenderer'
+export * from './KnativeEventingRenderer'
+export * from './KnativeFlowRenderer'
+export * from './KnativeNetworkingRenderer'
+export * from './KnativeRevisionRenderer'
+export * from './KnativeRouteRenderer'
+export * from './KnativeServiceRenderer'
+export * from './KnativeSourceRenderer'
+export * from './KustomizationRenderer'
+export * from './kyverno-cells'
+export * from './KyvernoPolicyReportRenderer'
+export * from './LeaseRenderer'
+export * from './NetworkPolicyRenderer'
+export * from './NodeRenderer'
+export * from './OCIRepositoryRenderer'
+export * from './OrderRenderer'
+export * from './PersistentVolumeRenderer'
+export * from './PodDisruptionBudgetRenderer'
+export * from './PodRenderer'
+export * from './PodMonitorRenderer'
+export * from './PriorityClassRenderer'
+export * from './prometheus-cells'
+export * from './PrometheusRuleRenderer'
+export * from './PVCRenderer'
+export * from './ReplicaSetRenderer'
+export * from './RoleBindingRenderer'
+export * from './RoleRenderer'
+export * from './RolloutRenderer'
+export * from './RuntimeClassRenderer'
+export * from './SbomReportRenderer'
+export * from './SealedSecretRenderer'
+export * from './SecretRenderer'
+export * from './SecretStoreRenderer'
+export * from './ServiceAccountRenderer'
+export * from './ServiceRenderer'
+export * from './ServiceMonitorRenderer'
+export * from './SimpleRouteRenderer'
+export * from './StorageClassRenderer'
+export * from './trivy-cells'
+export * from './trivy-shared'
+export * from './velero-cells'
+export * from './VeleroBackupRenderer'
+export * from './VeleroBSLRenderer'
+export * from './VeleroRestoreRenderer'
+export * from './VeleroScheduleRenderer'
+export * from './VeleroVSLRenderer'
+export * from './VPARenderer'
+export * from './VulnerabilityReportRenderer'
+export * from './WebhookConfigRenderer'
+export * from './WorkflowRenderer'
+export * from './WorkflowTemplateRenderer'
+export * from './WorkloadRenderer'
+export * from './TraefikIngressRouteRenderer'
+export * from './traefik-cells'

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

@@ -0,0 +1,210 @@
+// Istio cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getVirtualServiceStatus,
+  getVirtualServiceHosts,
+  getVirtualServiceGateways,
+  getVirtualServiceRouteCount,
+  getDestinationRuleStatus,
+  getDestinationRuleHost,
+  getDestinationRuleSubsetCount,
+  getDestinationRuleLoadBalancer,
+  getIstioGatewayStatus,
+  getIstioGatewayServerCount,
+  getIstioGatewaySelectorString,
+  getServiceEntryStatus,
+  getServiceEntryHosts,
+  getServiceEntryLocation,
+  getServiceEntryPortsString,
+  getPeerAuthenticationStatus,
+  getPeerAuthenticationMode,
+  getPeerAuthenticationSelectorString,
+  getAuthorizationPolicyStatus,
+  getAuthorizationPolicyAction,
+  getAuthorizationPolicyRuleCount,
+} from '../resource-utils-istio'
+
+const modeColors: Record<string, string> = {
+  STRICT: 'bg-green-500/20 text-green-400',
+  PERMISSIVE: 'bg-yellow-500/20 text-yellow-400',
+  DISABLE: 'bg-red-500/20 text-red-400',
+}
+
+const actionColors: Record<string, string> = {
+  ALLOW: 'bg-green-500/20 text-green-400',
+  DENY: 'bg-red-500/20 text-red-400',
+  CUSTOM: 'bg-blue-500/20 text-blue-400',
+  AUDIT: 'bg-yellow-500/20 text-yellow-400',
+}
+
+export function VirtualServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getVirtualServiceStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'hosts': {
+      const hosts = getVirtualServiceHosts(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{hosts}</span>
+    }
+    case 'gateways': {
+      const gateways = getVirtualServiceGateways(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{gateways}</span>
+    }
+    case 'routes': {
+      const count = getVirtualServiceRouteCount(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 DestinationRuleCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getDestinationRuleStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'host': {
+      const host = getDestinationRuleHost(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{host}</span>
+    }
+    case 'subsets': {
+      const count = getDestinationRuleSubsetCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    case 'loadBalancer': {
+      const lb = getDestinationRuleLoadBalancer(resource)
+      return <span className="text-sm text-theme-text-secondary">{lb}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function IstioGatewayCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getIstioGatewayStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'servers': {
+      const count = getIstioGatewayServerCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count}</span>
+    }
+    case 'selector': {
+      const selector = getIstioGatewaySelectorString(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{selector}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ServiceEntryCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getServiceEntryStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'hosts': {
+      const hosts = getServiceEntryHosts(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{hosts}</span>
+    }
+    case 'location': {
+      const location = getServiceEntryLocation(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          location === 'MESH_EXTERNAL' ? 'bg-orange-500/20 text-orange-400' : 'bg-blue-500/20 text-blue-400'
+        )}>
+          {location === 'MESH_EXTERNAL' ? 'External' : 'Internal'}
+        </span>
+      )
+    }
+    case 'ports': {
+      const ports = getServiceEntryPortsString(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{ports}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function PeerAuthenticationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getPeerAuthenticationStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'mode': {
+      const mode = getPeerAuthenticationMode(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          modeColors[mode] || 'bg-gray-500/20 text-gray-400'
+        )}>
+          {mode}
+        </span>
+      )
+    }
+    case 'selector': {
+      const selector = getPeerAuthenticationSelectorString(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{selector}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function AuthorizationPolicyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getAuthorizationPolicyStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'action': {
+      const action = getAuthorizationPolicyAction(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          actionColors[action] || 'bg-gray-500/20 text-gray-400'
+        )}>
+          {action}
+        </span>
+      )
+    }
+    case 'rules': {
+      const count = getAuthorizationPolicyRuleCount(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/karpenter-cells.tsx

@@ -0,0 +1,107 @@
+// Karpenter cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getNodePoolStatus,
+  getNodePoolNodeClassRef,
+  getNodePoolLimits,
+  getNodePoolDisruptionPolicy,
+  getNodeClaimStatus,
+  getNodeClaimInstanceType,
+  getNodeClaimNodeName,
+  getNodeClaimNodePoolRef,
+  getEC2NodeClassStatus,
+  getEC2NodeClassAMI,
+  getEC2NodeClassRole,
+  getEC2NodeClassVolumeSize,
+} from '../resource-utils-karpenter'
+
+export function NodePoolCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNodePoolStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'nodeClass': {
+      const ref = getNodePoolNodeClassRef(resource)
+      return <span className="text-sm text-theme-text-secondary">{ref}</span>
+    }
+    case 'limits': {
+      const limits = getNodePoolLimits(resource)
+      return (
+        <Tooltip content={limits}>
+          <span className="text-sm text-theme-text-secondary truncate block">{limits}</span>
+        </Tooltip>
+      )
+    }
+    case 'disruption': {
+      const policy = getNodePoolDisruptionPolicy(resource)
+      return <span className="text-sm text-theme-text-secondary">{policy}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function NodeClaimCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getNodeClaimStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'instanceType': {
+      const instanceType = getNodeClaimInstanceType(resource)
+      return <span className="text-sm text-theme-text-secondary">{instanceType}</span>
+    }
+    case 'nodeName': {
+      const name = getNodeClaimNodeName(resource)
+      return <span className="text-sm text-theme-text-secondary">{name}</span>
+    }
+    case 'nodePool': {
+      const pool = getNodeClaimNodePoolRef(resource)
+      return <span className="text-sm text-theme-text-secondary">{pool}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function EC2NodeClassCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getEC2NodeClassStatus(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+          {status.text}
+        </span>
+      )
+    }
+    case 'ami': {
+      const ami = getEC2NodeClassAMI(resource)
+      return <span className="text-sm text-theme-text-secondary">{ami}</span>
+    }
+    case 'role': {
+      const role = getEC2NodeClassRole(resource)
+      return (
+        <Tooltip content={role}>
+          <span className="text-sm text-theme-text-secondary truncate block">{role}</span>
+        </Tooltip>
+      )
+    }
+    case 'volumeSize': {
+      const size = getEC2NodeClassVolumeSize(resource)
+      return <span className="text-sm text-theme-text-secondary">{size}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}