@skyhook-io/k8s-ui 1.14.5 → 1.14.7

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

@@ -1,7 +1,8 @@
 import { useState } from 'react'
-import { Info, CheckCircle, XCircle, AlertCircle, ChevronRight, ChevronDown, FileCode, AlertTriangle, Layers } from 'lucide-react'
+import { Info, CheckCircle, XCircle, AlertCircle, FileCode, AlertTriangle, Layers } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron, useDisclosure } from '../../ui/Collapse'
 import { getGenericResourceStatus } from '../generic-status'
 import type { HealthLevel } from '../resource-utils'
 
@@ -244,19 +245,23 @@ interface NestedObjectViewerProps {
 
 function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps) {
   const [expanded, setExpanded] = useState(depth < 1)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   if (Array.isArray(value)) {
     return (
       <div className="text-sm">
         <button
+          {...buttonProps}
           onClick={() => setExpanded(!expanded)}
           className="flex items-center gap-1 text-theme-text-secondary hover:text-theme-text-primary transition-colors"
         >
-          {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="font-medium">{name}</span>
           <span className="text-xs text-theme-text-tertiary">({value.length} items)</span>
         </button>
-        {expanded && (
+        {/* Recursive and unbounded: closed branches unmount so a deep object
+            costs only the rows the user has actually opened. */}
+        <Collapse open={expanded} unmountOnExit id={panelId}>
           <div className="ml-5 mt-1 space-y-1">
             {value.map((item, i) => {
               if (typeof item === 'object' && item !== null) {
@@ -269,7 +274,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
               )
             })}
           </div>
-        )}
+        </Collapse>
       </div>
     )
   }
@@ -282,14 +287,15 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
     return (
       <div className="text-sm">
         <button
+          {...buttonProps}
           onClick={() => setExpanded(!expanded)}
           className="flex items-center gap-1 text-theme-text-secondary hover:text-theme-text-primary transition-colors"
         >
-          {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
+          <CollapseChevron open={expanded} className="w-3.5 h-3.5" />
           <span className="font-medium">{name}</span>
           <span className="text-xs text-theme-text-tertiary">({entries.length} fields)</span>
         </button>
-        {expanded && (
+        <Collapse open={expanded} unmountOnExit id={panelId}>
           <div className="ml-5 mt-1 space-y-1">
             {simpleEntries.map(([k, v]) => (
               <div key={k} className="flex items-start gap-2 text-xs">
@@ -301,7 +307,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
               <NestedObjectViewer key={k} name={formatFieldName(k)} value={v} depth={depth + 1} />
             ))}
           </div>
-        )}
+        </Collapse>
       </div>
     )
   }

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

@@ -1,8 +1,9 @@
 import type React from 'react'
-import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks, ChevronDown, ChevronRight } from 'lucide-react'
+import { Shield, ShieldCheck, ShieldAlert, FileWarning, ListChecks } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useState } from 'react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Collapse, CollapseChevron } from '../../ui/Collapse'
 import {
   getPolicyReportSummary,
   getPolicyReportResults,
@@ -60,7 +61,7 @@ function ResultRow({ result }: { result: any }) {
         onClick={() => hasMessage && setExpanded(!expanded)}
       >
         {hasMessage ? (
-          expanded ? <ChevronDown className="w-3 h-3 text-theme-text-tertiary shrink-0" /> : <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+          <CollapseChevron open={expanded} className="w-3 h-3" />
         ) : (
           <span className="w-3 shrink-0" />
         )}
@@ -80,7 +81,8 @@ function ResultRow({ result }: { result: any }) {
           <span className="text-theme-text-tertiary truncate">/ {result.rule}</span>
         )}
       </div>
-      {expanded && message && (
+      {/* A report can hold hundreds of rows; each detail renders on first open. */}
+      <Collapse open={expanded && hasMessage} mountLazily>
         <div className="px-2 pb-2 pl-7">
           <div className="text-xs text-theme-text-secondary break-all card-inner">
             {message}
@@ -97,7 +99,7 @@ function ResultRow({ result }: { result: any }) {
             </div>
           )}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

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

@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { LimitRangeRenderer, NamespaceLimitRangeLink, NamespaceLimitRangesSection } from './LimitRangeRenderer'
+
+function err(message: string, status?: number): Error {
+  return Object.assign(new Error(message), status === undefined ? {} : { status })
+}
+
+const multiType = {
+  apiVersion: 'v1',
+  kind: 'LimitRange',
+  metadata: { name: 'team-limits', namespace: 'dev' },
+  spec: {
+    limits: [
+      {
+        type: 'Container',
+        min: { cpu: '10m', memory: '16Mi' },
+        max: { cpu: '2', memory: '2Gi' },
+        default: { cpu: '500m', memory: '512Mi' },
+        defaultRequest: { cpu: '100m', memory: '128Mi' },
+        maxLimitRequestRatio: { cpu: '4' },
+      },
+      { type: 'Pod', max: { cpu: '4' } },
+      { type: 'PersistentVolumeClaim', min: { storage: '1Gi' }, max: { storage: '100Gi' } },
+    ],
+  },
+}
+
+describe('LimitRangeRenderer', () => {
+  it('renders every declared entry type with its own rules', () => {
+    const html = renderToString(<LimitRangeRenderer data={multiType} />)
+    expect(html).toContain('Container')
+    expect(html).toContain('Pod')
+    expect(html).toContain('PersistentVolumeClaim')
+    expect(html).toContain('100m')
+    expect(html).toContain('2Gi')
+    expect(html).toContain('storage')
+  })
+
+  // Units and resource names carry the meaning; a reformatted quantity is a
+  // different claim from the one the object makes.
+  it('shows quantities verbatim', () => {
+    const html = renderToString(<LimitRangeRenderer data={multiType} />)
+    expect(html).toContain('16Mi')
+    expect(html).toContain('10m')
+    expect(html).not.toContain('0.01 cores')
+  })
+
+  // An absent facet is not a limit of zero, and a limit of zero is a real rule.
+  it('keeps an unset value distinct from an explicit zero', () => {
+    const html = renderToString(<LimitRangeRenderer data={{
+      spec: { limits: [{ type: 'Container', min: { cpu: '0' }, max: { cpu: '1', memory: '1Gi' } }] },
+    }} />)
+    // memory has a max but no min, so its min cell is the unset marker.
+    expect(html).toContain('Not set')
+    expect(html).toContain('>0<')
+  })
+
+  it('drops facets the entry never declares instead of showing empty columns', () => {
+    const html = renderToString(<LimitRangeRenderer data={{
+      spec: { limits: [{ type: 'Pod', max: { cpu: '4' } }] },
+    }} />)
+    expect(html).toContain('Max')
+    expect(html).not.toContain('Default request')
+    expect(html).not.toContain('Max limit/request')
+  })
+
+  it('states that a LimitRange with no entries constrains nothing', () => {
+    const html = renderToString(<LimitRangeRenderer data={{ spec: {} }} />)
+    expect(html).toContain('constrains nothing')
+  })
+})
+
+describe('NamespaceLimitRangesSection', () => {
+  it('summarizes each LimitRange and links to it', () => {
+    const html = renderToString(
+      <NamespaceLimitRangesSection limitRanges={[multiType]} namespace="dev" onNavigate={() => {}} />,
+    )
+    expect(html).toContain('team-limits')
+    expect(html).toContain('Container')
+    expect(html).toContain('default request')
+  })
+
+  it('tells an empty namespace apart from one still loading', () => {
+    const empty = renderToString(<NamespaceLimitRangesSection limitRanges={[]} namespace="dev" />)
+    expect(empty).toContain('Limit Ranges (0)')
+    expect(empty).toContain('No LimitRanges found')
+    expect(empty).toContain('Other admission policies may still apply')
+
+    const loading = renderToString(<NamespaceLimitRangesSection loading namespace="dev" />)
+    expect(loading).toContain('Loading limit ranges')
+    expect(loading).not.toContain('No LimitRanges found')
+  })
+
+  // "You can't see the rules" and "there are no rules" lead to opposite
+  // conclusions about what will happen at admission.
+  it('reports a denied read rather than implying no rules exist', () => {
+    const html = renderToString(
+      <NamespaceLimitRangesSection error={err('forbidden', 403)} namespace="dev" />,
+    )
+    expect(html).toContain('permission')
+    expect(html).not.toContain('No LimitRanges found')
+  })
+
+  it('keeps cached rules visible with a stale warning when a refresh fails', () => {
+    const html = renderToString(
+      <NamespaceLimitRangesSection limitRanges={[multiType]} error={err('unavailable', 500)} namespace="dev" />,
+    )
+    expect(html).toContain('team-limits')
+    expect(html).toContain('Showing previously loaded rules')
+    expect(html).toContain('unavailable')
+    expect(html).not.toContain('This may be incomplete')
+  })
+
+  it('hides cached rules when access is denied', () => {
+    const html = renderToString(
+      <NamespaceLimitRangesSection limitRanges={[multiType]} error={err('forbidden', 403)} namespace="dev" />,
+    )
+    expect(html).toContain('permission')
+    expect(html).not.toContain('team-limits')
+    expect(html).not.toContain('No LimitRanges found')
+  })
+
+  it('keeps a fetch fault loud', () => {
+    const html = renderToString(
+      <NamespaceLimitRangesSection error={err('boom', 500)} namespace="dev" />,
+    )
+    expect(html).toContain('boom')
+    expect(html).toContain('text-red-400')
+  })
+})
+
+describe('NamespaceLimitRangeLink', () => {
+  it('links every LimitRange that governs the namespace', () => {
+    const html = renderToString(
+      <NamespaceLimitRangeLink namespace="dev" names={['team-limits', 'storage-limits']} scope="pod" onNavigate={() => {}} />,
+    )
+    expect(html).toContain('Namespace defaults')
+    expect(html).toContain('team-limits')
+    expect(html).toContain('storage-limits')
+  })
+
+  // Nothing to point at yet is not the same as pointing at nothing.
+  it('renders nothing when the lookup produced no names', () => {
+    expect(renderToString(<NamespaceLimitRangeLink namespace="dev" names={[]} scope="pod" />)).toBe('')
+    expect(renderToString(<NamespaceLimitRangeLink namespace="dev" scope="pod" />)).toBe('')
+  })
+
+  it('offers the scope explanation without adding inline prose', () => {
+    const html = renderToString(
+      <NamespaceLimitRangeLink namespace="dev" names={['team-limits']} scope="workload" onNavigate={() => {}} />,
+    )
+    expect(html).toContain('About namespace defaults and constraints')
+    expect(html).not.toContain('not the workload object itself')
+  })
+})

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

@@ -0,0 +1,277 @@
+import { Info, SlidersHorizontal } from 'lucide-react'
+import { Section, ResourceLink } from '../../ui/drawer-components'
+import { Tooltip } from '../../ui/Tooltip'
+import { LookupFailureNote } from './LookupFailureNote'
+import { isForbiddenError } from '../../../types/fetch-error'
+
+// A LimitRange declares the defaults and constraints the API server applies to
+// pods, containers and PVCs admitted into a namespace. It has no status, so
+// there is nothing to diagnose here — only the declared rules, shown as
+// written.
+
+interface LimitRangeFacet {
+  key: 'min' | 'max' | 'defaultRequest' | 'default' | 'maxLimitRequestRatio'
+  label: string
+  hint: string
+}
+
+const FACETS: LimitRangeFacet[] = [
+  { key: 'min', label: 'Min', hint: 'Lowest value accepted at admission.' },
+  { key: 'max', label: 'Max', hint: 'Highest value accepted at admission.' },
+  { key: 'defaultRequest', label: 'Default request', hint: 'Request applied when the resource omits one.' },
+  { key: 'default', label: 'Default limit', hint: 'Limit applied when the resource omits one.' },
+  {
+    key: 'maxLimitRequestRatio',
+    label: 'Max limit/request',
+    hint: 'Largest allowed limit ÷ request. A ratio, not a quantity — it carries no unit.',
+  },
+]
+
+const TYPE_SCOPE: Record<string, string> = {
+  Container: 'each container, individually',
+  Pod: 'the pod’s resource requests and limits',
+  PersistentVolumeClaim: 'each PersistentVolumeClaim',
+}
+
+type QuantityMap = Record<string, unknown>
+
+function facetMap(item: any, key: LimitRangeFacet['key']): QuantityMap {
+  const value = item?.[key]
+  return value && typeof value === 'object' ? (value as QuantityMap) : {}
+}
+
+/** Resource names this entry mentions anywhere, so a resource constrained by
+ *  only one facet still gets a row. */
+function entryResourceNames(item: any): string[] {
+  const names = new Set<string>()
+  for (const facet of FACETS) {
+    for (const name of Object.keys(facetMap(item, facet.key))) names.add(name)
+  }
+  return [...names].sort()
+}
+
+/** Facets this entry actually declares. An absent facet is not a zero, so it is
+ *  dropped rather than rendered as an empty column. */
+function entryFacets(item: any): LimitRangeFacet[] {
+  return FACETS.filter(facet => Object.keys(facetMap(item, facet.key)).length > 0)
+}
+
+function limitRangeItems(data: any): any[] {
+  const limits = data?.spec?.limits
+  return Array.isArray(limits) ? limits : []
+}
+
+export function LimitRangeRenderer({ data }: { data: any }) {
+  const items = limitRangeItems(data)
+
+  return (
+    <Section title="Defaults & Constraints" icon={SlidersHorizontal}>
+      {items.length === 0 ? (
+        <div className="text-xs text-theme-text-secondary">
+          This LimitRange declares no entries, so it constrains nothing.
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {items.map((item: any, index: number) => (
+            <LimitRangeEntry key={`${item?.type ?? 'entry'}-${index}`} item={item} />
+          ))}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+function LimitRangeEntry({ item }: { item: any }) {
+  const type = typeof item?.type === 'string' && item.type ? item.type : 'Unknown'
+  const scope = TYPE_SCOPE[type]
+  const facets = entryFacets(item)
+  const resources = entryResourceNames(item)
+
+  return (
+    <div className="card-inner">
+      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 mb-2">
+        <span className="text-xs font-medium text-theme-text-primary">{type}</span>
+        {scope && <span className="text-xs text-theme-text-tertiary">applies to {scope}</span>}
+      </div>
+      {resources.length === 0 ? (
+        <div className="text-xs text-theme-text-secondary">No resources constrained by this entry.</div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead>
+              <tr className="text-theme-text-tertiary text-left">
+                <th className="font-normal pr-3 pb-1">Resource</th>
+                {facets.map(facet => (
+                  <th key={facet.key} className="font-normal pr-3 pb-1 text-right whitespace-nowrap">
+                    <Tooltip content={facet.hint} delay={150}>
+                      <span className="border-b border-dotted border-theme-text-tertiary cursor-help">{facet.label}</span>
+                    </Tooltip>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {resources.map(name => (
+                <tr key={name} className="border-t border-theme-border">
+                  <td className="pr-3 py-1 text-theme-text-secondary break-all">{name}</td>
+                  {facets.map(facet => {
+                    const raw = facetMap(item, facet.key)[name]
+                    const set = raw !== undefined && raw !== null
+                    return (
+                      <td
+                        key={facet.key}
+                        className="pr-3 py-1 text-right tabular-nums whitespace-nowrap text-theme-text-primary"
+                      >
+                        {set ? String(raw) : <span className="text-theme-text-tertiary" title="Not set">—</span>}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// NAMESPACE SECTION
+// ============================================================================
+// Namespace-level summary: which LimitRanges exist and what each one declares,
+// linking out to the full tables. Reached from the namespace an operator is
+// already troubleshooting, which is where the question "what gets applied to
+// pods here?" actually comes up.
+
+export function NamespaceLimitRangesSection({
+  limitRanges,
+  loading,
+  error,
+  namespace,
+  onNavigate,
+}: {
+  limitRanges?: any[]
+  loading?: boolean
+  error?: unknown
+  namespace: string
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}) {
+  const denied = isForbiddenError(error)
+  const showCached = !!error && !denied && !!limitRanges?.length
+  const empty = !error && !loading && limitRanges?.length === 0
+
+  return (
+    <Section
+      key={`${namespace}-${empty ? 'empty' : 'rules'}`}
+      title={empty ? 'Limit Ranges (0)' : 'Limit Ranges'}
+      icon={SlidersHorizontal}
+      defaultExpanded={!empty}
+    >
+      {error != null && (
+        <div className="mb-2">
+          <LookupFailureNote errors={[error]} what="this namespace’s LimitRanges" />
+          {showCached && (
+            <div className="mt-1 text-xs text-theme-text-secondary">
+              Showing previously loaded rules. They may have changed.
+            </div>
+          )}
+        </div>
+      )}
+      {error && !showCached ? null : !limitRanges ? (
+        <div className="text-xs text-theme-text-secondary">
+          {loading ? 'Loading limit ranges…' : 'Limit ranges have not been read yet.'}
+        </div>
+      ) : limitRanges.length === 0 ? (
+        <div className="text-xs text-theme-text-secondary">
+          No LimitRanges found in this namespace. Other admission policies may still apply.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {limitRanges.map((lr: any, index: number) => {
+            const name = lr?.metadata?.name ?? `limitrange-${index}`
+            const items = limitRangeItems(lr)
+            return (
+              <div key={name} className="card-inner">
+                <div className="text-xs font-medium text-theme-text-primary">
+                  <ResourceLink
+                    name={name}
+                    kind="limitranges"
+                    namespace={lr?.metadata?.namespace || namespace}
+                    onNavigate={onNavigate}
+                  />
+                </div>
+                {items.length === 0 ? (
+                  <div className="mt-1 text-xs text-theme-text-tertiary">No entries.</div>
+                ) : (
+                  <div className="mt-1 space-y-0.5">
+                    {items.map((item: any, itemIndex: number) => {
+                      const facets = entryFacets(item)
+                      return (
+                        <div key={`${item?.type ?? 'entry'}-${itemIndex}`} className="text-xs text-theme-text-tertiary">
+                          <span className="text-theme-text-secondary">{item?.type || 'Unknown'}</span>
+                          {facets.length > 0 && ` · ${facets.map(f => f.label.toLowerCase()).join(', ')}`}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+// ============================================================================
+// CONTEXTUAL LINK (Pod / workload resource sections)
+// ============================================================================
+
+const SCOPE_CAVEAT: Record<'pod' | 'workload', string> = {
+  pod: 'The namespace’s current rules for admitting pods — not a record of what was applied to this pod. Other admission plugins may also change a pod’s resources.',
+  workload:
+    'The namespace’s current rules for admitting this workload’s pods, not the workload object itself. Other admission plugins may also change a pod’s resources.',
+}
+
+/** Small pointer from a resource's requests/limits to the namespace rules that
+ *  govern them. Renders nothing until the host has names to show, so a pending
+ *  or unreadable lookup makes no claim either way. */
+export function NamespaceLimitRangeLink({
+  namespace,
+  names,
+  scope,
+  onNavigate,
+}: {
+  namespace: string
+  names?: string[] | null
+  scope: 'pod' | 'workload'
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}) {
+  if (!names?.length) return null
+
+  return (
+    <div className="mt-3 pt-2 border-t border-theme-border text-xs text-theme-text-tertiary">
+      <div>
+        Namespace defaults &amp; constraints:{' '}
+        {names.map((name, index) => (
+          <span key={name}>
+            {index > 0 && ', '}
+            <ResourceLink name={name} kind="limitranges" namespace={namespace} onNavigate={onNavigate} />
+          </span>
+        ))}
+        {' '}
+        <Tooltip content={SCOPE_CAVEAT[scope]}>
+          <button
+            type="button"
+            aria-label="About namespace defaults and constraints"
+            className="inline-flex align-middle text-theme-text-tertiary hover:text-theme-text-secondary"
+          >
+            <Info className="w-3 h-3" />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-c
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
 import { RBACErrorSection } from './RBACErrorSection'
+import { NamespaceLimitRangesSection } from './LimitRangeRenderer'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { parseCPUToNanocores, parseMemoryToBytes, parseQuantityToNumber } from '../../../utils/format'
 
@@ -30,10 +31,21 @@ interface NamespaceRendererProps {
    * fetch 500/503s isn't mistaken for quota-free. (403 stays hidden upstream.)
    */
   quotaError?: Error | null
+  /**
+   * LimitRange objects for this namespace (from /api/resources/limitranges
+   * ?namespace=). Undefined when the host hasn't wired the fetch (section
+   * omitted) or while the read is in flight — an empty array is a real answer
+   * ("nothing constrains this namespace") and must not be confused with it.
+   */
+  limitRangeData?: any[]
+  limitRangeLoading?: boolean
+  /** Passed through including 403: a denial reads as "you can't check", which
+   *  is a different statement from "there are none". */
+  limitRangeError?: unknown
   onNavigate?: (ref: ResourceRef) => void
 }
 
-export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quotaData, quotaError, onNavigate }: NamespaceRendererProps) {
+export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quotaData, quotaError, limitRangeData, limitRangeLoading, limitRangeError, onNavigate }: NamespaceRendererProps) {
   const metadata = data.metadata || {}
   const status = data.status || {}
   const phase = status.phase
@@ -69,6 +81,17 @@ export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, quot
         <NamespaceQuotaSection quotas={quotaData ?? []} error={quotaError ?? null} />
       )}
 
+      {/* LimitRange rules — only when host wired the fetch. */}
+      {(limitRangeData !== undefined || limitRangeLoading || limitRangeError != null) && (
+        <NamespaceLimitRangesSection
+          limitRanges={limitRangeData}
+          loading={limitRangeLoading}
+          error={limitRangeError}
+          namespace={metadata.name ?? ''}
+          onNavigate={onNavigate}
+        />
+      )}
+
       {/* RBAC summary — only when host wired the fetch. */}
       {rbacData !== undefined && (
         <NamespaceRBACSection

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

@@ -6,6 +6,8 @@ import {
   NETWORK_POLICY_PEER_STYLES,
   type NetworkPolicyPeerType,
 } from './network-policy-peer-styles'
+import { effectivePolicyTypes, formatNetworkPolicyPort } from '../../../utils/network-policy'
+import { formatKubernetesLabelSelector } from '../resource-utils-calico'
 
 interface NetworkPolicyDiagramProps {
   spec: any
@@ -20,16 +22,12 @@ interface NetworkPolicyDiagramProps {
  */
 export function NetworkPolicyDiagram({ spec, staged = false }: NetworkPolicyDiagramProps) {
   const podSelector = spec.podSelector || {}
-  const matchLabels = podSelector.matchLabels || {}
-  const policyTypes: string[] = spec.policyTypes || []
   const ingress: any[] | undefined = spec.ingress
   const egress: any[] | undefined = spec.egress
 
-  const hasIngress = policyTypes.includes('Ingress')
-  const hasEgress = policyTypes.includes('Egress')
-  const targetLabel = Object.keys(matchLabels).length > 0
-    ? Object.entries(matchLabels).map(([k, v]) => `${k}=${v}`).join(', ')
-    : 'All pods'
+  const { ingress: hasIngress, egress: hasEgress } = effectivePolicyTypes(spec)
+  const target = formatSelector(podSelector)
+  const targetLabel = target === 'all' ? 'All pods' : target
 
   const ingressDenied = hasIngress && (!ingress || ingress.length === 0)
   const egressDenied = hasEgress && (!egress || egress.length === 0)
@@ -159,18 +157,13 @@ function extractPeers(peers: any[] | undefined): PeerInfo[] {
 
 function extractPorts(ports: any[] | undefined): string[] {
   if (!ports || ports.length === 0) return []
-  return ports.map((p: any) => {
-    const proto = p.protocol || 'TCP'
-    const port = p.port || '*'
-    const endPort = p.endPort
-    return endPort ? `${proto}/${port}-${endPort}` : `${proto}/${port}`
-  })
+  return ports.map(formatNetworkPolicyPort)
 }
 
+// matchExpressions select too; a selector made only of them is not "all".
 function formatSelector(selector: any): string {
-  const labels = selector?.matchLabels || {}
-  if (Object.keys(labels).length === 0) return 'all'
-  return Object.entries(labels).map(([k, v]) => `${k}=${v}`).join(', ')
+  const text = formatKubernetesLabelSelector(selector)
+  return text === 'all workloads' ? 'all' : text
 }
 
 function FlowRow({