re-factor notifications, add sms and matrix as channels

hbd/server/templates/live.html

@@ -81,7 +81,7 @@
     #ntable th {
       border: 1px solid #e0e0e0;
       text-align: left;
-      padding: 8px 10px;
+      padding: 2px 4px;
     }
 
     #ntable tr:nth-child(even) {
@@ -92,8 +92,24 @@
       background-color: #e3f2fd;
     }
 
+    #ntable tbody tr.row-warning {
+      background-color: #fff8c5;
+    }
+
+    #ntable tbody tr.row-critical {
+      background-color: #fde8e8;
+    }
+
+    #ntable tbody tr.row-warning:hover {
+      background-color: #fff0a0;
+    }
+
+    #ntable tbody tr.row-critical:hover {
+      background-color: #f9c8c8;
+    }
+
     #ntable th {
-      padding: 12px 10px;
+      padding: 6px 8px;
       background-color: #2196f3;
       color: white;
       font-weight: 600;
@@ -143,7 +159,7 @@
     /* Message styling */
     #messages {
       font-size: 0.85em;
-      line-height: 1.6;
+      line-height: 1.0;
     }
 
     #messages div {
@@ -217,6 +233,19 @@
       }
     }
 
+    function updateRowAlert(row, data) {
+      var criticalUnacked = data.alert_critical_unacked || 0;
+      var criticalAcked = data.alert_critical_acked || 0;
+      var warningUnacked = data.alert_warning_unacked || 0;
+      var warningAcked = data.alert_warning_acked || 0;
+      row.classList.remove('row-warning', 'row-critical');
+      if (criticalUnacked > 0 || criticalAcked > 0) {
+        row.classList.add('row-critical');
+      } else if (warningUnacked > 0 || warningAcked > 0) {
+        row.classList.add('row-warning');
+      }
+    }
+
     function createRow(data) {
       var row = document.createElement("tr");
       var c_name = document.createElement("td");
@@ -284,12 +313,31 @@
       var table = document.getElementById("ntablebody"); // find table to append to
       table.appendChild(row); // append row to table
       name_idx[c_name] = row;
+      updateRowAlert(row, data);
     }
 
     function formatTS(ts) {
-      const milliseconds = ts * 1000;
-      const dateObject = new Date(milliseconds);
-      return dateObject.toLocaleString("de-DE");
+      const now = new Date();
+      const d = new Date(ts * 1000);
+
+      const pad = n => String(n).padStart(2, '0');
+      const timeStr = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+
+      // Same calendar day → show time only
+      if (d.toDateString() === now.toDateString()) {
+        return timeStr;
+      }
+
+      // Within 8 days → show "-X d hh:mm:ss"
+      const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      const dStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+      const diffDays = Math.round((todayStart - dStart) / 86400000);
+      if (diffDays < 8) {
+        return `-${diffDays}d ${timeStr}`;
+      }
+
+      // Older → date only
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
     }
 
     function update_table(data) {
@@ -345,6 +393,7 @@
         name_idx[data.name].cells[4 + i * 4].innerHTML = state;
         name_idx[data.name].cells[5 + i * 4].innerHTML = latency;
       }
+      updateRowAlert(name_idx[data.name], data);
     }
 
     function WS_Connect() {
@@ -427,7 +476,7 @@
           </thead>
           <tbody id="ntablebody">
             {% for host in hosts %}
-            <tr>
+            <tr class="{% if host.alert_critical_unacked > 0 or host.alert_critical_acked > 0 %}row-critical{% elif host.alert_warning_unacked > 0 or host.alert_warning_acked > 0 %}row-warning{% endif %}">
               <td>{{ host.name }}</td>
               <td style="text-align: center; color: #ff9800; font-weight: bold;">
                 {%- set warning_unacked = host.alert_warning_unacked -%}