From a07605205ee6775be3edabd0d249dd0e7a541a51 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 5 Nov 2024 12:28:33 +0100
Subject: [PATCH] refactor application advanced view

---
 app/Livewire/Project/Application/Advanced.php | 239 +++++++++++++-----
 .../project/application/advanced.blade.php    |  95 ++++---
 2 files changed, 217 insertions(+), 117 deletions(-)

diff --git a/app/Livewire/Project/Application/Advanced.php b/app/Livewire/Project/Application/Advanced.php
index a3a688f7c..dbc8e8d00 100644
--- a/app/Livewire/Project/Application/Advanced.php
+++ b/app/Livewire/Project/Application/Advanced.php
@@ -3,120 +3,221 @@
 namespace App\Livewire\Project\Application;
 
 use App\Models\Application;
+use Livewire\Attributes\Validate;
 use Livewire\Component;
 
 class Advanced extends Component
 {
     public Application $application;
 
-    public bool $is_force_https_enabled;
+    #[Validate(['boolean'])]
+    public bool $isForceHttpsEnabled = false;
 
-    public bool $is_gzip_enabled;
+    #[Validate(['boolean'])]
+    public bool $isGitSubmodulesEnabled = false;
 
-    public bool $is_stripprefix_enabled;
+    #[Validate(['boolean'])]
+    public bool $isGitLfsEnabled = false;
 
-    protected $rules = [
-        'application.settings.is_git_submodules_enabled' => 'boolean|required',
-        'application.settings.is_git_lfs_enabled' => 'boolean|required',
-        'application.settings.is_preview_deployments_enabled' => 'boolean|required',
-        'application.settings.is_auto_deploy_enabled' => 'boolean|required',
-        'is_force_https_enabled' => 'boolean|required',
-        'application.settings.is_log_drain_enabled' => 'boolean|required',
-        'application.settings.is_gpu_enabled' => 'boolean|required',
-        'application.settings.is_build_server_enabled' => 'boolean|required',
-        'application.settings.is_consistent_container_name_enabled' => 'boolean|required',
-        'application.settings.custom_internal_name' => 'string|nullable',
-        'application.settings.is_gzip_enabled' => 'boolean|required',
-        'application.settings.is_stripprefix_enabled' => 'boolean|required',
-        'application.settings.gpu_driver' => 'string|required',
-        'application.settings.gpu_count' => 'string|required',
-        'application.settings.gpu_device_ids' => 'string|required',
-        'application.settings.gpu_options' => 'string|required',
-        'application.settings.is_raw_compose_deployment_enabled' => 'boolean|required',
-        'application.settings.connect_to_docker_network' => 'boolean|required',
-    ];
+    #[Validate(['boolean'])]
+    public bool $isPreviewDeploymentsEnabled = false;
+
+    #[Validate(['boolean'])]
+    public bool $isAutoDeployEnabled = true;
+
+    #[Validate(['boolean'])]
+    public bool $isLogDrainEnabled = false;
+
+    #[Validate(['boolean'])]
+    public bool $isGpuEnabled = false;
+
+    #[Validate(['string'])]
+    public string $gpuDriver = '';
+
+    #[Validate(['string', 'nullable'])]
+    public ?string $gpuCount = null;
+
+    #[Validate(['string', 'nullable'])]
+    public ?string $gpuDeviceIds = null;
+
+    #[Validate(['string', 'nullable'])]
+    public ?string $gpuOptions = null;
+
+    #[Validate(['boolean'])]
+    public bool $isBuildServerEnabled = false;
+
+    #[Validate(['boolean'])]
+    public bool $isConsistentContainerNameEnabled = false;
+
+    #[Validate(['string', 'nullable'])]
+    public ?string $customInternalName = null;
+
+    #[Validate(['boolean'])]
+    public bool $isGzipEnabled = true;
+
+    #[Validate(['boolean'])]
+    public bool $isStripprefixEnabled = true;
+
+    #[Validate(['boolean'])]
+    public bool $isRawComposeDeploymentEnabled = false;
+
+    #[Validate(['boolean'])]
+    public bool $isConnectToDockerNetworkEnabled = false;
+
+    // protected $rules = [
+    //     'application.settings.is_git_submodules_enabled' => 'boolean|required',
+    //     'application.settings.is_git_lfs_enabled' => 'boolean|required',
+    //     'application.settings.is_preview_deployments_enabled' => 'boolean|required',
+    //     'application.settings.is_auto_deploy_enabled' => 'boolean|required',
+    //     'is_force_https_enabled' => 'boolean|required',
+    //     'application.settings.is_log_drain_enabled' => 'boolean|required',
+    //     'application.settings.is_gpu_enabled' => 'boolean|required',
+    //     'application.settings.gpu_driver' => 'string|required',
+    //     'application.settings.gpu_count' => 'string|required',
+    //     'application.settings.gpu_device_ids' => 'string|required',
+    //     'application.settings.gpu_options' => 'string|required',
+    //     'application.settings.is_build_server_enabled' => 'boolean|required',
+    //     'application.settings.is_consistent_container_name_enabled' => 'boolean|required',
+    //     'application.settings.custom_internal_name' => 'string|nullable',
+    //     'application.settings.is_gzip_enabled' => 'boolean|required',
+    //     'application.settings.is_stripprefix_enabled' => 'boolean|required',
+    //     'application.settings.is_raw_compose_deployment_enabled' => 'boolean|required',
+    //     'application.settings.connect_to_docker_network' => 'boolean|required',
+    // ];
 
     public function mount()
     {
-        $this->is_force_https_enabled = $this->application->isForceHttpsEnabled();
-        $this->is_gzip_enabled = $this->application->isGzipEnabled();
-        $this->is_stripprefix_enabled = $this->application->isStripprefixEnabled();
+        try {
+            $this->syncData();
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function syncData(bool $toModel = false)
+    {
+        if ($toModel) {
+            $this->validate();
+            $this->application->settings->is_force_https_enabled = $this->isForceHttpsEnabled;
+            $this->application->settings->is_git_submodules_enabled = $this->isGitSubmodulesEnabled;
+            $this->application->settings->is_git_lfs_enabled = $this->isGitLfsEnabled;
+            $this->application->settings->is_preview_deployments_enabled = $this->isPreviewDeploymentsEnabled;
+            $this->application->settings->is_auto_deploy_enabled = $this->isAutoDeployEnabled;
+            $this->application->settings->is_log_drain_enabled = $this->isLogDrainEnabled;
+            $this->application->settings->is_gpu_enabled = $this->isGpuEnabled;
+            $this->application->settings->gpu_driver = $this->gpuDriver;
+            $this->application->settings->gpu_count = $this->gpuCount;
+            $this->application->settings->gpu_device_ids = $this->gpuDeviceIds;
+            $this->application->settings->gpu_options = $this->gpuOptions;
+            $this->application->settings->is_build_server_enabled = $this->isBuildServerEnabled;
+            $this->application->settings->is_consistent_container_name_enabled = $this->isConsistentContainerNameEnabled;
+            $this->application->settings->custom_internal_name = $this->customInternalName;
+            $this->application->settings->is_gzip_enabled = $this->isGzipEnabled;
+            $this->application->settings->is_stripprefix_enabled = $this->isStripprefixEnabled;
+            $this->application->settings->is_raw_compose_deployment_enabled = $this->isRawComposeDeploymentEnabled;
+            $this->application->settings->connect_to_docker_network = $this->isConnectToDockerNetworkEnabled;
+            $this->application->settings->save();
+        } else {
+            $this->isForceHttpsEnabled = $this->application->isForceHttpsEnabled();
+            $this->isGzipEnabled = $this->application->isGzipEnabled();
+            $this->isStripprefixEnabled = $this->application->isStripprefixEnabled();
+            $this->isLogDrainEnabled = $this->application->isLogDrainEnabled();
+
+            $this->isGitSubmodulesEnabled = $this->application->settings->is_git_submodules_enabled;
+            $this->isGitLfsEnabled = $this->application->settings->is_git_lfs_enabled;
+            $this->isPreviewDeploymentsEnabled = $this->application->settings->is_preview_deployments_enabled;
+            $this->isAutoDeployEnabled = $this->application->settings->is_auto_deploy_enabled;
+            $this->isGpuEnabled = $this->application->settings->is_gpu_enabled;
+            $this->gpuDriver = $this->application->settings->gpu_driver;
+            $this->gpuCount = $this->application->settings->gpu_count;
+            $this->gpuDeviceIds = $this->application->settings->gpu_device_ids;
+            $this->gpuOptions = $this->application->settings->gpu_options;
+            $this->isBuildServerEnabled = $this->application->settings->is_build_server_enabled;
+            $this->isConsistentContainerNameEnabled = $this->application->settings->is_consistent_container_name_enabled;
+            $this->customInternalName = $this->application->settings->custom_internal_name;
+            $this->isRawComposeDeploymentEnabled = $this->application->settings->is_raw_compose_deployment_enabled;
+            $this->isConnectToDockerNetworkEnabled = $this->application->settings->connect_to_docker_network;
+        }
     }
 
     public function instantSave()
     {
-        if ($this->application->isLogDrainEnabled()) {
-            if (! $this->application->destination->server->isLogDrainEnabled()) {
-                $this->application->settings->is_log_drain_enabled = false;
-                $this->dispatch('error', 'Log drain is not enabled on this server.');
+        try {
+            if ($this->isLogDrainEnabled) {
+                if (! $this->application->destination->server->isLogDrainEnabled()) {
+                    $this->isLogDrainEnabled = false;
+                    $this->syncData(true);
+                    $this->dispatch('error', 'Log drain is not enabled on this server.');
 
-                return;
+                    return;
+                }
             }
+            if ($this->application->isForceHttpsEnabled() !== $this->isForceHttpsEnabled ||
+                $this->application->isGzipEnabled() !== $this->isGzipEnabled ||
+                $this->application->isStripprefixEnabled() !== $this->isStripprefixEnabled
+            ) {
+                $this->dispatch('resetDefaultLabels', false);
+            }
+
+            if ($this->application->settings->is_raw_compose_deployment_enabled) {
+                $this->application->oldRawParser();
+            } else {
+                $this->application->parse();
+            }
+            $this->syncData(true);
+            $this->dispatch('success', 'Settings saved.');
+            $this->dispatch('configurationChanged');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
         }
-        if ($this->application->settings->is_force_https_enabled !== $this->is_force_https_enabled) {
-            $this->application->settings->is_force_https_enabled = $this->is_force_https_enabled;
-            $this->dispatch('resetDefaultLabels', false);
-        }
-        if ($this->application->settings->is_gzip_enabled !== $this->is_gzip_enabled) {
-            $this->application->settings->is_gzip_enabled = $this->is_gzip_enabled;
-            $this->dispatch('resetDefaultLabels', false);
-        }
-        if ($this->application->settings->is_stripprefix_enabled !== $this->is_stripprefix_enabled) {
-            $this->application->settings->is_stripprefix_enabled = $this->is_stripprefix_enabled;
-            $this->dispatch('resetDefaultLabels', false);
-        }
-        if ($this->application->settings->is_raw_compose_deployment_enabled) {
-            $this->application->oldRawParser();
-        } else {
-            $this->application->parse();
-        }
-        $this->application->settings->save();
-        $this->dispatch('success', 'Settings saved.');
-        $this->dispatch('configurationChanged');
     }
 
     public function submit()
     {
-        if ($this->application->settings->gpu_count && $this->application->settings->gpu_device_ids) {
-            $this->dispatch('error', 'You cannot set both GPU count and GPU device IDs.');
-            $this->application->settings->gpu_count = null;
-            $this->application->settings->gpu_device_ids = null;
-            $this->application->settings->save();
+        try {
+            if ($this->gpuCount && $this->gpuDeviceIds) {
+                $this->dispatch('error', 'You cannot set both GPU count and GPU device IDs.');
+                $this->gpuCount = null;
+                $this->gpuDeviceIds = null;
+                $this->syncData(true);
 
-            return;
+                return;
+            }
+            $this->syncData(true);
+            $this->dispatch('success', 'Settings saved.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
         }
-        $this->application->settings->save();
-        $this->dispatch('success', 'Settings saved.');
     }
 
     public function saveCustomName()
     {
-        if (str($this->application->settings->custom_internal_name)->isNotEmpty()) {
-            $this->application->settings->custom_internal_name = str($this->application->settings->custom_internal_name)->slug()->value();
+        if (str($this->customInternalName)->isNotEmpty()) {
+            $this->customInternalName = str($this->customInternalName)->slug()->value();
         } else {
-            $this->application->settings->custom_internal_name = null;
+            $this->customInternalName = null;
         }
-        if (is_null($this->application->settings->custom_internal_name)) {
-            $this->application->settings->save();
+        if (is_null($this->customInternalName)) {
+            $this->syncData(true);
             $this->dispatch('success', 'Custom name saved.');
 
             return;
         }
-        $customInternalName = $this->application->settings->custom_internal_name;
+        $customInternalName = $this->customInternalName;
         $server = $this->application->destination->server;
         $allApplications = $server->applications();
 
         $foundSameInternalName = $allApplications->filter(function ($application) {
-            return $application->id !== $this->application->id && $application->settings->custom_internal_name === $this->application->settings->custom_internal_name;
+            return $application->id !== $this->application->id && $application->settings->custom_internal_name === $this->customInternalName;
         });
         if ($foundSameInternalName->isNotEmpty()) {
             $this->dispatch('error', 'This custom container name is already in use by another application on this server.');
-            $this->application->settings->custom_internal_name = $customInternalName;
-            $this->application->settings->refresh();
+            $this->customInternalName = $customInternalName;
+            $this->syncData(true);
 
             return;
         }
-        $this->application->settings->save();
+        $this->syncData(true);
         $this->dispatch('success', 'Custom name saved.');
     }
 
diff --git a/resources/views/livewire/project/application/advanced.blade.php b/resources/views/livewire/project/application/advanced.blade.php
index dc3f135db..80cd338ad 100644
--- a/resources/views/livewire/project/application/advanced.blade.php
+++ b/resources/views/livewire/project/application/advanced.blade.php
@@ -8,90 +8,89 @@
             <h3>General</h3>
             @if ($application->git_based())
                 <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
-                    id="application.settings.is_auto_deploy_enabled" label="Auto Deploy" />
+                    id="isAutoDeployEnabled" label="Auto Deploy" />
                 <x-forms.checkbox
                     helper="Allow to automatically deploy Preview Deployments for all opened PR's.<br><br>Closing a PR will delete Preview Deployments."
-                    instantSave id="application.settings.is_preview_deployments_enabled" label="Preview Deployments" />
+                    instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" />
             @endif
             <x-forms.checkbox
                 helper="Your application will be available only on https if your domain starts with https://..."
-                instantSave id="is_force_https_enabled" label="Force Https" />
+                instantSave id="isForceHttpsEnabled" label="Force Https" />
             <x-forms.checkbox label="Enable Gzip Compression"
                 helper="You can disable gzip compression if you want. Some services are compressing data by default. In this case, you do not need this."
-                instantSave id="is_gzip_enabled" />
+                instantSave id="isGzipEnabled" />
             <x-forms.checkbox helper="Strip Prefix is used to remove prefixes from paths. Like /api/ to /api."
-                instantSave id="is_stripprefix_enabled" label="Strip Prefixes" />
+                instantSave id="isStripprefixEnabled" label="Strip Prefixes" />
             @if ($application->build_pack === 'dockercompose')
                 <h3>Docker Compose</h3>
-                <x-forms.checkbox instantSave id="application.settings.is_raw_compose_deployment_enabled"
-                    label="Raw Compose Deployment"
+                <x-forms.checkbox instantSave id="isRawComposeDeploymentEnabled" label="Raw Compose Deployment"
                     helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
             @endif
-            <h3>Container Names</h3>
+            <h3 class="pt-4">Container Names</h3>
             <x-forms.checkbox
                 helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
-                instantSave id="application.settings.is_consistent_container_name_enabled"
-                label="Consistent Container Names" />
-            @if (!$application->settings->is_consistent_container_name_enabled)
-                <form class="flex items-end gap-2 pl-2" wire:submit.prevent='saveCustomName'>
+                instantSave id="isConsistentContainerNameEnabled" label="Consistent Container Names" />
+            @if (!$isConsistentContainerNameEnabled)
+                <form class="flex items-end gap-2 " wire:submit.prevent='saveCustomName'>
                     <x-forms.input
                         helper="You can add a custom name for your container.<br><br>The name will be converted to slug format when you save it. <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
-                        instantSave id="application.settings.custom_internal_name" label="Custom Container Name" />
+                        instantSave id="customInternalName" label="Custom Container Name" />
                     <x-forms.button type="submit">Save</x-forms.button>
                 </form>
             @endif
             @if ($application->build_pack === 'dockercompose')
-                <h3>Network</h3>
-                <x-forms.checkbox instantSave id="application.settings.connect_to_docker_network"
-                    label="Connect To Predefined Network"
+                <h3 class="pt-4">Network</h3>
+                <x-forms.checkbox instantSave id="isConnectToDockerNetworkEnabled" 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>." />
             @endif
-            @if (!$application->settings->is_raw_compose_deployment_enabled)
-                <h3>Logs</h3>
+            @if (!$isRawComposeDeploymentEnabled)
+                <h3 class="pt-4">Logs</h3>
                 <x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
-                    instantSave id="application.settings.is_log_drain_enabled" label="Drain Logs" />
+                    instantSave id="isLogDrainEnabled" label="Drain Logs" />
             @endif
 
             @if ($application->git_based())
                 <h3>Git</h3>
-                <x-forms.checkbox instantSave id="application.settings.is_git_submodules_enabled" label="Submodules"
+                <x-forms.checkbox instantSave id="isGitSubmodulesEnabled" label="Submodules"
                     helper="Allow Git Submodules during build process." />
-                <x-forms.checkbox instantSave id="application.settings.is_git_lfs_enabled" label="LFS"
+                <x-forms.checkbox instantSave id="isGitLfsEnabled" label="LFS"
                     helper="Allow Git LFS during build process." />
             @endif
             {{-- <x-forms.checkbox disabled instantSave id="is_dual_cert" label="Dual Certs?" />
             <x-forms.checkbox disabled instantSave id="is_custom_ssl" label="Is Custom SSL?" />
             <x-forms.checkbox disabled instantSave id="is_http2" label="Is Http2?" /> --}}
         </div>
-        @if ($application->build_pack !== 'dockercompose')
-            <h3>GPU</h3>
-        @endif
-        <form wire:submit="submit">
-            @if ($application->build_pack !== 'dockercompose')
-                <x-forms.checkbox
-                    helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='underline dark:text-white' target='_blank'>here</a>."
-                    instantSave id="application.settings.is_gpu_enabled" label="Attach GPU" />
-                @if ($application->settings->is_gpu_enabled)
-                    <h5>GPU Settings</h5>
 
+    </div>
+    <form wire:submit="submit" class="flex flex-col gap-2">
+        @if ($application->build_pack !== 'dockercompose')
+            <div class="flex gap-2 items-end pt-4">
+                <h3>GPU</h3>
+                @if ($isGpuEnabled)
                     <x-forms.button type="submit">Save</x-forms.button>
                 @endif
-            @endif
-            @if ($application->settings->is_gpu_enabled)
-                <div class="flex flex-col w-full gap-2 p-2 xl:flex-row">
-                    <x-forms.input label="GPU Driver" id="application.settings.gpu_driver"> </x-forms.input>
-                    <x-forms.input label="GPU Count" placeholder="empty means use all GPUs"
-                        id="application.settings.gpu_count"> </x-forms.input>
-                    <x-forms.input label="GPU Device Ids" placeholder="0,2"
-                        helper="Comma separated list of device ids. More info <a href='https://docs.docker.com/compose/gpu-support/#access-specific-devices' class='underline dark:text-white' target='_blank'>here</a>."
-                        id="application.settings.gpu_device_ids"> </x-forms.input>
+            </div>
+        @endif
+        @if ($application->build_pack !== 'dockercompose')
+            <div class="md:w-96 pb-4">
+                <x-forms.checkbox
+                    helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='underline dark:text-white' target='_blank'>here</a>."
+                    instantSave id="isGpuEnabled" label="Enable GPU" />
+            </div>
+        @endif
+        @if ($isGpuEnabled)
+            <div class="flex flex-col w-full gap-2 ">
+                <div class="flex gap-2 items-end">
+                    <x-forms.input label="GPU Driver" id="gpuDriver"> </x-forms.input>
+                    <x-forms.input label="GPU Count" placeholder="empty means use all GPUs" id="gpuCount">
+                    </x-forms.input>
+                </div>
 
-                </div>
-                <div class="px-2">
-                    <x-forms.textarea label="GPU Options" id="application.settings.gpu_options">
-                    </x-forms.textarea>
-                </div>
-            @endif
-        </form>
-    </div>
+                <x-forms.input label="GPU Device Ids" placeholder="0,2"
+                    helper="Comma separated list of device ids. More info <a href='https://docs.docker.com/compose/gpu-support/#access-specific-devices' class='underline dark:text-white' target='_blank'>here</a>."
+                    id="gpuDeviceIds"> </x-forms.input>
+                <x-forms.textarea rows="10" label="GPU Options" id="gpuOptions"> </x-forms.textarea>
+            </div>
+        @endif
+    </form>
 </div>