[修改]优化了了CPU占用率与内存占用显示

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

@@ -7,41 +7,52 @@ use Filament\Widgets\ChartWidget;
 
 class CPUStatus extends ChartWidget
 {
+    protected static ?int $sort = 4;
+
     protected static ?string $heading = 'CPU 占用率';
 
-    protected static ?int $sort = 5;
+    private const MAX_POINTS = 6;
-
-    protected int | string | array $columnSpan = '1';
 
     protected function getData(): array
     {
         $prometheus = new PrometheusService();
 
-        // 查询 CPU 使用率数据，获取最近 60 秒内的平均值
+        // 查询过去 1 分钟内的每秒 CPU 占用率数据
-        $query = '100 - (avg by(instance) (rate(node_cpu_seconds_total{mode="idle"}[60s])) * 100)';
+        $cpuUsageRange = $prometheus->queryRange(
-        $cpuUsageResult = $prometheus->query($query);
+            '100 - (avg by(instance) (rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)',
+            now()->subMinutes(1)->timestamp,
+            now()->timestamp,
+            1 // 每秒一个数据点
+        );
 
-        // 计算使用率和空闲率
+        $labels = [];
-        $cpuUsage = 0;
+        $data = [];
-        if (isset($cpuUsageResult['data']['result'][0]['value'][1])) {
+
-            $cpuUsage = floatval($cpuUsageResult['data']['result'][0]['value'][1]);
+        if (!empty($cpuUsageRange['data']['result'][0]['values'])) {
+            // 取出所有的数据点，以时间戳为键
+            $cpuValues = array_column($cpuUsageRange['data']['result'][0]['values'], 1, 0);
+
+            // 只保留最新的 MAX_POINTS 个数据点
+            $timestamps = array_keys($cpuValues);
+            $timestamps = array_slice($timestamps, -self::MAX_POINTS);
+
+            date_default_timezone_set('Asia/Shanghai');
+            foreach ($timestamps as $timestamp) {
+                $labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
+                $data[] = round(floatval($cpuValues[$timestamp]), 2); // 取出每个时间点的 CPU 占用率，并保留两位小数
+            }
         }
-        $cpuIdle = 100 - $cpuUsage;
-
-        $data = [
-            round($cpuUsage, 2),
-            round($cpuIdle, 2),
-        ];
 
         return [
-            'labels' => ['CPU 使用率', 'CPU 空闲率'],
+            'labels' => $labels,
             'datasets' => [
                 [
-                    'label' => 'CPU 占用情况',
+                    'label' => 'CPU 占用率 (%)',
                     'data' => $data,
-                    'backgroundColor' => ['#FF8080', '#E0F5B9'], // 柔和颜色
+                    'borderColor' => '#FF0000',
-                    'borderColor' => ['#FF8080', '#E0F5B9'], // 边框颜色
+                    'backgroundColor' => 'rgba(255, 0, 0, 0.2)',
-                    'borderWidth' => 1, // 边框宽度
+                    'fill' => true,
+                    'tension' => 0.2,
                 ],
             ],
         ];
@@ -49,7 +60,20 @@ class CPUStatus extends ChartWidget
 
     protected function getType(): string
     {
-        return 'pie'; // 设置为饼图
+        return 'line'; // 设置为折线图
+    }
+
+    protected function getOptions(): array
+    {
+        return [
+            'scales' => [
+                'y' => [
+                    'beginAtZero' => true,
+                    'min' => 0,
+                    'max' => 100,
+                ],
+            ],
+        ];
     }
 
     protected function getPollingInterval(): ?string

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

@@ -11,12 +11,14 @@ class PrometheusMemory extends ChartWidget
 
     protected static ?string $heading = '内存占用率';
 
+    // 固定显示的数据点数
+    private const MAX_POINTS = 6;
+
     protected function getData(): array
     {
         $prometheus = new PrometheusService();
 
-
+        // 查询过去 1 分钟内的每 6 秒一个数据点
-// 查询过去 1 分钟内的每 6 秒一个数据点
         $memoryUsageRange = $prometheus->queryRange(
             '(1 - (avg_over_time(node_memory_MemAvailable_bytes[1m]) / avg_over_time(node_memory_MemTotal_bytes[1m]))) * 100',
             now()->subMinutes(1)->timestamp,
@@ -29,9 +31,17 @@ class PrometheusMemory extends ChartWidget
 
         if (!empty($memoryUsageRange['data']['result'][0]['values'])) {
             date_default_timezone_set('Asia/Shanghai');
-            foreach ($memoryUsageRange['data']['result'][0]['values'] as $index => $value) {
+
-                $labels[] = date('H:i:s', $value[0]); // 格式化时间戳为小时:分钟:秒
+            // 获取内存使用率数据
-                $data[] = round($value[1], 2); // 取出每个时间点的内存使用率，并保留两位小数
+            $memoryValues = array_column($memoryUsageRange['data']['result'][0]['values'], 1, 0);
+
+            // 只保留最新的 MAX_POINTS 个数据点
+            $timestamps = array_keys($memoryValues);
+            $timestamps = array_slice($timestamps, -self::MAX_POINTS);
+
+            foreach ($timestamps as $timestamp) {
+                $labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
+                $data[] = round(floatval($memoryValues[$timestamp]), 2); // 取出每个时间点的内存使用率，并保留两位小数
             }
         }
 
@@ -54,4 +64,22 @@ class PrometheusMemory extends ChartWidget
     {
         return 'line';
     }
+
+    protected function getOptions(): array
+    {
+        return [
+            'scales' => [
+                'y' => [
+                    'beginAtZero' => true,
+                    'min' => 0, // 设置 y 轴最小值
+                    'max' => 100, // 设置 y 轴最大值
+                ],
+            ],
+        ];
+    }
+
+    protected function getPollingInterval(): ?string
+    {
+        return '6s'; // 每 6 秒更新一次
+    }
 }