feat: move docker cleanup to its own tab

app/Livewire/Server/Advanced.php

@@ -2,7 +2,6 @@
 
 namespace App\Livewire\Server;
 
-use App\Jobs\DockerCleanupJob;
 use App\Models\Server;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
@@ -19,21 +18,6 @@ class Advanced extends Component
     #[Validate(['integer', 'min:1', 'max:99'])]
     public int $serverDiskUsageNotificationThreshold = 50;
 
-    #[Validate(['string', 'required'])]
-    public string $dockerCleanupFrequency = '*/10 * * * *';
-
-    #[Validate(['integer', 'min:1', 'max:99'])]
-    public int $dockerCleanupThreshold = 10;
-
-    #[Validate('boolean')]
-    public bool $forceDockerCleanup = false;
-
-    #[Validate('boolean')]
-    public bool $deleteUnusedVolumes = false;
-
-    #[Validate('boolean')]
-    public bool $deleteUnusedNetworks = false;
-
     #[Validate(['integer', 'min:1'])]
     public int $concurrentBuilds = 1;
 
@@ -57,23 +41,13 @@ class Advanced extends Component
             $this->validate();
             $this->server->settings->concurrent_builds = $this->concurrentBuilds;
             $this->server->settings->dynamic_timeout = $this->dynamicTimeout;
-            $this->server->settings->force_docker_cleanup = $this->forceDockerCleanup;
-            $this->server->settings->docker_cleanup_frequency = $this->dockerCleanupFrequency;
-            $this->server->settings->docker_cleanup_threshold = $this->dockerCleanupThreshold;
             $this->server->settings->server_disk_usage_notification_threshold = $this->serverDiskUsageNotificationThreshold;
-            $this->server->settings->delete_unused_volumes = $this->deleteUnusedVolumes;
-            $this->server->settings->delete_unused_networks = $this->deleteUnusedNetworks;
             $this->server->settings->server_disk_usage_check_frequency = $this->serverDiskUsageCheckFrequency;
             $this->server->settings->save();
         } else {
             $this->concurrentBuilds = $this->server->settings->concurrent_builds;
             $this->dynamicTimeout = $this->server->settings->dynamic_timeout;
-            $this->forceDockerCleanup = $this->server->settings->force_docker_cleanup;
-            $this->dockerCleanupFrequency = $this->server->settings->docker_cleanup_frequency;
-            $this->dockerCleanupThreshold = $this->server->settings->docker_cleanup_threshold;
             $this->serverDiskUsageNotificationThreshold = $this->server->settings->server_disk_usage_notification_threshold;
-            $this->deleteUnusedVolumes = $this->server->settings->delete_unused_volumes;
-            $this->deleteUnusedNetworks = $this->server->settings->delete_unused_networks;
             $this->serverDiskUsageCheckFrequency = $this->server->settings->server_disk_usage_check_frequency;
         }
     }
@@ -88,23 +62,9 @@ class Advanced extends Component
         }
     }
 
-    public function manualCleanup()
-    {
-        try {
-            DockerCleanupJob::dispatch($this->server, true);
-            $this->dispatch('success', 'Manual cleanup job started. Depending on the amount of data, this might take a while.');
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
-
     public function submit()
     {
         try {
-            if (! validate_cron_expression($this->dockerCleanupFrequency)) {
-                $this->dockerCleanupFrequency = $this->server->settings->getOriginal('docker_cleanup_frequency');
-                throw new \Exception('Invalid Cron / Human expression for Docker Cleanup Frequency.');
-            }
             if (! validate_cron_expression($this->serverDiskUsageCheckFrequency)) {
                 $this->serverDiskUsageCheckFrequency = $this->server->settings->getOriginal('server_disk_usage_check_frequency');
                 throw new \Exception('Invalid Cron / Human expression for Disk Usage Check Frequency.');

app/Livewire/Server/DockerCleanup.php

@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Livewire\Server;
+
+use App\Jobs\DockerCleanupJob;
+use App\Models\Server;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+class DockerCleanup extends Component
+{
+    public Server $server;
+
+    public array $parameters = [];
+
+    #[Validate(['string', 'required'])]
+    public string $dockerCleanupFrequency = '*/10 * * * *';
+
+    #[Validate(['integer', 'min:1', 'max:99'])]
+    public int $dockerCleanupThreshold = 10;
+
+    #[Validate('boolean')]
+    public bool $forceDockerCleanup = false;
+
+    #[Validate('boolean')]
+    public bool $deleteUnusedVolumes = false;
+
+    #[Validate('boolean')]
+    public bool $deleteUnusedNetworks = false;
+
+    public function mount(string $server_uuid)
+    {
+        try {
+            $this->server = Server::ownedByCurrentTeam()->whereUuid($server_uuid)->firstOrFail();
+            $this->parameters = get_route_parameters();
+            $this->syncData();
+        } catch (\Throwable) {
+            return redirect()->route('server.show');
+        }
+    }
+
+    public function syncData(bool $toModel = false)
+    {
+        if ($toModel) {
+            $this->validate();
+            $this->server->settings->force_docker_cleanup = $this->forceDockerCleanup;
+            $this->server->settings->docker_cleanup_frequency = $this->dockerCleanupFrequency;
+            $this->server->settings->docker_cleanup_threshold = $this->dockerCleanupThreshold;
+            $this->server->settings->delete_unused_volumes = $this->deleteUnusedVolumes;
+            $this->server->settings->delete_unused_networks = $this->deleteUnusedNetworks;
+            $this->server->settings->save();
+        } else {
+            $this->forceDockerCleanup = $this->server->settings->force_docker_cleanup;
+            $this->dockerCleanupFrequency = $this->server->settings->docker_cleanup_frequency;
+            $this->dockerCleanupThreshold = $this->server->settings->docker_cleanup_threshold;
+            $this->deleteUnusedVolumes = $this->server->settings->delete_unused_volumes;
+            $this->deleteUnusedNetworks = $this->server->settings->delete_unused_networks;
+        }
+    }
+
+    public function instantSave()
+    {
+        try {
+            $this->syncData(true);
+            $this->dispatch('success', 'Server updated.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function manualCleanup()
+    {
+        try {
+            DockerCleanupJob::dispatch($this->server, true);
+            $this->dispatch('success', 'Manual cleanup job started. Depending on the amount of data, this might take a while.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function submit()
+    {
+        try {
+            if (! validate_cron_expression($this->dockerCleanupFrequency)) {
+                $this->dockerCleanupFrequency = $this->server->settings->getOriginal('docker_cleanup_frequency');
+                throw new \Exception('Invalid Cron / Human expression for Docker Cleanup Frequency.');
+            }
+            $this->syncData(true);
+            $this->dispatch('success', 'Server updated.');
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.server.docker-cleanup');
+    }
+}

resources/views/components/server/sidebar.blade.php

@@ -5,6 +5,9 @@
         <a class="menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}"
             href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}">Advanced
         </a>
+        <a class="menu-item {{ $activeMenu === 'docker-cleanup' ? 'menu-item-active' : '' }}"
+            href="{{ route('server.docker-cleanup', ['server_uuid' => $server->uuid]) }}">Docker Cleanup
+        </a>
     @endif
     <a class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
         href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">Private Key

resources/views/livewire/server/advanced.blade.php

@@ -27,67 +27,6 @@
                     </div>
                 </div>
 
-                <div class="flex flex-col gap-2">
-                    <div class="flex gap-4">
-                        <h3>Docker Cleanup</h3>
-                        <x-modal-confirmation title="Confirm Docker Cleanup?" buttonTitle="Trigger Manual Cleanup"
-                            isHighlightedButton submitAction="manualCleanup" :actions="[
-                                'Permanently deletes all stopped containers managed by Coolify (as containers are non-persistent, no data will be lost)',
-                                'Permanently deletes all unused images',
-                                'Clears build cache',
-                                'Removes old versions of the Coolify helper image',
-                                'Optionally permanently deletes all unused volumes (if enabled in advanced options).',
-                                'Optionally permanently deletes all unused networks (if enabled in advanced options).',
-                            ]" :confirmWithText="false"
-                            :confirmWithPassword="false" step2ButtonText="Trigger Docker Cleanup" />
-                    </div>
-                    <div class="flex flex-wrap items-center gap-4">
-                        <x-forms.input placeholder="*/10 * * * *" id="dockerCleanupFrequency"
-                            label="Docker cleanup frequency" required
-                            helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at midnight." />
-                        @if (!$forceDockerCleanup)
-                        <x-forms.input id="dockerCleanupThreshold" label="Docker cleanup threshold (%)" required
-                            helper="The Docker cleanup tasks will run when the disk usage exceeds this threshold." />
-                        @endif
-                        <div class="w-96">
-                            <x-forms.checkbox
-                                helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
-                        <ul class='list-disc pl-4 mt-2'>
-                            <li>Removes stopped containers managed by Coolify (as containers are none persistent, no data will be lost).</li>
-                            <li>Deletes unused images.</li>
-                            <li>Clears build cache.</li>
-                            <li>Removes old versions of the Coolify helper image.</li>
-                            <li>Optionally delete unused volumes (if enabled in advanced options).</li>
-                            <li>Optionally remove unused networks (if enabled in advanced options).</li>
-                        </ul>"
-                                instantSave id="forceDockerCleanup" label="Force Docker Cleanup" />
-                        </div>
-
-                    </div>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                        <span class="dark:text-warning font-bold">Warning: Enable these
-                            options only if you fully understand their implications and
-                            consequences!</span><br>Improper use will result in data loss and could cause
-                        functional issues.
-                    </p>
-                    <div class="w-96">
-                        <x-forms.checkbox instantSave id="deleteUnusedVolumes" label="Delete Unused Volumes"
-                            helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data form stopped containers will be lost!</strong><br><br>Consequences include:<br>
-            <ul class='list-disc pl-4 mt-2'>
-                <li>Volumes not attached to running containers will be deleted and data will be permanently lost (stopped containers are affected).</li>
-                <li>Data from stopped containers volumes will be permanently lost.</li>
-                <li>No way to recover deleted volume data.</li>
-            </ul>" />
-                        <x-forms.checkbox instantSave id="deleteUnusedNetworks" label="Delete Unused Networks"
-                            helper="This option will remove all unused Docker networks during cleanup.<br><br><strong>Warning: Functionality may be lost and containers may not be able to communicate with each other!</strong><br><br>Consequences include:<br>
-            <ul class='list-disc pl-4 mt-2'>
-                <li>Networks not attached to running containers will be permanently deleted (stopped containers are affected).</li>
-                <li>Custom networks for stopped containers will be permanently deleted.</li>
-                <li>Functionality may be lost and containers may not be able to communicate with each other.</li>
-            </ul>" />
-                    </div>
-                </div>
-
                 <div class="flex flex-col">
                     <h3>Builds</h3>
                     <div>Customize the build process.</div>

resources/views/livewire/server/docker-cleanup.blade.php

@@ -0,0 +1,77 @@
+<div>
+    <x-slot:title>
+        {{ data_get_str($server, 'name')->limit(10) }} > Docker Cleanup | Coolify
+    </x-slot>
+    <x-server.navbar :server="$server" />
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
+        <x-server.sidebar :server="$server" activeMenu="docker-cleanup" />
+        <div class="w-full">
+            <div>
+                <div class="flex items-center gap-2">
+                    <h2>Docker Cleanup</h2>
+                </div>
+                <div class="mt-3 mb-4">Configure Docker cleanup settings for your server.</div>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <div class="flex gap-4">
+                    <h3>Docker Cleanup</h3>
+                    <x-modal-confirmation title="Confirm Docker Cleanup?" buttonTitle="Trigger Manual Cleanup"
+                        isHighlightedButton submitAction="manualCleanup" :actions="[
+                            'Permanently deletes all stopped containers managed by Coolify (as containers are non-persistent, no data will be lost)',
+                            'Permanently deletes all unused images',
+                            'Clears build cache',
+                            'Removes old versions of the Coolify helper image',
+                            'Optionally permanently deletes all unused volumes (if enabled in advanced options).',
+                            'Optionally permanently deletes all unused networks (if enabled in advanced options).',
+                        ]" :confirmWithText="false"
+                        :confirmWithPassword="false" step2ButtonText="Trigger Docker Cleanup" />
+                </div>
+                <div class="flex flex-wrap items-center gap-4">
+                    <x-forms.input placeholder="*/10 * * * *" id="dockerCleanupFrequency"
+                        label="Docker cleanup frequency" required
+                        helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at midnight." />
+                    @if (!$forceDockerCleanup)
+                    <x-forms.input id="dockerCleanupThreshold" label="Docker cleanup threshold (%)" required
+                        helper="The Docker cleanup tasks will run when the disk usage exceeds this threshold." />
+                    @endif
+                    <div class="w-96">
+                        <x-forms.checkbox
+                            helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
+                    <ul class='list-disc pl-4 mt-2'>
+                        <li>Removes stopped containers managed by Coolify (as containers are none persistent, no data will be lost).</li>
+                        <li>Deletes unused images.</li>
+                        <li>Clears build cache.</li>
+                        <li>Removes old versions of the Coolify helper image.</li>
+                        <li>Optionally delete unused volumes (if enabled in advanced options).</li>
+                        <li>Optionally remove unused networks (if enabled in advanced options).</li>
+                    </ul>"
+                            instantSave id="forceDockerCleanup" label="Force Docker Cleanup" />
+                    </div>
+                </div>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                    <span class="dark:text-warning font-bold">Warning: Enable these
+                        options only if you fully understand their implications and
+                        consequences!</span><br>Improper use will result in data loss and could cause
+                    functional issues.
+                </p>
+                <div class="w-96">
+                    <x-forms.checkbox instantSave id="deleteUnusedVolumes" label="Delete Unused Volumes"
+                        helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data form stopped containers will be lost!</strong><br><br>Consequences include:<br>
+            <ul class='list-disc pl-4 mt-2'>
+            <li>Volumes not attached to running containers will be deleted and data will be permanently lost (stopped containers are affected).</li>
+            <li>Data from stopped containers volumes will be permanently lost.</li>
+            <li>No way to recover deleted volume data.</li>
+            </ul>" />
+                    <x-forms.checkbox instantSave id="deleteUnusedNetworks" label="Delete Unused Networks"
+                        helper="This option will remove all unused Docker networks during cleanup.<br><br><strong>Warning: Functionality may be lost and containers may not be able to communicate with each other!</strong><br><br>Consequences include:<br>
+            <ul class='list-disc pl-4 mt-2'>
+            <li>Networks not attached to running containers will be permanently deleted (stopped containers are affected).</li>
+            <li>Custom networks for stopped containers will be permanently deleted.</li>
+            <li>Functionality may be lost and containers may not be able to communicate with each other.</li>
+            </ul>" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

routes/web.php

@@ -42,6 +42,7 @@ use App\Livewire\Server\Charts as ServerCharts;
 use App\Livewire\Server\CloudflareTunnels;
 use App\Livewire\Server\Delete as DeleteServer;
 use App\Livewire\Server\Destinations as ServerDestinations;
+use App\Livewire\Server\DockerCleanup;
 use App\Livewire\Server\Index as ServerIndex;
 use App\Livewire\Server\LogDrains;
 use App\Livewire\Server\PrivateKey\Show as PrivateKeyShow;
@@ -256,6 +257,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
         Route::get('/proxy/dynamic', ProxyDynamicConfigurations::class)->name('server.proxy.dynamic-confs');
         Route::get('/proxy/logs', ProxyLogs::class)->name('server.proxy.logs');
         Route::get('/terminal', ExecuteContainerCommand::class)->name('server.command');
+        Route::get('/docker-cleanup', DockerCleanup::class)->name('server.docker-cleanup');
     });
     Route::get('/destinations', DestinationIndex::class)->name('destination.index');
     Route::get('/destination/{destination_uuid}', DestinationShow::class)->name('destination.show');