mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-16 02:15:32 +00:00
feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)
Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>
This commit is contained in:
1 parent
0b843bb07c
commit
8ae56587d5
497 files changed
+44045
-22630
No files matched your search
@@ -1,59 +1,65 @@
|
||||
<form wire:submit.prevent='submit' class="flex flex-col gap-4 pb-2">
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<h2>Service Stack</h2>
|
||||
@if (isDev())
|
||||
<div>{{ $service->compose_parsing_version }}</div>
|
||||
@endif
|
||||
<x-forms.button canGate="update" :canResource="$service" wire:target='submit'
|
||||
type="submit">Save</x-forms.button>
|
||||
@can('update', $service)
|
||||
<x-modal-input buttonTitle="Edit Compose File" title="Edit Docker Compose" :closeOutside="false">
|
||||
<livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
<x-modal-input title="Resource Details" buttonTitle="Details">
|
||||
<livewire:project.shared.resource-details :resource="$service" />
|
||||
</x-modal-input>
|
||||
</div>
|
||||
<div>Configuration</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input canGate="update" :canResource="$service" id="name" required label="Service Name"
|
||||
placeholder="My super WordPress site" />
|
||||
<x-forms.input canGate="update" :canResource="$service" id="description" label="Description" />
|
||||
</div>
|
||||
<div>
|
||||
<h3>Network</h3>
|
||||
</div>
|
||||
<div class="w-full sm:w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$service" instantSave id="connectToDockerNetwork"
|
||||
label="Connect To Predefined Network"
|
||||
helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>." />
|
||||
</div>
|
||||
@if ($fields->count() > 0)
|
||||
<div>
|
||||
<h3>Service Specific Configuration</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
@foreach ($fields as $serviceName => $field)
|
||||
<div class="flex items-center gap-2"><span
|
||||
class="font-bold">{{ data_get($field, 'serviceName') }}</span>{{ data_get($field, 'name') }}
|
||||
@if (data_get($field, 'customHelper'))
|
||||
<x-helper helper="{{ data_get($field, 'customHelper') }}" />
|
||||
@else
|
||||
<x-helper helper="Variable name: {{ $serviceName }}" />
|
||||
@endif
|
||||
</div>
|
||||
@if ($isPasswordHiddenForMember && data_get($field, 'isPassword'))
|
||||
<x-forms.input disabled value="Hidden (only admins can view)" />
|
||||
@else
|
||||
<x-forms.input canGate="update" :canResource="$service"
|
||||
type="{{ data_get($field, 'isPassword') ? 'password' : 'text' }}"
|
||||
required="{{ str(data_get($field, 'rules'))?->contains('required') }}"
|
||||
id="fields.{{ $serviceName }}.value"></x-forms.input>
|
||||
<form wire:submit.prevent="submit" class="application-settings-form flex flex-col gap-6">
|
||||
<x-unsaved-bar action="submit" />
|
||||
|
||||
<x-application.settings-section title="Service details"
|
||||
description="Manage the identity and Compose configuration for this service.">
|
||||
<x-slot:actions>
|
||||
<div class="flex items-center gap-2">
|
||||
@if (isDev())
|
||||
<x-status-badge label="Parser {{ $service->compose_parsing_version }}" type="neutral" />
|
||||
@endif
|
||||
@endforeach
|
||||
@can('update', $service)
|
||||
<x-modal-input buttonTitle="Edit Compose file" title="Edit Docker Compose" :closeOutside="false">
|
||||
<livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
<x-modal-input title="Resource details" buttonTitle="Details">
|
||||
<livewire:project.shared.resource-details :resource="$service" />
|
||||
</x-modal-input>
|
||||
</div>
|
||||
</x-slot:actions>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<x-forms.input canGate="update" :canResource="$service" id="name" required label="Service name"
|
||||
placeholder="My WordPress site" />
|
||||
<x-forms.input canGate="update" :canResource="$service" id="description" label="Description" />
|
||||
</div>
|
||||
</x-application.settings-section>
|
||||
|
||||
<x-application.settings-section title="Network"
|
||||
description="Control whether this Compose stack joins Coolify's predefined network.">
|
||||
<x-forms.listbox id="connectToDockerNetwork" label="Network attachment" live onChange="instantSave"
|
||||
:disabled="! auth()->user()->can('update', $service)" :options="[
|
||||
['value' => false, 'label' => 'Use the stack network only'],
|
||||
['value' => true, 'label' => 'Connect to the predefined Coolify network'],
|
||||
]" />
|
||||
</x-application.settings-section>
|
||||
|
||||
@if ($fields->count() > 0)
|
||||
<x-application.settings-section title="Service configuration"
|
||||
description="Template-specific values exposed by this service.">
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
@foreach ($fields as $serviceName => $field)
|
||||
<div>
|
||||
<div class="mb-1.5 flex items-center gap-1.5 text-[12px] font-medium">
|
||||
<span>{{ data_get($field, 'serviceName') }} · {{ data_get($field, 'name') }}</span>
|
||||
@if (data_get($field, 'customHelper'))
|
||||
<x-helper helper="{{ data_get($field, 'customHelper') }}" />
|
||||
@else
|
||||
<x-helper helper="Variable name: {{ $serviceName }}" />
|
||||
@endif
|
||||
</div>
|
||||
@if ($isPasswordHiddenForMember && data_get($field, 'isPassword'))
|
||||
<x-forms.input disabled value="Hidden (only admins can view)" />
|
||||
@else
|
||||
<x-forms.input canGate="update" :canResource="$service"
|
||||
type="{{ data_get($field, 'isPassword') ? 'password' : 'text' }}"
|
||||
required="{{ str(data_get($field, 'rules'))?->contains('required') }}"
|
||||
id="fields.{{ $serviceName }}.value" />
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-application.settings-section>
|
||||
@endif
|
||||
</form>
|
||||
Reference in new issue
Block a user