Phase 2: Enhanced worker status display with metadata
Changes: - Show worker system metrics in dashboard and worker list - Display CPU cores, memory usage, load average, uptime - Added formatBytes() to display memory in human-readable format - Added formatUptime() to show uptime as days/hours/minutes - Added getTimeAgo() to show relative last-seen time - Improved worker list with detailed metadata panel - Show active tasks vs max concurrent tasks - Terminal-themed styling for metadata display - Amber labels for metadata fields Benefits: - See worker health at a glance - Monitor resource usage (CPU, RAM, load) - Track worker activity (active tasks) - Better operational visibility Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -653,6 +653,43 @@
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Worker Metadata Styles */
|
||||
.worker-stats {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 8px;
|
||||
font-size: 0.85em;
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.worker-stats span {
|
||||
padding: 2px 6px;
|
||||
background: #001a00;
|
||||
border: 1px solid #003300;
|
||||
}
|
||||
|
||||
.worker-metadata {
|
||||
margin-top: 12px;
|
||||
padding: 10px;
|
||||
background: #001a00;
|
||||
border: 1px solid #003300;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: var(--terminal-amber);
|
||||
min-width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -811,38 +848,67 @@
|
||||
// Dashboard view
|
||||
const dashHtml = workers.length === 0 ?
|
||||
'<div class="empty">No workers connected</div>' :
|
||||
workers.map(w => `
|
||||
workers.map(w => {
|
||||
const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
|
||||
const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
|
||||
return `
|
||||
<div class="worker-item">
|
||||
<span class="status ${w.status}">${w.status}</span>
|
||||
<span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
|
||||
<strong>${w.name}</strong>
|
||||
<div class="timestamp">Last seen: ${new Date(w.last_heartbeat).toLocaleString()}</div>
|
||||
${meta ? `<div class="worker-stats">
|
||||
<span>CPU: ${meta.cpus || '?'} cores</span>
|
||||
<span>RAM: ${formatBytes(meta.freeMem)}/${formatBytes(meta.totalMem)}</span>
|
||||
<span>Tasks: ${meta.activeTasks || 0}/${meta.maxConcurrentTasks || 0}</span>
|
||||
</div>` : ''}
|
||||
<div class="timestamp">Last seen: ${lastSeen}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`;
|
||||
}).join('');
|
||||
document.getElementById('dashWorkers').innerHTML = dashHtml;
|
||||
|
||||
// Full worker list
|
||||
const fullHtml = workers.length === 0 ?
|
||||
'<div class="empty">No workers connected</div>' :
|
||||
workers.map(w => {
|
||||
const meta = typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata;
|
||||
const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
|
||||
const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
|
||||
const memUsagePercent = meta && meta.totalMem ? ((meta.totalMem - meta.freeMem) / meta.totalMem * 100).toFixed(1) : 0;
|
||||
const loadAvg = meta && meta.loadavg ? meta.loadavg.map(l => l.toFixed(2)).join(', ') : 'N/A';
|
||||
|
||||
return `
|
||||
<div class="worker-item">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||||
<div>
|
||||
<span class="status ${w.status}">${w.status}</span>
|
||||
<div style="flex: 1;">
|
||||
<span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
|
||||
<strong>${w.name}</strong>
|
||||
<div class="timestamp">ID: ${w.id}</div>
|
||||
<div class="timestamp">Last heartbeat: ${new Date(w.last_heartbeat).toLocaleString()}</div>
|
||||
<div class="timestamp">Last seen: ${lastSeen}</div>
|
||||
${meta ? `
|
||||
<div style="margin-top: 10px; font-size: 0.85em; color: #666;">
|
||||
<div>CPUs: ${meta.cpus || 'N/A'} | RAM: ${meta.totalMem ? (meta.totalMem / 1024 / 1024 / 1024).toFixed(1) + 'GB' : 'N/A'}</div>
|
||||
<div>Platform: ${meta.platform || 'N/A'} | Arch: ${meta.arch || 'N/A'}</div>
|
||||
<div>Active Tasks: ${meta.activeTasks || 0}/${meta.maxConcurrentTasks || 0}</div>
|
||||
<div class="worker-metadata">
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">System:</span>
|
||||
<span>${meta.platform || 'N/A'} ${meta.arch || ''} | ${meta.cpus || '?'} CPU cores</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Memory:</span>
|
||||
<span>${formatBytes(meta.totalMem - meta.freeMem)} / ${formatBytes(meta.totalMem)} (${memUsagePercent}% used)</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Load Avg:</span>
|
||||
<span>${loadAvg}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Uptime:</span>
|
||||
<span>${formatUptime(meta.uptime)}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="meta-label">Active Tasks:</span>
|
||||
<span>${meta.activeTasks || 0} / ${meta.maxConcurrentTasks || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
${currentUser && currentUser.isAdmin ? `
|
||||
<button class="danger small" onclick="deleteWorker('${w.id}', '${w.name}')">🗑️ Delete</button>
|
||||
<button class="danger small" onclick="deleteWorker('${w.id}', '${w.name}')">[ 🗑️ Delete ]</button>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1051,6 +1117,35 @@
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
if (days > 0) return `${days}d ${hours}h ${minutes}m`;
|
||||
if (hours > 0) return `${hours}h ${minutes}m`;
|
||||
return `${minutes}m`;
|
||||
}
|
||||
|
||||
function getTimeAgo(date) {
|
||||
const seconds = Math.floor((new Date() - date) / 1000);
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
async function respondToPrompt(executionId, response) {
|
||||
try {
|
||||
const res = await fetch(`/api/executions/${executionId}/respond`, {
|
||||
|
||||
Reference in New Issue
Block a user