新增Windows代理程序支持

backend/static/js/app.js

@@ -224,6 +224,21 @@ function switchPage() {
                 serverInfoDisplay.innerHTML = `<p class="text-red-500">无效的服务器ID</p>`;
             }
         }
+    } else if (hash === '#alarms') {
+        showContent('alarmsContent');
+        loadAlarmsList();
+        // 清除当前设备ID
+        state.currentDeviceID = '';
+    } else if (hash === '#alarm-info' || hash.startsWith('#alarm-info/')) {
+        showContent('alarm-infoContent');
+        // 清除当前设备ID
+        state.currentDeviceID = '';
+        // 提取告警ID并加载详情
+        let alarmId = '';
+        if (hash.startsWith('#alarm-info/')) {
+            alarmId = hash.split('/')[1];
+        }
+        loadAlarmDetails(alarmId);
     } else {
         showContent('homeContent');
         loadHomeData();
@@ -237,6 +252,8 @@ function hideAllContent() {
     document.getElementById('serversContent').classList.add('hidden');
     document.getElementById('serverMonitorContent').classList.add('hidden');
     document.getElementById('devicesContent').classList.add('hidden');
+    document.getElementById('alarmsContent').classList.add('hidden');
+    document.getElementById('alarm-infoContent').classList.add('hidden');
 }
 
 function showContent(contentId) {
@@ -440,7 +457,7 @@ function renderAlarmList(alarmData) {
     
     alarmData.forEach(alarm => {
         const alarmItem = document.createElement('div');
-        alarmItem.className = `p-4 bg-gray-50 rounded-lg border-l-4 ${getAlarmBorderColor(alarm.level)}`;
+        alarmItem.className = `p-4 bg-gray-50 rounded-lg border-l-4 ${getAlarmBorderColor(alarm.level)} cursor-pointer hover:shadow-md transition-all`;
         
         alarmItem.innerHTML = `
             <div class="flex justify-between items-start">
@@ -455,6 +472,11 @@ function renderAlarmList(alarmData) {
             </div>
         `;
         
+        // 添加点击事件，跳转到告警详情页面
+        alarmItem.addEventListener('click', () => {
+            window.location.hash = `#alarm-info/${alarm.id}`;
+        });
+        
         alarmList.appendChild(alarmItem);
     });
 }
@@ -478,6 +500,442 @@ function getAlarmIconColor(level) {
     }
 }
 
+// 获取告警级别文本
+function getAlarmLevelText(level) {
+    switch(level) {
+        case 'error': return '错误';
+        case 'warning': return '警告';
+        case 'info': return '信息';
+        default: return '未知';
+    }
+}
+
+// 获取告警级别样式类
+function getAlarmLevelClass(level) {
+    switch(level) {
+        case 'error': return 'bg-red-100 text-red-800';
+        case 'warning': return 'bg-yellow-100 text-yellow-800';
+        case 'info': return 'bg-blue-100 text-blue-800';
+        default: return 'bg-gray-100 text-gray-800';
+    }
+}
+
+// 告警管理相关功能
+let alarmsPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: 0,
+    totalPages: 0,
+    allAlarms: [],
+    filteredAlarms: []
+};
+
+// 加载告警列表
+async function loadAlarmsList(page = 1) {
+    try {
+        const response = await fetch(`${API_BASE_URL}/alarms`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        const alarms = data.alarms || [];
+        
+        // 更新告警总数
+        const alarmCount = document.getElementById('alarmCount');
+        if (alarmCount) {
+            alarmCount.textContent = alarms.length;
+        }
+        
+        // 更新分页状态
+        alarmsPagination.allAlarms = alarms;
+        alarmsPagination.filteredAlarms = [...alarms];
+        alarmsPagination.totalItems = alarms.length;
+        alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+        alarmsPagination.currentPage = page;
+        
+        // 渲染告警表格
+        renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+            (alarmsPagination.currentPage - 1) * alarmsPagination.itemsPerPage,
+            alarmsPagination.currentPage * alarmsPagination.itemsPerPage
+        ));
+        
+        // 创建分页控件
+        createPaginationControls(
+            document.getElementById('alarmsPagination'),
+            alarmsPagination,
+            loadAlarmsList
+        );
+    } catch (error) {
+        console.error('加载告警列表失败:', error);
+        
+        // 由于后端尚未实现，使用模拟数据
+        const mockAlarms = [
+            {
+                "id": "alarm-1",
+                "time": new Date(Date.now() - 3600000).toISOString(),
+                "device": "服务器A",
+                "level": "error",
+                "message": "CPU使用率超过90%",
+                "status": "unacknowledged"
+            },
+            {
+                "id": "alarm-2",
+                "time": new Date(Date.now() - 7200000).toISOString(),
+                "device": "服务器B",
+                "level": "warning",
+                "message": "内存使用率接近80%",
+                "status": "unacknowledged"
+            },
+            {
+                "id": "alarm-3",
+                "time": new Date(Date.now() - 10800000).toISOString(),
+                "device": "服务器C",
+                "level": "info",
+                "message": "硬盘空间充足",
+                "status": "acknowledged"
+            },
+            {
+                "id": "alarm-4",
+                "time": new Date(Date.now() - 14400000).toISOString(),
+                "device": "服务器D",
+                "level": "error",
+                "message": "网络连接中断",
+                "status": "unacknowledged"
+            },
+            {
+                "id": "alarm-5",
+                "time": new Date(Date.now() - 18000000).toISOString(),
+                "device": "服务器E",
+                "level": "warning",
+                "message": "CPU温度过高",
+                "status": "acknowledged"
+            }
+        ];
+        
+        // 更新告警总数
+        const alarmCount = document.getElementById('alarmCount');
+        if (alarmCount) {
+            alarmCount.textContent = mockAlarms.length;
+        }
+        
+        // 更新分页状态
+        alarmsPagination.allAlarms = mockAlarms;
+        alarmsPagination.filteredAlarms = [...mockAlarms];
+        alarmsPagination.totalItems = mockAlarms.length;
+        alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+        alarmsPagination.currentPage = page;
+        
+        // 渲染告警表格
+        renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+            (alarmsPagination.currentPage - 1) * alarmsPagination.itemsPerPage,
+            alarmsPagination.currentPage * alarmsPagination.itemsPerPage
+        ));
+        
+        // 创建分页控件
+        createPaginationControls(
+            document.getElementById('alarmsPagination'),
+            alarmsPagination,
+            loadAlarmsList
+        );
+        
+        // 显示提示信息
+        showToast('使用模拟数据显示告警列表', 'info');
+    }
+}
+
+// 渲染告警表格
+function renderAlarmsTable(alarms) {
+    const alarmsTableBody = document.getElementById('alarmsTableBody');
+    if (!alarmsTableBody) return;
+    
+    alarmsTableBody.innerHTML = '';
+    
+    if (alarms.length === 0) {
+        alarmsTableBody.innerHTML = `
+            <tr>
+                <td colspan="6" class="px-6 py-12 text-center text-gray-500">
+                    <div class="flex items-center justify-center">
+                        <i class="fa fa-info-circle mr-2"></i>
+                        暂无告警数据
+                    </div>
+                </td>
+            </tr>
+        `;
+        return;
+    }
+    
+    alarms.forEach(alarm => {
+        const alarmRow = document.createElement('tr');
+        alarmRow.className = 'hover:bg-gray-50 transition-colors cursor-pointer';
+        
+        // 告警级别样式
+        const levelClass = getAlarmLevelClass(alarm.level);
+        
+        alarmRow.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${alarm.time}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${alarm.device || '未知设备'}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="px-2 py-1 rounded-full text-xs font-medium ${levelClass}">${getAlarmLevelText(alarm.level)}</span>
+            </td>
+            <td class="px-6 py-4 text-sm text-gray-900">${alarm.message}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">${alarm.status || '未确认'}</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <button onclick="acknowledgeAlarm('${alarm.id}')" class="text-yellow-600 hover:text-yellow-900 mr-3">
+                    <i class="fa fa-check-circle"></i> 确认
+                </button>
+                <button onclick="clearAlarm('${alarm.id}')" class="text-red-600 hover:text-red-900">
+                    <i class="fa fa-trash"></i> 清除
+                </button>
+            </td>
+        `;
+        
+        // 添加点击事件，跳转到告警详情页面
+        alarmRow.addEventListener('click', (e) => {
+            // 如果点击的是按钮，不执行跳转
+            if (e.target.closest('button')) {
+                return;
+            }
+            window.location.hash = `#alarm-info/${alarm.id}`;
+        });
+        
+        alarmsTableBody.appendChild(alarmRow);
+    });
+}
+
+// 确认告警
+function acknowledgeAlarm(alarmId) {
+    // 由于后端尚未实现，仅显示提示信息
+    showToast('告警确认功能需要后端支持', 'warning');
+}
+
+// 清除告警
+function clearAlarm(alarmId) {
+    // 由于后端尚未实现，仅显示提示信息
+    showToast('告警清除功能需要后端支持', 'warning');
+}
+
+// 应用告警过滤条件
+function applyAlarmFilters() {
+    const searchKeyword = document.getElementById('alarmSearch').value.toLowerCase();
+    const levelFilter = document.getElementById('alarmLevelFilter').value;
+    const statusFilter = document.getElementById('alarmStatusFilter').value;
+    
+    // 过滤告警列表
+    alarmsPagination.filteredAlarms = alarmsPagination.allAlarms.filter(alarm => {
+        const matchesKeyword = !searchKeyword || alarm.message.toLowerCase().includes(searchKeyword) || 
+                              (alarm.device && alarm.device.toLowerCase().includes(searchKeyword));
+        const matchesLevel = !levelFilter || alarm.level === levelFilter;
+        const matchesStatus = !statusFilter || alarm.status === statusFilter;
+        
+        return matchesKeyword && matchesLevel && matchesStatus;
+    });
+    
+    // 更新分页状态
+    alarmsPagination.totalItems = alarmsPagination.filteredAlarms.length;
+    alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+    alarmsPagination.currentPage = 1;
+    
+    // 重新渲染表格
+    renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+        (alarmsPagination.currentPage - 1) * alarmsPagination.itemsPerPage,
+        alarmsPagination.currentPage * alarmsPagination.itemsPerPage
+    ));
+    
+    // 更新分页控件
+    createPaginationControls(
+        document.getElementById('alarmsPagination'),
+        alarmsPagination,
+        loadAlarmsList
+    );
+}
+
+// 清除告警过滤条件
+function clearAlarmFilters() {
+    document.getElementById('alarmSearch').value = '';
+    document.getElementById('alarmLevelFilter').value = '';
+    document.getElementById('alarmStatusFilter').value = '';
+    
+    // 重置过滤后的告警列表
+    alarmsPagination.filteredAlarms = [...alarmsPagination.allAlarms];
+    
+    // 更新分页状态
+    alarmsPagination.totalItems = alarmsPagination.filteredAlarms.length;
+    alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+    alarmsPagination.currentPage = 1;
+    
+    // 重新渲染表格
+    renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+        (alarmsPagination.currentPage - 1) * alarmsPagination.itemsPerPage,
+        alarmsPagination.currentPage * alarmsPagination.itemsPerPage
+    ));
+    
+    // 更新分页控件
+    createPaginationControls(
+        document.getElementById('alarmsPagination'),
+        alarmsPagination,
+        loadAlarmsList
+    );
+}
+
+// 确认所有告警
+function acknowledgeAllAlarms() {
+    // 由于后端尚未实现，仅显示提示信息
+    showToast('确认所有告警功能需要后端支持', 'warning');
+}
+
+// 清除所有告警
+function clearAllAlarms() {
+    // 由于后端尚未实现，仅显示提示信息
+    showToast('清除所有告警功能需要后端支持', 'warning');
+}
+
+// 获取告警级别样式类
+function getAlarmLevelClass(level) {
+    switch(level) {
+        case 'info': return 'bg-blue-100 text-blue-800';
+        case 'warning': return 'bg-yellow-100 text-yellow-800';
+        case 'error': return 'bg-red-100 text-red-800';
+        case 'critical': return 'bg-red-900 text-white';
+        default: return 'bg-gray-100 text-gray-800';
+    }
+}
+
+// 获取告警级别中文文本
+function getAlarmLevelText(level) {
+    switch(level) {
+        case 'info': return '信息';
+        case 'warning': return '警告';
+        case 'error': return '错误';
+        case 'critical': return '严重';
+        default: return '未知';
+    }
+}
+
+// 确认告警
+async function acknowledgeAlarm(alarmId) {
+    try {
+        // 这里应该调用API来确认告警
+        console.log('确认告警:', alarmId);
+        showToast('告警已确认', 'success');
+        // 重新加载告警列表
+        loadAlarmsList(alarmsPagination.currentPage);
+    } catch (error) {
+        console.error('确认告警失败:', error);
+        showToast('确认告警失败', 'error');
+    }
+}
+
+// 清除告警
+async function clearAlarm(alarmId) {
+    try {
+        // 这里应该调用API来清除告警
+        console.log('清除告警:', alarmId);
+        showToast('告警已清除', 'success');
+        // 重新加载告警列表
+        loadAlarmsList(alarmsPagination.currentPage);
+    } catch (error) {
+        console.error('清除告警失败:', error);
+        showToast('清除告警失败', 'error');
+    }
+}
+
+// 确认所有告警
+async function acknowledgeAllAlarms() {
+    try {
+        // 这里应该调用API来确认所有告警
+        console.log('确认所有告警');
+        showToast('所有告警已确认', 'success');
+        // 重新加载告警列表
+        loadAlarmsList(alarmsPagination.currentPage);
+    } catch (error) {
+        console.error('确认所有告警失败:', error);
+        showToast('确认所有告警失败', 'error');
+    }
+}
+
+// 清除所有告警
+async function clearAllAlarms() {
+    try {
+        // 这里应该调用API来清除所有告警
+        console.log('清除所有告警');
+        showToast('所有告警已清除', 'success');
+        // 重新加载告警列表
+        loadAlarmsList(alarmsPagination.currentPage);
+    } catch (error) {
+        console.error('清除所有告警失败:', error);
+        showToast('清除所有告警失败', 'error');
+    }
+}
+
+// 应用告警过滤
+function applyAlarmFilters() {
+    const searchInput = document.getElementById('alarmSearchInput');
+    const levelFilter = document.getElementById('alarmLevelFilter');
+    
+    const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
+    const level = levelFilter ? levelFilter.value : '';
+    
+    // 过滤告警
+    alarmsPagination.filteredAlarms = alarmsPagination.allAlarms.filter(alarm => {
+        const matchesSearch = !searchTerm || 
+            (alarm.message && alarm.message.toLowerCase().includes(searchTerm)) ||
+            (alarm.device && alarm.device.toLowerCase().includes(searchTerm));
+        const matchesLevel = !level || alarm.level === level;
+        
+        return matchesSearch && matchesLevel;
+    });
+    
+    // 更新分页信息
+    alarmsPagination.totalItems = alarmsPagination.filteredAlarms.length;
+    alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+    alarmsPagination.currentPage = 1;
+    
+    // 重新渲染
+    renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+        0, alarmsPagination.itemsPerPage
+    ));
+    
+    // 更新分页控件
+    createPaginationControls(
+        document.getElementById('alarmsPagination'),
+        alarmsPagination,
+        loadAlarmsList
+    );
+}
+
+// 清除告警过滤
+function clearAlarmFilters() {
+    const searchInput = document.getElementById('alarmSearchInput');
+    const levelFilter = document.getElementById('alarmLevelFilter');
+    
+    if (searchInput) {
+        searchInput.value = '';
+    }
+    if (levelFilter) {
+        levelFilter.value = '';
+    }
+    
+    // 重置过滤
+    alarmsPagination.filteredAlarms = [...alarmsPagination.allAlarms];
+    alarmsPagination.totalItems = alarmsPagination.filteredAlarms.length;
+    alarmsPagination.totalPages = Math.ceil(alarmsPagination.totalItems / alarmsPagination.itemsPerPage);
+    alarmsPagination.currentPage = 1;
+    
+    // 重新渲染
+    renderAlarmsTable(alarmsPagination.filteredAlarms.slice(
+        0, alarmsPagination.itemsPerPage
+    ));
+    
+    // 更新分页控件
+    createPaginationControls(
+        document.getElementById('alarmsPagination'),
+        alarmsPagination,
+        loadAlarmsList
+    );
+}
+
 // 加载服务器数量
 async function loadServerCount() {
     try {
@@ -498,6 +956,113 @@ async function loadServerCount() {
     }
 }
 
+// 告警详情模拟数据
+let alertDetailsData = {
+    "id": "ALARM-20240520-0001",
+    "time": "2024-05-20 14:30:45",
+    "device": "服务器-01",
+    "level": "critical",
+    "message": "CPU使用率超过阈值",
+    "description": "服务器-01的CPU使用率持续5分钟超过90%，当前使用率为95%。请立即检查系统负载和运行中的进程。",
+    "status": "未处理",
+    "handler": "",
+    "handleTime": "",
+    "handleResult": ""
+};
+
+// 加载告警详情
+function loadAlarmDetails(alarmId) {
+    // 获取告警详情数据（这里使用模拟数据，实际项目中应从API获取）
+    let alarmDetails = alertDetailsData;
+    
+    // 如果提供了告警ID，尝试从告警列表中找到对应的告警
+    if (alarmId && alarmsPagination.allAlarms.length > 0) {
+        const foundAlarm = alarmsPagination.allAlarms.find(a => a.id === alarmId);
+        if (foundAlarm) {
+            // 将找到的告警转换为详情格式
+            alarmDetails = {
+                id: foundAlarm.id,
+                time: foundAlarm.time,
+                device: foundAlarm.device,
+                level: foundAlarm.level,
+                message: foundAlarm.message,
+                description: `详细描述: ${foundAlarm.message}`,
+                status: foundAlarm.status,
+                handler: "",
+                handleTime: "",
+                handleResult: ""
+            };
+        }
+    }
+    
+    // 渲染告警详情
+    document.getElementById('alarmId').textContent = alarmDetails.id || '未设置';
+    document.getElementById('alarmTime').textContent = alarmDetails.time || '未设置';
+    document.getElementById('alarmDevice').textContent = alarmDetails.device || '未设置';
+    document.getElementById('alarmLevel').textContent = getAlarmLevelText(alarmDetails.level) || '未设置';
+    document.getElementById('alarmStatus').textContent = alarmDetails.status || '未处理';
+    document.getElementById('alarmMessage').textContent = alarmDetails.message || '无';
+    document.getElementById('alarmDescription').textContent = alarmDetails.description || '无';
+    document.getElementById('alarmHandler').textContent = alarmDetails.handler || '未处理';
+    document.getElementById('alarmHandleTime').textContent = alarmDetails.handleTime || '未处理';
+    document.getElementById('alarmHandleResult').textContent = alarmDetails.handleResult || '未处理';
+    
+    // 添加返回按钮事件
+    const backToAlarmListBtn = document.getElementById('backToAlarmList');
+    if (backToAlarmListBtn) {
+        // 先移除可能存在的事件监听器
+        backToAlarmListBtn.removeEventListener('click', backToAlarmListHandler);
+        // 添加新的事件监听器
+        backToAlarmListBtn.addEventListener('click', backToAlarmListHandler);
+    }
+    
+    // 添加确认和清除按钮事件
+    const acknowledgeBtn = document.getElementById('alarmAcknowledgeBtn');
+    if (acknowledgeBtn) {
+        acknowledgeBtn.removeEventListener('click', acknowledgeAlarmHandler);
+        acknowledgeBtn.addEventListener('click', acknowledgeAlarmHandler.bind(null, alarmDetails.id));
+    }
+    
+    const clearBtn = document.getElementById('alarmClearBtn');
+    if (clearBtn) {
+        clearBtn.removeEventListener('click', clearAlarmHandler);
+        clearBtn.addEventListener('click', clearAlarmHandler.bind(null, alarmDetails.id));
+    }
+}
+
+// 返回告警列表的事件处理函数
+function backToAlarmListHandler() {
+    window.location.hash = '#alarms';
+}
+
+// 确认告警的事件处理函数
+async function acknowledgeAlarmHandler(alarmId) {
+    try {
+        // 这里应该调用API来确认告警
+        console.log('确认告警:', alarmId);
+        showToast('告警已确认', 'success');
+        // 返回告警列表页面
+        window.location.hash = '#alarms';
+    } catch (error) {
+        console.error('确认告警失败:', error);
+        showToast('确认告警失败', 'error');
+    }
+}
+
+// 清除告警的事件处理函数
+async function clearAlarmHandler(alarmId) {
+    try {
+        // 这里应该调用API来清除告警
+        console.log('清除告警:', alarmId);
+        showToast('告警已清除', 'success');
+        // 返回告警列表页面
+        window.location.hash = '#alarms';
+    } catch (error) {
+        console.error('清除告警失败:', error);
+        showToast('清除告警失败', 'error');
+    }
+}
+
 // 加载所有服务器
 async function loadAllServers() {
     try {
@@ -1731,20 +2296,33 @@ async function loadServerInfo(deviceId) {
         }
         const deviceData = await deviceResponse.json();
         
-        // 获取硬件信息，特别是操作系统信息
+        // 获取硬件信息，特别是操作系统和CPU型号信息
         const hardwareResponse = await fetch(`${API_BASE_URL}/metrics/hardware?device_id=${deviceId}`);
         let osFullname = '未知';
+        let cpuModel = '未知';
         if (hardwareResponse.ok) {
             const hardwareData = await hardwareResponse.json();
-            if (hardwareData && hardwareData.hardware && hardwareData.hardware.os) {
-                osFullname = hardwareData.hardware.os.fullname || '未知';
+            if (hardwareData && hardwareData.hardware) {
+                // 获取操作系统信息
+                if (hardwareData.hardware.os) {
+                    osFullname = hardwareData.hardware.os.fullname || '未知';
+                }
+                
+                // 获取CPU型号信息
+                if (hardwareData.hardware.cpu) {
+                    // 尝试从不同字段获取CPU型号
+                    const cpu = hardwareData.hardware.cpu;
+                    cpuModel = cpu.model || cpu.name || cpu.brand || '未知';
+                    // 确保CPU型号是字符串类型
+                    cpuModel = typeof cpuModel === 'string' ? cpuModel : '未知';
+                }
             }
         }
         
-        // 更新服务器信息显示
+        // 更新服务器信息显示，增加CPU型号
         const serverInfoDisplay = document.getElementById('serverInfoDisplay');
         if (serverInfoDisplay) {
-            serverInfoDisplay.innerHTML = `<p>服务器名称: <strong>${deviceData.device.name || deviceId}</strong> | IP地址: <strong>${deviceData.device.ip || '未知'}</strong> | 操作系统: <strong>${osFullname}</strong></p>`;
+            serverInfoDisplay.innerHTML = `<p>服务器名称: <strong>${deviceData.device.name || deviceId}</strong> | IP地址: <strong>${deviceData.device.ip || '未知'}</strong> | 操作系统: <strong>${osFullname}</strong> | CPU型号: <strong>${cpuModel}</strong></p>`;
         }
         
         // 初始化状态卡片