@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -29,6 +29,7 @@ import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sRe
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
+import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
 
 export type GitOpsTreePreset = 'full' | 'compact' | 'workloads' | 'app'
 
@@ -231,7 +232,7 @@ function GitOpsTreeGraphInner({
 function EdgeLegend({ edges }: { edges: Edge[] }) {
   const types = new Set(edges.map((e) => e.data?.type as string).filter(Boolean))
   const rows: Array<{ key: string; color: string; label: string }> = []
-  if (types.has('source')) rows.push({ key: 'source', color: getEdgeColor('source'), label: 'Source repo' })
+  if (types.has('source')) rows.push({ key: 'source', color: getEdgeColor('source'), label: 'Source artifact' })
   if (types.has('dependsOn')) rows.push({ key: 'dependsOn', color: getEdgeColor('dependsOn'), label: 'Depends on' })
   // Always show the default ownership color when there are 2+ edge kinds —
   // operators need to compare against it. Hide when "owns" is the only kind.
@@ -333,16 +334,10 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
   if (!tree) return { nodes: [], edges: [] }
   const visibleTree = applyGraphFilters(applyPreset(tree, preset, expandedGroups), filters)
   const byID = new Map(visibleTree.nodes.map(node => [node.id, node]))
-  const children = new Map<string, string[]>()
-  const incoming = new Map<string, number>()
-  for (const edge of visibleTree.edges) {
-    if (!byID.has(edge.source) || !byID.has(edge.target)) continue
-    children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
-    incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + 1)
-  }
-
-  const ranks = assignRanks(visibleTree.root.id, byID, children, incoming)
+  const ranks = groupRanks(rankTree(visibleTree), byID)
   const positioned = positionRanks(ranks, byID)
+  const upstreamTargets = new Set(upstreamEdges(visibleTree).map(edge => edge.target))
+  const shortcuts = shortcutEdges(visibleTree)
   const normalizedQuery = query.trim().toLowerCase()
   const nodes = Array.from(positioned.entries()).map(([id, position]) => {
     const node = byID.get(id)!
@@ -359,11 +354,10 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
   })
 
   const edges = visibleTree.edges
-    .filter(edge => positioned.has(edge.source) && positioned.has(edge.target))
+    .filter(edge => positioned.has(edge.source) && positioned.has(edge.target) && !shortcuts.has(edge))
     .map(edge => ({
       id: `${edge.source}->${edge.target}`,
-      source: edge.source,
-      target: edge.target,
+      ...renderedEdge(edge, upstreamTargets),
       type: 'smoothstep',
       // The legend reads back edge.data?.type to decide which rows to render —
       // ReactFlow doesn't preserve our custom `type` field at the top level
@@ -394,7 +388,9 @@ function applyPreset(tree: GitOpsResourceTree, preset: GitOpsTreePreset, expande
     children.set(edge.source, [...(children.get(edge.source) ?? []), edge.target])
   }
 
-  const keep = new Set<string>([tree.root.id])
+  // Dependencies answer "where does this come from" and are few, so every
+  // preset keeps them.
+  const keep = new Set<string>([tree.root.id, ...upstreamClosure(tree)])
   if (preset === 'app') {
     for (const edge of tree.edges) {
       if (edge.source === tree.root.id) keep.add(edge.target)
@@ -438,7 +434,7 @@ function applyGraphFilters(tree: GitOpsResourceTree, filters?: GitOpsTreeFilters
     if (node.id === tree.root.id) continue
     if (matchesGitOpsTreeFilters(node, filters)) {
       let current: string | undefined = node.id
-      while (current) {
+      while (current && !keep.has(current)) {
         keep.add(current)
         current = parent.get(current)
       }
@@ -506,43 +502,10 @@ function compactInfra(tree: GitOpsResourceTree, expandedGroups?: Set<string>): G
   }
 }
 
-function assignRanks(
-  rootID: string,
-  nodes: Map<string, GitOpsTreeNode>,
-  children: Map<string, string[]>,
-  incoming: Map<string, number>
-): Map<number, string[]> {
-  const rankByID = new Map<string, number>()
-  const queue = [{ id: rootID, rank: 0 }]
-  // Cycle/explosion guard: GitOps trees are owner-ref DAGs in practice, but
-  // the EdgeManages set we feed in could pathologically include a cycle
-  // (e.g. a CRD whose owner ref points back at one of its own children, or
-  // a malformed inventory). Without this cap, the "previous >= rank" skip
-  // never fires for cyclic edges and the loop runs forever, freezing the
-  // UI thread. Cap at a large multiple of node count so legitimate trees
-  // never hit it; cycles bail with the partial layout we have so far.
-  let iterations = 0
-  const maxIterations = nodes.size * 8 + 64
-
-  while (queue.length > 0) {
-    if (++iterations > maxIterations) break
-    const current = queue.shift()!
-    const previous = rankByID.get(current.id)
-    if (previous !== undefined && previous >= current.rank) continue
-    rankByID.set(current.id, current.rank)
-    for (const child of children.get(current.id) ?? []) {
-      queue.push({ id: child, rank: current.rank + 1 })
-    }
-  }
-
-  for (const id of nodes.keys()) {
-    if (!rankByID.has(id)) {
-      rankByID.set(id, incoming.get(id) ? 1 : 0)
-    }
-  }
-
+function groupRanks(rankByID: Map<string, number>, nodes: Map<string, GitOpsTreeNode>): Map<number, string[]> {
   const ranks = new Map<number, string[]>()
   for (const [id, rank] of rankByID.entries()) {
+    if (!nodes.has(id)) continue
     ranks.set(rank, [...(ranks.get(rank) ?? []), id])
   }
   for (const ids of ranks.values()) {
@@ -565,12 +528,23 @@ function positionRanks(ranks: Map<number, string[]>, nodes: Map<string, GitOpsTr
   const rootRank = ranks.get(0) ?? []
   if (rootRank.length === 1) {
     const rootID = rootRank[0]
-    const nextRank = ranks.get(1) ?? []
-    if (nextRank.length > 0) {
-      const maxY = (nextRank.length - 1) * ROW_GAP
-      const rootHeight = getNodeDimensions(nodes.get(rootID)!).height
+    const rootHeight = getNodeDimensions(nodes.get(rootID)!).height
+    const tallest = Math.max((ranks.get(1)?.length ?? 0), (ranks.get(-1)?.length ?? 0))
+    if (tallest > 0) {
+      const maxY = (tallest - 1) * ROW_GAP
       positioned.set(rootID, { x: 0, y: Math.max(0, (maxY - rootHeight) / 2 - ROOT_Y_OFFSET) })
     }
+    // Dependency columns are short; center them on the root so the chain
+    // reads as one line into it.
+    const rootCenter = positioned.get(rootID)!.y + rootHeight / 2
+    for (const rank of sortedRanks) {
+      if (rank >= 0) continue
+      const ids = ranks.get(rank) ?? []
+      const columnCenter = ((ids.length - 1) * ROW_GAP + rootHeight) / 2
+      ids.forEach((id, row) => {
+        positioned.set(id, { x: rank * RANK_GAP, y: row * ROW_GAP + rootCenter - columnCenter })
+      })
+    }
   }
 
   return positioned
@@ -587,7 +561,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const KindIcon = getTopologyIcon(kind)
   // Only unhealthy nodes carry a cause worth surfacing — a healthy node
   // matched by a stale/unrelated issue ref shouldn't show a tooltip.
-  const cause = status === 'unhealthy' || status === 'degraded' ? data.cause : undefined
+  const cause = nodeCause(node, data.cause)
   // Only declared resources can carry the controller's verdict, so only
   // there does "this one is Radar's" mean anything. Generated children
   // (ReplicaSets, Pods) are always Radar's read; marking each would be
@@ -752,10 +726,10 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   // detail title row and fleet rows.
   if (isNodeTerminating(node)) {
     chips.push({ value: 'Terminating', tone: 'warning' })
-    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+    if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
     return chips
   }
-  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatAge(data.createdAt) })
+  if (typeof data.createdAt === 'string') chips.push({ label: 'age', value: formatCompactAge(data.createdAt) })
   const revision = stringData(data.revision) || stringData(data.lastSyncRevision)
   if (revision) chips.push({ label: 'rev', value: revision })
   const attempted = stringData(data.attemptedRevision)
@@ -771,6 +745,15 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   return chips
 }
 
+// nodeCause returns the matched issue's cause when the node's hover should
+// show it: only on a node that is actually failing (Degraded or Missing,
+// topology 'unhealthy'). 'degraded' is also where Progressing and Suspended
+// land, and a cause there reads as "this is broken" on a rollout in flight
+// or a deliberate pause.
+export function nodeCause(node: GitOpsTreeNode, cause?: string): string | undefined {
+  return normalizeHealth(node.topologyStatus) === 'unhealthy' ? cause : undefined
+}
+
 // The subtitle is the node's one line of prose, and sync, health and the
 // backend's info line all want it. It can't be won on precedence: the backend
 // derives a health for every node it can build an info line for, so a rule that
@@ -886,6 +869,3 @@ function pluralize(kind: string): string {
   return `${kind}s`
 }
 
-function formatAge(timestamp: string): string {
-  return formatCompactAge(timestamp)
-}

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(' · ');