[优化]Metrics表格显示

management-panel/app/Filament/Resources/MetricResource.php

@@ -111,8 +111,6 @@ class MetricResource extends Resource
                                 return 'Unknown Type';
                         }
                     }),
-                TextColumn::make('help')
-                    ->label('帮助'),
 
                 InlineChart::make('data')
                     ->label('数据')
@@ -121,6 +119,9 @@ class MetricResource extends Resource
                     ->maxHeight(90)
                     ->description('')
                     ->toggleable(),
+
+                TextColumn::make('help')
+                    ->label('帮助'),
             ])
             ->filters([
                 //

management-panel/app/Livewire/MetricWidgetChart.php

@@ -3,67 +3,67 @@
 namespace App\Livewire;
 
 use App\Services\PrometheusService;
+use Filament\Support\RawJs;
 use LaraZeus\InlineChart\InlineChartWidget;
+use phpDocumentor\Reflection\Types\Null_;
 
 class MetricWidgetChart extends InlineChartWidget
 {
+    private const MAX_POINTS = 24;
+
+    protected static ?string $maxHeight = '65px';
+
+//    public int $maxWidth = 1000;
     protected function getData(): array
     {
         $prometheus = new PrometheusService();
-//        date_default_timezone_set('Asia/Shanghai');
+        date_default_timezone_set('Asia/Shanghai');
-
 
         $query1 = $this->record->name . '{data="real"}';
-        $query2 = $this->record->name . '{data="simulate"}';
 
 
-        $start = now()->subDays(1)->timestamp;
+        $start = now()->now()->subMinutes(2)->timestamp;
         $end = now()->timestamp;
-        $step = 60;
+        $step = 5;
         $realdata = $prometheus->queryRange($query1, $start, $end, $step);
-        $simulatedata = $prometheus->queryRange($query2, $start, $end, $step);
+
+
         // 检查查询结果是否有数据
-        if (empty($realdata['data']['result']) && empty($simulatedata['data']['result'])) {
+        if (empty($realdata['data']['result'])) {
             // 如果没有数据，返回一个空数据集或提示信息
-            return ['labels' => [], 'datasets' => [],];
+            return [
+                'labels' => [],
+                'datasets' => [],
+            ];
         }
-        // 将数据格式化为 InlineChartWidget 所需的格式
-        $formattedRealData = $this->formatData($realdata, 'Real Data');
-        $formattedSimulateData = $this->formatData($simulatedata, 'Simulate Data');
 
-        return [
+        if (!empty($realdata['data']['result'][0]['values'][1])) {
-            'labels' => $formattedRealData['labels'],
-            'datasets' => [
-                $formattedRealData['datasets'],
-                $formattedSimulateData['datasets'],
-            ],
-        ];
-    }
 
-    /**
+            // 获取内存使用率数据
-     * 将 Prometheus 查询结果格式化为 InlineChartWidget 所需的数据格式
+            $realdataValue = array_column($realdata['data']['result'][0]['values'], 1, 0);
-     *
-     * @param array $data Prometheus 查询结果
-     * @param string $label 数据集标签
-     * @return array 格式化后的数据
-     */
-    protected
-    function formatData(array $data, string $label): array
-    {
-        $labels = [];
-        $dataset = [
-            'label' => $label,
-            'data' => [],
-        ];
 
-        foreach ($data['data']['result'][0]['values'] as $point) {
+            // 只保留最新的 MAX_POINTS 个数据点
-            $labels[] = date('H:i', $point[0]);
+            $timestamps = array_keys($realdataValue);
-            $dataset['data'][] = $point[1];
+            $timestamps = array_slice($timestamps, -self::MAX_POINTS);
+
+            foreach ($timestamps as $timestamp) {
+                $labels[] = date('H:i:s', $timestamp); // 格式化时间戳为小时:分钟:秒
+                $data[] = round(floatval($realdataValue[$timestamp]), 2); // 取出每个时间点的内存使用率，并保留两位小数
+            }
         }
 
         return [
             'labels' => $labels,
-            'datasets' => $dataset,
+            'datasets' => [
+                [
+                    'label' => $this->record->name,
+                    'data' => $data,
+                    'borderColor' => '#4CAF50',
+                    'backgroundColor' => 'rgba(76, 175, 80, 0.2)',
+                    'fill' => true,
+                    'tension' => 0.2,
+                ],
+            ],
         ];
     }
 }