fix: destinations livewire refactor

removed unnecessary livewire components, renamed them ,etc etc

app/Livewire/Destination/Form.php

@@ -1,46 +0,0 @@
-<?php
-
-namespace App\Livewire\Destination;
-
-use Livewire\Component;
-
-class Form extends Component
-{
-    public mixed $destination;
-
-    protected $rules = [
-        'destination.name' => 'required',
-        'destination.network' => 'required',
-        'destination.server.ip' => 'required',
-    ];
-
-    protected $validationAttributes = [
-        'destination.name' => 'name',
-        'destination.network' => 'network',
-        'destination.server.ip' => 'IP Address/Domain',
-    ];
-
-    public function submit()
-    {
-        $this->validate();
-        $this->destination->save();
-    }
-
-    public function delete()
-    {
-        try {
-            if ($this->destination->getMorphClass() === \App\Models\StandaloneDocker::class) {
-                if ($this->destination->attachedTo()) {
-                    return $this->dispatch('error', 'You must delete all resources before deleting this destination.');
-                }
-                instant_remote_process(["docker network disconnect {$this->destination->network} coolify-proxy"], $this->destination->server, throwError: false);
-                instant_remote_process(['docker network rm -f '.$this->destination->network], $this->destination->server);
-            }
-            $this->destination->delete();
-
-            return redirect()->route('destination.all');
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
-}

app/Livewire/Destination/Index.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Livewire\Destination;
+
+use App\Models\Server;
+use Livewire\Attributes\Locked;
+use Livewire\Component;
+
+class Index extends Component
+{
+    #[Locked]
+    public $servers;
+
+    public function mount()
+    {
+        $this->servers = Server::isUsable()->get();
+    }
+
+    public function render()
+    {
+        return view('livewire.destination.index');
+    }
+}

app/Livewire/Destination/Show.php

@@ -3,73 +3,91 @@
 namespace App\Livewire\Destination;
 
 use App\Models\Server;
-use App\Models\StandaloneDocker;
+use Livewire\Attributes\Locked;
-use App\Models\SwarmDocker;
+use Livewire\Attributes\Rule;
-use Illuminate\Support\Collection;
 use Livewire\Component;
 
 class Show extends Component
 {
-    public Server $server;
+    #[Locked]
+    public $destination;
 
-    public Collection|array $networks = [];
+    #[Rule(['string', 'required'])]
+    public string $name;
 
-    private function createNetworkAndAttachToProxy()
+    #[Rule(['string', 'required'])]
+    public string $network;
+
+    #[Rule(['string', 'required'])]
+    public string $serverIp;
+
+    public function mount(string $destination_uuid)
     {
-        $connectProxyToDockerNetworks = connectProxyToNetworks($this->server);
+        try {
-        instant_remote_process($connectProxyToDockerNetworks, $this->server, false);
+            $destination = Server::isUsable()->whereHas('standaloneDockers', function ($query) use ($destination_uuid) {
-    }
+                $query->where('uuid', $destination_uuid);
+            })->first()->standaloneDockers()->where('uuid', $destination_uuid)->first();
 
-    public function add($name)
+            if (! $destination) {
-    {
+                $destination = Server::isUsable()->whereHas('swarmDockers', function ($query) use ($destination_uuid) {
-        if ($this->server->isSwarm()) {
+                    $query->where('uuid', $destination_uuid);
-            $found = $this->server->swarmDockers()->where('network', $name)->first();
+                })->first()->swarmDockers()->where('uuid', $destination_uuid)->first();
-            if ($found) {
-                $this->dispatch('error', 'Network already added to this server.');
-
-                return;
-            } else {
-                SwarmDocker::create([
-                    'name' => $this->server->name.'-'.$name,
-                    'network' => $this->name,
-                    'server_id' => $this->server->id,
-                ]);
             }
-        } else {
+            if (! $destination) {
-            $found = $this->server->standaloneDockers()->where('network', $name)->first();
+                throw new \Exception('Destination not found');
-            if ($found) {
-                $this->dispatch('error', 'Network already added to this server.');
-
-                return;
-            } else {
-                StandaloneDocker::create([
-                    'name' => $this->server->name.'-'.$name,
-                    'network' => $name,
-                    'server_id' => $this->server->id,
-                ]);
             }
-            $this->createNetworkAndAttachToProxy();
+            $this->destination = $destination;
+            $this->syncData();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
         }
     }
 
-    public function scan()
+    public function syncData(bool $toModel = false)
     {
-        if ($this->server->isSwarm()) {
+        if ($toModel) {
-            $alreadyAddedNetworks = $this->server->swarmDockers;
+            $this->validate();
+            $this->destination->name = $this->name;
+            $this->destination->network = $this->network;
+            $this->destination->server->ip = $this->serverIp;
+            $this->destination->save();
         } else {
-            $alreadyAddedNetworks = $this->server->standaloneDockers;
+            $this->name = $this->destination->name;
+            $this->network = $this->destination->network;
+            $this->serverIp = $this->destination->server->ip;
         }
-        $networks = instant_remote_process(['docker network ls --format "{{json .}}"'], $this->server, false);
+    }
-        $this->networks = format_docker_command_output_to_json($networks)->filter(function ($network) {
-            return $network['Name'] !== 'bridge' && $network['Name'] !== 'host' && $network['Name'] !== 'none';
-        })->filter(function ($network) use ($alreadyAddedNetworks) {
-            return ! $alreadyAddedNetworks->contains('network', $network['Name']);
-        });
-        if ($this->networks->count() === 0) {
-            $this->dispatch('success', 'No new destinations found on this server.');
 
-            return;
+    public function submit()
+    {
+        try {
+            $this->syncData(true);
+            $this->dispatch('success', 'Destination saved.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
         }
-        $this->dispatch('success', 'Scan done.');
+    }
+
+    public function delete()
+    {
+        try {
+            if ($this->destination->getMorphClass() === \App\Models\StandaloneDocker::class) {
+                if ($this->destination->attachedTo()) {
+                    return $this->dispatch('error', 'You must delete all resources before deleting this destination.');
+                }
+                instant_remote_process(["docker network disconnect {$this->destination->network} coolify-proxy"], $this->destination->server, throwError: false);
+                instant_remote_process(['docker network rm -f '.$this->destination->network], $this->destination->server);
+            }
+            $this->destination->delete();
+
+            return redirect()->route('destination.index');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.destination.show');
     }
 }

app/Livewire/Server/Destinations.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Livewire\Server\Destination;
+namespace App\Livewire\Server;
 
 use App\Models\Server;
 use App\Models\StandaloneDocker;
@@ -8,7 +8,7 @@ use App\Models\SwarmDocker;
 use Illuminate\Support\Collection;
 use Livewire\Component;
 
-class Show extends Component
+class Destinations extends Component
 {
     public Server $server;
 
@@ -86,6 +86,6 @@ class Show extends Component
 
     public function render()
     {
-        return view('livewire.server.destination.show');
+        return view('livewire.server.destinations');
     }
 }

resources/views/components/navbar.blade.php

@@ -148,7 +148,7 @@
                     <li>
                         <a title="Destinations"
                             class="{{ request()->is('destination*') ? 'menu-item-active menu-item' : 'menu-item' }}"
-                            href="{{ route('destination.all') }}">
+                            href="{{ route('destination.index') }}" wire:navigate>
 
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
                                 <path fill="none" stroke="currentColor" stroke-linecap="round"

resources/views/destination/all.blade.php

@@ -1,44 +0,0 @@
-<x-layout>
-    <x-slot:title>
-        Destinations | Coolify
-    </x-slot>
-    <div class="flex items-start gap-2">
-        <h1>Destinations</h1>
-        @if ($servers->count() > 0)
-            <x-modal-input buttonTitle="+ Add" title="New Destination">
-                <livewire:destination.new.docker :server_id="$server_id" />
-            </x-modal-input>
-        @endif
-    </div>
-    <div class="subtitle">Network endpoints to deploy your resources.</div>
-    <div class="grid gap-2 lg:grid-cols-1">
-        @forelse ($destinations as $destination)
-            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                <a class="box group"
-                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                    <div class="flex flex-col mx-6">
-                        <div class="box-title">{{ $destination->name }}</div>
-                        <div class="box-description">server: {{ $destination->server->name }}</div>
-                    </div>
-                </a>
-            @endif
-            @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                <a class="box group"
-                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                    <div class="flex flex-col mx-6">
-                        <div class="box-title">{{ $destination->name }}</div>
-                        <div class="box-description">server: {{ $destination->server->name }}</div>
-                    </div>
-                </a>
-            @endif
-        @empty
-            <div>
-                @if ($servers->count() === 0)
-                    <div>No servers found. Please add one first.</div>
-                @else
-                    <div>No destinations found.</div>
-                @endif
-            </div>
-        @endforelse
-    </div>
-</x-layout>

resources/views/destination/show.blade.php

@@ -1,3 +0,0 @@
-<x-layout>
-    <livewire:destination.form :destination="$destination" />
-</x-layout>

resources/views/livewire/destination/form.blade.php

@@ -1,29 +0,0 @@
-<div>
-    <form class="flex flex-col">
-        <div class="flex items-center gap-2">
-            <h1>Destination</h1>
-            <x-forms.button wire:click.prevent='submit' type="submit">
-                Save
-            </x-forms.button>
-            @if ($destination->network !== 'coolify')
-                <x-modal-confirmation title="Confirm Destination Deletion?" buttonTitle="Delete Destination" isErrorButton
-                    submitAction="delete" :actions="['This will delete the selected destination/network.']" confirmationText="{{ $destination->name }}"
-                    confirmationLabel="Please confirm the execution of the actions by entering the Destination Name below"
-                    shortConfirmationLabel="Destination Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
-            @endif
-        </div>
-
-        @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-            <div class="subtitle ">A Docker network in a non-swarm environment.</div>
-        @else
-            <div class="subtitle ">Your swarm docker network. WIP</div>
-        @endif
-        <div class="flex gap-2">
-            <x-forms.input id="destination.name" label="Name" />
-            <x-forms.input id="destination.server.ip" label="Server IP" readonly />
-            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                <x-forms.input id="destination.network" label="Docker Network" readonly />
-            @endif
-        </div>
-    </form>
-</div>

resources/views/livewire/destination/index.blade.php

@@ -0,0 +1,44 @@
+<div>
+    <x-slot:title>
+        Destinations | Coolify
+    </x-slot>
+    <div class="flex items-start gap-2">
+        <h1>Destinations</h1>
+        @if ($servers->count() > 0)
+            <x-modal-input buttonTitle="+ Add" title="New Destination">
+                <livewire:destination.new.docker />
+            </x-modal-input>
+        @endif
+    </div>
+    <div class="subtitle">Network endpoints to deploy your resources.</div>
+    <div class="grid gap-2 lg:grid-cols-1">
+        @forelse ($servers as $server)
+            @forelse ($server->destinations() as $destination)
+                @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
+                    <a class="box group"
+                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}"
+                        wire:navigate>
+                        <div class="flex flex-col mx-6">
+                            <div class="box-title">{{ $destination->name }}</div>
+                            <div class="box-description">Server: {{ $destination->server->name }}</div>
+                        </div>
+                    </a>
+                @endif
+                @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
+                    <a class="box group"
+                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}"
+                        wire:navigate>
+                        <div class="flex flex-col mx-6">
+                            <div class="box-title">{{ $destination->name }}</div>
+                            <div class="box-description">server: {{ $destination->server->name }}</div>
+                        </div>
+                    </a>
+                @endif
+            @empty
+                <div>No destinations found.</div>
+            @endforelse
+        @empty
+            <div>No servers found.</div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/destination/show.blade.php

@@ -1,42 +1,29 @@
 <div>
-    @if ($server->isFunctional())
+    <form class="flex flex-col">
-        <div class="flex items-end gap-2">
+        <div class="flex items-center gap-2">
-            <h2>Destinations</h2>
+            <h1>Destination</h1>
-            <x-modal-input buttonTitle="+ Add" title="New Destination">
+            <x-forms.button wire:click.prevent='submit' type="submit">
-                <livewire:destination.new.docker :server_id="$server->id" />
+                Save
-            </x-modal-input>
+            </x-forms.button>
-            <x-forms.button wire:click='scan'>Scan for Destinations</x-forms.button>
+            @if ($network !== 'coolify')
-        </div>
+                <x-modal-confirmation title="Confirm Destination Deletion?" buttonTitle="Delete Destination" isErrorButton
-        <div>Destinations are used to segregate resources by network.</div>
+                    submitAction="delete" :actions="['This will delete the selected destination/network.']" confirmationText="{{ $destination->name }}"
-        <div class="flex gap-2 pt-6">
+                    confirmationLabel="Please confirm the execution of the actions by entering the Destination Name below"
-            Available for using:
+                    shortConfirmationLabel="Destination Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
-            @forelse ($server->standaloneDockers as $docker)
-                <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
-                    <button class="dark:text-white btn-link">{{ data_get($docker, 'network') }} </button>
-                </a>
-            @empty
-            @endforelse
-            @forelse ($server->swarmDockers as $docker)
-                <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
-                    <button class="dark:text-white btn-link">{{ data_get($docker, 'network') }} </button>
-                </a>
-            @empty
-            @endforelse
-        </div>
-        <div class="pt-2">
-            @if (count($networks) > 0)
-                <h3 class="pb-4">Found Destinations</h3>
             @endif
-            <div class="flex flex-wrap gap-2 ">
-                @foreach ($networks as $network)
-                    <div class="min-w-fit">
-                        <x-forms.button wire:click="add('{{ data_get($network, 'Name') }}')">Add
-                            {{ data_get($network, 'Name') }}</x-forms.button>
-                    </div>
-                @endforeach
-            </div>
         </div>
-    @else
+
-        <div>Server is not validated. Validate first.</div>
+        @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-    @endif
+            <div class="subtitle ">A Docker network in a non-swarm environment.</div>
+        @else
+            <div class="subtitle ">Your swarm docker network. WIP</div>
+        @endif
+        <div class="flex gap-2">
+            <x-forms.input id="name" label="Name" />
+            <x-forms.input id="serverIp" label="Server IP" readonly />
+            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
+                <x-forms.input id="network" label="Docker Network" readonly />
+            @endif
+        </div>
+    </form>
 </div>

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

@@ -0,0 +1,49 @@
+<div>
+    <x-slot:title>
+        {{ data_get_str($server, 'name')->limit(10) }} > Destinations | Coolify
+    </x-slot>
+    <x-server.navbar :server="$server" />
+    <div class="flex flex-col h-full gap-8 sm:flex-row">
+        <x-server.sidebar :server="$server" activeMenu="destinations" />
+        <div class="w-full">
+            @if ($server->isFunctional())
+                <div class="flex items-end gap-2">
+                    <h2>Destinations</h2>
+                    <x-modal-input buttonTitle="+ Add" title="New Destination">
+                        <livewire:destination.new.docker :server_id="$server->id" />
+                    </x-modal-input>
+                    <x-forms.button isHighlighted wire:click='scan'>Scan for Destinations</x-forms.button>
+                </div>
+                <div>Destinations are used to segregate resources by network.</div>
+                <h4 class="pt-4 pb-2">Available Destinations</h4>
+                <div class="flex gap-2">
+                    @foreach ($server->standaloneDockers as $docker)
+                        <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
+                            <x-forms.button>{{ data_get($docker, 'network') }} </x-forms.button>
+                        </a>
+                    @endforeach
+                    @foreach ($server->swarmDockers as $docker)
+                        <a href="{{ route('destination.show', ['destination_uuid' => data_get($docker, 'uuid')]) }}">
+                            <x-forms.button>{{ data_get($docker, 'network') }} </x-forms.button>
+                        </a>
+                    @endforeach
+                </div>
+                @if ($networks->count() > 0)
+                    <div class="pt-2">
+                        <h3 class="pb-4">Found Destinations</h3>
+                        <div class="flex flex-wrap gap-2 ">
+                            @foreach ($networks as $network)
+                                <div class="min-w-fit">
+                                    <x-forms.button wire:click="add('{{ data_get($network, 'Name') }}')">Add
+                                        {{ data_get($network, 'Name') }}</x-forms.button>
+                                </div>
+                            @endforeach
+                        </div>
+                    </div>
+                @endif
+            @else
+                <div>Server is not validated. Validate first.</div>
+            @endif
+        </div>
+    </div>
+</div>

routes/web.php

@@ -7,6 +7,8 @@ use App\Http\Controllers\UploadController;
 use App\Livewire\Admin\Index as AdminIndex;
 use App\Livewire\Boarding\Index as BoardingIndex;
 use App\Livewire\Dashboard;
+use App\Livewire\Destination\Index as DestinationIndex;
+use App\Livewire\Destination\Show as DestinationShow;
 use App\Livewire\Dev\Compose as Compose;
 use App\Livewire\ForcePasswordReset;
 use App\Livewire\Notifications\Discord as NotificationDiscord;
@@ -38,7 +40,7 @@ use App\Livewire\Server\Advanced as ServerAdvanced;
 use App\Livewire\Server\Charts as ServerCharts;
 use App\Livewire\Server\CloudflareTunnels;
 use App\Livewire\Server\Delete as DeleteServer;
-use App\Livewire\Server\Destination\Show as DestinationShow;
+use App\Livewire\Server\Destinations as ServerDestinations;
 use App\Livewire\Server\Index as ServerIndex;
 use App\Livewire\Server\LogDrains;
 use App\Livewire\Server\PrivateKey\Show as PrivateKeyShow;
@@ -72,8 +74,6 @@ use App\Livewire\Terminal\Index as TerminalIndex;
 use App\Models\GitlabApp;
 use App\Models\ScheduledDatabaseBackupExecution;
 use App\Models\Server;
-use App\Models\StandaloneDocker;
-use App\Models\SwarmDocker;
 use App\Providers\RouteServiceProvider;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -212,7 +212,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
         Route::get('/private-key', PrivateKeyShow::class)->name('server.private-key');
         Route::get('/resources', ResourcesShow::class)->name('server.resources');
         Route::get('/cloudflare-tunnels', CloudflareTunnels::class)->name('server.cloudflare-tunnels');
-        Route::get('/destinations', DestinationShow::class)->name('server.destinations');
+        Route::get('/destinations', ServerDestinations::class)->name('server.destinations');
         Route::get('/log-drains', LogDrains::class)->name('server.log-drains');
         Route::get('/metrics', ServerCharts::class)->name('server.charts');
         Route::get('/danger', DeleteServer::class)->name('server.delete');
@@ -312,52 +312,8 @@ Route::middleware(['auth'])->group(function () {
             return response()->json(['message' => $e->getMessage()], 500);
         }
     })->name('download.backup');
-    Route::get('/destinations', function () {
+    Route::get('/destinations', DestinationIndex::class)->name('destination.index');
-        $servers = Server::isUsable()->get();
+    Route::get('/destination/{destination_uuid}', DestinationShow::class)->name('destination.show');
-        $destinations = collect([]);
-        foreach ($servers as $server) {
-            $destinations = $destinations->merge($server->destinations());
-        }
-        $pre_selected_server_uuid = data_get(request()->query(), 'server');
-        if ($pre_selected_server_uuid) {
-            $server = $servers->firstWhere('uuid', $pre_selected_server_uuid);
-            if ($server) {
-                $server_id = $server->id;
-            }
-        }
-
-        return view('destination.all', [
-            'destinations' => $destinations,
-            'servers' => $servers,
-            'server_id' => $server_id ?? null,
-        ]);
-    })->name('destination.all');
-    // Route::get('/destination/new', function () {
-    //     $servers = Server::isUsable()->get();
-    //     $pre_selected_server_uuid = data_get(request()->query(), 'server');
-    //     if ($pre_selected_server_uuid) {
-    //         $server = $servers->firstWhere('uuid', $pre_selected_server_uuid);
-    //         if ($server) {
-    //             $server_id = $server->id;
-    //         }
-    //     }
-    //     return view('destination.new', [
-    //         "servers" => $servers,
-    //         "server_id" => $server_id ?? null,
-    //     ]);
-    // })->name('destination.new');
-    Route::get('/destination/{destination_uuid}', function () {
-        $standalone_dockers = StandaloneDocker::where('uuid', request()->destination_uuid)->first();
-        $swarm_dockers = SwarmDocker::where('uuid', request()->destination_uuid)->first();
-        if (! $standalone_dockers && ! $swarm_dockers) {
-            abort(404);
-        }
-        $destination = $standalone_dockers ? $standalone_dockers : $swarm_dockers;
-
-        return view('destination.show', [
-            'destination' => $destination->load(['server']),
-        ]);
-    })->name('destination.show');
 });
 
 Route::any('/{any}', function () {