Feat UI form
This commit is contained in:
		@@ -37,7 +37,6 @@ class Form extends Component
 | 
			
		||||
        'server.settings.is_swarm_manager' => 'required|boolean',
 | 
			
		||||
        'server.settings.is_swarm_worker' => 'required|boolean',
 | 
			
		||||
        'server.settings.is_build_server' => 'required|boolean',
 | 
			
		||||
        'server.settings.is_force_cleanup_enabled' => 'required|boolean',
 | 
			
		||||
        'server.settings.concurrent_builds' => 'required|integer|min:1',
 | 
			
		||||
        'server.settings.dynamic_timeout' => 'required|integer|min:1',
 | 
			
		||||
        'server.settings.is_metrics_enabled' => 'required|boolean',
 | 
			
		||||
@@ -46,6 +45,9 @@ class Form extends Component
 | 
			
		||||
        'server.settings.metrics_history_days' => 'required|integer|min:1',
 | 
			
		||||
        'wildcard_domain' => 'nullable|url',
 | 
			
		||||
        'server.settings.is_server_api_enabled' => 'required|boolean',
 | 
			
		||||
        'server.settings.force_server_cleanup' => 'required|boolean',
 | 
			
		||||
        'server.settings.server_cleanup_cron' => 'required_if:server.settings.force_server_cleanup,true',
 | 
			
		||||
        'server.settings.server_cleanup_threshold' => 'required|integer|min:1|max:100',
 | 
			
		||||
    ];
 | 
			
		||||
 | 
			
		||||
    protected $validationAttributes = [
 | 
			
		||||
 
 | 
			
		||||
@@ -34,9 +34,7 @@
 | 
			
		||||
            <x-slot:content>
 | 
			
		||||
                <livewire:server.validate-and-install :server="$server" />
 | 
			
		||||
            </x-slot:content>
 | 
			
		||||
                <x-forms.button @click="slideOverOpen=true"
 | 
			
		||||
                    class="w-full mt-8 mb-4 font-bold box-without-bg bg-coollabs hover:bg-coollabs-100"
 | 
			
		||||
                    wire:click.prevent='validateServer' isHighlighted>
 | 
			
		||||
            <x-forms.button @click="slideOverOpen=true" class="w-full mt-8 mb-4 font-bold box-without-bg bg-coollabs hover:bg-coollabs-100" wire:click.prevent='validateServer' isHighlighted>
 | 
			
		||||
                Validate Server & Install Docker Engine
 | 
			
		||||
            </x-forms.button>
 | 
			
		||||
        </x-slide-over>
 | 
			
		||||
@@ -48,8 +46,7 @@
 | 
			
		||||
        @endif
 | 
			
		||||
        @endif
 | 
			
		||||
        @if ((!$server->settings->is_reachable || !$server->settings->is_usable) && $server->id === 0)
 | 
			
		||||
            <x-forms.button class="mt-8 mb-4 font-bold box-without-bg bg-coollabs hover:bg-coollabs-100"
 | 
			
		||||
                wire:click.prevent='checkLocalhostConnection' isHighlighted>
 | 
			
		||||
        <x-forms.button class="mt-8 mb-4 font-bold box-without-bg bg-coollabs hover:bg-coollabs-100" wire:click.prevent='checkLocalhostConnection' isHighlighted>
 | 
			
		||||
            Validate Server
 | 
			
		||||
        </x-forms.button>
 | 
			
		||||
        @endif
 | 
			
		||||
@@ -62,14 +59,12 @@
 | 
			
		||||
                <x-forms.input id="server.name" label="Name" required />
 | 
			
		||||
                <x-forms.input id="server.description" label="Description" />
 | 
			
		||||
                @if (!$server->settings->is_swarm_worker && !$server->settings->is_build_server)
 | 
			
		||||
                    <x-forms.input placeholder="https://example.com" id="wildcard_domain" label="Wildcard Domain"
 | 
			
		||||
                        helper='A wildcard domain allows you to receive a randomly generated domain for your new applications. <br><br>For instance, if you set "https://example.com" as your wildcard domain, your applications will receive domains like "https://randomId.example.com".' />
 | 
			
		||||
                <x-forms.input placeholder="https://example.com" id="wildcard_domain" label="Wildcard Domain" helper='A wildcard domain allows you to receive a randomly generated domain for your new applications. <br><br>For instance, if you set "https://example.com" as your wildcard domain, your applications will receive domains like "https://randomId.example.com".' />
 | 
			
		||||
                @endif
 | 
			
		||||
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="flex flex-col w-full gap-2 lg:flex-row">
 | 
			
		||||
                <x-forms.input type="password" id="server.ip" label="IP Address/Domain"
 | 
			
		||||
                    helper="An IP Address (127.0.0.1) or domain (example.com)." required />
 | 
			
		||||
                <x-forms.input type="password" id="server.ip" label="IP Address/Domain" helper="An IP Address (127.0.0.1) or domain (example.com)." required />
 | 
			
		||||
                <div class="flex gap-2">
 | 
			
		||||
                    <x-forms.input id="server.user" label="User" required />
 | 
			
		||||
                    <x-forms.input type="number" id="server.port" label="Port" required />
 | 
			
		||||
@@ -78,13 +73,11 @@
 | 
			
		||||
            <div class="w-64">
 | 
			
		||||
                @if ($server->isFunctional())
 | 
			
		||||
                @if (!$server->isLocalhost())
 | 
			
		||||
                        <x-forms.checkbox instantSave id="server.settings.is_build_server"
 | 
			
		||||
                            label="Use it as a build server?" />
 | 
			
		||||
                <x-forms.checkbox instantSave id="server.settings.is_build_server" label="Use it as a build server?" />
 | 
			
		||||
                <div class="flex items-center gap-1 pt-6">
 | 
			
		||||
                    <h3 class="">Cloudflare Tunnels
 | 
			
		||||
                    </h3>
 | 
			
		||||
                            <x-helper class="inline-flex"
 | 
			
		||||
                                helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
 | 
			
		||||
                    <x-helper class="inline-flex" helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
 | 
			
		||||
                </div>
 | 
			
		||||
                @if ($server->settings->is_cloudflare_tunnel)
 | 
			
		||||
                <x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
 | 
			
		||||
@@ -95,29 +88,18 @@
 | 
			
		||||
                @endif
 | 
			
		||||
                @if (!$server->isBuildServer())
 | 
			
		||||
                <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
 | 
			
		||||
                            <div class="pb-4">Read the docs <a class='underline dark:text-white'
 | 
			
		||||
                                    href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>.
 | 
			
		||||
                <div class="pb-4">Read the docs <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>.
 | 
			
		||||
                </div>
 | 
			
		||||
                @if ($server->settings->is_swarm_worker)
 | 
			
		||||
                                <x-forms.checkbox disabled instantSave type="checkbox"
 | 
			
		||||
                                    id="server.settings.is_swarm_manager"
 | 
			
		||||
                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
 | 
			
		||||
                                    label="Is it a Swarm Manager?" />
 | 
			
		||||
                <x-forms.checkbox disabled instantSave type="checkbox" id="server.settings.is_swarm_manager" helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>." label="Is it a Swarm Manager?" />
 | 
			
		||||
                @else
 | 
			
		||||
                                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
 | 
			
		||||
                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
 | 
			
		||||
                                    label="Is it a Swarm Manager?" />
 | 
			
		||||
                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager" helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>." label="Is it a Swarm Manager?" />
 | 
			
		||||
                @endif
 | 
			
		||||
 | 
			
		||||
                @if ($server->settings->is_swarm_manager)
 | 
			
		||||
                                <x-forms.checkbox disabled instantSave type="checkbox"
 | 
			
		||||
                                    id="server.settings.is_swarm_worker"
 | 
			
		||||
                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
 | 
			
		||||
                                    label="Is it a Swarm Worker?" />
 | 
			
		||||
                <x-forms.checkbox disabled instantSave type="checkbox" id="server.settings.is_swarm_worker" helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>." label="Is it a Swarm Worker?" />
 | 
			
		||||
                @else
 | 
			
		||||
                                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
 | 
			
		||||
                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
 | 
			
		||||
                                    label="Is it a Swarm Worker?" />
 | 
			
		||||
                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker" helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>." label="Is it a Swarm Worker?" />
 | 
			
		||||
                @endif
 | 
			
		||||
                @endif
 | 
			
		||||
                @endif
 | 
			
		||||
@@ -125,8 +107,7 @@
 | 
			
		||||
                <div class="flex items-center gap-1 pt-6">
 | 
			
		||||
                    <h3 class="">Cloudflare Tunnels
 | 
			
		||||
                    </h3>
 | 
			
		||||
                        <x-helper class="inline-flex"
 | 
			
		||||
                            helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
 | 
			
		||||
                    <x-helper class="inline-flex" helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
 | 
			
		||||
                </div>
 | 
			
		||||
                @if ($server->settings->is_cloudflare_tunnel)
 | 
			
		||||
                <x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
 | 
			
		||||
@@ -144,29 +125,18 @@
 | 
			
		||||
        <h3 class="pt-4">Settings</h3>
 | 
			
		||||
        <div class="flex flex-col gap-2">
 | 
			
		||||
            <div class="flex flex-col flex-wrap gap-2 sm:flex-nowrap">
 | 
			
		||||
                    @if ($server->settings->is_force_cleanup_enabled)
 | 
			
		||||
                <div class="w-64">
 | 
			
		||||
                            <x-forms.checkbox
 | 
			
		||||
                                helper="This will cleanup build caches / unused images / etc every 10 minutes."
 | 
			
		||||
                                instantSave id="server.settings.is_force_cleanup_enabled"
 | 
			
		||||
                                label="Force Cleanup Docker Engine" />
 | 
			
		||||
                    <x-forms.checkbox helper="Enable force Server cleanup. This will cleanup build caches / unused images / docker things and uplads and database" instantSave id="server.settings.force_server_cleanup" label="ForceServer Cleanup" />
 | 
			
		||||
                </div>
 | 
			
		||||
                @if ($server->settings->force_server_cleanup)
 | 
			
		||||
                <x-forms.input id="server.settings.server_cleanup_cron" label="Cleanup Cron Expression" required helper="Cron expression for Server Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every 10 minutes."" />
 | 
			
		||||
                @else
 | 
			
		||||
                        <x-forms.input id="cleanup_after_percentage" label="Disk cleanup threshold (%)" required
 | 
			
		||||
                            helper="The disk cleanup task will run when the disk usage exceeds this threshold." />
 | 
			
		||||
                        <div class="w-64">
 | 
			
		||||
                            <x-forms.checkbox
 | 
			
		||||
                                helper="This will cleanup build caches / unused images / etc every 10 minutes."
 | 
			
		||||
                                instantSave id="server.settings.is_force_cleanup_enabled"
 | 
			
		||||
                                label="Force Cleanup Docker Engine" />
 | 
			
		||||
                        </div>
 | 
			
		||||
                <x-forms.input id="server_cleanup_threshold" label="Disk cleanup threshold (%)" required helper="The disk cleanup task will run when the disk usage exceeds this threshold." />
 | 
			
		||||
                @endif
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="flex flex-wrap gap-2 sm:flex-nowrap">
 | 
			
		||||
                    <x-forms.input id="server.settings.concurrent_builds" label="Number of concurrent builds" required
 | 
			
		||||
                        helper="You can specify the number of simultaneous build processes/deployments that should run concurrently." />
 | 
			
		||||
                    <x-forms.input id="server.settings.dynamic_timeout" label="Deployment timeout (seconds)" required
 | 
			
		||||
                        helper="You can define the maximum duration for a deployment to run before timing it out." />
 | 
			
		||||
                <x-forms.input id="server.settings.concurrent_builds" label="Number of concurrent builds" required helper="You can specify the number of simultaneous build processes/deployments that should run concurrently." />
 | 
			
		||||
                <x-forms.input id="server.settings.dynamic_timeout" label="Deployment timeout (seconds)" required helper="You can define the maximum duration for a deployment to run before timing it out." />
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="flex items-center gap-2 pt-4 pb-2">
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user