@skyhook-io/k8s-ui 1.10.4 → 1.11.0

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

@@ -1,5 +1,6 @@
 import { AlertTriangle, Info, Clock, Target, Server, Hash } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Badge } from '../../ui/Badge'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import type { NavigateToResource } from '../../../utils/navigation'
@@ -20,35 +21,29 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
   const source = data.source || {}
   const firstTimestamp = data.firstTimestamp
   const lastTimestamp = data.lastTimestamp || data.metadata?.creationTimestamp
+  const statusClass = isWarning ? 'status-degraded' : 'status-neutral'
+  const badgeSeverity = isWarning ? 'warning' : 'info'
 
   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'
+        statusClass,
       )}>
         <div className="flex items-start gap-3">
           {isWarning ? (
-            <AlertTriangle className="w-5 h-5 text-amber-400 mt-0.5 shrink-0" />
+            <AlertTriangle className="w-5 h-5 mt-0.5 shrink-0" />
           ) : (
-            <Info className="w-5 h-5 text-blue-400 mt-0.5 shrink-0" />
+            <Info className="w-5 h-5 mt-0.5 shrink-0" />
           )}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <span className={clsx(
-                'badge',
-                isWarning ? 'bg-amber-500/20 text-amber-400' : 'bg-blue-500/20 text-blue-400'
-              )}>
+              <Badge severity={badgeSeverity}>
                 {eventType}
-              </span>
+              </Badge>
               {reason && (
-                <span className={clsx(
-                  'text-sm font-semibold',
-                  isWarning ? 'text-amber-300' : 'text-blue-300'
-                )}>
+                <span className="text-sm font-semibold">
                   {reason}
                 </span>
               )}
@@ -59,10 +54,7 @@ export function EventRenderer({ data, onNavigate }: EventRendererProps) {
               )}
             </div>
             {message && (
-              <p className={clsx(
-                'text-sm break-all',
-                isWarning ? 'text-amber-200/90' : 'text-blue-200/90'
-              )}>
+              <p className="text-sm break-all">
                 {message}
               </p>
             )}

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

@@ -0,0 +1,317 @@
+// Renderers for Kyverno's modern CEL policy family (policies.kyverno.io),
+// stabilized in Kyverno 1.17/1.18 and the family that survives the removal of
+// kyverno.io Policy/ClusterPolicy planned for 1.20.
+//
+// One renderer per behavioural family, each sharing the posture header and
+// match-scope sections from KyvernoPolicyShared. The five specs overlap far
+// less than their names suggest — DeletingPolicy has no failurePolicy,
+// evaluation or webhookConfiguration at all and is scheduled rather than
+// admission-driven — so a merged renderer would be mostly branches.
+//
+// Each Namespaced* twin renders through its cluster-scoped counterpart: same
+// spec, narrower scope, and the scope is already conveyed by the namespace in
+// the resource header.
+
+import { FileWarning, ShieldCheck, Wand2, Sparkles, Trash2, Clock, Fingerprint, ScrollText } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import {
+  KyvernoEvaluationSection,
+  KyvernoExpressionList,
+  KyvernoMatchScopeSection,
+  KyvernoPostureHeader,
+  KyvernoVariablesSection,
+} from './KyvernoPolicyShared'
+import {
+  getKyvernoAttestations,
+  getKyvernoAttestors,
+  getKyvernoDeletionConditions,
+  getKyvernoDeletionPropagationPolicy,
+  getKyvernoGenerationSettings,
+  getKyvernoGenerations,
+  getKyvernoImageExtractors,
+  getKyvernoImageReferences,
+  getKyvernoMutations,
+  getKyvernoPolicyConditions,
+  getKyvernoReinvocationPolicy,
+  getKyvernoSchedule,
+  getKyvernoValidations,
+  type KyvernoCELValidation,
+} from '../resource-utils-kyverno-modern'
+
+/**
+ * The CEL rules themselves, each with the message an operator sees when it
+ * fails. Expression and message belong together — a rule without its message
+ * is unreadable, and a message without its rule is unverifiable.
+ */
+function ValidationsSection({ validations }: { validations: KyvernoCELValidation[] }) {
+  if (validations.length === 0) return null
+  return (
+    <Section title={`Validations (${validations.length})`} icon={FileWarning}>
+      <div className="space-y-2">
+        {validations.map((v, i) => (
+          <div key={i} className="card-inner-lg">
+            <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">
+              {v.expression}
+            </pre>
+            {(v.message || v.messageExpression) && (
+              <div className="mt-2 text-xs text-theme-text-secondary">
+                {v.message || <span className="font-mono">{v.messageExpression}</span>}
+              </div>
+            )}
+            {v.reason && (
+              <div className="mt-1">
+                <span className="badge status-neutral">{v.reason}</span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  )
+}
+
+export function KyvernoValidatingPolicyRenderer({ data }: { data: any }) {
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="validating" />
+      <ValidationsSection validations={getKyvernoValidations(data)} />
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoImageValidatingPolicyRenderer({ data }: { data: any }) {
+  const attestors = getKyvernoAttestors(data)
+  const attestations = getKyvernoAttestations(data)
+  const imageRefs = getKyvernoImageReferences(data)
+  const extractors = getKyvernoImageExtractors(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="imageValidating" />
+
+      {imageRefs.length > 0 && (
+        <Section title={`Image References (${imageRefs.length})`} icon={ScrollText}>
+          <div className="space-y-1">
+            {imageRefs.map((ref, i) => (
+              <div key={i} className="text-xs font-mono text-theme-text-primary break-all">
+                {ref}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Attestors are the trust anchor — who must have signed. Without one,
+          image verification has nothing to check against. */}
+      {attestors.length > 0 ? (
+        <Section title={`Attestors (${attestors.length})`} icon={Fingerprint}>
+          <div className="space-y-2">
+            {attestors.map((a, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {a.name && <span className="text-xs font-medium text-theme-text-primary">{a.name}</span>}
+                  {a.kind && <span className="badge status-neutral">{a.kind}</span>}
+                </div>
+                {a.identity && (
+                  <div className="mt-1 text-xs font-mono text-theme-text-secondary break-all">{a.identity}</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          title="No attestors configured"
+          message="This image policy has no trusted authority to verify signatures against."
+        />
+      )}
+
+      {attestations.length > 0 && (
+        <Section title={`Attestations (${attestations.length})`} icon={ShieldCheck}>
+          <div className="space-y-2">
+            {attestations.map((a, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  {a.name && <span className="text-xs font-medium text-theme-text-primary">{a.name}</span>}
+                  {a.kind && <span className="badge status-neutral">{a.kind}</span>}
+                </div>
+                {a.type && <div className="mt-1 text-xs font-mono text-theme-text-secondary break-all">{a.type}</div>}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ValidationsSection validations={getKyvernoValidations(data)} />
+
+      {extractors.length > 0 && (
+        <Section title={`Image Extractors (${extractors.length})`} icon={ScrollText} defaultExpanded={false}>
+          <KyvernoExpressionList items={extractors} />
+        </Section>
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoMutatingPolicyRenderer({ data }: { data: any }) {
+  const mutations = getKyvernoMutations(data)
+  const reinvocation = getKyvernoReinvocationPolicy(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="mutating" />
+
+      {mutations.length > 0 && (
+        <Section title={`Mutations (${mutations.length})`} icon={Wand2}>
+          <div className="space-y-2">
+            {mutations.map((m, i) => (
+              <div key={i} className="card-inner-lg">
+                {m.patchType && (
+                  <div className="mb-1">
+                    <span className="badge status-neutral">{m.patchType}</span>
+                  </div>
+                )}
+                <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">
+                  {m.expression}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {reinvocation && (
+        <Section title="Reinvocation" icon={Wand2} defaultExpanded={false}>
+          <PropertyList>
+            <Property
+              label="Policy"
+              value={
+                <span className="flex items-center gap-2">
+                  <span className="badge status-neutral">{reinvocation}</span>
+                  <span className="text-xs text-theme-text-tertiary">
+                    {reinvocation === 'IfNeeded'
+                      ? 're-runs when another webhook changes the object'
+                      : 'runs once per admission request'}
+                  </span>
+                </span>
+              }
+            />
+          </PropertyList>
+        </Section>
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <KyvernoEvaluationSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoGeneratingPolicyRenderer({ data }: { data: any }) {
+  const generations = getKyvernoGenerations(data)
+  const settings = getKyvernoGenerationSettings(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="generating" />
+
+      {generations.length > 0 && (
+        <Section title={`Generates (${generations.length})`} icon={Sparkles}>
+          <div className="space-y-2">
+            {generations.map((expr, i) => (
+              <div key={i} className="card-inner-lg">
+                <pre className="text-xs text-theme-text-primary font-mono whitespace-pre-wrap break-all">{expr}</pre>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* These three decide what happens to already-generated objects, which
+          is where generation surprises operators: whether existing resources
+          are backfilled, whether edits are reverted, and whether downstream
+          objects survive deleting the policy. */}
+      <Section title="Generation Behavior" icon={Sparkles}>
+        <PropertyList>
+          <Property
+            label="Generate Existing"
+            value={settings.generateExisting ? 'Yes — applies to resources that already exist' : 'No — new resources only'}
+          />
+          <Property
+            label="Synchronize"
+            value={
+              settings.synchronize
+                ? 'Yes — manual edits to generated resources are reverted'
+                : 'No — generated resources are left alone after creation'
+            }
+          />
+          <Property
+            label="Orphan On Delete"
+            value={
+              settings.orphanDownstreamOnPolicyDelete
+                ? 'Yes — generated resources survive deleting this policy'
+                : 'No — generated resources are removed with this policy'
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}
+
+export function KyvernoDeletingPolicyRenderer({ data }: { data: any }) {
+  const schedule = getKyvernoSchedule(data)
+  const conditions = getKyvernoDeletionConditions(data)
+  const propagation = getKyvernoDeletionPropagationPolicy(data)
+
+  return (
+    <div className="space-y-4">
+      <KyvernoPostureHeader data={data} family="deleting" />
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property
+            label="Cron"
+            value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set — this policy will not run'}
+          />
+          {propagation && <Property label="Deletion Propagation" value={propagation} />}
+        </PropertyList>
+      </Section>
+
+      {/* Without conditions every matched resource is deleted on schedule.
+          That is a materially different blast radius and has to be stated
+          rather than left as an empty section. */}
+      {conditions.length > 0 ? (
+        <Section title={`Deletion Conditions (${conditions.length})`} icon={Trash2}>
+          <KyvernoExpressionList items={conditions} />
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          icon={Trash2}
+          title="No deletion conditions"
+          message="Every resource matched by this policy is deleted when the schedule fires."
+        />
+      )}
+
+      <KyvernoMatchScopeSection data={data} />
+      <KyvernoVariablesSection data={data} />
+      <ConditionsSection conditions={getKyvernoPolicyConditions(data)} />
+    </div>
+  )
+}

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

@@ -0,0 +1,264 @@
+// PolicyException and CleanupPolicy renderers.
+//
+// PolicyException is the record of who was let off the hook — the most
+// operationally interesting Kyverno object after the policy itself. One
+// renderer serves both API families; the accessors it calls are
+// group-qualified, so the same component reads whichever shape it is handed.
+
+import { ShieldOff, Filter, Clock, Trash2, AlertTriangle, ScrollText } from 'lucide-react'
+import {
+  Section,
+  PropertyList,
+  Property,
+  ConditionsSection,
+  AlertBanner,
+  LabelSelectorDisplay,
+} from '../../ui/drawer-components'
+import { KyvernoExpressionList } from './KyvernoPolicyShared'
+import {
+  getKyvernoCleanupConditions,
+  getKyvernoCleanupExclude,
+  getKyvernoCleanupLastExecution,
+  getKyvernoCleanupMatch,
+  getKyvernoCleanupMatchedKinds,
+  getKyvernoCleanupPropagationPolicy,
+  getKyvernoCleanupSchedule,
+  getKyvernoExceptedPolicies,
+  getKyvernoExceptionLegacyConditions,
+  getKyvernoExceptionMatch,
+  getKyvernoExceptionMatchConditions,
+  getKyvernoExceptionReportResult,
+  isBlanketKyvernoException,
+  isModernKyvernoPolicyException,
+} from '../resource-utils-kyverno-exceptions'
+
+/**
+ * Renders the legacy any/all match block. Each entry carries a
+ * `resources` selector with kinds/names/namespaces/selector.
+ */
+function LegacyMatchBlock({ match }: { match: any }) {
+  const blocks: Array<{ operator: string; entries: any[] }> = []
+  if (Array.isArray(match?.any)) blocks.push({ operator: 'any', entries: match.any })
+  if (Array.isArray(match?.all)) blocks.push({ operator: 'all', entries: match.all })
+  if (blocks.length === 0) return null
+
+  return (
+    <div className="space-y-2">
+      {blocks.map((block) => (
+        <div key={block.operator}>
+          <div className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-1">Match {block.operator}</div>
+          <div className="space-y-2">
+            {block.entries.map((entry, i) => {
+              const resources = entry?.resources || {}
+              return (
+                <div key={i} className="card-inner">
+                  <PropertyList>
+                    {Array.isArray(resources.kinds) && resources.kinds.length > 0 && (
+                      <Property label="Kinds" value={resources.kinds.join(', ')} />
+                    )}
+                    {Array.isArray(resources.names) && resources.names.length > 0 && (
+                      <Property label="Names" value={resources.names.join(', ')} />
+                    )}
+                    {Array.isArray(resources.namespaces) && resources.namespaces.length > 0 && (
+                      <Property label="Namespaces" value={resources.namespaces.join(', ')} />
+                    )}
+                    {resources.selector && (
+                      <Property label="Selector" value={<LabelSelectorDisplay selector={resources.selector} inline />} />
+                    )}
+                    {resources.namespaceSelector && (
+                      <Property
+                        label="Namespace Selector"
+                        value={<LabelSelectorDisplay selector={resources.namespaceSelector} inline />}
+                      />
+                    )}
+                  </PropertyList>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function KyvernoPolicyExceptionRenderer({ data }: { data: any }) {
+  const isModern = isModernKyvernoPolicyException(data)
+  const excepted = getKyvernoExceptedPolicies(data)
+  const blanket = isBlanketKyvernoException(data)
+  const matchConditions = getKyvernoExceptionMatchConditions(data)
+  const legacyMatch = getKyvernoExceptionMatch(data)
+  const legacyConditions = getKyvernoExceptionLegacyConditions(data)
+  const reportResult = getKyvernoExceptionReportResult(data)
+
+  return (
+    <div className="space-y-4">
+      {/* An exception naming no policy exempts everything in its match scope.
+          That is the widest exemption expressible here and the operator has to
+          see it before anything else. */}
+      {blanket && (
+        <AlertBanner
+          variant="warning"
+          icon={AlertTriangle}
+          title="Blanket exception"
+          message="This exception names no specific policy, so every policy matching its scope is bypassed."
+        />
+      )}
+
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Exempts</span>
+          <span className={`badge ${blanket ? 'status-alert' : 'status-neutral'}`}>
+            {blanket ? 'All matching policies' : `${excepted.length} ${excepted.length === 1 ? 'policy' : 'policies'}`}
+          </span>
+          <span className="badge status-neutral">{isModern ? 'policies.kyverno.io' : 'kyverno.io'}</span>
+        </div>
+        {/* Kyverno has no expiry field on either shape — the upstream pattern
+            is a companion cleanup policy — so an exception persists until
+            somebody deletes it. */}
+        <div className="mt-2 text-xs text-theme-text-secondary">
+          Exceptions do not expire; this one applies until it is deleted.
+        </div>
+      </div>
+
+      {excepted.length > 0 && (
+        <Section title={`Excepted Policies (${excepted.length})`} icon={ShieldOff}>
+          <div className="space-y-2">
+            {excepted.map((policy, i) => (
+              <div key={i} className="card-inner">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-sm font-medium text-theme-text-primary">{policy.name}</span>
+                  {policy.kind && <span className="badge status-neutral">{policy.kind}</span>}
+                </div>
+                {policy.ruleNames.length > 0 ? (
+                  <div className="mt-1 flex items-center gap-1 flex-wrap">
+                    <span className="text-xs text-theme-text-tertiary">Rules:</span>
+                    {policy.ruleNames.map((rule) => (
+                      <span key={rule} className="badge status-neutral">
+                        {rule}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  !isModern && <div className="mt-1 text-xs text-theme-text-tertiary">All rules in this policy</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {reportResult && (
+        <Section title="Reporting" icon={ScrollText}>
+          <PropertyList>
+            <Property
+              label="Report Result"
+              value={
+                <span className="flex items-center gap-2">
+                  <span className="badge status-neutral">{reportResult}</span>
+                  <span className="text-xs text-theme-text-tertiary">how excepted resources appear in reports</span>
+                </span>
+              }
+            />
+          </PropertyList>
+        </Section>
+      )}
+
+      {legacyMatch && (
+        <Section title="Match Scope" icon={Filter}>
+          <LegacyMatchBlock match={legacyMatch} />
+        </Section>
+      )}
+
+      {matchConditions.length > 0 && (
+        <Section title={`Match Conditions (${matchConditions.length})`} icon={Filter}>
+          <KyvernoExpressionList items={matchConditions} />
+        </Section>
+      )}
+
+      {legacyConditions && (
+        <Section title="Conditions" icon={Filter} defaultExpanded={false}>
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {JSON.stringify(legacyConditions, null, 2)}
+          </pre>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </div>
+  )
+}
+
+/**
+ * CleanupPolicy / ClusterCleanupPolicy (kyverno.io/v2), deprecated in Kyverno
+ * 1.18 in favour of DeletingPolicy. Rendered because the installed base runs
+ * it today and "what deleted my resource?" is an expensive question to answer
+ * without it.
+ */
+export function KyvernoCleanupPolicyRenderer({ data }: { data: any }) {
+  const schedule = getKyvernoCleanupSchedule(data)
+  const kinds = getKyvernoCleanupMatchedKinds(data)
+  const lastExecution = getKyvernoCleanupLastExecution(data)
+  const propagation = getKyvernoCleanupPropagationPolicy(data)
+  const match = getKyvernoCleanupMatch(data)
+  const exclude = getKyvernoCleanupExclude(data)
+  const conditions = getKyvernoCleanupConditions(data)
+
+  return (
+    <div className="space-y-4">
+      <div className="card-inner-lg">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-xs uppercase tracking-wide text-theme-text-tertiary">Deletes</span>
+          <span className="badge status-alert">{kinds.length > 0 ? kinds.join(', ') : 'matched resources'}</span>
+          {schedule ? (
+            <span className="text-xs text-theme-text-secondary">
+              on schedule <span className="font-mono">{schedule}</span>
+            </span>
+          ) : (
+            <span className="text-xs text-theme-text-secondary">no schedule set — this policy will not run</span>
+          )}
+        </div>
+        <div className="mt-2 text-xs text-theme-text-secondary">
+          Deprecated in Kyverno 1.18; DeletingPolicy (policies.kyverno.io) is its replacement.
+        </div>
+      </div>
+
+      <Section title="Schedule" icon={Clock}>
+        <PropertyList>
+          <Property label="Cron" value={schedule ? <span className="font-mono">{schedule}</span> : 'Not set'} />
+          {propagation && <Property label="Deletion Propagation" value={propagation} />}
+          {lastExecution && <Property label="Last Execution" value={lastExecution} />}
+        </PropertyList>
+      </Section>
+
+      {match && (
+        <Section title="Match Scope" icon={Filter}>
+          <LegacyMatchBlock match={match} />
+        </Section>
+      )}
+
+      {exclude && (
+        <Section title="Excluded" icon={Filter} defaultExpanded={false}>
+          <LegacyMatchBlock match={exclude} />
+        </Section>
+      )}
+
+      {conditions ? (
+        <Section title="Deletion Conditions" icon={Trash2}>
+          <pre className="text-xs text-theme-text-secondary font-mono whitespace-pre-wrap break-all">
+            {JSON.stringify(conditions, null, 2)}
+          </pre>
+        </Section>
+      ) : (
+        <AlertBanner
+          variant="warning"
+          icon={Trash2}
+          title="No deletion conditions"
+          message="Every resource matched by this policy is deleted when the schedule fires."
+        />
+      )}
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </div>
+  )
+}