Add back network chart (#1283)

* add back network chart

* don't show timestamp

* convert "total" to "real time"

* fix typo

* set min to 0

* sort data to make sure we actually get the previous value

* Fix `ServerNetworkChart`

* Many changes...

* small cleanup

---------

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

app/Filament/Pages/Auth/EditProfile.php

@@ -366,16 +366,18 @@ class EditProfile extends BaseEditProfile
                                         Section::make(trans('profile.console'))
                                             ->collapsible()
                                             ->icon('tabler-brand-tabler')
+                                            ->columns(4)
                                             ->schema([
-                                                TextInput::make('console_rows')
+                                                TextInput::make('console_font_size')
-                                                    ->label(trans('profile.rows'))
+                                                    ->label(trans('profile.font_size'))
+                                                    ->columnSpan(1)
                                                     ->minValue(1)
                                                     ->numeric()
                                                     ->required()
-                                                    ->columnSpan(1)
+                                                    ->default(14),
-                                                    ->default(30),
                                                 Select::make('console_font')
                                                     ->label(trans('profile.font'))
+                                                    ->required()
                                                     ->options(function () {
                                                         $fonts = [
                                                             'monospace' => 'monospace', //default
@@ -399,7 +401,8 @@ class EditProfile extends BaseEditProfile
                                                     ->default('monospace')
                                                     ->afterStateUpdated(fn ($state, callable $set) => $set('font_preview', $state)),
                                                 Placeholder::make('font_preview')
-                                                    ->label('Preview')
+                                                    ->label(trans('profile.font_preview'))
+                                                    ->columnSpan(2)
                                                     ->content(function (Get $get) {
                                                         $fontName = $get('console_font') ?? 'monospace';
                                                         $fontSize = $get('console_font_size') . 'px';
@@ -421,13 +424,24 @@ class EditProfile extends BaseEditProfile
                                                                     <span class="preview-text">The quick blue pelican jumps over the lazy pterodactyl. :)</span>
                                                                 HTML);
                                                     }),
-                                                TextInput::make('console_font_size')
+                                                TextInput::make('console_graph_period')
-                                                    ->label(trans('profile.font_size'))
+                                                    ->label(trans('profile.graph_period'))
-                                                    ->columnSpan(1)
+                                                    ->suffix(trans('profile.seconds'))
+                                                    ->hintIcon('tabler-question-mark')
+                                                    ->hintIconTooltip(trans('profile.graph_period_helper'))
+                                                    ->columnSpan(2)
+                                                    ->numeric()
+                                                    ->default(30)
+                                                    ->minValue(10)
+                                                    ->maxValue(120)
+                                                    ->required(),
+                                                TextInput::make('console_rows')
+                                                    ->label(trans('profile.rows'))
                                                     ->minValue(1)
                                                     ->numeric()
                                                     ->required()
-                                                    ->default(14),
+                                                    ->columnSpan(2)
+                                                    ->default(30),
                                             ]),
                                     ]),
                             ]),
@@ -493,6 +507,7 @@ class EditProfile extends BaseEditProfile
             'console_font' => $data['console_font'],
             'console_font_size' => $data['console_font_size'],
             'console_rows' => $data['console_rows'],
+            'console_graph_period' => $data['console_graph_period'],
             'dashboard_layout' => $data['dashboard_layout'],
         ];
 
@@ -509,6 +524,7 @@ class EditProfile extends BaseEditProfile
         $data['console_font'] = $moarbetterdata['console_font'] ?? 'ComicMono';
         $data['console_font_size'] = $moarbetterdata['console_font_size'] ?? 14;
         $data['console_rows'] = $moarbetterdata['console_rows'] ?? 30;
+        $data['console_graph_period'] = $moarbetterdata['console_graph_period'] ?? 30;
         $data['dashboard_layout'] = $moarbetterdata['dashboard_layout'] ?? 'grid';
 
         return $data;

app/Filament/Server/Pages/Console.php

@@ -9,7 +9,7 @@ use App\Extensions\Features\FeatureProvider;
 use App\Filament\Server\Widgets\ServerConsole;
 use App\Filament\Server\Widgets\ServerCpuChart;
 use App\Filament\Server\Widgets\ServerMemoryChart;
-// use App\Filament\Server\Widgets\ServerNetworkChart;
+use App\Filament\Server\Widgets\ServerNetworkChart;
 use App\Filament\Server\Widgets\ServerOverview;
 use App\Livewire\AlertBanner;
 use App\Models\Permission;
@@ -112,7 +112,7 @@ class Console extends Page
         $allWidgets = array_merge($allWidgets, [
             ServerCpuChart::class,
             ServerMemoryChart::class,
-            //ServerNetworkChart::class, TODO: convert units.
+            ServerNetworkChart::class,
         ]);
 
         $allWidgets = array_merge($allWidgets, static::$customWidgets[ConsoleWidgetPosition::Bottom->value] ?? []);

app/Filament/Server/Widgets/ServerCpuChart.php

@@ -18,8 +18,9 @@ class ServerCpuChart extends ChartWidget
 
     protected function getData(): array
     {
+        $period = auth()->user()->getCustomization()['console_graph_period'] ?? 30;
         $cpu = collect(cache()->get("servers.{$this->server->id}.cpu_absolute"))
-            ->slice(-10)
+            ->slice(-$period)
             ->map(fn ($value, $key) => [
                 'cpu' => Number::format($value, maxPrecision: 2),
                 'timestamp' => Carbon::createFromTimestamp($key, auth()->user()->timezone ?? 'UTC')->format('H:i:s'),

app/Filament/Server/Widgets/ServerMemoryChart.php

@@ -18,7 +18,9 @@ class ServerMemoryChart extends ChartWidget
 
     protected function getData(): array
     {
-        $memUsed = collect(cache()->get("servers.{$this->server->id}.memory_bytes"))->slice(-10)
+        $period = auth()->user()->getCustomization()['console_graph_period'] ?? 30;
+        $memUsed = collect(cache()->get("servers.{$this->server->id}.memory_bytes"))
+            ->slice(-$period)
             ->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'),

app/Filament/Server/Widgets/ServerNetworkChart.php

@@ -9,56 +9,58 @@ use Filament\Widgets\ChartWidget;
 
 class ServerNetworkChart extends ChartWidget
 {
-    protected static ?string $heading = 'Network';
-
     protected static ?string $pollingInterval = '1s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
     public ?Server $server = null;
 
     protected function getData(): array
     {
-        $data = cache()->get("servers.{$this->server->id}.network");
+        $previous = null;
 
-        $rx = collect($data)
+        $period = auth()->user()->getCustomization()['console_graph_period'] ?? 30;
-            ->slice(-10)
+        $net = collect(cache()->get("servers.{$this->server->id}.network"))
-            ->map(fn ($value, $key) => [
+            ->slice(-$period)
-                'rx' => $value->rx_bytes,
+            ->map(function ($current, $timestamp) use (&$previous) {
-                'timestamp' => Carbon::createFromTimestamp($key, (auth()->user()->timezone ?? 'UTC'))->format('H:i:s'),
+                $net = null;
-            ])
-            ->all();
 
-        $tx = collect($data)
+                if ($previous !== null) {
-            ->slice(-10)
+                    $net = [
-            ->map(fn ($value, $key) => [
+                        'rx' => max(0, $current->rx_bytes - $previous->rx_bytes),
-                'tx' => $value->rx_bytes,
+                        'tx' => max(0, $current->tx_bytes - $previous->tx_bytes),
-                'timestamp' => Carbon::createFromTimestamp($key, (auth()->user()->timezone ?? 'UTC'))->format('H:i:s'),
+                        'timestamp' => Carbon::createFromTimestamp($timestamp, auth()->user()->timezone ?? 'UTC')->format('H:i:s'),
-            ])
+                    ];
+                }
+
+                $previous = $current;
+
+                return $net;
+            })
             ->all();
 
         return [
             'datasets' => [
                 [
                     'label' => 'Inbound',
-                    'data' => array_column($rx, 'rx'),
+                    'data' => array_column($net, 'rx'),
                     'backgroundColor' => [
-                        'rgba(96, 165, 250, 0.3)',
+                        'rgba(100, 255, 105, 0.5)',
                     ],
                     'tension' => '0.3',
                     'fill' => true,
                 ],
                 [
                     'label' => 'Outbound',
-                    'data' => array_column($tx, 'tx'),
+                    'data' => array_column($net, 'tx'),
                     'backgroundColor' => [
-                        'rgba(165, 96, 250, 0.3)',
+                        'rgba(96, 165, 250, 0.3)',
                     ],
                     'tension' => '0.3',
                     'fill' => true,
                 ],
             ],
-            'labels' => array_column($rx, 'timestamp'),
+            'labels' => array_column($net, 'timestamp'),
         ];
     }
 
@@ -69,25 +71,38 @@ class ServerNetworkChart extends ChartWidget
 
     protected function getOptions(): RawJs
     {
+        // TODO: use "panel.use_binary_prefix" config value
         return RawJs::make(<<<'JS'
         {
             scales: {
                 x: {
-                    grid: {
                     display: false,
                 },
-                    ticks: {
-                        display: true,
-                    },
-                    display: false, //debug
-                },
                 y: {
+                    min: 0,
                     ticks: {
                         display: true,
+                        callback(value) {
+                            const bytes = typeof value === 'string' ? parseInt(value, 10) : value;
+
+                            if (bytes < 1) return '0 Bytes';
+
+                            const i = Math.floor(Math.log(bytes) / Math.log(1024));
+                            const number = Number((bytes / Math.pow(1024, i)).toFixed(2));
+
+                            return `${number} ${['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'][i]}`;
+                        },
                     },
                 },
             }
         }
     JS);
     }
+
+    public function getHeading(): string
+    {
+        $lastData = collect(cache()->get("servers.{$this->server->id}.network"))->last();
+
+        return 'Network - ↓' . convert_bytes_to_readable($lastData->rx_bytes ?? 0) . ' - ↑' . convert_bytes_to_readable($lastData->tx_bytes ?? 0);
+    }
 }

lang/en/profile.php

@@ -47,4 +47,8 @@ return [
     'rows' => 'Rows',
     'font_size' => 'Font Size',
     'font' => 'Font',
+    'font_preview' => 'Font Preview',
+    'seconds' => 'Seconds',
+    'graph_period' => 'Graph Period',
+    'graph_period_helper' => 'The amount of data points, seconds, shown on the console graphs.',
 ];