feat: edit domains easier for compose

This commit is contained in:
Andras Bacsai 2024-04-11 15:42:37 +02:00
parent 8553fffffe
commit a8db40e99a
4 changed files with 86 additions and 8 deletions

View File

@ -18,7 +18,8 @@ public function getListeners()
$userId = auth()->user()->id;
return [
"echo-private:user.{$userId},ServiceStatusChanged" => 'check_status',
"check_status"
"check_status",
"refresh" => '$refresh',
];
}
public function render()

View File

@ -0,0 +1,52 @@
<?php
namespace App\Livewire\Project\Service;
use App\Models\ServiceApplication;
use Livewire\Component;
class EditDomain extends Component
{
public $applicationId;
public ServiceApplication $application;
protected $rules = [
'application.fqdn' => 'nullable',
'application.required_fqdn' => 'required|boolean',
];
public function mount() {
$this->application = ServiceApplication::find($this->applicationId);
}
public function updatedApplicationFqdn()
{
$this->application->fqdn = str($this->application->fqdn)->replaceEnd(',', '')->trim();
$this->application->fqdn = str($this->application->fqdn)->replaceStart(',', '')->trim();
$this->application->fqdn = str($this->application->fqdn)->trim()->explode(',')->map(function ($domain) {
return str($domain)->trim()->lower();
});
$this->application->fqdn = $this->application->fqdn->unique()->implode(',');
$this->application->save();
}
public function submit()
{
try {
check_domain_usage(resource: $this->application);
$this->validate();
$this->application->save();
updateCompose($this->application);
if (str($this->application->fqdn)->contains(',')) {
$this->dispatch('warning', 'Some services do not support multiple domains, which can lead to problems and is NOT RECOMMENDED.<br><br>Only use multiple domains if you know what you are doing.');
} else {
$this->dispatch('success', 'Service saved.');
}
} catch (\Throwable $e) {
return handleError($e, $this);
} finally {
$this->dispatch('generateDockerCompose');
$this->dispatch('refresh');
}
}
public function render()
{
return view('livewire.project.service.edit-domain');
}
}

View File

@ -45,13 +45,13 @@
<div class="grid grid-cols-1 gap-2 pt-4 xl:grid-cols-1">
@foreach ($applications as $application)
<div @class([
'border-l border-dashed border-red-500' => Str::of(
'border-l border-dashed border-red-500 ' => Str::of(
$application->status)->contains(['exited']),
'border-l border-dashed border-success' => Str::of(
$application->status)->contains(['running']),
'border-l border-dashed border-warning' => Str::of(
$application->status)->contains(['starting']),
'flex gap-2 box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
])>
<div class="flex flex-row w-full">
<div class="flex flex-col flex-1">
@ -70,9 +70,29 @@
<span class="text-xs">{{ Str::limit($application->description, 60) }}</span>
@endif
@if ($application->fqdn)
<span class="text-xs">{{ Str::limit($application->fqdn, 60) }}</span>
<span class="flex gap-1 text-xs">{{ Str::limit($application->fqdn, 60) }}
<x-modal-input title="Edit Domains">
<x-slot:content>
<span class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 dark:text-warning text-coollabs"
viewBox="0 0 24 24">
<g fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path
d="m12 15l8.385-8.415a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zm4-10l3 3" />
<path d="M9 7.07A7 7 0 0 0 10 21a7 7 0 0 0 6.929-6" />
</g>
</svg>
</span>
</x-slot:content>
<livewire:project.service.edit-domain
applicationId="{{ $application->id }}" />
</x-modal-input>
</span>
@endif
<div class="text-xs">{{ $application->status }}</div>
{{-- <div class="text-xs">{{ $application->status }}</div> --}}
</div>
<div class="flex items-center px-4">
<a class="mx-4 text-xs font-bold hover:underline"
@ -95,7 +115,7 @@
$database->status)->contains(['running']),
'border-l border-dashed border-warning' => Str::of(
$database->status)->contains(['restarting']),
'flex gap-2 box-without-bg dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
])>
<div class="flex flex-row w-full">
<div class="flex flex-col flex-1">
@ -120,8 +140,8 @@
href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $database->uuid]) }}">
Settings
</a>
<x-modal-confirmation action="restartDatabase({{ $database->id }})"
isErrorButton buttonTitle="Restart">
<x-modal-confirmation action="restartDatabase({{ $database->id }})" isErrorButton
buttonTitle="Restart">
This database will be unavailable during the restart. <br>Please think again.
</x-modal-confirmation>

View File

@ -0,0 +1,5 @@
<form wire:submit.prevent='submit' class="flex flex-col w-full gap-2">
<x-forms.input required placeholder="https://app.coolify.io" label="Domains" id="application.fqdn"
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io, https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "></x-forms.input>
<x-forms.button type="submit">Save</x-forms.button>
</form>