From a70f667e9e039db29a876d7b8490e286a3181a00 Mon Sep 17 00:00:00 2001 From: makotocc0107 <1424018999@qq.com> Date: Fri, 30 Aug 2024 14:25:27 +0800 Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=94=B9]=E4=BC=98=E5=8C=96=E4=BA=86?= =?UTF-8?q?=E4=BA=86CPU=E5=8D=A0=E7=94=A8=E7=8E=87=E4=B8=8E=E5=86=85?= =?UTF-8?q?=E5=AD=98=E5=8D=A0=E7=94=A8=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/Filament/Widgets/CPUStatus.php | 68 +++++++++++++------ .../app/Filament/Widgets/PrometheusMemory.php | 38 +++++++++-- 2 files changed, 79 insertions(+), 27 deletions(-) diff --git a/management-panel/app/Filament/Widgets/CPUStatus.php b/management-panel/app/Filament/Widgets/CPUStatus.php index 1fbac44..a6d2965 100644 --- a/management-panel/app/Filament/Widgets/CPUStatus.php +++ b/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; - - protected int | string | array $columnSpan = '1'; + private const MAX_POINTS = 6; protected function getData(): array { $prometheus = new PrometheusService(); - // 查询 CPU 使用率数据，获取最近 60 秒内的平均值 - $query = '100 - (avg by(instance) (rate(node_cpu_seconds_total{mode="idle"}[60s])) * 100)'; - $cpuUsageResult = $prometheus->query($query); + // 查询过去 1 分钟内的每秒 CPU 占用率数据 + $cpuUsageRange = $prometheus->queryRange( + '100 - (avg by(instance) (rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)', + now()->subMinutes(1)->timestamp, + now()->timestamp, + 1 // 每秒一个数据点 + ); - // 计算使用率和空闲率 - $cpuUsage = 0; - if (isset($cpuUsageResult['data']['result'][0]['value'][1])) { - $cpuUsage = floatval($cpuUsageResult['data']['result'][0]['value'][1]); + $labels = []; + $data = []; + + 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' => ['#FF8080', '#E0F5B9'], // 边框颜色 - 'borderWidth' => 1, // 边框宽度 + 'borderColor' => '#FF0000', + 'backgroundColor' => 'rgba(255, 0, 0, 0.2)', + '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 diff --git a/management-panel/app/Filament/Widgets/PrometheusMemory.php b/management-panel/app/Filament/Widgets/PrometheusMemory.php index f1a2ae0..c57e202 100644 --- a/management-panel/app/Filament/Widgets/PrometheusMemory.php +++ b/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 秒更新一次 + } }