fix: prevent showError from removing the 4 first metric cards

app/static/index.html

@@ -4365,13 +4365,34 @@
         
         function showError(containerId, message) {
             const container = document.getElementById(containerId);
-            container.innerHTML = `
+            
-                <div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">
+            // If it's metrics-grid, show error above the cards, not replace them
-                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
+            if (containerId === 'metrics-grid') {
-                    <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3>
+                // Find the parent container to add error above
-                    <p style="margin: 0;">${message}</p>
+                const parentContainer = container.parentElement;
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'pf-c-alert pf-m-danger';
+                errorDiv.style.marginBottom = '16px';
+                errorDiv.innerHTML = `
+                    <div class="pf-c-alert__icon">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <div class="pf-c-alert__title">Error</div>
+                    <div class="pf-c-alert__description">${message}</div>
+                `;
+                
+                // Insert error before the metrics grid
+                parentContainer.insertBefore(errorDiv, container);
+            } else {
+                // For other containers, replace content as before
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">
+                        <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
+                        <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3>
+                        <p style="margin: 0;">${message}</p>
                     </div>
                 `;
+            }
         }
     </script>