feat(navbar): add Traefik dashboard availability check and server IP handling; refactor dynamic configurations loading

app/Livewire/Server/Navbar.php

@@ -2,6 +2,7 @@
 
 namespace App\Livewire\Server;
 
+use App\Actions\Proxy\CheckConfiguration;
 use App\Actions\Proxy\CheckProxy;
 use App\Actions\Proxy\StartProxy;
 use App\Actions\Proxy\StopProxy;
@@ -17,6 +18,10 @@ class Navbar extends Component
 
     public ?string $currentRoute = null;
 
+    public bool $traefikDashboardAvailable = false;
+
+    public ?string $serverIp = null;
+
     public function getListeners()
     {
         $teamId = auth()->user()->currentTeam()->id;
@@ -30,6 +35,21 @@ class Navbar extends Component
     {
         $this->server = $server;
         $this->currentRoute = request()->route()->getName();
+        $this->serverIp = $this->server->id === 0 ? base_ip() : $this->server->ip;
+    }
+
+    public function loadProxyConfiguration()
+    {
+        try {
+            $proxy_settings = CheckConfiguration::run($this->server);
+            if (str($proxy_settings)->contains('--api.dashboard=true') && str($proxy_settings)->contains('--api.insecure=true')) {
+                $this->traefikDashboardAvailable = true;
+            } else {
+                $this->traefikDashboardAvailable = false;
+            }
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
     }
 
     public function restart()

app/Livewire/Server/Proxy.php

@@ -107,11 +107,6 @@ class Proxy extends Component
     {
         try {
             $this->proxy_settings = CheckConfiguration::run($this->server);
-            if (str($this->proxy_settings)->contains('--api.dashboard=true') && str($this->proxy_settings)->contains('--api.insecure=true')) {
-                $this->dispatch('traefikDashboardAvailable', true);
-            } else {
-                $this->dispatch('traefikDashboardAvailable', false);
-            }
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }

app/Livewire/Server/Proxy/DynamicConfigurations.php

@@ -28,6 +28,11 @@ class DynamicConfigurations extends Component
         'contents.*' => 'nullable|string',
     ];
 
+    public function initLoadDynamicConfigurations()
+    {
+        $this->loadDynamicConfigurations();
+    }
+
     public function loadDynamicConfigurations()
     {
         $proxy_path = $this->server->proxyPath();
@@ -43,6 +48,7 @@ class DynamicConfigurations extends Component
         }
         $this->contents = $contents;
         $this->dispatch('$refresh');
+        $this->dispatch('success', 'Dynamic configurations loaded.');
     }
 
     public function mount()

resources/views/livewire/server/navbar.blade.php

@@ -87,11 +87,11 @@
                         </x-slot:content>
                     </x-slide-over>
                     @if (data_get($server, 'proxy.status') === 'running')
-                        <div class="flex gap-2">
+                        <div class="flex gap-2" x-init="$wire.loadProxyConfiguration">
-                            @if (
+                            <div class="mt-1" wire:loading wire:target="loadProxyConfiguration">
-                                $currentRoute === 'server.proxy' &&
+                                <x-loading text="Checking Traefik dashboard" />
-                                    $traefikDashboardAvailable &&
+                            </div>
-                                    $server->proxyType() === ProxyTypes::TRAEFIK->value)
+                            @if ($traefikDashboardAvailable)
                                 <button>
                                     <a target="_blank" href="http://{{ $serverIp }}:8080">
                                         Traefik Dashboard

resources/views/livewire/server/proxy.blade.php

@@ -21,7 +21,7 @@
                         </svg>Before switching proxies, please read <a class="underline dark:text-white"
                             href="https://coolify.io/docs/knowledge-base/server/proxies#switch-between-proxies">this</a>.
                     </div>
-                    <h4>Advanced</h4>
+                    <h3>Advanced</h3>
                     <div class="pb-4 w-96">
                         <x-forms.checkbox
                             helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
@@ -36,9 +36,9 @@
                         @endif
                     </div>
                     @if ($server->proxyType() === ProxyTypes::TRAEFIK->value)
-                        <h4>Traefik</h4>
+                        <h3>Traefik</h3>
                     @elseif ($server->proxyType() === 'CADDY')
-                        <h4>Caddy</h4>
+                        <h3>Caddy</h3>
                     @endif
                     @if (
                         $server->proxy->last_applied_settings &&

resources/views/livewire/server/proxy/dynamic-configurations.blade.php

@@ -5,13 +5,14 @@
     <livewire:server.navbar :server="$server" :parameters="$parameters" />
     <div class="flex flex-col h-full gap-8 sm:flex-row">
         <x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
-        <div class="w-full">
         @if ($server->isFunctional())
+            <div class="w-full">
+
                 <div class="flex gap-2">
                     <div>
                         <div class="flex gap-2">
                             <h2>Dynamic Configurations</h2>
-                            <x-forms.button wire:click='loadDynamicConfigurations'>Reload</x-forms.button>
+                            <x-forms.button wire:click="loadDynamicConfigurations">Reload</x-forms.button>
                             <x-modal-input buttonTitle="+ Add" title="New Dynamic Configuration">
                                 <livewire:server.proxy.new-dynamic-configuration />
                             </x-modal-input>
@@ -19,10 +20,10 @@
                         <div class='pb-4'>You can add dynamic proxy configurations here.</div>
                     </div>
                 </div>
-                <div wire:loading wire:target="loadDynamicConfigurations">
+                <div wire:loading wire:target="initLoadDynamicConfigurations">
                     <x-loading text="Loading dynamic configurations..." />
                 </div>
-                <div x-init="$wire.loadDynamicConfigurations" class="flex flex-col gap-4">
+                <div x-init="$wire.initLoadDynamicConfigurations" class="flex flex-col gap-4">
                     @if ($contents?->isNotEmpty())
                         @foreach ($contents as $fileName => $value)
                             <div class="flex flex-col gap-2 py-2">
@@ -49,7 +50,7 @@
                         <div wire:loading.remove> No dynamic configurations found.</div>
                     @endif
                 </div>
+            </div>
         @endif
     </div>
-    </div>
 </div>