@skyhook-io/k8s-ui 1.14.9 → 1.14.11

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -46,7 +46,8 @@ import { MiddleEllipsis } from '../ui/MiddleEllipsis'
 import { CollapseChevron } from '../ui/Collapse'
 import { Tooltip } from '../ui/Tooltip'
 import { ResourceRefBadge } from '../ui/drawer-components'
-import { buildResourceHierarchy, extractPinnedLanes, removePinnedLanes, isProblematicEvent, laneTrackEvents, isChildVisibleInWindow, collidingLaneKeys, laneCollisionKey, type ResourceLane as BaseResourceLane, type TimelineGrouping, type PinnedLaneRef } from '../../utils/resource-hierarchy'
+import { buildResourceHierarchy, extractPinnedLanes, removePinnedLanes, resolvePinnedLaneIds, isProblematicEvent, laneTrackEvents, isChildVisibleInWindow, collidingLaneKeys, laneCollisionKey, type ResourceLane as BaseResourceLane, type TimelineGrouping, type PinnedLaneRef } from '../../utils/resource-hierarchy'
+import { builtinGroupForKind } from '../../utils/api-resources'
 import { groupQualifiesLaneId } from '../../utils/navigation'
 import type { AppMembershipIndex } from '../../utils/applications'
 import { Layers } from 'lucide-react'
@@ -765,8 +766,8 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // deep-link to GitOps detail rather than the resource drawer — the lane is
   // already telling the user "this controller had changes/events"; the GitOps
   // tab is the right place to investigate further.
-  const handleLaneOpen = useCallback((kind: string, namespace: string, name: string, group?: string) => {
-    const gitOpsPath = gitOpsRouteForKind(kind, namespace, name)
+  const handleLaneOpen = useCallback((kind: string, namespace: string, name: string, group?: string, identityResolved?: boolean) => {
+    const gitOpsPath = gitOpsRouteForKind(kind, namespace, name, group, identityResolved)
     if (gitOpsPath && onNavigatePath) {
       onNavigatePath(gitOpsPath)
       return
@@ -1188,7 +1189,10 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Pin MOVES a row: pinned lanes (and pinned children inside groups) leave
   // the regular list entirely — the pinned section is their only home.
-  const pinnedIdSetForFilter = useMemo(() => new Set((pinnedLanes ?? []).map((p) => p.id)), [pinnedLanes])
+  const pinnedIdSetForFilter = useMemo(
+    () => resolvePinnedLaneIds(lanes, pinnedLanes ?? []),
+    [lanes, pinnedLanes],
+  )
   const pinnedAppKeys = useMemo(
     () => new Set((pinnedLanes ?? []).flatMap((p) => (p.type === 'appGroup' ? [p.appKey] : []))),
     [pinnedLanes],
@@ -1233,16 +1237,16 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     return n
   }, [pinnedLaneRows, visibleWindow])
 
-  const pinnedIdSet = useMemo(() => new Set((pinnedLanes ?? []).map((p) => p.id)), [pinnedLanes])
+  const pinnedIdSet = pinnedIdSetForFilter
   // A pin button for a lane, or null when the host wired no pin handler. A pinned
   // lane's button is filled and always visible (in the pinned section or its
   // original spot); an unpinned one reveals on row hover.
   const renderPinButton = useCallback((lane: ResourceLane): React.ReactNode => {
-    if (!onTogglePin) return null
+    if (!onTogglePin || lane.identityAmbiguous) return null
     const pinned = pinnedIdSet.has(lane.id)
     const ref: PinnedLaneRef = lane.isAppGroup && lane.appKey
       ? { type: 'appGroup', id: lane.id, appKey: lane.appKey, appName: lane.title ?? lane.name }
-      : { id: lane.id, kind: lane.kind, namespace: lane.namespace, name: lane.name }
+      : { id: lane.id, kind: lane.kind, group: lane.group, namespace: lane.namespace, name: lane.name }
     return (
       <PinButton
         pinned={pinned}
@@ -1659,10 +1663,10 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                      chip + namespace. Only the NAME navigates; the rest is inert. */
                   <div className="flex-1 min-w-0 flex flex-col gap-0.5">
                     <div className="flex items-center gap-1.5 min-w-0">
-                      <Tooltip content={lane.name} wrapperClassName="min-w-0 flex-1">
+                      <Tooltip content={lane.identityAmbiguous ? `${lane.name} · API group unknown` : lane.name} wrapperClassName="min-w-0 flex-1">
                         <span
-                          onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
-                          className={clsx('min-w-0 w-full text-sm text-theme-text-primary hover:text-accent-text hover:underline cursor-pointer', compact ? 'font-medium' : 'font-semibold font-mono')}
+                          onClick={lane.identityAmbiguous ? undefined : () => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group, lane.identityResolved)}
+                          className={clsx('min-w-0 w-full text-sm text-theme-text-primary', !lane.identityAmbiguous && 'hover:text-accent-text hover:underline cursor-pointer', compact ? 'font-medium' : 'font-semibold font-mono')}
                         >
                           <MiddleEllipsis text={lane.name} className="block" />
                         </span>
@@ -1715,7 +1719,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
             hasChildren={hasVisibleChildren}
             expanded={isExpanded}
             onToggle={hasVisibleChildren ? () => toggleLane(lane.id) : undefined}
-            onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
+            onClick={lane.identityAmbiguous ? undefined : () => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group, lane.identityResolved)}
             pinButton={renderPinButton(lane)}
             title={
               lane.nestedByContract ? `${lane.name} · linked by naming`
@@ -2116,6 +2120,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
           onClose={closeDrawer}
           onResourceClick={onResourceClick}
           allEvents={filteredEvents}
+          resourceLanes={lanes}
         />
       )}
     </div>
@@ -2251,7 +2256,7 @@ function GroupChip({ group }: { group: string }) {
   )
 }
 
-function ChildLaneLabel({ kind, group, showGroupChip, kindTitle, name, labelWidthClass = 'w-[360px]', isLast, onClick, pinButton, title, depth = 1, hasChildren, expanded, onToggle }: { kind: string; group?: string; showGroupChip?: boolean; kindTitle?: string; name: string; labelWidthClass?: string; isLast: boolean; onClick: () => void; pinButton?: React.ReactNode; title?: string; depth?: number; hasChildren?: boolean; expanded?: boolean; onToggle?: () => void }) {
+function ChildLaneLabel({ kind, group, showGroupChip, kindTitle, name, labelWidthClass = 'w-[360px]', isLast, onClick, pinButton, title, depth = 1, hasChildren, expanded, onToggle }: { kind: string; group?: string; showGroupChip?: boolean; kindTitle?: string; name: string; labelWidthClass?: string; isLast: boolean; onClick?: () => void; pinButton?: React.ReactNode; title?: string; depth?: number; hasChildren?: boolean; expanded?: boolean; onToggle?: () => void }) {
   // Tree rails: the INCOMING trunk sits under the parent's chevron (rail d-1), the
   // row's own chevron sits on its CHILDREN's rail (rail d). Deriving both from one
   // ROOT keeps every level's vertical aligned under the chevron above it.
@@ -2293,7 +2298,7 @@ function ChildLaneLabel({ kind, group, showGroupChip, kindTitle, name, labelWidt
       <Tooltip content={title ?? name} wrapperClassName="min-w-0 flex-1">
         <span
           onClick={onClick}
-          className="min-w-0 w-full text-[13px] font-mono text-theme-text-secondary hover:text-accent-text hover:underline cursor-pointer"
+          className={clsx("min-w-0 w-full text-[13px] font-mono text-theme-text-secondary", onClick && "hover:text-accent-text hover:underline cursor-pointer")}
         >
           <MiddleEllipsis text={name} className="block" />
         </span>
@@ -3003,6 +3008,7 @@ interface EventDetailPanelProps {
   // Every event in view — powers the ±15-min correlation feed ("what else
   // happened around this deploy?"). Absent → the correlation section is omitted.
   allEvents?: TimelineEvent[]
+  resourceLanes?: BaseResourceLane[]
 }
 
 // The ±15-min window a single event's rail pulls correlated neighbours from
@@ -3044,7 +3050,7 @@ function ClusterEventRow({ event, active, onClick }: { event: TimelineEvent; act
   )
 }
 
-export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onResourceClick, allEvents }: EventDetailPanelProps) {
+export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onResourceClick, allEvents, resourceLanes }: EventDetailPanelProps) {
   // ONE drawer anatomy: rail left, detail right — for one event or
   // fifty. The shape never changes with count, so muscle memory holds. A single
   // clicked dot renders as a rail of one plus its ±15-min correlated neighbors,
@@ -3094,16 +3100,30 @@ export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onRe
   // Index where correlated neighbors start (single-origin rails only) — a
   // divider separates "the dot you clicked" from "what happened around it".
   const neighborsFrom = events.length === 1 && railEvents.length > 1 ? 1 : -1
-  const openResource = () =>
+  const selectedLane = useMemo(() => {
+    const pending = [...(resourceLanes ?? [])];
+    while (pending.length > 0) {
+      const lane = pending.pop()!;
+      if (lane.events.some(event => event.id === selected.id)) return lane;
+      pending.push(...(lane.children ?? []));
+    }
+    return undefined;
+  }, [resourceLanes, selected.id]);
+  const group = selected.apiVersion
+    ? apiVersionToGroup(selected.apiVersion)
+    : selectedLane?.identityResolved && selectedLane.kind === selected.kind
+      ? selectedLane.group
+      : builtinGroupForKind(selected.kind);
+  const canOpenResource = !selectedLane?.identityAmbiguous && group !== undefined;
+  const openResource = () => {
+    if (!canOpenResource) return;
     onResourceClick?.({
-      kind: kindToPluralWithGroup(
-        selected.kind,
-        apiVersionToGroup(selected.apiVersion),
-      ),
+      kind: kindToPluralWithGroup(selected.kind, group ?? ''),
       namespace: selected.namespace,
       name: selected.name,
-      group: apiVersionToGroup(selected.apiVersion),
-    })
+      group,
+    });
+  };
 
   return (
     <div
@@ -3205,8 +3225,8 @@ export function EventDetailPanel({ events, selectedId, onSelectId, onClose, onRe
               {/* The ONE click target for the resource — the same badge used by
                   every Radar drawer, so it reads as "this navigates". */}
               <ResourceRefBadge
-                resourceRef={{ kind: selected.kind || 'Event', namespace: selected.namespace ?? '', name: selected.name }}
-                onClick={onResourceClick ? openResource : undefined}
+                resourceRef={{ kind: selected.kind || 'Event', namespace: selected.namespace ?? '', name: selected.name, group }}
+                onClick={onResourceClick && canOpenResource ? openResource : undefined}
               />
               {selected.namespace && <span className="text-xs text-theme-text-tertiary">in {selected.namespace}</span>}
             </dd>

package/src/components/topology/K8sResourceNode.tsx

@@ -130,10 +130,10 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
       action: "Check the webhook policy that denied the request.",
     },
     WebhookUnavailable: {
-      title: "Admission Webhook Unavailable",
+      title: "Admission Webhook Call Failed",
       description:
-        "Pod creation could not reach a required admission webhook backend.",
-      action: "Restore the webhook Service and its ready endpoints.",
+        "Pod creation was blocked because an admission webhook call failed.",
+      action: "Check the reported error, webhook connectivity, TLS, and backend health.",
     },
     Evicted: {
       title: "Pod Evicted",

package/src/components/ui/CodeViewer.tsx

@@ -301,6 +301,10 @@ export function CodeViewer({
   const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Escape') {
       e.preventDefault()
+      // A host that also listens for Escape to close something bigger around
+      // this viewer (a full-screen overlay, say) must not see this one — the
+      // user closing the search bar, not the whole surface it's embedded in.
+      e.stopPropagation()
       closeSearch()
     } else if (e.key === 'Enter') {
       e.preventDefault()

package/src/components/ui/Toast.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react'
 import { DURATION_TOAST_EXIT } from '../../utils/animation'
-import { Check, Terminal, X, AlertTriangle } from 'lucide-react'
+import { Check, Terminal, X, AlertTriangle, Info } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface Toast {
@@ -172,6 +172,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
 
   const isError = toast.type === 'error'
   const isSuccess = toast.type === 'success'
+  const isNotice = toast.type === 'info' || toast.type === 'warning'
 
   return (
     <div
@@ -191,10 +192,15 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
       <div className={clsx(
         'w-8 h-8 rounded-full flex items-center justify-center shrink-0',
         isError ? 'bg-red-500/20' :
-        isSuccess ? 'bg-emerald-500/20' : 'bg-blue-500/20'
+        isSuccess ? 'bg-emerald-500/20' :
+        toast.type === 'warning' ? 'bg-amber-500/20' : 'bg-blue-500/20'
       )}>
         {isError ? (
           <AlertTriangle className="w-4 h-4 text-red-400" />
+        ) : toast.type === 'warning' ? (
+          <AlertTriangle className="w-4 h-4 text-amber-400" />
+        ) : toast.type === 'info' ? (
+          <Info className="w-4 h-4 text-blue-400" />
         ) : toast.command ? (
           <Terminal className={clsx('w-4 h-4', isSuccess ? 'text-emerald-400' : 'text-blue-400')} />
         ) : (
@@ -208,7 +214,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
           <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-emerald-50' : 'text-theme-text-primary')}>
             {toast.message}
           </span>
-          {!isError && !toast.action && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-400' : 'text-green-400')} />}
+          {!isError && !isNotice && !toast.action && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-400' : 'text-green-400')} />}
         </div>
         {toast.detail && (
           toast.onDetailClick ? (

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

@@ -292,8 +292,10 @@ export function defaultConditionTone(cond: { type?: string; status?: string }):
 export function ConditionsSection({
   conditions,
   getConditionTone,
+  defaultExpanded,
 }: {
   conditions?: any[]
+  defaultExpanded?: boolean
   getConditionTone?: (condition: any) => ConditionTone | undefined
 }) {
   if (!conditions || conditions.length === 0) return null
@@ -312,7 +314,7 @@ export function ConditionsSection({
   return (
     <Section
       title={`Conditions (${conditions.length})${failCount > 0 ? ` · ${failCount} failing` : ''}`}
-      defaultExpanded={conditions.length <= 6}
+      defaultExpanded={defaultExpanded ?? conditions.length <= 6}
     >
       <div className="relative">
         {/* Timeline line — sits between timestamp column and dot */}

package/src/components/workload/PodList.tsx

@@ -0,0 +1,154 @@
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
+import { Collapse } from '../ui/Collapse'
+import type { WorkloadPodInfo } from '../../types'
+import type { NavigateToResource } from '../../utils/navigation'
+import { formatAge } from '../resources/resource-utils'
+
+export function PodRow({
+  name,
+  namespace,
+  ready,
+  healthLevel,
+  detail,
+  onNavigate,
+}: {
+  name: string
+  namespace: string
+  ready: boolean | null
+  healthLevel?: WorkloadPodInfo['healthLevel']
+  detail: string
+  onNavigate?: NavigateToResource
+}) {
+  const statusLabel = podStatusLabel(healthLevel, ready)
+  const statusClass = podStatusClass(healthLevel, ready)
+  const content = (
+    <>
+      <span className={clsx('h-2 w-2 shrink-0 rounded-full', podDotClass(healthLevel, ready))} />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-theme-text-primary">{name}</span>
+        <span className="block truncate text-xs text-theme-text-tertiary">{detail}</span>
+      </span>
+      <span className={clsx('badge-sm shrink-0', statusClass)}>
+        {statusLabel}
+      </span>
+    </>
+  )
+
+  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 (
+    <button
+      type="button"
+      onClick={() => onNavigate({ kind: 'pods', namespace, name })}
+      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 transition-colors hover:bg-theme-hover"
+    >
+      {content}
+    </button>
+  )
+}
+
+export function PodListFrame({
+  expanded,
+  hasOverflow,
+  overflow,
+  toggle,
+  children,
+}: {
+  expanded: boolean
+  hasOverflow: boolean
+  overflow?: ReactNode
+  toggle?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="space-y-2">
+        {children}
+      </div>
+      {hasOverflow && (
+        <Collapse open={expanded}>
+          {/* Long overflow lists scroll inside a capped box once open; the
+              cap comes off while closed so the collapse measures to zero. */}
+          <div className={clsx(expanded && 'max-h-[26rem] overflow-y-auto pr-1')}>
+            <div className="space-y-2">
+              {overflow}
+            </div>
+          </div>
+        </Collapse>
+      )}
+      {toggle}
+    </div>
+  )
+}
+
+export function PodListToggle({
+  expanded,
+  hiddenCount,
+  label,
+  onToggle,
+}: {
+  expanded: boolean
+  hiddenCount: number
+  label: string
+  onToggle: () => void
+}) {
+  if (!expanded && hiddenCount <= 0) return null
+
+  return (
+    <div className="pt-1">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        onClick={onToggle}
+        className="text-xs font-medium text-accent-text hover:underline"
+      >
+        {expanded ? `Collapse ${label}` : `Show ${hiddenCount} more ${label}`}
+      </button>
+    </div>
+  )
+}
+
+export function workloadPodDetail(pod: WorkloadPodInfo): string {
+  const parts: string[] = []
+  if (pod.phase) parts.push(pod.reason ? `${pod.phase} / ${pod.reason}` : pod.phase)
+  else if (pod.reason) parts.push(pod.reason)
+  parts.push(`${pod.containers.length} container${pod.containers.length === 1 ? '' : 's'}`)
+  if ((pod.restartCount ?? 0) > 0) parts.push(`${pod.restartCount} restart${pod.restartCount === 1 ? '' : 's'}`)
+  if (pod.lastTerminationReason && !['Unknown', 'Completed'].includes(pod.lastTerminationReason)) {
+    parts.push(`last ${pod.lastTerminationReason}`)
+  }
+  if (pod.createdAt) parts.push(`${formatAge(pod.createdAt)} old`)
+  return parts.join(' · ')
+}
+
+export function podStatusLabel(healthLevel: WorkloadPodInfo['healthLevel'] | undefined, ready: boolean | null): string {
+  if (healthLevel === 'unhealthy') return 'Unhealthy'
+  if (healthLevel === 'degraded') return 'Degraded'
+  if (healthLevel === 'neutral') return ready ? 'Ready' : 'Neutral'
+  if (healthLevel === 'unknown') return 'Unknown'
+  return ready === null ? 'Unknown' : ready ? 'Ready' : 'Not ready'
+}
+
+export function podStatusClass(healthLevel: WorkloadPodInfo['healthLevel'] | undefined, ready: boolean | null): string {
+  if (healthLevel === 'unhealthy') return 'status-unhealthy'
+  if (healthLevel === 'degraded') return 'status-degraded'
+  if (healthLevel === 'neutral') return 'status-neutral'
+  if (healthLevel === 'unknown' || ready === null) return 'status-unknown'
+  return ready ? 'status-healthy' : 'status-degraded'
+}
+
+export function podDotClass(healthLevel: WorkloadPodInfo['healthLevel'] | undefined, ready: boolean | null): string {
+  if (healthLevel === 'unhealthy') return 'bg-red-500'
+  if (healthLevel === 'degraded') return 'bg-amber-500'
+  if (healthLevel === 'neutral') return 'bg-skyhook-500'
+  if (healthLevel === 'unknown' || ready === null) return 'bg-theme-text-tertiary'
+  return ready ? 'bg-emerald-500' : 'bg-amber-500'
+}
+