From 888e26ad6951441aded528f5d1d6f65725a65030 Mon Sep 17 00:00:00 2001 From: notCharles Date: Sat, 24 Aug 2024 21:43:17 -0400 Subject: [PATCH] Add graphs to console page Graphs still need to get the data from the web socket. --- app/Filament/App/Pages/Console.php | 23 +++++++ app/Filament/App/Widgets/ServerCpuChart.php | 62 +++++++++++++++++++ .../App/Widgets/ServerMemoryChart.php | 62 +++++++++++++++++++ .../App/Widgets/ServerNetworkChart.php | 47 ++++++++++++++ .../filament/app/pages/console.blade.php | 6 +- .../components/server-cpu-chart.blade.php | 3 + .../components/server-memory-chart.blade.php | 3 + .../components/server-network-chart.blade.php | 3 + 8 files changed, 208 insertions(+), 1 deletion(-) create mode 100644 app/Filament/App/Widgets/ServerCpuChart.php create mode 100644 app/Filament/App/Widgets/ServerMemoryChart.php create mode 100644 app/Filament/App/Widgets/ServerNetworkChart.php create mode 100644 resources/views/filament/components/server-cpu-chart.blade.php create mode 100644 resources/views/filament/components/server-memory-chart.blade.php create mode 100644 resources/views/filament/components/server-network-chart.blade.php diff --git a/app/Filament/App/Pages/Console.php b/app/Filament/App/Pages/Console.php index 48f80d9ca8..6da5371f24 100644 --- 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 new file mode 100644 index 0000000000..68ce2f0502 --- /dev/null +++ b/app/Filament/App/Widgets/ServerCpuChart.php @@ -0,0 +1,62 @@ + [ + [ + '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 new file mode 100644 index 0000000000..f05411544f --- /dev/null +++ b/app/Filament/App/Widgets/ServerMemoryChart.php @@ -0,0 +1,62 @@ + [ + [ + '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 new file mode 100644 index 0000000000..869dc187fc --- /dev/null +++ b/app/Filament/App/Widgets/ServerNetworkChart.php @@ -0,0 +1,47 @@ + [ + '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 index 412c7b6e9d..b4b83a0d94 100644 --- 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" > + + @script @@ -137,5 +139,7 @@ class="w-full bg-transparent" }); @endscript - + + {{ $this->form }} + diff --git a/resources/views/filament/components/server-cpu-chart.blade.php b/resources/views/filament/components/server-cpu-chart.blade.php new file mode 100644 index 0000000000..d4b2791a7c --- /dev/null +++ b/resources/views/filament/components/server-cpu-chart.blade.php @@ -0,0 +1,3 @@ + + @livewire(\App\Filament\App\Widgets\ServerCpuChart::class, ['record'=> $getRecord()]) + diff --git a/resources/views/filament/components/server-memory-chart.blade.php b/resources/views/filament/components/server-memory-chart.blade.php new file mode 100644 index 0000000000..bace4c858b --- /dev/null +++ b/resources/views/filament/components/server-memory-chart.blade.php @@ -0,0 +1,3 @@ + + @livewire(\App\Filament\App\Widgets\ServerMemoryChart::class, ['record'=> $getRecord()]) + diff --git a/resources/views/filament/components/server-network-chart.blade.php b/resources/views/filament/components/server-network-chart.blade.php new file mode 100644 index 0000000000..e990b606cf --- /dev/null +++ b/resources/views/filament/components/server-network-chart.blade.php @@ -0,0 +1,3 @@ + + @livewire(\App\Filament\App\Widgets\ServerNetworkChart::class, ['record'=> $getRecord()]) +