@skyhook-io/k8s-ui 1.5.0 → 1.5.2

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

@@ -106,37 +106,51 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
 
       {/* Capacity */}
       <Section title="Capacity" icon={HardDrive}>
-        <div className="space-y-1">
-          <div className="grid grid-cols-4 gap-2 text-xs text-theme-text-tertiary font-medium mb-2">
-            <span>Resource</span>
-            <span>Capacity</span>
-            <span>Allocatable</span>
-            <span>In Use</span>
-          </div>
-          <div className="grid grid-cols-4 gap-2 text-sm">
-            <span className="text-theme-text-secondary">CPU</span>
-            <span className="text-theme-text-primary">{capacity.cpu || '-'}</span>
-            <span className="text-theme-text-primary">{allocatable.cpu || '-'}</span>
-            <span className="text-theme-text-primary font-medium">{metrics?.usage?.cpu || '-'}</span>
-          </div>
-          <div className="grid grid-cols-4 gap-2 text-sm">
-            <span className="text-theme-text-secondary">Memory</span>
-            <span className="text-theme-text-primary">{formatMemory(capacity.memory)}</span>
-            <span className="text-theme-text-primary">{formatMemory(allocatable.memory)}</span>
-            <span className="text-theme-text-primary font-medium">{metrics?.usage?.memory ? formatMemory(metrics.usage.memory) : '-'}</span>
-          </div>
-          <div className="grid grid-cols-4 gap-2 text-sm">
-            <span className="text-theme-text-secondary">Pods</span>
-            <span className="text-theme-text-primary">{capacity.pods || '-'}</span>
-            <span className="text-theme-text-primary">{allocatable.pods || '-'}</span>
-            <span className="text-theme-text-primary font-medium">{relationships?.pods?.length ?? '-'}</span>
-          </div>
-          <div className="grid grid-cols-4 gap-2 text-sm">
-            <span className="text-theme-text-secondary">Ephemeral Storage</span>
-            <span className="text-theme-text-primary">{formatStorage(capacity['ephemeral-storage'])}</span>
-            <span className="text-theme-text-primary">{formatStorage(allocatable['ephemeral-storage'])}</span>
-            <span className="text-theme-text-primary">-</span>
-          </div>
+        <div className="space-y-2">
+          {[
+            {
+              label: 'CPU',
+              capacity: capacity.cpu,
+              allocatable: allocatable.cpu,
+              inUse: metrics?.usage?.cpu,
+            },
+            {
+              label: 'Memory',
+              capacity: formatMemory(capacity.memory),
+              allocatable: formatMemory(allocatable.memory),
+              inUse: metrics?.usage?.memory ? formatMemory(metrics.usage.memory) : undefined,
+            },
+            {
+              label: 'Pods',
+              capacity: capacity.pods,
+              allocatable: allocatable.pods,
+              inUse: relationships?.pods?.length,
+            },
+            {
+              label: 'Ephemeral Storage',
+              capacity: formatStorage(capacity['ephemeral-storage']),
+              allocatable: formatStorage(allocatable['ephemeral-storage']),
+              inUse: undefined,
+            },
+          ].map((row) => (
+            <div key={row.label} className="card-inner">
+              <div className="text-xs font-medium text-theme-text-secondary mb-1">{row.label}</div>
+              <div className="space-y-0.5 text-xs">
+                <div className="flex items-baseline justify-between gap-2">
+                  <span className="text-theme-text-tertiary">Capacity</span>
+                  <span className="text-theme-text-primary tabular-nums">{row.capacity ?? '-'}</span>
+                </div>
+                <div className="flex items-baseline justify-between gap-2">
+                  <span className="text-theme-text-tertiary">Allocatable</span>
+                  <span className="text-theme-text-primary tabular-nums">{row.allocatable ?? '-'}</span>
+                </div>
+                <div className="flex items-baseline justify-between gap-2">
+                  <span className="text-theme-text-tertiary">In Use</span>
+                  <span className="text-theme-text-primary font-medium tabular-nums">{row.inUse ?? '-'}</span>
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
         {onViewPods && (
           <div className="mt-3 pt-3 border-t border-theme-border">

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

@@ -12,9 +12,16 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   const sync = app.status?.sync?.status
   const opPhase = app.status?.operationState?.phase
 
-  // Check for suspended (no automated sync policy)
+  // Check for suspended (no automated sync policy). Honor both the current
+  // "radarhq.io/suspended-prune" annotation and the legacy "skyhook.io/..."
+  // key still present on Applications suspended by older Radar builds.
+  // The annotation value stores the prior prune state as "true"/"false" for
+  // restore on resume — both strings are truthy in JS, which is intentional:
+  // the *presence* of the annotation is what signals suspended, not its value.
   const hasAutomatedSync = !!app.spec?.syncPolicy?.automated
-  if (health === 'Suspended' || (!hasAutomatedSync && app.metadata?.annotations?.['radar.skyhook.io/suspended-prune'])) {
+  const annotations = app.metadata?.annotations
+  const suspendedByRadar = annotations?.['radarhq.io/suspended-prune'] || annotations?.['skyhook.io/suspended-prune']
+  if (health === 'Suspended' || (!hasAutomatedSync && suspendedByRadar)) {
     return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
   }
 

package/src/components/ui/HealthRing.tsx

@@ -35,7 +35,7 @@ export function HealthRing({ segments, size = 48, strokeWidth = 5, label }: Heal
           className="text-theme-border"
         />
         {label && (
-          <text x="50" y="48" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-tertiary text-[22px] font-semibold font-mono">
+          <text x="50" y="48" textAnchor="middle" dominantBaseline="central" fill="currentColor" className="text-theme-text-tertiary text-[22px] font-semibold font-mono">
             0
           </text>
         )}
@@ -98,7 +98,7 @@ export function HealthRing({ segments, size = 48, strokeWidth = 5, label }: Heal
       </g>
       {/* Center label — nudged up slightly for visual centering in 270° arc */}
       {label && (
-        <text x="50" y="48" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-primary text-[22px] font-semibold font-mono">
+        <text x="50" y="48" textAnchor="middle" dominantBaseline="central" fill="currentColor" className="text-theme-text-primary text-[22px] font-semibold font-mono">
           {label}
         </text>
       )}

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers } from 'lucide-react'
+import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration } from '../resources/resource-utils'
 import { Tooltip } from './Tooltip'
@@ -182,6 +182,106 @@ export function Property({ label, value, copyable, onCopy, copied }: PropertyPro
 // COMMON SECTIONS
 // ============================================================================
 
+// Condition types where status=True means a problem and status=False means healthy.
+//
+// K8s has no canonical API metadata for polarity — SIG-API Machinery explicitly
+// declined to add it (https://gateway-api.sigs.k8s.io/geps/gep-1364/), so every
+// consumer has to maintain a list. This one is assembled from:
+//   - Core K8s (kubelet node conditions, Pod, workload controllers)
+//   - Node Problem Detector default configs (kubernetes/node-problem-detector)
+//   - GKE's NPD plugin set (observed in-cluster)
+//   - ArgoCD Application conditions (argoproj/argo-cd)
+//   - FluxCD meta conditions (fluxcd/pkg/apis/meta)
+//   - Conventional Operator-pattern conditions (Degraded, OutOfSync)
+// Patterns only cover two NPD naming families whose convention is
+// strict ("Deprecated*" for deprecation checks, "Frequent*" for restart
+// counters) — everything else is explicit to avoid guessing wrong.
+const NEGATIVE_POLARITY_TYPES = new Set([
+  // Core K8s — Node (kubelet)
+  'MemoryPressure',
+  'DiskPressure',
+  'PIDPressure',
+  'NetworkUnavailable',
+  // Core K8s — Pod
+  'DisruptionTarget',
+  // Core K8s — workloads
+  'ReplicaFailure',
+  // NPD — upstream default configs
+  'KernelDeadlock',
+  'CperHardwareErrorFatal',
+  'XfsShutdown',
+  'CorruptDockerOverlay2',
+  'ReadonlyFilesystem',
+  'ContainerRuntimeUnhealthy',
+  'KubeletUnhealthy',
+  // NPD — GKE extensions (observed)
+  'ReadOnlyRootFileSystem',
+  'ResourceExhausted',
+  'Swap',
+  // NPD — AKS extensions (learn.microsoft.com/azure/aks/node-problem-detector)
+  'FilesystemCorruptionProblem',
+  'KubeletProblem',
+  'ContainerRuntimeProblem',
+  'VMEventScheduled',
+  'GPUMissing',
+  'NVLinkStatusInactive',
+  'XIDErrors',
+  'IBLinkFlapping',
+  'GPUClockThrottling',
+  'UnhealthyNvidiaDevicePlugin',
+  // ArgoCD Application
+  'DeletionError',
+  'InvalidSpecError',
+  'ComparisonError',
+  'SyncError',
+  'UnknownError',
+  'SharedResourceWarning',
+  'RepeatedResourceWarning',
+  'OrphanedResourceWarning',
+  'ExcludedResourceWarning',
+  'OutOfSync',
+  // ArgoCD ApplicationSet
+  'ErrorOccurred',
+  // FluxCD (meta)
+  'Stalled',
+  // Gateway API (sigs.k8s.io/gateway-api v1)
+  'Conflicted',
+  'OverlappingTLSConfig',
+  'PartiallyInvalid',
+  'InsecureFrontendValidationMode',
+  // cert-manager (CertificateRequest)
+  'Denied',
+  'InvalidRequest',
+  // Karpenter NodeClaim
+  'Drifted',
+  // VPA
+  'ConfigUnsupported',
+  'LowConfidence',
+  // KEDA ScaledObject
+  'Fallback',
+  // Operator-pattern CRDs (widespread)
+  'Degraded',
+  'Failed',
+])
+
+const NEGATIVE_POLARITY_PATTERNS: RegExp[] = [
+  // NPD deprecation-check family (e.g. DeprecatedAuthsFieldInContainerdConfiguration)
+  /^Deprecated/,
+  // NPD restart-counter family (e.g. FrequentKubeletRestart, FrequentUnregisterNetDevice)
+  /^Frequent/,
+]
+
+function isInvertedPolarityCondition(type: string | undefined): boolean {
+  if (!type) return false
+  if (NEGATIVE_POLARITY_TYPES.has(type)) return true
+  return NEGATIVE_POLARITY_PATTERNS.some((re) => re.test(type))
+}
+
+function isConditionHealthy(cond: { type?: string; status?: string }): boolean {
+  const inverted = isInvertedPolarityCondition(cond.type)
+  return inverted ? cond.status === 'False' : cond.status === 'True'
+}
+
 export function ConditionsSection({ conditions }: { conditions?: any[] }) {
   if (!conditions || conditions.length === 0) return null
 
@@ -193,7 +293,7 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
     return (a.type || '').localeCompare(b.type || '')
   })
 
-  const failCount = sorted.filter((c: any) => c.status === 'False').length
+  const failCount = sorted.filter((c: any) => (c.status === 'True' || c.status === 'False') && !isConditionHealthy(c)).length
 
   return (
     <Section
@@ -206,8 +306,8 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
 
         <div className="space-y-0.5">
           {sorted.map((cond: any) => {
-            const isOk = cond.status === 'True'
-            const isUnknown = cond.status === 'Unknown'
+            const isUnknown = cond.status !== 'True' && cond.status !== 'False'
+            const isOk = !isUnknown && isConditionHealthy(cond)
             const isFail = !isOk && !isUnknown
             return (
               <div key={cond.type} className={clsx(
@@ -220,12 +320,14 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
                 </div>
                 {/* Timeline dot */}
                 <span className={clsx(
-                  'w-[13px] h-[13px] rounded-full flex items-center justify-center text-[8px] shrink-0 mt-[3px] z-10 ring-2 ring-theme-surface',
+                  'w-3 h-3 rounded-full flex items-center justify-center shrink-0 mt-1 z-10 ring-2 ring-theme-surface',
                   isOk ? 'bg-emerald-500/20 text-emerald-500 dark:bg-emerald-500/30'
                     : isUnknown ? 'bg-gray-400/20 text-gray-400 dark:bg-gray-400/30'
                     : 'bg-red-500/25 text-red-500 dark:bg-red-500/35'
                 )}>
-                  {isOk ? '✓' : isUnknown ? '?' : '✗'}
+                  {isOk ? <Check className="w-2 h-2" strokeWidth={4} />
+                    : isUnknown ? <Minus className="w-2 h-2" strokeWidth={4} />
+                    : <X className="w-2 h-2" strokeWidth={4} />}
                 </span>
                 {/* Content */}
                 <div className="min-w-0 flex-1 pl-2">

package/src/topology.css

@@ -0,0 +1,6 @@
+/* Top-level re-export of topology.css so both npm-exports resolution and
+ * source-alias resolution (in the radar monorepo's Vite config) land on
+ * the same stylesheet. Keeps external consumers' @import paths simple
+ * (@skyhook-io/k8s-ui/topology.css) without forcing them to know the
+ * components/ subdirectory layout. */
+@import "./components/topology/topology.css";

package/src/utils/log-format.ts

@@ -5,22 +5,87 @@
 
 import type { LogLevel } from '../components/logs/useLogBuffer'
 
+export type TimestampFormat =
+  | 'time-local'
+  | 'time-utc'
+  | 'iso-local'
+  | 'iso-utc'
+  | 'relative'
+  | 'epoch'
+
+export const TIMESTAMP_FORMAT_LABELS: Record<TimestampFormat, string> = {
+  'time-local': 'Time (local)',
+  'time-utc': 'Time (UTC)',
+  'iso-local': 'ISO (local)',
+  'iso-utc': 'ISO (UTC)',
+  'relative': 'Relative',
+  'epoch': 'Epoch',
+}
+
+function pad2(n: number): string {
+  return n < 10 ? '0' + n : String(n)
+}
+
+function formatIsoLocal(date: Date): string {
+  const offset = -date.getTimezoneOffset()
+  const sign = offset >= 0 ? '+' : '-'
+  const abs = Math.abs(offset)
+  return (
+    date.getFullYear() +
+    '-' + pad2(date.getMonth() + 1) +
+    '-' + pad2(date.getDate()) +
+    'T' + pad2(date.getHours()) +
+    ':' + pad2(date.getMinutes()) +
+    ':' + pad2(date.getSeconds()) +
+    sign + pad2(Math.floor(abs / 60)) + ':' + pad2(abs % 60)
+  )
+}
+
+function formatRelative(date: Date, now: number): string {
+  const diffSec = Math.round((now - date.getTime()) / 1000)
+  const abs = Math.abs(diffSec)
+  const suffix = diffSec >= 0 ? ' ago' : ' from now'
+  if (abs < 2) return 'just now'
+  if (abs < 60) return `${abs}s${suffix}`
+  if (abs < 3600) return `${Math.floor(abs / 60)}m${suffix}`
+  if (abs < 86400) return `${Math.floor(abs / 3600)}h${suffix}`
+  return `${Math.floor(abs / 86400)}d${suffix}`
+}
+
 /**
  * Format a K8s log timestamp for display.
- * Extracts and formats the time portion (HH:MM:SS).
+ * Supports multiple display formats and UTC/local time zones.
+ * `now` is accepted for testability; defaults to Date.now().
  */
-export function formatLogTimestamp(ts: string): string {
+export function formatLogTimestamp(
+  ts: string,
+  format: TimestampFormat = 'time-local',
+  now?: number,
+): string {
   const date = new Date(ts)
   if (isNaN(date.getTime())) {
-    // Fallback: extract HH:MM:SS from ISO timestamp
     return ts.slice(11, 19) || ts
   }
-  return date.toLocaleTimeString('en-US', {
-    hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
+  switch (format) {
+    case 'time-utc':
+      return date.toISOString().slice(11, 19)
+    case 'iso-local':
+      return formatIsoLocal(date)
+    case 'iso-utc':
+      return date.toISOString()
+    case 'relative':
+      return formatRelative(date, now ?? Date.now())
+    case 'epoch':
+      return String(Math.floor(date.getTime() / 1000))
+    case 'time-local':
+    default:
+      return date.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      })
+  }
 }
 
 /** Map a detected LogLevel to a Tailwind color class. */
@@ -294,9 +359,9 @@ export function parseLogRange(logRange: string): { tailLines?: number; sinceSeco
 // Syntax highlight colors shared between JSON and logfmt rendering
 export const SYNTAX_COLOR_KEY = '#7cacf8'
 export const SYNTAX_COLOR_STRING = '#73c991'
-const SYNTAX_COLOR_NUMBER = '#e5c07b'
-const SYNTAX_COLOR_BOOLEAN = '#c678dd'
-const SYNTAX_COLOR_NULL = '#808080'
+export const SYNTAX_COLOR_NUMBER = '#e5c07b'
+export const SYNTAX_COLOR_BOOLEAN = '#c678dd'
+export const SYNTAX_COLOR_NULL = '#808080'
 
 /**
  * Syntax-highlight a pretty-printed JSON string for HTML display.