From 4e29272f7e1fb402ff00d7f674bc65601b7c1c7d Mon Sep 17 00:00:00 2001
From: Alexander Borg <borg@servernet.se>
Date: Tue, 23 Sep 2025 12:25:15 +0200
Subject: [PATCH] Fix jwt-token

---
 client/src/pages/Alerts.jsx | 75 +++++++++++++++++++++++--------------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/client/src/pages/Alerts.jsx b/client/src/pages/Alerts.jsx
index c69b591..291d8bf 100644
--- a/client/src/pages/Alerts.jsx
+++ b/client/src/pages/Alerts.jsx
@@ -372,7 +372,11 @@ const Alerts = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  {(alertRules || []).map((rule) => (
+                  {(alertRules || []).map((rule) => {
+                    // DEBUG: Aggressive debugging for this specific rule
+                    console.log('🔍 Rendering rule:', rule.id, 'alert_channels:', rule.alert_channels, 'type:', typeof rule.alert_channels);
+                    
+                    return (
                     <tr key={rule.id} className="hover:bg-gray-50">
                       <td>
                         <div>
@@ -403,40 +407,54 @@ const Alerts = () => {
                       <td>
                         <div className="flex space-x-1">
                           {(() => {
-                            // Normalize alert_channels - ensure it's always an array
-                            let alertChannels = rule.alert_channels || [];
-                            
-                            // DEBUG: Add debugging to catch object rendering
-                            if (typeof alertChannels === 'object' && alertChannels !== null) {
-                              const hasKeys = Object.keys(alertChannels).some(key => ['sms', 'webhook', 'email'].includes(key));
-                              if (hasKeys) {
-                                console.log('DEBUG: Found problematic alert_channels object:', alertChannels, 'for rule:', rule.id);
+                            try {
+                              // Normalize alert_channels - ensure it's always an array
+                              let alertChannels = rule.alert_channels || [];
+                              
+                              // DEBUG: Add debugging to catch object rendering
+                              console.log('🔍 Processing alert_channels for rule', rule.id, ':', alertChannels, 'type:', typeof alertChannels);
+                              
+                              // Convert object to array if needed
+                              if (typeof alertChannels === 'object' && alertChannels !== null && !Array.isArray(alertChannels)) {
+                                console.log('🔧 Converting object to array:', alertChannels);
+                                alertChannels = Object.keys(alertChannels).filter(key => alertChannels[key] === true);
+                                console.log('🔧 Converted to array:', alertChannels);
                               }
-                            }
-                            
-                            if (typeof alertChannels === 'object' && !Array.isArray(alertChannels)) {
-                              // Convert object like {sms: true, webhook: false, email: true} to array
-                              alertChannels = Object.keys(alertChannels).filter(key => alertChannels[key]);
-                            }
-                            if (!Array.isArray(alertChannels)) {
-                              alertChannels = []; // fallback to empty array
-                            }
-                            
-                            // DEBUG: Ensure we're only rendering strings
-                            return alertChannels.map((channel, index) => {
-                              if (typeof channel !== 'string') {
-                                console.error('DEBUG: Non-string channel detected:', channel, typeof channel);
-                                return null;
+                              
+                              // Ensure it's an array
+                              if (!Array.isArray(alertChannels)) {
+                                console.warn('⚠️ alert_channels is not an array, setting to empty array:', alertChannels);
+                                alertChannels = [];
                               }
-                              return (
+                              
+                              // Validate all elements are strings
+                              const validChannels = alertChannels.filter(channel => {
+                                const isString = typeof channel === 'string';
+                                if (!isString) {
+                                  console.error('❌ Non-string channel detected:', channel, typeof channel);
+                                }
+                                return isString;
+                              });
+                              
+                              console.log('✅ Final channels to render:', validChannels);
+                              
+                              // Render the channels
+                              const elements = validChannels.map((channel, index) => (
                                 <span
                                   key={index}
                                   className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"
                                 >
                                   {channel}
                                 </span>
-                              );
-                            }).filter(Boolean);
+                              ));
+                              
+                              console.log('✅ Rendered elements:', elements);
+                              return elements;
+                              
+                            } catch (error) {
+                              console.error('💥 Error in alert_channels rendering:', error);
+                              return <span className="text-red-500 text-xs">Error rendering channels</span>;
+                            }
                           })()}
                         </div>
                       </td>
@@ -512,7 +530,8 @@ const Alerts = () => {
                         </div>
                       </td>
                     </tr>
-                  ))}
+                    );
+                  })}
                 </tbody>
               </table>
             </div>