Lazy load server entries (Grid only) (#1413)

app/Filament/Components/Tables/Columns/ServerEntryColumn.php

@@ -6,5 +6,5 @@ use Filament\Tables\Columns\Column;
 
 class ServerEntryColumn extends Column
 {
-    protected string $view = 'tables.columns.server-entry-column';
+    protected string $view = 'livewire.columns.server-entry-column';
 }

app/Livewire/ServerEntry.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Server;
+use Illuminate\View\View;
+use Livewire\Component;
+
+class ServerEntry extends Component
+{
+    public Server $server;
+
+    public function render(): View
+    {
+        return view('livewire.server-entry');
+    }
+
+    public function placeholder(): string
+    {
+        return <<<'HTML'
+        <div class="relative">
+            <div
+                class="absolute left-0 top-1 bottom-0 w-1 rounded-lg"
+                style="background-color: #D97706;">
+            </div>
+
+            <div class="flex-1 dark:bg-gray-800 dark:text-white rounded-lg overflow-hidden p-3">
+                <div class="flex items-center mb-5 gap-2">
+                    <x-filament::loading-indicator class="h-5 w-5" />
+                    <h2 class="text-xl font-bold">
+                        {{ $server->name }}
+                    </h2>
+                </div>
+
+                <div class="flex justify-between text-center">
+                    <div>
+                        <p class="text-sm dark:text-gray-400">CPU</p>
+                        <p class="text-md font-semibold">{{ Number::format(0, precision: 2, locale: auth()->user()->language ?? 'en') . '%' }}</p>
+                        <hr class="p-0.5">
+                        <p class="text-xs dark:text-gray-400">{{ $server->formatResource('cpu', type: \App\Enums\ServerResourceType::Percentage, limit: true) }}</p>
+                    </div>
+                    <div>
+                        <p class="text-sm dark:text-gray-400">Memory</p>
+                        <p class="text-md font-semibold">{{ convert_bytes_to_readable(0, decimals: 2) }}</p>
+                        <hr class="p-0.5">
+                        <p class="text-xs dark:text-gray-400">{{ $server->formatResource('memory', limit: true) }}</p>
+                    </div>
+                    <div>
+                        <p class="text-sm dark:text-gray-400">Disk</p>
+                        <p class="text-md font-semibold">{{ convert_bytes_to_readable(0, decimals: 2) }}</p>
+                        <hr class="p-0.5">
+                        <p class="text-xs dark:text-gray-400">{{ $server->formatResource('disk', limit: true) }}</p>
+                    </div>
+                    <div class="hidden sm:block">
+                        <p class="text-sm dark:text-gray-400">Network</p>
+                        <hr class="p-0.5">
+                        <p class="text-md font-semibold">{{ $server->allocation->address }} </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        HTML;
+    }
+}

app/Repositories/Daemon/DaemonServerRepository.php

@@ -19,7 +19,7 @@ class DaemonServerRepository extends DaemonRepository
     public function getDetails(): array
     {
         try {
-            return $this->getHttpClient()->get("/api/servers/{$this->server->uuid}")->throw()->json();
+            return $this->getHttpClient()->connectTimeout(1)->timeout(1)->get("/api/servers/{$this->server->uuid}")->throw()->json();
         } catch (RequestException $exception) {
             $cfId = $exception->response->header('Cf-Ray');
             $cfCache = $exception->response->header('Cf-Cache-Status');

resources/views/livewire/columns/server-entry-column.blade.php

@@ -0,0 +1,8 @@
+@php
+    /** @var \App\Models\Server $server */
+    $server = $getRecord();
+@endphp
+
+<div class="w-full">
+    @livewire('server-entry', ['server' => $server, 'lazy' => true], key($server->id))
+</div>

resources/views/livewire/server-entry.blade.php

@@ -0,0 +1,47 @@
+<div class="relative">
+    <div
+        class="absolute left-0 top-1 bottom-0 w-1 rounded-lg"
+        style="background-color: {{ $server->condition->getColor(true) }};">
+    </div>
+
+    <div class="flex-1 dark:bg-gray-800 dark:text-white rounded-lg overflow-hidden p-3">
+        <div class="flex items-center mb-5 gap-2">
+            <x-filament::icon-button
+                :icon="$server->condition->getIcon()"
+                :color="$server->condition->getColor()"
+                :tooltip="$server->condition->getLabel()"
+                size="xl"
+            />
+            <h2 class="text-xl font-bold">
+                {{ $server->name }}
+                <span class="dark:text-gray-400">({{ $server->formatResource('uptime', type: \App\Enums\ServerResourceType::Time) }})</span>
+            </h2>
+        </div>
+
+        <div class="flex justify-between text-center">
+            <div>
+                <p class="text-sm dark:text-gray-400">CPU</p>
+                <p class="text-md font-semibold">{{ $server->formatResource('cpu_absolute', type: \App\Enums\ServerResourceType::Percentage) }}</p>
+                <hr class="p-0.5">
+                <p class="text-xs dark:text-gray-400">{{ $server->formatResource('cpu', type: \App\Enums\ServerResourceType::Percentage, limit: true) }}</p>
+            </div>
+            <div>
+                <p class="text-sm dark:text-gray-400">Memory</p>
+                <p class="text-md font-semibold">{{ $server->formatResource('memory_bytes') }}</p>
+                <hr class="p-0.5">
+                <p class="text-xs dark:text-gray-400">{{ $server->formatResource('memory', limit: true) }}</p>
+            </div>
+            <div>
+                <p class="text-sm dark:text-gray-400">Disk</p>
+                <p class="text-md font-semibold">{{ $server->formatResource('disk_bytes') }}</p>
+                <hr class="p-0.5">
+                <p class="text-xs dark:text-gray-400">{{ $server->formatResource('disk', limit: true) }}</p>
+            </div>
+            <div class="hidden sm:block">
+                <p class="text-sm dark:text-gray-400">Network</p>
+                <hr class="p-0.5">
+                <p class="text-md font-semibold">{{ $server->allocation->address }} </p>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/tables/columns/server-entry-column.blade.php

@@ -1,63 +0,0 @@
-@php
-    use App\Enums\ServerResourceType;
-
-    /** @var \App\Models\Server $server */
-    $server = $getRecord();
-@endphp
-
-<head>
-    <style>
-        hr {
-            border-color: #9ca3af;
-        }
-    </style>
-</head>
-<div class="w-full">
-    <div class="relative">
-        <div
-            class="absolute left-0 top-1 bottom-0 w-1 rounded-lg"
-            style="background-color: {{ $server->condition->getColor(true) }};">
-        </div>
-
-        <div class="flex-1 bg-gray-800 dark:text-white rounded-lg overflow-hidden p-3">
-            <div class="flex items-center mb-5 gap-2">
-                <x-filament::icon-button
-                    :icon="$server->condition->getIcon()"
-                    :color="$server->condition->getColor()"
-                    :tooltip="$server->condition->getLabel()"
-                    size="xl"
-                />
-                <h2 class="text-xl font-bold">
-                    {{ $server->name }}
-                    <span class="dark:text-gray-400">({{ $server->formatResource('uptime', type: ServerResourceType::Time) }})</span>
-                </h2>
-            </div>
-
-            <div class="flex justify-between text-center">
-                <div>
-                    <p class="text-sm dark:text-gray-400">CPU</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('cpu_absolute', type: ServerResourceType::Percentage) }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('cpu', type: ServerResourceType::Percentage, limit: true) }}</p>
-                </div>
-                <div>
-                    <p class="text-sm dark:text-gray-400">Memory</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('memory_bytes') }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('memory', limit: true) }}</p>
-                </div>
-                <div>
-                    <p class="text-sm dark:text-gray-400">Disk</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('disk_bytes') }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('disk', limit: true) }}</p>
-                </div>
-                <div class="hidden sm:block">
-                    <p class="text-sm dark:text-gray-400">Network</p>
-                    <hr class="p-0.5">
-                    <p class="text-md font-semibold">{{ $server->allocation->address }} </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>