@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,111 @@
+import { Shield, AlertTriangle, Globe, Key } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { getSolverType } from './ClusterIssuerRenderer'
+
+function getChallengeStateBadge(state: string): { color: string; text: string } {
+  switch (state?.toLowerCase()) {
+    case 'valid':
+      return { text: 'Valid', color: 'bg-green-500/20 text-green-400' }
+    case 'ready':
+      return { text: 'Ready', color: 'bg-blue-500/20 text-blue-400' }
+    case 'pending':
+      return { text: 'Pending', color: 'bg-yellow-500/20 text-yellow-400' }
+    case 'processing':
+      return { text: 'Processing', color: 'bg-yellow-500/20 text-yellow-400' }
+    case 'invalid':
+      return { text: 'Invalid', color: 'bg-red-500/20 text-red-400' }
+    case 'expired':
+      return { text: 'Expired', color: 'bg-red-500/20 text-red-400' }
+    case 'errored':
+      return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
+    default:
+      return { text: state || 'Unknown', color: 'bg-gray-500/20 text-gray-400' }
+  }
+}
+
+export function ChallengeRenderer({ data }: { data: any }) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const state = status.state || ''
+  const presented = status.presented
+
+  const isError = state === 'invalid' || state === 'expired' || state === 'errored'
+
+  // Determine challenge type from spec
+  const challengeType = spec.type || (spec.solver?.http01 ? 'HTTP-01' : spec.solver?.dns01 ? 'DNS-01' : 'Unknown')
+
+  // Extract solver info
+  const solver = spec.solver || {}
+  const solverInfo = getSolverType(solver)
+
+  return (
+    <>
+      {/* Problem detection alert */}
+      {isError && (
+        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium text-red-400">Challenge {state.charAt(0).toUpperCase() + state.slice(1)}</div>
+              {status.reason && (
+                <div className="text-xs text-red-300/80 mt-1">{status.reason}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="State"
+            value={
+              <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', getChallengeStateBadge(state).color)}>
+                {getChallengeStateBadge(state).text}
+              </span>
+            }
+          />
+          <Property
+            label="Type"
+            value={
+              <span className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary font-medium">
+                {challengeType}
+              </span>
+            }
+          />
+          <Property
+            label="Presented"
+            value={presented === true ? 'Yes' : presented === false ? 'No' : '-'}
+          />
+          {spec.dnsName && <Property label="Domain" value={spec.dnsName} />}
+        </PropertyList>
+      </Section>
+
+      {/* ACME */}
+      {(spec.url || spec.token) && (
+        <Section title="ACME" icon={Globe}>
+          <PropertyList>
+            {spec.url && <Property label="Challenge URL" value={spec.url} />}
+            {spec.token && <Property label="Token" value={spec.token.length > 32 ? spec.token.slice(0, 32) + '...' : spec.token} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Solver */}
+      {solverInfo.type !== 'Unknown' && (
+        <Section title="Solver" icon={Key}>
+          <PropertyList>
+            <Property label="Type" value={solverInfo.type} />
+            {solverInfo.detail && <Property label="Detail" value={solverInfo.detail} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,164 @@
+import { useState } from 'react'
+import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER } from './trivy-shared'
+
+interface ClusterComplianceReportRendererProps {
+  data: any
+}
+
+export function ClusterComplianceReportRenderer({ data }: ClusterComplianceReportRendererProps) {
+  const [expandedSection, setExpandedSection] = useState(true)
+  const [expandedControls, setExpandedControls] = useState<Set<string>>(new Set())
+
+  const compliance = data.spec?.compliance || {}
+  const status = data.status || {}
+  const summaryReport = status.summaryReport || {}
+  const controlChecks = Array.isArray(summaryReport.controlCheck) ? summaryReport.controlCheck : []
+  const controls = Array.isArray(compliance.controls) ? compliance.controls : []
+
+  const passCount = status.summary?.passCount || 0
+  const failCount = status.summary?.failCount || 0
+  const total = passCount + failCount
+
+  // Build a map of control definitions for descriptions
+  const controlMap = new Map<string, any>()
+  for (const ctrl of controls) {
+    if (ctrl.id) controlMap.set(ctrl.id, ctrl)
+  }
+
+  // Sort: failed first by severity, then passed
+  const sortedChecks = [...controlChecks].sort((a: any, b: any) => {
+    const aFail = (a.totalFail || 0) > 0
+    const bFail = (b.totalFail || 0) > 0
+    if (aFail !== bFail) return aFail ? -1 : 1
+    return (SEVERITY_ORDER[a.severity] ?? 99) - (SEVERITY_ORDER[b.severity] ?? 99)
+  })
+
+  const toggleControl = (id: string) => {
+    setExpandedControls(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  return (
+    <>
+      {/* Alert banner for failures */}
+      {failCount > 0 && (
+        <AlertBanner
+          variant="error"
+          icon={XCircle}
+          title={`${failCount} control${failCount !== 1 ? 's' : ''} failed`}
+          message="Review failed controls to improve cluster compliance."
+        />
+      )}
+
+      {/* Framework Overview */}
+      <Section title="Compliance Framework" icon={ShieldCheck}>
+        <PropertyList>
+          <Property label="Framework" value={compliance.title || compliance.id || '-'} />
+          {compliance.description && <Property label="Description" value={compliance.description} />}
+          {compliance.version && <Property label="Version" value={compliance.version} />}
+          {compliance.platform && <Property label="Platform" value={compliance.platform} />}
+          <Property label="Last Updated" value={status.updateTimestamp ? formatAge(status.updateTimestamp) + ' ago' : '-'} />
+        </PropertyList>
+      </Section>
+
+      {/* Summary */}
+      <Section title="Summary">
+        <div className="flex items-center gap-4 mb-3">
+          <div className="flex items-center gap-1.5">
+            <CheckCircle2 className="w-4 h-4 text-green-400" />
+            <span className="text-sm font-medium text-green-400">{passCount}</span>
+            <span className="text-xs text-theme-text-tertiary">passed</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <XCircle className="w-4 h-4 text-red-400" />
+            <span className="text-sm font-medium text-red-400">{failCount}</span>
+            <span className="text-xs text-theme-text-tertiary">failed</span>
+          </div>
+        </div>
+        {total > 0 && (
+          <div className="h-3 rounded overflow-hidden flex">
+            {passCount > 0 && <div className="h-full bg-green-500" style={{ width: `${(passCount / total) * 100}%` }} />}
+            {failCount > 0 && <div className="h-full bg-red-500" style={{ width: `${(failCount / total) * 100}%` }} />}
+          </div>
+        )}
+      </Section>
+
+      {/* Controls */}
+      {sortedChecks.length > 0 && (
+        <Section title="Controls">
+          <button
+            onClick={() => setExpandedSection(!expandedSection)}
+            className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
+          >
+            {expandedSection ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            {sortedChecks.length} controls
+          </button>
+          {expandedSection && (
+            <div className="space-y-0.5">
+              {sortedChecks.map((check: any) => {
+                const hasFail = (check.totalFail || 0) > 0
+                const controlDef = controlMap.get(check.id)
+                const isExpanded = expandedControls.has(check.id)
+                return (
+                  <div key={check.id}>
+                    <button
+                      onClick={() => toggleControl(check.id)}
+                      className="w-full flex items-center gap-2 py-1.5 px-1 rounded hover:bg-theme-hover/50 text-left"
+                    >
+                      {hasFail ? (
+                        <XCircle className="w-3.5 h-3.5 text-red-400 shrink-0" />
+                      ) : (
+                        <CheckCircle2 className="w-3.5 h-3.5 text-green-400 shrink-0" />
+                      )}
+                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[check.severity] || 'bg-gray-500/20 text-gray-400')}>
+                        {check.severity || '-'}
+                      </span>
+                      <span className="text-xs text-theme-text-secondary truncate flex-1">{check.name || check.id}</span>
+                      <span className="text-[10px] text-theme-text-tertiary shrink-0">
+                        {check.totalFail || 0}F / {check.totalPass || 0}P
+                      </span>
+                      {isExpanded ? (
+                        <ChevronDown className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                      ) : (
+                        <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                      )}
+                    </button>
+                    {isExpanded && controlDef && (
+                      <div className="ml-6 mr-1 mb-2 p-2.5 bg-theme-elevated/50 rounded border border-theme-border/50 space-y-2">
+                        <div className="text-[10px] font-mono text-theme-text-tertiary">{check.id}</div>
+                        {controlDef.description && (
+                          <div>
+                            <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Description</div>
+                            <div className="text-xs text-theme-text-secondary">{controlDef.description}</div>
+                          </div>
+                        )}
+                        {controlDef.checks?.length > 0 && (
+                          <div>
+                            <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Check IDs</div>
+                            <div className="flex flex-wrap gap-1">
+                              {controlDef.checks.map((c: any, i: number) => (
+                                <span key={i} className="text-[10px] font-mono text-theme-text-tertiary bg-theme-surface px-1.5 py-0.5 rounded">{c.id}</span>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,140 @@
+import { Globe, AlertTriangle } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getClusterExternalSecretStatus,
+  getClusterExternalSecretProvisionedNamespaces,
+  getClusterExternalSecretFailedNamespaces,
+  getClusterExternalSecretNamespaces,
+  getClusterExternalSecretNamespaceSelector,
+} from '../resource-utils-eso'
+
+interface ClusterExternalSecretRendererProps {
+  data: any
+}
+
+export function ClusterExternalSecretRenderer({ data }: ClusterExternalSecretRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const cesStatus = getClusterExternalSecretStatus(data)
+  const provisionedNamespaces = getClusterExternalSecretProvisionedNamespaces(data)
+  const failedNamespaces = getClusterExternalSecretFailedNamespaces(data)
+  const explicitNamespaces = getClusterExternalSecretNamespaces(data)
+  const namespaceSelector = getClusterExternalSecretNamespaceSelector(data)
+
+  // ExternalSecret spec embedded in the ClusterExternalSecret
+  const esSpec = data.spec?.externalSecretSpec
+  const refreshInterval = esSpec?.refreshInterval || '-'
+  const storeRef = esSpec?.secretStoreRef
+  const dataCount = (esSpec?.data || []).length
+  const dataFromCount = (esSpec?.dataFrom || []).length
+
+  return (
+    <>
+      {/* Alert for failed namespaces */}
+      {failedNamespaces.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title={`Failed in ${failedNamespaces.length} namespace${failedNamespaces.length > 1 ? 's' : ''}`}
+          message="ExternalSecret provisioning failed in one or more namespaces."
+          items={failedNamespaces.map(f => `${f.namespace}${f.reason ? `: ${f.reason}` : ''}`)}
+        />
+      )}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Globe} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={cesStatus.text} />
+          <Property label="Provisioned" value={`${provisionedNamespaces.length} namespace${provisionedNamespaces.length !== 1 ? 's' : ''}`} />
+          {failedNamespaces.length > 0 && (
+            <Property label="Failed" value={`${failedNamespaces.length} namespace${failedNamespaces.length !== 1 ? 's' : ''}`} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Namespace Targeting */}
+      <Section title="Namespace Selection" defaultExpanded>
+        {explicitNamespaces.length > 0 ? (
+          <div>
+            <div className="text-xs text-theme-text-secondary mb-1.5">Explicit Namespaces</div>
+            <div className="flex flex-wrap gap-1">
+              {explicitNamespaces.map((ns: string) => (
+                <span key={ns} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-primary">
+                  {ns}
+                </span>
+              ))}
+            </div>
+          </div>
+        ) : namespaceSelector ? (
+          <div>
+            <div className="text-xs text-theme-text-secondary mb-1.5">Label Selector</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(namespaceSelector).map(([k, v]) => (
+                <span key={k} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                  {k}={v}
+                </span>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="text-xs text-theme-text-tertiary">All namespaces (no selector)</div>
+        )}
+      </Section>
+
+      {/* Provisioned Namespaces */}
+      {provisionedNamespaces.length > 0 && (
+        <Section title={`Provisioned Namespaces (${provisionedNamespaces.length})`} defaultExpanded={provisionedNamespaces.length <= 10}>
+          <div className="flex flex-wrap gap-1">
+            {provisionedNamespaces.map((ns: string) => (
+              <span key={ns} className="px-2 py-0.5 bg-green-500/10 text-green-400 rounded text-xs">
+                {ns}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Failed Namespaces (detailed) */}
+      {failedNamespaces.length > 0 && (
+        <Section title={`Failed Namespaces (${failedNamespaces.length})`} defaultExpanded>
+          <div className="space-y-1">
+            {failedNamespaces.map((f, i) => (
+              <div key={i} className="bg-red-500/10 rounded p-2 flex items-start gap-2">
+                <AlertTriangle className="w-3.5 h-3.5 text-red-400 mt-0.5 shrink-0" />
+                <div className="text-xs">
+                  <span className="text-red-400 font-medium">{f.namespace}</span>
+                  {f.reason && (
+                    <span className="text-red-300/80 ml-1 break-all">{f.reason}</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* External Secret Spec Summary */}
+      <Section title="ExternalSecret Spec" defaultExpanded>
+        <PropertyList>
+          <Property label="Refresh Interval" value={refreshInterval} />
+          {storeRef && (
+            <>
+              <Property label="Store Name" value={storeRef.name || '-'} />
+              <Property label="Store Kind" value={storeRef.kind || 'SecretStore'} />
+            </>
+          )}
+          <Property label="Data Mappings" value={dataCount > 0 ? String(dataCount) : '-'} />
+          <Property label="Data Sources" value={dataFromCount > 0 ? String(dataFromCount) : '-'} />
+          {esSpec?.target?.creationPolicy && (
+            <Property label="Creation Policy" value={esSpec.target.creationPolicy} />
+          )}
+          {esSpec?.target?.deletionPolicy && (
+            <Property label="Deletion Policy" value={esSpec.target.deletionPolicy} />
+          )}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,153 @@
+import { Shield, AlertTriangle, Globe, Lock, Key } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+
+function detectIssuerType(spec: any): string {
+  if (spec.acme) return 'ACME'
+  if (spec.ca) return 'CA'
+  if (spec.selfSigned !== undefined) return 'SelfSigned'
+  if (spec.vault) return 'Vault'
+  return 'Unknown'
+}
+
+export function getSolverType(solver: any): { type: string; detail: string } {
+  if (solver.http01) {
+    const ingressClass = solver.http01.ingress?.class || solver.http01.ingress?.ingressClassName
+    return { type: 'HTTP-01', detail: ingressClass ? `Ingress class: ${ingressClass}` : 'Ingress solver' }
+  }
+  if (solver.dns01) {
+    const dns = solver.dns01
+    if (dns.cloudDNS) return { type: 'DNS-01', detail: `Cloud DNS (project: ${dns.cloudDNS.project})` }
+    if (dns.route53) return { type: 'DNS-01', detail: `Route 53 (region: ${dns.route53.region || 'default'})` }
+    if (dns.cloudflare) return { type: 'DNS-01', detail: 'Cloudflare' }
+    if (dns.digitalocean) return { type: 'DNS-01', detail: 'DigitalOcean' }
+    if (dns.azureDNS) return { type: 'DNS-01', detail: 'Azure DNS' }
+    if (dns.akamai) return { type: 'DNS-01', detail: 'Akamai' }
+    if (dns.rfc2136) return { type: 'DNS-01', detail: 'RFC2136' }
+    if (dns.webhook) return { type: 'DNS-01', detail: `Webhook (${dns.webhook.groupName || 'custom'})` }
+    return { type: 'DNS-01', detail: `Provider: ${Object.keys(dns).join(', ')}` }
+  }
+  return { type: 'Unknown', detail: '' }
+}
+
+function IssuerRendererBase({ data, kind }: { data: any; kind: string }) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const isReady = readyCond?.status === 'True'
+  const isNotReady = readyCond?.status === 'False'
+
+  const issuerType = detectIssuerType(spec)
+
+  const acme = spec.acme
+  const acmeStatus = status.acme
+  const solvers = acme?.solvers || []
+
+  return (
+    <>
+      {/* Problem detection alert */}
+      {isNotReady && (
+        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium text-red-400">{kind} Not Ready</div>
+              <div className="text-xs text-red-300/80 mt-1">
+                {readyCond.reason && <span className="font-medium">{readyCond.reason}: </span>}
+                {readyCond.message || 'The issuer is not in a ready state.'}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="Ready"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isReady
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-red-500/20 text-red-400'
+              )}>
+                {isReady ? 'Ready' : 'Not Ready'}
+              </span>
+            }
+          />
+          <Property label="Issuer Type" value={issuerType} />
+        </PropertyList>
+      </Section>
+
+      {/* ACME section */}
+      {acme && (
+        <Section title="ACME" icon={Globe}>
+          <PropertyList>
+            <Property label="Server" value={acme.server} />
+            <Property label="Email" value={acme.email} />
+            <Property label="Private Key Secret" value={acme.privateKeySecretRef?.name} />
+            <Property label="Registered Email" value={acmeStatus?.lastRegisteredEmail} />
+            <Property label="Account URI" value={acmeStatus?.uri} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Solvers section */}
+      {solvers.length > 0 && (
+        <Section title={`Solvers (${solvers.length})`} icon={Key}>
+          <div className="space-y-2">
+            {solvers.map((solver: any, i: number) => {
+              const { type, detail } = getSolverType(solver)
+              return (
+                <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                  <div className="flex items-center gap-2">
+                    <span className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary font-medium">
+                      {type}
+                    </span>
+                    {detail && (
+                      <span className="text-xs text-theme-text-tertiary">{detail}</span>
+                    )}
+                  </div>
+                  {solver.selector && (
+                    <div className="mt-2 text-xs text-theme-text-tertiary">
+                      {solver.selector.dnsNames && (
+                        <div>DNS Names: {solver.selector.dnsNames.join(', ')}</div>
+                      )}
+                      {solver.selector.dnsZones && (
+                        <div>DNS Zones: {solver.selector.dnsZones.join(', ')}</div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {/* CA section */}
+      {spec.ca && (
+        <Section title="CA" icon={Lock}>
+          <PropertyList>
+            <Property label="Secret Name" value={spec.ca.secretName} />
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}
+
+export function ClusterIssuerRenderer({ data }: { data: any }) {
+  return <IssuerRendererBase data={data} kind="ClusterIssuer" />
+}
+
+export function IssuerRenderer({ data }: { data: any }) {
+  return <IssuerRendererBase data={data} kind="Issuer" />
+}