@skyhook-io/k8s-ui 1.13.3 → 1.14.0

package/src/components/timeline/TimelineList.tsx

@@ -30,7 +30,7 @@ import { isChangeEvent, isHistoricalEvent } from '../../types'
 import { getHealthBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
+import { kindToPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
 
 /** Format resource age (e.g., "3d", "5h", "10m") */
@@ -604,7 +604,15 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(item.kind), namespace: item.namespace, name: item.name, group: apiVersionToGroup(item.apiVersion) })
+                  onResourceClick?.({
+                    kind: kindToPluralWithGroup(
+                      item.kind,
+                      apiVersionToGroup(item.apiVersion),
+                    ),
+                    namespace: item.namespace,
+                    name: item.name,
+                    group: apiVersionToGroup(item.apiVersion),
+                  })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >
@@ -777,7 +785,15 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(first.kind), namespace: first.namespace, name: first.name, group: apiVersionToGroup(first.apiVersion) })
+                  onResourceClick?.({
+                    kind: kindToPluralWithGroup(
+                      first.kind,
+                      apiVersionToGroup(first.apiVersion),
+                    ),
+                    namespace: first.namespace,
+                    name: first.name,
+                    group: apiVersionToGroup(first.apiVersion),
+                  })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -26,7 +26,7 @@ import {
 } from 'lucide-react'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { PaneLoader } from '../ui/PaneLoader'
 import { TimelineToolbar } from './TimelineToolbar'
 import { sortTimelineLanes, TIMELINE_SORT_DEFAULT, type TimelineSort } from './timeline-lane-sort'
@@ -770,7 +770,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       onNavigatePath(gitOpsPath)
       return
     }
-    onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
+    onResourceClick?.({ kind: kindToPluralWithGroup(kind, group ?? ''), namespace, name, group })
   }, [onNavigatePath, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
   const [zoom, setZoom] = useState(1)
@@ -3097,7 +3097,15 @@ export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onRe
   // divider separates "the dot you clicked" from "what happened around it".
   const neighborsFrom = events.length === 1 && railEvents.length > 1 ? 1 : -1
   const openResource = () =>
-    onResourceClick?.({ kind: kindToPlural(selected.kind), namespace: selected.namespace, name: selected.name, group: apiVersionToGroup(selected.apiVersion) })
+    onResourceClick?.({
+      kind: kindToPluralWithGroup(
+        selected.kind,
+        apiVersionToGroup(selected.apiVersion),
+      ),
+      namespace: selected.namespace,
+      name: selected.name,
+      group: apiVersionToGroup(selected.apiVersion),
+    })
 
   return (
     <div

package/src/components/trace/ReachabilityView.tsx

@@ -535,7 +535,7 @@ export function problemRows(
     // entry can carry several findings, and one origin several failed routes.
     // `k` is what `seen` just proved unique, so pairing them is what makes the
     // React key safe rather than each caller having to get it right.
-    rows.push({ ...r, key: `${r.key}${k}` })
+    rows.push({ ...r, key: `${r.key}\x00${k}` })
   }
   const refNode = (r?: ResourceRef) => (r ? `n:${r.kind}/${r.namespace ?? ''}/${r.name || 'pods'}` : '')
 

package/src/components/ui/SelectMenu.tsx

@@ -12,15 +12,21 @@ export function SelectMenu({
   options,
   onChange,
   ariaLabel,
+  ariaDescribedBy,
   className,
   searchPlaceholder,
+  disabled = false,
+  id,
 }: {
   value: string
   options: SelectMenuOption[]
   onChange: (value: string) => void
   ariaLabel: string
+  ariaDescribedBy?: string
   className?: string
   searchPlaceholder?: string
+  disabled?: boolean
+  id?: string
 }) {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
@@ -109,8 +115,10 @@ export function SelectMenu({
     >
       <button
         ref={triggerRef}
+        id={id}
         type="button"
         aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
         aria-haspopup="listbox"
         aria-expanded={open}
         aria-controls={open ? listboxId : undefined}
@@ -125,7 +133,8 @@ export function SelectMenu({
           }
           setOpen(!open)
         }}
-        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
+        disabled={disabled}
+        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-theme-elevated"
       >
         <span className="truncate">{selected?.label}</span>
         <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />

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

@@ -733,6 +733,18 @@ export function formatKindName(kind: string): string {
     resourceclaims: 'ResourceClaim', resourceclaimtemplates: 'ResourceClaimTemplate',
     deviceclasses: 'DeviceClass', resourceslices: 'ResourceSlice',
     clusterpolicies: 'ClusterPolicy', nvidiadrivers: 'NVIDIADriver',
+    clusterqueues: 'ClusterQueue', localqueues: 'LocalQueue', resourceflavors: 'ResourceFlavor',
+    admissionchecks: 'AdmissionCheck', provisioningrequests: 'ProvisioningRequest',
+    rayclusters: 'RayCluster', rayjobs: 'RayJob', rayservices: 'RayService', raycronjobs: 'RayCronJob',
+    leaderworkersets: 'LeaderWorkerSet', jobsets: 'JobSet',
+    inferenceservices: 'InferenceService', servingruntimes: 'ServingRuntime',
+    clusterservingruntimes: 'ClusterServingRuntime', inferencegraphs: 'InferenceGraph',
+    trainedmodels: 'TrainedModel', llminferenceservices: 'LLMInferenceService',
+    inferencepools: 'InferencePool', inferenceobjectives: 'InferenceObjective',
+    jobflows: 'JobFlow', jobtemplates: 'JobTemplate', ragengines: 'RAGEngine',
+    nimservices: 'NIMService', nimcaches: 'NIMCache', nimpipelines: 'NIMPipeline',
+    deviceconfigs: 'DeviceConfig',
+    pytorchjobs: 'PyTorchJob', tfjobs: 'TFJob', mpijobs: 'MPIJob', trainjobs: 'TrainJob',
   }
   if (names[k]) return names[k]
 

package/src/components/workload/WorkloadRolloutNotice.tsx

@@ -0,0 +1,60 @@
+import { AlertTriangle, Check, Clock3, Loader2, Pause } from 'lucide-react'
+import { Badge, type BadgeSeverity } from '../ui/Badge'
+import type { WorkloadRolloutActivity } from '../../utils/workload-rollout'
+
+export function WorkloadRolloutNotice({
+  activity,
+  recentImageSave = false,
+  className = '',
+}: {
+  activity: WorkloadRolloutActivity
+  recentImageSave?: boolean
+  className?: string
+}) {
+  if (activity.phase === 'idle' && !recentImageSave) return null
+  const shown = activity.phase === 'idle' && recentImageSave
+    ? { ...activity, phase: 'applying' as const, active: true, label: 'Waiting for controller', detail: 'The template change was accepted; waiting for live rollout status' }
+    : activity
+  const severity: BadgeSeverity = shown.phase === 'stalled'
+    ? 'error'
+    : shown.phase === 'paused' || shown.manual
+      ? 'warning'
+      : 'info'
+  const Icon = shown.phase === 'stalled'
+    ? AlertTriangle
+    : shown.phase === 'paused'
+      ? Pause
+      : shown.phase === 'waiting'
+        ? Clock3
+        : Loader2
+  const warning = shown.phase === 'paused' || shown.manual
+  const containerTone = shown.phase === 'stalled'
+    ? 'border-semantic-error/30 bg-semantic-error/5'
+    : warning
+      ? 'border-semantic-warning/30 bg-semantic-warning/5'
+      : 'border-theme-border bg-accent-muted'
+  const iconTone = shown.phase === 'stalled'
+    ? 'text-semantic-error'
+    : warning
+      ? 'text-semantic-warning'
+      : 'text-accent-text'
+
+  return (
+    <div className={`rounded-lg border px-3 py-2.5 shadow-theme-sm ${containerTone} ${className}`} role={shown.phase === 'stalled' ? 'alert' : 'status'}>
+      <div className="flex min-w-0 items-start gap-2.5">
+        <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${iconTone} ${shown.active && (shown.phase === 'applying' || shown.phase === 'progressing') ? 'animate-spin' : ''}`} />
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+            {recentImageSave && (
+              <span className="inline-flex items-center gap-1 text-xs font-medium text-theme-text-secondary">
+                <Check className="h-3.5 w-3.5" /> Image saved <span aria-hidden>·</span>
+              </span>
+            )}
+            <Badge severity={severity}>{shown.label}</Badge>
+          </div>
+          {shown.detail && <div className="mt-1 text-xs leading-5 text-theme-text-secondary">{shown.detail}</div>}
+        </div>
+      </div>
+    </div>
+  )
+}