@skyhook-io/k8s-ui 1.18.2 → 1.20.0

package/src/components/topology/TopologyGraph.tsx

@@ -307,6 +307,101 @@ export function phaseOnlyHealth(phase: string | undefined): HealthStatus {
   }
 }
 
+/** Replaces a PodGroup with its pods. A pod connects to its own owners
+ *  (`ownerIds`) or, when the server sent none, to every owner of the group;
+ *  an empty `ownerIds` connects it to none. */
+export function expandPodGroup(
+  topoNodes: TopologyNode[],
+  topoEdges: TopologyEdge[],
+  podGroupId: string,
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  const podGroupNode = topoNodes.find(n => n.id === podGroupId && n.kind === 'PodGroup')
+  if (!podGroupNode || !podGroupNode.data.pods) {
+    return { nodes: topoNodes, edges: topoEdges }
+  }
+
+  const pods = podGroupNode.data.pods as Array<{
+    name: string
+    namespace: string
+    phase: string
+    restarts: number
+    containers: number
+    status?: HealthStatus
+    terminating?: boolean
+    // 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
+  }>
+
+  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'
+
+  const newNodes = topoNodes.filter(n => n.id !== podGroupId)
+  const newEdges = topoEdges.filter(e => e.target !== podGroupId)
+
+  for (const pod of pods) {
+    const podId = `pod/${pod.namespace}/${pod.name}`
+    newNodes.push({
+      id: podId,
+      kind: 'Pod',
+      name: pod.name,
+      // The server computes pod health; pkg/health tracks a crash loop across
+      // the kubelet's Waiting->Running oscillation, which the phase alone
+      // hides — a crash-looping pod sits at Phase=Running. Deriving it here
+      // again would rebuild that logic in a second place and get it wrong.
+      status: pod.status ?? phaseOnlyHealth(pod.phase),
+      data: {
+        ...podGroupNode.data,
+        namespace: pod.namespace,
+        phase: pod.phase,
+        restarts: pod.restarts,
+        containers: pod.containers,
+        trafficRole: pod.trafficRole,
+        ...(podGroupNode.data.earlierJobRun ? { terminating: pod.terminating ? 1 : 0 } : {}),
+        expandedFromGroup: podGroupId, // Track which group this came from
+      },
+    })
+
+    // 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 = podGroupNode.data.earlierJobRun ? edgesToGroup[0]?.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: edgeType,
+        ...(label ? { label } : {}),
+      })
+    }
+  }
+
+  return { nodes: newNodes, edges: newEdges }
+}
+
 export function TopologyGraph({
   topology,
   viewMode,
@@ -455,99 +550,6 @@ export function TopologyGraph({
     fitAllAfterLayoutRef.current = true
   }, [])
 
-  // Expand PodGroup to individual pods
-  const expandPodGroup = useCallback((
-    topoNodes: TopologyNode[],
-    topoEdges: TopologyEdge[],
-    podGroupId: string
-  ): { nodes: TopologyNode[]; edges: TopologyEdge[] } => {
-    const podGroupNode = topoNodes.find(n => n.id === podGroupId && n.kind === 'PodGroup')
-    if (!podGroupNode || !podGroupNode.data.pods) {
-      return { nodes: topoNodes, edges: topoEdges }
-    }
-
-    const pods = podGroupNode.data.pods as Array<{
-      name: string
-      namespace: string
-      phase: string
-      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)
-    const newEdges = topoEdges.filter(e => e.target !== podGroupId)
-
-    // Add individual pod nodes
-    for (const pod of pods) {
-      const podId = `pod/${pod.namespace}/${pod.name}`
-      newNodes.push({
-        id: podId,
-        kind: 'Pod',
-        name: pod.name,
-        // The server computes pod health; pkg/health tracks a crash loop across
-        // the kubelet's Waiting->Running oscillation, which the phase alone
-        // hides — a crash-looping pod sits at Phase=Running. Deriving it here
-        // again would rebuild that logic in a second place and get it wrong.
-        status: pod.status ?? phaseOnlyHealth(pod.phase),
-        data: {
-          ...podGroupNode.data,
-          namespace: pod.namespace,
-          phase: pod.phase,
-          restarts: pod.restarts,
-          containers: pod.containers,
-          trafficRole: pod.trafficRole,
-          expandedFromGroup: podGroupId, // Track which group this came from
-        },
-      })
-
-      // 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: edgeType,
-          ...(label ? { label } : {}),
-        })
-      }
-    }
-
-    return { nodes: newNodes, edges: newEdges }
-  }, [])
 
 
   // Prepare topology data with expanded pod groups
@@ -574,7 +576,7 @@ export function TopologyGraph({
     }
 
     return { workingNodes: nodes, workingEdges: edges }
-  }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode])
+  }, [topology, expandedPodGroups, isTrafficView, groupingMode])
 
   // Handle card click in card-grid view — find the topology node and open drawer
   const handleCardClick = useCallback((nodeId: string) => {

package/src/components/topology/layout.ts

@@ -829,6 +829,8 @@ function computeWorkloadCards(
       subtitle = (d.schedule as string) || ''
     } else if (primary.kind === 'CronWorkflow') {
       subtitle = (d.schedule as string) || ''
+    } else if (primary.kind === 'JobSet') {
+      subtitle = (d.phase as string) || ''
     } else if (primary.kind === 'Job') {
       subtitle = (d.phase as string) || ''
     } else if (primary.kind === 'Workflow') {
@@ -863,7 +865,7 @@ function computeWorkloadCards(
 // Shared kind priority map — used by both pickGroupName and computeWorkloadCards
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
-  'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
+  'CronJob': 4, 'CronWorkflow': 4, 'JobSet': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
   'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'UDPRoute': 6, 'Ingress': 7,
   'CalicoNetworkPolicy': 10, 'CalicoGlobalNetworkPolicy': 10,
   'CalicoStagedNetworkPolicy': 10, 'CalicoStagedGlobalNetworkPolicy': 10,

package/src/components/topology/pod-group-expansion.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { expandPodGroup } from './TopologyGraph'
+import type { TopologyEdge, TopologyNode } from '../../types'
+
+function group(pods: Record<string, unknown>[]): TopologyNode {
+  return { id: 'podgroup/ml/train-workers-0', kind: 'PodGroup', name: 'train-workers-0', status: 'healthy', data: { namespace: 'ml', pods } }
+}
+
+const jobEdge: TopologyEdge = { id: 'job-to-group', source: 'job/ml/train-workers-0', target: 'podgroup/ml/train-workers-0', type: 'manages' }
+const pod = (name: string, extra: Record<string, unknown> = {}) => ({ name, namespace: 'ml', phase: 'Running', restarts: 0, containers: 1, ...extra })
+
+describe('expandPodGroup', () => {
+  it('preserves earlier-run context and each Pod termination state when expanded', () => {
+    const node = group([pod('old', { status: 'neutral', terminating: true }), pod('failed', { status: 'unhealthy', terminating: false })])
+    node.data.earlierJobRun = 'train-workers-0'
+    node.data.terminating = 1
+    const edge: TopologyEdge = { ...jobEdge, source: 'jobset/ml/train/jobset.x-k8s.io', type: 'uses', label: 'Earlier Job run (same name)' }
+    const out = expandPodGroup([node], [edge], node.id)
+    expect(out.nodes.map(n => [n.status, n.data.earlierJobRun, n.data.terminating])).toEqual([
+      ['neutral', 'train-workers-0', 1], ['unhealthy', 'train-workers-0', 0],
+    ])
+    expect(out.edges.every(e => e.type === 'uses' && e.label === edge.label)).toBe(true)
+  })
+  it('connects a pod without ownerIds to every owner of the group', () => {
+    const out = expandPodGroup([group([pod('a')])], [jobEdge], 'podgroup/ml/train-workers-0')
+    expect(out.edges.map((e) => [e.source, e.target])).toEqual([['job/ml/train-workers-0', 'pod/ml/a']])
+  })
+
+  it('connects a pod with empty ownerIds to none of the group\'s owners', () => {
+    const out = expandPodGroup(
+      [group([pod('current', { ownerIds: ['job/ml/train-workers-0'] }), pod('earlier', { ownerIds: [] })])],
+      [jobEdge],
+      'podgroup/ml/train-workers-0',
+    )
+    expect(out.nodes.map((n) => n.id).sort()).toEqual(['pod/ml/current', 'pod/ml/earlier'])
+    expect(out.edges.map((e) => [e.source, e.target])).toEqual([['job/ml/train-workers-0', 'pod/ml/current']])
+  })
+})

package/src/components/ui/Badge.tsx

@@ -95,6 +95,7 @@ const KIND: Record<string, string> = {
   // Jobs
   Job:           'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   CronJob:       'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  JobSet:        'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   Workflow:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   CronWorkflow:  'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   WorkflowTemplate: 'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',

package/src/components/ui/RadarUpgradeNote.tsx

@@ -81,6 +81,14 @@ function radarUpgradeNeed(requirement: RadarUpgradeRequirement): string {
   return current ? `${need} It runs ${current}.` : need
 }
 
+/**
+ * The inline note's sentence as plain text, for the tooltip of a control the
+ * feature backs: "Argo CD rollbacks need Radar v1.10 or newer on this cluster."
+ */
+export function radarUpgradeNoteText(requirement: RadarUpgradeRequirement): string {
+  return `${requirement.feature} ${radarUpgradeNeed(requirement)}`
+}
+
 /** The upgrade call to action, or nothing when the host offers no way to upgrade. */
 export function RadarUpgradeAction({ requirement }: { requirement: RadarUpgradeRequirement }) {
   const { onRequestUpgrade, upgradeHref } = useContext(RadarUpgradeContext)

package/src/components/ui/drawer-components.tsx

@@ -1016,7 +1016,7 @@ function ownershipUnanswered(coverage: OwnershipCoverage | undefined): string |
 }
 
 // ownerNote says why no owner is named, when there is an owner reference.
-function ownerNote(coverage: OwnershipCoverage | undefined): RelationshipNote | undefined {
+export function ownerNote(coverage: OwnershipCoverage | undefined): RelationshipNote | undefined {
   const ref = coverage?.ownerRef
   const named = ref?.kind && ref.name ? `${ref.kind} ${ref.name}` : 'the owner it names'
   switch (coverage?.primaryOwnerState) {

package/src/components/ui/index.ts

@@ -82,5 +82,6 @@ export {
   RadarUpgradeContext,
   radarUpgradeDetail,
   radarUpgradeHeadline,
+  radarUpgradeNoteText,
 } from "./RadarUpgradeNote";
 export type { RadarUpgradeActions } from "./RadarUpgradeNote";

package/src/components/workload/PodList.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
+import { Terminal } from 'lucide-react'
 import { Collapse } from '../ui/Collapse'
 import type { WorkloadPodInfo } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
@@ -12,6 +13,8 @@ export function PodRow({
   healthLevel,
   detail,
   onNavigate,
+  onOpenLogs,
+  logsUnavailable,
 }: {
   name: string
   namespace: string
@@ -19,6 +22,10 @@ export function PodRow({
   healthLevel?: WorkloadPodInfo['healthLevel']
   detail: string
   onNavigate?: NavigateToResource
+  /** Adds a Logs button beside the row. */
+  onOpenLogs?: () => void
+  /** With `onOpenLogs`, shows this reason in place of the Logs button. */
+  logsUnavailable?: string
 }) {
   const statusLabel = podStatusLabel(healthLevel, ready)
   const statusClass = podStatusClass(healthLevel, ready)
@@ -35,15 +42,11 @@ export function PodRow({
     </>
   )
 
-  if (!onNavigate) {
-    return (
-      <div className="flex w-full min-w-0 items-center gap-3 rounded-md border border-theme-border bg-theme-base px-3 py-2 text-left">
-        {content}
-      </div>
-    )
-  }
-
-  return (
+  const row = !onNavigate ? (
+    <div className="flex w-full min-w-0 items-center gap-3 rounded-md border border-theme-border bg-theme-base px-3 py-2 text-left">
+      {content}
+    </div>
+  ) : (
     <button
       type="button"
       onClick={() => onNavigate({ kind: 'pods', namespace, name })}
@@ -52,6 +55,29 @@ export function PodRow({
       {content}
     </button>
   )
+  if (!onOpenLogs) return row
+
+  return (
+    <div className="flex min-w-0 items-stretch gap-2">
+      <div className="min-w-0 flex-1">{row}</div>
+      {logsUnavailable ? (
+        <span className="flex w-24 shrink-0 items-center justify-center px-2 text-center text-xs text-theme-text-tertiary">
+          <span className="sr-only">Logs for {name}: </span>
+          {logsUnavailable}
+        </span>
+      ) : (
+        <button
+          type="button"
+          onClick={onOpenLogs}
+          aria-label={`Open logs for ${name}`}
+          className="btn-secondary inline-flex min-w-24 shrink-0 items-center justify-center gap-1.5 rounded-md px-3 text-xs font-medium"
+        >
+          <Terminal className="h-3.5 w-3.5" />
+          Logs
+        </button>
+      )}
+    </div>
+  )
 }
 
 export function PodListFrame({

package/src/components/workload/WorkloadView.spec.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act } from 'react'
+import { act, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { renderToStaticMarkup } from 'react-dom/server'
 import type { ReactNode } from 'react'
@@ -147,3 +147,43 @@ it.each(['Deployment', 'Pod', 'Pooler', 'ScheduledBackup'])('groups %s drawer ac
   if (kind === 'ScheduledBackup') { expect(object.querySelectorAll('button')).toHaveLength(3); expect(object.textContent).toContain('Run blocked: no backup destination') }
   act(() => root.unmount())
 })
+
+it('does not carry a picked Pod to the next resource the view shows', () => {
+  const pods = (name: string) => ({ pods: [{ kind: 'Pod', namespace: 'db', name }] })
+  const seen: (string | null)[] = []
+  const Probe = ({ selectedPod, onSelectPod }: { selectedPod: string | null; onSelectPod: (pod: string | null) => void }) => {
+    useEffect(() => { seen.push(selectedPod) })
+    return <button data-pick onClick={() => onSelectPod('pg-1')}>pick</button>
+  }
+  const renderLogsTab = (tab: { selectedPod: string | null; onSelectPod: (pod: string | null) => void }) => <Probe {...tab} />
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  act(() => root.render(<WorkloadView {...props} activeTab="logs" relationships={pods('pg-1')} renderLogsTab={renderLogsTab} />))
+  act(() => host.querySelector<HTMLButtonElement>('[data-pick]')!.click())
+  expect(seen.at(-1)).toBe('pg-1')
+  const before = seen.length
+  act(() => root.render(<WorkloadView {...props} name="other" activeTab="logs" relationships={pods('other-1')} renderLogsTab={renderLogsTab} />))
+  expect(seen.slice(before)).not.toContain('pg-1')
+  act(() => root.unmount())
+})
+
+it('does not carry a picked Pod to a recreated resource with the same name', () => {
+  const relationships = { pods: [{ kind: 'Pod', namespace: 'db', name: 'pg-1' }] }
+  const seen: (string | null)[] = []
+  const Probe = ({ selectedPod, onSelectPod }: { selectedPod: string | null; onSelectPod: (pod: string | null) => void }) => {
+    useEffect(() => { seen.push(selectedPod) })
+    return <button data-pick onClick={() => onSelectPod('pg-1')}>pick</button>
+  }
+  const renderLogsTab = (tab: { selectedPod: string | null; onSelectPod: (pod: string | null) => void }) => <Probe {...tab} />
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  const withUID = (uid: string) => ({ ...resource, metadata: { ...resource.metadata, uid } })
+  act(() => root.render(<WorkloadView {...props} resource={withUID('a')} activeTab="logs" relationships={relationships} renderLogsTab={renderLogsTab} />))
+  act(() => host.querySelector<HTMLButtonElement>('[data-pick]')!.click())
+  act(() => root.render(<WorkloadView {...props} resource={withUID('a')} activeTab="logs" relationships={relationships} renderLogsTab={renderLogsTab} />))
+  expect(seen.at(-1)).toBe('pg-1')
+  const before = seen.length
+  act(() => root.render(<WorkloadView {...props} resource={withUID('b')} activeTab="logs" relationships={relationships} renderLogsTab={renderLogsTab} />))
+  expect(seen.slice(before)).not.toContain('pg-1')
+  act(() => root.unmount())
+})