Refactoing Worker Dashboard
This commit is contained in:
parent
425821bce7
commit
0edd5841d6
|
|
@ -502,27 +502,35 @@ function renderWorkersTable(msg) {
|
|||
html += '<tr>';
|
||||
html += '<th>Hostname</th>';
|
||||
html += '<th>Status</th>';
|
||||
html += '<th>Hardware</th>';
|
||||
html += '<th><i class="fa fa-microchip"></i> CPU</th>';
|
||||
html += '<th><i class="fa fa-memory"></i> RAM</th>';
|
||||
html += '<th><i class="fa fa-dice-d20"></i> GPU</th>';
|
||||
html += '<th>Uptime</th>';
|
||||
html += '<th>Last Seen</th>';
|
||||
html += '</tr>';
|
||||
html += '</thead>';
|
||||
html += '<tbody>';
|
||||
|
||||
const nowSec = Math.floor(Date.now() / 1000);
|
||||
const staleThresholdSec = 60;
|
||||
|
||||
for (const [sdl_id, worker] of Object.entries(workers)) {
|
||||
const status = worker.status === 'active'
|
||||
const ageSec = nowSec - worker.last_seen_utime;
|
||||
const isActive = ageSec <= staleThresholdSec;
|
||||
|
||||
// Status badge
|
||||
const statusBadge = isActive
|
||||
? '<span class="badge bg-success">Active</span>'
|
||||
: '<span class="badge bg-secondary">Inactive</span>';
|
||||
: '<span class="badge bg-danger">Inactive</span>'; // ✅ Red instead of grey
|
||||
|
||||
// Hardware info
|
||||
const hwType = worker.hardware?.type || 'unknown';
|
||||
const hwIcon = hwType === 'hw' ? '🖥️' : hwType === 'vm' ? '💠' : '❓';
|
||||
const hwManuf = worker.hardware?.manufacturer || 'Unknown';
|
||||
const hwModel = worker.hardware?.model || 'Unknown';
|
||||
const hardware = `<span title="${hwManuf} - ${hwModel}">${hwIcon} ${hwType === 'vm' ? hwModel : hwManuf}</span>`;
|
||||
|
||||
// ✅ Full hardware display with model
|
||||
const hardwareDisplay = hwType === 'vm'
|
||||
? `${hwIcon} ${hwModel}`
|
||||
: `${hwIcon} ${hwManuf} ${hwModel}`;
|
||||
|
||||
// CPU
|
||||
const cpuAvail = worker.resources?.cpus?.available || 0;
|
||||
|
|
@ -536,7 +544,6 @@ function renderWorkersTable(msg) {
|
|||
|
||||
const memAvailGB = Math.round(memAvail / (1024 * 1024 * 1024));
|
||||
const memTotalGB = Math.round(memTotal / (1024 * 1024 * 1024));
|
||||
const memUsedGB = Math.round(memUsed / (1024 * 1024 * 1024));
|
||||
const memPercent = worker.usage?.memory?.percent_used || 0;
|
||||
|
||||
// GPU
|
||||
|
|
@ -548,32 +555,57 @@ function renderWorkersTable(msg) {
|
|||
const gpuMemGB = Math.round(gpuMemMB / 1024);
|
||||
|
||||
// Uptime
|
||||
const uptime = worker.uptime?.proc_dhms || 'N/A';
|
||||
const procUptime = worker.uptime?.proc_dhms || 'N/A';
|
||||
const sysUptime = worker.uptime?.sys_dhms || 'N/A';
|
||||
|
||||
// Last seen
|
||||
const lastSeen = worker.last_seen
|
||||
? new Date(worker.last_seen).toLocaleString()
|
||||
: 'N/A';
|
||||
// ✅ Last seen age
|
||||
const days = Math.floor(ageSec / 86400);
|
||||
const hours = Math.floor((ageSec % 86400) / 3600);
|
||||
const minutes = Math.floor((ageSec % 3600) / 60);
|
||||
const seconds = Math.floor(ageSec % 60);
|
||||
|
||||
let lastSeenAge = '';
|
||||
if (days > 0) lastSeenAge += `${days}d `;
|
||||
if (hours > 0 || days > 0) lastSeenAge += `${hours}h `;
|
||||
if (minutes > 0 || hours > 0 || days > 0) lastSeenAge += `${minutes}m `;
|
||||
lastSeenAge += `${seconds}s ago`;
|
||||
|
||||
html += '<tr>';
|
||||
html += `<td><strong>${worker.hostname}</strong><br><small class="text-muted" style="font-size:0.7em">${worker.sdl_id.substring(0, 8)}...</small></td>`;
|
||||
html += `<td>${status}</td>`;
|
||||
html += `<td><small>${hardware}</small></td>`;
|
||||
|
||||
// ✅ Hostname column with hardware underneath
|
||||
html += `<td>
|
||||
<strong>${worker.hostname}</strong><br>
|
||||
<small class="text-muted" style="font-size:0.7em">${worker.sdl_id}</small><br>
|
||||
<small class="text-muted" style="font-size:0.8em">${hardwareDisplay}</small>
|
||||
</td>`;
|
||||
|
||||
// ✅ Status column with uptime and last seen
|
||||
html += `<td>
|
||||
${statusBadge}<br>
|
||||
<small class="text-muted">SDL: ${procUptime}</small><br>
|
||||
<small class="text-muted">OS: ${sysUptime}</small><br>
|
||||
<small class="text-muted">${lastSeenAge}</small>
|
||||
</td>`;
|
||||
|
||||
// CPU
|
||||
html += `<td>
|
||||
<span class="dash-val">${cpuAvail}</span> / ${cpuTotal}
|
||||
${cpuUsed > 0 ? `<br><small class="text-muted">${cpuUsed}% load</small>` : ''}
|
||||
</td>`;
|
||||
|
||||
// Memory
|
||||
html += `<td>
|
||||
<span class="dash-val">${memAvailGB}</span> / ${memTotalGB} GB
|
||||
${memPercent > 0 ? `<br><small class="text-muted">${memPercent}% used</small>` : ''}
|
||||
</td>`;
|
||||
|
||||
// GPU
|
||||
html += `<td>
|
||||
<span class="dash-val">${gpuAvail}</span> / ${gpuTotal}
|
||||
${gpuMemGB > 0 ? `<br><small class="text-muted">(${gpuMemGB} GB)</small>` : ''}
|
||||
${gpuUsed > 0 ? `<br><small class="text-muted">${gpuUsed}% load</small>` : ''}
|
||||
</td>`;
|
||||
html += `<td><small>${uptime}</small></td>`;
|
||||
html += `<td><small>${lastSeen}</small></td>`;
|
||||
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -525,11 +525,12 @@ function getSystemHardware() {
|
|||
try {
|
||||
const piModel = fs.readFileSync('/proc/device-tree/model', 'utf8')
|
||||
.replace(/\0/g, '')
|
||||
.replace(/Raspberry Pi/, '')
|
||||
.trim();
|
||||
|
||||
if (piModel) {
|
||||
hardware.type = 'hw'; // ✅ Changed from 'physical'
|
||||
hardware.manufacturer = 'Raspberry Pi Foundation';
|
||||
hardware.manufacturer = 'Raspberry Pi';
|
||||
hardware.model = piModel;
|
||||
return hardware;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue