@skyhook-io/k8s-ui 1.14.8 → 1.14.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.8",
+  "version": "1.14.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

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

@@ -257,59 +257,9 @@ export function rolloutConditionTone(cond: { type?: string; status?: string }):
   }
 }
 
-/** Every CanaryStep variant Argo defines; raw JSON is unreadable in a step list. */
-export function canaryStepLabel(step: any): string {
-  if (!step || typeof step !== 'object') return 'Unknown step'
-
-  if (step.setWeight !== undefined) return `Set weight: ${step.setWeight}%`
-
-  if (step.pause !== undefined) {
-    return step.pause?.duration ? `Pause: ${step.pause.duration}` : 'Pause: until promoted'
-  }
-
-  if (step.analysis) {
-    const templates = (step.analysis.templates || [])
-      .map((t: any) => t.templateName || t.clusterTemplateName)
-      .filter(Boolean)
-    return templates.length > 0 ? `Analysis: ${templates.join(', ')}` : 'Analysis'
-  }
-
-  if (step.experiment) {
-    const templates = (step.experiment.templates || []).map((t: any) => t.name).filter(Boolean)
-    const duration = step.experiment.duration ? ` for ${step.experiment.duration}` : ''
-    return templates.length > 0
-      ? `Experiment: ${templates.join(', ')}${duration}`
-      : `Experiment${duration}`
-  }
-
-  if (step.setCanaryScale) {
-    const { weight, replicas, matchTrafficWeight } = step.setCanaryScale
-    if (matchTrafficWeight) return 'Set canary scale: match traffic weight'
-    if (replicas !== undefined) return `Set canary scale: ${replicas} replicas`
-    if (weight !== undefined) return `Set canary scale: ${weight}%`
-    return 'Set canary scale'
-  }
-
-  if (step.setHeaderRoute) {
-    const { name, match } = step.setHeaderRoute
-    // An empty match list is how a header route is torn down again.
-    if (!match || match.length === 0) return `Remove header route${name ? `: ${name}` : ''}`
-    const headers = match.map((m: any) => m.headerName).filter(Boolean)
-    return `Header route${name ? ` ${name}` : ''}${headers.length ? `: ${headers.join(', ')}` : ''}`
-  }
-
-  if (step.setMirrorRoute) {
-    const { name, match, percentage } = step.setMirrorRoute
-    if (!match || match.length === 0) return `Remove mirror route${name ? `: ${name}` : ''}`
-    const pct = percentage !== undefined ? ` (${percentage}%)` : ''
-    return `Mirror route${name ? ` ${name}` : ''}${pct}`
-  }
-
-  if (step.plugin) return `Plugin: ${step.plugin.name || 'unnamed'}`
-
-  const key = Object.keys(step)[0]
-  return key ? `Unrecognized step: ${key}` : 'Unknown step'
-}
+// canaryStepLabel lives in utils/workload-rollout.ts (not here) so that
+// module doesn't have to import a renderer component just for step text.
+export { canaryStepLabel } from '../../../utils/workload-rollout'
 
 /** AnalysisTemplate/ClusterAnalysisTemplate references on either a canary
  *  step's analysis.templates[] array, or a single Experiment spec.analyses[]

package/src/components/topology/K8sResourceNode.tsx

@@ -16,6 +16,7 @@ import { ownershipOf } from '../../utils/topology-neighborhood'
 import { midTruncate } from '../../utils/format'
 import { getTopologyIcon } from '../../utils/resource-icons'
 import { Tooltip } from '../ui/Tooltip'
+import { Badge } from '../ui/Badge'
 import { AuditBadgeTooltip, type AuditBadgeMessage } from '../audit/AuditBadgeTooltip'
 import { SEVERITY_TEXT_CLASS } from '../checks/severity'
 import argoCdLogo from '../../assets/gitops/argocd.png'
@@ -568,6 +569,11 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const policyStatus = nodeData.policyStatus as string | undefined
   const deploymentMembership = nodeData.deploymentMembership as 'runtime-only' | 'source-only' | undefined
   const deploymentSourceLabel = nodeData.deploymentSourceLabel as string | undefined
+  // Argo Rollouts canary/stable (or blue-green active/preview) traffic role,
+  // set server-side on Pod/ReplicaSet/Service nodes owned by or matched to a
+  // Rollout. canary/preview are the "being tested" side, stable/active the
+  // "serving" side — tone only tells the two apart, it carries no other meaning.
+  const trafficRole = nodeData.trafficRole as 'canary' | 'stable' | 'active' | 'preview' | undefined
 
   const Icon = getTopologyIcon(kind);
 
@@ -658,6 +664,15 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   </span>
                 </Tooltip>
               )}
+              {trafficRole && (
+                <Badge
+                  tone={trafficRole === 'canary' || trafficRole === 'preview' ? 'accent1' : 'accent2'}
+                  size="sm"
+                  className="!text-[9px] !px-1 !py-0.5 normal-case tracking-normal"
+                >
+                  {trafficRole[0].toUpperCase() + trafficRole.slice(1)}
+                </Badge>
+              )}
               {onToggleReplicaSets && (
                 <Tooltip content={nodeData.replicaSetsCollapsed ? 'Show ReplicaSet' : 'Hide stable ReplicaSet'} position="right">
                   <button

package/src/components/topology/TopologyGraph.tsx

@@ -69,21 +69,32 @@ const EDGE_LEGEND: { label: string; color: string }[] = [
 // Memoized edge style cache to avoid creating new objects on every render
 const edgeStyleCache = new Map<string, React.CSSProperties>()
 
-function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean, partial: boolean): React.CSSProperties {
-  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}-${partial}`
+function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean, partial: boolean, isRolloutTrafficEdge: boolean): React.CSSProperties {
+  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}-${partial}-${isRolloutTrafficEdge}`
   let style = edgeStyleCache.get(cacheKey)
   if (!style) {
     const edgeColor = getEdgeColor(type, isTrafficView)
+    const dashed = (isTrafficView && isTrafficEdge && animated) || (isRolloutTrafficEdge && animated)
     style = {
       stroke: edgeColor,
       strokeWidth: isTrafficView ? 2 : 1.5,
-      strokeDasharray: partial ? '6 3' : isTrafficView && isTrafficEdge && animated ? '5 5' : undefined,
+      strokeDasharray: partial ? '6 3' : dashed ? '5 5' : undefined,
     }
     edgeStyleCache.set(cacheKey, style)
   }
   return style
 }
 
+// A Rollout canary/stable (weighted) or blue-green active/preview Service
+// edge — set server-side via a fixed label vocabulary (pkg/topology
+// builder.go's "Check Rollouts" block). These carry a live traffic split
+// worth animating even outside the separate Network Flow view, since that
+// view doesn't build Rollout nodes/edges at all — this is the only place
+// they render.
+function isRolloutTrafficEdgeLabel(label: TopologyEdge['label']): boolean {
+  return typeof label === 'string' && (label === 'Active' || label === 'Preview' || label.startsWith('Canary') || label.startsWith('Stable'))
+}
+
 // Reachability outcome → edge color/dash, set by the Reachability view via
 // TopologyEdge.reachOutcome (distinct from policyEffect, a NetworkPolicy concept).
 // Honest + DISTINCT: "blocked" (a CONSEQUENCE - downstream of a real break) is a gray
@@ -126,6 +137,7 @@ function buildEdges(
   nodeCount?: number,
   groupLevels?: Map<string, GroupDisplayLevel>,
   smartDefaultActive = false,
+  nodes?: TopologyNode[],
 ): Edge[] {
   const edges: Edge[] = []
   const seenEdgeIds = new Set<string>() // O(1) duplicate detection
@@ -144,6 +156,21 @@ function buildEdges(
     }
   }
 
+  // nodeId -> trafficRole, so a Rollout->ReplicaSet or ReplicaSet/Rollout->Pod
+  // ownership edge can animate too when it leads to a canary/stable/active/
+  // preview node - the "active DAG" should read as a continuous path from the
+  // Service all the way down to the pods actually serving that role, not stop
+  // at the Rollout.
+  const nodeTrafficRoleById = new Map<string, string>()
+  if (nodes) {
+    for (const n of nodes) {
+      const role = (n.data as Record<string, unknown> | undefined)?.trafficRole
+      if (typeof role === 'string' && role) {
+        nodeTrafficRoleById.set(n.id, role)
+      }
+    }
+  }
+
   for (const edge of topologyEdges) {
     let source = edge.source
     let target = edge.target
@@ -176,8 +203,22 @@ function buildEdges(
     const reach = edge.reachOutcome
     const edgeColor = reach ? (REACH_COLORS[reach] || '#94a3b8') : getEdgeColor(edge.type, isTrafficView)
     const isTrafficEdge = edge.type === 'routes-to' || edge.type === 'exposes'
+    // Exposes: detected via the fixed label vocabulary (Canary/Stable/Active/
+    // Preview) set server-side on Service->Rollout edges. Manages: the SAME
+    // path continued down through Rollout->ReplicaSet and ReplicaSet/Rollout->
+    // Pod ownership edges, detected via the target node's own trafficRole
+    // (also set server-side) rather than a label, since an ownership edge
+    // carries no label today and doesn't need one just for this.
+    const isRolloutTrafficEdge =
+      (edge.type === 'exposes' && isRolloutTrafficEdgeLabel(edge.label)) ||
+      (edge.type === 'manages' && nodeTrafficRoleById.has(edge.target))
     // A reachability edge never animates (a dashed "blocked" must not look like flow).
-    const animated = enableAnimations && isTrafficView && isTrafficEdge && !reach && !edge.partial
+    // Rollout canary/stable/active/preview edges animate regardless of view mode —
+    // they only exist in the resources-view topology, so gating on isTrafficView
+    // (the separate Network Flow view) would mean they never animate at all.
+    const animated = enableAnimations && !reach && !edge.partial && (
+      (isTrafficView && isTrafficEdge) || isRolloutTrafficEdge
+    )
 
     edges.push({
       id: edgeId,
@@ -197,7 +238,7 @@ function buildEdges(
         width: 12,
         height: 12,
       },
-      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated, edge.partial === true),
+      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated, edge.partial === true, isRolloutTrafficEdge),
     })
   }
 
@@ -429,11 +470,25 @@ export function TopologyGraph({
       restarts: number
       containers: number
       status?: HealthStatus
+      // Present only when the group spans more than one owner (e.g. a
+      // Rollout's canary + stable ReplicaSets) — the specific edge
+      // source(s) that actually own this pod, from the backend's own
+      // per-pod owner resolution. See pkg/topology/builder.go's
+      // ownerKeyToSourceIDs.
+      ownerIds?: string[]
+      // The group's own trafficRole (podGroupNode.data.trafficRole) is only
+      // set when every pod agrees — this is each pod's OWN role, so a mixed
+      // canary/stable group still badges correctly once expanded.
+      trafficRole?: string
     }>
 
     // Find edges pointing to this pod group
     const edgesToGroup = topoEdges.filter(e => e.target === podGroupId)
     const sourceIds = edgesToGroup.map(e => e.source)
+    // Homogeneous per build — resources-view feeds `manages` ownership
+    // edges, traffic-view feeds `routes-to` Service edges — so any surviving
+    // edge's type applies to the whole group.
+    const edgeType = edgesToGroup[0]?.type ?? 'routes-to'
 
     // Remove the PodGroup node and its edges
     const newNodes = topoNodes.filter(n => n.id !== podGroupId)
@@ -457,17 +512,33 @@ export function TopologyGraph({
           phase: pod.phase,
           restarts: pod.restarts,
           containers: pod.containers,
+          trafficRole: pod.trafficRole,
           expandedFromGroup: podGroupId, // Track which group this came from
         },
       })
 
-      // Add edges from all sources to this pod
-      for (const sourceId of sourceIds) {
+      // A group with a single owner has every source apply to every pod —
+      // the common case. A mixed-owner group (pod.ownerIds present) instead
+      // connects each pod only to the source(s) that are actually its own
+      // owner, so e.g. a canary pod doesn't end up drawn as owned by the
+      // stable ReplicaSet too.
+      const podSourceIds = pod.ownerIds?.filter(id => sourceIds.includes(id)) ?? sourceIds
+      // A mixed-owner group's shared sources (e.g. a Rollout, reached via
+      // both a canary and a stable edge) can't be told apart by source id
+      // alone once collapsed — both edges point at the same node id, just
+      // with different labels. The pod's own trafficRole is unambiguous, so
+      // an ownership edge derives its label from that directly rather than
+      // trying to match back to one specific original edge.
+      const label = edgeType === 'manages' && pod.trafficRole
+        ? pod.trafficRole[0].toUpperCase() + pod.trafficRole.slice(1)
+        : undefined
+      for (const sourceId of podSourceIds) {
         newEdges.push({
           id: `${sourceId}-to-${podId}`,
           source: sourceId,
           target: podId,
-          type: 'routes-to' as const,
+          type: edgeType,
+          ...(label ? { label } : {}),
         })
       }
     }
@@ -796,7 +867,8 @@ export function TopologyGraph({
           nodeToGroup,
           nodesWithHandlers.length,
           groupLevels,
-          smartDefaultActive
+          smartDefaultActive,
+          workingNodes
         )
         setEdges(builtEdges)
       }
@@ -845,7 +917,13 @@ export function TopologyGraph({
       })
       return changed ? next : prev
     })
-    setEdges(prev => (prev.length === 0 ? prev : buildEdges(workingEdges, collapsedGroups, groupMapRef.current ?? new Map(), groupingMode, isTrafficView, undefined, prev.length, groupLevels, false)))
+    // nodeCount must be a real NODE count (buildEdges gates animations on it
+    // for the large-graph performance safeguard) — workingNodes.length, not
+    // the previous EDGES array's length. A tree-shaped graph commonly has
+    // fewer edges than nodes, so using edge count here could report "under
+    // the threshold" and re-enable animations on a graph that's actually
+    // over it.
+    setEdges(prev => (prev.length === 0 ? prev : buildEdges(workingEdges, collapsedGroups, groupMapRef.current ?? new Map(), groupingMode, isTrafficView, undefined, workingNodes.length, groupLevels, false, workingNodes)))
     // layoutEpoch is a dep so this re-applies AFTER any in-flight ELK layout lands -
     // a stale layout closure can't leave the canvas painted with pre-probe styles.
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/utils/topology-neighborhood.ts

@@ -265,10 +265,23 @@ export function neighborhoodFor(topology: Topology, seeds: NeighborhoodSeed[]):
     }
   }
 
+  const keptNodes = topology.nodes.filter((n) => keep.has(n.id))
+  // A shortcut edge (Rollout->Pod, CronJob->Pod, ...) exists to bridge the gap
+  // left when its intermediate kind is filtered out. The main view drops it
+  // once that kind reappears in the user's visible-kinds toggle; this
+  // neighborhood has no such toggle, so the equivalent check is whether a
+  // node of that kind is actually present in the resulting subgraph.
+  const presentKinds = new Set(keptNodes.map((n) => n.kind))
+  const keptEdges = topology.edges.filter((e) => {
+    if (!keep.has(e.source) || !keep.has(e.target)) return false
+    if (e.skipIfKindVisible && presentKinds.has(e.skipIfKindVisible as NodeKind)) return false
+    return true
+  })
+
   return {
     ...topology,
-    nodes: topology.nodes.filter((n) => keep.has(n.id)),
-    edges: topology.edges.filter((e) => keep.has(e.source) && keep.has(e.target)),
+    nodes: keptNodes,
+    edges: keptEdges,
     warnings: [
       ...(topology.warnings ?? []),
       ...Array.from(cappedSources).map((sourceId) => {

package/src/utils/workload-rollout.ts

@@ -1,5 +1,59 @@
 import type { WorkloadPodInfo } from '../types/core'
 
+/** Every CanaryStep variant Argo defines; raw JSON is unreadable in a step list. */
+export function canaryStepLabel(step: any): string {
+  if (!step || typeof step !== 'object') return 'Unknown step'
+
+  if (step.setWeight !== undefined) return `Set weight: ${step.setWeight}%`
+
+  if (step.pause !== undefined) {
+    return step.pause?.duration ? `Pause: ${step.pause.duration}` : 'Pause: until promoted'
+  }
+
+  if (step.analysis) {
+    const templates = (step.analysis.templates || [])
+      .map((t: any) => t.templateName || t.clusterTemplateName)
+      .filter(Boolean)
+    return templates.length > 0 ? `Analysis: ${templates.join(', ')}` : 'Analysis'
+  }
+
+  if (step.experiment) {
+    const templates = (step.experiment.templates || []).map((t: any) => t.name).filter(Boolean)
+    const duration = step.experiment.duration ? ` for ${step.experiment.duration}` : ''
+    return templates.length > 0
+      ? `Experiment: ${templates.join(', ')}${duration}`
+      : `Experiment${duration}`
+  }
+
+  if (step.setCanaryScale) {
+    const { weight, replicas, matchTrafficWeight } = step.setCanaryScale
+    if (matchTrafficWeight) return 'Set canary scale: match traffic weight'
+    if (replicas !== undefined) return `Set canary scale: ${replicas} replicas`
+    if (weight !== undefined) return `Set canary scale: ${weight}%`
+    return 'Set canary scale'
+  }
+
+  if (step.setHeaderRoute) {
+    const { name, match } = step.setHeaderRoute
+    // An empty match list is how a header route is torn down again.
+    if (!match || match.length === 0) return `Remove header route${name ? `: ${name}` : ''}`
+    const headers = match.map((m: any) => m.headerName).filter(Boolean)
+    return `Header route${name ? ` ${name}` : ''}${headers.length ? `: ${headers.join(', ')}` : ''}`
+  }
+
+  if (step.setMirrorRoute) {
+    const { name, match, percentage } = step.setMirrorRoute
+    if (!match || match.length === 0) return `Remove mirror route${name ? `: ${name}` : ''}`
+    const pct = percentage !== undefined ? ` (${percentage}%)` : ''
+    return `Mirror route${name ? ` ${name}` : ''}${pct}`
+  }
+
+  if (step.plugin) return `Plugin: ${step.plugin.name || 'unnamed'}`
+
+  const key = Object.keys(step)[0]
+  return key ? `Unrecognized step: ${key}` : 'Unknown step'
+}
+
 export type WorkloadRolloutPhase =
   | 'idle'
   | 'applying'
@@ -225,10 +279,22 @@ export function getArgoRolloutStepNumber(resource: any): number | null {
   return Math.min(Math.max(currentIndex + 1, 1), steps.length)
 }
 
+// Mirrors pkg/health/workload_rollout.go's argoStepDetail exactly (same
+// output string, same step-type coverage via canaryStepLabel) - the two are
+// checked against the same golden fixture
+// (pkg/health/testdata/workload_rollout_vectors.json), so a change to one
+// without the other silently breaks cross-language parity rather than
+// failing loudly.
 function argoDetail(resource: any, updated: number, desired: number, available: number): string {
+  const steps = resource?.spec?.strategy?.canary?.steps || []
   const stepNumber = getArgoRolloutStepNumber(resource)
-  const step = stepNumber === null ? '' : `Step ${stepNumber} · `
-  return `${step}${updated}/${desired} updated · ${available} available`
+  const step = stepNumber === null ? '' : `Step ${stepNumber}`
+  const currentStep = stepNumber === null ? undefined : steps[stepNumber - 1]
+  const label = currentStep ? ` (${canaryStepLabel(currentStep)})` : ''
+  const weight = resource?.status?.canary?.weights?.canary?.weight
+  const weightSuffix = typeof weight === 'number' ? ` · ${weight}% canary traffic` : ''
+  const prefix = stepNumber === null ? '' : `${step}${label} · `
+  return `${prefix}${updated}/${desired} updated · ${available} available${weightSuffix}`
 }
 
 function replicaDetail(updated: number, desired: number, available: number): string {