@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,94 @@
+// KEDA cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getScaledObjectStatus,
+  getScaledObjectTarget,
+  getScaledObjectReplicas,
+  getScaledObjectTriggerTypes,
+  getScaledJobStatus,
+  getScaledJobTarget,
+  getScaledJobStrategy,
+  getScaledJobTriggerTypes,
+  getTriggerAuthSecretRefCount,
+  getTriggerAuthEnvCount,
+  getTriggerAuthHasVault,
+} from '../resource-utils-keda'
+
+export function ScaledObjectCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getScaledObjectStatus(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 'target': {
+      const target = getScaledObjectTarget(resource)
+      return <span className="text-sm text-theme-text-secondary">{target}</span>
+    }
+    case 'replicas': {
+      const replicas = getScaledObjectReplicas(resource)
+      return <span className="text-sm text-theme-text-secondary">{replicas}</span>
+    }
+    case 'triggerTypes': {
+      const types = getScaledObjectTriggerTypes(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{types}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ScaledJobCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getScaledJobStatus(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 'target': {
+      const target = getScaledJobTarget(resource)
+      return <span className="text-sm text-theme-text-secondary">{target}</span>
+    }
+    case 'strategy': {
+      const strategy = getScaledJobStrategy(resource)
+      return <span className="text-sm text-theme-text-secondary">{strategy}</span>
+    }
+    case 'triggerTypes': {
+      const types = getScaledJobTriggerTypes(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{types}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function TriggerAuthenticationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'secretTargetRef': {
+      const count = getTriggerAuthSecretRefCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    case 'env': {
+      const count = getTriggerAuthEnvCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    case 'hashiCorpVault': {
+      const hasVault = getTriggerAuthHasVault(resource)
+      return <span className="text-sm text-theme-text-secondary">{hasVault ? 'Yes' : '-'}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ClusterTriggerAuthenticationCell({ resource, column }: { resource: any; column: string }) {
+  // Same rendering logic as TriggerAuthentication
+  return <TriggerAuthenticationCell resource={resource} column={column} />
+}

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

@@ -0,0 +1,396 @@
+// KNative cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getKnativeConditionStatus,
+  getKnativeServiceUrl,
+  getKnativeServiceLatestRevision,
+  getKnativeServiceTraffic,
+  getRevisionStatus,
+  getRevisionImage,
+  getRevisionConcurrency,
+  getRouteUrl,
+  getRouteTraffic,
+  getConfigurationLatestCreated,
+  getConfigurationLatestReady,
+  getBrokerAddress,
+  getTriggerBroker,
+  getTriggerSubscriber,
+  getTriggerFilter,
+  getSourceSink,
+  getPingSourceSchedule,
+  getPingSourceData,
+  getChannelAddress,
+  getSubscriptionChannel,
+  getSubscriptionSubscriber,
+  getSequenceStepCount,
+  getParallelBranchCount,
+  getDomainMappingUrl,
+  getServerlessServiceMode,
+} from '../resource-utils-knative'
+
+function StatusCell({ resource, getStatus }: { resource: any; getStatus: (r: any) => { text: string; color: string } }) {
+  const status = getStatus(resource)
+  return (
+    <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+      {status.text}
+    </span>
+  )
+}
+
+function TextCell({ value }: { value: string }) {
+  return <span className="text-sm text-theme-text-secondary truncate block">{value}</span>
+}
+
+function NumberCell({ value }: { value: number }) {
+  return <span className="text-sm text-theme-text-secondary">{value}</span>
+}
+
+function DefaultCell() {
+  return <span className="text-sm text-theme-text-tertiary">-</span>
+}
+
+// ============================================================================
+// KNATIVE SERVICE
+// ============================================================================
+
+export function KnativeServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'url':
+      return <TextCell value={getKnativeServiceUrl(resource)} />
+    case 'latestRevision':
+      return <TextCell value={getKnativeServiceLatestRevision(resource)} />
+    case 'traffic':
+      return <TextCell value={getKnativeServiceTraffic(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// REVISION
+// ============================================================================
+
+export function RevisionCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getRevisionStatus} />
+    case 'routing': {
+      const state = resource?.metadata?.labels?.['serving.knative.dev/routingState'] || ''
+      if (state === 'active') return <span className="text-green-400 text-sm">Active</span>
+      if (state === 'reserve') return <span className="text-theme-text-tertiary text-sm">Reserve</span>
+      return <TextCell value={state || '-'} />
+    }
+    case 'image':
+      return <TextCell value={getRevisionImage(resource)} />
+    case 'concurrency':
+      return <TextCell value={getRevisionConcurrency(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// ROUTE
+// ============================================================================
+
+export function RouteCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'url':
+      return <TextCell value={getRouteUrl(resource)} />
+    case 'traffic':
+      return <TextCell value={getRouteTraffic(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+
+export function ConfigurationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'latestCreated':
+      return <TextCell value={getConfigurationLatestCreated(resource)} />
+    case 'latestReady':
+      return <TextCell value={getConfigurationLatestReady(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// BROKER
+// ============================================================================
+
+export function BrokerCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'address':
+      return <TextCell value={getBrokerAddress(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// TRIGGER
+// ============================================================================
+
+export function TriggerCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'broker':
+      return <TextCell value={getTriggerBroker(resource)} />
+    case 'subscriber':
+      return <TextCell value={getTriggerSubscriber(resource)} />
+    case 'filter':
+      return <TextCell value={getTriggerFilter(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// EVENTTYPE
+// ============================================================================
+
+export function EventTypeCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'type':
+      return <TextCell value={resource?.spec?.type || '-'} />
+    case 'source':
+      return <TextCell value={resource?.spec?.source || '-'} />
+    case 'reference': {
+      const ref = resource?.spec?.reference
+      if (ref) return <TextCell value={`${ref.kind || ''}/${ref.name || ''}`} />
+      const broker = resource?.spec?.broker
+      if (broker) return <TextCell value={`Broker/${broker}`} />
+      return <DefaultCell />
+    }
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// PING SOURCE
+// ============================================================================
+
+export function PingSourceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'schedule':
+      return <TextCell value={getPingSourceSchedule(resource)} />
+    case 'sink':
+      return <TextCell value={getSourceSink(resource)} />
+    case 'data':
+      return <TextCell value={getPingSourceData(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// APISERVERSOURCE / CONTAINERSOURCE (identical columns: status + sink)
+// ============================================================================
+
+function SourceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'sink':
+      return <TextCell value={getSourceSink(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+export { SourceCell as ApiServerSourceCell, SourceCell as ContainerSourceCell }
+
+// ============================================================================
+// SINKBINDING
+// ============================================================================
+
+export function SinkBindingCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'sink':
+      return <TextCell value={getSourceSink(resource)} />
+    case 'subject': {
+      const subject = resource?.spec?.subject
+      if (!subject) return <TextCell value="-" />
+      if (subject.name) return <TextCell value={`${subject.kind || ''}/${subject.name}`} />
+      if (subject.selector?.matchLabels) {
+        const labels = Object.entries(subject.selector.matchLabels).map(([k, v]) => `${k}=${v}`).join(', ')
+        return <TextCell value={`${subject.kind || ''} (${labels})`} />
+      }
+      return <TextCell value={subject.kind || '-'} />
+    }
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// CHANNEL / INMEMORYCHANNEL (identical columns: status + address)
+// ============================================================================
+
+function ChannelCellBase({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'address':
+      return <TextCell value={getChannelAddress(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+export { ChannelCellBase as ChannelCell, ChannelCellBase as InMemoryChannelCell }
+
+// ============================================================================
+// SUBSCRIPTION
+// ============================================================================
+
+export function SubscriptionCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'channel':
+      return <TextCell value={getSubscriptionChannel(resource)} />
+    case 'subscriber':
+      return <TextCell value={getSubscriptionSubscriber(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// SEQUENCE
+// ============================================================================
+
+export function SequenceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'steps':
+      return <NumberCell value={getSequenceStepCount(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// PARALLEL
+// ============================================================================
+
+export function ParallelCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'branches':
+      return <NumberCell value={getParallelBranchCount(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// DOMAINMAPPING
+// ============================================================================
+
+export function DomainMappingCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'url':
+      return <TextCell value={getDomainMappingUrl(resource)} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// KNATIVE INGRESS
+// ============================================================================
+
+export function KnativeIngressCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'ingressClass': {
+      const cls = resource?.metadata?.annotations?.['networking.knative.dev/ingress.class'] || '-'
+      // Show just the short name (e.g., "kourier" from "kourier.ingress.networking.knative.dev")
+      const short = cls.includes('.') ? cls.split('.')[0] : cls
+      return <TextCell value={short} />
+    }
+    case 'hosts': {
+      const rules = resource?.spec?.rules || []
+      const allHosts = rules.flatMap((r: any) => r.hosts || [])
+      const unique = [...new Set(allHosts)]
+      return <TextCell value={unique.length > 0 ? unique.join(', ') : '-'} />
+    }
+    case 'visibility': {
+      const rules = resource?.spec?.rules || []
+      const vis = rules[0]?.visibility || '-'
+      return <TextCell value={vis} />
+    }
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// KNATIVE CERTIFICATE
+// ============================================================================
+
+export function KnativeCertificateCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'dnsNames': {
+      const names = resource?.spec?.dnsNames || []
+      return <TextCell value={names.length > 0 ? names.join(', ') : '-'} />
+    }
+    case 'secretName':
+      return <TextCell value={resource?.spec?.secretName || '-'} />
+    default:
+      return <DefaultCell />
+  }
+}
+
+// ============================================================================
+// SERVERLESSSERVICE
+// ============================================================================
+
+export function ServerlessServiceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status':
+      return <StatusCell resource={resource} getStatus={getKnativeConditionStatus} />
+    case 'mode': {
+      const mode = getServerlessServiceMode(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          mode === 'Proxy' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400'
+        )}>
+          {mode}
+        </span>
+      )
+    }
+    default:
+      return <DefaultCell />
+  }
+}

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

@@ -0,0 +1,85 @@
+// Kyverno / Policy Report cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getPolicyReportStatus,
+  getPolicyReportSummary,
+  getKyvernoPolicyStatus,
+  getKyvernoPolicyAction,
+  getKyvernoPolicyRuleCount,
+} from '../resource-utils-kyverno'
+
+export function PolicyReportCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getPolicyReportStatus(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 'pass': {
+      const summary = getPolicyReportSummary(resource)
+      return <span className={clsx('text-sm', summary.pass > 0 ? 'text-green-400' : 'text-theme-text-tertiary')}>{summary.pass}</span>
+    }
+    case 'fail': {
+      const summary = getPolicyReportSummary(resource)
+      return <span className={clsx('text-sm', summary.fail > 0 ? 'text-red-400 font-medium' : 'text-theme-text-tertiary')}>{summary.fail}</span>
+    }
+    case 'warn': {
+      const summary = getPolicyReportSummary(resource)
+      return <span className={clsx('text-sm', summary.warn > 0 ? 'text-yellow-400' : 'text-theme-text-tertiary')}>{summary.warn}</span>
+    }
+    case 'error': {
+      const summary = getPolicyReportSummary(resource)
+      return <span className={clsx('text-sm', summary.error > 0 ? 'text-red-400 font-medium' : 'text-theme-text-tertiary')}>{summary.error}</span>
+    }
+    case 'skip': {
+      const summary = getPolicyReportSummary(resource)
+      return <span className={clsx('text-sm', summary.skip > 0 ? 'text-blue-400' : 'text-theme-text-tertiary')}>{summary.skip}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ClusterPolicyReportCell({ resource, column }: { resource: any; column: string }) {
+  // Same rendering logic as PolicyReport
+  return <PolicyReportCell resource={resource} column={column} />
+}
+
+export function KyvernoPolicyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getKyvernoPolicyStatus(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 = getKyvernoPolicyAction(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          action === 'Enforce' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400',
+        )}>
+          {action}
+        </span>
+      )
+    }
+    case 'rules': {
+      const count = getKyvernoPolicyRuleCount(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 ClusterPolicyCell({ resource, column }: { resource: any; column: string }) {
+  // Same rendering logic as KyvernoPolicy
+  return <KyvernoPolicyCell resource={resource} column={column} />
+}

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

@@ -0,0 +1,74 @@
+// Prometheus Operator cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getServiceMonitorStatus,
+  getServiceMonitorEndpointCount,
+  getServiceMonitorJobLabel,
+  getServiceMonitorSelector,
+  getPrometheusRuleStatus,
+  getPrometheusRuleGroupCount,
+  getPrometheusRuleTotalRules,
+  getPodMonitorStatus,
+  getPodMonitorEndpointCount,
+  getPodMonitorSelector,
+} from '../resource-utils-prometheus'
+
+export function ServiceMonitorCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getServiceMonitorStatus(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 'endpoints':
+      return <span className="text-sm text-theme-text-secondary">{getServiceMonitorEndpointCount(resource)}</span>
+    case 'jobLabel':
+      return <span className="text-sm text-theme-text-secondary truncate block">{getServiceMonitorJobLabel(resource)}</span>
+    case 'selector':
+      return <span className="text-sm text-theme-text-secondary truncate block">{getServiceMonitorSelector(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function PrometheusRuleCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getPrometheusRuleStatus(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 'groups':
+      return <span className="text-sm text-theme-text-secondary">{getPrometheusRuleGroupCount(resource)}</span>
+    case 'rules':
+      return <span className="text-sm text-theme-text-secondary">{getPrometheusRuleTotalRules(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function PodMonitorCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getPodMonitorStatus(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 'endpoints':
+      return <span className="text-sm text-theme-text-secondary">{getPodMonitorEndpointCount(resource)}</span>
+    case 'selector':
+      return <span className="text-sm text-theme-text-secondary truncate block">{getPodMonitorSelector(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}