bowong
/
ComfyUI-WorkflowPublisher
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化监控数据刷新逻辑，改进服务器状态和任务列表的显示格式，提升用户体验和可读性

This commit is contained in:
iHeyTang 2025-08-19 15:26:49 +08:00
parent 288f8f6def
commit 9b3ffe70f5
1 changed files with 170 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
workflow_service/static/js/monitor.js
View File

@ -1,168 +1,209 @@
async function refreshData() { async function refreshData() {
try { try {
// 获取运行概览 - 更新为新的API路径 // 获取运行概览 - 更新为新的API路径
const runMetrics = await fetch('/api/run/metrics').then(r => r.json()); const runMetrics = await fetch("/api/run/metrics").then((r) => r.json());
document.getElementById('running-tasks').textContent = runMetrics.running_tasks; document.getElementById("running-tasks").textContent =
document.getElementById('pending-tasks').textContent = runMetrics.pending_tasks; runMetrics.running_tasks;
document.getElementById('completed-tasks').textContent = runMetrics.completed_tasks; document.getElementById("pending-tasks").textContent =
document.getElementById('total-tasks').textContent = runMetrics.total_tasks_24h; runMetrics.pending_tasks;
document.getElementById("completed-tasks").textContent =
runMetrics.completed_tasks;
document.getElementById("total-tasks").textContent =
runMetrics.total_tasks_24h;
// 获取服务器状态 - 使用现有的list接口 // 获取服务器状态 - 使用现有的list接口
const serverStatus = await fetch('/api/comfy/list').then(r => r.json()); const serverStatus = await fetch("/api/comfy/list").then((r) => r.json());
updateServerStatus(serverStatus); updateServerStatus(serverStatus);
// 获取运行列表 - 更新为新的API路径 // 获取运行列表 - 更新为新的API路径
const runs = await fetch('/api/run').then(r => r.json()); const runs = await fetch("/api/run").then((r) => r.json());
updateRecentTasks(runs); updateRecentTasks(runs);
} catch (error) {
} catch (error) { console.error("刷新数据失败:", error);
console.error('刷新数据失败:', error); }
}
} }
function updateServerStatus(servers) { function updateServerStatus(servers) {
const container = document.getElementById('server-status'); const container = document.getElementById("server-status");
container.innerHTML = ''; container.innerHTML = "";
if (servers.length === 0) { if (servers.length === 0) {
container.innerHTML = '<p style="text-align: center; color: #7f8c8d; grid-column: 1/-1;">暂无服务器信息</p>'; container.innerHTML =
return; '<p style="text-align: center; color: #7f8c8d; grid-column: 1/-1;">暂无服务器信息</p>';
} return;
}
servers.forEach(server => { servers.forEach((server) => {
const statusClass = server.status === 'online' ? 'online' : 'offline'; const statusClass = server.status === "online" ? "online" : "offline";
const statusColor = server.status === 'online' ? 'status-online' : 'status-offline'; const statusColor =
server.status === "online" ? "status-online" : "status-offline";
// 格式化时间 // 格式化时间
const formatTime = (timeStr) => { const formatTime = (timeStr) => {
if (!timeStr) return 'N/A'; if (!timeStr) return "N/A";
try { try {
const date = new Date(timeStr); const date = new Date(timeStr);
const now = new Date(); const now = new Date();
const diff = now - date; const diff = now - date;
if (diff < 60000) return '刚刚'; if (diff < 60000) return "刚刚";
if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'; if (diff < 3600000) return Math.floor(diff / 60000) + "分钟前";
if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'; if (diff < 86400000) return Math.floor(diff / 3600000) + "小时前";
return date.toLocaleDateString(); return date.toLocaleDateString();
} catch { } catch {
return timeStr; return timeStr;
} }
}; };
// 格式化健康检查时间 // 格式化健康检查时间
const formatHealthCheck = (timeStr) => { const formatHealthCheck = (timeStr) => {
if (!timeStr) return 'N/A'; if (!timeStr) return "N/A";
try { try {
const date = new Date(timeStr); const date = new Date(timeStr);
const now = new Date(); const now = new Date();
const diff = now - date; const diff = now - date;
if (diff > 86400000) return '⚠️ 检查超时'; // 超过1天 if (diff > 86400000) return "⚠️ 检查超时"; // 超过1天
if (diff > 3600000) return '⚠️ 检查延迟'; // 超过1小时 if (diff > 3600000) return "⚠️ 检查延迟"; // 超过1小时
if (diff < 60000) return '✅ 刚刚'; if (diff < 60000) return "✅ 刚刚";
if (diff < 3600000) return `✅ ${Math.floor(diff / 60000)}分钟前`; if (diff < 3600000) return `✅ ${Math.floor(diff / 60000)}分钟前`;
return `✅ ${Math.floor(diff / 3600000)}小时前`; return `✅ ${Math.floor(diff / 3600000)}小时前`;
} catch { } catch {
return timeStr; return timeStr;
} }
}; };
container.innerHTML += ` container.innerHTML += `
<div class="server-card ${statusClass}"> <div class="server-card ${statusClass}">
<div class="server-header"> <div class="server-header">
<h4>${server.name || '未命名'}</h4> <h4>${server.name || "未命名"}</h4>
<span class="server-url">📍 ${server.http_url}</span> <span class="server-url">📍 ${server.http_url}</span>
</div> </div>
<div class="server-info"> <div class="server-info">
<div class="info-item"> <div class="info-item">
<span class="status-icon">${server.status === 'online' ? '🟢' : '🔴'}</span> <span class="status-icon">${
<span class="status-text">${server.status === 'online' ? '在线' : '离线'}</span> server.status === "online" ? "🟢" : "🔴"
}</span>
<span class="status-text">${
server.status === "online" ? "在线" : "离线"
}</span>
</div> </div>
<span class="info-separator">|</span> <span class="info-separator">|</span>
<div class="info-item"> <div class="info-item">
<span class="status-text">任务: ${server.current_tasks || 0}/${server.max_concurrent_tasks || 1}</span> <span class="status-text">任务: ${
server.current_tasks || 0
}/${server.max_concurrent_tasks || 1}</span>
</div> </div>
<span class="info-separator">|</span> <span class="info-separator">|</span>
<div class="info-item"> <div class="info-item">
<span class="status-text">检查: ${formatHealthCheck(server.last_health_check)}</span> <span class="status-text">检查: ${formatHealthCheck(
server.last_health_check
)}</span>
</div> </div>
</div> </div>
${server.error ? `<div class="error-message">${server.error}</div>` : ''} ${
server.error
? `<div class="error-message">${server.error}</div>`
: ""
}
</div> </div>
`; `;
}); });
} }
function updateRecentTasks(tasks) { function updateRecentTasks(tasks) {
const container = document.getElementById('recent-tasks'); const container = document.getElementById("recent-tasks");
container.innerHTML = ''; container.innerHTML = "";
if (tasks.length === 0) { if (tasks.length === 0) {
container.innerHTML = '<p style="text-align: center; color: #7f8c8d;">暂无任务记录</p>'; container.innerHTML =
return; '<p style="text-align: center; color: #7f8c8d;">暂无任务记录</p>';
} return;
}
tasks.forEach(task => { tasks.forEach((task) => {
const statusClass = 'status-' + task.status.toLowerCase(); const statusClass = "status-" + task.status.toLowerCase();
const statusText = { const statusText =
'pending': '等待中', {
'running': '运行中', pending: "等待中",
'completed': '已完成', running: "运行中",
'failed': '失败' completed: "已完成",
}[task.status] || task.status; failed: "失败",
}[task.status] || task.status;
// 格式化时间 // 格式化时间
const formatTime = (timeStr) => { const formatTime = (timeStr) => {
if (!timeStr) return 'N/A'; if (!timeStr) return "N/A";
try { try {
return new Date(timeStr).toLocaleString(); return new Date(timeStr).toLocaleString();
} catch { } catch {
return timeStr; return timeStr;
} }
}; };
// 格式化结果数据 // 格式化结果数据
const formatResult = (result) => { const formatResult = (result) => {
if (!result) return '暂无结果'; if (!result) return "暂无结果";
try { try {
const parsed = JSON.parse(result); const parsed = JSON.parse(result);
if (typeof parsed === 'object') { if (typeof parsed === "object") {
// 如果是对象，尝试提取关键信息 // 如果是对象，尝试提取关键信息
if (parsed.images && Array.isArray(parsed.images)) { if (parsed.images && Array.isArray(parsed.images)) {
return `生成图片: ${parsed.images.length} 张\n完整结果: ${JSON.stringify(parsed, null, 2)}`; return `生成图片: ${
} parsed.images.length
if (parsed.output && typeof parsed.output === 'object') { } 张\n完整结果: ${JSON.stringify(parsed, null, 2)}`;
return `输出数据: ${Object.keys(parsed.output).length} 项\n完整结果: ${JSON.stringify(parsed, null, 2)}`; }
} if (parsed.output && typeof parsed.output === "object") {
return `完整结果: ${JSON.stringify(parsed, null, 2)}`; return `输出数据: ${
} Object.keys(parsed.output).length
return `完整结果: ${String(result)}`; } 项\n完整结果: ${JSON.stringify(parsed, null, 2)}`;
} catch { }
return `完整结果: ${String(result)}`; return `完整结果: ${JSON.stringify(parsed, null, 2)}`;
} }
}; return `完整结果: ${String(result)}`;
} catch {
return `完整结果: ${String(result)}`;
}
};
container.innerHTML += ` container.innerHTML += `
<div class="task-item"> <div class="task-item">
<div class="task-header"> <div class="task-header">
<div class="task-name">${task.workflow_name || '未命名工作流'}</div> <div class="task-name">${
task.workflow_name || "未命名工作流"
}</div>
<span class="task-status ${statusClass}">${statusText}</span> <span class="task-status ${statusClass}">${statusText}</span>
</div> </div>
<div class="task-meta"> <div class="task-meta">
<div>ID: ${task.id}</div> <div>ID: ${task.id}</div>
<div>创建时间: ${formatTime(task.created_at)}</div> <div>创建时间: ${formatTime(task.created_at)}</div>
${task.completed_at ? `<div>完成时间: ${formatTime(task.completed_at)}</div>` : ''} ${
task.completed_at
? `<div>完成时间: ${formatTime(
task.completed_at
)}</div>`
: ""
}
</div> </div>
${task.error_message ? `<div class="task-error">❌ 错误: ${task.error_message}</div>` : ''} ${
${task.result ? `<div class="task-result">📊 ${formatResult(task.result)}</div>` : ''} task.error_message
? `<div class="task-error">❌ 错误: ${task.error_message}</div>`
: ""
}
${
task.result
? `<div class="task-result">📊 ${formatResult(
task.result
)}</div>`
: ""
}
</div> </div>
`; `;
}); });
} }
// 页面加载时自动刷新数据 // 页面加载时自动刷新数据
document.addEventListener('DOMContentLoaded', refreshData); document.addEventListener("DOMContentLoaded", refreshData);
// 每30秒自动刷新一次 // 每30秒自动刷新一次
setInterval(refreshData, 30000); setInterval(refreshData, 30000);