AMAZEHOME/monitor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web修复

Browse Source
This commit is contained in:
Alex Yang
2025-12-03 10:27:45 +08:00
parent dd01058b32
commit bd70dc1748
9 changed files with 437 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
backend/static/js/app.js
View File

@@ -1349,11 +1349,25 @@ function updateStatusCards(metrics) {
} else if (typeof displayMetrics.network === 'object' &&
displayMetrics.network.bytes_sent !== undefined &&
displayMetrics.network.bytes_received !== undefined) {
// WebSocket消息格式
// WebSocket消息格式 - 总流量
sentRate = displayMetrics.network.bytes_sent;
receivedRate = displayMetrics.network.bytes_received;
sentTotal = displayMetrics.network.bytes_sent_total || sentRate;
receivedTotal = displayMetrics.network.bytes_received_total || receivedRate;
} else if (typeof displayMetrics.network === 'object' && !Array.isArray(displayMetrics.network)) {
// 按网卡分组的数据，计算总流量
for (const iface in displayMetrics.network) {
const ifaceMetrics = displayMetrics.network[iface];
if (ifaceMetrics.bytes_sent !== undefined && ifaceMetrics.bytes_received !== undefined) {
sentRate += ifaceMetrics.bytes_sent;
receivedRate += ifaceMetrics.bytes_received;
sentTotal += ifaceMetrics.bytes_sent_total || ifaceMetrics.bytes_sent;
receivedTotal += ifaceMetrics.bytes_received_total || ifaceMetrics.bytes_received;
} else if (ifaceMetrics.BytesSent !== undefined && ifaceMetrics.BytesReceived !== undefined) {
sentRate += ifaceMetrics.BytesSent;
receivedRate += ifaceMetrics.BytesReceived;
}
}
}
// 计算比率
@@ -1590,92 +1604,223 @@ function updateCharts(cpuData, memoryData, diskData, networkData) {
charts.disk.update();
}
// 保存当前选中的网卡
state.currentInterface = state.currentInterface || 'all';
// 更新网络流量趋势图表（发送总和和接收总和）
if (networkData && networkData.sent && networkData.received && charts.network) {
// 计算发送总和（时间段内的累积值）
if (Array.isArray(networkData.sent) && networkData.sent.length > 0) {
// 排序发送数据
const sortedSent = sortDataByTime(networkData.sent);
// 计算累积发送总和（MB）
let cumulativeSent = 0;
const sentSumData = sortedSent.map(item => {
// 转换为MB并累积
const mbValue = item.value / (1024 * 1024);
cumulativeSent += mbValue;
return {
time: item.time,
value: cumulativeSent
};
});
// 使用固定份数X轴数据计算
const fixedPointsSentSum = getFixedPointsData(sentSumData);
charts.network.data.datasets[0].data = fixedPointsSentSum.map(item => ({
x: formatTime(item.time),
y: item.value
}));
if (networkData && charts.network) {
let selectedNetworkData = networkData;
// 如果是按网卡分组的数据，选择当前选中的网卡数据
if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) {
selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {};
}
// 计算接收总和（时间段内的累积值）
if (Array.isArray(networkData.received) && networkData.received.length > 0) {
// 排序接收数据
const sortedReceived = sortDataByTime(networkData.received);
if (selectedNetworkData.sent && selectedNetworkData.received) {
// 计算发送总和（时间段内的累积值）
if (Array.isArray(selectedNetworkData.sent) && selectedNetworkData.sent.length > 0) {
// 排序发送数据
const sortedSent = sortDataByTime(selectedNetworkData.sent);
// 计算累积发送总和（MB）
let cumulativeSent = 0;
const sentSumData = sortedSent.map(item => {
// 转换为MB并累积
const mbValue = item.value / (1024 * 1024);
cumulativeSent += mbValue;
return {
time: item.time,
value: cumulativeSent
};
});
// 使用固定份数X轴数据计算
const fixedPointsSentSum = getFixedPointsData(sentSumData);
charts.network.data.datasets[0].data = fixedPointsSentSum.map(item => ({
x: formatTime(item.time),
y: item.value
}));
}
// 计算累积接收总和（MB）
let cumulativeReceived = 0;
const receivedSumData = sortedReceived.map(item => {
// 转换为MB并累积
const mbValue = item.value / (1024 * 1024);
cumulativeReceived += mbValue;
return {
time: item.time,
value: cumulativeReceived
};
});
// 计算接收总和（时间段内的累积值）
if (Array.isArray(selectedNetworkData.received) && selectedNetworkData.received.length > 0) {
// 排序接收数据
const sortedReceived = sortDataByTime(selectedNetworkData.received);
// 计算累积接收总和（MB）
let cumulativeReceived = 0;
const receivedSumData = sortedReceived.map(item => {
// 转换为MB并累积
const mbValue = item.value / (1024 * 1024);
cumulativeReceived += mbValue;
return {
time: item.time,
value: cumulativeReceived
};
});
// 使用固定份数X轴数据计算
const fixedPointsReceivedSum = getFixedPointsData(receivedSumData);
charts.network.data.datasets[1].data = fixedPointsReceivedSum.map(item => ({
x: formatTime(item.time),
y: item.value
}));
}
// 使用固定份数X轴数据计算
const fixedPointsReceivedSum = getFixedPointsData(receivedSumData);
charts.network.data.datasets[1].data = fixedPointsReceivedSum.map(item => ({
x: formatTime(item.time),
y: item.value
}));
charts.network.update();
}
charts.network.update();
}
// 更新网速趋势图表
if (networkData && networkData.sent && networkData.received && charts.speed) {
// 更新发送流量
if (Array.isArray(networkData.sent) && networkData.sent.length > 0) {
const sortedData = sortDataByTime(networkData.sent);
// 使用固定份数X轴数据计算
const fixedPointsData = getFixedPointsData(sortedData);
charts.speed.data.datasets[0].data = fixedPointsData.map(item => ({
x: formatTime(item.time),
y: item.value / (1024 * 1024) // 转换为MB/s
}));
if (networkData && charts.speed) {
let selectedNetworkData = networkData;
// 如果是按网卡分组的数据，选择当前选中的网卡数据
if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) {
selectedNetworkData = networkData[state.currentInterface] || networkData['all'] || {};
}
// 更新接收流量
if (Array.isArray(networkData.received) && networkData.received.length > 0) {
const sortedData = sortDataByTime(networkData.received);
// 使用固定份数X轴数据计算
const fixedPointsData = getFixedPointsData(sortedData);
charts.speed.data.datasets[1].data = fixedPointsData.map(item => ({
x: formatTime(item.time),
y: item.value / (1024 * 1024) // 转换为MB/s
}));
if (selectedNetworkData.sent && selectedNetworkData.received) {
// 更新发送流量
if (Array.isArray(selectedNetworkData.sent) && selectedNetworkData.sent.length > 0) {
const sortedData = sortDataByTime(selectedNetworkData.sent);
// 使用固定份数X轴数据计算
const fixedPointsData = getFixedPointsData(sortedData);
charts.speed.data.datasets[0].data = fixedPointsData.map(item => ({
x: formatTime(item.time),
y: item.value / (1024 * 1024) // 转换为MB/s
}));
}
// 更新接收流量
if (Array.isArray(selectedNetworkData.received) && selectedNetworkData.received.length > 0) {
const sortedData = sortDataByTime(selectedNetworkData.received);
// 使用固定份数X轴数据计算
const fixedPointsData = getFixedPointsData(sortedData);
charts.speed.data.datasets[1].data = fixedPointsData.map(item => ({
x: formatTime(item.time),
y: item.value / (1024 * 1024) // 转换为MB/s
}));
}
charts.speed.update();
}
charts.speed.update();
}
// 更新网卡选择下拉框
updateInterfaceDropdown(networkData);
// 初始化图表（如果尚未初始化）
initDetailedCharts();
}
// 更新网卡选择下拉框
function updateInterfaceDropdown(networkData) {
// 创建或获取网卡选择容器
let interfaceContainer = document.getElementById('interfaceSelectorContainer');
if (!interfaceContainer) {
// 获取图表选项卡导航容器
const chartTabs = document.getElementById('chartTabs');
if (!chartTabs) {
return;
}
// 创建网卡选择容器
interfaceContainer = document.createElement('div');
interfaceContainer.id = 'interfaceSelectorContainer';
interfaceContainer.className = 'flex items-center gap-2 ml-4';
// 创建标签
const label = document.createElement('label');
label.htmlFor = 'interfaceSelector';
label.className = 'text-sm text-gray-600';
label.textContent = '网卡:';
// 创建下拉框
const select = document.createElement('select');
select.id = 'interfaceSelector';
select.className = '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';
// 添加默认选项
const defaultOption = document.createElement('option');
defaultOption.value = 'all';
defaultOption.textContent = '所有网卡';
select.appendChild(defaultOption);
// 添加事件监听
select.addEventListener('change', (e) => {
state.currentInterface = e.target.value;
// 重新加载指标
loadMetrics();
});
// 组装容器
interfaceContainer.appendChild(label);
interfaceContainer.appendChild(select);
// 将容器添加到图表选项卡导航中
const tabsContainer = chartTabs.querySelector('.flex.flex-wrap');
if (tabsContainer) {
tabsContainer.appendChild(interfaceContainer);
}
}
// 更新下拉框选项
const select = document.getElementById('interfaceSelector');
if (select) {
// 保存当前选中的值
const currentValue = select.value;
// 清空现有选项
select.innerHTML = '';
// 添加默认选项
const defaultOption = document.createElement('option');
defaultOption.value = 'all';
defaultOption.textContent = '所有网卡';
select.appendChild(defaultOption);
// 添加所有网卡选项
// 检查是否有按网卡分组的网络数据
if (typeof networkData === 'object' && networkData.sent === undefined && networkData.received === undefined) {
// 获取所有网卡名称
const interfaces = Object.keys(networkData);
// 添加所有网卡选项
interfaces.forEach(iface => {
// 只添加实际的网卡名称，不添加"all"选项
if (iface !== 'all') {
const option = document.createElement('option');
option.value = iface;
option.textContent = iface;
select.appendChild(option);
}
});
} else {
// 如果没有按网卡分组的数据，使用模拟网卡名称
// 这里可以根据实际情况修改，比如从其他地方获取网卡名称列表
const mockInterfaces = ['eth0', 'eth1', 'lo'];
mockInterfaces.forEach(iface => {
const option = document.createElement('option');
option.value = iface;
option.textContent = iface;
select.appendChild(option);
});
}
// 恢复当前选中的值
select.value = currentValue;
}
// 检查当前选中的选项卡，如果不是"网络"或"网速"，隐藏网卡选择下拉框
const activeTab = document.querySelector('.chart-tab.active');
if (activeTab && activeTab.dataset.tab !== 'network' && activeTab.dataset.tab !== 'speed') {
interfaceContainer.classList.add('hidden');
} else {
interfaceContainer.classList.remove('hidden');
}
}
// 尝试重连WebSocket
function attemptReconnect() {
if (wsReconnectAttempts < wsMaxReconnectAttempts) {
@@ -2073,6 +2218,17 @@ function initChartTabs() {
if (activeContainer) {
activeContainer.classList.remove('hidden');
}
// 显示/隐藏网卡选择下拉框
const interfaceContainer = document.getElementById('interfaceSelectorContainer');
if (interfaceContainer) {
// 只有在点击"网络"或"网速"选项卡时，显示网卡选择下拉框
if (tabId === 'network' || tabId === 'speed') {
interfaceContainer.classList.remove('hidden');
} else {
interfaceContainer.classList.add('hidden');
}
}
});
});
}