90 lines
2.6 KiB
HTML
90 lines
2.6 KiB
HTML
<!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> |