From e95ef66ca1a2043104d579b21267b64d23d40af9 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 21 Nov 2023 18:17:11 +0800
Subject: [PATCH] Add "docker compose down" (#122)

---
 .../socket-handlers/docker-socket-handler.ts  | 21 +++++++++++++++++++
 backend/stack.ts                              |  9 ++++++++
 frontend/components.d.ts                      |  3 +++
 frontend/src/lang/en.json                     |  1 +
 frontend/src/pages/Compose.vue                | 16 ++++++++++++++
 5 files changed, 50 insertions(+)

diff --git a/backend/socket-handlers/docker-socket-handler.ts b/backend/socket-handlers/docker-socket-handler.ts
index e945bef..252d85b 100644
--- a/backend/socket-handlers/docker-socket-handler.ts
+++ b/backend/socket-handlers/docker-socket-handler.ts
@@ -187,6 +187,27 @@ export class DockerSocketHandler extends SocketHandler {
             }
         });
 
+        // down stack
+        socket.on("downStack", async (stackName : unknown, callback) => {
+            try {
+                checkLogin(socket);
+
+                if (typeof(stackName) !== "string") {
+                    throw new ValidationError("Stack name must be a string");
+                }
+
+                const stack = Stack.getStack(server, stackName);
+                await stack.down(socket);
+                callback({
+                    ok: true,
+                    msg: "Downed"
+                });
+                server.sendStackList();
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
+
         // Services status
         socket.on("serviceStatusList", async (stackName : unknown, callback) => {
             try {
diff --git a/backend/stack.ts b/backend/stack.ts
index 922dad8..5674428 100644
--- a/backend/stack.ts
+++ b/backend/stack.ts
@@ -330,6 +330,15 @@ export class Stack {
         return exitCode;
     }
 
+    async down(socket: DockgeSocket) : Promise<number> {
+        const terminalName = getComposeTerminalName(this.name);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down" ], this.path);
+        if (exitCode !== 0) {
+            throw new Error("Failed to down, please check the terminal output for more information.");
+        }
+        return exitCode;
+    }
+
     async update(socket: DockgeSocket) {
         const terminalName = getComposeTerminalName(this.name);
         let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "pull" ], this.path);
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index bafec4c..783d772 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,6 +11,9 @@ declare module 'vue' {
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 57b19cc..e63df08 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -19,6 +19,7 @@
     "restartStack": "Restart",
     "updateStack": "Update",
     "startStack": "Start",
+    "downStack": "Stop & Down",
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index d82a630..afcab69 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -40,6 +40,13 @@
                         <font-awesome-icon icon="stop" class="me-1" />
                         {{ $t("stopStack") }}
                     </button>
+
+                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
+                        <BDropdownItem @click="downStack">
+                            <font-awesome-icon icon="stop" class="me-1" />
+                            {{ $t("downStack") }}
+                        </BDropdownItem>
+                    </BDropdown>
                 </div>
 
                 <button v-if="isEditMode && !isAdd" class="btn btn-normal" :disabled="processing" @click="discardStack">{{ $t("discardStack") }}</button>
@@ -473,6 +480,15 @@ export default {
             });
         },
 
+        downStack() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("downStack", this.stack.name, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+            });
+        },
+
         restartStack() {
             this.processing = true;