From 60486b3842f321cba0ba536bf567bc40fc77496d Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 8 Oct 2025 08:56:28 +0000
Subject: [PATCH] Fix undefined error in Docker alert highlighting

Add null-safety checks and default values to prevent 'Cannot read
properties of undefined' error when accessing alertStyles.

Changes:
- Add comprehensive defaultAlertStyles object with all required properties
- Wrap getAlertStyles call in try-catch with fallback to defaults
- Add optional chaining (?.) when accessing alertStyles properties
- Extract severity to variable before use to avoid repeated null checks
---
 .../src/components/Docker/DockerHosts.tsx     | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerHosts.tsx b/frontend-modern/src/components/Docker/DockerHosts.tsx
index e8b85bcde..822b10cbd 100644
--- a/frontend-modern/src/components/Docker/DockerHosts.tsx
+++ b/frontend-modern/src/components/Docker/DockerHosts.tsx
@@ -113,13 +113,28 @@ const DockerContainerRow: Component<{
 
   // Get alert styles for this container
   const containerResourceId = createMemo(() => `docker-container-${host.id}-${container.id}`);
-  const alertStyles = createMemo(() =>
-    props.activeAlerts ? getAlertStyles(containerResourceId(), props.activeAlerts) : {
-      hasUnacknowledgedAlert: false,
-      hasAcknowledgedOnlyAlert: false,
-      severity: null as 'critical' | 'warning' | null,
+  const defaultAlertStyles = {
+    hasUnacknowledgedAlert: false,
+    hasAcknowledgedOnlyAlert: false,
+    severity: null as 'critical' | 'warning' | null,
+    hasAlert: false,
+    alertCount: 0,
+    unacknowledgedCount: 0,
+    acknowledgedCount: 0,
+    rowClass: '',
+    indicatorClass: '',
+    badgeClass: '',
+  };
+
+  const alertStyles = createMemo(() => {
+    if (!props.activeAlerts) return defaultAlertStyles;
+    try {
+      return getAlertStyles(containerResourceId(), props.activeAlerts) || defaultAlertStyles;
+    } catch (e) {
+      console.warn('Error getting alert styles for container:', containerResourceId(), e);
+      return defaultAlertStyles;
     }
-  );
+  });
 
   const cpuPercent = Math.max(0, Math.min(100, container.cpuPercent ?? 0));
   const memoryPercent = Math.max(0, Math.min(100, container.memoryPercent ?? 0));
@@ -173,17 +188,19 @@ const DockerContainerRow: Component<{
   });
 
   // Match GuestRow styling with alert highlighting
-  const showAlertHighlight = createMemo(() => alertStyles().hasUnacknowledgedAlert);
+  const showAlertHighlight = createMemo(() => alertStyles()?.hasUnacknowledgedAlert ?? false);
   const alertAccentColor = createMemo(() => {
     if (!showAlertHighlight()) return undefined;
-    return alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
+    const severity = alertStyles()?.severity;
+    return severity === 'critical' ? '#ef4444' : '#eab308';
   });
 
   const rowClass = () => {
     const base = 'transition-all duration-200 relative';
     const hover = 'hover:shadow-sm';
+    const severity = alertStyles()?.severity;
     const alertBg = showAlertHighlight()
-      ? alertStyles().severity === 'critical'
+      ? severity === 'critical'
         ? 'bg-red-50 dark:bg-red-950/30'
         : 'bg-yellow-50 dark:bg-yellow-950/20'
       : '';