[增添]增添了网络流量监控的widget组件

.idea/workspace.xml

@@ -4,10 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]添加了CPU占用率饼图">
+    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]添加了CPU核心数量显示stat">
       <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/SystemStats.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/SystemStats.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 +261,7 @@
       <workItem from="1724806979170" duration="149000" />
       <workItem from="1724808563307" duration="17821000" />
       <workItem from="1724893742147" duration="20821000" />
-      <workItem from="1724979664477" duration="2248000" />
+      <workItem from="1724979664477" duration="11631000" />
     </task>
     <task id="LOCAL-00001" summary="[增添]添加注册">
       <option name="closed" value="true" />
@@ -415,7 +415,15 @@
       <option name="project" value="LOCAL" />
       <updated>1724913340798</updated>
     </task>
-    <option name="localTasksCounter" value="20" />
+    <task id="LOCAL-00020" summary="[增添]添加了CPU核心数量显示stat">
+      <option name="closed" value="true" />
+      <created>1724982245647</created>
+      <option name="number" value="00020" />
+      <option name="presentableId" value="LOCAL-00020" />
+      <option name="project" value="LOCAL" />
+      <updated>1724982245647</updated>
+    </task>
+    <option name="localTasksCounter" value="21" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -480,6 +488,7 @@
     <MESSAGE value="[修改]优化了widget的读取显示，能够动态显示" />
     <MESSAGE value="[增添]添加了系统设备数据显示stats widget" />
     <MESSAGE value="[增添]添加了CPU占用率饼图" />
-    <option name="LAST_COMMIT_MESSAGE" value="[增添]添加了CPU占用率饼图" />
+    <MESSAGE value="[增添]添加了CPU核心数量显示stat" />
+    <option name="LAST_COMMIT_MESSAGE" value="[增添]添加了CPU核心数量显示stat" />
   </component>
 </project>

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

@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use App\Services\PrometheusService;
+use Filament\Widgets\ChartWidget;
+
+class NetworkMonitor extends ChartWidget
+{
+    protected static ?string $heading = '网络流量监控';
+
+    protected static ?int $sort = 5;
+
+    // 固定显示的数据点数
+    private const MAX_POINTS = 6;
+
+    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' // 每秒一个数据点
+        );
+
+        $labels = [];
+        $uploadData = [];
+        $downloadData = [];
+
+        if (!empty($uploadResult['data']['result'][0]['values']) && !empty($downloadResult['data']['result'][0]['values'])) {
+            date_default_timezone_set('Asia/Shanghai');
+
+            $uploadValues = array_column($uploadResult['data']['result'][0]['values'], 1, 0);
+            $downloadValues = array_column($downloadResult['data']['result'][0]['values'], 1, 0);
+
+            // 获取最新的数据点
+            $latestTimestamp = max(array_keys($uploadValues));
+
+            // 只保留最新的 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
+            }
+        }
+
+        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,
+                ],
+            ],
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'line'; // 设置为折线图
+    }
+
+    protected function getOptions(): array
+    {
+        return [
+            'scales' => [
+                'y' => [
+                    'beginAtZero' => true,
+                    'min' => 0, // 设置 y 轴最小值
+                ],
+            ],
+        ];
+    }
+
+    protected function getPollingInterval(): ?string
+    {
+        return '5s'; // 每秒更新一次
+    }
+}