lizhuoran/data-collection-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[增添]增加了网络流量监测的过滤选择功能

Browse Source
This commit is contained in:
makotocc0107
2024-08-30 15:14:55 +08:00
committed by Coding
parent 2bfbd6d956
commit 0eebedac4b
2 changed files with 106 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
.idea/workspace.xml generated
View File

@@ -4,10 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]添加了CPU核心数量显示stat">
<list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]增添了网络流量监控的widget组件">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/CPUStatus.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/CPUStatus.php" afterDir="false" />
<change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/PrometheusMemory.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/PrometheusMemory.php" afterDir="false" />
<change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/NetworkMonitor.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/NetworkMonitor.php" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -261,7 +260,7 @@
<workItem from="1724806979170" duration="149000" />
<workItem from="1724808563307" duration="17821000" />
<workItem from="1724893742147" duration="20821000" />
<workItem from="1724979664477" duration="11631000" />
<workItem from="1724979664477" duration="13361000" />
</task>
<task id="LOCAL-00001" summary="[增添]添加注册">
<option name="closed" value="true" />
@@ -423,7 +422,31 @@
<option name="project" value="LOCAL" />
<updated>1724982245647</updated>
</task>
<option name="localTasksCounter" value="21" />
<task id="LOCAL-00021" summary="[修改]优化了了CPU占用率与内存占用显示">
<option name="closed" value="true" />
<created>1724999128203</created>
<option name="number" value="00021" />
<option name="presentableId" value="LOCAL-00021" />
<option name="project" value="LOCAL" />
<updated>1724999128203</updated>
</task>
<task id="LOCAL-00022" summary="[修改]优化了了CPU占用率与内存占用显示">
<option name="closed" value="true" />
<created>1724999132183</created>
<option name="number" value="00022" />
<option name="presentableId" value="LOCAL-00022" />
<option name="project" value="LOCAL" />
<updated>1724999132183</updated>
</task>
<task id="LOCAL-00023" summary="[增添]增添了网络流量监控的widget组件">
<option name="closed" value="true" />
<created>1724999173130</created>
<option name="number" value="00023" />
<option name="presentableId" value="LOCAL-00023" />
<option name="project" value="LOCAL" />
<updated>1724999173130</updated>
</task>
<option name="localTasksCounter" value="24" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -489,6 +512,8 @@
<MESSAGE value="[增添]添加了系统设备数据显示stats widget" />
<MESSAGE value="[增添]添加了CPU占用率饼图" />
<MESSAGE value="[增添]添加了CPU核心数量显示stat" />
<option name="LAST_COMMIT_MESSAGE" value="[增添]添加了CPU核心数量显示stat" />
<MESSAGE value="[修改]优化了了CPU占用率与内存占用显示" />
<MESSAGE value="[增添]增添了网络流量监控的widget组件" />
<option name="LAST_COMMIT_MESSAGE" value="[增添]增添了网络流量监控的widget组件" />
</component>
</project>

122
management-panel/app/Filament/Widgets/NetworkMonitor.php
View File

@@ -14,70 +14,98 @@ class NetworkMonitor extends ChartWidget
// 固定显示的数据点数
private const MAX_POINTS = 6;
// 定义下拉菜单选项
protected function getFilters(): array
{
return [
'upload' => '上传流量',
'download' => '下载流量',
];
}
protected function getData(): array
{
$prometheus = new PrometheusService();
// 查询过去 1 分钟内每秒的上传流量
$uploadQuery = 'rate(node_network_transmit_bytes_total[1m])';
$uploadResult = $prometheus->queryRange(
$uploadQuery,
now()->subMinutes(1)->timestamp,
now()->timestamp,
'5s' // 每秒一个数据点
);
// 查询过去 1 分钟内每秒的下载流量
$downloadQuery = 'rate(node_network_receive_bytes_total[1m])';
$downloadResult = $prometheus->queryRange(
$downloadQuery,
now()->subMinutes(1)->timestamp,
now()->timestamp,
'5s' // 每秒一个数据点
);
// 根据用户选择的过滤器决定查询的流量类型
$selectedFilter = $this->filter ?? 'upload';
$labels = [];
$uploadData = [];
$downloadData = [];
if (!empty($uploadResult['data']['result'][0]['values']) && !empty($downloadResult['data']['result'][0]['values'])) {
date_default_timezone_set('Asia/Shanghai');
if ($selectedFilter === 'upload') {
// 查询过去 1 分钟内每秒的上传流量
$uploadQuery = 'rate(node_network_transmit_bytes_total[1m])';
$uploadResult = $prometheus->queryRange(
$uploadQuery,
now()->subMinutes(1)->timestamp,
now()->timestamp,
'5s' // 每秒一个数据点
);
$uploadValues = array_column($uploadResult['data']['result'][0]['values'], 1, 0);
$downloadValues = array_column($downloadResult['data']['result'][0]['values'], 1, 0);
if (!empty($uploadResult['data']['result'][0]['values'])) {
$uploadValues = array_column($uploadResult['data']['result'][0]['values'], 1, 0);
// 获取最新的数据点
$latestTimestamp = max(array_keys($uploadValues));
// 获取最新的数据点
$timestamps = array_keys($uploadValues);
$timestamps = array_slice($timestamps, -self::MAX_POINTS);
// 只保留最新的 MAX_POINTS 个数据点
$timestamps = array_keys($uploadValues);
$timestamps = array_slice($timestamps, -self::MAX_POINTS);
foreach ($timestamps as $timestamp) {
$labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
$uploadData[] = round(floatval($uploadValues[$timestamp]) / (1024 * 1024), 2); // 转换为 MB/s
$downloadData[] = round(floatval($downloadValues[$timestamp]) / (1024 * 1024), 2); // 转换为 MB/s
foreach ($timestamps as $timestamp) {
$labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
$uploadData[] = round(floatval($uploadValues[$timestamp]) / (1024 * 1024), 2); // 转换为 MB/s
}
}
}
if ($selectedFilter === 'download') {
// 查询过去 1 分钟内每秒的下载流量
$downloadQuery = 'rate(node_network_receive_bytes_total[1m])';
$downloadResult = $prometheus->queryRange(
$downloadQuery,
now()->subMinutes(1)->timestamp,
now()->timestamp,
'5s' // 每秒一个数据点
);
if (!empty($downloadResult['data']['result'][0]['values'])) {
$downloadValues = array_column($downloadResult['data']['result'][0]['values'], 1, 0);
// 获取最新的数据点
$timestamps = array_keys($downloadValues);
$timestamps = array_slice($timestamps, -self::MAX_POINTS);
foreach ($timestamps as $timestamp) {
$labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
$downloadData[] = round(floatval($downloadValues[$timestamp]) / (1024 * 1024), 2); // 转换为 MB/s
}
}
}
// 处理显示的数据集
$datasets = [];
if ($selectedFilter === 'upload') {
$datasets[] = [
'label' => '上传流量 (MB/s)',
'data' => $uploadData,
'borderColor' => 'rgba(255, 99, 132, 0.6)',
'backgroundColor' => 'rgba(255, 99, 132, 0.2)',
'fill' => false,
];
}
if ($selectedFilter === 'download') {
$datasets[] = [
'label' => '下载流量 (MB/s)',
'data' => $downloadData,
'borderColor' => 'rgba(54, 162, 235, 0.6)',
'backgroundColor' => 'rgba(54, 162, 235, 0.2)',
'fill' => false,
];
}
return [
'labels' => $labels,
'datasets' => [
[
'label' => '上传流量 (MB/s)',
'data' => $uploadData,
'borderColor' => 'rgba(255, 99, 132, 0.6)',
'backgroundColor' => 'rgba(255, 99, 132, 0.2)',
'fill' => false,
],
[
'label' => '下载流量 (MB/s)',
'data' => $downloadData,
'borderColor' => 'rgba(54, 162, 235, 0.6)',
'backgroundColor' => 'rgba(54, 162, 235, 0.2)',
'fill' => false,
],
],
'datasets' => $datasets,
];
}