@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/gitops/tree/layout.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+
+import type { GitOpsResourceTree, GitOpsTreeEdge, GitOpsTreeNode } from '../../../types'
+import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
+
+function node(id: string, kind = 'Deployment', role: GitOpsTreeNode['role'] = 'declared'): GitOpsTreeNode {
+  return { id, ref: { kind, namespace: 'flux-system', name: id }, role, tool: 'fluxcd' }
+}
+
+function tree(nodes: GitOpsTreeNode[], edges: GitOpsTreeEdge[]): GitOpsResourceTree {
+  return { root: nodes[0], nodes, edges }
+}
+
+describe('rankTree', () => {
+  it('draws a release\'s generated chart and repository upstream, repository first', () => {
+    // The release names the repository directly and through its chart; the
+    // longer path wins so the chain reads repository → chart → release.
+    const t = tree(
+      [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository'), node('deploy')],
+      [
+        { source: 'release', target: 'repo', type: 'source' },
+        { source: 'release', target: 'chart', type: 'source' },
+        { source: 'chart', target: 'repo', type: 'source' },
+        { source: 'release', target: 'deploy', type: 'owns' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect(rank.get('release')).toBe(0)
+    expect(rank.get('chart')).toBe(-1)
+    expect(rank.get('repo')).toBe(-2)
+    expect(rank.get('deploy')).toBe(1)
+  })
+
+  it('keeps managed resources downstream even when they are also a source (bootstrap)', () => {
+    const t = tree(
+      [node('flux-system', 'Kustomization', 'root'), node('repo', 'GitRepository'), node('controller')],
+      [
+        { source: 'flux-system', target: 'repo', type: 'owns' },
+        { source: 'flux-system', target: 'repo', type: 'source' },
+        { source: 'flux-system', target: 'controller', type: 'owns' },
+      ],
+    )
+    expect(upstreamEdges(t)).toEqual([])
+    expect(rankTree(t).get('repo')).toBe(1)
+  })
+
+  it('places dependsOn targets upstream and keeps the owned subtree depth', () => {
+    const t = tree(
+      [node('overlay', 'Kustomization', 'root'), node('base', 'Kustomization'), node('repo', 'GitRepository'), node('deploy'), node('rs', 'ReplicaSet', 'generated'), node('pod', 'Pod', 'generated')],
+      [
+        { source: 'overlay', target: 'repo', type: 'source' },
+        { source: 'overlay', target: 'base', type: 'dependsOn' },
+        { source: 'overlay', target: 'deploy', type: 'owns' },
+        { source: 'deploy', target: 'rs', type: 'owns' },
+        { source: 'rs', target: 'pod', type: 'owns' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect([rank.get('repo'), rank.get('base')]).toEqual([-1, -1])
+    expect([rank.get('deploy'), rank.get('rs'), rank.get('pod')]).toEqual([1, 2, 3])
+  })
+
+  it('terminates on a dependency cycle and never moves the root', () => {
+    const t = tree(
+      [node('a', 'Kustomization', 'root'), node('b', 'Kustomization'), node('c', 'Kustomization')],
+      [
+        { source: 'a', target: 'b', type: 'dependsOn' },
+        { source: 'b', target: 'c', type: 'dependsOn' },
+        { source: 'c', target: 'b', type: 'dependsOn' },
+        { source: 'c', target: 'a', type: 'dependsOn' },
+      ],
+    )
+    const rank = rankTree(t)
+    expect(rank.get('a')).toBe(0)
+    expect(rank.get('b')).toBeLessThan(0)
+    expect(rank.get('c')).toBeLessThan(0)
+  })
+})
+
+describe('renderedEdge', () => {
+  it('points a dependency edge into its consumer and leaves ownership alone', () => {
+    const upstream = new Set(['repo'])
+    expect(renderedEdge({ source: 'ks', target: 'repo', type: 'source' }, upstream)).toEqual({ source: 'repo', target: 'ks' })
+    expect(renderedEdge({ source: 'ks', target: 'deploy', type: 'owns' }, upstream)).toEqual({ source: 'ks', target: 'deploy' })
+  })
+})
+
+describe('upstreamClosure', () => {
+  it('follows the chart hop so every preset keeps the whole source chain', () => {
+    const t = tree(
+      [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository'), node('deploy')],
+      [
+        { source: 'release', target: 'chart', type: 'source' },
+        { source: 'chart', target: 'repo', type: 'source' },
+        { source: 'release', target: 'deploy', type: 'owns' },
+      ],
+    )
+    expect([...upstreamClosure(t)].sort()).toEqual(['chart', 'repo'])
+  })
+})
+
+describe('shortcutEdges', () => {
+  it('drops the direct release → repository edge only when the chart path covers it', () => {
+    const direct: GitOpsTreeEdge = { source: 'release', target: 'repo', type: 'source' }
+    const viaChart: GitOpsTreeEdge[] = [{ source: 'release', target: 'chart', type: 'source' }, { source: 'chart', target: 'repo', type: 'source' }]
+    const nodes = [node('release', 'HelmRelease', 'root'), node('chart', 'HelmChart'), node('repo', 'HelmRepository')]
+    expect([...shortcutEdges(tree(nodes, [direct, ...viaChart]))]).toEqual([direct])
+    // Before the chart is generated the direct edge is the only path.
+    expect(shortcutEdges(tree(nodes, [direct])).size).toBe(0)
+  })
+})

package/src/components/gitops/tree/layout.ts

@@ -0,0 +1,128 @@
+import type { GitOpsResourceTree, GitOpsTreeEdge } from '../../../types'
+
+// Flux source, chart and dependsOn edges travel consumer → dependency on the
+// wire. A dependency feeds its consumer, so the graph draws it upstream (left
+// of the consumer) with the arrow pointing into the consumer, as Flux's own
+// tooling does. An object the root also manages (a bootstrap Kustomization
+// that owns its GitRepository) keeps its place among the managed resources:
+// ownership wins.
+export function isUpstreamEdgeType(type: GitOpsTreeEdge['type']): boolean {
+  return type === 'source' || type === 'dependsOn'
+}
+
+export function upstreamEdges(tree: Pick<GitOpsResourceTree, 'edges'>): GitOpsTreeEdge[] {
+  const owned = new Set(tree.edges.filter(edge => edge.type === 'owns').map(edge => edge.target))
+  return tree.edges.filter(edge => isUpstreamEdgeType(edge.type) && !owned.has(edge.target))
+}
+
+// rankTree places the root at 0, managed resources at positive ranks by
+// ownership depth, and dependencies at negative ranks by their longest
+// dependency path from the root, so a repository that a release names
+// directly and through its generated chart still sits left of the chart.
+// Cycles are bounded: a rank never moves past the node count.
+export function rankTree(tree: GitOpsResourceTree): Map<string, number> {
+  const ids = new Set(tree.nodes.map(node => node.id))
+  ids.add(tree.root.id)
+  const limit = ids.size
+  const upstream = upstreamEdges(tree).filter(edge => ids.has(edge.source) && ids.has(edge.target) && edge.target !== tree.root.id)
+
+  const depth = new Map<string, number>([[tree.root.id, 0]])
+  for (let pass = 0; pass < limit; pass++) {
+    let changed = false
+    for (const edge of upstream) {
+      const from = depth.get(edge.source)
+      if (from === undefined) continue
+      const next = Math.min(from + 1, limit)
+      if ((depth.get(edge.target) ?? 0) < next) {
+        depth.set(edge.target, next)
+        changed = true
+      }
+    }
+    if (!changed) break
+  }
+
+  const rank = new Map<string, number>([[tree.root.id, 0]])
+  for (const [id, d] of depth) {
+    if (id !== tree.root.id) rank.set(id, -d)
+  }
+
+  const children = new Map<string, string[]>()
+  for (const edge of tree.edges) {
+    if (!ids.has(edge.source) || !ids.has(edge.target)) continue
+    if (rank.has(edge.target) && rank.get(edge.target)! < 0) continue
+    if (rank.has(edge.source) && rank.get(edge.source)! < 0) continue
+    children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
+  }
+  const downstream = new Map<string, number>()
+  const queue = [{ id: tree.root.id, rank: 0 }]
+  let iterations = 0
+  const maxIterations = limit * 8 + 64
+  while (queue.length > 0 && ++iterations <= maxIterations) {
+    const current = queue.shift()!
+    const previous = downstream.get(current.id)
+    if (previous !== undefined && previous >= current.rank) continue
+    downstream.set(current.id, current.rank)
+    for (const child of children.get(current.id) ?? []) {
+      queue.push({ id: child, rank: current.rank + 1 })
+    }
+  }
+  for (const [id, r] of downstream) {
+    if (id !== tree.root.id) rank.set(id, r)
+  }
+
+  const incoming = new Set(tree.edges.map(edge => edge.target))
+  for (const id of ids) {
+    if (!rank.has(id)) rank.set(id, incoming.has(id) ? 1 : 0)
+  }
+  return rank
+}
+
+// renderedEdge returns the edge as drawn: dependency edges point from the
+// dependency into its consumer.
+export function renderedEdge(edge: GitOpsTreeEdge, upstreamTargets: Set<string>): { source: string; target: string } {
+  if (isUpstreamEdgeType(edge.type) && upstreamTargets.has(edge.target)) {
+    return { source: edge.target, target: edge.source }
+  }
+  return { source: edge.source, target: edge.target }
+}
+
+// upstreamClosure returns every dependency reachable from the root, for
+// presets that must keep "where does this come from" in view.
+export function upstreamClosure(tree: GitOpsResourceTree): Set<string> {
+  const edges = upstreamEdges(tree)
+  const out = new Set<string>()
+  const queue = [tree.root.id]
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    for (const edge of edges) {
+      if (edge.source !== id || out.has(edge.target) || edge.target === tree.root.id) continue
+      out.add(edge.target)
+      queue.push(edge.target)
+    }
+  }
+  return out
+}
+
+// shortcutEdges returns the dependency edges that a longer dependency path
+// already covers: an inline HelmRelease names its repository directly and
+// through its generated chart, and drawing both puts the shortcut behind the
+// chart card. The data keeps the edge; the drawing doesn't need it.
+export function shortcutEdges(tree: Pick<GitOpsResourceTree, 'edges'>): Set<GitOpsTreeEdge> {
+  const edges = upstreamEdges(tree)
+  const out = new Set<GitOpsTreeEdge>()
+  for (const edge of edges) {
+    const seen = new Set<string>([edge.source])
+    const queue = edges.filter(e => e !== edge && e.source === edge.source).map(e => e.target)
+    while (queue.length > 0) {
+      const id = queue.shift()!
+      if (id === edge.target) {
+        out.add(edge)
+        break
+      }
+      if (seen.has(id)) continue
+      seen.add(id)
+      for (const next of edges) if (next.source === id) queue.push(next.target)
+    }
+  }
+  return out
+}

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

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { buildTreeFacets } from '../GitOpsGraphFilterRail'
+import { matchesGitOpsTreeFilters } from './tree-helpers'
+import type { GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
+
+const node = (group: string): GitOpsTreeNode => ({ id: group, ref: { kind: 'Service', group, name: 'same', namespace: 'team' }, role: 'generated', tool: 'fluxcd' })
+
+describe('GitOps kind filter contract', () => {
+  it('uses bare Kubernetes kinds across API groups', () => {
+    const nodes = [node(''), node('serving.knative.dev')]
+    expect(buildTreeFacets({ nodes } as GitOpsResourceTree).kinds).toEqual([{ name: 'Service', count: 2 }])
+    for (const n of nodes) {
+      expect(matchesGitOpsTreeFilters(n, { kinds: new Set(['Service']) })).toBe(true)
+      expect(matchesGitOpsTreeFilters(n, { kinds: new Set(['Deployment']) })).toBe(false)
+    }
+  })
+})

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

@@ -14,6 +14,12 @@ export function gitOpsFilterSet(values?: Set<string> | string[]): Set<string> |
   return set.size > 0 ? set : undefined
 }
 
+// treeNodeFilterRole is the node's role as the filter rail presents it: a
+// dependency the root consumes but doesn't manage is not "Declared".
+export function treeNodeFilterRole(node: GitOpsTreeNode): string {
+  return node.dependency ? 'dependency' : node.role
+}
+
 export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsTreeFilters): boolean {
   if (!filters) return true
   const kinds = gitOpsFilterSet(filters.kinds)
@@ -26,7 +32,7 @@ export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsT
   if (namespaces && !namespaces.has(node.ref.namespace || '(cluster)')) return false
   if (sync && !sync.has(node.sync || 'Unknown')) return false
   if (health && !health.has(node.health || 'Unknown')) return false
-  if (roles && !roles.has(node.role)) return false
+  if (roles && !roles.has(treeNodeFilterRole(node))) return false
   return true
 }
 

package/src/components/issues/ConditionalCleanup.test.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { IssueRow } from './IssuesView'
+import type { Issue } from './types'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const condition =
+  'If victoria-metrics-operator was uninstalled on purpose (and nothing else should finalize this object), remove the finalizer'
+const kubectl = `kubectl patch 'vmagents.operator.victoriametrics.com' 'stuck' -n 'team' --type=json -p '[]' --dry-run=server`
+
+const issue: Issue = {
+  id: 'vmagent-stuck',
+  severity: 'warning',
+  source: 'problem',
+  category: 'termination_stuck',
+  category_group: 'control_plane',
+  grouping_scope: 'unknown',
+  group: 'operator.victoriametrics.com',
+  kind: 'VMAgent',
+  namespace: 'team',
+  name: 'stuck',
+  reason: 'Terminating stuck',
+  cause: 'Deletion has been pending for 2h.',
+  action:
+    'No recognized controller found for finalizer "apps.victoriametrics.com/finalizer". If victoria-metrics-operator should be running, restore it so it can resume cleanup.',
+  conditional_cleanup: {
+    condition,
+    agent_guidance: 'Not the next step.',
+    caution: 'Removing a finalizer skips the cleanup its controller would have done.',
+    removals: [
+      {
+        finalizer: 'apps.victoriametrics.com/finalizer',
+        patch_resource: { kind: 'VMAgent', name: 'stuck', dry_run: true },
+        kubectl,
+      },
+    ],
+  },
+}
+
+it('keeps a conditional cleanup closed behind its condition, apart from the next step', async () => {
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  await act(async () => {
+    root.render(<IssueRow issue={issue} open onToggle={() => {}} />)
+  })
+
+  const toggle = [...element.querySelectorAll('button')].find((button) => button.textContent?.includes(condition))
+  expect(toggle, 'the toggle is labeled with the condition').toBeTruthy()
+  expect(toggle!.getAttribute('aria-expanded')).toBe('false')
+  const panel = [...element.querySelectorAll<HTMLElement>('[id]')].find((node) => node.id === toggle!.getAttribute('aria-controls'))!
+  expect(panel.style.gridTemplateRows).toBe('0fr')
+  expect(panel.firstElementChild!.hasAttribute('inert')).toBe(true)
+  expect(panel.textContent).toContain(kubectl)
+
+  const nextStep = [...element.querySelectorAll('section')].find((section) => section.querySelector('h4')?.textContent === 'Next step')
+  expect(nextStep?.textContent).toContain('restore it')
+  expect(nextStep?.textContent).not.toContain('kubectl')
+  expect(nextStep?.textContent).not.toContain('patch_resource')
+  expect(nextStep?.contains(toggle!)).toBe(false)
+
+  await act(async () => {
+    toggle!.click()
+  })
+  expect(toggle!.getAttribute('aria-expanded')).toBe('true')
+  expect(panel.style.gridTemplateRows).toBe('1fr')
+  expect(panel.firstElementChild!.hasAttribute('inert')).toBe(false)
+
+  await act(async () => root.unmount())
+})
+
+it('renders no cleanup section when the issue has none', async () => {
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  await act(async () => {
+    root.render(<IssueRow issue={{ ...issue, conditional_cleanup: undefined }} open onToggle={() => {}} />)
+  })
+  expect(element.textContent).not.toContain('Conditional cleanup')
+  await act(async () => root.unmount())
+})

package/src/components/issues/IssuesView.tsx

@@ -1,6 +1,7 @@
+import { summarizeSchedulerMessage } from '../resources/resource-utils'
 import { useMemo, useState, type ComponentType, type ReactNode } from 'react';
-import { AlertOctagon, AlertTriangle, ArrowRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
-import { CardBody, CardSection, ClusterName, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
+import { AlertOctagon, AlertTriangle, ArrowRight, CircleCheck, Clock, Eraser, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
+import { CardBody, CardSection, ClusterName, Disclosure, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse';
 import { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -13,7 +14,7 @@ import {
   ISSUE_SEVERITY_RAIL_CLASS,
   ISSUE_SEVERITY_SOLID_CLASS,
   ISSUE_SEVERITY_TEXT_CLASS,
-  categoryLabel,
+  issueTitle,
   groupBadgeClass,
   groupLabel,
 } from './severity';
@@ -24,6 +25,7 @@ import {
   subjectRef,
   type Issue,
   type IssueAffected,
+  type IssueConditionalCleanup,
   type IssueResourceRef,
   type IssueSeverity,
 } from './types';
@@ -168,6 +170,7 @@ export interface IssueRowProps {
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
   as?: 'li' | 'div';
+  compact?: boolean;
   className?: string;
   dimmed?: boolean;
   /** Suppress the "Subject" deep-link in the expanded body — set by hosts that
@@ -195,6 +198,7 @@ export function IssueRow({
   resourceHref,
   onResourceClick,
   as = 'li',
+  compact = false,
   className,
   dimmed,
   hideSubject,
@@ -208,6 +212,7 @@ export function IssueRow({
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
+  const schedulingCause = compact && issue.reason === 'Unschedulable' ? summarizeSchedulerMessage(issue.cause || issue.message || headline || '', { plain: true }) : undefined;
   const { panelId, buttonProps } = useDisclosure(open);
   const Container = as;
   const severity = normalizeIssueSeverity(issue.severity);
@@ -289,7 +294,7 @@ export function IssueRow({
 
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           <div className="flex min-w-0 items-baseline gap-2">
-            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
+            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary">{issueTitle(issue)}</span>
             <span className={`shrink-0 self-center ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
             {renderBadges?.(slotCtx)}
             {/* The detector reason rides the title row while COLLAPSED so the
@@ -297,7 +302,7 @@ export function IssueRow({
                 cause lives in the WHAT'S WRONG section below, so it fades out
                 here (stays mounted — it's the flex-1 filler, so unmounting
                 wouldn't reflow anything, but fading avoids the pop). */}
-            {issue.reason ? (
+            {issue.reason && !schedulingCause ? (
               <span
                 aria-hidden={open || undefined}
                 className={`min-w-0 flex-1 truncate text-xs text-theme-text-tertiary transition-opacity duration-200 ${open ? 'opacity-0' : 'opacity-100'}`}
@@ -307,6 +312,7 @@ export function IssueRow({
               </span>
             ) : null}
           </div>
+          {schedulingCause && <div className="break-words text-xs text-theme-text-secondary">{schedulingCause}</div>}
           <div className="flex min-w-0 items-center gap-1.5 text-xs text-theme-text-tertiary">
             <span className={KIND_CHIP_CLASS}>{issue.kind}</span>
             <span className="min-w-0 truncate font-medium text-theme-text-secondary">
@@ -544,6 +550,8 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
         </CardSection>
       ) : null}
 
+      {issue.conditional_cleanup ? <ConditionalCleanup cleanup={issue.conditional_cleanup} /> : null}
+
       {rawError ? (
         <CardSection icon={Terminal} label="Raw error">
           <TerminalBlock>{rawError}</TerminalBlock>
@@ -553,6 +561,33 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
   );
 }
 
+// A step that is right only under its condition. It stays closed behind the
+// condition so the row's next step remains the default path, and it is not
+// toned as a fix.
+function ConditionalCleanup({ cleanup }: { cleanup: IssueConditionalCleanup }) {
+  return (
+    <CardSection icon={Eraser} label="Conditional cleanup">
+      <Disclosure
+        summary={<span className="text-sm leading-relaxed">{cleanup.condition}</span>}
+        summaryClassName="items-baseline text-theme-text-primary hover:text-theme-text-secondary"
+      >
+        <div className="flex flex-col gap-2 pt-2">
+          {cleanup.caution ? <p className="text-xs leading-relaxed text-theme-text-secondary">{cleanup.caution}</p> : null}
+          {cleanup.removals.map((removal) => (
+            <div key={removal.finalizer} className="flex flex-col gap-1.5">
+              <p className="text-xs text-theme-text-tertiary">
+                Finalizer <code className="inline-code">{removal.finalizer}</code>
+              </p>
+              <TerminalBlock label="patch_resource · dry run">{JSON.stringify(removal.patch_resource)}</TerminalBlock>
+              <TerminalBlock label="kubectl · server dry run">{removal.kubectl}</TerminalBlock>
+            </div>
+          ))}
+        </div>
+      </Disclosure>
+    </CardSection>
+  );
+}
+
 function changeContextText(change: NonNullable<Issue['change_context']>): string {
   const parts = [change.when ? `Changed ${change.when} ago` : 'Changed', change.what ? change.what.replace(/_/g, ' ') : null, change.evidence].filter(Boolean);
   return parts.join(' · ');

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -106,3 +106,31 @@ it('keeps pod/template evidence in expanded neutral context with navigable witne
   expect(expanded).not.toContain('confidence')
   expect(expanded).not.toContain('Caused by')
 })
+
+it('wraps a compact Pod scheduling cause separately and retains the full message in details', () => {
+  const raw = '0/2 nodes are available: 2 Too many pods. preemption: 0/2 nodes are available: 2 No preemption victims found for incoming pod.'
+  const pod: Issue = { ...issue, kind: 'Pod', reason: 'Unschedulable', cause: raw, message: raw }
+  const html = renderToString(<IssueRow issue={pod} compact open onToggle={() => {}} />)
+  expect(html).toContain('break-words text-xs text-theme-text-secondary')
+  expect(html).toContain('both nodes have reached their Pod limit')
+  expect(html).toContain(raw)
+  const producerMessage = '2 node(s) insufficient pods (0/2 nodes available)'
+  const reported = renderToString(<IssueRow issue={{ ...pod, cause: undefined, message: producerMessage }} compact open onToggle={() => {}} />)
+  expect(reported).toContain('both nodes have reached their Pod limit')
+  expect(reported).toContain(producerMessage)
+  const regular = renderToString(<IssueRow issue={pod} open={false} onToggle={() => {}} />)
+  expect(regular).not.toContain('both nodes have reached their Pod limit')
+})
+
+it.each(['Cluster', 'Deployment'])('wraps compact scheduling causes aggregated under %s', (kind) => {
+  const raw = '2 node(s) insufficient pods (0/2 nodes available)'
+  const aggregated: Issue = { ...issue, kind, reason: 'Unschedulable', cause: raw, message: raw }
+  const collapsed = renderToString(<IssueRow issue={aggregated} compact open={false} onToggle={() => {}} />)
+  expect(collapsed).toContain('<div class="break-words text-xs text-theme-text-secondary">both nodes have reached their Pod limit</div>')
+  expect(collapsed).not.toContain(raw)
+  const expanded = renderToString(<IssueRow issue={aggregated} compact open onToggle={() => {}} />)
+  expect(expanded).toContain(raw)
+  const regular = renderToString(<IssueRow issue={aggregated} open={false} onToggle={() => {}} />)
+  expect(regular).toContain('Unschedulable')
+  expect(regular).not.toContain('both nodes have reached their Pod limit')
+})

package/src/components/issues/ResourceIssuesSection.tsx

@@ -8,7 +8,9 @@ export function ResourceIssuesSection({
   issues,
   onResourceClick,
   subjectResource,
+  compact,
 }: {
+  compact?: boolean
   issues: Issue[] | undefined
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
@@ -36,6 +38,7 @@ export function ResourceIssuesSection({
             <IssueRow
               key={key}
               issue={issue}
+              compact={compact}
               open={openId === key}
               onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
               onResourceClick={onResourceClick}

package/src/components/issues/index.ts

@@ -16,7 +16,7 @@ export {
   issueSortAnchor,
   compareIssueSortAnchors,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
+export type { Issue, IssueConditionalCleanup, IssueFinalizerRemoval, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
@@ -24,5 +24,7 @@ export {
   ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
   categoryLabel,
+  issueTitle,
+  issueReasonTitle,
   groupLabel,
 } from './severity';

package/src/components/issues/issue-timing.ts

@@ -1,7 +1,7 @@
 import { isDeploymentLikeWorkloadKind } from '../../types';
 import type { Issue } from './types';
 
-export type IssueTimingDisplayKind = 'creation' | 'regression';
+export type IssueTimingDisplayKind = 'creation' | 'regression' | 'deletion';
 
 export interface IssueTimingDisplay {
   kind: IssueTimingDisplayKind;
@@ -77,6 +77,17 @@ export function issueTiming(issue: Issue): IssueTimingDisplay | null {
   const grouped = (coverage?.known ?? 0) + (coverage?.unknown ?? 0) > 1;
   const uncertaintyMeta = onsetUncertaintyMeta(issue);
   const uncertaintyTooltip = onsetUncertaintyTooltip(issue);
+  // A stuck deletion is timed from its deletionTimestamp. The creation-vs-healthy
+  // classification only says whether the object was deleted soon after it was
+  // created, which is not what the age beside this chip measures.
+  if (issue.issue_timing_basis === 'deletion' && issue.issue_timing) {
+    return {
+      kind: 'deletion',
+      chip: 'since deletion',
+      meta: 'pending since deletion was requested',
+      tooltip: 'Timed from when deletion was requested; the object is still present.',
+    };
+  }
   switch (issue.issue_timing) {
     case 'started_after_resource_was_healthy': {
       if (issue.issue_timing_basis === 'owner_condition') {

package/src/components/issues/issues.test.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, it, expect, vi } from 'vitest'
 import { createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import { compareIssues, issueSortAnchor, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
-import { categoryLabel, groupBadgeClass, groupLabel } from './severity'
+import { categoryLabel, groupBadgeClass, groupLabel, issueTitle } from './severity'
 import { IssueRow } from './IssuesView'
 import { issueFirstSeenTitle, issueResourceCreatedTitle, issueTiming } from './issue-timing'
 
@@ -83,6 +83,8 @@ describe('category/group label fallbacks', () => {
   it('returns the mapped label, else humanizes (server-added category needs no frontend deploy)', () => {
     expect(categoryLabel('crashloop')).toBe('Crash loop')
     expect(categoryLabel('some_new_future_category')).toBe('Some new future category')
+    expect(issueTitle({ category: 'backup_failed', reason: 'CNPGWALArchivingFailing' })).toBe('WAL archiving failing')
+    expect(issueTitle({ category: 'backup_failed', reason: 'BackupFailed' })).toBe('Backup failed')
   })
   it('humanizes an unmapped group', () => {
     expect(groupLabel('runtime')).toBe('Runtime')
@@ -137,6 +139,33 @@ describe('IssueRow', () => {
     expect(html).toContain('after healthy')
   })
 
+  it('labels a stuck deletion by how long deletion has been pending', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-06-30T12:00:00Z'))
+
+    const html = renderToString(createElement(IssueRow, {
+      issue: mk({
+        id: 'terminating',
+        kind: 'VMAgent',
+        group: 'operator.victoriametrics.com',
+        category: 'termination_stuck',
+        category_group: 'control_plane',
+        reason: 'Terminating stuck',
+        first_seen: '2026-06-30T11:30:00Z',
+        issue_timing: 'started_at_resource_creation',
+        issue_timing_basis: 'deletion',
+      }),
+      open: true,
+      onToggle: () => undefined,
+    }))
+
+    expect(html).toContain('30m')
+    expect(html).toContain('since deletion')
+    expect(html).toContain('pending since deletion was requested')
+    expect(html).not.toContain('since creation')
+    expect(html).not.toContain('first reconciliation')
+  })
+
   it('uses the category-group chip class in the queue row', () => {
     const html = renderToString(createElement(IssueRow, {
       issue: mk({ category_group: 'control_plane', kind: 'Node' }),
@@ -394,6 +423,25 @@ describe('issueTiming', () => {
     })
   })
 
+  it('times stuck deletions from the deletion request, however soon after creation it came', () => {
+    for (const timing of ['started_at_resource_creation', 'started_after_resource_was_healthy'] as const) {
+      for (const kind of ['Pod', 'VMAgent']) {
+        const display = issueTiming(mk({
+          kind,
+          category: 'termination_stuck',
+          issue_timing: timing,
+          issue_timing_basis: 'deletion',
+        }))
+        expect(display).toMatchObject({
+          kind: 'deletion',
+          chip: 'since deletion',
+          meta: 'pending since deletion was requested',
+        })
+        expect(`${display?.chip} ${display?.meta} ${display?.tooltip}`).not.toMatch(/creation|healthy|deploy/i)
+      }
+    }
+  })
+
   it('describes direct after-healthy timing without coupling it to first_seen', () => {
     const display = issueTiming(mk({
       first_seen: '2026-06-30T10:00:00Z',