ComfyUI-WorkflowPublisher/workflow_service/static/js/monitor.js

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);
    }
}

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 += `
            <div class="server-card ${statusClass}">
                <div class="server-header">
                    <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>
                    </div>
                    <span class="info-separator">|</span>
                    <div class="info-item">
                        <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>
                    </div>
                </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} 张`;
                    }
                    if (parsed.output && typeof parsed.output === 'object') {
                        return `输出数据: ${Object.keys(parsed.output).length} 项`;
                    }
                    return `结果数据: ${JSON.stringify(parsed).substring(0, 100)}...`;
                }
                return `结果: ${String(result).substring(0, 100)}...`;
            } catch {
                return `结果: ${String(result).substring(0, 100)}...`;
            }
        };
        
        container.innerHTML += `
            <div class="task-item">
                <div class="task-header">
                    <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>` : ''}
                </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);

// 每30秒自动刷新一次
setInterval(refreshData, 30000);