fix(ui): A healthy node condition status should be displayed in green

ui/src/lib/utils.ts

@@ -1,9 +1,11 @@
 import { clsx, type ClassValue } from 'clsx'
 import { format, formatDistance } from 'date-fns'
 import { TFunction } from 'i18next'
+import { NodeCondition } from 'kubernetes-types/core/v1'
 import { twMerge } from 'tailwind-merge'
 
 import { PodMetrics } from '@/types/api'
+import { NodeConditionType } from '@/types/k8s'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -216,3 +218,34 @@ export function translateError(error: Error | unknown, t: TFunction): string {
 
   return error.message
 }
+
+/**
+ * Enrich Node Conditions with computed health status
+ *
+ * Adds an `health` field with normalized semantics:
+ * - `True` = healthy state
+ * - `False` = unhealthy state
+ */
+export function enrichNodeConditionsWithHealth(data: NodeCondition[]) {
+  return data.map((item) => {
+    const shouldReverseStatus = (
+      [
+        'DiskPressure',
+        'MemoryPressure',
+        'PIDPressure',
+        'NetworkUnavailable',
+      ] as NodeConditionType[]
+    ).includes(item.type as NodeConditionType)
+
+    return {
+      ...item,
+      health: shouldReverseStatus
+        ? item.status === 'True'
+          ? 'False'
+          : item.status === 'False'
+            ? 'True'
+            : item.status
+        : item.status,
+    }
+  })
+}

ui/src/pages/node-detail.tsx

@@ -25,6 +25,7 @@ import {
   useResources,
 } from '@/lib/api'
 import {
+  enrichNodeConditionsWithHealth,
   formatCPU,
   formatDate,
   formatMemory,
@@ -810,24 +811,26 @@ export function NodeDetail(props: { name: string }) {
                       </CardHeader>
                       <CardContent>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                          {data.status.conditions.map((condition, index) => (
+                          {enrichNodeConditionsWithHealth(
+                            data.status.conditions
+                          ).map((condition, index) => (
                             <div
                               key={index}
                               className="flex items-center gap-3 p-3 border rounded-lg"
                             >
                               <div className="flex items-center gap-2">
                                 <div
                                   className={`w-2 h-2 rounded-full ${
-                                    condition.status === 'True'
+                                    condition.health === 'True'
                                       ? 'bg-green-500'
-                                      : condition.status === 'False'
+                                      : condition.health === 'False'
                                         ? 'bg-red-500'
                                         : 'bg-yellow-500'
                                   }`}
                                 />
                                 <Badge
                                   variant={
-                                    condition.status === 'True'
+                                    condition.health === 'True'
                                       ? 'default'
                                       : 'secondary'
                                   }

ui/src/types/k8s.ts

@@ -19,3 +19,13 @@ export type SimpleContainer = Array<{
   image: string
   init?: boolean
 }>
+
+/**
+ * @link https://kubernetes.io/docs/reference/node/node-status/#condition
+ */
+export type NodeConditionType =
+  | 'Ready'
+  | 'DiskPressure'
+  | 'MemoryPressure'
+  | 'PIDPressure'
+  | 'NetworkUnavailable'