@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,119 @@
+import { useState } from 'react'
+import { KeyRound, ChevronDown, ChevronRight } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { SEVERITY_BADGE_COLORS, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
+
+interface ExposedSecretReportRendererProps {
+  data: any
+}
+
+const INITIAL_SHOW_COUNT = 50
+
+export function ExposedSecretReportRenderer({ data }: ExposedSecretReportRendererProps) {
+  const [showAll, setShowAll] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+
+  const report = data.report || {}
+  const summary = report.summary || {}
+  const secrets = Array.isArray(report.secrets) ? report.secrets : []
+  const scanner = report.scanner || {}
+  const labels = data.metadata?.labels || {}
+
+  const critical = summary.criticalCount || 0
+  const high = summary.highCount || 0
+  const medium = summary.mediumCount || 0
+  const low = summary.lowCount || 0
+
+  const containerName = labels['trivy-operator.container.name'] || '-'
+  const image = formatTrivyImage(report)
+
+  const displayedSecrets = showAll ? secrets : secrets.slice(0, INITIAL_SHOW_COUNT)
+
+  return (
+    <>
+      <TrivyAlertBanner critical={critical} high={high} noun="exposed secret" />
+
+      {/* Report Overview */}
+      <Section title="Report Overview" icon={KeyRound}>
+        <PropertyList>
+          <Property label="Container" value={containerName} />
+          <Property label="Image" value={image} />
+          <Property label="Scanner" value={scanner.name ? `${scanner.name} ${scanner.version || ''}`.trim() : '-'} />
+          <Property label="Scanned" value={report.updateTimestamp ? formatAge(report.updateTimestamp) + ' ago' : '-'} />
+        </PropertyList>
+      </Section>
+
+      {/* Severity Summary */}
+      <Section title="Summary">
+        <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>
+          ))}
+          {secrets.length === 0 && (
+            <span className="px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-400">No secrets found</span>
+          )}
+        </div>
+      </Section>
+
+      {/* Secrets Table */}
+      {secrets.length > 0 && (
+        <Section title="Exposed Secrets">
+          <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" />}
+            {secrets.length} secret{secrets.length !== 1 ? 's' : ''}
+          </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">Rule</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Severity</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Category</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Target</th>
+                    <th className="text-left py-1.5 px-1 font-medium">Match</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {displayedSecrets.map((secret: any, i: number) => (
+                    <tr key={`${secret.ruleID || i}-${i}`} className="border-b border-theme-border/50 hover:bg-theme-hover/50">
+                      <td className="py-1.5 px-1 text-theme-text-secondary font-mono">{secret.ruleID || '-'}</td>
+                      <td className="py-1.5 px-1">
+                        <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', SEVERITY_BADGE_COLORS[secret.severity] || 'bg-gray-500/20 text-gray-400')}>
+                          {secret.severity || '-'}
+                        </span>
+                      </td>
+                      <td className="py-1.5 px-1 text-theme-text-secondary">{secret.category || secret.title || '-'}</td>
+                      <td className="py-1.5 px-1 text-theme-text-secondary max-w-[180px] truncate font-mono" title={secret.target}>{secret.target || '-'}</td>
+                      <td className="py-1.5 px-1 text-theme-text-tertiary max-w-[150px] truncate font-mono" title={secret.match}>{secret.match || '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {!showAll && secrets.length > INITIAL_SHOW_COUNT && (
+                <button
+                  onClick={() => setShowAll(true)}
+                  className="mt-2 text-xs text-blue-400 hover:text-blue-300 hover:underline"
+                >
+                  Show all {secrets.length} secrets
+                </button>
+              )}
+            </div>
+          )}
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,172 @@
+import { KeyRound, RefreshCw, CloudCog } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getExternalSecretStatus,
+  getExternalSecretStore,
+  getExternalSecretRefreshInterval,
+  getExternalSecretLastSync,
+  getExternalSecretTargetName,
+  getExternalSecretTargetCreationPolicy,
+  getExternalSecretTargetDeletionPolicy,
+  getExternalSecretDataMappings,
+  getExternalSecretDataFromSources,
+} from '../resource-utils-eso'
+
+interface ExternalSecretRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRendererProps) {
+  const status = data.status || {}
+  const conditions = status.conditions || []
+
+  const esStatus = getExternalSecretStatus(data)
+  const store = getExternalSecretStore(data)
+  const dataMappings = getExternalSecretDataMappings(data)
+  const dataFromSources = getExternalSecretDataFromSources(data)
+  const targetTemplate = data.spec?.target?.template
+
+  // Problem detection
+  const readyCond = conditions.find((c: any) => c.type === 'Ready')
+  const isNotReady = readyCond?.status === 'False'
+
+  return (
+    <>
+      {/* Alert if not synced */}
+      {isNotReady && (
+        <AlertBanner
+          variant="error"
+          title="ExternalSecret Not Synced"
+          message={readyCond?.message || 'The ExternalSecret is not in a synced state.'}
+        />
+      )}
+
+      {/* Status section */}
+      <Section title="Sync Status" icon={RefreshCw} defaultExpanded>
+        <PropertyList>
+          <Property label="Status" value={esStatus.text} />
+          <Property label="Last Sync" value={getExternalSecretLastSync(data)} />
+          <Property label="Refresh Interval" value={getExternalSecretRefreshInterval(data)} />
+          <Property label="Target Secret" value={(() => {
+            const targetName = getExternalSecretTargetName(data)
+            if (targetName && targetName !== '-') {
+              return (
+                <ResourceLink
+                  name={targetName}
+                  kind="secrets"
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return targetName
+          })()} />
+          {status.syncedResourceVersion && (
+            <Property label="Synced Version" value={status.syncedResourceVersion} />
+          )}
+          {status.binding?.name && (
+            <Property label="Binding" value={status.binding.name} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Store Reference */}
+      <Section title="Store Reference" icon={CloudCog} defaultExpanded>
+        <PropertyList>
+          <Property label="Store Name" value={(() => {
+            if (store.name && store.name !== '-') {
+              const storeKind = store.kind === 'ClusterSecretStore'
+                ? 'clustersecretstores'
+                : 'secretstores'
+              return (
+                <ResourceLink
+                  name={store.name}
+                  kind={storeKind}
+                  namespace={store.kind === 'ClusterSecretStore' ? '' : (data.metadata?.namespace || '')}
+                  onNavigate={onNavigate}
+                />
+              )
+            }
+            return store.name
+          })()} />
+          <Property label="Store Kind" value={store.kind} />
+        </PropertyList>
+      </Section>
+
+      {/* Secret Mappings - data[] */}
+      {dataMappings.length > 0 && (
+        <Section title={`Secret Mappings (${dataMappings.length})`} icon={KeyRound} defaultExpanded>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-theme-text-secondary text-left text-xs uppercase tracking-wider">
+                  <th className="pb-2 pr-3 font-medium">Secret Key</th>
+                  <th className="pb-2 pr-3 font-medium">Remote Key</th>
+                  <th className="pb-2 font-medium">Property</th>
+                </tr>
+              </thead>
+              <tbody>
+                {dataMappings.map((mapping, i) => (
+                  <tr key={i} className="border-t border-theme-border/50">
+                    <td className="py-1.5 pr-3 text-theme-text-primary font-mono text-xs">{mapping.secretKey || '-'}</td>
+                    <td className="py-1.5 pr-3 text-theme-text-secondary font-mono text-xs break-all">{mapping.remoteKey || '-'}</td>
+                    <td className="py-1.5 text-theme-text-secondary text-xs">
+                      {mapping.remoteProperty || '-'}
+                      {mapping.remoteVersion && (
+                        <span className="ml-1 text-theme-text-tertiary">v{mapping.remoteVersion}</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Section>
+      )}
+
+      {/* DataFrom sources */}
+      {dataFromSources.length > 0 && (
+        <Section title={`Data Sources (${dataFromSources.length})`} defaultExpanded>
+          <div className="space-y-1">
+            {dataFromSources.map((source, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary font-medium">
+                    {source.type}
+                  </span>
+                  {source.details && (
+                    <span className="text-theme-text-tertiary text-xs font-mono break-all">{source.details}</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Target Configuration */}
+      <Section title="Target Configuration" defaultExpanded={false}>
+        <PropertyList>
+          <Property label="Target Name" value={getExternalSecretTargetName(data)} />
+          <Property label="Creation Policy" value={getExternalSecretTargetCreationPolicy(data)} />
+          <Property label="Deletion Policy" value={getExternalSecretTargetDeletionPolicy(data)} />
+          {targetTemplate?.type && (
+            <Property label="Template Type" value={targetTemplate.type} />
+          )}
+          {targetTemplate?.engineVersion && (
+            <Property label="Engine Version" value={targetTemplate.engineVersion} />
+          )}
+          {targetTemplate?.metadata?.labels && (
+            <Property label="Template Labels" value={Object.entries(targetTemplate.metadata.labels).map(([k, v]) => `${k}=${v}`).join(', ')} />
+          )}
+          {targetTemplate?.metadata?.annotations && (
+            <Property label="Template Annotations" value={Object.entries(targetTemplate.metadata.annotations).map(([k, v]) => `${k}=${v}`).join(', ')} />
+          )}
+        </PropertyList>
+      </Section>
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,242 @@
+import { Package, Settings, CheckCircle2, History } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
+import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+
+interface FluxHelmReleaseRendererProps {
+  data: any
+}
+
+export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = (status.conditions || []) as FluxCondition[]
+  const history = status.history || []
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'HelmRelease is suspended' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  // Check for test failures
+  const testFailCondition = conditions.find(
+    (c) => c.type === 'TestSuccess' && c.status === 'False'
+  )
+  if (testFailCondition) {
+    problems.push({
+      color: 'yellow',
+      message: testFailCondition.message || 'Helm tests failed',
+    })
+  }
+
+  // Chart reference
+  const chartRef = spec.chart?.spec || {}
+  const sourceRef = chartRef.sourceRef || {}
+
+  // Current release info
+  const lastRelease = history.length > 0 ? history[0] : null
+
+  return (
+    <>
+      <ProblemAlerts problems={problems} />
+
+      {/* Status section */}
+      <Section title="Status">
+        <div className="space-y-3">
+          <GitOpsStatusBadge status={gitOpsStatus} />
+          {spec.interval && (
+            <SyncCountdown
+              interval={spec.interval}
+              lastSyncTime={status.lastHandledReconcileAt}
+              suspended={gitOpsStatus.suspended}
+            />
+          )}
+        </div>
+      </Section>
+
+      {/* Chart section */}
+      <Section title="Chart" icon={Package}>
+        <PropertyList>
+          <Property label="Chart" value={chartRef.chart} />
+          <Property label="Version" value={chartRef.version || '*'} />
+          <Property label="Source Kind" value={sourceRef.kind} />
+          <Property label="Source Name" value={sourceRef.name} />
+          {sourceRef.namespace && (
+            <Property label="Source Namespace" value={sourceRef.namespace} />
+          )}
+          <Property
+            label="Reconcile Strategy"
+            value={chartRef.reconcileStrategy || 'ChartVersion'}
+          />
+        </PropertyList>
+      </Section>
+
+      {/* Release Configuration */}
+      <Section title="Configuration" icon={Settings}>
+        <PropertyList>
+          <Property label="Release Name" value={spec.releaseName || data.metadata?.name} />
+          <Property label="Target Namespace" value={spec.targetNamespace || data.metadata?.namespace} />
+          {spec.timeout && <Property label="Timeout" value={spec.timeout} />}
+          {spec.serviceAccountName && (
+            <Property label="Service Account" value={spec.serviceAccountName} />
+          )}
+          {spec.maxHistory !== undefined && (
+            <Property label="Max History" value={spec.maxHistory} />
+          )}
+        </PropertyList>
+      </Section>
+
+      {/* Install/Upgrade settings */}
+      {(spec.install || spec.upgrade) && (
+        <Section title="Install/Upgrade Settings" defaultExpanded={false}>
+          <PropertyList>
+            {spec.install && (
+              <>
+                <Property
+                  label="Create Namespace"
+                  value={spec.install.createNamespace ? 'Yes' : 'No'}
+                />
+                <Property
+                  label="Replace CRDs"
+                  value={spec.install.crds || 'Skip'}
+                />
+                {spec.install.remediation && (
+                  <Property
+                    label="Install Retries"
+                    value={spec.install.remediation.retries}
+                  />
+                )}
+              </>
+            )}
+            {spec.upgrade && (
+              <>
+                <Property
+                  label="Cleanup on Fail"
+                  value={spec.upgrade.cleanupOnFail ? 'Yes' : 'No'}
+                />
+                <Property
+                  label="Force Upgrade"
+                  value={spec.upgrade.force ? 'Yes' : 'No'}
+                />
+                {spec.upgrade.remediation && (
+                  <>
+                    <Property
+                      label="Upgrade Retries"
+                      value={spec.upgrade.remediation.retries}
+                    />
+                    <Property
+                      label="Rollback on Fail"
+                      value={spec.upgrade.remediation.remediateLastFailure ? 'Yes' : 'No'}
+                    />
+                  </>
+                )}
+              </>
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Current Release */}
+      {lastRelease && (
+        <Section title="Current Release" icon={CheckCircle2}>
+          <PropertyList>
+            <Property label="Revision" value={lastRelease.revision} />
+            <Property label="Chart Version" value={lastRelease.chartVersion} />
+            <Property label="App Version" value={lastRelease.appVersion} />
+            <Property label="Status" value={lastRelease.status} />
+            {lastRelease.firstDeployed && (
+              <Property
+                label="First Deployed"
+                value={formatAge(lastRelease.firstDeployed)}
+              />
+            )}
+            {lastRelease.lastDeployed && (
+              <Property
+                label="Last Deployed"
+                value={formatAge(lastRelease.lastDeployed)}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Release History */}
+      {history.length > 1 && (
+        <Section title={`History (${history.length} revisions)`} icon={History} defaultExpanded={false}>
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {history.map((release: any, idx: number) => (
+              <div
+                key={idx}
+                className={clsx(
+                  'p-2 rounded text-sm',
+                  idx === 0
+                    ? 'bg-green-500/10 border border-green-500/30'
+                    : 'bg-theme-elevated/30'
+                )}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-medium text-theme-text-primary">
+                    Rev {release.revision}
+                  </span>
+                  <span
+                    className={clsx(
+                      'px-1.5 py-0.5 rounded text-xs',
+                      release.status === 'deployed'
+                        ? 'status-healthy'
+                        : release.status === 'failed'
+                        ? 'status-unhealthy'
+                        : 'status-neutral'
+                    )}
+                  >
+                    {release.status}
+                  </span>
+                </div>
+                <div className="text-xs text-theme-text-secondary mt-1">
+                  {release.chartVersion}
+                  {release.appVersion && ` (app: ${release.appVersion})`}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Revision info */}
+      {(status.helmChart || status.lastAppliedRevision || status.lastAttemptedRevision) && (
+        <Section title="Revision Info" defaultExpanded={false}>
+          <PropertyList>
+            {status.helmChart && (
+              <Property label="Helm Chart" value={status.helmChart} />
+            )}
+            {status.lastAppliedRevision && (
+              <Property label="Applied Revision" value={status.lastAppliedRevision} />
+            )}
+            {status.lastAttemptedRevision && (
+              <Property label="Attempted Revision" value={status.lastAttemptedRevision} />
+            )}
+            {status.lastHandledReconcileAt && (
+              <Property
+                label="Last Reconciled"
+                value={formatAge(status.lastHandledReconcileAt)}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}