Add Custom StatBlocks, Add Stats (#1027)

* add custom statblock

* add custom datablock

* Use real values, not placeholders

* More Changes

* remove unused var

* Remove old code

* Remove more

* Updates

* Add LineHeight

Changing the font size cut off the j/g and _

* Fix invisible console selection

Closes #874

* Add Missing to `offline` detection

* Use helper

* Update

* Removals

* Move to `SmallStatBlock`

app/Filament/Server/Components/SmallStatBlock.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Filament\Server\Components;
+
+use Filament\Widgets\StatsOverviewWidget\Stat;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Contracts\View\View;
+
+class SmallStatBlock extends Stat
+{
+    protected string|Htmlable $label;
+
+    protected $value;
+
+    public function label(string|Htmlable $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function value($value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    public function getLabel(): string|Htmlable
+    {
+        return $this->label;
+    }
+
+    public function getValue()
+    {
+        return value($this->value);
+    }
+
+    public function toHtml(): string
+    {
+        return $this->render()->render();
+    }
+
+    public function render(): View
+    {
+        return view('filament.components.server-small-data-block', $this->data());
+    }
+}

app/Filament/Server/Components/StatBlock.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Filament\Server\Components;
+
+use Filament\Widgets\StatsOverviewWidget\Stat;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Contracts\View\View;
+
+class StatBlock extends Stat
+{
+    protected string|Htmlable $label;
+
+    protected $value;
+
+    public function label(string|Htmlable $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function value($value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    public function getLabel(): string|Htmlable
+    {
+        return $this->label;
+    }
+
+    public function getValue()
+    {
+        return value($this->value);
+    }
+
+    public function toHtml(): string
+    {
+        return $this->render()->render();
+    }
+
+    public function render(): View
+    {
+        return view('filament.components.server-data-block', $this->data());
+    }
+}

app/Filament/Server/Widgets/ServerCpuChart.php

@@ -70,9 +70,6 @@ class ServerCpuChart extends ChartWidget
 
     public function getHeading(): string
     {
-        $cpu = Number::format(collect(cache()->get("servers.{$this->server->id}.cpu_absolute"))->last() ?? 0, maxPrecision: 2, locale: auth()->user()->language) . '%';
-        $max = Number::format($this->server->cpu, locale: auth()->user()->language) . '%';
-
-        return 'CPU - ' . $cpu . ($this->server->cpu > 0 ? ' Of ' . $max : '');
+        return 'CPU';
     }
 }

app/Filament/Server/Widgets/ServerMemoryChart.php

@@ -69,23 +69,6 @@ class ServerMemoryChart extends ChartWidget
 
     public function getHeading(): string
     {
-        $latestMemoryUsed = collect(cache()->get("servers.{$this->server->id}.memory_bytes"))->last() ?? 0;
-        $totalMemory = collect(cache()->get("servers.{$this->server->id}.memory_limit_bytes"))->last() ?? 0;
-
-        $used = config('panel.use_binary_prefix')
-            ? Number::format($latestMemoryUsed / 1024 / 1024 / 1024, maxPrecision: 2, locale: auth()->user()->language) .' GiB'
-            : Number::format($latestMemoryUsed / 1000 / 1000 / 1000, maxPrecision: 2, locale: auth()->user()->language) . ' GB';
-
-        if ($totalMemory === 0) {
-            $total = config('panel.use_binary_prefix')
-                ? Number::format($this->server->memory / 1024, maxPrecision: 2, locale: auth()->user()->language) .' GiB'
-                : Number::format($this->server->memory / 1000, maxPrecision: 2, locale: auth()->user()->language) . ' GB';
-        } else {
-            $total = config('panel.use_binary_prefix')
-                ? Number::format($totalMemory / 1024 / 1024 / 1024, maxPrecision: 2, locale: auth()->user()->language) .' GiB'
-                : Number::format($totalMemory / 1000 / 1000 / 1000, maxPrecision: 2, locale: auth()->user()->language) . ' GB';
-        }
-
-        return 'Memory - ' . $used . ($this->server->memory > 0 ? ' Of ' . $total : '');
+        return 'Memory';
     }
 }

app/Filament/Server/Widgets/ServerOverview.php

@@ -2,10 +2,13 @@
 
 namespace App\Filament\Server\Widgets;
 
+use App\Enums\ContainerStatus;
+use App\Filament\Server\Components\SmallStatBlock;
+use App\Filament\Server\Components\StatBlock;
 use App\Models\Server;
 use Carbon\CarbonInterface;
 use Filament\Widgets\StatsOverviewWidget;
-use Filament\Widgets\StatsOverviewWidget\Stat;
+use Illuminate\Support\Number;
 use Illuminate\Support\Str;
 
 class ServerOverview extends StatsOverviewWidget
@@ -17,16 +20,19 @@ class ServerOverview extends StatsOverviewWidget
     protected function getStats(): array
     {
         return [
-            Stat::make('Name', $this->server->name)
+            StatBlock::make('Name', $this->server->name)
                 ->description($this->server->description)
                 ->extraAttributes([
                     'class' => 'overflow-x-auto',
                 ]),
-            Stat::make('Status', $this->status()),
-            Stat::make('Address', $this->server->allocation->address)
+            StatBlock::make('Status', $this->status()),
+            StatBlock::make('Address', $this->server->allocation->address)
                 ->extraAttributes([
                     'class' => 'overflow-x-auto',
                 ]),
+            SmallStatBlock::make('CPU', $this->cpuUsage()),
+            SmallStatBlock::make('Memory', $this->memoryUsage()),
+            SmallStatBlock::make('Disk', $this->diskUsage()),
         ];
     }
 
@@ -43,4 +49,49 @@ class ServerOverview extends StatsOverviewWidget
 
         return "$status ($uptime)";
     }
+
+    public function cpuUsage(): string
+    {
+        $status = ContainerStatus::tryFrom($this->server->retrieveStatus());
+
+        if ($status === ContainerStatus::Offline || $status === ContainerStatus::Missing) {
+            return 'Offline';
+        }
+
+        $data = collect(cache()->get("servers.{$this->server->id}.cpu_absolute"))->last(default: 0);
+        $cpu = Number::format($data, maxPrecision: 2, locale: auth()->user()->language) . ' %';
+
+        return $cpu . ($this->server->cpu > 0 ? ' / ' . Number::format($this->server->cpu, locale: auth()->user()->language) . ' %' : ' / ∞');
+    }
+
+    public function memoryUsage(): string
+    {
+        $status = ContainerStatus::tryFrom($this->server->retrieveStatus());
+
+        if ($status === ContainerStatus::Offline || $status === ContainerStatus::Missing) {
+            return 'Offline';
+        }
+
+        $latestMemoryUsed = collect(cache()->get("servers.{$this->server->id}.memory_bytes"))->last(default: 0);
+        $totalMemory = collect(cache()->get("servers.{$this->server->id}.memory_limit_bytes"))->last(default: 0);
+
+        $used = convert_bytes_to_readable($latestMemoryUsed);
+        $total = convert_bytes_to_readable($totalMemory);
+
+        return $used . ($this->server->memory > 0 ? ' / ' . $total : ' / ∞');
+    }
+
+    public function diskUsage(): string
+    {
+        $disk = collect(cache()->get("servers.{$this->server->id}.disk_bytes"))->last(default: 0);
+
+        if ($disk === 0) {
+            return 'Unavailable';
+        }
+
+        $used = convert_bytes_to_readable($disk);
+        $total = convert_bytes_to_readable($this->server->disk);
+
+        return $used . ($this->server->disk > 0 ? ' / ' . $total : ' / ∞');
+    }
 }

app/helpers.php

@@ -31,7 +31,7 @@ if (!function_exists('convert_bytes_to_readable')) {
         $fromBase = log($bytes) / log($conversionUnit);
         $base ??= floor($fromBase);
 
-        return round(pow($conversionUnit, $fromBase - $base), $decimals) . ' ' . $suffix[$base];
+        return Number::format(pow($conversionUnit, $fromBase - $base), $decimals, locale: auth()->user()->language) . ' ' . $suffix[$base];
     }
 }
 

public/css/filament/server/console.css

@@ -2,7 +2,10 @@
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     overflow: hidden;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.xterm-selection div {
+    background-color: transparent !important;
 }
 
 .xterm .xterm-rows > div {

resources/views/filament/components/server-console.blade.php

@@ -13,7 +13,7 @@
 
     @if ($this->authorizeSendCommand())
         <div class="flex items-center w-full border-top overflow-hidden dark:bg-gray-900"
-            style="border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
+             style="border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
             <x-filament::icon
                 icon="tabler-chevrons-right"
             />
@@ -56,10 +56,11 @@
         };
 
         let options = {
-            fontSize: 16,
+            fontSize: 14,
+            lineHeight: 1.2,
             disableStdin: true,
             cursorStyle: 'underline',
-            cursorInactiveStyle: 'none',
+            cursorInactiveStyle: 'underline',
             allowTransparency: true,
             rows: 30,
             theme: theme

resources/views/filament/components/server-data-block.blade.php

@@ -0,0 +1,10 @@
+<div class="fi-wi-stats-overview-stat relative rounded-lg bg-white p-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+    <div class="grid grid-flow-row">
+        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {{ $getLabel() }}
+        </span>
+        <div class="text-xl font-semibold text-gray-950 dark:text-white">
+            {{ $getValue() }}
+        </div>
+    </div>
+</div>

resources/views/filament/components/server-small-data-block.blade.php

@@ -0,0 +1,9 @@
+<div
+    class="grid grid-flow-row w-full p-3 rounded-lg shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+    <span>
+        <span class="text-md font-medium text-gray-500 dark:text-gray-400">
+            {{ $getLabel() }}
+        </span>
+        <span class="text-md font-semibold">{{ $getValue() }}</span>
+    </span>
+</div>