@skyhook-io/k8s-ui 1.14.9 → 1.14.11

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

@@ -0,0 +1,91 @@
+import { Boxes, Gauge, ListChecks, Settings } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import { AlertBanner, ConditionsSection, Property, PropertyList, ResourceLink, Section, type ConditionTone } from '../../ui/drawer-components'
+import { getAdmissionCheckStatus, getProvisioningRequestStatus, getProvisioningRequestMessage, getProvisioningRequestStatusCondition, isKueueConditionStale } from '../resource-utils-kueue'
+
+interface Props {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+export function AdmissionCheckRenderer({ data, onNavigate }: Props) {
+  const spec = data.spec ?? {}
+  const condition = data.status?.conditions?.find((c: any) => c.type === 'Active')
+  const status = getAdmissionCheckStatus(data)
+  const parameters = spec.parameters
+  const knownConfig = parameters?.apiGroup === 'kueue.x-k8s.io' && parameters?.kind === 'ProvisioningRequestConfig'
+  return <>
+    <Section title="Check Controller" icon={ListChecks} defaultExpanded>
+      <PropertyList>
+        <Property label="Reported State" value={<Badge colorClass={status.color}>{status.text}</Badge>} />
+        <Property label="Controller" value={<span className="break-all">{spec.controllerName || 'Not specified'}</span>} />
+        {condition?.reason && <Property label="Reason" value={condition.reason} />}
+      </PropertyList>
+      {condition?.message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{condition.message}</p>}
+      <p className="mt-2 text-xs text-theme-text-tertiary">Active means the controller is ready to evaluate checks. Each Workload reports its own Pending, Ready, Retry or Rejected result.</p>
+      {!condition && <p className="mt-2 text-sm text-theme-text-tertiary">Controller readiness has not been reported.</p>}
+      {status.text === 'Stale' && <p className="mt-2 text-sm text-warning-text">Reported readiness describes an earlier generation.</p>}
+    </Section>
+    {parameters && <Section title="Check Configuration" icon={Settings} defaultExpanded>
+      <PropertyList>
+        <Property label="Kind" value={parameters.kind} />
+        <Property label="API Group" value={parameters.apiGroup} />
+        <Property label="Name" value={knownConfig && parameters.name ? <ResourceLink name={parameters.name} kind="ProvisioningRequestConfig" group={parameters.apiGroup} onNavigate={onNavigate} /> : parameters.name} />
+      </PropertyList>
+    </Section>}
+    {data.apiVersion === 'kueue.x-k8s.io/v1beta1' && spec.retryDelayMinutes != null && <PropertyList><Property label="Retry Delay (deprecated)" value={`${spec.retryDelayMinutes} minutes`} /></PropertyList>}
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={c => isKueueConditionStale(c, data.metadata?.generation) ? 'unknown' : c.type === 'Active' ? c.status === 'True' ? 'ok' : c.status === 'False' ? 'warning' : 'unknown' : 'unknown'} defaultExpanded />
+  </>
+}
+
+export function provisioningConditionTone(condition: any): ConditionTone {
+  if (condition.status !== 'True' && condition.status !== 'False') return 'unknown'
+  if (['Failed', 'CapacityRevoked'].includes(condition.type)) return condition.status === 'True' ? 'fail' : 'ok'
+  if (['Accepted', 'Provisioned'].includes(condition.type)) return condition.status === 'True' ? 'ok' : 'unknown'
+  return 'unknown'
+}
+
+export function ProvisioningRequestRenderer({ data, onNavigate }: Props) {
+  const spec = data.spec ?? {}
+  const status = getProvisioningRequestStatus(data)
+  const condition = getProvisioningRequestStatusCondition(data)
+  const message = getProvisioningRequestMessage(data)
+  const stale = isKueueConditionStale(condition, data.metadata?.generation)
+  const namespace = data.metadata?.namespace ?? ''
+  const owner = data.metadata?.ownerReferences?.find((ref: any) => ref.controller === true && ref.kind === 'Workload' && ['kueue.x-k8s.io/v1beta1', 'kueue.x-k8s.io/v1beta2'].includes(ref.apiVersion))
+  const podSets = spec.podSets ?? []
+  return <>
+    {stale && <AlertBanner variant="info" title="Reported state describes an earlier generation" message="Inspect the conditions before treating this outcome as current." />}
+    <Section title="Provisioning" icon={Gauge} defaultExpanded>
+      <PropertyList>
+        <Property label="Reported State" value={<Badge colorClass={status.color}>{status.text}</Badge>} />
+        <Property label="Provisioning Class" value={<span className="break-all">{spec.provisioningClassName || 'Not specified'}</span>} />
+        {condition?.reason && <Property label="Reason" value={condition.reason} />}
+        {owner && <Property label="Owner Workload" value={<ResourceLink kind="workloads" group="kueue.x-k8s.io" namespace={namespace} name={owner.name} onNavigate={onNavigate} />} />}
+      </PropertyList>
+      {message && <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{message}</p>}
+      {!condition && <p className="mt-2 text-sm text-theme-text-tertiary">No provisioning outcome has been reported. Inspect any conditions below.</p>}
+      <p className="mt-2 text-xs text-theme-text-tertiary">Controller-reported provisioning outcome, not a live check of Nodes or running Pods. Accepted means the request was picked up; Provisioned does not mean the Workload is running.</p>
+      {condition?.type === 'BookingExpired' && <p className="mt-2 text-xs text-theme-text-tertiary">The capacity booking expired. This alone does not establish a Workload failure; inspect its admission and execution state.</p>}
+    </Section>
+    <ConditionsSection conditions={data.status?.conditions} getConditionTone={c => isKueueConditionStale(c, data.metadata?.generation) ? 'unknown' : provisioningConditionTone(c)} defaultExpanded />
+    <Section title={`Requested Pod Sets (${podSets.length})`} icon={Boxes} defaultExpanded>
+      <p className="mb-2 text-xs text-theme-text-tertiary">Requested Pod counts and templates, not observed Pods or allocated devices.</p>
+      <div className="space-y-2">
+        {podSets.map((set: any, index: number) => <div className="card-inner break-words [&_button]:text-left" key={index}>
+          <PropertyList>
+            <Property label="Pod Template" value={set.podTemplateRef?.name ? <ResourceLink kind="PodTemplate" group="" namespace={namespace} name={set.podTemplateRef.name} onNavigate={onNavigate} /> : 'Not specified'} />
+            <Property label="Requested Pods" value={set.count ?? 'Not specified'} />
+          </PropertyList>
+        </div>)}
+        {podSets.length === 0 && <p className="text-sm text-theme-text-tertiary">No PodSets declared.</p>}
+      </div>
+    </Section>
+    {Object.keys(spec.parameters ?? {}).length > 0 && <Section title="Provider Parameters" icon={Settings} defaultExpanded={false}>
+      <PropertyList>{Object.entries(spec.parameters).map(([key, value]) => <Property key={key} label={key} value={<span className="whitespace-pre-wrap break-all">{String(value)}</span>} />)}</PropertyList>
+    </Section>}
+    {Object.keys(data.status?.provisioningClassDetails ?? {}).length > 0 && <Section title="Provider Details" icon={Settings} defaultExpanded={false}>
+      <PropertyList>{Object.entries(data.status.provisioningClassDetails).map(([key, value]) => <Property key={key} label={key} value={<span className="whitespace-pre-wrap break-all">{String(value)}</span>} />)}</PropertyList>
+    </Section>}
+  </>
+}

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { ClusterQueueRenderer, LocalQueueRenderer } from './KueueQueueRenderers'
+
+it('navigates from a namespaced LocalQueue to exact cluster-scoped Kueue dependencies', async () => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  const onNavigate = vi.fn()
+  try {
+    await act(async () =>
+      root.render(
+        <LocalQueueRenderer
+          data={{
+            apiVersion: 'kueue.x-k8s.io/v1beta2',
+            metadata: { namespace: 'ml' },
+            spec: { clusterQueue: 'shared' },
+          }}
+          onNavigate={onNavigate}
+        />,
+      ),
+    )
+    const click = async (name: string) => {
+      const button = [...container.querySelectorAll('button')].find((button) => button.textContent === name)
+      expect(button).toBeDefined()
+      await act(async () => button!.click())
+    }
+    await click('shared')
+    expect(onNavigate).toHaveBeenLastCalledWith({
+      kind: 'clusterqueues',
+      namespace: '',
+      name: 'shared',
+      group: 'kueue.x-k8s.io',
+    })
+    await act(async () =>
+      root.render(
+        <ClusterQueueRenderer
+          data={{
+            apiVersion: 'kueue.x-k8s.io/v1beta2',
+            spec: {
+              resourceGroups: [{ flavors: [{ name: 'cpu-flavor', resources: [{ name: 'cpu', nominalQuota: '1' }] }] }],
+              admissionChecksStrategy: { admissionChecks: [{ name: 'policy-check' }] },
+            },
+          }}
+          onNavigate={onNavigate}
+        />,
+      ),
+    )
+    await click('cpu-flavor')
+    expect(onNavigate).toHaveBeenLastCalledWith({
+      kind: 'resourceflavors',
+      namespace: '',
+      name: 'cpu-flavor',
+      group: 'kueue.x-k8s.io',
+    })
+    await click('policy-check')
+    expect(onNavigate).toHaveBeenLastCalledWith({
+      kind: 'admissionchecks',
+      namespace: '',
+      name: 'policy-check',
+      group: 'kueue.x-k8s.io',
+    })
+  } finally {
+    await act(async () => root.unmount())
+    globalThis.IS_REACT_ACT_ENVIRONMENT = false
+  }
+})

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

@@ -0,0 +1,123 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ClusterQueueRenderer, LocalQueueRenderer } from './KueueQueueRenderers'
+import { getAdmissionCheckStatus, getClusterQueueStatus, getLocalQueueStatus, getKueueQueueQuotaRows } from '../resource-utils-kueue'
+
+const base = { apiVersion: 'kueue.x-k8s.io/v1beta2', metadata: { generation: 3 }, spec: {} }
+const render = (data: any, local = false) => renderToStaticMarkup(local ? <LocalQueueRenderer data={data} /> : <ClusterQueueRenderer data={data} />)
+const usage = (name: string, resources: Record<string, string>) => ({ name, resources: Object.entries(resources).map(([name, total]) => ({ name, total })) })
+
+describe('queue quota accounting', () => {
+  it('joins by flavor and resource, preserves declared order, and retains status-only entries', () => {
+    const data = { ...base, spec: { resourceGroups: [{ flavors: [
+      { name: 'b', resources: [{ name: 'cpu', nominalQuota: '500m', borrowingLimit: 0 }, { name: 'memory', nominalQuota: '2Gi' }] },
+      { name: 'a', resources: [{ name: 'nvidia.com/gpu', nominalQuota: '0', lendingLimit: '0' }] },
+    ] }] }, status: {
+      flavorsReservation: [usage('a', { 'nvidia.com/gpu': '1' }), usage('b', { memory: '1Gi', cpu: '0' }), usage('old', { cpu: '2' })],
+      flavorsUsage: [usage('b', { cpu: '0' })],
+    } }
+    expect(getKueueQueueQuotaRows(data, true)).toEqual([
+      { flavor: 'b', resource: 'cpu', configured: true, nominal: '500m', borrowingLimit: 0, reserved: '0', used: '0' },
+      { flavor: 'b', resource: 'memory', configured: true, nominal: '2Gi', reserved: '1Gi' },
+      { flavor: 'a', resource: 'nvidia.com/gpu', configured: true, nominal: '0', lendingLimit: '0', reserved: '1' },
+      { flavor: 'old', resource: 'cpu', configured: false, reserved: '2' },
+    ])
+    expect(render(data)).toContain('Not in current configuration')
+    expect(render(data)).toContain('Not reported')
+  })
+
+  it('keeps borrowed amounts inside totals and distinguishes zero limits from uncapped borrowing', () => {
+    const data = { ...base, spec: { cohortName: 'shared', resourceGroups: [{ flavors: [{ name: 'cpu', resources: [
+      { name: 'cpu', nominalQuota: '1', borrowingLimit: '0', lendingLimit: 0 }, { name: 'memory', nominalQuota: '1Gi' },
+    ] }] }] }, status: { flavorsReservation: [{ name: 'cpu', resources: [{ name: 'cpu', total: '2', borrowed: '1' }] }] } }
+    const html = render(data)
+    for (const text of ['Borrowing limit: 0', 'Lending limit: 0', 'borrowing has no configured cap', 'all nominal quota may be lent', 'Borrowed reservation: 1']) expect(html).toContain(text)
+    expect(getKueueQueueQuotaRows(data, true)[0].reserved).toBe('2')
+    expect(render({ ...data, spec: { ...data.spec, cohortName: undefined } })).not.toContain('Borrowing limit:')
+  })
+
+  it('reads the actual v1beta1 LocalQueue usage spelling without importing parent quota', () => {
+    const data = { ...base, apiVersion: 'kueue.x-k8s.io/v1beta1', spec: { clusterQueue: 'shared' }, status: { flavorUsage: [usage('cpu', { cpu: '50m' })] } }
+    expect(getKueueQueueQuotaRows(data, false)[0].used).toBe('50m')
+    expect(render(data, true)).toContain('50m')
+    expect(render(data, true)).not.toContain('Nominal')
+    expect(getKueueQueueQuotaRows({ ...data, apiVersion: base.apiVersion }, false)).toEqual([])
+    expect(getKueueQueueQuotaRows({ ...data, apiVersion: base.apiVersion, status: { flavorsUsage: data.status.flavorUsage } }, false)[0].used).toBe('50m')
+  })
+})
+
+describe('queue status and policy', () => {
+  it('does not turn absent status into zero workloads or healthy state', () => {
+    const html = render(base)
+    expect(html).toContain('Controller status has not been reported')
+    expect(html).not.toContain('No Active condition reported')
+    expect(html).toContain('Unknown')
+    const counted = render({ ...base, status: { pendingWorkloads: 0, reservingWorkloads: 1, admittedWorkloads: 1 } })
+    expect(counted).not.toContain('counts have not been reported')
+    expect(counted).toContain('not additive')
+  })
+
+  it('keeps observed stops neutral, unrelated AdmissionChecks unchanged, and stale evidence unknown', () => {
+    const stopped = { ...base, status: { conditions: [{ type: 'Active', status: 'False', reason: 'Stopped', observedGeneration: 3 }] } }
+    expect(getClusterQueueStatus(stopped).level).toBe('neutral')
+    expect(getLocalQueueStatus(stopped).level).toBe('neutral')
+    expect(getAdmissionCheckStatus(stopped).level).toBe('alert')
+    expect(render(stopped)).not.toContain('failing')
+    const stale = { ...stopped, metadata: { generation: 4 } }
+    expect(getClusterQueueStatus(stale).level).toBe('unknown')
+    expect(render(stale)).toContain('earlier generation')
+  })
+
+  it('does not claim a parent is held based on LocalQueue inactivity', () => {
+    const data = { ...base, spec: { clusterQueue: 'parent' }, status: { conditions: [{ type: 'Active', status: 'False', reason: 'ClusterQueueIsInactive', message: 'parent inactive' }] } }
+    expect(getLocalQueueStatus(data).level).toBe('alert')
+    expect(render(data, true)).toContain('Inspect the ClusterQueue')
+    expect(render(data, true)).not.toContain('Configured to stop')
+  })
+
+  it.each(['Hold', 'HoldAndDrain'])('separates requested %s from an observed failure and explains reservations', (stopPolicy) => {
+    const data = { ...base, spec: { stopPolicy }, status: { conditions: [{ type: 'Active', status: 'False', reason: 'FlavorNotFound', message: 'flavor missing' }] } }
+    expect(getClusterQueueStatus(data).text).toBe('FlavorNotFound')
+    const html = render(data)
+    expect(html).toContain('cancel reservations')
+    expect(html).toContain(stopPolicy === 'Hold' ? 'may continue' : 'are to be evicted')
+    expect(html).toContain('flavor missing')
+  })
+
+  it('distinguishes no namespaces eligible from all and from a selector', () => {
+    expect(render(base)).toContain('No namespaces eligible')
+    expect(render({ ...base, spec: { namespaceSelector: {} } })).toContain('All namespaces')
+    expect(render({ ...base, spec: { namespaceSelector: { matchLabels: { team: 'ml' } } } })).toContain('team=ml')
+  })
+
+  it('preserves v1beta1 cohort and both check declarations with flavor applicability', () => {
+    const html = render({ ...base, apiVersion: 'kueue.x-k8s.io/v1beta1', spec: {
+      cohort: 'legacy-cohort', admissionChecks: ['all-check'],
+      admissionChecksStrategy: { admissionChecks: [{ name: 'gpu-check', onFlavors: ['a100'] }] },
+    } })
+    for (const text of ['legacy-cohort', 'all-check', 'gpu-check', 'Applies to all flavors', 'Applies to flavors: a100']) expect(html).toContain(text)
+  })
+})
+
+
+it('omits zero borrowing and irrelevant cohort policies on a real-shaped standalone queue', () => {
+  const data = { ...base, spec: {
+    resourceGroups: [{ flavors: [{ name: 'cpu', resources: [{ name: 'cpu', nominalQuota: '2' }] }] }],
+    preemption: { reclaimWithinCohort: 'Never', borrowWithinCohort: { policy: 'Never' } },
+    flavorFungibility: { whenCanBorrow: 'MayStopSearch' },
+  }, status: {
+    flavorsReservation: [{ name: 'cpu', resources: [{ name: 'cpu', total: '0', borrowed: '0' }] }],
+    flavorsUsage: [{ name: 'cpu', resources: [{ name: 'cpu', total: '0', borrowed: '0' }] }],
+  } }
+  const html = render(data)
+  expect(html).not.toContain('Nominal quota is not a hard ceiling')
+  for (const text of ['Borrowed reservation:', 'Reclaim within Cohort', 'Borrow with Preemption', 'Flavor when Borrowing']) expect(html).not.toContain(text)
+  const cohort = render({ ...data, spec: { ...data.spec, cohortName: 'shared' } })
+  expect(cohort).toContain('Nominal quota is not a hard ceiling')
+  expect(cohort).toContain('borrowing has no configured cap')
+  expect(cohort).not.toContain('Borrowing limit:')
+})
+
+it('uses the Active label consistently for stale healthy evidence', () => {
+  expect(getClusterQueueStatus({ ...base, status: { conditions: [{ type: 'Active', status: 'True', reason: 'Ready', observedGeneration: 2 }] } }).text).toBe('Active (stale)')
+})

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

@@ -0,0 +1,299 @@
+import { Gauge } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import {
+  AlertBanner,
+  ConditionsSection,
+  LabelSelectorDisplay,
+  Property,
+  PropertyList,
+  ResourceLink,
+  Section,
+  type ConditionTone,
+} from '../../ui/drawer-components'
+import {
+  getClusterQueueCohort,
+  getClusterQueueStatus,
+  getLocalQueueStatus,
+  getKueueQueueCondition,
+  getKueueQueueQuotaRows,
+  isKueueConditionStale,
+  type KueueQuotaRow,
+} from '../resource-utils-kueue'
+
+const KUEUE_GROUP = 'kueue.x-k8s.io'
+interface QueueRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+const quantity = (value: string | number | undefined | null) => (value == null ? 'Not reported' : String(value))
+
+function QueueStatus({ data, local = false }: Pick<QueueRendererProps, 'data'> & { local?: boolean }) {
+  const condition = getKueueQueueCondition(data)
+  const badge = local ? getLocalQueueStatus(data) : getClusterQueueStatus(data)
+  const stale = isKueueConditionStale(condition, data.metadata?.generation)
+  const stop = data.spec?.stopPolicy ?? 'None'
+  const counts = [
+    ['Pending', data.status?.pendingWorkloads],
+    ['Reserving quota', data.status?.reservingWorkloads],
+    ['Admitted', data.status?.admittedWorkloads],
+  ] as const
+  return (
+    <>
+      {stale && (
+        <AlertBanner
+          variant="info"
+          title="Reported state describes an earlier generation"
+          message={`Active condition: generation ${condition.observedGeneration}; queue: generation ${data.metadata.generation}. The reported state may not reflect the current specification.`}
+        />
+      )}
+      <Section title="Queue Status" icon={Gauge}>
+        <PropertyList>
+          <Property label="Reported State" value={<Badge colorClass={badge.color}>{badge.text}</Badge>} />
+          <Property label="Stop Policy" value={stop} />
+          {counts.some(([, count]) => count != null) &&
+            counts.map(([label, count]) => <Property key={label} label={label} value={quantity(count)} />)}
+        </PropertyList>
+        {condition?.message && (
+          <p className="mt-2 whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{condition.message}</p>
+        )}
+        {!condition && counts.some(([, count]) => count != null) && (
+          <p className="mt-2 text-sm text-theme-text-secondary">No Active condition reported.</p>
+        )}
+        {counts.every(([, count]) => count == null) ? (
+          <p className="mt-2 text-xs text-theme-text-tertiary">
+            {condition ? 'Workload counts have not been reported.' : 'Controller status has not been reported.'}
+          </p>
+        ) : (
+          <p className="mt-2 text-xs text-theme-text-tertiary">
+            Reserving counts include admitted Workloads; these counts are not additive. Admission does not establish
+            that Pods are running.
+          </p>
+        )}
+        {(stop === 'Hold' || stop === 'HoldAndDrain') && (
+          <p className="mt-2 text-sm text-theme-text-secondary">
+            Configured to stop new reservations and cancel reservations for Workloads awaiting admission.{' '}
+            {stop === 'HoldAndDrain'
+              ? 'Admitted Workloads are to be evicted.'
+              : 'Already admitted Workloads may continue.'}{' '}
+            The reported state above shows the controller observation.
+          </p>
+        )}
+      </Section>
+    </>
+  )
+}
+
+function QueueConditions({ data }: Pick<QueueRendererProps, 'data'>) {
+  const tone = (condition: any): ConditionTone => {
+    if (isKueueConditionStale(condition, data.metadata?.generation) || condition.type !== 'Active') return 'unknown'
+    if (condition.status === 'True') return 'ok'
+    if (condition.status === 'False') return condition.reason === 'Stopped' ? 'unknown' : 'warning'
+    return 'unknown'
+  }
+  return <ConditionsSection conditions={data.status?.conditions} getConditionTone={tone} defaultExpanded />
+}
+
+function QuotaAccounting({ data, clusterQueue = false, onNavigate }: QueueRendererProps & { clusterQueue?: boolean }) {
+  const rows = getKueueQueueQuotaRows(data, clusterQueue)
+  const flavors = new Map<string, KueueQuotaRow[]>()
+  for (const row of rows) {
+    const entries = flavors.get(row.flavor) ?? []
+    entries.push(row)
+    flavors.set(row.flavor, entries)
+  }
+  const hasCohort = clusterQueue && getClusterQueueCohort(data) !== '-'
+  return (
+    <Section title={clusterQueue ? 'Quota by Flavor' : 'Quota Accounting'}>
+      <p className="mb-3 text-xs text-theme-text-tertiary">
+        Reserved and admitted usage are quota accounting from resource requests, not measured utilization. Admitted
+        usage is included in reservations.
+        {hasCohort && ' Nominal quota is not a hard ceiling when borrowing is available.'}
+      </p>
+      {rows.length === 0 ? (
+        <p className="text-sm text-theme-text-secondary">
+          {clusterQueue ? 'No quota configuration or accounting reported.' : 'No quota accounting reported.'}
+        </p>
+      ) : (
+        <div className="space-y-4">
+          {[...flavors].map(([flavor, entries]) => (
+            <div key={flavor} className="min-w-0">
+              <div className="mb-2 break-all text-sm font-medium [&_button]:text-left">
+                <ResourceLink name={flavor} kind="resourceflavors" group={KUEUE_GROUP} onNavigate={onNavigate} />
+              </div>
+              <table className="w-full table-fixed text-left text-xs">
+                <thead className="text-theme-text-tertiary">
+                  <tr>
+                    <th className="w-[32%] py-2 pr-2 font-medium">Resource</th>
+                    {clusterQueue && <th className="px-2 py-2 font-medium">Nominal</th>}
+                    <th className="px-2 py-2 font-medium">Reserved</th>
+                    <th className="py-2 pl-2 font-medium">Admitted usage</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {entries.map((row) => (
+                    <QuotaRow key={row.resource} row={row} clusterQueue={clusterQueue} hasCohort={hasCohort} />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+function QuotaRow({ row, clusterQueue, hasCohort }: { row: KueueQuotaRow; clusterQueue: boolean; hasCohort: boolean }) {
+  const borrowed = [row.borrowedReservation, row.borrowedUsage].some((value) => value != null && String(value) !== '0')
+  const limits = hasCohort && row.configured && (row.borrowingLimit != null || row.lendingLimit != null)
+  return (
+    <>
+      <tr className="border-t border-theme-border align-top">
+        <td className="break-all py-2 pr-2 font-medium text-theme-text-primary">
+          {row.resource}
+          {clusterQueue && !row.configured && (
+            <span className="mt-1 block text-theme-text-tertiary font-normal">Not in current configuration</span>
+          )}
+        </td>
+        {clusterQueue && (
+          <td className="break-all px-2 py-2 font-mono text-theme-text-secondary">{quantity(row.nominal)}</td>
+        )}
+        <td className="break-all px-2 py-2 font-mono text-theme-text-secondary">{quantity(row.reserved)}</td>
+        <td className="break-all py-2 pl-2 font-mono text-theme-text-secondary">{quantity(row.used)}</td>
+      </tr>
+      {clusterQueue && (limits || borrowed) && (
+        <tr>
+          <td colSpan={4} className="pb-3 text-theme-text-tertiary">
+            {limits && (
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                {row.borrowingLimit != null && <span>Borrowing limit: {String(row.borrowingLimit)}</span>}
+                {row.lendingLimit != null && <span>Lending limit: {String(row.lendingLimit)}</span>}
+              </div>
+            )}
+            {borrowed && (
+              <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1">
+                <span>Borrowed reservation: {quantity(row.borrowedReservation)}</span>
+                <span>Borrowed admitted usage: {quantity(row.borrowedUsage)}</span>
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </>
+  )
+}
+
+export function LocalQueueRenderer({ data, onNavigate }: QueueRendererProps) {
+  const parentInactive = getKueueQueueCondition(data)?.reason === 'ClusterQueueIsInactive'
+  return (
+    <>
+      <QueueStatus data={data} local />
+      <Section title="Cluster Queue">
+        {data.spec?.clusterQueue ? (
+          <ResourceLink
+            name={data.spec.clusterQueue}
+            kind="clusterqueues"
+            group={KUEUE_GROUP}
+            onNavigate={onNavigate}
+          />
+        ) : (
+          <span className="text-sm text-theme-text-secondary">No ClusterQueue reference reported.</span>
+        )}
+        {parentInactive && (
+          <p className="mt-2 text-sm text-theme-text-secondary">
+            Inspect the ClusterQueue for the cause of its reported inactivity.
+          </p>
+        )}
+      </Section>
+      <QuotaAccounting data={data} onNavigate={onNavigate} />
+      <QueueConditions data={data} />
+    </>
+  )
+}
+
+export function ClusterQueueRenderer({ data, onNavigate }: QueueRendererProps) {
+  const spec = data.spec ?? {}
+  const cohort = getClusterQueueCohort(data)
+  const checks: { name: string; onFlavors?: string[] }[] = [
+    ...(data.apiVersion === 'kueue.x-k8s.io/v1beta1'
+      ? (spec.admissionChecks ?? []).map((name: string) => ({ name }))
+      : []),
+    ...(spec.admissionChecksStrategy?.admissionChecks ?? []),
+  ]
+  return (
+    <>
+      <QueueStatus data={data} />
+      <QuotaAccounting data={data} clusterQueue onNavigate={onNavigate} />
+      <Section title="Admission Policy">
+        <PropertyList>
+          <Property
+            label="Eligible Namespaces"
+            value={
+              <LabelSelectorDisplay
+                selector={spec.namespaceSelector}
+                emptyText={spec.namespaceSelector == null ? 'No namespaces eligible' : 'All namespaces'}
+              />
+            }
+          />
+          <Property label="Queueing Strategy" value={spec.queueingStrategy ?? 'BestEffortFIFO'} />
+          <Property label="Cohort" value={cohort === '-' ? 'None' : cohort} />
+          {spec.preemption?.withinClusterQueue != null && (
+            <Property label="Preemption within Queue" value={spec.preemption.withinClusterQueue} />
+          )}
+          {cohort !== '-' && spec.preemption?.reclaimWithinCohort != null && (
+            <Property label="Reclaim within Cohort" value={spec.preemption.reclaimWithinCohort} />
+          )}
+          {cohort !== '-' && spec.preemption?.borrowWithinCohort?.policy != null && (
+            <Property label="Borrow with Preemption" value={spec.preemption.borrowWithinCohort.policy} />
+          )}
+          {cohort !== '-' && spec.preemption?.borrowWithinCohort?.maxPriorityThreshold != null && (
+            <Property
+              label="Preemption Priority Threshold"
+              value={spec.preemption.borrowWithinCohort.maxPriorityThreshold}
+            />
+          )}
+          {cohort !== '-' && spec.flavorFungibility?.whenCanBorrow != null && (
+            <Property label="Flavor when Borrowing" value={spec.flavorFungibility.whenCanBorrow} />
+          )}
+          {spec.flavorFungibility?.whenCanPreempt != null && (
+            <Property label="Flavor when Preempting" value={spec.flavorFungibility.whenCanPreempt} />
+          )}
+          {spec.flavorFungibility?.preference != null && (
+            <Property label="Flavor Preference" value={spec.flavorFungibility.preference} />
+          )}
+          {spec.fairSharing?.weight != null && (
+            <Property label="Fair Sharing Weight" value={String(spec.fairSharing.weight)} />
+          )}
+          {data.status?.fairSharing?.weightedShare != null && (
+            <Property label="Reported Weighted Share" value={String(data.status.fairSharing.weightedShare)} />
+          )}
+        </PropertyList>
+        {cohort !== '-' && (
+          <p className="mt-2 text-xs text-theme-text-tertiary">
+            Absent an explicit limit, borrowing has no configured cap and all nominal quota may be lent. Borrowing
+            depends on available cohort quota; a borrowing limit does not guarantee capacity. Reported borrowed amounts
+            are already included in their totals.
+          </p>
+        )}
+      </Section>
+      {checks.length > 0 && (
+        <Section title="Required Admission Checks">
+          <div className="space-y-3">
+            {checks.map((check, index) => (
+              <div key={`${check.name}-${index}`} className="text-sm">
+                <ResourceLink name={check.name} kind="admissionchecks" group={KUEUE_GROUP} onNavigate={onNavigate} />
+                <p className="mt-1 break-words text-xs text-theme-text-secondary">
+                  {check.onFlavors?.length
+                    ? `Applies to flavors: ${check.onFlavors.join(', ')}`
+                    : 'Applies to all flavors'}
+                </p>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+      <QueueConditions data={data} />
+    </>
+  )
+}