@skyhook-io/k8s-ui 1.19.0 → 1.20.0

package/src/components/gitops/insights/GitOpsRollbackInsightView.test.tsx

@@ -0,0 +1,73 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { GitOpsInsight } from '../../../types'
+import { GitOpsChangesView, GitOpsIssuesBand } from './GitOpsInsightViews'
+
+function insight(rolledBack: boolean): GitOpsInsight {
+  return {
+    summary: { tool: 'argocd', kind: 'Application', namespace: 'argocd', name: 'demo', autoSyncMode: 'Manual', operationPhase: 'Succeeded', rollbackRevision: rolledBack ? 'a'.repeat(40) : undefined },
+    issues: rolledBack ? [{
+      reason: 'RolledBack', scope: 'operation', severity: 'info',
+      message: `Last rollback deployed ${'a'.repeat(40)} by alice.`,
+      cause: "Auto-sync is off, so Argo won't deploy a new revision on its own. Changes made since the rollback can also show as drift. Syncing or enabling auto-sync deploys the current revision and can undo the rollback.",
+    }] : [],
+    changes: [{
+      ref: { group: 'apps', kind: 'Deployment', namespace: 'default', name: 'demo' },
+      sync: 'OutOfSync', category: 'OutOfSync', hasDesired: true, hasLive: true, partial: false,
+    }],
+  }
+}
+
+describe('rollback insights', () => {
+  it('puts the consequence on a separate line from the full revision', () => {
+    const html = renderToString(<GitOpsIssuesBand issues={insight(true).issues} />)
+    expect(html).toContain('a'.repeat(40))
+    expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">Last rollback deployed/)
+    expect(html).toMatch(/<p class="[^"]*">Auto-sync is off/)
+    expect(html).toContain('Changes made since the rollback can also show as drift.')
+  })
+
+  it('shows the mismatch revisions, compatibility explanation, and recovery advice in full', () => {
+    const message = `Last rollback deployed different sources or revisions than requested: ${'b'.repeat(40)} instead of ${'a'.repeat(40)}.`
+    const cause = "On Argo CD before 2.12, rolling back across a single-source/multi-source change or to a multi-source entry can deploy the wrong revisions or render nothing; with prune, it can delete resources."
+    const action = 'Check the Argo CD controller version, then sync the intended revision manually.'
+    const html = renderToString(<GitOpsIssuesBand issues={[{
+      reason: 'RollbackRevisionMismatch', scope: 'operation', severity: 'warning', message, cause, action,
+    }]} />)
+    expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">Last rollback deployed/)
+    expect(html).toContain(message)
+    expect(html).toMatch(/<p class="[^"]*">On Argo CD before 2.12/)
+    expect(html).toContain(action)
+  })
+
+  it('explains that resource Sync can undo the rollback', () => {
+    const html = renderToString(<GitOpsChangesView insight={insight(true)} />)
+    expect(html).toContain('Live state differs from Git after a rollback. Sync applies the desired state and can undo the rollback.')
+    expect(html).not.toContain('Click Sync to apply the desired state.')
+  })
+
+  it('keeps ordinary manual-drift resource copy unchanged', () => {
+    expect(renderToString(<GitOpsChangesView insight={insight(false)} />)).toContain('Live state differs from Git. Click Sync to apply the desired state.')
+  })
+})
+
+it('keeps Missing rows rollback-aware when sync is Unknown and no RolledBack issue exists', () => {
+  const data = insight(true)
+  data.summary.sync = 'Unknown'
+  data.issues = []
+  data.changes![0].sync = 'Unknown'
+  data.changes![0].missing = true
+  data.changes![0].hasLive = false
+  const html = renderToString(<GitOpsChangesView insight={data} />)
+  expect(html).toContain('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+  expect(html).not.toContain('Sync the application to create it.')
+})
+
+it('keeps Missing health explanations rollback-aware without a confirmed missing lookup', () => {
+  const data = insight(true)
+  data.changes![0].sync = 'Unknown'
+  data.changes![0].health = 'Missing'
+  const html = renderToString(<GitOpsChangesView insight={data} />)
+  expect(html).toContain('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+  expect(html).not.toContain('Declared in Git but not present in the cluster. Sync to create it.')
+})

package/src/components/gitops/insights/GitOpsSyncWindowInsightView.test.tsx

@@ -0,0 +1,29 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { GitOpsIssue } from '../../../types/gitops-insights'
+import { GitOpsIssuesBand } from './GitOpsInsightViews'
+
+const windowIssues: GitOpsIssue[] = [
+  {
+    reason: 'SyncWindowBlocked', scope: 'operation', severity: 'warning',
+    message: "A sync window is holding this sync. Argo CD continues it when the AppProject's sync windows allow syncing.",
+    action: 'Wait for the window, or terminate the operation to drop it. A terminated operation stays Terminating until a window allows syncing; it applies nothing more, and changes already applied stay.',
+  },
+  {
+    reason: 'SyncWindowBlocked', scope: 'operation', severity: 'warning',
+    message: 'This operation was terminated while a sync window held it. Argo CD completes the termination when a window allows syncing. It applies nothing more; changes already applied stay.',
+    action: "Wait for the window to open, or change the AppProject's sync windows.",
+  },
+]
+
+describe('sync-window insights', () => {
+  it.each(windowIssues)('shows the full message and action for $message', (issue) => {
+    for (const issues of [[issue], [issue, { ...issue, reason: 'OtherIssue' }]]) {
+      const html = renderToString(<GitOpsIssuesBand issues={issues} />)
+      expect(html).toMatch(/<span class="[^"]*whitespace-normal break-words">/)
+      expect(html).not.toMatch(/<span class="[^"]*truncate">/)
+      expect(html).toContain(issue.message.replaceAll("'", '&#x27;'))
+      expect(html).toContain(`>${issue.action!.replaceAll("'", '&#x27;')}</p>`)
+    }
+  })
+})

package/src/components/gitops/insights/insights-helpers.test.ts

@@ -9,6 +9,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  historyRollbackBlockedReason,
   isArgoResourceSyncEligible,
   messageToPhase,
   missingResourceMessage,
@@ -30,6 +31,21 @@ describe('confirmed missing resources', () => {
     expect(isArgoResourceSyncEligible(item, true)).toBe(true)
   })
 
+  it.each(['OutOfSync', 'Unknown', undefined])('defers to the hazard before rollback advice for %s', (sync) => {
+    expect(missingResourceMessage(sync, { hazard: 'Sync can delete resources.', rolledBack: true })).toBe('Not present in the cluster. See the sync warning above before syncing this Application.')
+    expect(missingResourceMessage(sync, { hazard: 'Sync can delete resources.' })).toBe('Not present in the cluster. See the sync warning above before syncing this Application.')
+  })
+
+  it('keeps refresh advice for Synced even with hazard and rollback context', () => {
+    expect(missingResourceMessage('Synced', { hazard: 'Sync can delete resources.', rolledBack: true })).toBe(missingResourceMessage('Synced'))
+  })
+
+  it('uses named rollback context and treats an empty hazard as absent', () => {
+    expect(missingResourceMessage('OutOfSync', { rolledBack: true })).toBe('Declared in Git but not present in the cluster after a rollback. Sync can recreate it and undo the rollback.')
+    expect(missingResourceMessage('OutOfSync', { hazard: '', rolledBack: true })).toBe(missingResourceMessage('OutOfSync', { rolledBack: true }))
+    expect(missingResourceMessage('OutOfSync', { rolledBack: false })).toBe(missingResourceMessage('OutOfSync'))
+  })
+
   it('defers creation advice to the sync hazard while preserving stale Synced refresh advice', () => {
     for (const sync of ['OutOfSync', 'Unknown', undefined]) {
       expect(missingResourceMessage(sync, { hazard: 'Resolve shared ownership before syncing.' })).toBe(
@@ -243,3 +259,24 @@ describe('syncStatusRank / healthStatusRank', () => {
     expect(healthStatusRank('Degraded')).toBeLessThan(healthStatusRank('Healthy'))
   })
 })
+
+describe('historyRollbackBlockedReason', () => {
+  const autoSync = 'Auto-sync is enabled.'
+  it('allows an entry the backend marks rollbackable', () => {
+    expect(historyRollbackBlockedReason({ id: '0', rollbackable: true })).toBeUndefined()
+  })
+  it('blocks an entry that records no source', () => {
+    expect(historyRollbackBlockedReason({ id: '1', rollbackable: false })).toMatch(/records no source/)
+  })
+  // Turning auto-sync off would not make this entry rollbackable.
+  it('names the missing source over auto-sync', () => {
+    expect(historyRollbackBlockedReason({ id: '1', rollbackable: false }, autoSync)).toMatch(/records no source/)
+  })
+  it('passes the app-wide reason through for a rollbackable entry', () => {
+    expect(historyRollbackBlockedReason({ id: '0', rollbackable: true }, autoSync)).toBe(autoSync)
+  })
+  // A Radar that predates the field omits it; the rollback API decides.
+  it('leaves an entry without the field enabled', () => {
+    expect(historyRollbackBlockedReason({ id: '2' })).toBeUndefined()
+  })
+})

package/src/components/gitops/insights/insights-helpers.ts

@@ -160,6 +160,18 @@ export function entryTone(item: GitOpsHistoryItem): EntryTone {
   return { dot: SEVERITY_DOT.neutral, inferredFrom: 'no phase information' }
 }
 
+// historyRollbackBlockedReason is why a history row's Rollback button is
+// disabled, or undefined when it can roll back. An entry the backend marks
+// not rollbackable is refused by the rollback API whatever else changes, so
+// its reason wins over the app-wide one (auto-sync), which the operator can
+// fix. A Radar that predates `rollbackable` omits it; the API decides there.
+export function historyRollbackBlockedReason(item: GitOpsHistoryItem, appBlockedReason?: string): string | undefined {
+  if (item.rollbackable === false) {
+    return "This entry records no source, so Argo CD can't roll back to it. Sync to its revision instead."
+  }
+  return appBlockedReason
+}
+
 // Compact a source string for inline display. Argo emits the full GitHub URL
 // followed by " · path/within/repo", which dominates the timeline row when
 // rendered raw. Strip the protocol+host (full string still shown on hover via

package/src/components/issues/ResourceIssuesSection.tsx

@@ -10,10 +10,12 @@ export function ResourceIssuesSection({
   subjectResource,
   compact,
   renderDetailSection,
+  heading = "Operational issues",
 }: {
   compact?: boolean
   renderDetailSection?: (ctx: IssueRowSlotContext) => ReactNode
   issues: Issue[] | undefined
+  heading?: string
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
   /** The resource this section is embedded under. When an issue's subject IS
@@ -31,7 +33,7 @@ export function ResourceIssuesSection({
     <section className="space-y-2">
       <div className="flex items-center gap-2 px-1 text-xs font-semibold uppercase tracking-wide text-theme-text-secondary">
         <AlertTriangle className="h-4 w-4 text-theme-text-tertiary" aria-hidden />
-        <span>Operational issues ({sorted.length})</span>
+        <span>{heading} ({sorted.length})</span>
       </div>
       <ol className="flex flex-col gap-1.5">
         {sorted.map((issue) => {

package/src/components/issues/diagnostic.ts

@@ -26,8 +26,10 @@ export function diagnosticFactLabel(type: string): string {
       return 'Missing reference';
     case 'node_startup_corroboration':
       return 'Same-node failures';
+    case 'evicted_from_node':
+      return 'Evicted by node';
     case 'owner_rollup':
-      return 'Grouped from pods';
+      return 'Grouped resources';
     case 'selected_backend_issue':
       return 'Backend pods';
     case 'service_config_mismatch':
@@ -56,6 +58,16 @@ export function diagnosticFactLabel(type: string): string {
       return 'Affected resources';
     case 'tls_certificate_consumers':
       return 'Used for TLS by';
+    case 'kueue_admission':
+      return 'Kueue admission';
+    case 'kueue_queue':
+      return 'Queue';
+    case 'kueue_affected_runs':
+      return 'Blocked runs';
+    case 'kueue_admission_check':
+      return 'Admission check';
+    case 'kueue_provisioning_request':
+      return 'Provisioning request';
     default:
       return type.replace(/_/g, ' ');
   }
@@ -70,6 +82,7 @@ export function incidentParentLabel(factType?: string, confidence?: string): str
     case 'pvc_blast_radius':
     case 'secret_not_ready':
     case 'admission_webhook_backend':
+    case 'kueue_queue':
       return 'Caused by';
     case 'apiservice_hpa':
       return 'Likely cause';

package/src/components/issues/severity.ts

@@ -57,6 +57,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   unschedulable: "Can't be scheduled",
   quota_exceeded: 'Quota exceeded',
   admission_webhook_blocking: 'Admission blocked',
+  queue_admission_blocked: 'Queue admission blocked',
   image_pull_failed: 'Image pull failed',
   container_waiting: 'Container waiting',
   init_container_failed: 'Init container failed',
@@ -66,6 +67,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   readiness_failed: 'Not ready for traffic',
   workload_degraded: 'Workload degraded',
   high_restart: 'High restart count',
+  pod_evicted: 'Pod evicted',
   missing_config_ref: 'Missing reference',
   pdb_blocks_evictions: 'Evictions blocked',
   secret_sync_failed: 'Secret sync failed',
@@ -89,10 +91,12 @@ const CATEGORY_LABEL: Record<string, string> = {
   backup_stalled: 'Backup not progressing',
   job_failed: 'Job failed',
   cronjob_failed: 'CronJob needs attention',
+  batch_run_stopped: 'Run stopped by Kueue',
   rollout_stalled: 'Rollout stalled',
   hpa_limited_or_failed: 'Autoscaling limited',
   rbac_forbidden: 'Permission denied',
   certificate_not_ready: 'Certificate not ready',
+  certificate_renewal_failed: 'Certificate renewal failed',
   pod_security_violation: 'Pod Security blocked',
   node_not_ready: 'Node not ready',
   node_provisioning_failed: 'Node provisioning failed',
@@ -154,6 +158,16 @@ const REASON_TITLE: Record<string, string> = {
   CNPGInstanceReadinessMismatch: "Instance Pods contradict Cluster readiness",
   CNPGPrimaryLabelMismatch: "Primary Pod label contradicts Cluster status",
   CNPGScheduledRunNoBackup: "No successful backup since a scheduled run",
+  KueueAdmissionCheckRejected: 'Admission check rejected the run',
+  KueueClusterQueueInactive: 'ClusterQueue admits nothing',
+  KueueClusterQueueMissing: 'ClusterQueue missing',
+  KueueLocalQueueMissing: 'LocalQueue missing',
+  KueueRequeuingLimitExceeded: 'Kueue stopped retrying the run',
+  KueueMaximumExecutionTimeExceeded: 'Run hit its maximum execution time',
+  KueueDeactivatedByKueue: 'Kueue withdrew the run',
+  KueueResourceUnavailable: 'Queue offers no quota for a requested resource',
+  KueueNamespaceNotEligible: "Queue doesn't admit this namespace",
+  KueueInvalidWorkload: "Kueue can't admit the run's spec",
 };
 
 /** The title a reason has wherever it is shown, when its category's label would name the wrong operation. */

package/src/components/kueue/AdmissionPath.tsx

@@ -0,0 +1,223 @@
+import type { ReactNode } from 'react'
+import { Route } from 'lucide-react'
+import { ResourceLink, Section, ownerNote } from '../ui/drawer-components'
+import { gapReasonText } from '../../utils/read-actions'
+import { FactSource, FactValue } from '../facts'
+import type { Relationships } from '../../types'
+import { kindToPluralWithGroup } from '../../utils/navigation'
+import { isKueueConditionStale } from '../resources/resource-utils-kueue'
+import { localQueueStatusWithParent } from './queue-status'
+import { isFlavorAssignmentMessage, parseFlavorAttempts, type FlavorAttempt, type FlavorAttemptKind } from './flavors-tried'
+import { ClusterQueueReadSummary, ReadState, StatusPill, namespaceEligibilityFact, type Navigate } from './QueueEvidence'
+import { KUEUE_GROUP } from './constants'
+import type { RelatedRead } from './related-read'
+
+/** Objects on a Workload's admission path that a host read as the viewer. */
+export interface KueueWorkloadReads {
+  localQueue?: RelatedRead
+  /** Keyed by ClusterQueue name: the LocalQueue's target and, when different, the one holding the reservation. */
+  clusterQueues?: Record<string, RelatedRead>
+  namespace?: RelatedRead
+  /** Keyed by ResourceFlavor name: the flavors the reservation assigned. */
+  flavors?: Record<string, RelatedRead>
+}
+
+function Step({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <li className="relative grid grid-cols-[7.5rem_minmax(0,1fr)] gap-3 py-2.5 text-sm first:pt-0 last:pb-0">
+      <span className="text-theme-text-tertiary">{label}</span>
+      <div className="min-w-0 space-y-1">{children}</div>
+    </li>
+  )
+}
+
+const muted = 'text-xs text-theme-text-secondary'
+
+function OwnerStep({ data, relationships, onNavigate }: { data: any; relationships?: Relationships; onNavigate?: Navigate }) {
+  const coverage = relationships?.ownership
+  // Without the ownership answer (a Radar that predates it), `owner` may come
+  // from display edges that check neither group nor UID, so it isn't linked;
+  // the Workload's own controller reference is named instead.
+  const controllerRef = (data.metadata?.ownerReferences ?? []).find((ref: any) => ref?.controller)
+  const owner = coverage ? relationships?.owner : undefined
+  const clusterName: string | undefined = data.status?.clusterName
+  let body: ReactNode
+  if (owner) {
+    body = <div className="flex flex-wrap items-center gap-2 break-all [&_button]:text-left">
+      <span className="text-xs text-theme-text-tertiary">{owner.kind}</span>
+      <ResourceLink name={owner.name} namespace={owner.namespace} kind={kindToPluralWithGroup(owner.kind, owner.group ?? '')} group={owner.group} onNavigate={onNavigate} />
+    </div>
+  } else if (!relationships) {
+    body = <p className={muted}>Owner not read here.</p>
+  } else if (!coverage && controllerRef) {
+    body = <p className={muted}>Controller reference: {controllerRef.kind} {controllerRef.name} (this Radar doesn't resolve owners).</p>
+  } else if (coverage?.primaryOwnerState === 'several') {
+    body = <p className={muted}>Several owner references; none is the controller.</p>
+  } else {
+    const reason = coverage?.unavailableReason
+    const unanswered = !reason ? undefined
+      : reason === 'user_forbidden' ? "The owner isn't shown: your access lets you open this Workload, but not list its kind here."
+        : `The owner couldn't be read: ${gapReasonText(reason)}.`
+    const note = ownerNote(coverage)
+    body = <p className={muted}>{unanswered ?? note?.text ?? (data.metadata?.ownerReferences?.length ? 'Owner not resolved.' : 'No owner reference: this Workload was created directly.')}</p>
+  }
+  return <Step label="Owner">
+    {body}
+    {clusterName && <p className={muted}>Kueue reports cluster <code>{clusterName}</code> for this Workload (status.clusterName). Radar shows this cluster only and doesn't follow that name elsewhere.</p>}
+  </Step>
+}
+
+export function AdmissionPath({ data, reads, relationships, onNavigate }: { data: any; reads?: KueueWorkloadReads; relationships?: Relationships; onNavigate?: Navigate }) {
+  const namespace: string = data.metadata?.namespace ?? ''
+  const queueName: string | undefined = data.spec?.queueName
+  const localQueue = reads?.localQueue
+  const configured: string | undefined = localQueue?.state === 'found' ? localQueue.object?.spec?.clusterQueue : undefined
+  const reserved: string | undefined = data.status?.admission?.clusterQueue
+  const finished = (data.status?.conditions ?? []).some((condition: any) => condition?.type === 'Finished' && condition.status === 'True')
+  const admitted = (data.status?.conditions ?? []).some((condition: any) => condition?.type === 'Admitted' && condition.status === 'True')
+  const configuredRead = configured ? reads?.clusterQueues?.[configured] : undefined
+  const eligibility = configured && reads ? namespaceEligibilityFact({ clusterQueue: configured, parent: configuredRead, namespaceRead: reads.namespace }) : undefined
+  const assignments: any[] = Array.isArray(data.status?.admission?.podSetAssignments) ? data.status.admission.podSetAssignments : []
+  // Kueue's own word on why quota isn't reserved, verbatim. Flavor-assignment
+  // messages are left to "Reasons reported per flavor".
+  const quota = (data.status?.conditions ?? []).find((condition: any) => condition?.type === 'QuotaReserved')
+  const pendingMessage: string | undefined = quota?.status === 'False' && quota.message && !isFlavorAssignmentMessage(quota.message) ? quota.message : undefined
+  const pendingStale = isKueueConditionStale(quota, data.metadata?.generation)
+  return (
+    <Section variant="card" title="Admission Path" icon={Route}>
+      <ol className="divide-y divide-theme-border">
+        <OwnerStep data={data} relationships={relationships} onNavigate={onNavigate} />
+        <Step label="LocalQueue">
+          {!queueName ? <p className={muted}>No queue name: spec.queueName is empty, so the Workload names no LocalQueue.</p> : <>
+            <div className="flex flex-wrap items-center gap-2 break-all [&_button]:text-left">
+              <ResourceLink name={queueName} kind="localqueues" namespace={namespace} group={KUEUE_GROUP} onNavigate={onNavigate} />
+              <ReadState read={localQueue} found={localQueue?.state === 'found' ? <StatusPill status={localQueueStatusWithParent(localQueue.object, configuredRead)} /> : undefined} />
+            </div>
+            {localQueue?.state === 'not_found' && <p className={muted}>{reserved
+              ? `No LocalQueue ${queueName} exists in namespace ${namespace} now; the reservation below was made through it earlier.`
+              : finished || data.spec?.active === false
+                ? `No LocalQueue ${queueName} exists in namespace ${namespace}.`
+                : `No LocalQueue ${queueName} exists in namespace ${namespace}. Kueue can't admit this Workload until it does.`}</p>}
+          </>}
+        </Step>
+        {queueName && reads && (
+          <Step label="ClusterQueue">
+            {configured ? <>
+              <ClusterQueueReadSummary name={configured} read={configuredRead} onNavigate={onNavigate} />
+              <p className="text-xs text-theme-text-tertiary">Configured by LocalQueue {queueName}.</p>
+              {eligibility && !reserved && <div className="text-xs"><span className="text-theme-text-tertiary">Namespace {namespace}: </span><FactValue fact={eligibility} /><FactSource fact={eligibility} /></div>}
+            </> : <p className={muted}>
+              {localQueue?.state === 'found' ? 'The LocalQueue names no ClusterQueue.'
+                : localQueue?.state === 'not_found' ? `None: LocalQueue ${queueName} doesn't exist.`
+                  : localQueue?.state === 'unconfirmed' ? `Unknown: this Radar can't confirm LocalQueue ${queueName} exists.`
+                  : localQueue?.state === 'loading' ? 'Checking…' : 'Unknown until the LocalQueue is read.'}
+            </p>}
+          </Step>
+        )}
+        <Step label="Reservation">
+          {reserved ? <>
+            <p className="text-xs text-theme-text-tertiary">{finished ? 'Reservation recorded in (the Workload finished, so its quota was released)' : 'Quota reserved in'}</p>
+            {reads && reserved !== configured
+              ? <ClusterQueueReadSummary name={reserved} read={reads.clusterQueues?.[reserved]} onNavigate={onNavigate} />
+              : <div className="break-all [&_button]:text-left"><ResourceLink name={reserved} kind="clusterqueues" group={KUEUE_GROUP} onNavigate={onNavigate} /></div>}
+            {configured && configured !== reserved && (finished || admitted
+              ? <p className="text-xs text-theme-text-tertiary">Reserved in {reserved}; LocalQueue {queueName}, as it exists now, names {configured}.</p>
+              : <p className="text-xs text-warning-text">Reserved in {reserved}; LocalQueue {queueName}, as it exists now, names {configured}.</p>)}
+          </> : <>
+            <p className={muted}>No reservation reported.</p>
+            {pendingMessage && <p className="whitespace-pre-wrap break-words text-xs text-theme-text-secondary"><span className="text-theme-text-tertiary">{pendingStale ? `Controller-reported on QuotaReserved for generation ${quota.observedGeneration} (now ${data.metadata?.generation}): ` : 'Controller-reported on QuotaReserved: '}</span>{pendingMessage}</p>}
+          </>}
+        </Step>
+        {assignments.length > 0 && (
+          <Step label="Flavors">
+            <div className="space-y-2">
+              {assignments.map((assignment, index) => (
+                <div key={assignment?.name ?? index} className="space-y-0.5">
+                  {assignments.length > 1 && <p className="text-xs font-medium text-theme-text-secondary">{assignment?.name ?? `PodSet ${index + 1}`}</p>}
+                  {Object.entries(assignment?.flavors ?? {}).length === 0
+                    ? <p className={muted}>No flavors reported.</p>
+                    : Object.entries(assignment.flavors).map(([resource, flavor]) => (
+                      <div key={resource} className="flex flex-wrap items-center gap-1.5 break-all text-xs [&_button]:text-left">
+                        <span className="text-theme-text-secondary">{resource}</span>
+                        <span className="text-theme-text-tertiary">→</span>
+                        <ResourceLink name={String(flavor)} kind="resourceflavors" group={KUEUE_GROUP} onNavigate={onNavigate} />
+                        {finished && reads?.flavors?.[String(flavor)]?.state === 'not_found'
+                          ? <span className="text-xs text-theme-text-tertiary">No longer exists</span>
+                          : reads?.flavors?.[String(flavor)]?.state !== 'found' && <ReadState read={reads?.flavors?.[String(flavor)]} />}
+                      </div>
+                    ))}
+                </div>
+              ))}
+            </div>
+          </Step>
+        )}
+      </ol>
+    </Section>
+  )
+}
+
+/** Reasons grouped under the flavor they name, in the order flavors first appear in the message. */
+function groupByFlavor(attempts: FlavorAttempt[]): [string | undefined, FlavorAttempt[]][] {
+  const groups = new Map<string | undefined, FlavorAttempt[]>()
+  for (const attempt of attempts) groups.set(attempt.flavor, [...(groups.get(attempt.flavor) ?? []), attempt])
+  return [...groups]
+}
+
+const attemptLabel: Record<FlavorAttemptKind, string> = {
+  insufficient_quota: 'Over maximum capacity',
+  insufficient_unused_quota: 'Not enough unused quota',
+  untolerated_taint: 'Untolerated taint',
+  node_affinity: 'Node affinity mismatch',
+  flavor_not_found: 'Flavor not found',
+  resource_unavailable: 'Resource not in ClusterQueue',
+  skipped_by_annotation: 'Skipped by annotation',
+  pinned_by_original: 'Held by original Workload',
+}
+
+/**
+ * The reasons Kueue gave per flavor in the Workload's pending QuotaReserved
+ * message, parsed when every part is recognised and verbatim otherwise. It is
+ * one controller report, not an attempt history.
+ */
+export function FlavorReasons({ data, onNavigate }: { data: any; onNavigate?: Navigate }) {
+  const conditions: any[] = data.status?.conditions ?? []
+  const quota = conditions.find(condition => condition?.type === 'QuotaReserved')
+  if (quota?.status !== 'False' || !isFlavorAssignmentMessage(quota.message)) return null
+  const stale = isKueueConditionStale(quota, data.metadata?.generation)
+  const parsed = parseFlavorAttempts(quota.message)
+  return (
+    <Section variant="card" title="Reasons Reported per Flavor">
+      {stale && <p className="mb-2 text-xs text-warning-text">Reported for generation {quota.observedGeneration} (now {data.metadata?.generation}); the Workload has changed since.</p>}
+      <p className="mb-3 text-xs text-theme-text-tertiary">From the controller-reported message on QuotaReserved. Kueue lists the reasons alphabetically, not in the order it tried flavors, and may not report every flavor.</p>
+      {parsed ? (
+        <div className="space-y-3">
+          {parsed.map(podSet => (
+            <div key={podSet.podSet} className="space-y-2">
+              <p className="text-xs font-medium text-theme-text-secondary">PodSet {podSet.podSet}</p>
+              <ul className="divide-y divide-theme-border">
+                {groupByFlavor(podSet.attempts).map(([flavor, attempts]) => (
+                  <li key={flavor ?? ''} className="space-y-1 py-2 text-sm first:pt-0 last:pb-0">
+                    <div className="break-all [&_button]:text-left">
+                      {flavor ? <ResourceLink name={flavor} kind="resourceflavors" group={KUEUE_GROUP} onNavigate={onNavigate} /> : <span className="text-xs text-theme-text-tertiary">No flavor named</span>}
+                    </div>
+                    {attempts.map((attempt, index) => (
+                      <div key={index} className="space-y-0.5 pl-3">
+                        <div className="flex flex-wrap items-center gap-2 text-xs">
+                          {attempt.resource && <code className="text-theme-text-secondary">{attempt.resource}</code>}
+                          <span className="text-theme-text-tertiary">{attemptLabel[attempt.kind]}</span>
+                        </div>
+                        <p className="whitespace-pre-wrap break-words text-xs text-theme-text-secondary">{attempt.text}</p>
+                      </div>
+                    ))}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="whitespace-pre-wrap break-words text-sm text-theme-text-secondary">{quota.message}</p>
+      )}
+    </Section>
+  )
+}