@skyhook-io/k8s-ui 1.10.3 → 1.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.10.3",
+  "version": "1.10.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -89,7 +89,7 @@
   },
   "devDependencies": {
     "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
@@ -98,10 +98,10 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.28.0",
     "monaco-editor": "0.55.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^6.0.2",
     "vitest": "^4.1.10",
     "yaml": "^2.9.0"

package/src/components/applications/ApplicationDetail.test.tsx

@@ -207,6 +207,52 @@ describe("ApplicationDetail shell", () => {
     expect(html).not.toContain("Application views");
   });
 
+  // A controlled host's only way to say "no workload in the URL" is null, so
+  // without this the application scope a single-workload app must not have
+  // becomes the default for every URL-driven host.
+  it("opens the workload directly for controlled single-workload apps with no workload in the URL", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const html = renderDetail({
+      app: singleApp,
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("Application views");
+    expect(html).not.toContain('aria-haspopup="listbox"');
+  });
+
+  it("keeps workload scope for a controlled single-workload app whose URL names a workload it no longer has", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const html = renderDetail({
+      app: singleApp,
+      selectedWorkloadKey: workloadKey(app.workloads[1]),
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("Application views");
+  });
+
+  it("keeps application scope for a controlled multi-workload app with no workload in the URL", () => {
+    const html = renderDetail({
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Application views");
+    expect(html).not.toContain("Runtime for");
+  });
+
   it("renders one filtered application chronology with workload and source actions", () => {
     const html = renderDetail({
       selectedView: "history",

package/src/components/applications/ApplicationDetail.tsx

@@ -71,6 +71,7 @@ import {
   sourceReportedHealth,
   sourceSyncHealth,
   servingReadiness,
+  resolveAppWorkloadSelection,
   worstHealth,
   appGroupLagMessage,
   compareVersions,
@@ -122,9 +123,10 @@ export interface AppIdentityInstance {
 
 /** Workload selection is either fully controlled (key + callback, the host
  *  wires it to the URL so back/forward works) or fully internal — providing
- *  only half silently freezes the selector, so the types forbid it. `null` means
- *  the application itself is selected; a key (see `workloadKey`) selects a
- *  workload scope. */
+ *  only half silently freezes the selector, so the types forbid it. A key (see
+ *  `workloadKey`) selects a workload scope; `null` asks for application scope,
+ *  which a single-workload app does not have — there the component resolves to
+ *  the sole workload regardless. See `rawSelected`. */
 type SelectionProps =
   | {
       selectedWorkloadKey: string | null;
@@ -407,12 +409,13 @@ export function ApplicationDetail({
   }, [app.key, selectedView]);
 
   const [internalSelected, setInternalSelected] = useState<string | null>(null);
-  const implicitSingleWorkloadKey =
-    workloads.length === 1 ? workloadKey(workloads[0]) : null;
-  const rawSelected =
-    selectedWorkloadKey !== undefined
-      ? selectedWorkloadKey
-      : (internalSelected ?? implicitSingleWorkloadKey);
+  const hostSelected =
+    selectedWorkloadKey !== undefined ? selectedWorkloadKey : internalSelected;
+  const { selected: rawSelected, hostKeyIsStale } = useMemo(
+    () =>
+      resolveAppWorkloadSelection(workloads.map(workloadKey), hostSelected),
+    [workloads, hostSelected],
+  );
   const setSelected = useCallback(
     (key: string | null, options?: AppWorkloadSelectionOptions) =>
       onSelectWorkload
@@ -425,14 +428,10 @@ export function ApplicationDetail({
     : undefined;
   const singleWorkloadScope = workloads.length === 1 && !!selectedWorkload;
   useEffect(() => {
-    if (
-      selectedWorkloadKey !== undefined &&
-      selectedWorkloadKey !== null &&
-      !selectedWorkload
-    ) {
+    if (selectedWorkloadKey !== undefined && hostKeyIsStale) {
       onSelectWorkload?.(null);
     }
-  }, [selectedWorkloadKey, selectedWorkload, onSelectWorkload]);
+  }, [selectedWorkloadKey, hostKeyIsStale, onSelectWorkload]);
   useEffect(() => {
     if (selectedWorkloadKey === undefined) setInternalSelected(null);
   }, [app.key, selectedWorkloadKey]);

package/src/components/topology/K8sResourceNode.tsx

@@ -282,6 +282,11 @@ function getSubtitle(
   kind: NodeKind,
   nodeData: Record<string, unknown>,
 ): string {
+  // An explicit override wins over the per-kind computed subtitle: the Reachability
+  // diagram precomputes a functional one-liner (port→targetPort, readiness) the
+  // generic per-kind logic can't know. '' is a deliberate "no subtitle", honored as
+  // such. App-topology nodes never set this, so their behavior is unchanged.
+  if (typeof nodeData.subtitleOverride === 'string') return nodeData.subtitleOverride;
   const base = baseSubtitle(kind, nodeData);
   const ps = nodeData.podSummary as PodSummary | undefined;
   if (ps && SUMMARY_POD_KINDS.has(kind)) {

package/src/components/topology/TopologyGraph.tsx

@@ -83,6 +83,31 @@ function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boole
   return style
 }
 
+// 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
+// DASH; "not-tested" (ABSENCE of probe data) is a lighter DOTTED line. Neither is ever
+// a flowing/green edge that implies traffic crosses a break.
+const REACH_COLORS: Record<string, string> = {
+  verified: '#22c55e',
+  reached: '#22c55e',
+  unreachable: '#ef4444',
+  blocked: '#94a3b8',
+  'not-tested': '#cbd5e1',
+}
+const REACH_DASH: Record<string, string | undefined> = {
+  reached: '5 4', // dashed green - reached, but only via the proxy (not real-traffic verified)
+  blocked: '6 3', // dashed gray - a consequence of an upstream break
+  'not-tested': '2 4', // dotted - we have no probe data, not a failure
+}
+function reachEdgeStyle(o: string): React.CSSProperties {
+  return {
+    stroke: REACH_COLORS[o] || '#94a3b8',
+    strokeWidth: 2,
+    strokeDasharray: REACH_DASH[o],
+  }
+}
+
 // Threshold for disabling edge animations (performance optimization)
 const EDGE_ANIMATION_THRESHOLD = 200
 
@@ -139,14 +164,19 @@ function buildEdges(
     // Skip self-loops (both ends in same collapsed group)
     if (source === target) continue
 
-    // Skip duplicate edges (O(1) with Set)
-    const edgeId = `${source}-${target}-${edge.type}`
+    // Skip duplicate edges (O(1) with Set). Include the reachability outcome and
+    // label in the key: two route edges between the same source/target/type but
+    // with different outcomes (one verified, one unreachable) are DISTINCT routes -
+    // collapsing them would drop the failing route from the diagram.
+    const edgeId = `${source}-${target}-${edge.type}${edge.reachOutcome ? `-${edge.reachOutcome}` : ''}${edge.label ? `-${edge.label}` : ''}`
     if (seenEdgeIds.has(edgeId)) continue
     seenEdgeIds.add(edgeId)
 
-    const edgeColor = getEdgeColor(edge.type, isTrafficView)
+    const reach = edge.reachOutcome
+    const edgeColor = reach ? (REACH_COLORS[reach] || '#94a3b8') : getEdgeColor(edge.type, isTrafficView)
     const isTrafficEdge = edge.type === 'routes-to' || edge.type === 'exposes'
-    const animated = enableAnimations && isTrafficView && isTrafficEdge
+    // A reachability edge never animates (a dashed "blocked" must not look like flow).
+    const animated = enableAnimations && isTrafficView && isTrafficEdge && !reach
 
     edges.push({
       id: edgeId,
@@ -154,13 +184,19 @@ function buildEdges(
       target,
       type: 'smoothstep',
       animated,
+      // labelTitle (declared route when the label shows an overridden tested
+      // path) renders as a native SVG <title> tooltip inside React Flow's edge
+      // text - keeps the declared path available without overwriting the label.
+      label: edge.labelTitle
+        ? (<>{edge.label}<title>{edge.labelTitle}</title></>)
+        : (edge.label || undefined),
       markerEnd: {
         type: MarkerType.ArrowClosed,
         color: edgeColor,
         width: 12,
         height: 12,
       },
-      style: getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated),
+      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated),
     })
   }
 
@@ -232,6 +268,9 @@ export function TopologyGraph({
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
   const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[])
+  // Bumped each time an ELK layout lands; the visual-sync effect depends on it so a
+  // probe that arrives mid-layout still gets its fresh styles re-applied afterward.
+  const [layoutEpoch, setLayoutEpoch] = useState(0)
 
   // Wrap onNodesChange to track user-dragged positions so they survive re-layouts.
   const onNodesChange = useCallback((changes: NodeChange<Node>[]) => {
@@ -736,6 +775,7 @@ export function TopologyGraph({
         )
         setEdges(builtEdges)
       }
+      if (groupingMode === 'none') setLayoutEpoch(e => e + 1)
     }).catch((err) => {
       console.error('[TopologyGraph] Layout post-processing error:', err)
       setLayoutError(err instanceof Error ? err.message : String(err))
@@ -746,6 +786,46 @@ export function TopologyGraph({
     // when the actual structure hasn't changed
   }, [workingNodes, workingEdges, structureKey, groupingMode, hideGroupHeader, collapsedGroups, groupLevels, handleSetLevel, handleCardClick, onMaximizeNamespace, isTrafficView, expandedPodGroups, handleExpandPodGroup, handleCollapsePodGroup, onToggleReplicaSets, setNodes, setEdges, layoutRetryCount])
 
+  // Visual-only sync - no relayout. The layout effect above is guarded by
+  // structureKey, which DELIBERATELY ignores node status + edge reachOutcome (a
+  // recolor shouldn't pay for an ELK pass). But the Reachability diagram mutates
+  // exactly those: clicking Run recolors an edge (e.g. not-tested → verified)
+  // WITHOUT changing structure, so the layout effect skips and the new outcome
+  // never reaches the canvas. Re-apply the visual attributes here, in place,
+  // preserving ELK positions. Scoped to groupingMode 'none' (the reachability
+  // view) - the grouped app topology rebuilds structure on each data refresh and
+  // never relies on in-place restyle, so it stays untouched.
+  const visualKey = useMemo(() => {
+    if (groupingMode !== 'none') return ''
+    const nodeStatus = foldHash(workingNodes, n => `${n.id}:${n.status}:${(n.data as { subtitleOverride?: unknown })?.subtitleOverride ?? ''}`)
+    const edgeReach = foldHash(workingEdges, e => `${e.source}->${e.target}:${e.reachOutcome ?? ''}:${e.label ?? ''}`)
+    return `${nodeStatus}|${edgeReach}`
+  }, [groupingMode, workingNodes, workingEdges])
+
+  useEffect(() => {
+    if (groupingMode !== 'none' || prevStructureRef.current === '') return
+    const byId = new Map(workingNodes.map(n => [n.id, n]))
+    setNodes(prev => {
+      let changed = false
+      const next = prev.map(node => {
+        const wn = byId.get(node.id)
+        if (!wn) return node
+        // Re-apply BOTH the status AND the latest node payload (nodeData) so a probe
+        // updates the on-canvas subtitle (e.g. "not reached - break upstream") too,
+        // not just the dot color. The detail panel reads the topology node directly,
+        // but the rendered card reads node.data.nodeData - keep it fresh.
+        if (node.data?.status === wn.status && node.data?.nodeData === wn.data) return node
+        changed = true
+        return { ...node, data: { ...node.data, status: wn.status, nodeData: wn.data } }
+      })
+      return changed ? next : prev
+    })
+    setEdges(prev => (prev.length === 0 ? prev : buildEdges(workingEdges, collapsedGroups, groupMapRef.current ?? new Map(), groupingMode, isTrafficView, undefined, prev.length, groupLevels, false)))
+    // 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
+  }, [visualKey, layoutEpoch])
+
   // Handle node click
   const handleNodeClick = useCallback(
     (_event: React.MouseEvent, node: Node) => {

package/src/components/topology/layout.worker.ts

@@ -7,10 +7,11 @@
  */
 import ELK from 'elkjs/lib/elk-api.js'
 import elkWorkerAlgorithm from 'elkjs/lib/elk-worker.min.js?url'
+import { assetUrl } from '../../utils/asset-url'
 
 // Create ELK with explicit worker URL (runs the algorithm in our worker context)
 const elk = new ELK({
-  workerUrl: elkWorkerAlgorithm,
+  workerUrl: assetUrl(elkWorkerAlgorithm),
 })
 
 // ELK options for laying out nodes within a single group