cosmostat active host inventory file api

files/server/system_metrics.js

@@ -62,29 +62,74 @@
   /* ==========================================================
      Sidebar building - uses short_id for status key
      ========================================================== */
+
   function buildList(systemList) {
     const ul = document.getElementById('endpointList');
+
+    if (!Array.isArray(systemList)) {
+      ul.innerHTML = '';        // nothing to show
+      return;
+    }
+
+    /* ────────────────────────────────────────
+    * Sort: servers first, then by IP
+    * ──────────────────────────────────────── */
+    const toInt = ip => {
+      // guard against undefined / empty string
+      if (!ip) return 0;
+      return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
+    };
+
+    const sorted = [...systemList].sort((a, b) => {
+      // a.  Servers go before non‑servers
+      const aServer = !!a.is_server;
+      const bServer = !!b.is_server;
+      if (aServer !== bServer) return aServer ? -1 : 1;   // true < false
+
+      // b.  Same “is_server” status – fall back to IP sorting
+      const aIp = a.active_ip ?? '';
+      const bIp = b.active_ip ?? '';
+
+      if (!aIp) return 1;          // push empty IPs to the end
+      if (!bIp) return -1;
+
+      return toInt(aIp) - toInt(bIp);
+    });
+
+    /* ────────────────────────────────────────
+    * Bail if nothing actually changed
+    * ──────────────────────────────────────── */
     const current = Array.from(ul.children).map(li => li.dataset.id);
-    const newIds   = systemList.map(s => s.short_id);
-    if (arraysEqual(current, newIds)) return;
+    const newIds   = sorted.map(s => s.short_id);
+    if (arraysEqual(current, newIds)) return;   // no visual change needed
+
+    /* ────────────────────────────────────────
+    * Build the DOM
+    * ──────────────────────────────────────── */
     const selected = getSelectedId().toLowerCase();
-    ul.innerHTML = ''; // reset list
-    systemList.forEach(item => {
+    ul.innerHTML = ''; // reset
+
+    sorted.forEach(item => {
       const li   = document.createElement('li');
-      // status dot - keyed by short_id
+
+      // • Status dot
       const status = document.createElement('span');
       status.className = 'host-status';
       status.dataset.id = item.short_id;
-      // link - display hostname, encode short_id in URL
+
+      // • Link – display hostname, encode short_id in URL
       const a = document.createElement('a');
       a.href = '?host=' + encodeURIComponent(item.short_id);
       a.textContent = item.hostname;
+      a.title = item.active_ip ? `Active IP: ${item.active_ip}` : '';
       if (item.short_id.toLowerCase() === selected) a.classList.add('active');
+
       li.appendChild(status);
       li.appendChild(a);
       ul.appendChild(li);
     });
   }
+
   /* ==========================================================
      Update status colors every second
      ========================================================== */