Compare commits
2 Commits
1f5c84f327
...
adbbec2631
| Author | SHA1 | Date | |
|---|---|---|---|
| adbbec2631 | |||
| 8b8d2c6312 |
@@ -574,6 +574,122 @@
|
|||||||
white-space: pre;
|
white-space: pre;
|
||||||
padding: 2rem;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -730,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>
|
||||||
@@ -914,7 +1059,7 @@
|
|||||||
if (execution.logs && execution.logs.length > 0) {
|
if (execution.logs && execution.logs.length > 0) {
|
||||||
html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
|
html += '<h3 style="margin-top: 20px; margin-bottom: 10px;">Execution Logs:</h3>';
|
||||||
execution.logs.forEach(log => {
|
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) {
|
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