@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,221 @@
+import { useState, useMemo } from 'react'
+import { ShieldCheck, ChevronDown, ChevronRight, CheckCircle2, XCircle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { SEVERITY_BADGE_COLORS, SEVERITY_ORDER, TrivyAlertBanner } from './trivy-shared'
+
+interface ConfigAuditReportRendererProps {
+  data: any
+}
+
+interface GroupedCheck {
+  checkID: string
+  title: string
+  severity: string
+  success: boolean
+  description: string
+  remediation: string
+  messages: string[]
+  count: number
+}
+
+function groupChecks(checks: any[]): GroupedCheck[] {
+  const map = new Map<string, GroupedCheck>()
+
+  for (const check of checks) {
+    const id = check.checkID || 'unknown'
+    const existing = map.get(id)
+    if (existing) {
+      existing.count++
+      if (!check.success) existing.success = false
+      if ((SEVERITY_ORDER[check.severity] ?? 99) < (SEVERITY_ORDER[existing.severity] ?? 99)) {
+        existing.severity = check.severity
+      }
+      if (Array.isArray(check.messages)) {
+        for (const msg of check.messages) {
+          if (msg && !existing.messages.includes(msg)) {
+            existing.messages.push(msg)
+          }
+        }
+      }
+    } else {
+      map.set(id, {
+        checkID: id,
+        title: check.title || '-',
+        severity: check.severity || 'LOW',
+        success: check.success,
+        description: check.description || '',
+        remediation: check.remediation || '',
+        messages: Array.isArray(check.messages) ? [...check.messages] : [],
+        count: 1,
+      })
+    }
+  }
+
+  const grouped = Array.from(map.values())
+  grouped.sort((a, b) => {
+    if (a.success !== b.success) return a.success ? 1 : -1
+    return (SEVERITY_ORDER[a.severity] ?? 99) - (SEVERITY_ORDER[b.severity] ?? 99)
+  })
+  return grouped
+}
+
+export function ConfigAuditReportRenderer({ data }: ConfigAuditReportRendererProps) {
+  const [expandedSection, setExpandedSection] = useState(true)
+  const [expandedChecks, setExpandedChecks] = useState<Set<string>>(new Set())
+
+  const report = data.report || {}
+  const summary = report.summary || {}
+  const checks = Array.isArray(report.checks) ? report.checks : []
+  const scanner = report.scanner || {}
+
+  const critical = summary.criticalCount || 0
+  const high = summary.highCount || 0
+  const medium = summary.mediumCount || 0
+  const low = summary.lowCount || 0
+
+  const grouped = useMemo(() => groupChecks(checks), [checks])
+  const passCount = grouped.filter(g => g.success).length
+  const failCount = grouped.length - passCount
+
+  const containerCount = useMemo(() => {
+    const names = new Set<string>()
+    for (const check of checks) {
+      if (Array.isArray(check.messages)) {
+        for (const msg of check.messages) {
+          const match = msg?.match(/Container '([^']+)'/)
+          if (match) names.add(match[1])
+        }
+      }
+    }
+    return names.size
+  }, [checks])
+
+  const toggleCheck = (checkID: string) => {
+    setExpandedChecks(prev => {
+      const next = new Set(prev)
+      if (next.has(checkID)) next.delete(checkID)
+      else next.add(checkID)
+      return next
+    })
+  }
+
+  return (
+    <>
+      <TrivyAlertBanner critical={critical} high={high} noun="finding" />
+
+      {/* Report Overview */}
+      <Section title="Report Overview" icon={ShieldCheck}>
+        <PropertyList>
+          <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
+          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.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>
+        <div className="flex flex-wrap gap-2">
+          {[
+            { label: 'Critical', count: critical, key: 'CRITICAL' },
+            { label: 'High', count: high, key: 'HIGH' },
+            { label: 'Medium', count: medium, key: 'MEDIUM' },
+            { label: 'Low', count: low, key: 'LOW' },
+          ].filter(({ count }) => count > 0).map(({ label, count, key }) => (
+            <span key={key} className={clsx('px-2 py-0.5 rounded text-xs font-medium', SEVERITY_BADGE_COLORS[key])}>
+              {count} {label}
+            </span>
+          ))}
+          {failCount === 0 && (
+            <span className="px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-400">All checks passed</span>
+          )}
+        </div>
+      </Section>
+
+      {/* Checks - grouped by checkID */}
+      {grouped.length > 0 && (
+        <Section title="Checks">
+          <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" />}
+            {grouped.length} unique checks{containerCount > 0 ? ` (${containerCount} containers scanned)` : ''}
+          </button>
+          {expandedSection && (
+            <div className="space-y-0.5">
+              {grouped.map((group) => {
+                const isExpanded = expandedChecks.has(group.checkID)
+                return (
+                  <div key={group.checkID}>
+                    <button
+                      onClick={() => toggleCheck(group.checkID)}
+                      className="w-full flex items-center gap-2 py-1.5 px-1 rounded hover:bg-theme-hover/50 text-left"
+                    >
+                      {group.success ? (
+                        <CheckCircle2 className="w-3.5 h-3.5 text-green-400 shrink-0" />
+                      ) : (
+                        <XCircle className="w-3.5 h-3.5 text-red-400 shrink-0" />
+                      )}
+                      <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', SEVERITY_BADGE_COLORS[group.severity] || 'bg-gray-500/20 text-gray-400')}>
+                        {group.severity}
+                      </span>
+                      <span className="text-xs text-theme-text-secondary truncate flex-1">{group.title}</span>
+                      {group.count > 1 && (
+                        <span className="text-[10px] text-theme-text-tertiary shrink-0">{group.count} containers</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 && (
+                      <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">{group.checkID}</div>
+                        {group.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">{group.description}</div>
+                          </div>
+                        )}
+                        {group.messages.length > 0 && (
+                          <div>
+                            <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Affected</div>
+                            <div className="space-y-0.5">
+                              {group.messages.map((msg, i) => (
+                                <div key={i} className="text-xs text-theme-text-secondary">{msg}</div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        {group.remediation && (
+                          <div>
+                            <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-0.5">Remediation</div>
+                            <div className="text-xs text-theme-text-secondary">{group.remediation}</div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,124 @@
+import { useState, useRef, useEffect } from 'react'
+import { AlertTriangle, Copy, Check } from 'lucide-react'
+import { Section, ExpandableSection } from '../../ui/drawer-components'
+import { Tooltip } from '../../ui/Tooltip'
+import { formatBytes } from '../../../utils/format'
+
+interface ConfigMapRendererProps {
+  data: any
+}
+
+// Short = single-line and under 120 chars — render inline
+function isShortValue(value: string): boolean {
+  return !value.includes('\n') && value.length <= 120
+}
+
+function TruncatedKey({ text }: { text: string }) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (el) setIsTruncated(el.scrollWidth > el.clientWidth)
+  }, [text])
+
+  return (
+    <Tooltip content={text} delay={100} position="top" disabled={!isTruncated}>
+      <span ref={ref} className="truncate block">{text}</span>
+    </Tooltip>
+  )
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText(text)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1500)
+      }}
+      className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover/row:opacity-100 transition-opacity shrink-0"
+      title="Copy value"
+    >
+      {copied ? <Check className="w-3 h-3 text-green-400" /> : <Copy className="w-3 h-3" />}
+    </button>
+  )
+}
+
+export function ConfigMapRenderer({ data }: ConfigMapRendererProps) {
+  const dataEntries = Object.entries((data.data || {}) as Record<string, string>)
+  const binaryDataKeys = Object.keys(data.binaryData || {})
+
+  const shortEntries = dataEntries.filter(([, v]) => isShortValue(v))
+  const longEntries = dataEntries.filter(([, v]) => !isShortValue(v))
+
+  // Dynamic value column width: give values as much room as they need (30-55%)
+  const maxValueLen = shortEntries.reduce((max, [, v]) => Math.max(max, v.length), 0)
+  // Short values (< 10 chars like "true", "5m") → values get 30%, keys get 70%
+  // Long values (URLs, addresses) → values get up to 55%
+  const valuePercent = Math.min(55, Math.max(30, Math.round(maxValueLen * 1.5 + 10)))
+  const keyPercent = 100 - valuePercent
+
+  return (
+    <>
+      <Section title={`Data (${dataEntries.length + binaryDataKeys.length} keys)`} defaultExpanded>
+        <div className="space-y-3">
+          {/* Short values: compact table */}
+          {shortEntries.length > 0 && (
+            <table className="w-full bg-theme-base rounded overflow-hidden text-xs border-separate border-spacing-0 table-fixed">
+              <colgroup>
+                <col style={{ width: `${keyPercent}%` }} />
+                <col style={{ width: `${valuePercent}%` }} />
+                <col style={{ width: '20px' }} />
+              </colgroup>
+              <tbody>
+                {shortEntries.map(([key, value], i) => (
+                  <tr key={key} className={`group/row ${i % 2 === 0 ? '' : 'bg-theme-elevated/30'}`}>
+                    <td className="px-2.5 py-1.5 text-theme-text-secondary font-medium truncate align-top">
+                      <TruncatedKey text={key} />
+                    </td>
+                    <td className="px-2.5 py-1.5 text-theme-text-primary font-mono break-all align-top">
+                      {value}
+                    </td>
+                    <td className="py-1.5 pr-2 align-top">
+                      <CopyButton text={value} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+
+          {/* Long/multiline values: expandable code blocks */}
+          {longEntries.map(([key, value]) => {
+            const isLarge = value.length > 500
+            return (
+              <ExpandableSection key={key} title={`${key} (${formatBytes(value.length)})`} defaultExpanded={!isLarge}>
+                <pre className="bg-theme-base rounded p-2 text-xs text-theme-text-secondary overflow-x-auto max-h-60 whitespace-pre-wrap">
+                  {value}
+                </pre>
+              </ExpandableSection>
+            )
+          })}
+
+          {binaryDataKeys.map((key) => (
+            <div key={key} className="text-sm text-theme-text-secondary">
+              {key} <span className="text-xs">(binary)</span>
+            </div>
+          ))}
+          {dataEntries.length === 0 && binaryDataKeys.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No data</div>
+          )}
+        </div>
+      </Section>
+
+      {data.immutable && (
+        <div className="flex items-center gap-2 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-yellow-400 text-sm">
+          <AlertTriangle className="w-4 h-4" />
+          Immutable ConfigMap
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,86 @@
+import { Clock, Pause } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { formatAge, cronToHuman } from '../resource-utils'
+
+interface CronJobRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CronJobRenderer({ data, onNavigate }: CronJobRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+
+  // Check for issues or notable states
+  const isSuspended = spec.suspend === true
+  const hasNeverRun = !status.lastScheduleTime
+
+  // Calculate time since last success vs last schedule
+  const lastScheduleAge = status.lastScheduleTime ? new Date().getTime() - new Date(status.lastScheduleTime).getTime() : 0
+  const lastSuccessAge = status.lastSuccessfulTime ? new Date().getTime() - new Date(status.lastSuccessfulTime).getTime() : 0
+  const recentFailures = lastScheduleAge > 0 && lastSuccessAge > lastScheduleAge
+
+  return (
+    <>
+      {/* Suspended warning */}
+      {isSuspended && (
+        <AlertBanner
+          variant="warning"
+          icon={Pause}
+          title="CronJob Suspended"
+          message="No new jobs will be scheduled until this CronJob is resumed."
+        />
+      )}
+
+      {/* Never run warning */}
+      {hasNeverRun && !isSuspended && (
+        <AlertBanner
+          variant="info"
+          title="Never Scheduled"
+          message="This CronJob has never run. Check the schedule and starting deadline settings."
+        />
+      )}
+
+      {/* Recent failures warning */}
+      {recentFailures && (
+        <AlertBanner
+          variant="error"
+          title="Recent Jobs Failing"
+          message={<>Jobs have been scheduled but haven't succeeded recently. Last success: {formatAge(status.lastSuccessfulTime)}. Check job history and pod logs.</>}
+        />
+      )}
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property label="Schedule" value={spec.schedule} />
+          <Property label="Human" value={cronToHuman(spec.schedule)} />
+          <Property label="Suspend" value={spec.suspend ? 'Yes' : 'No'} />
+          <Property label="Last Schedule" value={status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never'} />
+          <Property label="Last Success" value={status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : 'Never'} />
+          <Property label="Active Jobs" value={status.active?.length || 0} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Configuration">
+        <PropertyList>
+          <Property label="Concurrency" value={spec.concurrencyPolicy || 'Allow'} />
+          <Property label="Starting Deadline" value={spec.startingDeadlineSeconds ? `${spec.startingDeadlineSeconds}s` : 'None'} />
+          <Property label="Success History" value={spec.successfulJobsHistoryLimit ?? 3} />
+          <Property label="Failed History" value={spec.failedJobsHistoryLimit ?? 1} />
+        </PropertyList>
+      </Section>
+
+      {status.active?.length > 0 && (
+        <Section title="Active Jobs">
+          <div className="space-y-1">
+            {status.active.map((job: any) => (
+              <div key={job.name} className="text-sm">
+                <ResourceLink name={job.name} kind="jobs" namespace={job.namespace || data.metadata?.namespace || ''} onNavigate={onNavigate} />
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,175 @@
+import { AlertTriangle, Info, Clock, Target, Server, Hash } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import type { NavigateToResource } from '../../../utils/navigation'
+import { kindToPlural } from '../../../utils/navigation'
+
+interface EventRendererProps {
+  data: any
+  onNavigate?: NavigateToResource
+}
+
+export function EventRenderer({ data, onNavigate }: EventRendererProps) {
+  const eventType = data.type || 'Normal'
+  const isWarning = eventType === 'Warning'
+  const reason = data.reason || ''
+  const message = data.message || ''
+  const count = data.count || 1
+  const involvedObject = data.involvedObject || {}
+  const source = data.source || {}
+  const firstTimestamp = data.firstTimestamp
+  const lastTimestamp = data.lastTimestamp || data.metadata?.creationTimestamp
+
+  return (
+    <>
+      {/* Event Type Banner */}
+      <div className={clsx(
+        'mb-4 p-4 rounded-lg border',
+        isWarning
+          ? 'bg-amber-500/10 border-amber-500/30'
+          : 'bg-blue-500/10 border-blue-500/30'
+      )}>
+        <div className="flex items-start gap-3">
+          {isWarning ? (
+            <AlertTriangle className="w-5 h-5 text-amber-400 mt-0.5 shrink-0" />
+          ) : (
+            <Info className="w-5 h-5 text-blue-400 mt-0.5 shrink-0" />
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isWarning ? 'bg-amber-500/20 text-amber-400' : 'bg-blue-500/20 text-blue-400'
+              )}>
+                {eventType}
+              </span>
+              {reason && (
+                <span className={clsx(
+                  'text-sm font-semibold',
+                  isWarning ? 'text-amber-300' : 'text-blue-300'
+                )}>
+                  {reason}
+                </span>
+              )}
+              {count > 1 && (
+                <span className="text-xs text-theme-text-tertiary">
+                  ({count} times)
+                </span>
+              )}
+            </div>
+            {message && (
+              <p className={clsx(
+                'text-sm break-all',
+                isWarning ? 'text-amber-200/90' : 'text-blue-200/90'
+              )}>
+                {message}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Involved Object */}
+      {involvedObject.kind && (
+        <Section title="Involved Object" icon={Target} defaultExpanded>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-theme-text-tertiary text-sm w-24">Kind</span>
+              <span className="text-theme-text-primary text-sm font-medium">{involvedObject.kind}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-theme-text-tertiary text-sm w-24">Name</span>
+              {onNavigate ? (
+                <button
+                  onClick={() => {
+                    // Parse API group from apiVersion (format: "group/version" or "v1" for core)
+                    const apiVersion = involvedObject.apiVersion || ''
+                    const group = apiVersion.includes('/') ? apiVersion.split('/')[0] : undefined
+                    onNavigate({
+                      kind: kindToPlural(involvedObject.kind),
+                      namespace: involvedObject.namespace || '',
+                      name: involvedObject.name,
+                      group,
+                    })
+                  }}
+                  className="text-blue-400 hover:text-blue-300 text-sm font-medium hover:underline"
+                >
+                  {involvedObject.name}
+                </button>
+              ) : (
+                <span className="text-theme-text-primary text-sm">{involvedObject.name}</span>
+              )}
+            </div>
+            {involvedObject.namespace && (
+              <div className="flex items-center gap-2">
+                <span className="text-theme-text-tertiary text-sm w-24">Namespace</span>
+                <span className="text-theme-text-secondary text-sm">{involvedObject.namespace}</span>
+              </div>
+            )}
+            {involvedObject.uid && (
+              <div className="flex items-center gap-2">
+                <span className="text-theme-text-tertiary text-sm w-24">UID</span>
+                <span className="text-theme-text-tertiary text-xs font-mono">{involvedObject.uid}</span>
+              </div>
+            )}
+            {involvedObject.fieldPath && (
+              <div className="flex items-center gap-2">
+                <span className="text-theme-text-tertiary text-sm w-24">Field</span>
+                <span className="text-theme-text-secondary text-sm font-mono">{involvedObject.fieldPath}</span>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {/* Timing */}
+      <Section title="Timing" icon={Clock} defaultExpanded>
+        <PropertyList>
+          {count > 1 && <Property label="Count" value={count} />}
+          {firstTimestamp && (
+            <Property label="First Seen" value={formatAge(firstTimestamp)} />
+          )}
+          {lastTimestamp && (
+            <Property label="Last Seen" value={formatAge(lastTimestamp)} />
+          )}
+          {firstTimestamp && lastTimestamp && firstTimestamp !== lastTimestamp && (
+            <Property label="Duration" value={calculateDuration(firstTimestamp, lastTimestamp)} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Source */}
+      {(source.component || source.host) && (
+        <Section title="Source" icon={Server} defaultExpanded={false}>
+          <PropertyList>
+            {source.component && <Property label="Component" value={source.component} />}
+            {source.host && <Property label="Host" value={source.host} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Resource Version Info */}
+      {involvedObject.resourceVersion && (
+        <Section title="Resource Version" icon={Hash} defaultExpanded={false}>
+          <PropertyList>
+            <Property label="Object Version" value={involvedObject.resourceVersion} />
+            {involvedObject.apiVersion && <Property label="API Version" value={involvedObject.apiVersion} />}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}
+
+function calculateDuration(first: string, last: string): string {
+  const firstDate = new Date(first)
+  const lastDate = new Date(last)
+  const diffMs = lastDate.getTime() - firstDate.getTime()
+
+  if (diffMs < 1000) return 'instant'
+  if (diffMs < 60000) return `${Math.floor(diffMs / 1000)}s`
+  if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)}m`
+  if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)}h ${Math.floor((diffMs % 3600000) / 60000)}m`
+  return `${Math.floor(diffMs / 86400000)}d ${Math.floor((diffMs % 86400000) / 3600000)}h`
+}