Add graphs to console page

Graphs still need to get the data from the web socket.
pelican-dev · Aug 25, 2024 · 888e26a · 888e26a
1 parent 493e0f8
commit 888e26a
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 1 deletion.
diff --git a/app/Filament/App/Pages/Console.php b/app/Filament/App/Pages/Console.php
@@ -4,6 +4,9 @@
 
 use Filament\Actions\Action;
 use Filament\Facades\Filament;
+use Filament\Forms\Components\Split;
+use Filament\Forms\Components\View;
+use Filament\Forms\Form;
 use Filament\Pages\Page;
 
 class Console extends Page
@@ -16,6 +19,17 @@ class Console extends Page
     public int $historyIndex = 0;
     public string $input = '';
 
+    public function form(Form $form): Form
+    {
+        return $form
+            ->columns(9)
+            ->schema([
+                View::make('filament.components.server-cpu-chart')->columnSpan(3),
+                View::make('filament.components.server-memory-chart')->columnSpan(3),
+                View::make('filament.components.server-network-chart')->columnSpan(3),
+            ]);
+    }
+
     protected function getViewData(): array
     {
         return [
@@ -24,6 +38,15 @@ protected function getViewData(): array
         ];
     }
 
+    protected function getColumnSpan(): string
+    {
+        return ''; //TODO: Why do we need this...
+    }
+    protected function getColumnStart(): string
+    {
+        return ''; //TODO: Why do we need this...
+    }
+
     protected function getHeaderActions(): array
     {
         return [

diff --git a/app/Filament/App/Widgets/ServerCpuChart.php b/app/Filament/App/Widgets/ServerCpuChart.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Filament\App\Widgets;
+
+use Filament\Support\RawJs;
+use Filament\Widgets\ChartWidget;
+use Illuminate\Database\Eloquent\Model;
+
+class ServerCpuChart extends ChartWidget
+{
+    protected static ?string $pollingInterval = '5s';
+    protected static ?string $maxHeight = '300px';
+
+    public ?Model $record = null;
+
+    protected function getData(): array
+    {
+        $cpu = [];
+
+        return [
+            'datasets' => [
+                [
+                    'data' => array_column($cpu, 'cpu'),
+                    'backgroundColor' => [
+                        'rgba(96, 165, 250, 0.3)',
+                    ],
+                    'tension' => '0.3',
+                    'fill' => true,
+                ],
+            ],
+            'labels' => array_column($cpu, 'timestamp'),
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'line';
+    }
+
+    protected function getOptions(): RawJs
+    {
+        return RawJs::make(<<<'JS'
+        {
+            scales: {
+                y: {
+                    min: 0,
+                },
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                }
+            }
+        }
+    JS);
+    }
+
+    public function getHeading(): string
+    {
+        return 'CPU - $current% Of $max%';
+    }
+}
diff --git a/app/Filament/App/Widgets/ServerMemoryChart.php b/app/Filament/App/Widgets/ServerMemoryChart.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Filament\App\Widgets;
+
+use Filament\Support\RawJs;
+use Filament\Widgets\ChartWidget;
+use Illuminate\Database\Eloquent\Model;
+
+class ServerMemoryChart extends ChartWidget
+{
+    protected static ?string $pollingInterval = '5s';
+    protected static ?string $maxHeight = '300px';
+
+    public ?Model $record = null;
+
+    protected function getData(): array
+    {
+        $memUsed = [];
+
+        return [
+            'datasets' => [
+                [
+                    'data' => array_column($memUsed, 'memory'),
+                    'backgroundColor' => [
+                        'rgba(96, 165, 250, 0.3)',
+                    ],
+                    'tension' => '0.3',
+                    'fill' => true,
+                ],
+            ],
+            'labels' => array_column($memUsed, 'timestamp'),
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'line';
+    }
+
+    protected function getOptions(): RawJs
+    {
+        return RawJs::make(<<<'JS'
+        {
+            scales: {
+                y: {
+                    min: 0,
+                },
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                }
+            }
+        }
+    JS);
+    }
+
+    public function getHeading(): string
+    {
+        return 'Memory - $used Of $total';
+    }
+}
diff --git a/app/Filament/App/Widgets/ServerNetworkChart.php b/app/Filament/App/Widgets/ServerNetworkChart.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Filament\App\Widgets;
+
+use Filament\Widgets\ChartWidget;
+use Illuminate\Database\Eloquent\Model;
+
+class ServerNetworkChart extends ChartWidget
+{
+    protected static ?string $heading = 'Network';
+    protected static ?string $pollingInterval = '60s';
+    protected static ?string $maxHeight = '300px';
+
+    public ?Model $record = null;
+
+    protected static ?array $options = [
+        'scales' => [
+            'x' => [
+                'grid' => [
+                    'display' => false,
+                ],
+                'ticks' => [
+                    'display' => false,
+                ],
+            ],
+            'y' => [
+                'grid' => [
+                    'display' => false,
+                ],
+                'ticks' => [
+                    'display' => false,
+                ],
+            ],
+        ],
+    ];
+
+    protected function getData(): array
+    {
+
+        return [];
+    }
+
+    protected function getType(): string
+    {
+        return 'line';
+    }
+}
diff --git a/resources/views/filament/app/pages/console.blade.php b/resources/views/filament/app/pages/console.blade.php
@@ -54,6 +54,8 @@ class="w-full bg-transparent"
                 wire:keydown.down="down"
             >
         </div>
+
+
     </div>
 
     @script
@@ -137,5 +139,7 @@ class="w-full bg-transparent"
         });
     </script>
     @endscript
-
+    <x-filament-panels::form>
+        {{ $this->form }}
+    </x-filament-panels::form>
 </x-filament-panels::page>
diff --git a/resources/views/filament/components/server-cpu-chart.blade.php b/resources/views/filament/components/server-cpu-chart.blade.php
@@ -0,0 +1,3 @@
+<x-filament::widget>
+        @livewire(\App\Filament\App\Widgets\ServerCpuChart::class, ['record'=> $getRecord()])
+</x-filament::widget>
diff --git a/resources/views/filament/components/server-memory-chart.blade.php b/resources/views/filament/components/server-memory-chart.blade.php
@@ -0,0 +1,3 @@
+<x-filament::widget>
+        @livewire(\App\Filament\App\Widgets\ServerMemoryChart::class, ['record'=> $getRecord()])
+</x-filament::widget>
diff --git a/resources/views/filament/components/server-network-chart.blade.php b/resources/views/filament/components/server-network-chart.blade.php
@@ -0,0 +1,3 @@
+<x-filament::widget>
+        @livewire(\App\Filament\App\Widgets\ServerNetworkChart::class, ['record'=> $getRecord()])
+</x-filament::widget>