node.js dashboard works

2025-11-30 22:17:14 -08:00
parent c6d51f2a49
commit ebbc5ac5cf
22 changed files with 829 additions and 196 deletions
--- a/files/ws_node/public/index.html
+++ b/files/ws_node/public/index.html
@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Attached Disks - Live Table</title>
+
+
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h2>Attached Disks</h2>
+    <div id="disk_table" class="column">Connecting…</div>
+  </div>
+  <div class="container">
+    <h2>System Stats</h2>
+    <div id="host_stats" class="column">Connecting…</div>
+  </div>
+
+  <!-- Socket.IO client library -->
+  <script src="socket.io/socket.io.js"></script>
+  <script>
+    
+    const socket = io();      
+
+    // listen for redis updates, render and error handle
+    socket.on('attached_disks', renderDiskTable);
+    socket.on('host_stats', renderStatsTable);
+
+    socket.on('connect_error', err => {
+      safeSetText('disk_table', `Could not connect to server - ${err.message}`);
+      safeSetText('host_stats', `Could not connect to server - ${err.message}`);
+    });
+
+    socket.on('reconnect', attempt => {
+      safeSetText('disk_table', `Re-connected (attempt ${attempt})`);
+      safeSetText('host_stats', `Re-connected (attempt ${attempt})`);
+    });
+
+
+    function safeSetText(id, txt) {
+      const el = document.getElementById(id);
+      if (el) el.textContent = txt;
+    }    
+
+    // table rendering functions
+    function renderDiskTable(data) { renderGenericTable('disk_table', data, 'No Disks found'); }    
+    function renderStatsTable(data) { renderGenericTable('host_stats', data, 'No Stats available'); }    
+
+    function renderGenericTable(containerId, data, emptyMsg) {
+      const container = document.getElementById(containerId);
+      if (!Array.isArray(data) || !data.length) {
+        container.textContent = emptyMsg;
+        return;
+      }
+      const table = renderTable(data);
+      container.innerHTML = '';
+      container.appendChild(table);
+    }
+
+    function renderTable(data) {
+      // Columns are inferred from the first object (order matters)
+      const cols = Object.keys(data[0]);
+      // Create table
+      const table = document.createElement('table');
+      // Header
+      const thead = table.createTHead();
+      const headerRow = thead.insertRow();
+      cols.forEach(col => {
+        const th = document.createElement('th');
+        th.textContent = col.charAt(0).toUpperCase() + col.slice(1);
+        headerRow.appendChild(th);
+      });
+      // Body
+      const tbody = table.createTBody();
+      data.forEach(item => {
+        const tr = tbody.insertRow();
+        cols.forEach(col => {
+          const td = tr.insertCell();
+          td.textContent = item[col];
+        });
+      });
+      return table;
+    }
+
+
+  </script>
+
+</body>
+</html>