mirror of
https://github.com/pelican-dev/panel.git
synced 2025-05-19 21:04:44 +02:00
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>
This commit is contained in:
Boy132
GitHub
parent
e38a736b61
commit
e2c87a8206
@ -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
|
||||
<span class="preview-text">The quick blue pelican jumps over the lazy pterodactyl. :)</span>
|
||||
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;
|
||||
|
||||
@ -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] ?? []);
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.',
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user