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

.idea/workspace.xml

@@ -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/NetworkMonitor.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/NetworkMonitor.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" />
     </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>

management-panel/app/Filament/Widgets/NetworkMonitor.php

@@ -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])';
+        $selectedFilter = $this->filter ?? 'upload';
-        $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' // 每秒一个数据点
-        );
 
         $labels = [];
         $uploadData = [];
         $downloadData = [];
 
-        if (!empty($uploadResult['data']['result'][0]['values']) && !empty($downloadResult['data']['result'][0]['values'])) {
+        if ($selectedFilter === 'upload') {
-            date_default_timezone_set('Asia/Shanghai');
+            // 查询过去 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);
+            if (!empty($uploadResult['data']['result'][0]['values'])) {
-            $downloadValues = array_column($downloadResult['data']['result'][0]['values'], 1, 0);
+                $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 个数据点
+                foreach ($timestamps as $timestamp) {
-            $timestamps = array_keys($uploadValues);
+                    $labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
-            $timestamps = array_slice($timestamps, -self::MAX_POINTS);
+                    $uploadData[] = round(floatval($uploadValues[$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
-                $downloadData[] = round(floatval($downloadValues[$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' => [
+            'datasets' => $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,
-                ],
-            ],
         ];
     }