diff --git a/agent/agent.json b/agent/agent.json index b6982e1..98e721e 100644 --- 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 diff --git a/backend/static/index.html b/backend/static/index.html index 991f325..28f7c2b 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -38,7 +38,22 @@ 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; + } + @@ -257,33 +272,53 @@
-
+
-
+
- - - - - + + + + + +
+ +
+ + +
+
-
+
至 @@ -375,8 +410,11 @@ 设备名称 + 设备ID IP地址 + token 状态 + 创建时间 操作 diff --git a/backend/static/js/app.js b/backend/static/js/app.js index af9fa78..e9e3fd6 100644 --- 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); - // 立即刷新数据以确保图表也更新 - setTimeout(() => loadMetrics(), 500); + // 根据自动刷新开关状态决定是否刷新图表 + if (state.autoRefreshEnabled) { + // 立即刷新数据以确保图表也更新 + setTimeout(() => loadMetrics(), 500); + } } // 更新状态卡片 @@ -2080,10 +2088,87 @@ function bindEvents() { if (zoomOutBtn && zoomInBtn && currentTimeRangeDisplay) { // 时间范围选项列表，用于缩放 const timeRanges = ['30m', '1h', '2h', '6h', '12h', '24h']; + } + + // 网卡选择和刷新按钮事件 + 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]; + } - // 更新当前时间范围显示 - const updateTimeRangeDisplay = () => { - switch(state.currentTimeRange) { + // 从网络指标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 = ''; + + // 添加新选项 + 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分钟'; break; @@ -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'); + } + } } // 页面加载完成后初始化