多项优化

2025-12-03 12:11:20 +08:00
parent bd70dc1748
commit 454a205051
3 changed files with 155 additions and 20 deletions
--- a/agent/agent.json
+++ b/agent/agent.json
@@ -3,7 +3,7 @@
  "id": "yunc",
  "name": "cloud",
  "device_id": "yunc",
-  "token": "bedb47554f06ebabc075b52d8320428f",
+  "token": "f1dee2c8ffbdd4974af84b92a254892b",
  "interval": "10s",
  "debug": true,
  "api_port": 8081
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -38,6 +38,21 @@
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
        }
+        
+        /* 自动刷新开关样式 */
+        .toggle-checkbox:checked {
+            right: 0;
+            border-color: #3b82f6;
+        }
+        
+        .toggle-checkbox:checked + .toggle-label {
+            background-color: #3b82f6;
+        }
+        
+        .toggle-checkbox {
+            right: 5px;
+            top: 2px;
+        }
        </style>
 </head>
 <body class="bg-gray-50 text-gray-900">
@@ -257,33 +272,53 @@
                <!-- 图表选项卡导航 -->
                <div class="mb-6">
                    <div class="bg-white rounded-xl shadow-md border border-gray-100">
-                        <div class="flex flex-wrap items-center justify-between px-6 py-4" id="chartTabs">
+                        <div class="flex flex-wrap items-start justify-between px-6 py-4" id="chartTabs">
                            <!-- 选项卡导航 -->
-                            <div class="flex flex-wrap">
+                            <div class="flex flex-wrap items-center gap-2">
                                <!-- CPU 选项卡 -->
-                                <button class="chart-tab active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition-colors mr-2" data-tab="cpu">
+                                <button class="chart-tab active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition-colors" data-tab="cpu">
                                    CPU
                                </button>
                                <!-- 内存 选项卡 -->
-                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="memory">
+                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="memory">
                                    内存
                                </button>
                                <!-- 磁盘 选项卡 -->
-                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="disk">
+                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="disk">
                                    磁盘
                                </button>
                                <!-- 网络 选项卡 -->
-                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="network">
+                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="network">
                                    网络
                                </button>
                                <!-- 网速 选项卡 -->
-                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="speed">
+                                <button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="speed">
                                    网速
                                </button>
+                                
+                                <!-- 网卡选择和刷新按钮 -->
+                                <div id="interfaceSelectorContainer" class="flex items-center gap-1 ml-4 hidden">
+                                    <label for="networkInterface" class="text-sm font-medium text-gray-700">网卡:</label>
+                                    <select id="networkInterface" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
+                                        <option value="all">所有网卡</option>
+                                    </select>
+                                    <button id="refreshInterfacesBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors text-sm">
+                                        <i class="fa fa-refresh"></i>
+                                    </button>
+                                </div>
+                                
+                                <!-- 自动刷新开关 -->
+                                <div class="flex items-center gap-2 ml-4">
+                                    <label for="autoRefreshToggle" class="text-sm font-medium text-gray-700">自动刷新:</label>
+                                    <div class="relative inline-block w-10 mr-2 align-middle select-none">
+                                        <input type="checkbox" id="autoRefreshToggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer" checked="false">
+                                        <label for="autoRefreshToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer"></label>
+                                    </div>
+                                </div>
                            </div>
                            
                            <!-- 自定义时间选择 -->
-                            <div class="flex items-center gap-2">
+                            <div class="flex items-center gap-2 mt-2 md:mt-0 w-full md:w-auto">
                                <input type="datetime-local" id="customStartTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                                <span class="text-gray-500 text-sm">至</span>
                                <input type="datetime-local" id="customEndTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@@ -375,8 +410,11 @@
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备ID</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">token</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -7,7 +7,8 @@ let state = {
    customStartTime: '',
    customEndTime: '',
    currentInterval: '10m', // 固定10分钟区间
-    historyMetrics: {} // 存储历史指标数据
+    historyMetrics: {}, // 存储历史指标数据
+    autoRefreshEnabled: false // 自动刷新开关状态，默认关闭
 }

 // WebSocket连接
@@ -31,6 +32,9 @@ function initApp() {
    // 设置定时刷新
    setInterval(loadMetrics, 30000);
    setInterval(loadServerCount, 30000);
+    
+    // 初始化网卡列表
+    loadNetworkInterfaces();
 }

 // 初始化自定义时间范围
@@ -1173,7 +1177,8 @@ async function loadServerInfo(deviceId) {
        if (!response.ok) {
            throw new Error('Failed to fetch server info');
        }
-        const deviceData = await response.json();
+        const data = await response.json();
+        const deviceData = data.device;
        
        // 更新服务器信息显示
        const serverInfoDisplay = document.getElementById('serverInfoDisplay');
@@ -1193,10 +1198,13 @@ async function loadServerInfo(deviceId) {
 // 处理指标更新
 function handleMetricsUpdate(message) {
    const { device_id, metrics } = message;
-    // 直接更新，不再检查device_id
+    // 直接更新统计卡片，始终实时更新
    updateStatusCards(metrics);
+    // 根据自动刷新开关状态决定是否刷新图表
+    if (state.autoRefreshEnabled) {
        // 立即刷新数据以确保图表也更新
        setTimeout(() => loadMetrics(), 500);
+    }
 }

 // 更新状态卡片
@@ -2080,9 +2088,86 @@ function bindEvents() {
    if (zoomOutBtn && zoomInBtn && currentTimeRangeDisplay) {
        // 时间范围选项列表，用于缩放
        const timeRanges = ['30m', '1h', '2h', '6h', '12h', '24h'];
+    }
    
-        // 更新当前时间范围显示
-        const updateTimeRangeDisplay = () => {
+    // 网卡选择和刷新按钮事件
+    const networkInterfaceSelect = document.getElementById('networkInterface');
+    const refreshInterfacesBtn = document.getElementById('refreshInterfacesBtn');
+    
+    if (networkInterfaceSelect) {
+        networkInterfaceSelect.addEventListener('change', (e) => {
+            state.currentInterface = e.target.value;
+            loadMetrics(); // 切换网卡后重新加载数据
+        });
+    }
+    
+    if (refreshInterfacesBtn) {
+        refreshInterfacesBtn.addEventListener('click', loadNetworkInterfaces);
+    }
+    
+    // 自动刷新开关事件
+    const autoRefreshToggle = document.getElementById('autoRefreshToggle');
+    if (autoRefreshToggle) {
+        autoRefreshToggle.addEventListener('change', (e) => {
+            state.autoRefreshEnabled = e.target.checked;
+            // 如果开启了自动刷新，立即刷新一次数据
+            if (state.autoRefreshEnabled) {
+                loadMetrics();
+            }
+        });
+    }
+}
+
+// 加载网卡列表
+async function loadNetworkInterfaces() {
+    try {
+        // 获取设备ID
+        const hash = window.location.hash;
+        let deviceId = '';
+        if (hash.startsWith('#serverMonitor/')) {
+            deviceId = hash.split('/')[1];
+        }
+        
+        // 从网络指标API获取网卡列表
+        const response = await fetch(`${API_BASE_URL}/metrics/network?device_id=${deviceId}`);
+        const data = await response.json();
+        
+        // 从返回的数据中提取网卡列表
+        const interfaces = Object.keys(data.data || {});
+        
+        // 更新下拉选择框
+        const selectElement = document.getElementById('networkInterface');
+        if (selectElement) {
+            // 清空现有选项
+            selectElement.innerHTML = '<option value="all">所有网卡</option>';
+            
+            // 添加新选项
+            interfaces.forEach(iface => {
+                if (iface !== 'all') {
+                    const option = document.createElement('option');
+                    option.value = iface;
+                    option.textContent = iface;
+                    selectElement.appendChild(option);
+                }
+            });
+            
+            // 如果当前选中的网卡不存在，重置为'all'
+            if (!interfaces.includes(state.currentInterface) && state.currentInterface !== 'all') {
+                state.currentInterface = 'all';
+            }
+            
+            // 设置当前选中的值
+            selectElement.value = state.currentInterface;
+        }
+    } catch (error) {
+        console.error('加载网卡列表失败:', error);
+        // 显示友好的错误提示
+        showToast('加载网卡列表失败，请稍后重试', 'error');
+    }
+}
+
+// 更新当前时间范围显示
+const updateTimeRangeDisplay = () => {
    switch(state.currentTimeRange) {
                case '30m':
                    currentTimeRangeDisplay.textContent = '过去30分钟';
@@ -2155,7 +2240,7 @@ function bindEvents() {
            // 重新加载数据
            loadMetrics();
        });
-    }
+    
    
    // 重置缩放按钮事件处理
    if (resetZoomBtn) {
@@ -2168,7 +2253,7 @@ function bindEvents() {
            });
        });
    }
-}
+

 // 工具函数
 function showContent(contentId) {
@@ -2231,6 +2316,18 @@ function initChartTabs() {
            }
        });
    });
+    
+    // 初始状态：根据当前选中的选项卡显示/隐藏网卡选择下拉框
+    const activeTab = document.querySelector('.chart-tab.active');
+    const interfaceContainer = document.getElementById('interfaceSelectorContainer');
+    if (activeTab && interfaceContainer) {
+        const tabId = activeTab.dataset.tab;
+        if (tabId === 'network' || tabId === 'speed') {
+            interfaceContainer.classList.remove('hidden');
+        } else {
+            interfaceContainer.classList.add('hidden');
+        }
+    }
 }

 // 页面加载完成后初始化