fix: terminal view loading in async

This commit is contained in:
Andras Bacsai 2024-11-12 09:52:22 +01:00
parent d7cde676d5
commit b58cc05b8a
2 changed files with 38 additions and 21 deletions

View file

@ -14,13 +14,25 @@ class Index extends Component
public $containers = []; public $containers = [];
public bool $isLoadingContainers = true;
public function mount() public function mount()
{ {
if (! auth()->user()->isAdmin()) { if (! auth()->user()->isAdmin()) {
abort(403); abort(403);
} }
$this->servers = Server::isReachable()->get(); $this->servers = Server::isReachable()->get();
$this->containers = $this->getAllActiveContainers(); }
public function loadContainers()
{
try {
$this->containers = $this->getAllActiveContainers();
} catch (\Exception $e) {
return handleError($e, $this);
} finally {
$this->isLoadingContainers = false;
}
} }
private function getAllActiveContainers() private function getAllActiveContainers()

View file

@ -8,27 +8,32 @@
<x-helper <x-helper
helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper> helper="If you're having trouble connecting to your server, make sure that the port is open.<br><br><a class='underline' href='https://coolify.io/docs/knowledge-base/server/firewall/#terminal' target='_blank'>Documentation</a>"></x-helper>
</div> </div>
<div> <div x-init="$wire.loadContainers()">
<form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row" @if ($isLoadingContainers)
wire:submit="$dispatchSelf('connectToContainer')"> <div class="pt-1">
<x-forms.select id="server" required wire:model.live="selected_uuid"> <x-loading text="Loading servers and containers..." />
@foreach ($servers as $server) </div>
@if ($loop->first) @else
<option disabled value="default">Select a server or container</option> <form class="flex flex-col gap-2 justify-center xl:items-end xl:flex-row"
@endif wire:submit="$dispatchSelf('connectToContainer')">
<option value="{{ $server->uuid }}">{{ $server->name }}</option> <x-forms.select id="server" required wire:model.live="selected_uuid">
@foreach ($containers as $container) @foreach ($servers as $server)
@if ($container['server_uuid'] == $server->uuid) @if ($loop->first)
<option value="{{ $container['uuid'] }}"> <option disabled value="default">Select a server or container</option>
{{ $server->name }} -> {{ $container['name'] }}
</option>
@endif @endif
<option value="{{ $server->uuid }}">{{ $server->name }}</option>
@foreach ($containers as $container)
@if ($container['server_uuid'] == $server->uuid)
<option value="{{ $container['uuid'] }}">
{{ $server->name }} -> {{ $container['name'] }}
</option>
@endif
@endforeach
@endforeach @endforeach
@endforeach </x-forms.select>
</x-forms.select> <x-forms.button type="submit">Connect</x-forms.button>
<x-forms.button type="submit">Connect</x-forms.button> </form>
</form> <livewire:project.shared.terminal />
<livewire:project.shared.terminal /> @endif
</div> </div>
</div> </div>