Edit Node Listing, Enable Storage Graph (#905)

* Remove limits in listing

* Enable Storage Graph

* Wings gives us bytes, use helper function

* Use Node Model

* Remove `?? 0`

* Re-Add `?? 0` remove local

* Add Locale on chart

* We should convert these too...

convert_bytes_to_readable follows the prefix config, so we should do it here too.

---------

Co-authored-by: RMartinOscar <40749467+RMartinOscar@users.noreply.github.com>

app/Filament/Admin/Resources/NodeResource/Pages/EditNode.php

@@ -86,7 +86,8 @@ class EditNode extends EditRecord
                                     'md' => 2,
                                     'lg' => 2,
                                 ]),
-                            // TODO: Make purdy View::make('filament.components.node-storage-chart')->columnSpan(3),
+                            View::make('filament.components.node-storage-chart')
+                                ->columnSpanFull(),
                         ]),
                     Tab::make('Basic Settings')
                         ->icon('tabler-server')

app/Filament/Admin/Resources/NodeResource/Pages/ListNodes.php

@@ -12,7 +12,6 @@ use Filament\Tables\Actions\EditAction;
 use Filament\Tables\Columns\IconColumn;
 use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Table;
-use Illuminate\Support\Number;
 
 class ListNodes extends ListRecords
 {
@@ -39,26 +38,6 @@ class ListNodes extends ListRecords
                     ->icon('tabler-network')
                     ->sortable()
                     ->searchable(),
-                TextColumn::make('memory')
-                    ->visibleFrom('sm')
-                    ->icon('tabler-device-desktop-analytics')
-                    ->numeric()
-                    ->suffix(config('panel.use_binary_prefix') ? ' GiB' : ' GB')
-                    ->formatStateUsing(fn ($state) => Number::format($state / (config('panel.use_binary_prefix') ? 1024 : 1000), maxPrecision: 2, locale: auth()->user()->language))
-                    ->sortable(),
-                TextColumn::make('disk')
-                    ->visibleFrom('sm')
-                    ->icon('tabler-file')
-                    ->numeric()
-                    ->suffix(config('panel.use_binary_prefix') ? ' GiB' : ' GB')
-                    ->formatStateUsing(fn ($state) => Number::format($state / (config('panel.use_binary_prefix') ? 1024 : 1000), maxPrecision: 2, locale: auth()->user()->language))
-                    ->sortable(),
-                TextColumn::make('cpu')
-                    ->visibleFrom('sm')
-                    ->icon('tabler-cpu')
-                    ->numeric()
-                    ->suffix(' %')
-                    ->sortable(),
                 IconColumn::make('scheme')
                     ->visibleFrom('xl')
                     ->label('SSL')

app/Filament/Admin/Resources/NodeResource/Widgets/NodeCpuChart.php

@@ -6,7 +6,6 @@ use App\Models\Node;
 use Carbon\Carbon;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Number;
 
 class NodeCpuChart extends ChartWidget
@@ -15,15 +14,13 @@ class NodeCpuChart extends ChartWidget
 
     protected static ?string $maxHeight = '300px';
 
-    public ?Model $record = null;
+    public Node $node;
 
     protected function getData(): array
     {
-        /** @var Node $node */
+        $threads = $this->node->systemInformation()['cpu_count'] ?? 0;
-        $node = $this->record;
-        $threads = $node->systemInformation()['cpu_count'] ?? 0;
 
-        $cpu = collect(cache()->get("nodes.$node->id.cpu_percent"))
+        $cpu = collect(cache()->get("nodes.{$this->node->id}.cpu_percent"))
             ->slice(-10)
             ->map(fn ($value, $key) => [
                 'cpu' => Number::format($value * $threads, maxPrecision: 2),
@@ -72,11 +69,9 @@ class NodeCpuChart extends ChartWidget
 
     public function getHeading(): string
     {
-        /** @var Node $node */
+        $threads = $this->node->systemInformation()['cpu_count'] ?? 0;
-        $node = $this->record;
-        $threads = $node->systemInformation()['cpu_count'] ?? 0;
 
-        $cpu = Number::format(collect(cache()->get("nodes.$node->id.cpu_percent"))->last() * $threads, maxPrecision: 2, locale: auth()->user()->language);
+        $cpu = Number::format(collect(cache()->get("nodes.{$this->node->id}.cpu_percent"))->last() * $threads, maxPrecision: 2, locale: auth()->user()->language);
         $max = Number::format($threads * 100, locale: auth()->user()->language) . '%';
 
         return 'CPU - ' . $cpu . '% Of ' . $max;

app/Filament/Admin/Resources/NodeResource/Widgets/NodeMemoryChart.php

@@ -6,7 +6,6 @@ use App\Models\Node;
 use Carbon\Carbon;
 use Filament\Support\RawJs;
 use Filament\Widgets\ChartWidget;
-use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Number;
 
 class NodeMemoryChart extends ChartWidget
@@ -15,14 +14,11 @@ class NodeMemoryChart extends ChartWidget
 
     protected static ?string $maxHeight = '300px';
 
-    public ?Model $record = null;
+    public Node $node;
 
     protected function getData(): array
     {
-        /** @var Node $node */
+        $memUsed = collect(cache()->get("nodes.{$this->node->id}.memory_used"))->slice(-10)
-        $node = $this->record;
-
-        $memUsed = collect(cache()->get("nodes.$node->id.memory_used"))->slice(-10)
             ->map(fn ($value, $key) => [
                 'memory' => Number::format(config('panel.use_binary_prefix') ? $value / 1024 / 1024 / 1024 : $value / 1000 / 1000 / 1000, maxPrecision: 2),
                 'timestamp' => Carbon::createFromTimestamp($key, auth()->user()->timezone ?? 'UTC')->format('H:i:s'),
@@ -70,10 +66,8 @@ class NodeMemoryChart extends ChartWidget
 
     public function getHeading(): string
     {
-        /** @var Node $node */
+        $latestMemoryUsed = collect(cache()->get("nodes.{$this->node->id}.memory_used"))->last();
-        $node = $this->record;
+        $totalMemory = collect(cache()->get("nodes.{$this->node->id}.memory_total"))->last();
-        $latestMemoryUsed = collect(cache()->get("nodes.$node->id.memory_used"))->last();
-        $totalMemory = collect(cache()->get("nodes.$node->id.memory_total"))->last();
 
         $used = config('panel.use_binary_prefix')
             ? Number::format($latestMemoryUsed / 1024 / 1024 / 1024, maxPrecision: 2, locale: auth()->user()->language) .' GiB'

app/Filament/Admin/Resources/NodeResource/Widgets/NodeStorageChart.php

@@ -4,17 +4,17 @@ namespace App\Filament\Admin\Resources\NodeResource\Widgets;
 
 use App\Models\Node;
 use Filament\Widgets\ChartWidget;
-use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Number;
 
 class NodeStorageChart extends ChartWidget
 {
     protected static ?string $heading = 'Storage';
 
-    protected static ?string $pollingInterval = '60s';
+    protected static ?string $pollingInterval = '360s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
-    public ?Model $record = null;
+    public Node $node;
 
     protected static ?array $options = [
         'scales' => [
@@ -39,11 +39,13 @@ class NodeStorageChart extends ChartWidget
 
     protected function getData(): array
     {
-        /** @var Node $node */
+        $total = Number::format(config('panel.use_binary_prefix')
-        $node = $this->record;
+            ? ($this->node->statistics()['disk_total'] ?? 0) / 1024 / 1024 / 1024
+            : ($this->node->statistics()['disk_total'] ?? 0) / 1000 / 1000 / 1000, maxPrecision: 2);
+        $used = Number::format(config('panel.use_binary_prefix')
+            ? ($this->node->statistics()['disk_used'] ?? 0) / 1024 / 1024 / 1024
+            : ($this->node->statistics()['disk_used'] ?? 0) / 1000 / 1000 / 1000, maxPrecision: 2);
 
-        $total = ($node->statistics()['disk_total'] ?? 0) / 1024 / 1024 / 1024;
-        $used = ($node->statistics()['disk_used'] ?? 0) / 1024 / 1024 / 1024;
         $unused = $total - $used;
 
         return [
@@ -51,13 +53,14 @@ class NodeStorageChart extends ChartWidget
                 [
                     'data' => [$used, $unused],
                     'backgroundColor' => [
-                        'rgb(255, 99, 132)',
+                        'rgb(59, 130, 246)',
-                        'rgb(54, 162, 235)',
+                        'rgb(74, 222, 128)',
                         'rgb(255, 205, 86)',
                     ],
                 ],
             ],
             'labels' => ['Used', 'Unused'],
+            'locale' => auth()->user()->language ?? 'en',
         ];
     }
 
@@ -65,4 +68,9 @@ class NodeStorageChart extends ChartWidget
     {
         return 'pie';
     }
+
+    public function getHeading(): string
+    {
+        return 'Storage - ' . convert_bytes_to_readable($this->node->statistics()['disk_used'] ?? 0) . ' Of ' . convert_bytes_to_readable($this->node->statistics()['disk_total'] ?? 0);
+    }
 }

resources/views/filament/components/node-cpu-chart.blade.php

@@ -1,3 +1,3 @@
 <x-filament::widget>
-        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeCpuChart::class, ['record'=> $getRecord()])
+        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeCpuChart::class, ['node'=> $getRecord()])
 </x-filament::widget>

resources/views/filament/components/node-memory-chart.blade.php

@@ -1,3 +1,3 @@
 <x-filament::widget>
-        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeMemoryChart::class, ['record'=> $getRecord()])
+        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeMemoryChart::class, ['node'=> $getRecord()])
 </x-filament::widget>

resources/views/filament/components/node-storage-chart.blade.php

@@ -1,3 +1,3 @@
 <x-filament::widget>
-        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeStorageChart::class, ['record'=> $getRecord()])
+        @livewire(\App\Filament\Admin\Resources\NodeResource\Widgets\NodeStorageChart::class, ['node'=> $getRecord()])
 </x-filament::widget>