fix: async service loads

This commit is contained in:
Andras Bacsai 2024-03-27 14:50:56 +01:00
parent 3fca169096
commit a777db1234
2 changed files with 65 additions and 66 deletions

View File

@ -49,7 +49,6 @@ class Select extends Component
} }
public function render() public function render()
{ {
$this->loadServices();
return view('livewire.project.new.select'); return view('livewire.project.new.select');
} }
@ -74,6 +73,7 @@ class Select extends Component
public function loadServices(bool $force = false) public function loadServices(bool $force = false)
{ {
try { try {
$this->loadingServices = true;
if (count($this->allServices) > 0 && !$force) { if (count($this->allServices) > 0 && !$force) {
if (!$this->search) { if (!$this->search) {
$this->services = $this->allServices; $this->services = $this->allServices;

View File

@ -1,4 +1,4 @@
<div x-data x-init="$wire.loadServers"> <div x-data x-init="$wire.loadServers" x-init="$wire.loadServices">
<div class="flex flex-col gap-4 lg:flex-row "> <div class="flex flex-col gap-4 lg:flex-row ">
<h1>New Resource</h1> <h1>New Resource</h1>
<div class="w-full pb-4 lg:w-96 lg:pb-0"> <div class="w-full pb-4 lg:w-96 lg:pb-0">
@ -383,10 +383,10 @@
<div class="pb-4 text-xs">Trademarks Policy: The respective trademarks mentioned here are owned by the <div class="pb-4 text-xs">Trademarks Policy: The respective trademarks mentioned here are owned by the
respective respective
companies, and use of them does not imply any affiliation or endorsement.</div> companies, and use of them does not imply any affiliation or endorsement.</div>
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2"> @if ($loadingServices)
@if ($loadingServices) <x-loading text="Loading services..." />
<span class="loading loading-xs loading-spinner"></span> @else
@else <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-2">
@forelse ($services as $serviceName => $service) @forelse ($services as $serviceName => $service)
@if (data_get($service, 'minversion') && version_compare(config('version'), data_get($service, 'minversion'), '<')) @if (data_get($service, 'minversion') && version_compare(config('version'), data_get($service, 'minversion'), '<'))
<x-resource-view wire="setType('one-click-service-{{ $serviceName }}')"> <x-resource-view wire="setType('one-click-service-{{ $serviceName }}')">
@ -457,74 +457,73 @@
@empty @empty
<div class="w-96">No service found. Please try to reload the list!</div> <div class="w-96">No service found. Please try to reload the list!</div>
@endforelse @endforelse
@endif @endif
</div> </div>
@endif @endif
@if ($current_step === 'servers') @if ($current_step === 'servers')
<h2>Select a server</h2> <h2>Select a server</h2>
<div class="pb-5"></div> <div class="pb-5"></div>
<div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap"> <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
@forelse($servers as $server) @forelse($servers as $server)
<div class="w-full lg:w-64 box group" wire:click="setServer({{ $server }})"> <div class="w-full lg:w-64 box group" wire:click="setServer({{ $server }})">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold group-hover:dark:text-white"> <div class="font-bold group-hover:dark:text-white">
{{ $server->name }} {{ $server->name }}
</div>
<div class="text-xs group-hover:dark:text-white">
{{ $server->description }}</div>
</div> </div>
<div class="text-xs group-hover:dark:text-white">
{{ $server->description }}</div>
</div> </div>
@empty </div>
<div> @empty
<div>No validated & reachable servers found. <a class="underline dark:text-white" <div>
href="/servers"> <div>No validated & reachable servers found. <a class="underline dark:text-white" href="/servers">
Go to servers page Go to servers page
</a></div> </a></div>
</div> </div>
@endforelse @endforelse
</div> </div>
{{-- @if ($isDatabase) {{-- @if ($isDatabase)
<div class="text-center">Swarm clusters are excluded from this type of resource at the moment. It will <div class="text-center">Swarm clusters are excluded from this type of resource at the moment. It will
be activated soon. Stay tuned.</div> be activated soon. Stay tuned.</div>
@endif --}} @endif --}}
@endif @endif
@if ($current_step === 'destinations') @if ($current_step === 'destinations')
<h2>Select a destination</h2> <h2>Select a destination</h2>
<div>Destinations are used to segregate resources by network. If you are unsure, select the default <div>Destinations are used to segregate resources by network. If you are unsure, select the default
Standalone Docker (coolify).</div> Standalone Docker (coolify).</div>
<div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap"> <div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
@if ($server->isSwarm()) @if ($server->isSwarm())
@foreach ($swarmDockers as $swarmDocker) @foreach ($swarmDockers as $swarmDocker)
<div class="box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')"> <div class="box group" wire:click="setDestination('{{ $swarmDocker->uuid }}')">
<div class="flex flex-col mx-6"> <div class="flex flex-col mx-6">
<div class="font-bold group-hover:dark:text-white"> <div class="font-bold group-hover:dark:text-white">
Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span> Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
</div>
</div> </div>
</div> </div>
@endforeach </div>
@else @endforeach
@foreach ($standaloneDockers as $standaloneDocker) @else
<div class="box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')"> @foreach ($standaloneDockers as $standaloneDocker)
<div class="flex flex-col mx-6"> <div class="box group" wire:click="setDestination('{{ $standaloneDocker->uuid }}')">
<div class="font-bold group-hover:dark:text-white"> <div class="flex flex-col mx-6">
Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span> <div class="font-bold group-hover:dark:text-white">
</div> Standalone Docker <span class="text-xs">({{ $standaloneDocker->name }})</span>
<div class="text-xs group-hover:dark:text-white">
Network: {{ $standaloneDocker->network }}</div>
</div> </div>
<div class="text-xs group-hover:dark:text-white">
Network: {{ $standaloneDocker->network }}</div>
</div> </div>
@endforeach </div>
@endif @endforeach
</div> @endif
@endif </div>
@if ($current_step === 'existing-postgresql') @endif
<form wire:submit='addExistingPostgresql' class="flex items-end gap-4"> @if ($current_step === 'existing-postgresql')
<x-forms.input placeholder="postgres://username:password@database:5432" label="Database URL" <form wire:submit='addExistingPostgresql' class="flex items-end gap-4">
id="existingPostgresqlUrl" /> <x-forms.input placeholder="postgres://username:password@database:5432" label="Database URL"
<x-forms.button type="submit">Add Database</x-forms.button> id="existingPostgresqlUrl" />
</form> <x-forms.button type="submit">Add Database</x-forms.button>
@endif </form>
</div> @endif
</div>
</div> </div>