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

数据调优

Browse Source
This commit is contained in:
Alex Yang
2025-12-03 15:05:16 +08:00
parent 8bd13e3af1
commit c854c460a8
7 changed files with 464 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1119,8 +1119,16 @@ async function loadMetrics() {
fetchMetric('network')
]);
// 格式化数据，确保updateStatusCards函数能正确处理
const formattedMetrics = {
cpu: cpuData,
memory: memoryData,
disk: formatDiskDataForCards(diskData),
network: formatNetworkDataForCards(networkSumData)
};
// 更新状态卡片
updateStatusCards({ cpu: cpuData, memory: memoryData, disk: diskData, network: networkSumData });
updateStatusCards(formattedMetrics);
// 更新图表
updateCharts(cpuData, memoryData, diskData, networkSumData);
@@ -1131,6 +1139,71 @@ async function loadMetrics() {
}
}
// 格式化磁盘数据，用于状态卡片显示
function formatDiskDataForCards(diskData) {
// 如果diskData是空对象，返回空对象
if (!diskData || typeof diskData !== 'object' || Array.isArray(diskData)) {
return {};
}
const formattedDiskData = {};
// 遍历每个挂载点
for (const mountpoint in diskData) {
const mountpointData = diskData[mountpoint];
// 如果挂载点数据是数组，获取最新的数据点
if (Array.isArray(mountpointData) && mountpointData.length > 0) {
// 最新的数据点是数组的最后一个元素
const latestData = mountpointData[mountpointData.length - 1];
formattedDiskData[mountpoint] = {
used_percent: latestData.value,
// 尝试从历史数据获取总容量
total: state.historyMetrics.disk && state.historyMetrics.disk[mountpoint] && state.historyMetrics.disk[mountpoint].total || 0
};
}
}
return formattedDiskData;
}
// 格式化网络数据，用于状态卡片显示
function formatNetworkDataForCards(networkData) {
// 如果networkData是空对象，返回空对象
if (!networkData || typeof networkData !== 'object' || Array.isArray(networkData)) {
return {};
}
const formattedNetworkData = {
bytes_sent: 0,
bytes_received: 0,
tx_bytes: 0,
rx_bytes: 0
};
// 遍历每个网卡
for (const iface in networkData) {
const ifaceData = networkData[iface];
// 检查是否有sent和received数据
if (ifaceData.sent && ifaceData.received) {
// 如果sent和received是数组，获取最新的数据点
if (Array.isArray(ifaceData.sent) && ifaceData.sent.length > 0 &&
Array.isArray(ifaceData.received) && ifaceData.received.length > 0) {
// 最新的数据点是数组的最后一个元素
const latestSent = ifaceData.sent[ifaceData.sent.length - 1].value;
const latestReceived = ifaceData.received[ifaceData.received.length - 1].value;
// 累加速率
formattedNetworkData.bytes_sent += latestSent;
formattedNetworkData.bytes_received += latestReceived;
}
}
}
return formattedNetworkData;
}
// WebSocket初始化
function initWebSocket() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -1215,6 +1288,7 @@ function updateStatusCards(metrics) {
// 使用历史数据或当前数据
const displayMetrics = {
cpu: metrics.cpu || state.historyMetrics.cpu,
cpu_hz: metrics.cpu_hz || state.historyMetrics.cpu_hz,
memory: metrics.memory || state.historyMetrics.memory,
disk: metrics.disk || state.historyMetrics.disk,
network: metrics.network || state.historyMetrics.network
@@ -1228,24 +1302,33 @@ function updateStatusCards(metrics) {
// 解析CPU数据
if (Array.isArray(displayMetrics.cpu) && displayMetrics.cpu.length > 0) {
// 数组格式：获取最新的数据点
cpuUsage = displayMetrics.cpu[displayMetrics.cpu.length - 1].value;
} else if (typeof displayMetrics.cpu === 'number') {
// 数值格式
cpuUsage = displayMetrics.cpu;
} else if (typeof displayMetrics.cpu === 'object' && displayMetrics.cpu.usage) {
// 对象格式，包含usage, frequency, load
cpuUsage = displayMetrics.cpu.usage;
cpuGhz = displayMetrics.cpu.frequency || 0;
cpuLoad = displayMetrics.cpu.load || 0;
}
// 从单独的cpu_hz字段获取CPU频率（如果有）
if (displayMetrics.cpu_hz && typeof displayMetrics.cpu_hz === 'number') {
cpuGhz = displayMetrics.cpu_hz / 1000; // 转换为GHz
}
// 更新显示
const cpuElement = document.getElementById('cpuValue');
const cpuDetailsElement = document.getElementById('cpuDetails');
if (cpuElement) {
cpuElement.textContent = `${cpuUsage.toFixed(1)}%`;
// 设置红色显示如果达到顶峰
cpuElement.className = cpuUsage > 90 ? 'text-red-500' : '';
// 设置红色显示如果达到顶峰，同时保留原有的样式类
cpuElement.className = `text-3xl font-bold metric-value ${cpuUsage > 90 ? 'text-red-500' : 'text-gray-900'}`;
}
if (cpuDetailsElement) {
cpuDetailsElement.className = 'text-xs text-gray-500 mt-1';
cpuDetailsElement.textContent = `${cpuGhz.toFixed(2)} GHz | 负载: ${cpuLoad.toFixed(2)}`;
}
}
@@ -1258,24 +1341,50 @@ function updateStatusCards(metrics) {
// 解析内存数据
if (Array.isArray(displayMetrics.memory) && displayMetrics.memory.length > 0) {
// 数组格式：获取最新的数据点
memoryUsage = displayMetrics.memory[displayMetrics.memory.length - 1].value;
} else if (typeof displayMetrics.memory === 'number') {
// 数值格式
memoryUsage = displayMetrics.memory;
} else if (typeof displayMetrics.memory === 'object') {
// 对象格式，包含usage, used, total
memoryUsage = displayMetrics.memory.usage || 0;
memoryUsed = displayMetrics.memory.used || 0;
memoryTotal = displayMetrics.memory.total || 0;
}
// 如果只有使用率，没有使用量和总量，尝试从其他地方获取
if (memoryTotal === 0 && state.historyMetrics.memory && typeof state.historyMetrics.memory === 'object') {
memoryUsed = state.historyMetrics.memory.used || 0;
memoryTotal = state.historyMetrics.memory.total || 0;
}
// 如果内存总量仍为0，尝试使用默认值或从API获取
if (memoryTotal === 0) {
// 尝试从系统获取内存总量（如果浏览器支持）
if (navigator.deviceMemory) {
memoryTotal = navigator.deviceMemory * 1024 * 1024 * 1024; // 转换为字节
} else {
// 使用默认值16GB
memoryTotal = 16 * 1024 * 1024 * 1024;
}
}
// 计算使用量（如果只有使用率）
if (memoryUsed === 0 && memoryTotal > 0) {
memoryUsed = (memoryTotal * memoryUsage) / 100;
}
// 更新显示
const memoryElement = document.getElementById('memoryValue');
const memoryDetailsElement = document.getElementById('memoryDetails');
if (memoryElement) {
memoryElement.textContent = `${memoryUsage.toFixed(1)}%`;
// 设置红色显示如果达到顶峰
memoryElement.className = memoryUsage > 90 ? 'text-red-500' : '';
// 设置红色显示如果达到顶峰，同时保留原有的样式类
memoryElement.className = `text-3xl font-bold metric-value ${memoryUsage > 90 ? 'text-red-500' : 'text-gray-900'}`;
}
if (memoryDetailsElement) {
memoryDetailsElement.className = 'text-xs text-gray-500 mt-1';
memoryDetailsElement.textContent = `${formatBytes(memoryUsed)} / ${formatBytes(memoryTotal)}`;
}
}
@@ -1292,6 +1401,7 @@ function updateStatusCards(metrics) {
// 解析磁盘数据
if (typeof displayMetrics.disk === 'object' && displayMetrics.disk !== null && !Array.isArray(displayMetrics.disk)) {
// 按挂载点分组的数据
let hasValidData = false;
for (const mountpoint in displayMetrics.disk) {
// 跳过排除的挂载点
if (excludedMountpoints.includes(mountpoint)) {
@@ -1299,9 +1409,41 @@ function updateStatusCards(metrics) {
}
const data = displayMetrics.disk[mountpoint];
if (data && typeof data === 'object' && data.used !== undefined && data.total !== undefined) {
totalUsed += data.used;
totalSize += data.total;
if (data && typeof data === 'object') {
if (data.used_percent !== undefined && data.total !== undefined) {
// 新格式：包含used_percent和total字段
// 计算已使用大小（total * used_percent / 100）
const used = (data.total * data.used_percent) / 100;
totalUsed += used;
totalSize += data.total;
hasValidData = true;
} else if (data.used !== undefined && data.total !== undefined) {
// 旧格式：包含used和total字段
totalUsed += data.used;
totalSize += data.total;
hasValidData = true;
}
}
}
// 如果没有有效数据，尝试使用历史数据
if (!hasValidData && state.historyMetrics.disk && typeof state.historyMetrics.disk === 'object' && !Array.isArray(state.historyMetrics.disk)) {
for (const mountpoint in state.historyMetrics.disk) {
if (excludedMountpoints.includes(mountpoint)) {
continue;
}
const data = state.historyMetrics.disk[mountpoint];
if (data && typeof data === 'object') {
if (data.used_percent !== undefined && data.total !== undefined) {
const used = (data.total * data.used_percent) / 100;
totalUsed += used;
totalSize += data.total;
} else if (data.used !== undefined && data.total !== undefined) {
totalUsed += data.used;
totalSize += data.total;
}
}
}
}
} else if (typeof displayMetrics.disk === 'object' && displayMetrics.disk.used !== undefined && displayMetrics.disk.total !== undefined) {
@@ -1310,9 +1452,36 @@ function updateStatusCards(metrics) {
totalSize = displayMetrics.disk.total;
}
// 如果只有使用率，没有使用量和总量，尝试计算
if (totalSize === 0 && displayMetrics.disk && typeof displayMetrics.disk === 'number') {
// 如果disk是一个数字，尝试从历史数据获取总量
if (state.historyMetrics.disk && typeof state.historyMetrics.disk === 'object' && !Array.isArray(state.historyMetrics.disk)) {
for (const mountpoint in state.historyMetrics.disk) {
if (excludedMountpoints.includes(mountpoint)) {
continue;
}
const data = state.historyMetrics.disk[mountpoint];
if (data && typeof data === 'object') {
if (data.total !== undefined) {
totalSize += data.total;
}
}
}
// 计算使用量
if (totalSize > 0) {
totalUsed = (totalSize * displayMetrics.disk) / 100;
}
}
}
// 计算使用率
if (totalSize > 0) {
usagePercent = (totalUsed / totalSize) * 100;
} else if (typeof displayMetrics.disk === 'number') {
// 如果disk是一个数字，直接使用它作为使用率
usagePercent = displayMetrics.disk;
}
// 更新显示
@@ -1320,10 +1489,11 @@ function updateStatusCards(metrics) {
const diskDetailsElement = document.getElementById('diskDetails');
if (diskElement) {
diskElement.textContent = `${usagePercent.toFixed(1)}%`;
// 设置红色显示如果达到顶峰
diskElement.className = usagePercent > 90 ? 'text-red-500' : '';
// 设置红色显示如果达到顶峰，同时保留原有的样式类
diskElement.className = `text-3xl font-bold metric-value ${usagePercent > 90 ? 'text-red-500' : 'text-gray-900'}`;
}
if (diskDetailsElement) {
diskDetailsElement.className = 'text-xs text-gray-500 mt-1';
diskDetailsElement.textContent = `${formatBytes(totalUsed)} / ${formatBytes(totalSize)}`;
}
}
@@ -1336,61 +1506,114 @@ function updateStatusCards(metrics) {
let receivedTotal = 0;
// 解析网络数据
if (displayMetrics.network.sent && displayMetrics.network.received) {
// 处理数组格式的数据
if (Array.isArray(displayMetrics.network.sent) && displayMetrics.network.sent.length > 0 &&
Array.isArray(displayMetrics.network.received) && displayMetrics.network.received.length > 0) {
if (typeof displayMetrics.network === 'object') {
if (Array.isArray(displayMetrics.network)) {
// 数组格式的数据
if (displayMetrics.network.length > 0) {
// 获取最新的数据点
const latestData = displayMetrics.network[displayMetrics.network.length - 1];
sentRate = latestData.sent || 0;
receivedRate = latestData.received || 0;
sentTotal = latestData.tx_bytes || 0;
receivedTotal = latestData.rx_bytes || 0;
}
} else if (displayMetrics.network.sent && displayMetrics.network.received) {
// 包含sent和received字段的数据
if (Array.isArray(displayMetrics.network.sent) && displayMetrics.network.sent.length > 0 &&
Array.isArray(displayMetrics.network.received) && displayMetrics.network.received.length > 0) {
// 处理数组格式的速率数据
sentRate = displayMetrics.network.sent[displayMetrics.network.sent.length - 1].value;
receivedRate = displayMetrics.network.received[displayMetrics.network.received.length - 1].value;
} else if (typeof displayMetrics.network.sent === 'number' && typeof displayMetrics.network.received === 'number') {
// 处理数值格式的速率数据
sentRate = displayMetrics.network.sent;
receivedRate = displayMetrics.network.received;
}
sentRate = displayMetrics.network.sent[displayMetrics.network.sent.length - 1].value;
receivedRate = displayMetrics.network.received[displayMetrics.network.received.length - 1].value;
// 计算总量（假设数组中的值是累积的）
sentTotal = displayMetrics.network.sent.reduce((sum, item) => sum + item.value, 0);
receivedTotal = displayMetrics.network.received.reduce((sum, item) => sum + item.value, 0);
}
// 处理数值格式的数据
else if (typeof displayMetrics.network.sent === 'number' && typeof displayMetrics.network.received === 'number') {
sentRate = displayMetrics.network.sent;
receivedRate = displayMetrics.network.received;
sentTotal = displayMetrics.network.sent_total || sentRate;
receivedTotal = displayMetrics.network.received_total || receivedRate;
}
} else if (typeof displayMetrics.network === 'object' &&
displayMetrics.network.bytes_sent !== undefined &&
displayMetrics.network.bytes_received !== undefined) {
// 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;
// 处理总量数据
sentTotal = displayMetrics.network.tx_bytes || displayMetrics.network.sent_total || 0;
receivedTotal = displayMetrics.network.rx_bytes || displayMetrics.network.received_total || 0;
} else if (displayMetrics.network.bytes_sent !== undefined && displayMetrics.network.bytes_received !== undefined) {
// WebSocket消息格式 - 总流量
sentRate = displayMetrics.network.bytes_sent;
receivedRate = displayMetrics.network.bytes_received;
// 优先使用tx_bytes和rx_bytes作为总量
sentTotal = displayMetrics.network.tx_bytes || 0;
receivedTotal = displayMetrics.network.rx_bytes || 0;
} else {
// 按网卡分组的数据，计算总流量
for (const iface in displayMetrics.network) {
const ifaceMetrics = displayMetrics.network[iface];
if (typeof ifaceMetrics === 'object') {
// 计算速率
if (ifaceMetrics.bytes_sent !== undefined) {
sentRate += ifaceMetrics.bytes_sent;
} else if (ifaceMetrics.sent !== undefined) {
sentRate += ifaceMetrics.sent;
}
if (ifaceMetrics.bytes_received !== undefined) {
receivedRate += ifaceMetrics.bytes_received;
} else if (ifaceMetrics.received !== undefined) {
receivedRate += ifaceMetrics.received;
}
// 计算总量（所有网卡的tx_bytes和rx_bytes之和）
if (ifaceMetrics.tx_bytes !== undefined) {
sentTotal += ifaceMetrics.tx_bytes;
} else if (ifaceMetrics.bytes_sent_total !== undefined) {
sentTotal += ifaceMetrics.bytes_sent_total;
}
if (ifaceMetrics.rx_bytes !== undefined) {
receivedTotal += ifaceMetrics.rx_bytes;
} else if (ifaceMetrics.bytes_received_total !== undefined) {
receivedTotal += ifaceMetrics.bytes_received_total;
}
}
}
}
}
// 计算比率
let ratioText = '0.0';
if (sentRate > 0) {
ratioText = (receivedRate / sentRate).toFixed(1);
// 如果总量为0，尝试使用速率作为总量（临时解决方案）
if (sentTotal === 0) {
sentTotal = sentRate;
}
if (receivedTotal === 0) {
receivedTotal = receivedRate;
}
// 计算比率并格式化显示
let ratioDisplay = "0.0";
let ratioDirection = "<span style='color: green;'>↓</span> / <span style='color: red;'>↑</span>";
if (sentRate === 0 && receivedRate === 0) {
// 没有流量
ratioDisplay = "0.0";
} else if (sentRate === 0) {
// 只有接收流量
ratioDisplay = "∞";
ratioDirection = "<span style='color: green;'>↓</span>";
} else if (receivedRate === 0) {
// 只有发送流量
ratioDisplay = "0.0";
ratioDirection = "<span style='color: red;'>↑</span>";
} else {
// 正常计算比率
const ratio = receivedRate / sentRate;
ratioDisplay = ratio.toFixed(1);
}
// 更新显示
const networkValueElement = document.getElementById('networkValue');
const networkDetailsElement = document.getElementById('networkDetails');
if (networkValueElement) {
networkValueElement.innerHTML = `${ratioText} <span style="color: green;">↓</span> / <span style="color: red;">↑</span>`;
networkValueElement.className = 'text-3xl font-bold text-gray-900 metric-value';
networkValueElement.innerHTML = `${ratioDisplay} ${ratioDirection}`;
}
if (networkDetailsElement) {
networkDetailsElement.className = 'text-xs text-gray-500 mt-1';
networkDetailsElement.innerHTML =
`接收: <span style="color: green;">${formatBytes(receivedRate, 2, true)}</span> | ` +
`发送: <span style="color: red;">${formatBytes(sentRate, 2, true)}</span><br>` +
@@ -1405,6 +1628,9 @@ function updateHistoryMetrics(metrics) {
if (metrics.cpu) {
state.historyMetrics.cpu = metrics.cpu;
}
if (metrics.cpu_hz) {
state.historyMetrics.cpu_hz = metrics.cpu_hz;
}
if (metrics.memory) {
state.historyMetrics.memory = metrics.memory;
}