@skyhook-io/k8s-ui 1.11.0 → 1.13.0

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

@@ -0,0 +1,303 @@
+import { useState } from 'react'
+import { clsx } from 'clsx'
+import { ListChecks, Workflow, Boxes, FileWarning } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS, SEVERITY_BADGE } from '../../../utils/badge-colors'
+import { formatAge } from '../resource-utils'
+import {
+  getKyvernoRequestType,
+  getKyvernoRequestTriggers,
+  getKyvernoRequestGenerated,
+  getKyvernoRequestState,
+  getKyvernoRequestPolicy,
+  getKyvernoRequestMessage,
+  getKyvernoReportSubject,
+  getKyvernoReportSource,
+  getKyvernoReportSummary,
+  getKyvernoReportResults,
+  kyvernoReportTimestamp,
+} from '../resource-utils-kyverno-queue'
+
+type Nav = (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+
+/** Long trigger lists fold at the same point as the house relationship lists. */
+const FOLD = 10
+
+function RefList({
+  refs,
+  onNavigate,
+  empty,
+}: {
+  refs: Array<{ apiVersion?: string; kind?: string; name?: string; namespace?: string }>
+  onNavigate?: Nav
+  empty: string
+}) {
+  const [expanded, setExpanded] = useState(false)
+  if (refs.length === 0) return <div className="text-sm text-theme-text-tertiary">{empty}</div>
+
+  const shown = expanded ? refs : refs.slice(0, FOLD)
+  return (
+    <div className="space-y-1.5">
+      <div className="flex flex-wrap gap-1.5">
+        {shown.map((r, i) => (
+          <ResourceLink
+            key={`${r.kind}/${r.namespace}/${r.name}/${i}`}
+            name={r.name ?? ''}
+            kind={r.kind ?? ''}
+            namespace={r.namespace ?? ''}
+            group={r.apiVersion?.includes('/') ? r.apiVersion.split('/')[0] : undefined}
+            onNavigate={onNavigate}
+          />
+        ))}
+      </div>
+      {refs.length > FOLD && (
+        <button
+          className="text-xs text-theme-text-secondary hover:text-theme-text-primary"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? 'Show fewer' : `Show all ${refs.length}`}
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * UpdateRequest — the record of work Kyverno queued rather than did inline.
+ *
+ * It is where a generation or a mutate-existing that silently stopped is
+ * diagnosed: the policy looks Ready, the target never appears, and the only
+ * evidence is a request sitting in Pending.
+ *
+ * The two request types are shaped so differently that one renderer reading a
+ * single field set would be blank for half of them — see the accessors.
+ */
+export function KyvernoUpdateRequestRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const type = getKyvernoRequestType(data)
+  const state = getKyvernoRequestState(data)
+  const triggers = getKyvernoRequestTriggers(data)
+  const generated = getKyvernoRequestGenerated(data)
+  const policy = getKyvernoRequestPolicy(data)
+  const message = getKyvernoRequestMessage(data)
+  // Every trigger in one request comes from the same rule; a generate request
+  // repeats it per entry, a mutate request states it once.
+  const rule = data?.spec?.rule || triggers.find((t) => t.rule)?.rule
+  const deletesDownstream = data?.spec?.deleteDownstream === true || triggers.some((t) => t.deleteDownstream)
+
+  return (
+    <>
+      {state.level === 'unhealthy' && (
+        <AlertBanner
+          variant="error"
+          title="This request failed"
+          message={message || 'Kyverno could not complete this request. The resources below were not updated.'}
+        />
+      )}
+      {state.level === 'degraded' && (
+        <AlertBanner
+          variant="warning"
+          title="Still queued"
+          // Pending is normal for seconds and a symptom for longer, and this
+          // object carries no timestamp of its own beyond creation.
+          message="Kyverno has not processed this request yet. If it stays here, the background controller is not running or cannot reach what it needs."
+        />
+      )}
+
+      <Section title="Request" icon={Workflow} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="State"
+            value={
+              <span className={clsx('badge', HEALTH_BADGE_COLORS[state.level as keyof typeof HEALTH_BADGE_COLORS])}>
+                {state.text}
+              </span>
+            }
+          />
+          <Property label="Type" value={type === 'unknown' ? '-' : type} />
+          {policy && (
+            <Property
+              label="Policy"
+              value={
+                // `spec.policy` is a bare name with no kind and no namespace, and
+                // a namespaced Policy may share it with a ClusterPolicy. A
+                // qualified name is the one case that identifies itself; anything
+                // else links to a page that may not be the policy that queued
+                // this, so it stays plain text rather than guessing.
+                policy.includes('/') ? (
+                  <ResourceLink
+                    name={policy.split('/')[1]}
+                    // `policies` is what the API serves and what a URL can be
+                    // built from; `kyvernopolicies` is an internal display alias
+                    // and 400s when asked for. The group is what disambiguates.
+                    kind="policies"
+                    namespace={policy.split('/')[0]}
+                    group="kyverno.io"
+                    label={policy}
+                    onNavigate={onNavigate}
+                  />
+                ) : (
+                  policy
+                )
+              }
+            />
+          )}
+          {rule && <Property label="Rule" value={rule} />}
+          <Property
+            label="On trigger delete"
+            value={
+              deletesDownstream ? (
+                <span className="text-warning-text">
+                  Removes what this rule created for it
+                </span>
+              ) : (
+                'Leaves what this rule created in place'
+              )
+            }
+          />
+          {data?.metadata?.creationTimestamp && (
+            <Property label="Queued" value={`${formatAge(data.metadata.creationTimestamp)} ago`} />
+          )}
+        </PropertyList>
+        {message && state.level !== 'unhealthy' && (
+          <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">{message}</div>
+        )}
+      </Section>
+
+      <Section title={`Triggered By (${triggers.length})`} icon={ListChecks} defaultExpanded>
+        <RefList
+          refs={triggers}
+          onNavigate={onNavigate}
+          // A queued generate request has not been given its triggers yet, so
+          // the empty list means "not written down", not "acts on nothing".
+          empty={
+            state.level === 'degraded'
+              ? 'Kyverno has not recorded what this request is for yet.'
+              : 'This request names no trigger, so there is nothing for it to act on.'
+          }
+        />
+      </Section>
+
+      {type === 'generate' && (
+        <Section title={`Created (${generated.length})`} icon={Boxes} defaultExpanded>
+          <RefList
+            refs={generated}
+            onNavigate={onNavigate}
+            empty={
+              state.level === 'healthy'
+                ? 'Kyverno records nothing created for this request.'
+                : 'Nothing has been created yet.'
+            }
+          />
+        </Section>
+      )}
+    </>
+  )
+}
+
+// Same mapping the policy coverage view uses, so a result reads identically
+// wherever it appears.
+const RESULT_TONE: Record<string, string> = {
+  pass: SEVERITY_BADGE.success,
+  fail: SEVERITY_BADGE.error,
+  warn: SEVERITY_BADGE.warning,
+  error: SEVERITY_BADGE.alert,
+  skip: SEVERITY_BADGE.neutral,
+}
+
+/**
+ * EphemeralReport — a background scan's findings for one resource, before they
+ * are folded into a PolicyReport.
+ *
+ * Worth a surface because it is what exists during a scan, and because a
+ * cluster mid-migration can show findings here that have not reached any
+ * PolicyReport yet. It is also genuinely short-lived: an empty list means the
+ * scan has finished, not that nothing was checked.
+ */
+export function KyvernoEphemeralReportRenderer({ data, onNavigate }: { data: any; onNavigate?: Nav }) {
+  const subject = getKyvernoReportSubject(data)
+  const summary = getKyvernoReportSummary(data)
+  const results = getKyvernoReportResults(data)
+  const source = getKyvernoReportSource(data)
+
+  return (
+    <>
+      <Section title="Scan" icon={FileWarning} defaultExpanded>
+        <PropertyList>
+          <Property
+            label="About"
+            value={
+              subject?.name ? (
+                <ResourceLink
+                  name={subject.name}
+                  kind={subject.kind ?? ''}
+                  namespace={subject.namespace ?? ''}
+                  group={subject.apiVersion?.includes('/') ? subject.apiVersion.split('/')[0] : undefined}
+                  onNavigate={onNavigate}
+                />
+              ) : subject?.kind ? (
+                // The subject is gone; the labels still say what it was.
+                `${subject.kind} (deleted)`
+              ) : (
+                '-'
+              )
+            }
+          />
+          {source && <Property label="Produced by" value={source.replace(/-/g, ' ')} />}
+          <Property
+            label="Outcome"
+            value={
+              summary.total === 0
+                ? 'Nothing was checked'
+                : [
+                    summary.fail ? `${summary.fail} fail` : '',
+                    summary.error ? `${summary.error} error` : '',
+                    summary.warn ? `${summary.warn} warn` : '',
+                    summary.pass ? `${summary.pass} pass` : '',
+                    summary.skip ? `${summary.skip} skipped` : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' · ')
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Results (${results.length})`} icon={ListChecks} defaultExpanded>
+        {results.length === 0 ? (
+          <div className="text-sm text-theme-text-tertiary">
+            This report carries no results. Kyverno deletes these once the scan is folded into a
+            PolicyReport, so an empty one is finished work rather than a problem.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {results.map((r: any, i: number) => {
+              const at = kyvernoReportTimestamp(r?.timestamp)
+              return (
+                <div
+                  key={`${r?.policy}/${r?.rule}/${i}`}
+                  className="flex items-baseline gap-2 text-xs py-1 border-b border-theme-border/30 last:border-b-0"
+                >
+                  <span
+                    className={clsx('badge badge-sm shrink-0', RESULT_TONE[r?.result] || SEVERITY_BADGE.neutral)}
+                  >
+                    {r?.result || '-'}
+                  </span>
+                  <span className="text-theme-text-secondary truncate">{r?.policy || '-'}</span>
+                  {r?.rule && <span className="text-theme-text-tertiary truncate">/ {r.rule}</span>}
+                  {r?.message && (
+                    <span className="text-theme-text-tertiary truncate" title={r.message}>
+                      {r.message}
+                    </span>
+                  )}
+                  {at && (
+                    <span className="ml-auto shrink-0 text-theme-text-tertiary">{formatAge(at)} ago</span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </Section>
+    </>
+  )
+}

package/src/components/resources/renderers/LookupFailureNote.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { LookupFailureNote } from './LookupFailureNote'
+
+function err(message: string, status?: number): Error {
+  return Object.assign(new Error(message), status === undefined ? {} : { status })
+}
+
+describe('LookupFailureNote', () => {
+  it('says nothing when every lookup came back', () => {
+    expect(renderToString(<LookupFailureNote errors={[]} what="x" />)).toBe('')
+    expect(renderToString(<LookupFailureNote errors={[null, undefined]} what="x" />)).toBe('')
+  })
+
+  // Being unable to see something is expected and not actionable; a fault is
+  // neither. The two must not read alike.
+  it('renders a permission answer as a calm note, not a red error', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403)]} what="which clusters use this store" />,
+    )
+    expect(html).toContain('permission')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('keeps a genuine fault loud, with the reason', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('Failed to fetch')]} what="what replicates here" />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).toContain('Failed to fetch')
+  })
+
+  // A fault is actionable and a permission answer is not, so the actionable one
+  // is the one worth showing when both happened.
+  it('prefers the fault when a lookup was both forbidden and broken', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403), err('boom', 500)]} what="x" />,
+    )
+    expect(html).toContain('boom')
+    expect(html).toContain('text-red-400')
+  })
+
+  // The case that loses counts: rows are on screen, so the failure means the
+  // list is short — not that nothing was found.
+  it('says the list is incomplete rather than unchecked when rows are showing', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('boom', 500)]} what="x" incomplete />,
+    )
+    expect(html).toContain('This may be incomplete')
+    expect(html).toContain('boom')
+  })
+
+  it('does the same for a partial permission answer', () => {
+    const html = renderToString(
+      <LookupFailureNote errors={[err('forbidden', 403)]} what="x" incomplete />,
+    )
+    expect(html).toContain('may be incomplete')
+    expect(html).not.toContain('text-red-400')
+  })
+})

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

@@ -0,0 +1,42 @@
+import { isForbiddenError } from '../../../types/fetch-error'
+
+interface LookupFailureNoteProps {
+  /** Nulls are ignored, so callers can pass `[a.error, b.error]` from their hooks. */
+  errors: unknown[]
+  /** Tail of a sentence: "which clusters use this store". */
+  what: string
+  /** Rows are already on screen, so the failure shortened the list rather than
+   *  emptying it. */
+  incomplete?: boolean
+}
+
+/**
+ * A reverse lookup that did not come back, told apart from one that found
+ * nothing. Same split as RBACErrorSection and sharing its predicate: a denial is
+ * expected and reads calm, a fault stays loud.
+ */
+export function LookupFailureNote({ errors, what, incomplete }: LookupFailureNoteProps) {
+  const real = errors.filter(Boolean)
+  if (real.length === 0) return null
+
+  // A fault outranks a denial: only one of the two is actionable.
+  const fault = real.find((e) => !isForbiddenError(e))
+  if (!fault) {
+    return (
+      <div className="text-xs text-theme-text-tertiary">
+        {incomplete
+          ? `This may be incomplete: you don’t have permission to check ${what}.`
+          : `You don’t have permission to check ${what}.`}
+      </div>
+    )
+  }
+
+  const message = fault instanceof Error ? fault.message : String(fault)
+  return (
+    <div className="text-xs text-red-400">
+      {incomplete
+        ? `This may be incomplete — could not check ${what}: ${message}`
+        : `Could not check ${what}: ${message}`}
+    </div>
+  )
+}

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

@@ -1,8 +1,15 @@
 import { clsx } from 'clsx'
+import { Badge } from '../../ui/Badge'
 import { Tooltip } from '../../ui/Tooltip'
+import {
+  NETWORK_POLICY_PEER_DOTS,
+  NETWORK_POLICY_PEER_STYLES,
+  type NetworkPolicyPeerType,
+} from './network-policy-peer-styles'
 
 interface NetworkPolicyDiagramProps {
   spec: any
+  staged?: boolean
 }
 
 /**
@@ -11,7 +18,7 @@ interface NetworkPolicyDiagramProps {
  * Each rule is a horizontal band. Peers within a rule are OR'd (stacked).
  * Pure CSS/SVG — no ReactFlow needed for this static diagram.
  */
-export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
+export function NetworkPolicyDiagram({ spec, staged = false }: NetworkPolicyDiagramProps) {
   const podSelector = spec.podSelector || {}
   const matchLabels = podSelector.matchLabels || {}
   const policyTypes: string[] = spec.policyTypes || []
@@ -29,6 +36,13 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
 
   return (
     <div className="card-inner-lg space-y-3">
+      {staged && (
+        <div className="flex items-center gap-2 text-[11px] text-theme-text-tertiary">
+          <Badge severity="warning" size="sm">Staged preview</Badge>
+          <span>Dashed paths are evaluated but not enforced</span>
+        </div>
+      )}
+
       {/* Ingress flows */}
       {hasIngress && (
         <div className="space-y-2">
@@ -43,6 +57,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
               ports={[]}
               direction="ingress"
               denied
+              staged={staged}
             />
           ) : (
             ingress?.map((rule, i) => (
@@ -52,6 +67,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
                 target={targetLabel}
                 ports={extractPorts(rule.ports)}
                 direction="ingress"
+                staged={staged}
               />
             ))
           )}
@@ -72,6 +88,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
               ports={[]}
               direction="egress"
               denied
+              staged={staged}
             />
           ) : (
             egress?.map((rule, i) => (
@@ -81,6 +98,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
                 target={targetLabel}
                 ports={extractPorts(rule.ports)}
                 direction="egress"
+                staged={staged}
               />
             ))
           )}
@@ -97,7 +115,7 @@ export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
 interface PeerInfo {
   label: string
   sublabel?: string
-  type: 'pod' | 'namespace' | 'cidr' | 'all' | 'deny' | 'combined'
+  type: NetworkPolicyPeerType
 }
 
 function extractPeers(peers: any[] | undefined): PeerInfo[] {
@@ -155,37 +173,20 @@ function formatSelector(selector: any): string {
   return Object.entries(labels).map(([k, v]) => `${k}=${v}`).join(', ')
 }
 
-// Color coding for peer types
-const PEER_STYLES = {
-  pod: 'border-emerald-500/30 bg-emerald-500/8',
-  namespace: 'border-sky-500/30 bg-sky-500/8',
-  cidr: 'border-amber-500/30 bg-amber-500/8',
-  combined: 'border-emerald-500/30 bg-emerald-500/8',
-  all: 'border-theme-border bg-theme-elevated/50',
-  deny: 'border-red-500/30 bg-red-500/8',
-} as const
-
-const PEER_DOT = {
-  pod: 'bg-emerald-500',
-  namespace: 'bg-sky-500',
-  cidr: 'bg-amber-500',
-  combined: 'bg-emerald-500',
-  all: 'bg-theme-text-tertiary',
-  deny: 'bg-red-500',
-} as const
-
 function FlowRow({
   sources,
   target,
   ports,
   direction,
   denied = false,
+  staged = false,
 }: {
   sources: PeerInfo[]
   target: string
   ports: string[]
   direction: 'ingress' | 'egress'
   denied?: boolean
+  staged?: boolean
 }) {
   const isIngress = direction === 'ingress'
 
@@ -200,11 +201,11 @@ function FlowRow({
             <div
               className={clsx(
                 'rounded-md border px-2 py-1.5 min-w-0 overflow-hidden',
-                PEER_STYLES[peer.type],
+                NETWORK_POLICY_PEER_STYLES[peer.type],
               )}
             >
               <div className="flex items-center gap-1.5 min-w-0">
-                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', NETWORK_POLICY_PEER_DOTS[peer.type])} />
                 <span className={clsx('text-[11px] font-medium truncate min-w-0', denied && 'line-through text-red-400')}>
                   {peer.label}
                 </span>
@@ -245,14 +246,14 @@ function FlowRow({
           x1="2" y1="10" x2="32" y2="10"
           stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'}
           strokeWidth="1.5"
-          strokeDasharray={denied ? '3 2' : undefined}
+          strokeDasharray={staged ? '4 3' : denied ? '3 2' : undefined}
           markerEnd={`url(#arrow-${direction}-${denied ? 'denied' : 'ok'})`}
         />
       </svg>
       {ports.length > 0 && (
-        <div className="flex flex-wrap justify-center gap-0.5 mt-0.5">
+        <div className="flex flex-col items-center gap-0.5 mt-0.5">
           {ports.map((p, i) => (
-            <span key={i} className="text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
+            <span key={i} className="whitespace-nowrap text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
           ))}
         </div>
       )}

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

@@ -5,9 +5,10 @@ import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
 
 interface NetworkPolicyRendererProps {
   data: any
+  staged?: boolean
 }
 
-export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
+export function NetworkPolicyRenderer({ data, staged = false }: NetworkPolicyRendererProps) {
   const spec = data.spec || {}
   const podSelector = spec.podSelector || {}
   const policyTypes: string[] = spec.policyTypes || []
@@ -23,7 +24,7 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
     <>
       {hasDiagramContent && (
         <Section title="Policy Flow" icon={GitFork} defaultExpanded>
-          <NetworkPolicyDiagram spec={spec} />
+          <NetworkPolicyDiagram spec={spec} staged={staged} />
         </Section>
       )}
 
@@ -125,7 +126,9 @@ function IngressEgressRuleCard({
       )}
 
       {peers.length === 0 && ports.length === 0 && (
-        <div className="text-xs text-theme-text-tertiary">Allow all</div>
+        <div className="text-xs text-theme-text-tertiary">
+          {direction === 'from' ? 'All sources' : 'All destinations'}
+        </div>
       )}
     </div>
   )

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

@@ -16,7 +16,10 @@ export function OCIRepositoryRenderer({ data }: OCIRepositoryRendererProps) {
   const artifact = status.artifact || {}
 
   // Convert to unified GitOps status
-  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true, {
+    generation: data.metadata?.generation,
+    observedGeneration: status.observedGeneration,
+  })
 
   // Problem detection
   const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []

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

@@ -1,6 +1,8 @@
 import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
+import { PolicySection } from './PolicySection'
+import type { PolicyResourceResponse } from '../../../types/policy'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
@@ -108,6 +110,10 @@ interface PodRendererProps {
   rbacData?: RBACSubjectResponse | null
   rbacLoading?: boolean
   rbacError?: Error | null
+  /** Undefined means the host didn't wire the fetch; the section is omitted. */
+  policyData?: PolicyResourceResponse | null
+  policyLoading?: boolean
+  policyError?: Error | null
 }
 
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
@@ -287,6 +293,9 @@ export function PodRenderer({
   rbacData,
   rbacLoading,
   rbacError,
+  policyData,
+  policyLoading,
+  policyError,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -582,6 +591,10 @@ export function PodRenderer({
       )}
 
       {/* Container Status */}
+      {policyData !== undefined && (
+        <PolicySection data={policyData} loading={policyLoading} error={policyError} />
+      )}
+
       <Section title="Containers" icon={HardDrive} defaultExpanded>
         <div className="space-y-3">
           {containers.map((container: any) => {