From e2c87a820603dcc95d703242d83d89743bee24a0 Mon Sep 17 00:00:00 2001 From: Boy132 Date: Tue, 6 May 2025 23:32:01 +0200 Subject: [PATCH] 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 --- app/Filament/Pages/Auth/EditProfile.php | 34 ++++++--- app/Filament/Server/Pages/Console.php | 4 +- .../Server/Widgets/ServerCpuChart.php | 3 +- .../Server/Widgets/ServerMemoryChart.php | 4 +- .../Server/Widgets/ServerNetworkChart.php | 73 +++++++++++-------- lang/en/profile.php | 4 + 6 files changed, 80 insertions(+), 42 deletions(-) diff --git a/app/Filament/Pages/Auth/EditProfile.php b/app/Filament/Pages/Auth/EditProfile.php index 6f7571a61..8bf4dc6e5 100644 --- a/app/Filament/Pages/Auth/EditProfile.php +++ b/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') - ->label(trans('profile.rows')) + TextInput::make('console_font_size') + ->label(trans('profile.font_size')) + ->columnSpan(1) ->minValue(1) ->numeric() ->required() - ->columnSpan(1) - ->default(30), + ->default(14), 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 The quick blue pelican jumps over the lazy pterodactyl. :) HTML); }), - TextInput::make('console_font_size') - ->label(trans('profile.font_size')) - ->columnSpan(1) + TextInput::make('console_graph_period') + ->label(trans('profile.graph_period')) + ->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; diff --git a/app/Filament/Server/Pages/Console.php b/app/Filament/Server/Pages/Console.php index 065482bfb..8e30310c5 100644 --- a/app/Filament/Server/Pages/Console.php +++ b/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] ?? []); diff --git a/app/Filament/Server/Widgets/ServerCpuChart.php b/app/Filament/Server/Widgets/ServerCpuChart.php index 7f6cb4458..2d6a52058 100644 --- a/app/Filament/Server/Widgets/ServerCpuChart.php +++ b/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'), diff --git a/app/Filament/Server/Widgets/ServerMemoryChart.php b/app/Filament/Server/Widgets/ServerMemoryChart.php index 8f2d5f640..858029c5b 100644 --- a/app/Filament/Server/Widgets/ServerMemoryChart.php +++ b/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'), diff --git a/app/Filament/Server/Widgets/ServerNetworkChart.php b/app/Filament/Server/Widgets/ServerNetworkChart.php index 8caf58e64..55abf1cb1 100644 --- a/app/Filament/Server/Widgets/ServerNetworkChart.php +++ b/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) - ->slice(-10) - ->map(fn ($value, $key) => [ - 'rx' => $value->rx_bytes, - 'timestamp' => Carbon::createFromTimestamp($key, (auth()->user()->timezone ?? 'UTC'))->format('H:i:s'), - ]) - ->all(); + $period = auth()->user()->getCustomization()['console_graph_period'] ?? 30; + $net = collect(cache()->get("servers.{$this->server->id}.network")) + ->slice(-$period) + ->map(function ($current, $timestamp) use (&$previous) { + $net = null; - $tx = collect($data) - ->slice(-10) - ->map(fn ($value, $key) => [ - 'tx' => $value->rx_bytes, - 'timestamp' => Carbon::createFromTimestamp($key, (auth()->user()->timezone ?? 'UTC'))->format('H:i:s'), - ]) + if ($previous !== null) { + $net = [ + 'rx' => max(0, $current->rx_bytes - $previous->rx_bytes), + 'tx' => max(0, $current->tx_bytes - $previous->tx_bytes), + '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 + display: false, }, 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); + } } diff --git a/lang/en/profile.php b/lang/en/profile.php index e6354118c..525f6f235 100644 --- a/lang/en/profile.php +++ b/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.', ];