@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,352 @@
+import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks, ChevronDown, ChevronRight } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useState } from 'react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  getPolicyReportSummary,
+  getPolicyReportResults,
+  getPolicyReportScope,
+  getPolicyReportSource,
+  getKyvernoPolicyAction,
+  getKyvernoPolicyRuleCount,
+  getKyvernoPolicyBackground,
+  getKyvernoPolicyRules,
+  getKyvernoPolicyRuleCountByType,
+  getKyvernoPolicyAutogenRules,
+} from '../resource-utils-kyverno'
+
+// ============================================================================
+// PolicyReport / ClusterPolicyReport Renderer
+// ============================================================================
+
+interface PolicyReportRendererProps {
+  data: any
+}
+
+const resultColorMap: Record<string, string> = {
+  pass: 'bg-green-500/20 text-green-400',
+  fail: 'bg-red-500/20 text-red-400',
+  warn: 'bg-yellow-500/20 text-yellow-400',
+  error: 'bg-red-500/20 text-red-400',
+  skip: 'bg-blue-500/20 text-blue-400',
+}
+
+const severityColorMap: Record<string, string> = {
+  critical: 'bg-red-500/20 text-red-400',
+  high: 'bg-orange-500/20 text-orange-400',
+  medium: 'bg-yellow-500/20 text-yellow-400',
+  low: 'bg-blue-500/20 text-blue-400',
+  info: 'bg-theme-hover text-theme-text-tertiary',
+}
+
+function ResultRow({ result }: { result: any }) {
+  const [expanded, setExpanded] = useState(false)
+  const message = result.message || ''
+  const hasMessage = message.length > 0
+
+  return (
+    <div className="border-b border-theme-border/30 last:border-b-0">
+      <div
+        className={clsx(
+          'flex items-center gap-2 py-1.5 px-2 text-xs',
+          hasMessage && 'cursor-pointer hover:bg-theme-hover/50',
+        )}
+        onClick={() => hasMessage && setExpanded(!expanded)}
+      >
+        {hasMessage ? (
+          expanded ? <ChevronDown className="w-3 h-3 text-theme-text-tertiary shrink-0" /> : <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+        ) : (
+          <span className="w-3 shrink-0" />
+        )}
+        {/* Result status */}
+        <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', resultColorMap[result.result] || 'bg-theme-hover text-theme-text-tertiary')}>
+          {result.result || '-'}
+        </span>
+        {/* Severity */}
+        {result.severity && (
+          <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', severityColorMap[result.severity?.toLowerCase()] || 'bg-theme-hover text-theme-text-tertiary')}>
+            {result.severity}
+          </span>
+        )}
+        {/* Policy / Rule */}
+        <span className="text-theme-text-secondary truncate">{result.policy || '-'}</span>
+        {result.rule && (
+          <span className="text-theme-text-tertiary truncate">/ {result.rule}</span>
+        )}
+      </div>
+      {expanded && message && (
+        <div className="px-2 pb-2 pl-7">
+          <div className="text-xs text-theme-text-secondary break-all bg-theme-elevated/30 rounded p-2">
+            {message}
+          </div>
+          {result.category && (
+            <div className="mt-1 text-[10px] text-theme-text-tertiary">Category: {result.category}</div>
+          )}
+          {result.source && (
+            <div className="text-[10px] text-theme-text-tertiary">Source: {result.source}</div>
+          )}
+          {result.resources && result.resources.length > 0 && (
+            <div className="mt-1 text-[10px] text-theme-text-tertiary">
+              Resources: {result.resources.map((r: any) => `${r.kind}/${r.namespace ? r.namespace + '/' : ''}${r.name}`).join(', ')}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function PolicyReportRenderer({ data }: PolicyReportRendererProps) {
+  const summary = getPolicyReportSummary(data)
+  const results = getPolicyReportResults(data)
+  const scope = getPolicyReportScope(data)
+  const source = getPolicyReportSource(data)
+  const total = summary.pass + summary.fail + summary.warn + summary.error + summary.skip
+
+  const failResults = results.filter((r: any) => r.result === 'fail')
+  const errorResults = results.filter((r: any) => r.result === 'error')
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {summary.fail > 0 && (
+        <AlertBanner
+          variant="error"
+          title={`${summary.fail} policy check${summary.fail > 1 ? 's' : ''} failed`}
+          message={failResults.length <= 3
+            ? failResults.map((r: any) => `${r.policy}${r.rule ? '/' + r.rule : ''}: ${r.message || 'failed'}`).join('; ')
+            : `${failResults.slice(0, 2).map((r: any) => r.policy).join(', ')} and ${failResults.length - 2} more`
+          }
+        />
+      )}
+      {summary.error > 0 && summary.fail === 0 && (
+        <AlertBanner
+          variant="error"
+          title={`${summary.error} policy check${summary.error > 1 ? 's' : ''} errored`}
+          message={errorResults.length <= 3
+            ? errorResults.map((r: any) => `${r.policy}: ${r.message || 'error'}`).join('; ')
+            : undefined
+          }
+        />
+      )}
+      {summary.warn > 0 && summary.fail === 0 && summary.error === 0 && (
+        <AlertBanner
+          variant="warning"
+          title={`${summary.warn} policy warning${summary.warn > 1 ? 's' : ''}`}
+        />
+      )}
+
+      {/* Summary */}
+      <Section title="Summary" icon={ShieldCheck}>
+        <PropertyList>
+          {scope !== '-' && <Property label="Scope" value={scope} />}
+          {source !== '-' && <Property label="Source" value={source} />}
+        </PropertyList>
+
+        {/* Visual summary bar */}
+        {total > 0 && (
+          <div className="mt-3">
+            <div className="flex rounded overflow-hidden h-5 w-full">
+              {summary.pass > 0 && (
+                <div
+                  className="bg-green-500/60 flex items-center justify-center text-[10px] font-medium text-white"
+                  style={{ width: `${(summary.pass / total) * 100}%` }}
+                  title={`Pass: ${summary.pass}`}
+                >
+                  {summary.pass > 0 && total > 3 ? summary.pass : ''}
+                </div>
+              )}
+              {summary.fail > 0 && (
+                <div
+                  className="bg-red-500/60 flex items-center justify-center text-[10px] font-medium text-white"
+                  style={{ width: `${(summary.fail / total) * 100}%` }}
+                  title={`Fail: ${summary.fail}`}
+                >
+                  {summary.fail > 0 && total > 3 ? summary.fail : ''}
+                </div>
+              )}
+              {summary.warn > 0 && (
+                <div
+                  className="bg-yellow-500/60 flex items-center justify-center text-[10px] font-medium text-white"
+                  style={{ width: `${(summary.warn / total) * 100}%` }}
+                  title={`Warn: ${summary.warn}`}
+                >
+                  {summary.warn > 0 && total > 3 ? summary.warn : ''}
+                </div>
+              )}
+              {summary.error > 0 && (
+                <div
+                  className="bg-red-400/60 flex items-center justify-center text-[10px] font-medium text-white"
+                  style={{ width: `${(summary.error / total) * 100}%` }}
+                  title={`Error: ${summary.error}`}
+                >
+                  {summary.error > 0 && total > 3 ? summary.error : ''}
+                </div>
+              )}
+              {summary.skip > 0 && (
+                <div
+                  className="bg-blue-500/40 flex items-center justify-center text-[10px] font-medium text-white"
+                  style={{ width: `${(summary.skip / total) * 100}%` }}
+                  title={`Skip: ${summary.skip}`}
+                >
+                  {summary.skip > 0 && total > 3 ? summary.skip : ''}
+                </div>
+              )}
+            </div>
+            <div className="flex gap-3 mt-1.5 text-[10px]">
+              {summary.pass > 0 && <span className="text-green-400">Pass: {summary.pass}</span>}
+              {summary.fail > 0 && <span className="text-red-400">Fail: {summary.fail}</span>}
+              {summary.warn > 0 && <span className="text-yellow-400">Warn: {summary.warn}</span>}
+              {summary.error > 0 && <span className="text-red-400">Error: {summary.error}</span>}
+              {summary.skip > 0 && <span className="text-blue-400">Skip: {summary.skip}</span>}
+            </div>
+          </div>
+        )}
+      </Section>
+
+      {/* Results */}
+      {results.length > 0 && (
+        <Section title={`Results (${results.length})`} icon={ListChecks} defaultExpanded>
+          <div className="bg-theme-elevated/20 rounded-lg overflow-hidden max-h-[500px] overflow-y-auto">
+            {results.map((result: any, i: number) => (
+              <ResultRow key={i} result={result} />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}
+
+// ============================================================================
+// Kyverno Policy / ClusterPolicy Renderer
+// ============================================================================
+
+interface KyvernoPolicyRendererProps {
+  data: any
+}
+
+const ruleTypeColorMap: Record<string, string> = {
+  validate: 'bg-blue-500/20 text-blue-400',
+  mutate: 'bg-purple-500/20 text-purple-400',
+  generate: 'bg-green-500/20 text-green-400',
+  verifyImages: 'bg-orange-500/20 text-orange-400',
+}
+
+export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const action = getKyvernoPolicyAction(data)
+  const ruleCount = getKyvernoPolicyRuleCount(data)
+  const background = getKyvernoPolicyBackground(data)
+  const rules = getKyvernoPolicyRules(data)
+  const ruleCountByType = getKyvernoPolicyRuleCountByType(data)
+  const autogenRules = getKyvernoPolicyAutogenRules(data)
+
+  const isEnforce = action === 'Enforce'
+
+  return (
+    <>
+      {/* Configuration */}
+      <Section title="Configuration" icon={Shield}>
+        <PropertyList>
+          <Property label="Failure Action" value={
+            <span className={clsx(
+              'px-2 py-0.5 rounded text-xs font-medium',
+              isEnforce ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400',
+            )}>
+              {action}
+            </span>
+          } />
+          <Property label="Background" value={background ? 'Enabled' : 'Disabled'} />
+          {spec.webhookTimeoutSeconds && (
+            <Property label="Webhook Timeout" value={`${spec.webhookTimeoutSeconds}s`} />
+          )}
+          {spec.failurePolicy && (
+            <Property label="Failure Policy" value={spec.failurePolicy} />
+          )}
+          {spec.schemaValidation !== undefined && (
+            <Property label="Schema Validation" value={spec.schemaValidation ? 'Enabled' : 'Disabled'} />
+          )}
+        </PropertyList>
+
+        {/* Rule count summary */}
+        <div className="mt-3 flex flex-wrap gap-2">
+          {ruleCountByType.validate > 0 && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-blue-500/20 text-blue-400">
+              {ruleCountByType.validate} validate
+            </span>
+          )}
+          {ruleCountByType.mutate > 0 && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-purple-500/20 text-purple-400">
+              {ruleCountByType.mutate} mutate
+            </span>
+          )}
+          {ruleCountByType.generate > 0 && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-green-500/20 text-green-400">
+              {ruleCountByType.generate} generate
+            </span>
+          )}
+          {ruleCountByType.verifyImages > 0 && (
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-orange-500/20 text-orange-400">
+              {ruleCountByType.verifyImages} verifyImages
+            </span>
+          )}
+        </div>
+      </Section>
+
+      {/* Rules */}
+      {ruleCount > 0 && (
+        <Section title={`Rules (${ruleCount})`} icon={FileWarning} defaultExpanded>
+          <div className="space-y-2">
+            {rules.map((rule, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-sm font-medium text-theme-text-primary">{rule.name}</span>
+                  <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', ruleTypeColorMap[rule.type] || 'bg-theme-hover text-theme-text-tertiary')}>
+                    {rule.type}
+                  </span>
+                </div>
+                <div className="flex gap-3 text-[10px] text-theme-text-tertiary">
+                  {rule.hasMatch && <span>match</span>}
+                  {rule.hasExclude && <span>exclude</span>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Autogenerated Rules */}
+      {autogenRules.length > 0 && (
+        <Section title={`Autogenerated Rules (${autogenRules.length})`} defaultExpanded={false}>
+          <div className="flex flex-wrap gap-1">
+            {autogenRules.map((name: string) => (
+              <span
+                key={name}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {name}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Status rulecount from Kyverno controller */}
+      {status.rulecount && (
+        <Section title="Status Rule Count" icon={ShieldAlert} defaultExpanded={false}>
+          <PropertyList>
+            {status.rulecount.validate !== undefined && <Property label="Validate" value={status.rulecount.validate} />}
+            {status.rulecount.mutate !== undefined && <Property label="Mutate" value={status.rulecount.mutate} />}
+            {status.rulecount.generate !== undefined && <Property label="Generate" value={status.rulecount.generate} />}
+            {status.rulecount.verifyImages !== undefined && <Property label="Verify Images" value={status.rulecount.verifyImages} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,93 @@
+import { Timer } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+
+interface LeaseRendererProps {
+  data: any
+}
+
+function formatRelativeTime(timestamp: string): string {
+  const diff = Date.now() - new Date(timestamp).getTime()
+  if (diff < 0) return 'just now'
+  const seconds = Math.floor(diff / 1000)
+  if (seconds < 60) return `${seconds}s ago`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+export function LeaseRenderer({ data }: LeaseRendererProps) {
+  const spec = data.spec || {}
+
+  const renewTime: string | undefined = spec.renewTime
+  const leaseDurationSeconds: number | undefined = spec.leaseDurationSeconds
+
+  // Staleness calculation
+  let isStale = false
+  let ageRatio = 0
+  if (renewTime && leaseDurationSeconds) {
+    const elapsedSeconds = (Date.now() - new Date(renewTime).getTime()) / 1000
+    ageRatio = elapsedSeconds / leaseDurationSeconds
+    isStale = elapsedSeconds > leaseDurationSeconds
+  }
+
+  const renewColor = !renewTime
+    ? ''
+    : isStale
+      ? 'text-red-400'
+      : ageRatio > 0.75
+        ? 'text-amber-400'
+        : 'text-green-400'
+
+  return (
+    <>
+      {isStale && (
+        <AlertBanner
+          variant="warning"
+          title="Lease May Be Expired"
+          message="The lease has not been renewed within its duration period. The holder may be unhealthy."
+        />
+      )}
+
+      <Section title="Lease" icon={Timer} defaultExpanded>
+        <PropertyList>
+          <Property label="Holder" value={spec.holderIdentity || '-'} />
+          <Property
+            label="Duration"
+            value={leaseDurationSeconds != null ? `${leaseDurationSeconds}s` : '-'}
+          />
+          <Property
+            label="Transitions"
+            value={spec.leaseTransitions != null ? String(spec.leaseTransitions) : '0'}
+          />
+          <Property
+            label="Acquired"
+            value={
+              spec.acquireTime ? (
+                <span title={new Date(spec.acquireTime).toLocaleString()}>
+                  {formatRelativeTime(spec.acquireTime)}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property
+            label="Last Renewed"
+            value={
+              renewTime ? (
+                <span
+                  className={clsx(renewColor)}
+                  title={new Date(renewTime).toLocaleString()}
+                >
+                  {formatRelativeTime(renewTime)}
+                </span>
+              ) : undefined
+            }
+          />
+        </PropertyList>
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,208 @@
+import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface NetworkPolicyRendererProps {
+  data: any
+}
+
+export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
+  const spec = data.spec || {}
+  const podSelector = spec.podSelector || {}
+  const policyTypes: string[] = spec.policyTypes || []
+  const ingress: any[] | undefined = spec.ingress
+  const egress: any[] | undefined = spec.egress
+
+  const matchLabels = podSelector.matchLabels || {}
+  const hasMatchLabels = Object.keys(matchLabels).length > 0
+  const hasIngress = policyTypes.includes('Ingress')
+  const hasEgress = policyTypes.includes('Egress')
+
+  return (
+    <>
+      <Section title="Target" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="Pod Selector"
+            value={hasMatchLabels ? undefined : 'All pods in namespace'}
+          />
+        </PropertyList>
+        {hasMatchLabels && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(matchLabels).map(([k, v]) => (
+                <span
+                  key={k}
+                  className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                >
+                  {k}={String(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+        {policyTypes.length > 0 && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Policy Types</div>
+            <div className="flex flex-wrap gap-1">
+              {policyTypes.map((type) => (
+                <span
+                  key={type}
+                  className={clsx(
+                    'px-2 py-0.5 rounded text-xs border',
+                    type === 'Ingress'
+                      ? 'bg-blue-500/20 text-blue-400 border-blue-500/30'
+                      : 'bg-purple-500/20 text-purple-400 border-purple-500/30'
+                  )}
+                >
+                  {type}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Section>
+
+      {hasIngress && (
+        <Section title="Ingress Rules" icon={ArrowDownToLine} defaultExpanded>
+          {ingress && ingress.length > 0 ? (
+            <div className="space-y-3">
+              {ingress.map((rule: any, i: number) => (
+                <IngressEgressRuleCard key={i} rule={rule} direction="from" />
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-red-400">Deny all ingress</div>
+          )}
+        </Section>
+      )}
+
+      {hasEgress && (
+        <Section title="Egress Rules" icon={ArrowUpFromLine} defaultExpanded>
+          {egress && egress.length > 0 ? (
+            <div className="space-y-3">
+              {egress.map((rule: any, i: number) => (
+                <IngressEgressRuleCard key={i} rule={rule} direction="to" />
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-red-400">Deny all egress</div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}
+
+function IngressEgressRuleCard({
+  rule,
+  direction,
+}: {
+  rule: any
+  direction: 'from' | 'to'
+}) {
+  const peers: any[] = rule[direction] || []
+  const ports: any[] = rule.ports || []
+
+  return (
+    <div className="bg-theme-elevated/30 rounded p-3">
+      {peers.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1 capitalize">{direction}</div>
+          <div className="space-y-1.5">
+            {peers.map((peer: any, j: number) => (
+              <PeerEntry key={j} peer={peer} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {ports.length > 0 && (
+        <div>
+          <div className="text-xs text-theme-text-tertiary mb-1">Ports</div>
+          <div className="flex flex-wrap gap-1">
+            {ports.map((port: any, j: number) => (
+              <span
+                key={j}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {port.protocol || 'TCP'}/{port.port}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {peers.length === 0 && ports.length === 0 && (
+        <div className="text-xs text-theme-text-tertiary">Allow all</div>
+      )}
+    </div>
+  )
+}
+
+function PeerEntry({ peer }: { peer: any }) {
+  if (peer.podSelector) {
+    const labels = peer.podSelector.matchLabels || {}
+    const hasLabels = Object.keys(labels).length > 0
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">podSelector: </span>
+        {hasLabels ? (
+          <span className="inline-flex flex-wrap gap-1 align-middle">
+            {Object.entries(labels).map(([k, v]) => (
+              <span
+                key={k}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {k}={String(v)}
+              </span>
+            ))}
+          </span>
+        ) : (
+          <span className="text-xs text-theme-text-tertiary">all pods</span>
+        )}
+      </div>
+    )
+  }
+
+  if (peer.namespaceSelector) {
+    const labels = peer.namespaceSelector.matchLabels || {}
+    const hasLabels = Object.keys(labels).length > 0
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">namespaceSelector: </span>
+        {hasLabels ? (
+          <span className="inline-flex flex-wrap gap-1 align-middle">
+            {Object.entries(labels).map(([k, v]) => (
+              <span
+                key={k}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {k}={String(v)}
+              </span>
+            ))}
+          </span>
+        ) : (
+          <span className="text-xs text-theme-text-tertiary">all namespaces</span>
+        )}
+      </div>
+    )
+  }
+
+  if (peer.ipBlock) {
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">ipBlock: </span>
+        <span className="text-xs text-theme-text-primary">{peer.ipBlock.cidr}</span>
+        {peer.ipBlock.except && peer.ipBlock.except.length > 0 && (
+          <span className="text-xs text-theme-text-tertiary">
+            {' '}except {peer.ipBlock.except.join(', ')}
+          </span>
+        )}
+      </div>
+    )
+  }
+
+  return null
+}