增加日志进程等信息采集
This commit is contained in:
Alex Yang
@@ -254,19 +254,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络 状态卡片 -->
|
||||
<!-- 网络流量 状态卡片 -->
|
||||
<div class="bg-white rounded-xl shadow-md p-6 card-hover border border-gray-100">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 font-medium mb-1">网络流量</p>
|
||||
<h3 id="networkValue" class="text-3xl font-bold text-gray-900 metric-value">0.0</h3>
|
||||
<p id="networkDetails" class="text-xs text-gray-500 mt-1">接收: 0 MB/s | 发送: 0 MB/s<br>总量: 接收 0 MB | 发送 0 MB</p>
|
||||
<h3 id="networkValue" class="text-3xl font-bold text-gray-900 metric-value">0.00 ↓</h3>
|
||||
<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-exchange-alt text-purple-600 text-xl"></i>
|
||||
<i class="fa fa-network-wired text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 图表选项卡导航 -->
|
||||
@@ -289,12 +290,16 @@
|
||||
</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" 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" data-tab="speed">
|
||||
网速
|
||||
</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" data-tab="logs">
|
||||
系统日志
|
||||
</button>
|
||||
|
||||
<!-- 网卡选择和刷新按钮 -->
|
||||
<div id="interfaceSelectorContainer" class="flex items-center gap-1 ml-4 hidden">
|
||||
@@ -315,6 +320,12 @@
|
||||
<label for="autoRefreshToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 刷新状态指示器 -->
|
||||
<div class="flex items-center gap-1 ml-4">
|
||||
<div id="refreshStatusIndicator" class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
||||
<span id="lastRefreshTime" class="text-xs text-gray-500">上次刷新: 刚刚</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义时间选择 -->
|
||||
@@ -333,43 +344,161 @@
|
||||
<!-- CPU 图表 -->
|
||||
<div id="cpuChartContainer" class="chart-container h-80">
|
||||
<canvas id="cpuChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="cpuCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="cpuResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="cpuZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="cpuZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进程信息展示 -->
|
||||
<div id="processInfoContainer" class="mt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">进程信息</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table id="processTable" class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<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">进程ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPU (%)</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>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">占用端口</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="processTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<!-- 进程信息将通过JavaScript动态添加 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 进程信息分页容器 -->
|
||||
<div id="processPaginationContainer" class="mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内存 图表 -->
|
||||
<div id="memoryChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="memoryChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="currentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="memoryResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="memoryZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="memoryZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 磁盘 图表 -->
|
||||
<div id="diskChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="diskChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="diskCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="diskResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="diskZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="diskZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 磁盘详细信息展示 -->
|
||||
<div id="diskDetailsContainer" class="mt-8 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">磁盘详细信息</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- 磁盘详细信息将通过JavaScript动态添加 -->
|
||||
<div id="diskDetailsContent"></div>
|
||||
<!-- 磁盘信息分页容器 -->
|
||||
<div id="diskPaginationContainer" class="mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络 图表 -->
|
||||
<div id="networkChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="networkChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="networkCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="networkResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="networkZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="networkZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网速 图表 -->
|
||||
<div id="speedChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="speedChart"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="currentTimeRangeDisplay">过去24小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="resetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="zoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="zoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="speedCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="speedResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="speedZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="speedZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统日志 图表 -->
|
||||
<div id="logChartContainer" class="chart-container h-80 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">系统日志</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table id="logTable" class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<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>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内容</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<!-- 日志信息将通过JavaScript动态添加 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 缩放控件已移动到各个图表容器内 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
98
backend/static/network_data_analysis.md
Normal file
98
backend/static/network_data_analysis.md
Normal file
@@ -0,0 +1,98 @@
|
||||
# 网络流量数据来源分析
|
||||
|
||||
## 数据来源
|
||||
|
||||
### 1. API调用
|
||||
- **函数**：`loadMetrics()`
|
||||
- **调用方式**：`fetchMetric('network')`
|
||||
- **API路径**：`${API_BASE_URL}/metrics/network`
|
||||
- **参数**：
|
||||
- `start_time`: 起始时间
|
||||
- `end_time`: 结束时间
|
||||
- `aggregation`: 聚合方式（默认为average）
|
||||
- `interval`: 时间区间（固定为10m）
|
||||
|
||||
### 2. WebSocket实时更新
|
||||
- **函数**：`handleMetricsUpdate(message)`
|
||||
- **消息类型**：`metrics_update`
|
||||
- **数据结构**：
|
||||
```json
|
||||
{
|
||||
"type": "metrics_update",
|
||||
"device_id": "device_id",
|
||||
"metrics": {
|
||||
"network": {...}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 数据处理流程
|
||||
|
||||
### 1. 数据格式化
|
||||
- **函数**：`formatNetworkDataForCards(networkData)`
|
||||
- **作用**：将API或WebSocket返回的原始网络数据格式化为状态卡片可用的格式
|
||||
- **处理逻辑**：
|
||||
- 初始化返回数据结构，包含发送速率、接收速率、发送总量、接收总量
|
||||
- 根据数据类型（数组或对象）进行不同处理
|
||||
- **遍历所有网卡**，累加所有网卡的流量数据
|
||||
- 支持多种数据格式，包括数组格式、WebSocket消息格式、按网卡分组的数据格式
|
||||
- 支持旧格式的总量数据（bytes_sent_total, bytes_received_total）
|
||||
|
||||
### 2. 数据更新
|
||||
- **函数**：`_updateStatusCards(metrics)`
|
||||
- **作用**：更新状态卡片的显示内容
|
||||
- **网络流量卡片更新逻辑**：
|
||||
- 解析网络数据，获取发送速率、接收速率、发送总量、接收总量
|
||||
- 计算接收速率/发送速率的比值，根据比值显示箭头
|
||||
- 使用`formatBytes`函数格式化速率和总量，自动处理MB和GB的转换
|
||||
- 更新DOM元素，显示比值、速率和总量
|
||||
|
||||
## 显示内容
|
||||
|
||||
### 1. 大数字显示
|
||||
- **内容**：接收速率/发送速率的比值
|
||||
- **逻辑**：
|
||||
- 如果接收速率和发送速率都为0，显示无穷符号（∞）
|
||||
- 如果发送速率为0，接收速率不为0，显示无穷符号（∞）和↓
|
||||
- 如果接收速率为0，发送速率不为0，显示0和↑
|
||||
- 正常情况：计算比值，显示比值和箭头（比值>1显示↓，否则显示↑）
|
||||
|
||||
### 2. 速率显示
|
||||
- **格式**：接收速率 MB/s | 发送速率 MB/s
|
||||
- **处理**：使用`formatBytes`函数格式化，自动处理MB/s和GB/s的转换
|
||||
|
||||
### 3. 总量显示
|
||||
- **格式**：接收总量 MB | 发送总量 MB
|
||||
- **处理**：使用`formatBytes`函数格式化，自动处理MB和GB的转换
|
||||
|
||||
## 正确性验证
|
||||
|
||||
### 1. 网卡总流量
|
||||
- `formatNetworkDataForCards`函数会遍历所有网卡，累加所有网卡的流量数据
|
||||
- 这样显示的是所有网卡的总流量信息，符合用户需求
|
||||
|
||||
### 2. 数据类型转换
|
||||
- `formatBytes`函数会根据数据大小自动转换为合适的单位（MB或GB）
|
||||
- 速率显示带有正确的单位（MB/s或GB/s）
|
||||
- 总量显示带有正确的单位（MB或GB）
|
||||
|
||||
### 3. 边界情况处理
|
||||
- 处理了接收速率和发送速率都为0的情况
|
||||
- 处理了发送速率为0，接收速率不为0的情况
|
||||
- 处理了接收速率为0，发送速率不为0的情况
|
||||
|
||||
## 代码优化
|
||||
|
||||
### 1. 已完成的优化
|
||||
- 使用`formatBytes`函数格式化流量数据，自动处理MB和GB的转换
|
||||
- 确保显示的是所有网卡的总流量信息
|
||||
- 处理了各种边界情况
|
||||
|
||||
### 2. 优化效果
|
||||
- 显示内容更准确，带有正确的单位
|
||||
- 自动适应数据大小，提高可读性
|
||||
- 处理了各种边界情况，避免显示错误
|
||||
|
||||
## 结论
|
||||
|
||||
网络流量卡片的数据来源是可靠的，通过API调用或WebSocket实时更新获取原始数据，经过`formatNetworkDataForCards`函数格式化处理后，显示的是所有网卡的总流量信息。使用`formatBytes`函数格式化后，显示内容带有正确的单位，并且会根据数据大小自动转换为合适的单位（MB或GB），提高了数据的可读性。
|
||||
Reference in New Issue
Block a user