@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,227 @@
+import { Server, GitBranch, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection } from '../../ui/drawer-components'
+
+interface RolloutRendererProps {
+  data: any
+}
+
+export function RolloutRenderer({ data }: RolloutRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const phase = status.phase || 'Unknown'
+  const conditions = status.conditions || []
+
+  const canaryStrategy = spec.strategy?.canary
+  const blueGreenStrategy = spec.strategy?.blueGreen
+  const isCanary = !!canaryStrategy
+  const steps = canaryStrategy?.steps || []
+  const currentStepIndex = status.currentStepIndex
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (phase === 'Degraded') {
+    problems.push({ color: 'red', message: status.message || 'Rollout is degraded' })
+  }
+
+  const progressDeadlineCond = conditions.find(
+    (c: any) => c.type === 'Progressing' && c.status === 'False' && c.reason === 'ProgressDeadlineExceeded'
+  )
+  if (progressDeadlineCond) {
+    problems.push({ color: 'red', message: progressDeadlineCond.message || 'Progress deadline exceeded' })
+  }
+
+  const invalidSpecCond = conditions.find(
+    (c: any) => c.type === 'InvalidSpec' && c.status === 'True'
+  )
+  if (invalidSpecCond) {
+    problems.push({ color: 'red', message: invalidSpecCond.message || 'Invalid rollout spec' })
+  }
+
+  if (phase === 'Paused') {
+    problems.push({ color: 'yellow', message: 'Rollout is paused' })
+  }
+
+  // Phase badge color
+  const phaseColor = (() => {
+    switch (phase) {
+      case 'Healthy': return 'status-healthy'
+      case 'Paused': return 'status-degraded'
+      case 'Progressing': return 'status-degraded'
+      case 'Degraded': return 'status-unhealthy'
+      default: return 'status-unknown'
+    }
+  })()
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {problems.map((problem, i) => (
+        <div
+          key={i}
+          className={clsx(
+            'mb-4 p-3 border rounded-lg',
+            problem.color === 'red'
+              ? 'bg-red-500/10 border-red-500/30'
+              : 'bg-yellow-500/10 border-yellow-500/30'
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <AlertTriangle
+              className={clsx(
+                'w-4 h-4 mt-0.5 shrink-0',
+                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+              )}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className={clsx(
+                  'text-sm font-medium',
+                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+                )}
+              >
+                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
+              </div>
+              <div
+                className={clsx(
+                  'text-xs mt-1',
+                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
+                )}
+              >
+                {problem.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {/* Status section */}
+      <Section title="Status" icon={Server}>
+        <PropertyList>
+          <Property
+            label="Phase"
+            value={
+              <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', phaseColor)}>
+                {phase}
+              </span>
+            }
+          />
+          <Property label="Replicas" value={`${status.availableReplicas || 0}/${spec.replicas || 0}`} />
+          <Property label="Updated" value={status.updatedReplicas} />
+          <Property label="Current Pod Hash" value={status.currentPodHash} />
+          <Property label="Stable RS" value={status.stableRS} />
+          <Property label="Message" value={status.message} />
+        </PropertyList>
+      </Section>
+
+      {/* Strategy section */}
+      <Section title="Strategy" icon={GitBranch}>
+        <PropertyList>
+          {isCanary ? (
+            <>
+              <Property label="Strategy" value="Canary" />
+              {steps.length > 0 && currentStepIndex !== undefined && (
+                <Property label="Current Step" value={`${currentStepIndex}/${steps.length}`} />
+              )}
+              {status.canary?.weights?.canary?.weight !== undefined && (
+                <Property label="Canary Weight" value={`${status.canary.weights.canary.weight}%`} />
+              )}
+              {status.canary?.weights?.stable?.weight !== undefined && (
+                <Property label="Stable Weight" value={`${status.canary.weights.stable.weight}%`} />
+              )}
+              <Property label="Canary Service" value={canaryStrategy.canaryService} />
+              <Property label="Stable Service" value={canaryStrategy.stableService} />
+            </>
+          ) : blueGreenStrategy ? (
+            <>
+              <Property label="Strategy" value="Blue-Green" />
+              <Property label="Active Service" value={blueGreenStrategy.activeService} />
+              <Property label="Preview Service" value={blueGreenStrategy.previewService} />
+              <Property
+                label="Auto Promote"
+                value={
+                  blueGreenStrategy.autoPromotionEnabled !== undefined
+                    ? String(blueGreenStrategy.autoPromotionEnabled)
+                    : undefined
+                }
+              />
+            </>
+          ) : (
+            <Property label="Strategy" value="Unknown" />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Canary Steps visual */}
+      {isCanary && steps.length > 0 && (
+        <Section title={`Canary Steps (${steps.length})`} defaultExpanded>
+          <div className="space-y-1">
+            {steps.map((step: any, index: number) => {
+              const isCompleted = currentStepIndex !== undefined && index < currentStepIndex
+              const isCurrent = currentStepIndex !== undefined && index === currentStepIndex
+              const isPending = currentStepIndex === undefined || index > currentStepIndex
+
+              const stepLabel = (() => {
+                if (step.setWeight !== undefined) return `Set Weight: ${step.setWeight}%`
+                if (step.pause !== undefined) {
+                  if (step.pause.duration) return `Pause: ${step.pause.duration}`
+                  return 'Pause: manual'
+                }
+                // Handle other step types generically
+                const key = Object.keys(step)[0]
+                if (key) return `${key}: ${JSON.stringify(step[key])}`
+                return 'Unknown step'
+              })()
+
+              return (
+                <div
+                  key={index}
+                  className={clsx(
+                    'flex items-center gap-2 px-2 py-1.5 rounded text-sm',
+                    isCurrent && 'bg-blue-500/10 border border-blue-500/30',
+                    isCompleted && 'opacity-80',
+                    isPending && 'opacity-50'
+                  )}
+                >
+                  {/* Status indicator */}
+                  <span
+                    className={clsx(
+                      'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
+                      isCompleted && 'bg-green-500/20 text-green-400',
+                      isCurrent && 'bg-blue-500/20 text-blue-400',
+                      isPending && 'bg-gray-500/20 text-gray-400'
+                    )}
+                  >
+                    {isCompleted ? '\u2713' : isCurrent ? '\u25CF' : '\u25CB'}
+                  </span>
+
+                  {/* Step index */}
+                  <span className="text-theme-text-tertiary text-xs w-4 shrink-0">{index}</span>
+
+                  {/* Step label */}
+                  <span
+                    className={clsx(
+                      'text-sm',
+                      isCurrent ? 'text-theme-text-primary font-medium' : 'text-theme-text-secondary'
+                    )}
+                  >
+                    {stepLabel}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {/* Pod Template section (collapsed by default) */}
+      <Section title="Pod Template" defaultExpanded={false}>
+        <PodTemplateSection template={spec.template} />
+      </Section>
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { Cpu } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface RuntimeClassRendererProps {
+  data: any
+}
+
+export function RuntimeClassRenderer({ data }: RuntimeClassRendererProps) {
+  const overhead = data.overhead?.podFixed
+  const hasOverhead = overhead && Object.keys(overhead).length > 0
+  const scheduling = data.scheduling
+  const nodeSelector = scheduling?.nodeSelector
+  const hasNodeSelector = nodeSelector && Object.keys(nodeSelector).length > 0
+  const tolerations = scheduling?.tolerations
+  const hasTolerations = tolerations && tolerations.length > 0
+
+  return (
+    <>
+      <Section title="Runtime" icon={Cpu}>
+        <PropertyList>
+          <Property label="Handler" value={data.handler} />
+        </PropertyList>
+      </Section>
+
+      {hasOverhead && (
+        <Section title="Overhead">
+          <PropertyList>
+            {Object.entries(overhead).map(([resource, quantity]) => (
+              <Property key={resource} label={resource} value={quantity as string} />
+            ))}
+          </PropertyList>
+        </Section>
+      )}
+
+      {(hasNodeSelector || hasTolerations) && (
+        <Section title="Scheduling">
+          <div className="space-y-3">
+            {hasNodeSelector && (
+              <div>
+                <div className="text-xs text-theme-text-tertiary mb-1">Node Selector</div>
+                <div className="flex flex-wrap gap-1">
+                  {Object.entries(nodeSelector).map(([key, value]) => (
+                    <span
+                      key={key}
+                      className="px-2 py-0.5 rounded text-xs bg-blue-500/20 text-blue-400"
+                    >
+                      {key}={value as string}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {hasTolerations && (
+              <div>
+                <div className="text-xs text-theme-text-tertiary mb-1">Tolerations</div>
+                <div className="space-y-1.5">
+                  {tolerations.map((t: any, i: number) => {
+                    const parts = [t.key, t.operator, t.value].filter(Boolean).join(' ')
+                    const effect = t.effect ? `: ${t.effect}` : ''
+                    const seconds = t.tolerationSeconds != null ? ` (${t.tolerationSeconds}s)` : ''
+                    return (
+                      <div key={i} className="bg-theme-elevated/30 rounded p-2 text-xs text-theme-text-secondary">
+                        {parts}{effect}{seconds}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { Package, ChevronDown, ChevronRight } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { formatTrivyImage } from './trivy-shared'
+
+interface SbomReportRendererProps {
+  data: any
+}
+
+const INITIAL_SHOW_COUNT = 100
+
+export function SbomReportRenderer({ data }: SbomReportRendererProps) {
+  const [showAll, setShowAll] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+
+  const report = data.report || {}
+  const scanner = report.scanner || {}
+  const labels = data.metadata?.labels || {}
+  const components = report.components || {}
+  const bom = components.components || []
+  const summary = report.summary || {}
+
+  const containerName = labels['trivy-operator.container.name'] || '-'
+  const image = formatTrivyImage(report)
+
+  const componentsCount = summary.componentsCount || bom.length
+  const depsCount = summary.dependenciesCount || 0
+  const bomFormat = components.bomFormat || '-'
+  const specVersion = components.specVersion || '-'
+
+  const displayedComponents = showAll ? bom : bom.slice(0, INITIAL_SHOW_COUNT)
+
+  return (
+    <>
+      {/* Report Overview */}
+      <Section title="Report Overview" icon={Package}>
+        <PropertyList>
+          {containerName !== '-' && <Property label="Container" value={containerName} />}
+          <Property label="Image" value={image} />
+          <Property label="Format" value={`${bomFormat} ${specVersion}`} />
+          <Property label="Components" value={String(componentsCount)} />
+          {depsCount > 0 && <Property label="Dependencies" value={String(depsCount)} />}
+          <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
+          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.updateTimestamp) + ' ago' : '-'} />
+        </PropertyList>
+      </Section>
+
+      {/* Components Table */}
+      {bom.length > 0 && (
+        <Section title="Components">
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary mb-2"
+          >
+            {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+            {bom.length} components
+          </button>
+          {expanded && (
+            <div className="overflow-x-auto -mx-1">
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="border-b border-theme-border text-theme-text-tertiary">
+                    <th className="text-left py-1.5 px-1 font-medium">Name</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Version</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Type</th>
+                    <th className="text-left py-1.5 px-1 font-medium">License</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {displayedComponents.map((comp: any, i: number) => {
+                    const license = comp.licenses?.[0]?.license?.id || comp.licenses?.[0]?.license?.name || '-'
+                    return (
+                      <tr key={`${comp.name}-${comp.version}-${i}`} className="border-b border-theme-border/50 hover:bg-theme-hover/50">
+                        <td className="py-1.5 px-1 text-theme-text-secondary max-w-[200px] truncate" title={comp.purl || comp.name}>{comp.name || '-'}</td>
+                        <td className="py-1.5 px-1 text-theme-text-secondary font-mono">{comp.version || '-'}</td>
+                        <td className="py-1.5 px-1 text-theme-text-tertiary">{comp.type || '-'}</td>
+                        <td className="py-1.5 px-1 text-theme-text-tertiary max-w-[120px] truncate" title={license}>{license}</td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+              {!showAll && bom.length > INITIAL_SHOW_COUNT && (
+                <button
+                  onClick={() => setShowAll(true)}
+                  className="mt-2 text-xs text-blue-400 hover:text-blue-300 hover:underline"
+                >
+                  Show all {bom.length} components
+                </button>
+              )}
+            </div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,121 @@
+import { Lock, Key, FileText } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner } from '../../ui/drawer-components'
+
+interface SealedSecretRendererProps {
+  data: any
+}
+
+function getScope(annotations: Record<string, string> | undefined): string {
+  if (!annotations) return 'strict'
+  if (annotations['sealedsecrets.bitnami.com/cluster-wide'] === 'true') return 'cluster-wide'
+  if (annotations['sealedsecrets.bitnami.com/namespace-wide'] === 'true') return 'namespace-wide'
+  return 'strict'
+}
+
+export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const conditions = status.conditions || []
+  const annotations = data.metadata?.annotations || {}
+
+  const encryptedData = spec.encryptedData || {}
+  const encryptedKeys = Object.keys(encryptedData)
+  const template = spec.template || {}
+  const templateMetadata = template.metadata || {}
+  const templateLabels = templateMetadata.labels
+  const templateAnnotations = templateMetadata.annotations
+  const secretType = template.type || 'Opaque'
+  const scope = getScope(annotations)
+
+  const syncedCond = conditions.find((c: any) => c.type === 'Synced')
+  const isSynced = syncedCond?.status === 'True'
+  const isNotSynced = syncedCond?.status === 'False'
+
+  const hasTemplateMetadata =
+    (templateLabels && Object.keys(templateLabels).length > 0) ||
+    (templateAnnotations && Object.keys(templateAnnotations).length > 0)
+
+  return (
+    <>
+      {/* Problem detection alert */}
+      {isNotSynced && (
+        <AlertBanner
+          variant="error"
+          title="Secret is not synced"
+          message={<>{syncedCond.reason && <span className="font-medium">{syncedCond.reason}: </span>}{syncedCond.message || 'The sealed secret failed to unseal and sync to a Secret.'}</>}
+        />
+      )}
+
+      {/* Status */}
+      <Section title="Status" icon={Lock}>
+        <PropertyList>
+          <Property
+            label="Synced"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isSynced
+                  ? 'bg-green-500/20 text-green-400'
+                  : isNotSynced
+                    ? 'bg-red-500/20 text-red-400'
+                    : 'bg-yellow-500/20 text-yellow-400'
+              )}>
+                {isSynced ? 'Synced' : isNotSynced ? 'Not Synced' : 'Unknown'}
+              </span>
+            }
+          />
+          <Property label="Secret Type" value={secretType} />
+          <Property label="Scope" value={scope} />
+          <Property label="Observed Gen" value={status.observedGeneration} />
+        </PropertyList>
+      </Section>
+
+      {/* Encrypted Keys */}
+      <Section title={`Encrypted Keys (${encryptedKeys.length})`} icon={Key}>
+        {encryptedKeys.length > 0 ? (
+          <div className="flex flex-wrap gap-1">
+            {encryptedKeys.map((key) => (
+              <span
+                key={key}
+                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+              >
+                {key}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-theme-text-tertiary">No encrypted keys</div>
+        )}
+      </Section>
+
+      {/* Template Metadata */}
+      {hasTemplateMetadata && (
+        <Section title="Template Metadata" icon={FileText}>
+          {templateLabels && Object.keys(templateLabels).length > 0 && (
+            <div className="mb-3">
+              <div className="text-xs text-theme-text-tertiary mb-1">Labels</div>
+              <KeyValueBadgeList items={templateLabels} />
+            </div>
+          )}
+          {templateAnnotations && Object.keys(templateAnnotations).length > 0 && (
+            <div>
+              <div className="text-xs text-theme-text-tertiary mb-1">Annotations</div>
+              <div className="space-y-1 max-h-48 overflow-y-auto">
+                {Object.entries(templateAnnotations).map(([k, v]) => (
+                  <div key={k} className="text-xs">
+                    <span className="text-theme-text-tertiary">{k}:</span>
+                    <span className="text-theme-text-secondary ml-1 break-all">{v as string}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </Section>
+      )}
+
+      {/* Conditions */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}