Compare commits
2 Commits
1f5c84f327
...
adbbec2631
| Author | SHA1 | Date | |
|---|---|---|---|
| adbbec2631 | |||
| 8b8d2c6312 |
@@ -574,6 +574,122 @@
|
||||
white-space: pre;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Formatted Log Entry Styles */
|
||||
.log-entry {
|
||||
background: #000;
|
||||
border: 1px solid var(--terminal-green);
|
||||
border-left: 3px solid var(--terminal-green);
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.log-entry.success {
|
||||
border-left-color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.log-entry.failed {
|
||||
border-left-color: #ff4444;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: var(--terminal-amber);
|
||||
font-size: 0.85em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
color: var(--terminal-green);
|
||||
font-weight: bold;
|
||||
text-shadow: var(--glow-green);
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.log-entry.failed .log-title {
|
||||
color: #ff4444;
|
||||
text-shadow: 0 0 5px #ff4444;
|
||||
}
|
||||
|
||||
.log-details {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.log-field {
|
||||
margin: 6px 0;
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.log-label {
|
||||
color: var(--terminal-amber);
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.log-output {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #003300;
|
||||
padding: 10px;
|
||||
margin: 6px 0;
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
overflow-x: auto;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: #ff6666;
|
||||
border-color: #330000;
|
||||
}
|
||||
|
||||
.log-entry code {
|
||||
background: #001a00;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #003300;
|
||||
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>
|
||||
@@ -730,40 +846,69 @@
|
||||
}
|
||||
|
||||
// Dashboard view
|
||||
const dashHtml = workers.length === 0 ?
|
||||
const dashHtml = workers.length === 0 ?
|
||||
'<div class="empty">No workers connected</div>' :
|
||||
workers.map(w => `
|
||||
<div class="worker-item">
|
||||
<span class="status ${w.status}">${w.status}</span>
|
||||
<strong>${w.name}</strong>
|
||||
<div class="timestamp">Last seen: ${new Date(w.last_heartbeat).toLocaleString()}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
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 === 'online' ? '●' : '○'}]</span>
|
||||
<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;
|
||||
|
||||
// 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>
|
||||
@@ -914,7 +1059,7 @@
|
||||
if (execution.logs && execution.logs.length > 0) {
|
||||
html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
|
||||
execution.logs.forEach(log => {
|
||||
html += `<div class="log-entry">${JSON.stringify(log, null, 2)}</div>`;
|
||||
html += formatLogEntry(log);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -928,6 +1073,79 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatLogEntry(log) {
|
||||
const timestamp = new Date(log.timestamp).toLocaleTimeString();
|
||||
|
||||
// Format based on log action type
|
||||
if (log.action === 'command_sent') {
|
||||
return `
|
||||
<div class="log-entry log-command-sent">
|
||||
<div class="log-timestamp">[${timestamp}]</div>
|
||||
<div class="log-title">Command Sent</div>
|
||||
<div class="log-details">
|
||||
<div class="log-field"><span class="log-label">Command:</span> <code>${escapeHtml(log.command)}</code></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (log.action === 'command_result') {
|
||||
const statusIcon = log.success ? '✓' : '✗';
|
||||
const statusClass = log.success ? 'success' : 'failed';
|
||||
return `
|
||||
<div class="log-entry log-command-result ${statusClass}">
|
||||
<div class="log-timestamp">[${timestamp}]</div>
|
||||
<div class="log-title">${statusIcon} Command Result</div>
|
||||
<div class="log-details">
|
||||
<div class="log-field"><span class="log-label">Status:</span> ${log.success ? 'Success' : 'Failed'}</div>
|
||||
${log.duration ? `<div class="log-field"><span class="log-label">Duration:</span> ${log.duration}ms</div>` : ''}
|
||||
${log.stdout ? `<div class="log-field"><span class="log-label">Output:</span><pre class="log-output">${escapeHtml(log.stdout)}</pre></div>` : ''}
|
||||
${log.stderr ? `<div class="log-field"><span class="log-label">Errors:</span><pre class="log-output log-error">${escapeHtml(log.stderr)}</pre></div>` : ''}
|
||||
${log.error ? `<div class="log-field"><span class="log-label">Error:</span> ${escapeHtml(log.error)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Fallback for unknown log types
|
||||
return `<div class="log-entry"><pre>${JSON.stringify(log, null, 2)}</pre></div>`;
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
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