@skyhook-io/k8s-ui 1.5.0 → 1.5.1

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/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";