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