Mkae columns sortabel agian, check hbc version, provide modile html pages

hbd/server/templates/live.html

@@ -14,6 +14,26 @@
       overflow: hidden;
     }
 
+    @media (max-width: 640px) {
+      body {
+        height: auto;
+        min-height: 100vh;
+        overflow: auto;
+        flex-direction: column;
+      }
+      .container {
+        max-height: none;
+        overflow: visible;
+      }
+      .table-section {
+        max-height: 55vh;
+      }
+      .log-section {
+        flex: none;
+        max-height: 40vh;
+      }
+    }
+
     .container {
       flex: 1;
       min-height: 0;
@@ -59,6 +79,9 @@
       border-radius: 6px;
       padding: 15px;
       box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+      overflow-x: auto;
+      overflow-y: auto;
+      max-height: 60vh;
     }
 
     .log-section {
@@ -82,6 +105,7 @@
       border: 1px solid #e0e0e0;
       text-align: left;
       padding: 2px 4px;
+      white-space: nowrap;
     }
 
     #ntable tr:nth-child(even) {
@@ -221,15 +245,24 @@
     var nTable = document;
     var name_idx = {};
     var c = 0;
+    var HBD_VERSION = "{{ hbd_version }}";
+
+    function hostNameHtml(data) {
+      var nameHtml = data.name;
+      if (!data.hbc_version || data.hbc_version !== HBD_VERSION) {
+        nameHtml += ' 🥀';
+      }
+      return data.dyn ? '<b>' + nameHtml + '</b>' : nameHtml;
+    }
 
     function setup() {
       name_idx = {};
       nTable = document.getElementById("ntable");
       for (var i = 0, row; (row = nTable.rows[i]); i++) {
         if (i == 0) continue;
-        name = nTable.rows[i].cells[0].innerText;
+        var cell = nTable.rows[i].cells[0];
+        var name = cell.dataset.name || cell.innerText.replace(/\s*🥀\s*$/, '').trim();
         name_idx[name] = nTable.rows[i];
-        /* console.log("name_Id[" + name + "]: " + name_idx[name].innerText); */
       }
     }
 
@@ -280,11 +313,8 @@
       row.appendChild(c_ipv6state);
       row.appendChild(c_ipv6latency);
       row.appendChild(c_ipv6statets);
-      if (data.dyn) {
-        c_name.innerHTML = "<b>" + data.name + "</b>";
-      } else {
-        c_name.innerHTML = data.name;
-      }
+      c_name.dataset.name = data.name;
+      c_name.innerHTML = hostNameHtml(data);
       
       // Set alert counts in "x/y" format (unacked/acked)
       var warningUnacked = data.alert_warning_unacked || 0;
@@ -346,6 +376,11 @@
         setup();
       }
       
+      // Update name cell (version indicator)
+      var nameCell = name_idx[data.name].cells[0];
+      nameCell.dataset.name = data.name;
+      nameCell.innerHTML = hostNameHtml(data);
+
       // Update warning and critical counts in "x/y" format (unacked/acked)
       var warningUnacked = data.alert_warning_unacked || 0;
       var warningAcked = data.alert_warning_acked || 0;
@@ -477,7 +512,7 @@
           <tbody id="ntablebody">
             {% for host in hosts %}
             <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 data-name="{{ host.name }}">{{ host.name }}{% if not host.hbc_version or host.hbc_version != hbd_version %} 🥀{% endif %}</td>
               <td style="text-align: center; color: #ff9800; font-weight: bold;">
                 {%- set warning_unacked = host.alert_warning_unacked -%}
                 {%- set warning_acked = host.alert_warning_acked -%}