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-06 21:12:56 +08:00
parent c87071390d
commit 8a5ca62793
22 changed files with 3541058 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
backend/static/index.html
View File

@@ -236,7 +236,7 @@
<p id="memoryDetails" class="text-xs text-gray-500 mt-1">0 MB / 0 MB</p>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fa fa-memory text-green-600 text-xl"></i>
<i class="fa fa-database text-green-600 text-xl"></i>
</div>
</div>
</div>
@@ -250,7 +250,7 @@
<p id="diskDetails" class="text-xs text-gray-500 mt-1">0 MB / 0 MB</p>
</div>
<div class="bg-yellow-100 p-3 rounded-full">
<i class="fa fa-hdd text-yellow-600 text-xl"></i>
<i class="fa fa-hdd-o text-yellow-600 text-xl"></i>
</div>
</div>
</div>
@@ -264,7 +264,7 @@
<p id="networkDetails" class="text-xs text-gray-500 mt-1">接收速率 0.00 MB | 发送速率 0.00 MB<br>接收总量 0.00 MB | 发送总量 0.00 MB</p>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fa fa-network-wired text-purple-600 text-xl"></i>
<i class="fa fa-exchange text-purple-600 text-xl"></i>
</div>
</div>
</div>
@@ -418,7 +418,7 @@
</div>
</div>
</div>
<br>
<!-- 磁盘 图表 -->
<div id="diskChartContainer" class="chart-container h-80 hidden">
<canvas id="diskChart"></canvas>
@@ -438,7 +438,7 @@
</div>
</div>
</div>
<br>
<!-- 磁盘详细信息展示 -->
<div id="diskDetailsContainer" class="mt-8 hidden">
<h3 class="text-lg font-semibold text-gray-900 mb-4">磁盘详细信息</h3>
@@ -449,7 +449,7 @@
<div id="diskPaginationContainer" class="mt-4"></div>
</div>
</div>
<br>
<!-- 网络 图表 -->
<div id="networkChartContainer" class="chart-container h-80 hidden">
<canvas id="networkChart"></canvas>
@@ -469,7 +469,7 @@
</div>
</div>
</div>
<br>
<!-- 网速 图表 -->
<div id="speedChartContainer" class="chart-container h-80 hidden">
<canvas id="speedChart"></canvas>
@@ -489,7 +489,7 @@
</div>
</div>
</div>
<br>
<!-- 系统日志 信息 -->
<div id="logInfoContainer" class="mt-8 hidden">
<h3 class="text-lg font-semibold text-gray-900 mb-4">系统日志</h3>
@@ -511,7 +511,7 @@
<!-- 日志信息分页容器 -->
<div id="logPaginationContainer" class="mt-4"></div>
</div>
<br>
<!-- 缩放控件已移动到各个图表容器内 -->
</div>
</div>

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

@@ -64,10 +64,10 @@ function setupAutoRefresh() {
// 如果启用了自动刷新，设置新的定时器
if (state.autoRefreshEnabled) {
// 立即执行一次，然后开始定时执行
loadMetrics();
loadStatusCards();
// 设置定时器
state.autoRefreshTimer = setInterval(() => {
loadMetrics();
loadStatusCards();
state.lastAutoRefreshTime = Date.now();
// 动态调整刷新间隔
updateAutoRefreshInterval();
@@ -1300,20 +1300,9 @@ function formatTime(timeStr) {
// 加载监控指标
async function loadMetrics() {
// 加载状态卡片数据，专门负责更新指标卡片
async function loadStatusCards() {
try {
// 并行加载所有指标
const [cpuData, memoryData, diskData, networkSumData] = await Promise.all([
fetchMetric('cpu'),
fetchMetric('memory'),
fetchMetric('disk'),
fetchMetric('network')
]);
// 更新图表
updateCharts(cpuData, memoryData, diskData, networkSumData);
// 从设备状态API获取数据，用于状态卡片显示
let deviceStatusData = null;
if (state.currentDeviceID) {
@@ -1328,16 +1317,15 @@ async function loadMetrics() {
}
// 准备状态卡片数据
let formattedMetricsForCards;
let formattedMetricsForCards = {};
if (deviceStatusData && deviceStatusData.id) {
// 使用设备状态API返回的数据
formattedMetricsForCards = {
cpu: deviceStatusData.status.cpu || cpuData,
cpu: deviceStatusData.status.cpu || 0,
cpu_hz: deviceStatusData.status.cpu_hz || 0,
memory: deviceStatusData.status.memory || memoryData,
memory: deviceStatusData.status.memory || 0,
disk: {
// 格式化磁盘数据，与现有代码兼容
'/': {
used_percent: deviceStatusData.status.disk || 0,
total: state.historyMetrics.disk && state.historyMetrics.disk['/'] && state.historyMetrics.disk['/'].total || 0
@@ -1350,18 +1338,28 @@ async function loadMetrics() {
rx_bytes: deviceStatusData.status.network_rx_bytes || 0
}
};
} else {
// 回退到原有逻辑
formattedMetricsForCards = {
cpu: cpuData,
memory: memoryData,
disk: formatDiskDataForCards(diskData),
network: formatNetworkDataForCards(networkSumData)
};
}
// 更新状态卡片
updateStatusCards(formattedMetricsForCards);
} catch (error) {
console.error('Failed to load status cards:', error);
}
}
// 加载监控指标，只负责更新图表
async function loadMetrics() {
try {
// 并行加载所有指标
const [cpuData, memoryData, diskData, networkSumData] = await Promise.all([
fetchMetric('cpu'),
fetchMetric('memory'),
fetchMetric('disk'),
fetchMetric('network')
]);
// 更新图表
updateCharts(cpuData, memoryData, diskData, networkSumData);
// 更新刷新状态指示器
updateRefreshStatus();
@@ -1592,6 +1590,9 @@ async function loadServerInfo(deviceId) {
if (serverInfoDisplay) {
serverInfoDisplay.innerHTML = `<p>服务器名称: <strong>${deviceData.name || deviceId}</strong> | IP地址: <strong>${deviceData.ip || '未知'}</strong></p>`;
}
// 初始化状态卡片
loadStatusCards();
} catch (error) {
console.error('Failed to load server info:', error);
// 即使请求失败，也要将设备ID存储到全局状态
@@ -1602,6 +1603,9 @@ async function loadServerInfo(deviceId) {
if (serverInfoDisplay) {
serverInfoDisplay.innerHTML = `<p class="text-red-500">加载服务器信息失败</p>`;
}
// 初始化状态卡片，即使服务器信息加载失败
loadStatusCards();
}
}