增加操作系统显示,以及磁盘信息显示

backend/static/js/app.js

@@ -1578,17 +1578,27 @@ async function loadServerInfo(deviceId) {
         // 将设备ID存储到全局状态
         state.currentDeviceID = deviceId;
         
-        const response = await fetch(`${API_BASE_URL}/devices/${deviceId}`);
-        if (!response.ok) {
+        // 获取服务器基本信息
+        const deviceResponse = await fetch(`${API_BASE_URL}/devices/${deviceId}`);
+        if (!deviceResponse.ok) {
             throw new Error('Failed to fetch server info');
         }
-        const data = await response.json();
-        const deviceData = data.device;
+        const deviceData = await deviceResponse.json();
+        
+        // 获取硬件信息，特别是操作系统信息
+        const hardwareResponse = await fetch(`${API_BASE_URL}/metrics/hardware?device_id=${deviceId}`);
+        let osFullname = '未知';
+        if (hardwareResponse.ok) {
+            const hardwareData = await hardwareResponse.json();
+            if (hardwareData && hardwareData.hardware && hardwareData.hardware.os) {
+                osFullname = hardwareData.hardware.os.fullname || '未知';
+            }
+        }
         
         // 更新服务器信息显示
         const serverInfoDisplay = document.getElementById('serverInfoDisplay');
         if (serverInfoDisplay) {
-            serverInfoDisplay.innerHTML = `<p>服务器名称: <strong>${deviceData.name || deviceId}</strong> | IP地址: <strong>${deviceData.ip || '未知'}</strong></p>`;
+            serverInfoDisplay.innerHTML = `<p>服务器名称: <strong>${deviceData.device.name || deviceId}</strong> | IP地址: <strong>${deviceData.device.ip || '未知'}</strong> | 操作系统: <strong>${osFullname}</strong></p>`;
         }
         
         // 初始化状态卡片
@@ -2807,9 +2817,6 @@ function bindEvents() {
     const currentTimeRangeDisplay = document.getElementById('currentTimeRangeDisplay');
     
     if (zoomOutBtn && zoomInBtn && currentTimeRangeDisplay) {
-        // 时间范围选项列表，用于缩放
-        const timeRanges = ['30m', '1h', '2h', '6h', '12h', '24h'];
-    }
     
     // 网卡选择和刷新按钮事件
     const networkInterfaceSelect = document.getElementById('networkInterface');
@@ -2837,6 +2844,7 @@ function bindEvents() {
             }
         });
     }
+    }
 }
 
 // 加载网卡列表
@@ -2949,6 +2957,9 @@ const updateTimeRangeDisplay = () => {
     });
 };
 
+// 时间范围选项列表，用于缩放
+const timeRanges = ['30m', '1h', '2h', '6h', '12h', '24h'];
+
 // 初始化显示
 updateTimeRangeDisplay();
 
@@ -2976,11 +2987,26 @@ const zoomInHandler = () => {
 };
 
 // 为所有放大按钮添加事件监听器
-document.getElementById('cpuZoomInBtn')?.addEventListener('click', zoomInHandler);
-document.getElementById('memoryZoomInBtn')?.addEventListener('click', zoomInHandler);
-document.getElementById('diskZoomInBtn')?.addEventListener('click', zoomInHandler);
-document.getElementById('networkZoomInBtn')?.addEventListener('click', zoomInHandler);
-document.getElementById('speedZoomInBtn')?.addEventListener('click', zoomInHandler);
+const cpuZoomInBtn = document.getElementById('cpuZoomInBtn');
+if (cpuZoomInBtn) {
+    cpuZoomInBtn.addEventListener('click', zoomInHandler);
+}
+const memoryZoomInBtn = document.getElementById('memoryZoomInBtn');
+if (memoryZoomInBtn) {
+    memoryZoomInBtn.addEventListener('click', zoomInHandler);
+}
+const diskZoomInBtn = document.getElementById('diskZoomInBtn');
+if (diskZoomInBtn) {
+    diskZoomInBtn.addEventListener('click', zoomInHandler);
+}
+const networkZoomInBtn = document.getElementById('networkZoomInBtn');
+if (networkZoomInBtn) {
+    networkZoomInBtn.addEventListener('click', zoomInHandler);
+}
+const speedZoomInBtn = document.getElementById('speedZoomInBtn');
+if (speedZoomInBtn) {
+    speedZoomInBtn.addEventListener('click', zoomInHandler);
+}
 
 // 缩小事件
 const zoomOutHandler = () => {
@@ -3006,11 +3032,26 @@ const zoomOutHandler = () => {
 };
 
 // 为所有缩小按钮添加事件监听器
-document.getElementById('cpuZoomOutBtn')?.addEventListener('click', zoomOutHandler);
-document.getElementById('memoryZoomOutBtn')?.addEventListener('click', zoomOutHandler);
-document.getElementById('diskZoomOutBtn')?.addEventListener('click', zoomOutHandler);
-document.getElementById('networkZoomOutBtn')?.addEventListener('click', zoomOutHandler);
-document.getElementById('speedZoomOutBtn')?.addEventListener('click', zoomOutHandler);
+const cpuZoomOutBtn = document.getElementById('cpuZoomOutBtn');
+if (cpuZoomOutBtn) {
+    cpuZoomOutBtn.addEventListener('click', zoomOutHandler);
+}
+const memoryZoomOutBtn = document.getElementById('memoryZoomOutBtn');
+if (memoryZoomOutBtn) {
+    memoryZoomOutBtn.addEventListener('click', zoomOutHandler);
+}
+const diskZoomOutBtn = document.getElementById('diskZoomOutBtn');
+if (diskZoomOutBtn) {
+    diskZoomOutBtn.addEventListener('click', zoomOutHandler);
+}
+const networkZoomOutBtn = document.getElementById('networkZoomOutBtn');
+if (networkZoomOutBtn) {
+    networkZoomOutBtn.addEventListener('click', zoomOutHandler);
+}
+const speedZoomOutBtn = document.getElementById('speedZoomOutBtn');
+if (speedZoomOutBtn) {
+    speedZoomOutBtn.addEventListener('click', zoomOutHandler);
+}
 
 // 重置缩放处理函数
 const resetZoomHandler = () => {
@@ -3033,11 +3074,26 @@ const resetZoomHandler = () => {
 };
 
 // 为所有重置按钮添加事件监听器
-document.getElementById('cpuResetZoomBtn')?.addEventListener('click', resetZoomHandler);
-document.getElementById('memoryResetZoomBtn')?.addEventListener('click', resetZoomHandler);
-document.getElementById('diskResetZoomBtn')?.addEventListener('click', resetZoomHandler);
-document.getElementById('networkResetZoomBtn')?.addEventListener('click', resetZoomHandler);
-document.getElementById('speedResetZoomBtn')?.addEventListener('click', resetZoomHandler);
+const cpuResetZoomBtn = document.getElementById('cpuResetZoomBtn');
+if (cpuResetZoomBtn) {
+    cpuResetZoomBtn.addEventListener('click', resetZoomHandler);
+}
+const memoryResetZoomBtn = document.getElementById('memoryResetZoomBtn');
+if (memoryResetZoomBtn) {
+    memoryResetZoomBtn.addEventListener('click', resetZoomHandler);
+}
+const diskResetZoomBtn = document.getElementById('diskResetZoomBtn');
+if (diskResetZoomBtn) {
+    diskResetZoomBtn.addEventListener('click', resetZoomHandler);
+}
+const networkResetZoomBtn = document.getElementById('networkResetZoomBtn');
+if (networkResetZoomBtn) {
+    networkResetZoomBtn.addEventListener('click', resetZoomHandler);
+}
+const speedResetZoomBtn = document.getElementById('speedResetZoomBtn');
+if (speedResetZoomBtn) {
+    speedResetZoomBtn.addEventListener('click', resetZoomHandler);
+}
 
 
 // 工具函数