@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,118 @@
+// ArgoCD cell components for ResourcesView table — extracted from ResourcesView.tsx
+
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getArgoApplicationProject,
+  getArgoApplicationSync,
+  getArgoApplicationHealth,
+  getArgoApplicationRepo,
+  getArgoApplicationSetGenerators,
+  getArgoApplicationSetTemplate,
+  getArgoApplicationSetAppCount,
+  getArgoApplicationSetStatus,
+  getArgoAppProjectDescription,
+  getArgoAppProjectDestinations,
+  getArgoAppProjectSources,
+} from '../resource-utils'
+
+export function ArgoApplicationCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'project': {
+      const project = getArgoApplicationProject(resource)
+      return <span className="text-sm text-theme-text-secondary">{project}</span>
+    }
+    case 'sync': {
+      const { status, color } = getArgoApplicationSync(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', color)}>
+          {status}
+        </span>
+      )
+    }
+    case 'health': {
+      const { status, color } = getArgoApplicationHealth(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', color)}>
+          {status}
+        </span>
+      )
+    }
+    case 'repo': {
+      const repo = getArgoApplicationRepo(resource)
+      return (
+        <Tooltip content={resource.spec?.source?.repoURL || resource.spec?.sources?.[0]?.repoURL || repo}>
+          <span className="text-sm text-theme-text-secondary truncate block">{repo}</span>
+        </Tooltip>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ArgoApplicationSetCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'generators': {
+      const generators = getArgoApplicationSetGenerators(resource)
+      return (
+        <Tooltip content={generators}>
+          <span className="text-sm text-theme-text-secondary truncate block">{generators}</span>
+        </Tooltip>
+      )
+    }
+    case 'template': {
+      const template = getArgoApplicationSetTemplate(resource)
+      return <span className="text-sm text-theme-text-secondary">{template}</span>
+    }
+    case 'applications': {
+      const count = getArgoApplicationSetAppCount(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {count > 0 ? count : '-'}
+        </span>
+      )
+    }
+    case 'status': {
+      const status = getArgoApplicationSetStatus(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 ArgoAppProjectCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'description': {
+      const desc = getArgoAppProjectDescription(resource)
+      return (
+        <Tooltip content={desc}>
+          <span className="text-sm text-theme-text-secondary truncate block">{desc}</span>
+        </Tooltip>
+      )
+    }
+    case 'destinations': {
+      const count = getArgoAppProjectDestinations(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {count === Infinity ? '*' : count}
+        </span>
+      )
+    }
+    case 'sources': {
+      const count = getArgoAppProjectSources(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary">
+          {count === Infinity ? '*' : count}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,164 @@
+// cert-manager cell components for ResourcesView table — extracted from ResourcesView.tsx
+
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getCertificateStatus,
+  getCertificateDomains,
+  getCertificateIssuer,
+  getCertificateExpiry,
+  getCertificateRequestStatus,
+  getCertificateRequestIssuer,
+  getCertificateRequestApproved,
+  getClusterIssuerStatus,
+  getClusterIssuerType,
+  getIssuerStatus,
+  getIssuerType,
+  getOrderState,
+  getOrderDomains,
+  getOrderIssuer,
+  getChallengeState,
+  getChallengeType,
+  getChallengeDomain,
+  getChallengePresented,
+} from '../resource-utils'
+
+export function CertificateCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCertificateStatus(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 'domains': {
+      const domains = getCertificateDomains(resource)
+      return (
+        <Tooltip content={domains}>
+          <span className="text-sm text-theme-text-secondary truncate block">{domains || '-'}</span>
+        </Tooltip>
+      )
+    }
+    case 'issuer': {
+      const issuer = getCertificateIssuer(resource)
+      return <span className="text-sm text-theme-text-secondary">{issuer}</span>
+    }
+    case 'expires': {
+      const expiry = getCertificateExpiry(resource)
+      return (
+        <span className={clsx(
+          'text-sm font-medium',
+          expiry.level === 'unhealthy' ? 'text-red-400' :
+          expiry.level === 'degraded' ? 'text-yellow-400' :
+          expiry.level === 'healthy' ? 'text-green-400' :
+          'text-theme-text-tertiary'
+        )}>
+          {expiry.text}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CertificateRequestCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCertificateRequestStatus(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 'issuer':
+      return <span className="text-sm text-theme-text-secondary">{getCertificateRequestIssuer(resource)}</span>
+    case 'approved':
+      return <span className="text-sm text-theme-text-secondary">{getCertificateRequestApproved(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ClusterIssuerCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getClusterIssuerStatus(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 'issuerType':
+      return <span className="text-sm text-theme-text-secondary">{getClusterIssuerType(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function IssuerCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getIssuerStatus(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 'issuerType':
+      return <span className="text-sm text-theme-text-secondary">{getIssuerType(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function OrderCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'state': {
+      const state = getOrderState(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', state.color)}>
+          {state.text}
+        </span>
+      )
+    }
+    case 'domains': {
+      const domains = getOrderDomains(resource)
+      return (
+        <Tooltip content={domains}>
+          <span className="text-sm text-theme-text-secondary truncate block">{domains}</span>
+        </Tooltip>
+      )
+    }
+    case 'issuer':
+      return <span className="text-sm text-theme-text-secondary">{getOrderIssuer(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ChallengeCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'state': {
+      const state = getChallengeState(resource)
+      return (
+        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', state.color)}>
+          {state.text}
+        </span>
+      )
+    }
+    case 'challengeType':
+      return <span className="text-sm text-theme-text-secondary">{getChallengeType(resource)}</span>
+    case 'domain':
+      return <span className="text-sm text-theme-text-secondary">{getChallengeDomain(resource)}</span>
+    case 'presented':
+      return <span className="text-sm text-theme-text-secondary">{getChallengePresented(resource)}</span>
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,161 @@
+// CloudNativePG cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getCNPGClusterStatus,
+  getCNPGClusterInstances,
+  getCNPGClusterPrimary,
+  getCNPGClusterImageTag,
+  getCNPGClusterStorage,
+  getCNPGBackupStatus,
+  getCNPGBackupCluster,
+  getCNPGBackupMethod,
+  getCNPGBackupDuration,
+  getCNPGScheduledBackupStatus,
+  getCNPGScheduledBackupCluster,
+  getCNPGScheduleCron,
+  getCNPGScheduledBackupLastSchedule,
+  getCNPGScheduledBackupIsSuspended,
+  getCNPGPoolerStatus,
+  getCNPGPoolerCluster,
+  getCNPGPoolerType,
+  getCNPGPoolerMode,
+  getCNPGPoolerInstances,
+} from '../resource-utils-cnpg'
+
+export function CNPGClusterCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGClusterStatus(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 'instances': {
+      const instances = getCNPGClusterInstances(resource)
+      const desired = resource.spec?.instances ?? 0
+      const ready = resource.status?.readyInstances ?? 0
+      return (
+        <span className={clsx('text-sm', ready < desired ? 'text-yellow-400' : 'text-theme-text-secondary')}>
+          {instances}
+        </span>
+      )
+    }
+    case 'primary': {
+      const primary = getCNPGClusterPrimary(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{primary}</span>
+    }
+    case 'image': {
+      const tag = getCNPGClusterImageTag(resource)
+      return <span className="text-sm text-theme-text-secondary font-mono">{tag}</span>
+    }
+    case 'storage': {
+      const storage = getCNPGClusterStorage(resource)
+      return <span className="text-sm text-theme-text-secondary">{storage}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGBackupCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGBackupStatus(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 'cluster': {
+      const cluster = getCNPGBackupCluster(resource)
+      return <span className="text-sm text-theme-text-secondary">{cluster}</span>
+    }
+    case 'method': {
+      const method = getCNPGBackupMethod(resource)
+      return <span className="text-sm text-theme-text-secondary">{method}</span>
+    }
+    case 'duration': {
+      const duration = getCNPGBackupDuration(resource)
+      return <span className="text-sm text-theme-text-secondary">{duration}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGScheduledBackupCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGScheduledBackupStatus(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 'cluster': {
+      const cluster = getCNPGScheduledBackupCluster(resource)
+      return <span className="text-sm text-theme-text-secondary">{cluster}</span>
+    }
+    case 'schedule': {
+      const cron = getCNPGScheduleCron(resource)
+      return <span className="text-sm text-theme-text-secondary font-mono">{cron}</span>
+    }
+    case 'lastSchedule': {
+      const last = getCNPGScheduledBackupLastSchedule(resource)
+      return <span className="text-sm text-theme-text-secondary">{last}</span>
+    }
+    case 'suspended': {
+      const suspended = getCNPGScheduledBackupIsSuspended(resource)
+      return (
+        <span className={clsx('text-sm', suspended ? 'text-yellow-400' : 'text-theme-text-tertiary')}>
+          {suspended ? 'Yes' : '-'}
+        </span>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function CNPGPoolerCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getCNPGPoolerStatus(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 'cluster': {
+      const cluster = getCNPGPoolerCluster(resource)
+      return <span className="text-sm text-theme-text-secondary">{cluster}</span>
+    }
+    case 'type': {
+      const type = getCNPGPoolerType(resource)
+      return (
+        <span className={clsx(
+          'inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium',
+          type === 'rw' ? 'bg-blue-500/20 text-blue-400' : 'bg-purple-500/20 text-purple-400'
+        )}>
+          {type}
+        </span>
+      )
+    }
+    case 'poolMode': {
+      const mode = getCNPGPoolerMode(resource)
+      return <span className="text-sm text-theme-text-secondary">{mode}</span>
+    }
+    case 'instances': {
+      const instances = getCNPGPoolerInstances(resource)
+      return <span className="text-sm text-theme-text-secondary">{instances}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

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

@@ -0,0 +1,115 @@
+// External Secrets Operator cell components for ResourcesView table
+
+import { clsx } from 'clsx'
+import {
+  getExternalSecretStatus,
+  getExternalSecretStore,
+  getExternalSecretRefreshInterval,
+  getExternalSecretLastSync,
+  getExternalSecretProvider,
+  getClusterExternalSecretStatus,
+  getClusterExternalSecretNamespaceCount,
+  getClusterExternalSecretFailedCount,
+  getSecretStoreStatus,
+  getSecretStoreProviderType,
+  getClusterSecretStoreStatus,
+} from '../resource-utils-eso'
+
+export function ExternalSecretCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getExternalSecretStatus(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 'store': {
+      const store = getExternalSecretStore(resource)
+      return (
+        <span className="text-sm text-theme-text-secondary truncate block" title={`${store.kind}/${store.name}`}>
+          {store.name}
+        </span>
+      )
+    }
+    case 'provider': {
+      const provider = getExternalSecretProvider(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{provider}</span>
+    }
+    case 'refreshInterval': {
+      const interval = getExternalSecretRefreshInterval(resource)
+      return <span className="text-sm text-theme-text-secondary">{interval}</span>
+    }
+    case 'lastSync': {
+      const lastSync = getExternalSecretLastSync(resource)
+      return <span className="text-sm text-theme-text-secondary">{lastSync}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ClusterExternalSecretCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getClusterExternalSecretStatus(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 'namespaces': {
+      const count = getClusterExternalSecretNamespaceCount(resource)
+      return <span className="text-sm text-theme-text-secondary">{count > 0 ? count : '-'}</span>
+    }
+    case 'failed': {
+      const failedCount = getClusterExternalSecretFailedCount(resource)
+      if (failedCount > 0) {
+        return <span className="text-sm text-red-400 font-medium">{failedCount}</span>
+      }
+      return <span className="text-sm text-theme-text-secondary">0</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function SecretStoreCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getSecretStoreStatus(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 'provider': {
+      const provider = getSecretStoreProviderType(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{provider}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
+export function ClusterSecretStoreCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'status': {
+      const status = getClusterSecretStoreStatus(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 'provider': {
+      const provider = getSecretStoreProviderType(resource)
+      return <span className="text-sm text-theme-text-secondary truncate block">{provider}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}