display and acknowledge alerts

hbd/server/templates/alerts.html

@@ -153,6 +153,11 @@
       align-items: center;
       transition: all 0.2s;
     }
+    
+    .alert-item.acknowledged {
+      opacity: 0.6;
+      background: #f0f0f0;
+    }
 
     .alert-item:hover {
       box-shadow: 0 2px 8px rgba(0,0,0,0.1);
@@ -237,6 +242,46 @@
       color: #999;
       font-size: 0.85em;
     }
+    
+    .alert-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-left: 15px;
+    }
+    
+    .acknowledge-btn {
+      padding: 8px 16px;
+      background: #2196f3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.85em;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+    
+    .acknowledge-btn:hover {
+      background: #1976d2;
+      transform: scale(1.05);
+    }
+    
+    .acknowledge-btn:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+      transform: none;
+    }
+    
+    .acknowledged-badge {
+      padding: 4px 8px;
+      background: #4caf50;
+      color: white;
+      border-radius: 4px;
+      font-size: 0.75em;
+      text-align: center;
+      white-space: nowrap;
+    }
 
     .no-alerts {
       text-align: center;
@@ -396,6 +441,7 @@
       function renderAlert(alert) {
         const level = alert.level.toLowerCase();
         const duration = getDuration(alert.since);
+        const acknowledged = alert.acknowledged || false;
         
         // Use formatted message if available, otherwise build from individual fields
         let valueText = `Value: <span class="alert-value">${formatValue(alert.last_value)}</span>`;
@@ -405,8 +451,26 @@
           valueText += ` <span class="threshold-info">(threshold: ${alert.operator} ${formatValue(alert.threshold_value)})</span>`;
         }
         
+        // Build actions section
+        let actionsHtml = '';
+        if (acknowledged) {
+          actionsHtml = `
+            <div class="alert-actions">
+              <div class="acknowledged-badge">✓ Acknowledged</div>
+            </div>
+          `;
+        } else {
+          actionsHtml = `
+            <div class="alert-actions">
+              <button class="acknowledge-btn" onclick="acknowledgeAlert('${alert.hostname}', '${alert.metric_path}', event)">
+                Acknowledge
+              </button>
+            </div>
+          `;
+        }
+        
         return `
-          <div class="alert-item ${level}">
+          <div class="alert-item ${level} ${acknowledged ? 'acknowledged' : ''}">
             <div class="alert-main">
               <div class="alert-header">
                 <span class="alert-level ${level}">${alert.level}</span>
@@ -418,6 +482,7 @@
                 <span class="alert-duration">Active for ${duration}</span>
               </div>
             </div>
+            ${actionsHtml}
           </div>
         `;
       }
@@ -463,6 +528,52 @@
         // Re-render with new filter
         renderAlerts(allAlerts);
       }
+      
+      async function acknowledgeAlert(hostname, metricPath, event) {
+        // Prevent event bubbling
+        if (event) {
+          event.stopPropagation();
+        }
+        
+        // Disable the button
+        const button = event.target;
+        button.disabled = true;
+        button.textContent = 'Acknowledging...';
+        
+        try {
+          const response = await fetch('/api/0/alerts/acknowledge', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              hostname: hostname,
+              metric_path: metricPath,
+            }),
+          });
+          
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+          
+          const result = await response.json();
+          
+          // Update the alert in our local data
+          const alert = allAlerts.find(a => a.hostname === hostname && a.metric_path === metricPath);
+          if (alert) {
+            alert.acknowledged = true;
+            alert.acknowledged_at = result.acknowledged_at;
+          }
+          
+          // Re-render alerts
+          renderAlerts(allAlerts);
+          
+        } catch (error) {
+          alert(`Failed to acknowledge alert: ${error.message}`);
+          button.disabled = false;
+          button.textContent = 'Acknowledge';
+        }
+      }
 
       // Auto-refresh every 15 seconds
       setInterval(loadAlerts, 15000);