Feat: stop service confirm

app/Actions/Service/StopService.php

@@ -10,7 +10,7 @@ class StopService
 {
     use AsAction;
 
-    public function handle(Service $service, bool $isDeleteOperation = false)
+    public function handle(Service $service, bool $isDeleteOperation = false, bool $dockerCleanup = true)
     {
         try {
             $server = $service->destination->server;
@@ -24,7 +24,9 @@ class StopService
 
             if (!$isDeleteOperation) {
                 $service->delete_connected_networks($service->uuid);
-                CleanupDocker::run($server, true);
+                if ($dockerCleanup) {
+                    CleanupDocker::run($server, true);
+                }
             }
         } catch (\Exception $e) {
             ray($e->getMessage());

app/Livewire/Project/Service/Navbar.php

@@ -20,6 +20,8 @@ class Navbar extends Component
 
     public $isDeploymentProgress = false;
 
+    public $docker_cleanup = true;
+
     public function mount()
     {
         if (str($this->service->status())->contains('running') && is_null($this->service->config_hash)) {
@@ -60,11 +62,6 @@ class Navbar extends Component
         $this->dispatch('success', 'Service status updated.');
     }
 
-    public function render()
-    {
-        return view('livewire.project.service.navbar');
-    }
-
     public function checkDeployments()
     {
         try {
@@ -95,14 +92,9 @@ class Navbar extends Component
         $this->dispatch('activityMonitor', $activity->id);
     }
 
-    public function stop(bool $forceCleanup = false)
+    public function stop()
     {
-        StopService::run($this->service);
-        if ($forceCleanup) {
-            $this->dispatch('success', 'Containers cleaned up.');
-        } else {
-            $this->dispatch('success', 'Service stopped.');
-        }
+        StopService::run($this->service, false, $this->docker_cleanup);
         ServiceStatusChanged::dispatch();
     }
 
@@ -121,4 +113,14 @@ class Navbar extends Component
         $activity = StartService::run($this->service);
         $this->dispatch('activityMonitor', $activity->id);
     }
+
+    public function render()
+    {
+        return view('livewire.project.service.navbar', [
+            'checkboxes' => [
+                ['id' => 'docker_cleanup', 'label' => 'Docker cleanup will be run on the server which removes builder cache and unused images (the next deployment will take longer as the images have to be pulled again)'],
+            ]
+        ]);
+    }
+
 }

resources/views/livewire/project/service/navbar.blade.php

@@ -26,7 +26,18 @@
                 </svg>
                 Pull Latest Images & Restart
             </button>
-            <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
+            <x-modal-confirmation 
+            title="Confirm Service Stopping?"
+            buttonTitle="Stop"
+            submitAction="stop"
+            :checkboxes="$checkboxes"
+            :actions="['This service will be stopped.', 'If the service is currently in use data could be lost.', 'All non-persistent data of this service (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the service again).']"
+            :confirmWithText="false"
+            :confirmWithPassword="false"
+            step2ButtonText="Stop Service"
+            :dispatchEvent="true"
+            dispatchEventType="stopEvent"
+            >
                 <x-slot:button-title>
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -37,9 +48,6 @@
                     </svg>
                     Stop
                 </x-slot:button-title>
-                This service will be stopped. <br>
-                <strong>And all none persitant data will be deleted (Containers, Networks, Unused Images).</strong><br>
-                Please think again.
             </x-modal-confirmation>
             @elseif (str($service->status())->contains('degraded'))
             <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
@@ -51,7 +59,18 @@
                 </svg>
                 Restart Degraded Services
             </button>
-            <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
+            <x-modal-confirmation 
+            title="Confirm Service Stopping?"
+            buttonTitle="Stop"
+            submitAction="stop"
+            :checkboxes="$checkboxes"
+            :actions="['This service will be stopped.', 'If the service is currently in use data could be lost.', 'All non-persistent data of this service (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the service again).']"
+            :confirmWithText="false"
+            :confirmWithPassword="false"
+            step2ButtonText="Stop Service"
+            :dispatchEvent="true"
+            dispatchEventType="stopEvent"
+            >
                 <x-slot:button-title>
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -62,9 +81,6 @@
                     </svg>
                     Stop
                 </x-slot:button-title>
-                This service will be stopped. <br>
-                <strong>And all none persitant data will be deleted (Containers, Networks, Unused Images).</strong><br>
-                Please think again.
             </x-modal-confirmation>
             @elseif (str($service->status())->contains('exited'))
             <button wire:click='stop(true)' class="gap-2 button">
@@ -82,7 +98,18 @@
                 Deploy
             </button>
             @else
-            <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
+            <x-modal-confirmation 
+            title="Confirm Service Stopping?"
+            buttonTitle="Stop"
+            submitAction="stop"
+            :checkboxes="$checkboxes"
+            :actions="['This service will be stopped.', 'If the service is currently in use data could be lost.', 'All non-persistent data of this service (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the service again).']"
+            :confirmWithText="false"
+            :confirmWithPassword="false"
+            step2ButtonText="Stop Service"
+            :dispatchEvent="true"
+            dispatchEventType="stopEvent"
+            >
                 <x-slot:button-title>
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -92,10 +119,7 @@
                         </path>
                     </svg>
                     Stop
-                </x-slot:button-title>
-                This service will be stopped. <br>
-                <strong>And all none persitant data will be deleted (Containers, Networks, Unused Images).</strong><br>
-                Please think again.
+                </x-slot:button-title>  
             </x-modal-confirmation>
             <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">