@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/components/resources/renderers/rollout/CanaryStepTimeline.tsx

@@ -0,0 +1,199 @@
+import { Check, X, AlertTriangle, Minus, Clock } from 'lucide-react'
+import { clsx } from 'clsx'
+import { canaryStepLabel, canaryStepTemplateRefs } from '../RolloutRenderer'
+import { analysisPhaseLevel, healthColors, type HealthLevel } from '../../resource-utils'
+
+export interface StepAnalysisStatus {
+  name?: string
+  status?: string
+  message?: string
+}
+
+interface CanaryStepTimelineProps {
+  steps: any[]
+  currentStepIndex?: number
+  // The live "Step analysis" slot from rolloutAnalysisRuns(status) — shown
+  // inline on the current step when it's an analysis step, instead of only
+  // in the separate Analysis section above.
+  stepAnalysisStatus?: StepAnalysisStatus
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  namespace?: string
+}
+
+type StepState = 'completed' | 'current' | 'pending'
+
+// Only 'unhealthy' (Failed/Error) and 'alert' (Inconclusive) colour the dot.
+// A Successful or still-running analysis deliberately gets no special colour:
+// the step itself may still be paused or in progress regardless, so it keeps
+// the same "current" tone as any other in-progress step rather than reading
+// as done.
+function stepDotTone(state: StepState, analysisLevel?: HealthLevel) {
+  if (state === 'current' && (analysisLevel === 'unhealthy' || analysisLevel === 'alert')) {
+    return healthColors[analysisLevel]
+  }
+  switch (state) {
+    case 'completed':
+      return healthColors.healthy
+    case 'current':
+      return healthColors.neutral
+    default:
+      return 'bg-theme-hover text-theme-text-tertiary'
+  }
+}
+
+function StepDot({ state, analysisLevel }: { state: StepState; analysisLevel?: HealthLevel }) {
+  const tone = stepDotTone(state, analysisLevel)
+  let Icon = Minus
+  if (state === 'current' && analysisLevel === 'unhealthy') Icon = X
+  else if (state === 'current' && analysisLevel === 'alert') Icon = AlertTriangle
+  else if (state === 'completed') Icon = Check
+  else if (state === 'current') Icon = Clock
+  return (
+    <span className={clsx('z-10 mt-1 flex h-3 w-3 shrink-0 items-center justify-center rounded-full ring-2 ring-theme-surface', tone)}>
+      <Icon className="h-2 w-2" strokeWidth={4} />
+    </span>
+  )
+}
+
+// Vertical connected stepper for a Rollout's canary steps — a linear
+// sequence (no branching), so a simple top-to-bottom timeline reads more
+// naturally than a graph. Same connecting-line visual as ConditionsSection.
+export function CanaryStepTimeline({ steps, currentStepIndex, stepAnalysisStatus, onNavigate, namespace }: CanaryStepTimelineProps) {
+  if (steps.length === 0) return null
+
+  return (
+    <div className="relative">
+      <div className="absolute bottom-2 left-[9px] top-2 w-px bg-theme-border" />
+      <div className="space-y-0.5">
+        {steps.map((step, index) => {
+          const state: StepState =
+            currentStepIndex === undefined ? 'pending' : index < currentStepIndex ? 'completed' : index === currentStepIndex ? 'current' : 'pending'
+          const isCurrent = state === 'current'
+          const label = canaryStepLabel(step)
+          const templateRefs = step.analysis ? canaryStepTemplateRefs(step) : []
+          const showAnalysisStatus = isCurrent && step.analysis && stepAnalysisStatus?.status
+          const analysisLevel: HealthLevel | undefined = showAnalysisStatus
+            ? analysisPhaseLevel(stepAnalysisStatus!.status)
+            : undefined
+
+          return (
+            <div key={index} className="relative flex items-start gap-2 py-1.5 pr-1 text-sm">
+              <StepDot state={state} analysisLevel={analysisLevel} />
+              <div className="min-w-0 flex-1 pl-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11px] text-theme-text-tertiary">#{index}</span>
+                  <span className={clsx(isCurrent ? 'font-medium text-theme-text-primary' : state === 'completed' ? 'text-theme-text-secondary' : 'text-theme-text-tertiary')}>
+                    {label}
+                  </span>
+                  {showAnalysisStatus && analysisLevel && (
+                    onNavigate && stepAnalysisStatus!.name ? (
+                      <button
+                        onClick={() =>
+                          onNavigate({ kind: 'AnalysisRun', namespace: namespace ?? '', name: stepAnalysisStatus!.name! })
+                        }
+                        className={clsx('badge-sm hover:underline', healthColors[analysisLevel])}
+                        title={stepAnalysisStatus!.name}
+                      >
+                        {stepAnalysisStatus!.status}
+                      </button>
+                    ) : (
+                      <span className={clsx('badge-sm', healthColors[analysisLevel])}>
+                        {stepAnalysisStatus!.status}
+                      </span>
+                    )
+                  )}
+                </div>
+                {templateRefs.length > 0 && (
+                  <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5">
+                    {templateRefs.map((ref) => (
+                      <button
+                        key={ref.name}
+                        onClick={() =>
+                          onNavigate?.({
+                            kind: ref.clusterScoped ? 'ClusterAnalysisTemplate' : 'AnalysisTemplate',
+                            namespace: ref.clusterScoped ? '' : namespace ?? '',
+                            name: ref.name,
+                          })
+                        }
+                        disabled={!onNavigate}
+                        className={clsx(
+                          'font-mono text-[11px]',
+                          onNavigate ? 'text-brand hover:underline' : 'text-theme-text-tertiary'
+                        )}
+                      >
+                        {ref.name}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export interface BlueGreenPhase {
+  label: string
+  state: 'completed' | 'current' | 'pending'
+  analysis?: { name?: string; status?: string }
+}
+
+// Same connected-dot visual as CanaryStepTimeline, for blueGreenPhases()'s
+// derived phase list — blueGreen has no steps[] array to iterate, so there's
+// nothing to reuse structurally, but the "linear sequence, top to bottom"
+// visual language should match.
+export function BlueGreenTimeline({
+  phases,
+  onNavigate,
+  namespace,
+}: {
+  phases: BlueGreenPhase[]
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  namespace?: string
+}) {
+  if (phases.length === 0) return null
+  return (
+    <div className="relative">
+      <div className="absolute bottom-2 left-[9px] top-2 w-px bg-theme-border" />
+      <div className="space-y-0.5">
+        {phases.map((phase, index) => {
+          const level = phase.analysis?.status ? analysisPhaseLevel(phase.analysis.status) : undefined
+          return (
+            <div key={index} className="relative flex items-start gap-2 py-1.5 pr-1 text-sm">
+              <StepDot state={phase.state} analysisLevel={level} />
+              <span
+                className={clsx(
+                  'pl-1',
+                  phase.state === 'current'
+                    ? 'font-medium text-theme-text-primary'
+                    : phase.state === 'completed'
+                      ? 'text-theme-text-secondary'
+                      : 'text-theme-text-tertiary'
+                )}
+              >
+                {phase.label}
+              </span>
+              {level &&
+                (onNavigate && phase.analysis?.name ? (
+                  <button
+                    onClick={() =>
+                      onNavigate({ kind: 'AnalysisRun', namespace: namespace ?? '', name: phase.analysis!.name! })
+                    }
+                    className={clsx('badge-sm hover:underline', healthColors[level])}
+                    title={phase.analysis.name}
+                  >
+                    {phase.analysis.status}
+                  </button>
+                ) : (
+                  <span className={clsx('badge-sm', healthColors[level])}>{phase.analysis!.status}</span>
+                ))}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/resources/renderers/rollout/ReplicaSetProgression.tsx

@@ -0,0 +1,123 @@
+import { useState, useId } from 'react'
+import { Box } from 'lucide-react'
+import { clsx } from 'clsx'
+import { formatAge } from '../../resource-utils'
+import { Collapse, CollapseChevron, disclosurePanelId } from '../../../ui/Collapse'
+import { revisionRoleBadges } from '../../../shared/ResourceActionsBar'
+import type { WorkloadRevision, WorkloadPodInfo } from '../../../../types'
+
+interface ReplicaSetProgressionProps {
+  revisions: WorkloadRevision[]
+  pods?: WorkloadPodInfo[]
+  isRollout: true
+  namespace: string
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function imageTag(image: string): string {
+  const lastColon = image.lastIndexOf(':')
+  const lastSlash = image.lastIndexOf('/')
+  return lastColon > lastSlash ? image.slice(lastColon + 1) : image
+}
+
+function podToneClass(pod: WorkloadPodInfo): string {
+  switch (pod.healthLevel) {
+    case 'healthy':
+      return 'status-healthy'
+    case 'degraded':
+      return 'status-degraded'
+    case 'unhealthy':
+      return 'status-unhealthy'
+    default:
+      return 'status-unknown'
+  }
+}
+
+// Read-only revision tree: Rollout -> ReplicaSet revision -> pods, mirroring
+// `kubectl argo rollouts get rollout`'s tree output. Newest first, matching
+// the existing rollback-history dialog's ordering. Rollback stays exclusive
+// to that dialog — this is purely informational.
+export function ReplicaSetProgression({ revisions, pods, namespace, onNavigate }: ReplicaSetProgressionProps) {
+  const [expanded, setExpanded] = useState<Set<number>>(new Set())
+  // Revision rows are mapped inline, so they can't each call useDisclosure;
+  // one generated prefix plus the revision number keeps aria-controls unique.
+  const panelBase = useId()
+
+  const podsByHash = new Map<string, WorkloadPodInfo[]>()
+  for (const pod of pods ?? []) {
+    if (!pod.revisionIdentity) continue
+    const list = podsByHash.get(pod.revisionIdentity) ?? []
+    list.push(pod)
+    podsByHash.set(pod.revisionIdentity, list)
+  }
+
+  const toggle = (number: number) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(number)) next.delete(number)
+      else next.add(number)
+      return next
+    })
+
+  return (
+    <div className="space-y-1">
+      {revisions.map((rev) => {
+        const revPods = rev.podHash ? podsByHash.get(rev.podHash) ?? [] : []
+        // One predicate for header, caret and panel: no pods, nothing to open.
+        const isOpen = expanded.has(rev.number) && revPods.length > 0
+        return (
+          <div key={rev.number} className="rounded border border-theme-border/50">
+            <button
+              type="button"
+              aria-expanded={isOpen}
+              aria-controls={disclosurePanelId(panelBase, rev.number)}
+              onClick={() => toggle(rev.number)}
+              className="flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-theme-hover"
+              disabled={revPods.length === 0}
+            >
+              {revPods.length > 0 ? (
+                <CollapseChevron open={isOpen} className="h-3.5 w-3.5" />
+              ) : (
+                <span className="w-3.5 shrink-0" />
+              )}
+              <span className="font-mono text-xs text-theme-text-primary">#{rev.number}</span>
+              <span className="min-w-0 flex-1 truncate font-mono text-xs text-theme-text-secondary">{imageTag(rev.image)}</span>
+              <div className="flex shrink-0 items-center gap-1">
+                {revisionRoleBadges(rev, true).map(({ label, tone, tip }) => (
+                  <span key={label} title={tip} className={clsx('badge', tone)}>
+                    {label}
+                  </span>
+                ))}
+              </div>
+              <span className="shrink-0 text-xs tabular-nums text-theme-text-tertiary">{rev.replicas ?? 0} replicas</span>
+              <span className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(rev.createdAt)}</span>
+            </button>
+            <Collapse open={isOpen} mountLazily id={disclosurePanelId(panelBase, rev.number)}>
+              <div className="space-y-0.5 border-t border-theme-border/50 px-2 py-1.5 pl-8">
+                {revPods.map((pod) => (
+                  <div key={pod.name} className="flex items-center gap-2 py-0.5 text-xs">
+                    <Box className="h-3 w-3 shrink-0 text-theme-text-tertiary" />
+                    {onNavigate ? (
+                      <button
+                        onClick={() => onNavigate({ kind: 'Pod', namespace, name: pod.name })}
+                        className="min-w-0 flex-1 truncate text-left font-mono text-theme-text-secondary hover:text-brand hover:underline"
+                      >
+                        {pod.name}
+                      </button>
+                    ) : (
+                      <span className="min-w-0 flex-1 truncate font-mono text-theme-text-secondary">{pod.name}</span>
+                    )}
+                    <span className={clsx('badge-sm', podToneClass(pod))}>{pod.phase || (pod.ready ? 'Ready' : 'Not Ready')}</span>
+                    {(pod.restartCount ?? 0) > 0 && (
+                      <span className="shrink-0 text-theme-text-tertiary">{pod.restartCount} restarts</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </Collapse>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/resources/resource-utils.ts

@@ -1,5 +1,6 @@
 // Utility functions for resource display in tables
 
+import { effectivePolicyTypeNames } from '../../utils/network-policy'
 import { formatCPUString, formatMemoryString, formatBytes } from '../../utils/format'
 import { pluralize } from '../../utils/pluralize'
 import type { WorkloadPodInfo } from '../../types/core'
@@ -1544,24 +1545,33 @@ export function getRolloutStatus(rollout: any): StatusBadge {
   return rolloutActivityBadge(getWorkloadRolloutActivity(rollout, 'rollout'))
 }
 
-export function getAnalysisRunStatus(run: any): StatusBadge {
-  const phase = run.status?.phase || 'Unknown'
+/** The AnalysisPhase vocabulary (AnalysisRun, Experiment, and a Rollout's
+ *  analysis slots all report it) mapped onto HealthLevel. Shared so a caller
+ *  holding only the phase string lands on the same tone as one holding the
+ *  whole run. */
+export function analysisPhaseLevel(phase?: string): HealthLevel {
   switch (phase) {
     case 'Successful':
-      return { text: 'Successful', color: healthColors.healthy, level: 'healthy' }
+      return 'healthy'
     case 'Running':
     case 'Pending':
-      return { text: phase, color: healthColors.degraded, level: 'degraded' }
+      return 'degraded'
     case 'Inconclusive':
-      return { text: 'Inconclusive', color: healthColors.alert, level: 'alert' }
+      return 'alert'
     case 'Failed':
     case 'Error':
-      return { text: phase, color: healthColors.unhealthy, level: 'unhealthy' }
+      return 'unhealthy'
     default:
-      return { text: phase, color: healthColors.unknown, level: 'unknown' }
+      return 'unknown'
   }
 }
 
+export function getAnalysisRunStatus(run: any): StatusBadge {
+  const phase = run.status?.phase || 'Unknown'
+  const level = analysisPhaseLevel(phase)
+  return { text: phase, color: healthColors[level], level }
+}
+
 // Counts only verdict-bearing metrics: Argo excludes dryRun results from the run's
 // phase, and Running/Pending have not passed yet.
 export function summarizeAnalysisMetrics(run: any): {
@@ -2068,8 +2078,7 @@ export function getWorkflowTemplateEntrypoint(wt: any): string {
 // ============================================================================
 
 export function getNetworkPolicyTypes(np: any): string {
-  const types = np.spec?.policyTypes || []
-  return types.join(', ') || '-'
+  return effectivePolicyTypeNames(np.spec).join(', ')
 }
 
 export function getNetworkPolicyRuleCount(np: any): { ingress: number; egress: number } {