@skyhook-io/k8s-ui 1.19.0 → 1.20.0

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

@@ -1,99 +1,64 @@
-import { Gauge } from 'lucide-react'
-import { Badge } from '../../ui/Badge'
+import type { ReactNode } from 'react'
+import { Gauge, Link2, ListChecks, Scale } from 'lucide-react'
 import {
   AlertBanner,
   ConditionsSection,
   LabelSelectorDisplay,
-  Property,
-  PropertyList,
   ResourceLink,
   Section,
   type ConditionTone,
 } from '../../ui/drawer-components'
+import { FactGrid, FactRow, FactSource, FactValue } from '../../facts'
 import {
   getClusterQueueCohort,
   getClusterQueueStatus,
-  getLocalQueueStatus,
   getKueueQueueCondition,
   getKueueQueueQuotaRows,
   isKueueConditionStale,
+  isKueueStopOnly,
   type KueueQuotaRow,
 } from '../resource-utils-kueue'
+import { describeKueuePolicy, type KueuePolicyField } from '../../kueue/policy'
+import { isDenied, unreadReason, type RelatedRead } from '../../kueue/related-read'
+import { localQueueInactiveBecauseParentStopped, localQueueStatusWithParent } from '../../kueue/queue-status'
+import {
+  AdmissionCheckRow,
+  ClusterQueueReadSummary,
+  ConfiguredStop,
+  namespaceEligibilityFact,
+  QueueCounts,
+  ReadState,
+  ReportedActive,
+  type Navigate,
+} from '../../kueue/QueueEvidence'
+import { KUEUE_GROUP } from '../../kueue/constants'
 
-const KUEUE_GROUP = 'kueue.x-k8s.io'
 interface QueueRendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+  onNavigate?: Navigate
+  workloads?: ReactNode
 }
 
-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>
-    </>
-  )
+/**
+ * Related objects a host read as the viewer. Absent: the host doesn't read
+ * them, and names are shown without read state.
+ */
+export interface LocalQueueReads {
+  clusterQueue?: RelatedRead
+  namespace?: RelatedRead
 }
 
-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 />
+export interface ClusterQueueReads {
+  flavors?: Record<string, RelatedRead>
+  admissionChecks?: Record<string, RelatedRead>
+  /** Other ClusterQueues naming the same cohort, from Radar's ClusterQueue list. */
+  cohortMembers?: RelatedRead<string[]>
+  /** Whether the ClusterQueue list the members came from covered every ClusterQueue. */
+  cohortMembersCompleteness?: 'complete' | 'partial' | 'unknown'
 }
 
+const quantity = (value: string | number | undefined | null) => (value == null ? 'Not reported' : String(value))
+
 function QuotaAccounting({ data, clusterQueue = false, onNavigate }: QueueRendererProps & { clusterQueue?: boolean }) {
   const rows = getKueueQueueQuotaRows(data, clusterQueue)
   const flavors = new Map<string, KueueQuotaRow[]>()
@@ -104,7 +69,7 @@ function QuotaAccounting({ data, clusterQueue = false, onNavigate }: QueueRender
   }
   const hasCohort = clusterQueue && getClusterQueueCohort(data) !== '-'
   return (
-    <Section title={clusterQueue ? 'Quota by Flavor' : 'Quota Accounting'}>
+    <Section variant="card" title={clusterQueue ? 'Quota by Flavor' : 'Quota Accounting'} icon={Gauge}>
       <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.
@@ -184,116 +149,231 @@ function QuotaRow({ row, clusterQueue, hasCohort }: { row: KueueQuotaRow; cluste
   )
 }
 
-export function LocalQueueRenderer({ data, onNavigate }: QueueRendererProps) {
-  const parentInactive = getKueueQueueCondition(data)?.reason === 'ClusterQueueIsInactive'
+
+function StaleBanner({ data }: { data: any }) {
+  const condition = getKueueQueueCondition(data)
+  if (!isKueueConditionStale(condition, data.metadata?.generation)) return null
   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>
+    <AlertBanner
+      variant="info"
+      className="mb-0"
+      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.`}
+    />
+  )
+}
+
+function QueueConditions({ data, clusterQueue = false, parentStopped = false }: { data: any; clusterQueue?: boolean; parentStopped?: boolean }) {
+  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 isKueueStopOnly(condition, clusterQueue) || (parentStopped && condition.reason === 'ClusterQueueIsInactive') ? 'unknown' : 'warning'
+    return 'unknown'
+  }
+  return <ConditionsSection variant="card" conditions={data.status?.conditions} getConditionTone={tone} defaultExpanded />
+}
+
+/** Reported (left) and configured (right) side by side once the content is wide enough. */
+function Situation({ reported, configured }: { reported: ReactNode; configured: ReactNode }) {
+  return (
+    <div className="grid min-w-0 items-start gap-4 @min-[760px]/queue:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
+      <Section variant="card" title="Reported by controller">{reported}</Section>
+      <Section variant="card" title="Configured">{configured}</Section>
+    </div>
+  )
+}
+
+export function LocalQueueRenderer({ data, onNavigate, reads, workloads }: QueueRendererProps & { reads?: LocalQueueReads }) {
+  const parentName: string | undefined = data.spec?.clusterQueue
+  const namespace: string = data.metadata?.namespace ?? ''
+  const parentStopped = localQueueInactiveBecauseParentStopped(data, reads?.clusterQueue)
+  const reportsParentInactive = getKueueQueueCondition(data)?.reason === 'ClusterQueueIsInactive'
+  const eligibility = parentName && reads ? namespaceEligibilityFact({ clusterQueue: parentName, parent: reads.clusterQueue, namespaceRead: reads.namespace }) : undefined
+  return (
+    <div className="@container/queue space-y-4">
+      <StaleBanner data={data} />
+      <Situation
+        reported={<ReportedActive data={data} status={localQueueStatusWithParent(data, reads?.clusterQueue)}>
+          {parentStopped && <p className="text-xs text-theme-text-secondary">ClusterQueue {parentName} reports Stopped (read from the ClusterQueue), so this LocalQueue's inactivity follows an intentional stop.</p>}
+          {reportsParentInactive && !parentStopped && reads?.clusterQueue?.state !== 'loading' && reads?.clusterQueue?.state !== 'not_found' && <p className="text-xs text-theme-text-secondary">{isDenied(reads?.clusterQueue)
+            ? `The cause is on ClusterQueue ${parentName}, which you can’t read; a cluster administrator can check it.`
+            : reads?.clusterQueue?.state === 'found' && getKueueQueueCondition(reads.clusterQueue.object)?.status === 'True' && !isKueueConditionStale(getKueueQueueCondition(reads.clusterQueue.object), reads.clusterQueue.object?.metadata?.generation)
+              ? `ClusterQueue ${parentName} now reports Active; this LocalQueue’s report hasn’t caught up.`
+              : 'Inspect the ClusterQueue for the cause of its reported inactivity.'}</p>}
+          <div className="border-t border-theme-border pt-3"><QueueCounts data={data} kind="LocalQueue" /></div>
+        </ReportedActive>}
+        configured={<div className="space-y-3">
+          <ConfiguredStop data={data} />
+          <div className="text-sm">
+            <span className="text-theme-text-tertiary">ClusterQueue </span>
+            {parentName
+              ? <span className="break-all [&_button]:text-left"><ResourceLink name={parentName} kind="clusterqueues" group={KUEUE_GROUP} onNavigate={onNavigate} /></span>
+              : <span className="text-theme-text-secondary">No ClusterQueue reference reported.</span>}
+          </div>
+        </div>}
+      />
+      {parentName && reads && (
+        <Section variant="card" title="ClusterQueue" icon={Link2}>
+          <div className="space-y-3">
+            <ClusterQueueReadSummary name={parentName} read={reads.clusterQueue} onNavigate={onNavigate} />
+            {reads.clusterQueue?.state === 'not_found' && <p className="text-sm text-theme-text-secondary">This LocalQueue points at a ClusterQueue that doesn't exist; Workloads submitted here can't be admitted until it does.</p>}
+            {eligibility && <FactGrid>
+              <FactRow label={`Namespace ${namespace}`}><FactValue fact={eligibility} /><FactSource fact={eligibility} /></FactRow>
+            </FactGrid>}
+          </div>
+        </Section>
+      )}
       <QuotaAccounting data={data} onNavigate={onNavigate} />
-      <QueueConditions data={data} />
-    </>
+      {workloads}
+      <QueueConditions data={data} parentStopped={parentStopped} />
+    </div>
+  )
+}
+
+function PolicyRow({ data, label, field, value }: { data: any; label: string; field: KueuePolicyField; value: unknown }) {
+  if (value == null) return null
+  const policy = describeKueuePolicy(data.apiVersion, field, value)
+  return (
+    <FactRow label={label}>
+      <code className="text-theme-text-primary">{policy.raw}</code>
+      <div className="mt-0.5 text-xs text-theme-text-secondary">{policy.meaning ?? `Radar has no description of this value for ${data.apiVersion}.`}</div>
+    </FactRow>
   )
 }
 
-export function ClusterQueueRenderer({ data, onNavigate }: QueueRendererProps) {
+function AdmissionPolicy({ data }: { data: any }) {
   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 }))
-      : []),
+  const inCohort = cohort !== '-'
+  return (
+    <Section variant="card" title="Admission Policy" icon={Scale}>
+      <FactGrid>
+        <FactRow label="Eligible namespaces">
+          <LabelSelectorDisplay selector={spec.namespaceSelector} emptyText={spec.namespaceSelector == null ? 'No namespaces eligible (namespaceSelector not set)' : 'All namespaces ({})'} />
+        </FactRow>
+        <PolicyRow data={data} label="Queueing strategy" field="queueingStrategy" value={spec.queueingStrategy} />
+        <PolicyRow data={data} label="Preemption within queue" field="preemption.withinClusterQueue" value={spec.preemption?.withinClusterQueue} />
+        {inCohort && <PolicyRow data={data} label="Reclaim within cohort" field="preemption.reclaimWithinCohort" value={spec.preemption?.reclaimWithinCohort} />}
+        {inCohort && <PolicyRow data={data} label="Borrow with preemption" field="preemption.borrowWithinCohort.policy" value={spec.preemption?.borrowWithinCohort?.policy} />}
+        {inCohort && spec.preemption?.borrowWithinCohort?.maxPriorityThreshold != null && (
+          <FactRow label="Preemption priority threshold">{String(spec.preemption.borrowWithinCohort.maxPriorityThreshold)}</FactRow>
+        )}
+        {inCohort && <PolicyRow data={data} label="Flavor when borrowing" field="flavorFungibility.whenCanBorrow" value={spec.flavorFungibility?.whenCanBorrow} />}
+        <PolicyRow data={data} label="Flavor when preempting" field="flavorFungibility.whenCanPreempt" value={spec.flavorFungibility?.whenCanPreempt} />
+        <PolicyRow data={data} label="Flavor preference" field="flavorFungibility.preference" value={spec.flavorFungibility?.preference} />
+        <PolicyRow data={data} label="Admission fair sharing" field="admissionScope.admissionMode" value={spec.admissionScope?.admissionMode} />
+        {spec.fairSharing?.weight != null && <FactRow label="Fair sharing weight">{String(spec.fairSharing.weight)}</FactRow>}
+        {data.status?.fairSharing?.weightedShare != null && <FactRow label="Reported weighted share">{String(data.status.fairSharing.weightedShare)}</FactRow>}
+      </FactGrid>
+      <p className="mt-3 text-xs text-theme-text-tertiary">Values include any defaults the API server filled in.</p>
+      {inCohort && (
+        <p className="mt-3 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>
+  )
+}
+
+function clusterQueueChecks(data: any): { name: string; onFlavors?: string[] }[] {
+  const spec = data.spec ?? {}
+  return [
+    ...(data.apiVersion === 'kueue.x-k8s.io/v1beta1' ? (spec.admissionChecks ?? []).map((name: string) => ({ name })) : []),
     ...(spec.admissionChecksStrategy?.admissionChecks ?? []),
   ]
+}
+
+/** Flavor names per resource group, in configured preference order. */
+function clusterQueueFlavorGroups(data: any): { resources: string[]; flavors: string[] }[] {
+  return (data.spec?.resourceGroups ?? []).map((group: any) => ({
+    resources: group.coveredResources ?? [],
+    flavors: (group.flavors ?? []).map((flavor: any) => flavor?.name).filter(Boolean),
+  }))
+}
+
+export function clusterQueueRelatedNames(data: any): { flavors: string[]; admissionChecks: string[] } {
+  return {
+    flavors: [...new Set(clusterQueueFlavorGroups(data).flatMap(group => group.flavors))],
+    admissionChecks: [...new Set(clusterQueueChecks(data).map(check => check.name))],
+  }
+}
+
+function RelatedObjects({ data, reads, onNavigate }: QueueRendererProps & { reads?: ClusterQueueReads }) {
+  const cohort = getClusterQueueCohort(data)
+  const groups = clusterQueueFlavorGroups(data)
+  const checks = clusterQueueChecks(data)
+  const members = reads?.cohortMembers
+  const heading = 'mb-2 text-xs font-medium uppercase tracking-wider text-theme-text-secondary'
   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)} />
+    <Section variant="card" title="Related Objects" icon={ListChecks}>
+      <div className="space-y-4">
+        <div>
+          <h4 className={heading}>Cohort</h4>
+          {cohort === '-' ? <p className="text-sm text-theme-text-secondary">None: this ClusterQueue neither lends nor borrows quota.</p> : (
+            <div className="space-y-1 text-sm">
+              <code className="break-all text-theme-text-primary">{cohort}</code>
+              {members && <p className="text-xs text-theme-text-secondary">
+                {members.state === 'found'
+                  ? members.object.length > 0 ? <>Other ClusterQueues naming this cohort: {members.object.map((name, index) => <span key={name} className="[&_button]:text-left">{index > 0 && ', '}<ResourceLink name={name} kind="clusterqueues" group={KUEUE_GROUP} onNavigate={onNavigate} /></span>)}</> : 'No other ClusterQueue names this cohort.'
+                  : `Other members not read: ${unreadReason(members)}.`}
+                {members.state === 'found' && reads?.cohortMembersCompleteness === 'partial' && ' Radar’s ClusterQueue list was incomplete, so there may be more.'}
+                {members.state === 'found' && reads?.cohortMembersCompleteness === 'unknown' && ' This Radar doesn’t say whether its ClusterQueue list is complete.'}
+              </p>}
+              <p className="text-xs text-theme-text-tertiary">A cohort exists through the ClusterQueues that name it. Radar doesn't read Cohort objects, so a parent cohort or cohort-level quota isn't shown here.</p>
+            </div>
           )}
-          {data.status?.fairSharing?.weightedShare != null && (
-            <Property label="Reported Weighted Share" value={String(data.status.fairSharing.weightedShare)} />
+        </div>
+        <div>
+          <h4 className={heading}>Resource flavors, in configured preference order</h4>
+          {groups.length === 0 ? <p className="text-sm text-theme-text-secondary">No resource groups configured.</p> : (
+            <div className="space-y-3">
+              {groups.map((group, index) => (
+                <div key={index} className="space-y-1">
+                  {groups.length > 1 && <p className="text-xs text-theme-text-tertiary">{group.resources.length > 0 ? group.resources.join(', ') : `Resource group ${index + 1}`}</p>}
+                  <ol className="space-y-1">
+                    {group.flavors.map((name, position) => (
+                      <li key={name} className="flex flex-wrap items-center gap-2 break-all text-sm [&_button]:text-left">
+                        <span className="w-4 shrink-0 text-right text-xs text-theme-text-tertiary">{position + 1}.</span>
+                        <ResourceLink name={name} kind="resourceflavors" group={KUEUE_GROUP} onNavigate={onNavigate} />
+                        <ReadState read={reads?.flavors?.[name]} />
+                      </li>
+                    ))}
+                  </ol>
+                </div>
+              ))}
+            </div>
           )}
-        </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>
+        {checks.length > 0 && (
+          <div>
+            <h4 className={heading}>Required admission checks</h4>
+            <div className="space-y-3">
+              {checks.map((check, index) => <AdmissionCheckRow key={`${check.name}-${index}`} name={check.name} onFlavors={check.onFlavors} read={reads?.admissionChecks?.[check.name]} onNavigate={onNavigate} />)}
+            </div>
           </div>
-        </Section>
-      )}
-      <QueueConditions data={data} />
-    </>
+        )}
+      </div>
+    </Section>
+  )
+}
+
+export function ClusterQueueRenderer({ data, onNavigate, reads, workloads }: QueueRendererProps & { reads?: ClusterQueueReads }) {
+  return (
+    <div className="@container/queue space-y-4">
+      <StaleBanner data={data} />
+      <Situation
+        reported={<ReportedActive data={data} status={getClusterQueueStatus(data)}>
+          <div className="border-t border-theme-border pt-3"><QueueCounts data={data} kind="ClusterQueue" /></div>
+        </ReportedActive>}
+        configured={<ConfiguredStop data={data} />}
+      />
+      <RelatedObjects data={data} reads={reads} onNavigate={onNavigate} />
+      <QuotaAccounting data={data} clusterQueue onNavigate={onNavigate} />
+      {workloads}
+      <AdmissionPolicy data={data} />
+      <QueueConditions data={data} clusterQueue />
+    </div>
   )
 }