From 8e818887d5a1233b663ad5639991f5e29b7f526b Mon Sep 17 00:00:00 2001
From: iHeyTang <dehui1012@qq.com>
Date: Mon, 18 Aug 2025 13:36:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=EF=BC=8C=E5=A2=9E=E5=BC=BA=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=92=8C=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 workflow_service/routes/monitor.py | 370 +++++++++++++++++++++--------
 1 file changed, 266 insertions(+), 104 deletions(-)
diff --git a/workflow_service/routes/monitor.py b/workflow_service/routes/monitor.py
index 48143c4..168d280 100644
--- a/workflow_service/routes/monitor.py
+++ b/workflow_service/routes/monitor.py
@@ -29,146 +29,267 @@ async def monitor_dashboard():
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>ComfyUI 工作流服务监控</title>
+        <title>ComfyUI 工作流监控</title>
         <style>
-            body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            * {
                 margin: 0;
-                padding: 20px;
-                background-color: #f5f5f5;
+                padding: 0;
+                box-sizing: border-box;
             }
+            
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+                min-height: 100vh;
+                padding: 24px;
+                color: #2c3e50;
+                line-height: 1.6;
+            }
+            
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
             }
-            .header {
+            
+            .refresh-btn {
                 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                 color: white;
-                padding: 20px;
-                border-radius: 10px;
-                margin-bottom: 20px;
-                text-align: center;
+                border: none;
+                padding: 12px 24px;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 14px;
+                font-weight: 500;
+                margin-bottom: 24px;
+                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+                transition: all 0.3s ease;
             }
+            
+            .refresh-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+            }
+            
             .stats-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                 gap: 20px;
-                margin-bottom: 20px;
+                margin-bottom: 24px;
             }
+            
             .stat-card {
-                background: white;
-                padding: 20px;
-                border-radius: 10px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                background: rgba(255, 255, 255, 0.95);
+                padding: 24px;
+                border-radius: 16px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
                 text-align: center;
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                transition: all 0.3s ease;
             }
+            
+            .stat-card:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+            }
+            
             .stat-number {
-                font-size: 2.5em;
-                font-weight: bold;
-                color: #667eea;
-                margin: 10px 0;
+                font-size: 2.2em;
+                font-weight: 700;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                margin: 8px 0;
             }
+            
             .stat-label {
-                color: #666;
+                color: #7f8c8d;
                 font-size: 0.9em;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
             }
+            
             .section {
-                background: white;
-                padding: 20px;
-                border-radius: 10px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-                margin-bottom: 20px;
+                background: rgba(255, 255, 255, 0.95);
+                padding: 24px;
+                border-radius: 16px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+                margin-bottom: 24px;
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
             }
+            
             .section h3 {
-                margin-top: 0;
-                color: #333;
-                border-bottom: 2px solid #667eea;
-                padding-bottom: 10px;
+                margin-bottom: 20px;
+                color: #2c3e50;
+                font-size: 1.3em;
+                font-weight: 600;
+                display: flex;
+                align-items: center;
+                gap: 8px;
             }
+            
             .server-status {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-                gap: 15px;
-                margin-top: 15px;
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+                gap: 16px;
             }
+            
             .server-card {
-                border: 1px solid #ddd;
-                border-radius: 8px;
-                padding: 15px;
-                background: #fafafa;
+                border: 1px solid #e1e8ed;
+                border-radius: 12px;
+                padding: 20px;
+                background: #f8f9fa;
+                transition: all 0.3s ease;
+                position: relative;
+                overflow: hidden;
             }
+            
+            .server-card::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 4px;
+                background: #e1e8ed;
+            }
+            
             .server-card.online {
-                border-color: #4CAF50;
-                background: #f1f8e9;
+                border-color: #27ae60;
+                background: #f8fff9;
             }
+            
+            .server-card.online::before {
+                background: #27ae60;
+            }
+            
             .server-card.offline {
-                border-color: #f44336;
-                background: #ffebee;
+                border-color: #e74c3c;
+                background: #fff8f8;
             }
+            
+            .server-card.offline::before {
+                background: #e74c3c;
+            }
+            
+            .server-card h4 {
+                color: #2c3e50;
+                margin-bottom: 12px;
+                font-size: 1.1em;
+                font-weight: 600;
+            }
+            
+            .server-info {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 12px;
+                font-size: 0.9em;
+            }
+            
+            .info-item {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+            }
+            
+            .info-label {
+                color: #7f8c8d;
+                font-weight: 500;
+            }
+            
+            .info-value {
+                color: #2c3e50;
+                font-weight: 600;
+            }
+            
             .status-indicator {
                 display: inline-block;
-                width: 12px;
-                height: 12px;
+                width: 8px;
+                height: 8px;
                 border-radius: 50%;
                 margin-right: 8px;
             }
-            .status-online { background-color: #4CAF50; }
-            .status-offline { background-color: #f44336; }
-            .refresh-btn {
-                background: #667eea;
-                color: white;
-                border: none;
-                padding: 10px 20px;
-                border-radius: 5px;
-                cursor: pointer;
-                font-size: 14px;
-                margin-bottom: 20px;
-            }
-            .refresh-btn:hover {
-                background: #5a6fd8;
-            }
+            
+            .status-online { background-color: #27ae60; }
+            .status-offline { background-color: #e74c3c; }
+            
             .task-list {
-                max-height: 400px;
+                max-height: 500px;
                 overflow-y: auto;
             }
+            
             .task-item {
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                padding: 10px;
-                margin: 5px 0;
-                background: #f9f9f9;
+                border: 1px solid #e1e8ed;
+                border-radius: 8px;
+                padding: 16px;
+                margin: 8px 0;
+                background: #f8f9fa;
+                transition: all 0.3s ease;
             }
+            
+            .task-item:hover {
+                background: #ffffff;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+            
+            .task-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+            }
+            
+            .task-name {
+                font-weight: 600;
+                color: #2c3e50;
+            }
+            
             .task-status {
-                display: inline-block;
-                padding: 2px 8px;
-                border-radius: 3px;
+                padding: 4px 12px;
+                border-radius: 20px;
                 font-size: 0.8em;
+                font-weight: 600;
                 color: white;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+            
+            .status-pending { background: #f39c12; }
+            .status-running { background: #3498db; }
+            .status-completed { background: #27ae60; }
+            .status-failed { background: #e74c3c; }
+            
+            .task-meta {
+                color: #7f8c8d;
+                font-size: 0.85em;
+            }
+            
+            .error-message {
+                color: #e74c3c;
+                font-size: 0.85em;
+                margin-top: 8px;
+                padding: 8px;
+                background: #fff5f5;
+                border-radius: 6px;
+                border-left: 3px solid #e74c3c;
+            }
+            
+            @media (max-width: 768px) {
+                body { padding: 16px; }
+                .stats-grid { grid-template-columns: repeat(2, 1fr); }
+                .server-status { grid-template-columns: 1fr; }
+                .server-info { grid-template-columns: 1fr; }
             }
-            .status-pending { background: #ff9800; }
-            .status-running { background: #2196F3; }
-            .status-completed { background: #4CAF50; }
-            .status-failed { background: #f44336; }
         </style>
     </head>
     <body>
         <div class="container">
-            <div class="header">
-                <h1>🚀 ComfyUI 工作流服务监控</h1>
-                <p>实时监控系统状态、任务队列和服务器健康状态</p>
-            </div>
-            
             <button class="refresh-btn" onclick="refreshData()">🔄 刷新数据</button>
             
             <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-number" id="cpu-usage">--</div>
-                    <div class="stat-label">CPU 使用率</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-number" id="memory-usage">--</div>
-                    <div class="stat-label">内存使用率</div>
-                </div>
                 <div class="stat-card">
                     <div class="stat-number" id="running-tasks">--</div>
                     <div class="stat-label">运行中任务</div>
@@ -177,6 +298,14 @@ async def monitor_dashboard():
                     <div class="stat-number" id="pending-tasks">--</div>
                     <div class="stat-label">等待中任务</div>
                 </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="completed-tasks">--</div>
+                    <div class="stat-label">已完成任务</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="total-tasks">--</div>
+                    <div class="stat-label">24小时总任务</div>
+                </div>
             </div>
             
             <div class="section">
@@ -197,15 +326,12 @@ async def monitor_dashboard():
         <script>
             async function refreshData() {
                 try {
-                    // 获取系统状态
-                    const systemStats = await fetch('/monitor/system-stats').then(r => r.json());
-                    document.getElementById('cpu-usage').textContent = systemStats.cpu_percent + '%';
-                    document.getElementById('memory-usage').textContent = systemStats.memory_percent + '%';
-                    
                     // 获取任务状态
                     const taskStats = await fetch('/monitor/task-stats').then(r => r.json());
                     document.getElementById('running-tasks').textContent = taskStats.running_tasks;
                     document.getElementById('pending-tasks').textContent = taskStats.pending_tasks;
+                    document.getElementById('completed-tasks').textContent = taskStats.completed_tasks;
+                    document.getElementById('total-tasks').textContent = taskStats.total_tasks_24h;
                     
                     // 获取服务器状态
                     const serverStatus = await fetch('/monitor/server-status').then(r => r.json());
@@ -224,6 +350,11 @@ async def monitor_dashboard():
                 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';
@@ -232,7 +363,14 @@ async def monitor_dashboard():
                     const formatTime = (timeStr) => {
                         if (!timeStr) return 'N/A';
                         try {
-                            return new Date(timeStr).toLocaleString();
+                            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;
                         }
@@ -241,11 +379,26 @@ async def monitor_dashboard():
                     container.innerHTML += `
                         <div class="server-card ${statusClass}">
                             <h4>${server.http_url}</h4>
-                            <p><span class="status-indicator ${statusColor}"></span>${server.status}</p>
-                            <p><strong>任务状态:</strong> ${server.current_tasks || 0}/${server.max_concurrent_tasks || 1}</p>
-                            <p><strong>最后心跳:</strong> ${formatTime(server.last_heartbeat)}</p>
-                            <p><strong>最后检查:</strong> ${formatTime(server.last_health_check)}</p>
-                            ${server.error ? `<p><strong>错误:</strong> <span style="color: red;">${server.error}</span></p>` : ''}
+                            <div class="server-info">
+                                <div class="info-item">
+                                    <span class="status-indicator ${statusColor}"></span>
+                                    <span class="info-label">状态:</span>
+                                    <span class="info-value">${server.status === 'online' ? '在线' : '离线'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="info-label">任务:</span>
+                                    <span class="info-value">${server.current_tasks || 0}/${server.max_concurrent_tasks || 1}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="info-label">心跳:</span>
+                                    <span class="info-value">${formatTime(server.last_heartbeat)}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="info-label">检查:</span>
+                                    <span class="info-value">${formatTime(server.last_health_check)}</span>
+                                </div>
+                            </div>
+                            ${server.error ? `<div class="error-message">${server.error}</div>` : ''}
                         </div>
                     `;
                 });
@@ -255,20 +408,29 @@ async def monitor_dashboard():
                 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;
+                    
                     container.innerHTML += `
                         <div class="task-item">
-                            <div style="display: flex; justify-content: space-between; align-items: center;">
-                                <div>
-                                    <strong>${task.workflow_name}</strong>
-                                    <br>
-                                    <small>ID: ${task.id}</small>
-                                </div>
-                                <span class="task-status ${statusClass}">${task.status}</span>
+                            <div class="task-header">
+                                <div class="task-name">${task.workflow_name || '未命名工作流'}</div>
+                                <span class="task-status ${statusClass}">${statusText}</span>
                             </div>
-                            <div style="margin-top: 5px; color: #666;">
-                                <small>创建时间: ${new Date(task.created_at).toLocaleString()}</small>
+                            <div class="task-meta">
+                                <div>ID: ${task.id}</div>
+                                <div>创建时间: ${new Date(task.created_at).toLocaleString()}</div>
                             </div>
                         </div>
                     `;
