@skyhook-io/k8s-ui 1.5.10 → 1.5.11

package/src/components/resources/renderers/PodRenderer.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatResources, formatDuration, getPodProblems, SEVERITY_DOT_COLOR } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
@@ -333,7 +333,28 @@ export function PodRenderer({
       {/* Status section */}
       <Section title="Status" icon={Server}>
         <PropertyList>
-          <Property label="Phase" value={data.status?.phase} />
+          {(() => {
+            const phaseDisplay = getPodPhaseDisplay(data)
+            const node = (
+              <span className={clsx(healthColors[phaseDisplay.level])}>
+                {phaseDisplay.text}
+              </span>
+            )
+            return (
+              <Property
+                label="Phase"
+                value={
+                  phaseDisplay.hint ? (
+                    <Tooltip content={phaseDisplay.hint} position="right">
+                      {node}
+                    </Tooltip>
+                  ) : (
+                    node
+                  )
+                }
+              />
+            )
+          })()}
           <Property label="Node" value={
             data.spec?.nodeName ? <ResourceLink name={data.spec.nodeName} kind="nodes" onNavigate={onNavigate} /> : undefined
           } copyable onCopy={onCopy} copied={copied} />

package/src/components/resources/renderers/RoleBindingRenderer.tsx

@@ -1,6 +1,7 @@
 import { Shield, Users } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink, AlertBanner } from '../../ui/drawer-components'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface RoleBindingRendererProps {
   data: any
@@ -16,7 +17,7 @@ function getSubjectKindBadgeClass(kind: string): string {
     case 'Group':
       return 'bg-purple-500/20 text-purple-400'
     default:
-      return 'bg-gray-500/20 text-gray-400'
+      return BADGE_INACTIVE
   }
 }
 
@@ -27,7 +28,7 @@ function getRoleRefKindBadgeClass(kind: string): string {
     case 'ClusterRole':
       return 'bg-purple-500/20 text-purple-400'
     default:
-      return 'bg-gray-500/20 text-gray-400'
+      return BADGE_INACTIVE
   }
 }
 

package/src/components/resources/renderers/RolloutRenderer.tsx

@@ -2,6 +2,7 @@ import { Server, GitBranch, AlertTriangle, Network } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface RolloutRendererProps {
   data: any
@@ -292,7 +293,7 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
                       'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
                       isCompleted && 'bg-green-500/20 text-green-400',
                       isCurrent && 'bg-blue-500/20 text-blue-400',
-                      isPending && 'bg-gray-500/20 text-gray-400'
+                      isPending && BADGE_INACTIVE
                     )}
                   >
                     {isCompleted ? '\u2713' : isCurrent ? '\u25CF' : '\u25CB'}

package/src/components/resources/renderers/SecretRenderer.tsx

@@ -34,7 +34,11 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
   function toggleReveal(key: string) {
     setRevealed(prev => {
       const next = new Set(prev)
-      next.has(key) ? next.delete(key) : next.add(key)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
       return next
     })
   }
@@ -153,6 +157,16 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
         </>
       )}
 
+      {dataKeys.length > 0 && (
+        <div className="flex items-center gap-2 p-3 bg-amber-500/10 border border-amber-500/30 rounded text-amber-400 text-sm">
+          <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+          <span>
+            Secret values are sensitive. Reveal carefully — anyone who can see your
+            screen will see the plaintext.
+          </span>
+        </div>
+      )}
+
       <Section title="Data" defaultExpanded>
         <div className="space-y-2">
           {dataKeys.map((key) => {
@@ -250,11 +264,6 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
         </div>
       </Section>
 
-      <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
-        <AlertTriangle className="w-4 h-4" />
-        Secret values are sensitive. Be careful when revealing.
-      </div>
-
       {editingKey && (
         <ConfirmDialog
           open={showSaveConfirm}

package/src/components/resources/renderers/aws-capi-cells.tsx

@@ -2,6 +2,7 @@
 
 import { clsx } from 'clsx'
 import { Tooltip } from '../../ui/Tooltip'
+import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
 import {
   getAWSMCPStatus, getAWSMCPEKSClusterName, getAWSMCPRegion, getAWSMCPVersion,
   getAWSMMPStatus, getAWSMMPInstanceType, getAWSMMPReplicas, getAWSMMPCapacityType,
@@ -57,10 +58,7 @@ export function AWSManagedMachinePoolCell({ resource, column }: { resource: any;
     case 'capacityType': {
       const ct = getAWSMMPCapacityType(resource)
       return (
-        <span className={clsx('badge badge-sm', ct === 'spot'
-          ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{ct === 'onDemand' ? 'On-Demand' : ct}</span>
+        <span className={clsx('badge badge-sm', ct === 'spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.onDemand)}>{ct === 'onDemand' ? 'On-Demand' : ct}</span>
       )
     }
     default:

package/src/components/resources/renderers/azure-capi-cells.tsx

@@ -2,6 +2,7 @@
 
 import { Tooltip } from '../../ui/Tooltip'
 import { clsx } from 'clsx'
+import { CAPACITY_TYPE_BADGE, NODEPOOL_MODE_BADGE } from '../../../utils/badge-colors'
 import {
   getAzureMCPStatus, getAzureMCPLocation, getAzureMCPVersion, getAzureMCPResourceGroup,
   getAzureMMPStatus, getAzureMMPSKU, getAzureMMPMode, getAzureMMPReplicas, getAzureMMPScaleSetPriority,
@@ -40,20 +41,14 @@ export function AzureManagedMachinePoolCell({ resource, column }: { resource: an
     case 'mode': {
       const mode = getAzureMMPMode(resource)
       return (
-        <span className={clsx('badge badge-sm', mode === 'System'
-          ? 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{mode}</span>
+        <span className={clsx('badge badge-sm', NODEPOOL_MODE_BADGE[mode] || NODEPOOL_MODE_BADGE.User)}>{mode}</span>
       )
     }
     case 'replicas': return <TextCell value={getAzureMMPReplicas(resource)} />
     case 'priority': {
       const p = getAzureMMPScaleSetPriority(resource)
       return (
-        <span className={clsx('badge badge-sm', p === 'Spot'
-          ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{p}</span>
+        <span className={clsx('badge badge-sm', p === 'Spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.regular)}>{p}</span>
       )
     }
     default: return <span className="text-sm text-theme-text-tertiary">-</span>

package/src/components/resources/renderers/istio-cells.tsx

@@ -1,6 +1,7 @@
 // Istio cell components for ResourcesView table
 
 import { clsx } from 'clsx'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 import {
   getVirtualServiceStatus,
   getVirtualServiceHosts,
@@ -164,7 +165,7 @@ export function PeerAuthenticationCell({ resource, column }: { resource: any; co
       return (
         <span className={clsx(
           'badge',
-          modeColors[mode] || 'bg-gray-500/20 text-gray-400'
+          modeColors[mode] || BADGE_INACTIVE
         )}>
           {mode}
         </span>
@@ -194,7 +195,7 @@ export function AuthorizationPolicyCell({ resource, column }: { resource: any; c
       return (
         <span className={clsx(
           'badge',
-          actionColors[action] || 'bg-gray-500/20 text-gray-400'
+          actionColors[action] || BADGE_INACTIVE
         )}>
           {action}
         </span>

package/src/components/resources/renderers/karpenter-cells.tsx

@@ -2,8 +2,8 @@
 
 import { clsx } from 'clsx'
 import { Tooltip } from '../../ui/Tooltip'
+import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
 import {
-  CAPACITY_TYPE_BADGE,
   getNodePoolStatus,
   getNodePoolNodeClassRef,
   getNodePoolLimits,

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

@@ -3,12 +3,6 @@
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
 
-// Shared capacity type badge colors for NodeClaim renderer and table cells
-export const CAPACITY_TYPE_BADGE: Record<string, string> = {
-  spot: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
-  'on-demand': 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
-}
-
 // ============================================================================
 // KARPENTER NODEPOOL UTILITIES
 // ============================================================================

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

@@ -130,6 +130,114 @@ export function getPodStatus(pod: any): StatusBadge {
   }
 }
 
+/**
+ * Pod phase enriched with readiness/restart/crash signals so the Phase
+ * row doesn't show a bare "Running" on a 0/1 or crash-looping pod.
+ */
+export interface PodPhaseDisplay {
+  /** Verbatim `pod.status.phase` (or "Unknown") — never lost. */
+  phase: string
+  /** Phase + derived qualifier, e.g. "Running — Not Ready (0/1)". */
+  text: string
+  /** Severity tier for tinting / icon choice, mirrors getPodStatus. */
+  level: HealthLevel
+  /** Optional one-line explanation surfaced as a tooltip / muted suffix. */
+  hint?: string
+}
+
+const RESTART_CYCLING_THRESHOLD = 5
+
+export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
+  const phase: string = pod?.status?.phase || 'Unknown'
+  const containerStatuses: any[] = pod?.status?.containerStatuses || []
+  const totalContainers = containerStatuses.length
+  const readyContainers = containerStatuses.filter((c) => c?.ready).length
+  const restartTotal = containerStatuses.reduce(
+    (sum, c) => sum + (c?.restartCount || 0),
+    0
+  )
+
+  if (pod?.metadata?.deletionTimestamp) {
+    return {
+      phase,
+      text: `${phase} — Terminating`,
+      level: 'degraded',
+      hint: 'Pod has a deletionTimestamp set; awaiting graceful termination.',
+    }
+  }
+
+  // Container-state failures take precedence over phase: a CrashLoopBackOff
+  // pod can still report phase: Running. Skip for Succeeded — a Job pod whose
+  // sidecar was OOMKilled before the main container completed should not be
+  // shown as unhealthy after the pod has reached terminal success.
+  if (phase !== 'Succeeded') {
+    for (const cs of containerStatuses) {
+      const waitingReason = cs?.state?.waiting?.reason
+      if (
+        waitingReason === 'CrashLoopBackOff' ||
+        waitingReason === 'ImagePullBackOff' ||
+        waitingReason === 'ErrImagePull' ||
+        waitingReason === 'CreateContainerConfigError'
+      ) {
+        return {
+          phase,
+          text: `${phase} — ${waitingReason}`,
+          level: 'unhealthy',
+          hint: `Container "${cs.name}" is stuck in ${waitingReason}.`,
+        }
+      }
+      if (cs?.state?.terminated?.reason === 'OOMKilled') {
+        return {
+          phase,
+          text: `${phase} — OOMKilled`,
+          level: 'unhealthy',
+          hint: `Container "${cs.name}" was OOMKilled.`,
+        }
+      }
+    }
+  }
+
+  switch (phase) {
+    case 'Running': {
+      const notReady = totalContainers > 0 && readyContainers < totalContainers
+      const cycling = restartTotal > RESTART_CYCLING_THRESHOLD
+      if (notReady && cycling) {
+        return {
+          phase,
+          text: `Running — Not Ready (${readyContainers}/${totalContainers}), ${restartTotal} restarts`,
+          level: 'unhealthy',
+          hint: 'Containers report not-ready and have restarted many times — likely crash-looping.',
+        }
+      }
+      if (notReady) {
+        return {
+          phase,
+          text: `Running — Not Ready (${readyContainers}/${totalContainers})`,
+          level: 'degraded',
+          hint: 'Pod is in the Running phase but at least one container is not ready (probes failing or still starting).',
+        }
+      }
+      if (cycling) {
+        return {
+          phase,
+          text: `Running — Restarting (${restartTotal} restarts)`,
+          level: 'degraded',
+          hint: 'Containers are ready right now but have restarted many times — investigate stability.',
+        }
+      }
+      return { phase, text: 'Running', level: 'healthy' }
+    }
+    case 'Succeeded':
+      return { phase, text: 'Completed', level: 'neutral' }
+    case 'Pending':
+      return { phase, text: 'Pending', level: 'degraded' }
+    case 'Failed':
+      return { phase, text: 'Failed', level: 'unhealthy' }
+    default:
+      return { phase, text: phase, level: 'unknown' }
+  }
+}
+
 export function getPodProblems(pod: any): PodProblem[] {
   const problems: PodProblem[] = []
   const containerStatuses = pod.status?.containerStatuses || []

package/src/components/timeline/shared.tsx

@@ -244,21 +244,20 @@ export function EventMarker({ event, x, selected, onClick, dimmed, small }: Even
       return 'bg-theme-hover/30 border-2 border-dashed border-theme-border-light'
     }
 
-    const opacity = dimmed ? '/50' : ''
     if (isProblematic) {
-      return `bg-amber-500${opacity}`
+      return dimmed ? 'bg-amber-500/50' : 'bg-amber-500'
     }
     if (isChange) {
       switch (event.eventType) {
         case 'add':
-          return `bg-green-500${opacity}`
+          return dimmed ? 'bg-green-500/50' : 'bg-green-500'
         case 'delete':
-          return `bg-red-500${opacity}`
+          return dimmed ? 'bg-red-500/50' : 'bg-red-500'
         case 'update':
-          return `bg-blue-500${opacity}`
+          return dimmed ? 'bg-blue-500/50' : 'bg-blue-500'
       }
     }
-    return `bg-theme-text-tertiary${opacity}`
+    return dimmed ? 'bg-theme-text-tertiary/50' : 'bg-theme-text-tertiary'
   }
 
   const getOperationLabel = () => {

package/src/components/ui/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
+import { computeTooltipPosition } from './tooltip-position'
 
 // Module-level singleton coordinator: only one Tooltip can be visible
 // at a time across the whole app. Without this, two Tooltip instances
@@ -45,53 +46,43 @@ export function Tooltip({
   wrapperStyle,
 }: TooltipProps) {
   const [isVisible, setIsVisible] = useState(false)
-  const [coords, setCoords] = useState({ top: 0, left: 0 })
+  // null until measured. Portal renders with visibility:hidden until coords
+  // resolve so the user never sees a frame painted at default (0,0).
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(
+    null
+  )
   const triggerRef = useRef<HTMLSpanElement>(null)
   const tooltipRef = useRef<HTMLSpanElement>(null)
   const timeoutRef = useRef<number | null>(null)
+  const rafRef = useRef<number | null>(null)
 
   const updatePosition = useCallback(() => {
     if (!triggerRef.current) return
 
-    const rect = triggerRef.current.getBoundingClientRect()
+    const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipRect = tooltipRef.current?.getBoundingClientRect()
-    const tooltipWidth = tooltipRect?.width || 0
-    const tooltipHeight = tooltipRect?.height || 0
-
-    let top = 0
-    let left = 0
-
-    switch (position) {
-      case 'top':
-        top = rect.top - tooltipHeight - 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'bottom':
-        top = rect.bottom + 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'left':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.left - tooltipWidth - 6
-        break
-      case 'right':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.right + 6
-        break
-    }
 
-    // Keep tooltip within viewport
-    const padding = 8
-    if (left < padding) left = padding
-    if (left + tooltipWidth > window.innerWidth - padding) {
-      left = window.innerWidth - tooltipWidth - padding
-    }
-    if (top < padding) top = rect.bottom + 6 // flip to bottom
-    if (top + tooltipHeight > window.innerHeight - padding) {
-      top = rect.top - tooltipHeight - 6 // flip to top
-    }
+    const next = computeTooltipPosition({
+      triggerRect: {
+        top: triggerRect.top,
+        left: triggerRect.left,
+        width: triggerRect.width,
+        height: triggerRect.height,
+      },
+      tooltipSize: {
+        width: tooltipRect?.width ?? 0,
+        height: tooltipRect?.height ?? 0,
+      },
+      position,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+    })
 
-    setCoords({ top, left })
+    if (next) {
+      setCoords(next)
+    }
   }, [position])
 
   // Stable hide function for the singleton registry — useRef so the
@@ -104,6 +95,7 @@ export function Tooltip({
       timeoutRef.current = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   const showTooltip = () => {
@@ -128,12 +120,22 @@ export function Tooltip({
       activeHide = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   useEffect(() => {
     if (isVisible) {
-      // Small delay to let the tooltip render before measuring
-      requestAnimationFrame(updatePosition)
+      // Second rAF re-centers using the measured tooltip size; without
+      // it the first frame centers against size 0 and visibly jumps.
+      const id1 = requestAnimationFrame(() => {
+        updatePosition()
+        const id2 = requestAnimationFrame(updatePosition)
+        rafRef.current = id2
+      })
+      rafRef.current = id1
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      }
     }
   }, [isVisible, updatePosition])
 
@@ -142,6 +144,9 @@ export function Tooltip({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current)
+      }
       // Clear from singleton registry on unmount — otherwise a Tooltip
       // that unmounts while visible (e.g. row removed during hover)
       // would leave a stale entry in activeHide pointing at a torn-down
@@ -165,9 +170,27 @@ export function Tooltip({
         timeoutRef.current = null
       }
       setIsVisible(false)
+      setCoords(null)
     }
   }, [disabled])
 
+  // Mouseleave doesn't fire when the trigger stays mounted across a
+  // navigation and the cursor is still over it; popstate + Escape give
+  // a deterministic dismissal path for those cases.
+  useEffect(() => {
+    if (!isVisible) return
+    const onPop = () => hideRef.current()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideRef.current()
+    }
+    window.addEventListener('popstate', onPop)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('popstate', onPop)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [isVisible])
+
   if (disabled || !content) {
     return <>{children}</>
   }
@@ -182,6 +205,10 @@ export function Tooltip({
         onMouseLeave={hideTooltip}
         onFocus={showTooltip}
         onBlur={hideTooltip}
+        // pointerdown fires before click, so the tooltip is gone before
+        // the trigger's action runs. Required when the child handles
+        // navigation/state changes that don't unmount the trigger.
+        onPointerDown={hideTooltip}
       >
         {children}
       </span>
@@ -194,8 +221,14 @@ export function Tooltip({
               'whitespace-nowrap pointer-events-none',
               className
             )}
-            style={{ top: coords.top, left: coords.left }}
+            style={{
+              top: coords?.top ?? 0,
+              left: coords?.left ?? 0,
+              // Hide until first measurement so we never paint at (0,0).
+              visibility: coords ? 'visible' : 'hidden',
+            }}
             role="tooltip"
+            aria-hidden={coords ? undefined : true}
           >
             {content}
           </span>,