Closes #694

backend/agent-socket-handlers/docker-socket-handler.ts

@@ -67,6 +67,25 @@ export class DockerSocketHandler extends AgentSocketHandler {
             }
         });
 
+        agentSocket.on("forceDeleteStack", async (name : unknown, callback) => {
+            try {
+                checkLogin(socket);
+                if (typeof(name) !== "string") {
+                    throw new ValidationError("Name must be a string");
+                }
+                const stack = await Stack.getStack(server, name);
+                await stack.forceDelete(socket);
+                server.sendStackList();
+                callbackResult({
+                    ok: true,
+                    msg: "Deleted",
+                    msgi18n: true,
+                }, callback);
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
+
         agentSocket.on("getStack", async (stackName : unknown, callback) => {
             try {
                 checkLogin(socket);

backend/stack.ts

@@ -219,7 +219,7 @@ export class Stack {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
         let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "down", "--remove-orphans"], this.path);
         if (exitCode !== 0) {
-            throw new Error("Failed to delete, please check the terminal output for more information.");
+            throw new Error(`Failed to delete ${this.name}, please check the terminal output for more information.`);
         }
 
         // Remove the stack folder
@@ -231,6 +231,19 @@ export class Stack {
         return exitCode;
     }
 
+    async forceDelete(socket: DockgeSocket): Promise<number> {
+        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "down", "-v", "--remove-orphans"], this.path);
+
+        // Remove the stack folder
+        await fsAsync.rm(this.path, {
+            recursive: true,
+            force: true
+        });
+
+        return exitCode;
+    }
+
     async updateStatus() {
         let statusList = await Stack.getStatusList();
         let status = statusList.get(this.name);

frontend/src/lang/en.json

@@ -15,6 +15,7 @@
     "stackName": "Stack Name",
     "deployStack": "Deploy",
     "deleteStack": "Delete",
+    "forceDeleteStack": "Force Delete",
     "stopStack": "Stop",
     "restartStack": "Restart",
     "updateStack": "Update",
@@ -25,6 +26,7 @@
     "saveStackDraft": "Save",
     "notAvailableShort": "N/A",
     "deleteStackMsg": "Are you sure you want to delete this stack?",
+    "forceDeleteStackMsg": "Force deleting may leave behind some files or configuration. Are you sure you want to force delete this stack?",
     "stackNotManagedByDockgeMsg": "This stack is not managed by Dockge.",
     "primaryHostname": "Primary Hostname",
     "general": "General",

frontend/src/pages/Compose.vue

@@ -55,10 +55,14 @@
                 </div>
 
                 <button v-if="isEditMode && !isAdd" class="btn btn-normal" :disabled="processing" @click="discardStack">{{ $t("discardStack") }}</button>
-                <button v-if="!isEditMode" class="btn btn-danger" :disabled="processing" @click="showDeleteDialog = !showDeleteDialog">
+                <button v-if="!isEditMode && !errorDelete" class="btn btn-danger" :disabled="processing" @click="showDeleteDialog = !showDeleteDialog">
                     <font-awesome-icon icon="trash" class="me-1" />
                     {{ $t("deleteStack") }}
                 </button>
+                <button v-if="errorDelete" class="btn btn-danger" :disabled="processing" @click="showForceDeleteDialog = !showForceDeleteDialog">
+                    <font-awesome-icon icon="trash" class="me-1" />
+                    {{ $t("forceDeleteStack") }}
+                </button>
             </div>
 
             <!-- URLs -->
@@ -232,6 +236,11 @@
             <BModal v-model="showDeleteDialog" :okTitle="$t('deleteStack')" okVariant="danger" @ok="deleteDialog">
                 {{ $t("deleteStackMsg") }}
             </BModal>
+
+            <!-- Force Delete Dialog -->
+            <BModal v-model="showForceDeleteDialog" :okTitle="$t('forceDeleteStack')" okVariant="danger" @ok="forceDeleteDialog">
+                {{ $t("forceDeleteStackMsg") }}
+            </BModal>
         </div>
     </transition>
 </template>
@@ -307,8 +316,10 @@ export default {
             },
             serviceStatusList: {},
             isEditMode: false,
+            errorDelete: false,
             submitted: false,
             showDeleteDialog: false,
+            showForceDeleteDialog: false,
             newContainerName: "",
             stopServiceStatusTimeout: false,
         };
@@ -647,6 +658,17 @@ export default {
 
         deleteDialog() {
             this.$root.emitAgent(this.endpoint, "deleteStack", this.stack.name, (res) => {
+                this.$root.toastRes(res);
+                if (res.ok) {
+                    this.$router.push("/");
+                } else {
+                    this.errorDelete = true;
+                }
+            });
+        },
+
+        forceDeleteDialog() {
+            this.$root.emitAgent(this.endpoint, "forceDeleteStack", this.stack.name, (res) => {
                 this.$root.toastRes(res);
                 if (res.ok) {
                     this.$router.push("/");