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);
|
color: var(--terminal-green);
|
||||||
font-family: var(--font-mono);
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -809,40 +846,69 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Dashboard view
|
// Dashboard view
|
||||||
const dashHtml = workers.length === 0 ?
|
const dashHtml = workers.length === 0 ?
|
||||||
'<div class="empty">No workers connected</div>' :
|
'<div class="empty">No workers connected</div>' :
|
||||||
workers.map(w => `
|
workers.map(w => {
|
||||||
<div class="worker-item">
|
const meta = w.metadata ? (typeof w.metadata === 'string' ? JSON.parse(w.metadata) : w.metadata) : null;
|
||||||
<span class="status ${w.status}">${w.status}</span>
|
const lastSeen = getTimeAgo(new Date(w.last_heartbeat));
|
||||||
<strong>${w.name}</strong>
|
return `
|
||||||
<div class="timestamp">Last seen: ${new Date(w.last_heartbeat).toLocaleString()}</div>
|
<div class="worker-item">
|
||||||
</div>
|
<span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
|
||||||
`).join('');
|
<strong>${w.name}</strong>
|
||||||
|
${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('');
|
||||||
document.getElementById('dashWorkers').innerHTML = dashHtml;
|
document.getElementById('dashWorkers').innerHTML = dashHtml;
|
||||||
|
|
||||||
// Full worker list
|
// Full worker list
|
||||||
const fullHtml = workers.length === 0 ?
|
const fullHtml = workers.length === 0 ?
|
||||||
'<div class="empty">No workers connected</div>' :
|
'<div class="empty">No workers connected</div>' :
|
||||||
workers.map(w => {
|
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 `
|
return `
|
||||||
<div class="worker-item">
|
<div class="worker-item">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||||||
<div>
|
<div style="flex: 1;">
|
||||||
<span class="status ${w.status}">${w.status}</span>
|
<span class="status ${w.status}">[${w.status === 'online' ? '●' : '○'}]</span>
|
||||||
<strong>${w.name}</strong>
|
<strong>${w.name}</strong>
|
||||||
<div class="timestamp">ID: ${w.id}</div>
|
<div class="timestamp">Last seen: ${lastSeen}</div>
|
||||||
<div class="timestamp">Last heartbeat: ${new Date(w.last_heartbeat).toLocaleString()}</div>
|
|
||||||
${meta ? `
|
${meta ? `
|
||||||
<div style="margin-top: 10px; font-size: 0.85em; color: #666;">
|
<div class="worker-metadata">
|
||||||
<div>CPUs: ${meta.cpus || 'N/A'} | RAM: ${meta.totalMem ? (meta.totalMem / 1024 / 1024 / 1024).toFixed(1) + 'GB' : 'N/A'}</div>
|
<div class="meta-row">
|
||||||
<div>Platform: ${meta.platform || 'N/A'} | Arch: ${meta.arch || 'N/A'}</div>
|
<span class="meta-label">System:</span>
|
||||||
<div>Active Tasks: ${meta.activeTasks || 0}/${meta.maxConcurrentTasks || 0}</div>
|
<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>
|
||||||
` : ''}
|
` : ''}
|
||||||
</div>
|
</div>
|
||||||
${currentUser && currentUser.isAdmin ? `
|
${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>
|
||||||
</div>
|
</div>
|
||||||
@@ -1051,6 +1117,35 @@
|
|||||||
return div.innerHTML;
|
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) {
|
async function respondToPrompt(executionId, response) {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/executions/${executionId}/respond`, {
|
const res = await fetch(`/api/executions/${executionId}/respond`, {
|
||||||
|
|||||||
Reference in New Issue
Block a user