wip

README.md

@@ -13,6 +13,7 @@ A fancy, easy-to-use and reactive docker stack (`docker-compose.yml`) manager.
 - Interactive web terminal for containers and any docker commands
 - Reactive - Everything is just responsive. Progress and terminal output are in real-time
 - Easy-to-use & fancy UI - If you love Uptime Kuma's UI, you will love this too
+- Build on top of [Compose V2](https://docs.docker.com/compose/migrate/), as known as `compose.yaml` and `docker compose`
 
 ## Installation
 
@@ -30,4 +31,6 @@ If you love this project, please consider giving this project a ⭐.
 - Container stats
 - Get app icons
 - Switch Docker context
+- Support Dockerfile and build
 - Zero-config private docker registry
+- Support Docker swarm

backend/dockge-server.ts

@@ -26,6 +26,8 @@ import expressStaticGzip from "express-static-gzip";
 import path from "path";
 import { TerminalSocketHandler } from "./socket-handlers/terminal-socket-handler";
 import { Stack } from "./stack";
+import { Cron } from "croner";
+import childProcess from "child_process";
 
 export class DockgeServer {
     app : Express;
@@ -248,6 +250,15 @@ export class DockgeServer {
             } else {
                 log.info("server", `Listening on ${this.config.port}`);
             }
+
+            // Run every 5 seconds
+            const job = Cron("*/2 * * * * *", {
+                protect: true,  // Enabled over-run protection.
+            }, () => {
+                log.debug("server", "Cron job running");
+                this.sendStackList(true);
+            });
+
         });
     }
 
@@ -412,18 +423,40 @@ export class DockgeServer {
         return jwtSecretBean;
     }
 
-    sendStackList(socket : DockgeSocket) {
-        let room = socket.userID.toString();
-        let stackList = Stack.getStackList(this);
-        let list = {};
-
-        for (let stack of stackList) {
-            list[stack.name] = stack.toSimpleJSON();
+    sendStackList(useCache = false) {
+        let stackList = Stack.getStackList(this, useCache);
+        let roomList = this.io.sockets.adapter.rooms.keys();
+        for (let room of roomList) {
+            // Check if the room is a number (user id)
+            if (Number(room)) {
+                this.io.to(room).emit("stackList", {
+                    ok: true,
+                    stackList: Object.fromEntries(stackList),
+                });
+            }
         }
+    }
 
-        this.io.to(room).emit("stackList", {
-            ok: true,
-            stackList: list,
-        });
+    sendStackStatusList() {
+        let statusList = Stack.getStatusList();
+
+        let roomList = this.io.sockets.adapter.rooms.keys();
+
+        for (let room of roomList) {
+            // Check if the room is a number (user id)
+            if (Number(room)) {
+                log.debug("server", "Send stack status list to room " + room);
+                this.io.to(room).emit("stackStatusList", {
+                    ok: true,
+                    stackStatusList: Object.fromEntries(statusList),
+                });
+            } else {
+                log.debug("server", "Skip sending stack status list to room " + room);
+            }
+        }
+    }
+
+    get stackDirFullPath() {
+        return path.resolve(this.stacksDir);
     }
 }

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

@@ -1,18 +1,6 @@
 import { SocketHandler } from "../socket-handler.js";
 import { DockgeServer } from "../dockge-server";
 import { callbackError, checkLogin, DockgeSocket, ValidationError } from "../util-server";
-import { log } from "../log";
-import yaml from "yaml";
-import path from "path";
-import fs from "fs";
-import {
-    allowedCommandList,
-    allowedRawKeys,
-    getComposeTerminalName,
-    isDev,
-    PROGRESS_TERMINAL_ROWS
-} from "../util-common";
-import { Terminal } from "../terminal";
 import { Stack } from "../stack";
 
 export class DockerSocketHandler extends SocketHandler {
@@ -23,6 +11,7 @@ export class DockerSocketHandler extends SocketHandler {
                 checkLogin(socket);
                 const stack = this.saveStack(socket, server, name, composeYAML, isAdd);
                 await stack.deploy(socket);
+                server.sendStackList();
                 callback({
                     ok: true,
                 });
@@ -39,7 +28,33 @@ export class DockerSocketHandler extends SocketHandler {
                     ok: true,
                     "msg": "Saved"
                 });
-                server.sendStackList(socket);
+                server.sendStackList();
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
+
+        socket.on("deleteStack", async (name : unknown, callback) => {
+            try {
+                checkLogin(socket);
+                if (typeof(name) !== "string") {
+                    throw new ValidationError("Name must be a string");
+                }
+                const stack = Stack.getStack(server, name);
+
+                try {
+                    await stack.delete(socket);
+                } catch (e) {
+                    server.sendStackList();
+                    throw e;
+                }
+
+                server.sendStackList();
+                callback({
+                    ok: true,
+                    msg: "Deleted"
+                });
+
             } catch (e) {
                 callbackError(e, callback);
             }

backend/socket-handlers/terminal-socket-handler.ts

@@ -5,8 +5,14 @@ import { log } from "../log";
 import yaml from "yaml";
 import path from "path";
 import fs from "fs";
-import { allowedCommandList, allowedRawKeys, isDev } from "../util-common";
-import { Terminal } from "../terminal";
+import {
+    allowedCommandList,
+    allowedRawKeys,
+    getComposeTerminalName,
+    isDev,
+    PROGRESS_TERMINAL_ROWS
+} from "../util-common";
+import { MainTerminal, Terminal } from "../terminal";
 
 export class TerminalSocketHandler extends SocketHandler {
     create(socket : DockgeSocket, server : DockgeServer) {
@@ -57,12 +63,36 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Create Terminal
-        socket.on("terminalCreate", async (terminalName : unknown, callback : unknown) => {
+        socket.on("mainTerminal", async (terminalName : unknown, callback) => {
+            try {
+                checkLogin(socket);
+                if (typeof(terminalName) !== "string") {
+                    throw new ValidationError("Terminal name must be a string.");
+                }
 
+                log.debug("deployStack", "Terminal name: " + terminalName);
+
+                let terminal = Terminal.getTerminal(terminalName);
+
+                if (!terminal) {
+                    terminal = new MainTerminal(server, terminalName);
+                    terminal.rows = 50;
+                    log.debug("deployStack", "Terminal created");
+                }
+
+                terminal.join(socket);
+                terminal.start();
+
+                callback({
+                    ok: true,
+                });
+            } catch (e) {
+                callbackError(e, callback);
+            }
         });
 
         // Join Terminal
-        socket.on("terminalJoin", async (terminalName : unknown, callback : unknown) => {
+        socket.on("terminalJoin", async (terminalName : unknown, callback) => {
             if (typeof(callback) !== "function") {
                 log.debug("console", "Callback is not a function.");
                 return;

backend/stack.ts

@@ -4,15 +4,28 @@ import { log } from "./log";
 import yaml from "yaml";
 import { DockgeSocket, ValidationError } from "./util-server";
 import path from "path";
-import { getComposeTerminalName, PROGRESS_TERMINAL_ROWS } from "./util-common";
+import {
+    CREATED_FILE,
+    CREATED_STACK,
+    EXITED,
+    getComposeTerminalName,
+    PROGRESS_TERMINAL_ROWS,
+    RUNNING,
+    UNKNOWN
+} from "./util-common";
 import { Terminal } from "./terminal";
+import childProcess from "child_process";
 
 export class Stack {
 
     name: string;
+    protected _status: number = UNKNOWN;
     protected _composeYAML?: string;
+    protected _configFilePath?: string;
     protected server: DockgeServer;
 
+    protected static managedStackList: Map<string, Stack> = new Map();
+
     constructor(server : DockgeServer, name : string, composeYAML? : string) {
         this.name = name;
         this.server = server;
@@ -24,16 +37,30 @@ export class Stack {
         return {
             ...obj,
             composeYAML: this.composeYAML,
+            isManagedByDockge: this.isManagedByDockge,
         };
     }
 
     toSimpleJSON() : object {
         return {
             name: this.name,
+            status: this._status,
             tags: [],
         };
     }
 
+    get isManagedByDockge() : boolean {
+        if (this._configFilePath) {
+            return this._configFilePath.startsWith(this.server.stackDirFullPath) && fs.existsSync(this.path) && fs.statSync(this.path).isDirectory();
+        } else {
+            return false;
+        }
+    }
+
+    get status() : number {
+        return this._status;
+    }
+
     validate() {
         // Check name, allows [a-z][A-Z][0-9] _ - only
         if (!this.name.match(/^[a-zA-Z0-9_-]+$/)) {
@@ -101,7 +128,7 @@ export class Stack {
         fs.writeFileSync(path.join(dir, "compose.yaml"), this.composeYAML);
     }
 
-    async deploy(socket? : DockgeSocket) : Promise<number> {
+    deploy(socket? : DockgeSocket) : Promise<number> {
         const terminalName = getComposeTerminalName(this.name);
         log.debug("deployStack", "Terminal name: " + terminalName);
 
@@ -129,30 +156,138 @@ export class Stack {
         });
     }
 
-    static getStackList(server : DockgeServer) : Stack[] {
-        let stacksDir = server.stacksDir;
-        let stackList : Stack[] = [];
+    delete(socket?: DockgeSocket) : Promise<number> {
+        // Docker compose down
+        const terminalName = getComposeTerminalName(this.name);
+        log.debug("deleteStack", "Terminal name: " + terminalName);
 
-        // Scan the stacks directory, and get the stack list
-        let filenameList = fs.readdirSync(stacksDir);
+        const terminal = new Terminal(this.server, terminalName, "docker-compose", [ "down" ], this.path);
 
-        log.debug("stack", filenameList);
+        terminal.rows = PROGRESS_TERMINAL_ROWS;
 
-        for (let filename of filenameList) {
-            let relativePath = path.join(stacksDir, filename);
-            if (fs.statSync(relativePath).isDirectory()) {
-                let stack = new Stack(server, filename);
-                stackList.push(stack);
-            }
+        if (socket) {
+            terminal.join(socket);
+            log.debug("deployStack", "Terminal joined");
+        } else {
+            log.debug("deployStack", "No socket, not joining");
         }
+
+        return new Promise((resolve, reject) => {
+            terminal.onExit((exitCode : number) => {
+                if (exitCode === 0) {
+                    // Remove the stack folder
+                    try {
+                        fs.rmSync(this.path, {
+                            recursive: true,
+                            force: true
+                        });
+                        resolve(exitCode);
+                    } catch (e) {
+                        reject(e);
+                    }
+                } else {
+                    reject(new Error("Failed to delete, please check the terminal output for more information."));
+                }
+            });
+            terminal.start();
+        });
+
+    }
+
+    static getStackList(server : DockgeServer, useCacheForManaged = false) : Map<string, Stack> {
+        let stacksDir = server.stacksDir;
+        let stackList : Map<string, Stack>;
+
+        if (useCacheForManaged && this.managedStackList.size > 0) {
+            stackList = this.managedStackList;
+        } else {
+            stackList = new Map<string, Stack>();
+
+            // Scan the stacks directory, and get the stack list
+            let filenameList = fs.readdirSync(stacksDir);
+
+            for (let filename of filenameList) {
+                try {
+                    let stack = this.getStack(server, filename);
+                    stack._status = CREATED_FILE;
+                    stackList.set(filename, stack);
+                } catch (e) {
+                    log.warn("getStackList", `Failed to get stack ${filename}, error: ${e.message}`);
+                }
+            }
+
+            // Cache by copying
+            this.managedStackList = new Map(stackList);
+        }
+
+        // Also get the list from `docker compose ls --all --format json`
+        let res = childProcess.execSync("docker compose ls --all --format json");
+        let composeList = JSON.parse(res.toString());
+
+        for (let composeStack of composeList) {
+            let stack = stackList.get(composeStack.Name);
+
+            // This stack probably is not managed by Dockge, but we still want to show it
+            if (!stack) {
+                stack = new Stack(server, composeStack.Name);
+                stackList.set(composeStack.Name, stack);
+            }
+
+            stack._status = this.statusConvert(composeStack.Status);
+            stack._configFilePath = composeStack.ConfigFiles;
+        }
+
         return stackList;
     }
 
+    /**
+     * Get the status list, it will be used to update the status of the stacks
+     * Not all status will be returned, only the stack that is deployed or created to `docker compose` will be returned
+     */
+    static getStatusList() : Map<string, number> {
+        let statusList = new Map<string, number>();
+
+        let res = childProcess.execSync("docker compose ls --all --format json");
+        let composeList = JSON.parse(res.toString());
+
+        for (let composeStack of composeList) {
+            statusList.set(composeStack.Name, this.statusConvert(composeStack.Status));
+        }
+
+        return statusList;
+    }
+
+    static statusConvert(status : string) : number {
+        if (status.startsWith("created")) {
+            return CREATED_STACK;
+        } else if (status.startsWith("running")) {
+            return RUNNING;
+        } else if (status.startsWith("exited")) {
+            return EXITED;
+        } else {
+            return UNKNOWN;
+        }
+    }
+
     static getStack(server: DockgeServer, stackName: string) : Stack {
         let dir = path.join(server.stacksDir, stackName);
-        if (!fs.existsSync(dir)) {
-            throw new ValidationError("Stack not found");
+
+        if (!fs.existsSync(dir) || !fs.statSync(dir).isDirectory()) {
+            // Maybe it is a stack managed by docker compose directly
+            let stackList = this.getStackList(server);
+            let stack = stackList.get(stackName);
+
+            if (stack) {
+                return stack;
+            } else {
+                // Really not found
+                throw new ValidationError("Stack not found");
+            }
         }
-        return new Stack(server, stackName);
+
+        let stack = new Stack(server, stackName);
+        stack._status = UNKNOWN;
+        stack._configFilePath = path.resolve(dir);
+        return stack;
     }
 }

backend/terminal.ts

@@ -47,6 +47,10 @@ export class Terminal {
     }
 
     public start() {
+        if (this._ptyProcess) {
+            return;
+        }
+
         this._ptyProcess = pty.spawn(this.file, this.args, {
             name: this.name,
             cwd: this.cwd,
@@ -139,10 +143,12 @@ export class MainTerminal extends InteractiveTerminal {
     constructor(server : DockgeServer, name : string, cwd : string = "./") {
         let shell;
 
-        if (commandExistsSync("pwsh")) {
-            shell = "pwsh";
-        } else if (os.platform() === "win32") {
-            shell = "powershell.exe";
+        if (os.platform() === "win32") {
+            if (commandExistsSync("pwsh.exe")) {
+                shell = "pwsh.exe";
+            } else {
+                shell = "powershell.exe";
+            }
         } else {
             shell = "bash";
         }

backend/util-common.ts

@@ -1,7 +1,15 @@
-// For loading dayjs plugins, don't remove event though it is not used in this file
+/*
+ * Common utilities for backend and frontend
+ */
+
+// Init dayjs
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
 
 let randomBytes : (numBytes: number) => Uint8Array;
 
@@ -17,6 +25,58 @@ if (typeof window !== "undefined" && window.crypto) {
     randomBytes = (await import("node:crypto")).randomBytes;
 }
 
+// Stack Status
+export const UNKNOWN = 0;
+export const CREATED_FILE = 1;
+export const CREATED_STACK = 2;
+export const RUNNING = 3;
+export const EXITED = 4;
+
+export function statusName(status : number) : string {
+    switch (status) {
+        case CREATED_FILE:
+            return "draft";
+        case CREATED_STACK:
+            return "created_stack";
+        case RUNNING:
+            return "running";
+        case EXITED:
+            return "exited";
+        default:
+            return "unknown";
+    }
+}
+
+export function statusNameShort(status : number) : string {
+    switch (status) {
+        case CREATED_FILE:
+            return "draft";
+        case CREATED_STACK:
+            return "inactive";
+        case RUNNING:
+            return "active";
+        case EXITED:
+            return "inactive";
+        default:
+            return "?";
+    }
+}
+
+export function statusColor(status : number) : string {
+    switch (status) {
+        case CREATED_FILE:
+            return "dark";
+        case CREATED_STACK:
+            return "danger";
+        case RUNNING:
+            return "primary";
+        case EXITED:
+            return "danger";
+        default:
+            return "secondary";
+    }
+}
+
 export const isDev = process.env.NODE_ENV === "development";
 export const TERMINAL_COLS = 80;
 export const TERMINAL_ROWS = 10;
@@ -30,6 +90,7 @@ export const allowedCommandList : string[] = [
     "cd",
     "dir",
 ];
+
 export const allowedRawKeys = [
     "\u0003", // Ctrl + C
 ];

frontend/components.d.ts

@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

frontend/src/components/StackList.vue

@@ -71,6 +71,7 @@
 <script>
 import Confirm from "../components/Confirm.vue";
 import StackListItem from "../components/StackListItem.vue";
+import { CREATED_FILE, CREATED_STACK, EXITED, RUNNING, UNKNOWN } from "../../../backend/util-common";
 
 export default {
     components: {
@@ -154,8 +155,30 @@ export default {
                 return searchTextMatch && activeMatch && tagsMatch;
             });
 
-            // Filter result by active state, weight and alphabetical
             result.sort((m1, m2) => {
+                if (m1.status !== m2.status) {
+                    if (m2.status === RUNNING) {
+                        return 1;
+                    } else if (m1.status === RUNNING) {
+                        return -1;
+                    } else if (m2.status === EXITED) {
+                        return 1;
+                    } else if (m1.status === EXITED) {
+                        return -1;
+                    } else if (m2.status === CREATED_STACK) {
+                        return 1;
+                    } else if (m1.status === CREATED_STACK) {
+                        return -1;
+                    } else if (m2.status === CREATED_FILE) {
+                        return 1;
+                    } else if (m1.status === CREATED_FILE) {
+                        return -1;
+                    } else if (m2.status === UNKNOWN) {
+                        return 1;
+                    } else if (m1.status === UNKNOWN) {
+                        return -1;
+                    }
+                }
                 return m1.name.localeCompare(m2.name);
             });
 

frontend/src/components/StackListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="{ 'dim' : !stack.isManagedByDockge }">
         <div :style="depthMargin">
             <!-- Checkbox -->
             <div v-if="isSelectMode" class="select-input-wrapper">
@@ -16,7 +16,7 @@
                 <div class="row">
                     <div class="col-9 col-md-8 small-padding">
                         <div class="info">
-                            <Uptime :stack="stack" type="24" :pill="true" />
+                            <Uptime :stack="stack" :fixed-width="true" />
                             {{ stackName }}
                         </div>
                         <div v-if="stack.tags.length > 0" class="tags">
@@ -36,7 +36,6 @@ import Uptime from "./Uptime.vue";
 export default {
     components: {
         Uptime
-
     },
     props: {
         /** Stack this represents */
@@ -181,4 +180,8 @@ export default {
     z-index: 15;
 }
 
+.dim {
+    opacity: 0.5;
+}
+
 </style>

frontend/src/components/Terminal.vue

@@ -46,7 +46,7 @@ export default {
             rows: this.rows,
         });
 
-        this.terminal.loadAddon(new WebLinksAddon());
+        //this.terminal.loadAddon(new WebLinksAddon());
 
         // Bind to a div
         this.terminal.open(this.$refs.terminal);

frontend/src/components/Uptime.vue

@@ -1,23 +1,17 @@
 <template>
-    <span :class="className" :title="title">{{ uptime }}</span>
+    <span :class="className">{{ statusName }}</span>
 </template>
 
 <script>
+import { statusColor, statusNameShort } from "../../../backend/util-common";
 
 export default {
     props: {
-        /** Monitor this represents */
-        monitor: {
+        stack: {
             type: Object,
             default: null,
         },
-        /** Type of monitor */
-        type: {
-            type: String,
-            default: null,
-        },
-        /** Is this a pill? */
-        pill: {
+        fixedWidth: {
             type: Boolean,
             default: false,
         },
@@ -25,28 +19,26 @@ export default {
 
     computed: {
         uptime() {
+            return "0.00%";
             return this.$t("notAvailableShort");
         },
 
         color() {
-            return "secondary";
+            return statusColor(this.stack?.status);
+        },
+
+        statusName() {
+            return this.$t(statusNameShort(this.stack?.status));
         },
 
         className() {
-            if (this.pill) {
-                return `badge rounded-pill bg-${this.color}`;
-            }
+            let className = `badge rounded-pill bg-${this.color}`;
 
-            return "";
+            if (this.fixedWidth) {
+                className += " fixed-width";
+            }
+            return className;
         },
-
-        title() {
-            if (this.type === "720") {
-                return `30${this.$t("-day")}`;
-            }
-
-            return `24${this.$t("-hour")}`;
-        }
     },
 };
 </script>
@@ -55,4 +47,8 @@ export default {
 .badge {
     min-width: 62px;
 }
+
+.fixed-width {
+    width: 62px;
+}
 </style>

frontend/src/lang/en.json

@@ -18,5 +18,7 @@
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
-    "notAvailableShort" : "N/A"
+    "notAvailableShort" : "N/A",
+    "deleteStackMsg": "Are you sure you want to delete this stack?",
+    "stackNotManagedByDockgeMsg": "This stack is not managed by Dockge."
 }

frontend/src/main.ts

@@ -3,6 +3,7 @@ import App from "./App.vue";
 import { router } from "./router";
 import { FontAwesomeIcon } from "./icon.js";
 import { i18n } from "./i18n";
+await import("../../backend/util-common");
 
 // Dependencies
 import "bootstrap";
@@ -25,10 +26,6 @@ import socket from "./mixins/socket";
 import lang from "./mixins/lang";
 import theme from "./mixins/theme";
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-
 const app = createApp(rootApp());
 
 app.use(Toast, {

frontend/src/mixins/socket.ts

@@ -203,6 +203,20 @@ export default defineComponent({
                     this.stackList = res.stackList;
                 }
             });
+
+            socket.on("stackStatusList", (res) => {
+                if (res.ok) {
+
+                    console.log(res.stackStatusList);
+
+                    for (let stackName in res.stackStatusList) {
+                        const stackObj = this.stackList[stackName];
+                        if (stackObj) {
+                            stackObj.status = res.stackStatusList[stackName];
+                        }
+                    }
+                }
+            });
         },
 
         /**

frontend/src/pages/Compose.vue

@@ -2,9 +2,9 @@
     <transition name="slide-fade" appear>
         <div>
             <h1 v-if="isAdd" class="mb-3">Compose</h1>
-            <h1 v-else class="mb-3">Stack: {{ stack.name }}</h1>
+            <h1 v-else class="mb-3"><Uptime :stack="globalStack" :pill="true" /> {{ stack.name }}</h1>
 
-            <div class="mb-3">
+            <div v-if="stack.isManagedByDockge" class="mb-3">
                 <div class="btn-group" role="group">
                     <button v-if="isEditMode" class="btn btn-primary" :disabled="processing" @click="deployStack">
                         <font-awesome-icon icon="rocket" class="me-1" />
@@ -18,10 +18,11 @@
 
                     <button v-if="!isEditMode" class="btn btn-normal" :disabled="processing" @click="isEditMode = true">{{ $t("editStack") }}</button>
                     <button v-if="isEditMode && !isAdd" class="btn btn-normal" :disabled="processing" @click="discardStack">{{ $t("discardStack") }}</button>
+                    <button v-if="!isEditMode" class="btn btn-primary" :disabled="processing">{{ $t("updateStack") }}</button>
                     <button v-if="!isEditMode" class="btn btn-primary" :disabled="processing">{{ $t("startStack") }}</button>
                     <button v-if="!isEditMode" class="btn btn-primary " :disabled="processing">{{ $t("restartStack") }}</button>
                     <button v-if="!isEditMode" class="btn btn-danger" :disabled="processing">{{ $t("stopStack") }}</button>
-                    <button v-if="!isEditMode" class="btn btn-danger" :disabled="processing">{{ $t("deleteStack") }}</button>
+                    <button v-if="!isEditMode" class="btn btn-danger" :disabled="processing" @click="showDeleteDialog = !showDeleteDialog">{{ $t("deleteStack") }}</button>
                 </div>
             </div>
 
@@ -33,18 +34,20 @@
                     :allow-input="false"
                     class="mb-3 terminal"
                     :rows="progressTerminalRows"
-                    @has-data="showProgressTerminal = true"
+                    @has-data="showProgressTerminal = true; submitted = true;"
                 ></Terminal>
             </transition>
 
-            <div class="row">
+            <div v-if="stack.isManagedByDockge" class="row">
                 <div class="col">
-                    <h4 class="mb-3">General</h4>
-                    <div class="shadow-box big-padding mb-3">
-                        <!-- Stack Name -->
-                        <div v-if="isAdd" class="mb-3">
-                            <label for="name" class="form-label">{{ $t("stackName") }}</label>
-                            <input id="name" v-model="stack.name" type="text" class="form-control" required>
+                    <div v-if="isAdd">
+                        <h4 class="mb-3">General</h4>
+                        <div class="shadow-box big-padding mb-3">
+                            <!-- Stack Name -->
+                            <div class="mb-3">
+                                <label for="name" class="form-label">{{ $t("stackName") }}</label>
+                                <input id="name" v-model="stack.name" type="text" class="form-control" required>
+                            </div>
                         </div>
                     </div>
 
@@ -58,8 +61,9 @@
                 <div class="col">
                     <h4 class="mb-3">compose.yaml</h4>
 
-                    <div class="shadow-box mb-3">
-                        <prism-editor v-model="stack.composeYAML" class="yaml-editor" :highlight="highlighter" line-numbers :readonly="!isEditMode" @input="yamlCodeChange"></prism-editor>
+                    <!-- YAML editor -->
+                    <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
+                        <prism-editor ref="editor" v-model="stack.composeYAML" class="yaml-editor" :highlight="highlighter" line-numbers :readonly="!isEditMode" @input="yamlCodeChange"></prism-editor>
                     </div>
                     <div class="mb-3">
                         {{ yamlError }}
@@ -75,6 +79,15 @@
                     </div>-->
                 </div>
             </div>
+
+            <div v-if="!stack.isManagedByDockge">
+                {{ $t("stackNotManagedByDockgeMsg") }}
+            </div>
+
+            <!-- Delete Dialog -->
+            <BModal v-model="showDeleteDialog" :okTitle="$t('deleteStack')" okVariant="danger" @ok="deleteDialog">
+                {{ $t("deleteStackMsg") }}
+            </BModal>
         </div>
     </transition>
 </template>
@@ -89,6 +102,7 @@ import "prismjs/themes/prism-tomorrow.css";
 import "vue-prism-editor/dist/prismeditor.min.css";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getComposeTerminalName, PROGRESS_TERMINAL_ROWS } from "../../../backend/util-common";
+import { BModal } from "bootstrap-vue-next";
 
 const template = `version: "3.8"
 services:
@@ -104,6 +118,7 @@ export default {
     components: {
         FontAwesomeIcon,
         PrismEditor,
+        BModal,
     },
     data() {
         return {
@@ -112,15 +127,26 @@ export default {
             processing: true,
             showProgressTerminal: false,
             progressTerminalRows: PROGRESS_TERMINAL_ROWS,
-            stack: {},
+            stack: {
+
+            },
             isEditMode: false,
             submitted: false,
+            showDeleteDialog: false,
         };
     },
     computed: {
         isAdd() {
             return this.$route.path === "/compose" && !this.submitted;
         },
+
+        /**
+         * Get the stack from the global stack list, because it may contain more real-time data like status
+         * @return {*}
+         */
+        globalStack() {
+            return this.$root.stackList[this.stack.name];
+        },
     },
     watch: {
         "stack.composeYAML": {
@@ -139,6 +165,7 @@ export default {
             this.stack = {
                 name: "",
                 composeYAML: template,
+                isManagedByDockge: true,
             };
 
         } else {
@@ -147,11 +174,17 @@ export default {
         }
     },
     methods: {
+        bindTerminal() {
+            // Bind Terminal output
+            const terminalName = getComposeTerminalName(this.stack.name);
+            this.$refs.progressTerminal.bind(terminalName);
+        },
         loadStack() {
             this.$root.getSocket().emit("getStack", this.stack.name, (res) => {
                 if (res.ok) {
                     this.stack = res.stack;
                     this.processing = false;
+                    this.bindTerminal();
                 } else {
                     this.$root.toastRes(res);
                 }
@@ -160,9 +193,7 @@ export default {
         deployStack() {
             this.processing = true;
 
-            // Bind Terminal output
-            const terminalName = getComposeTerminalName(this.stack.name);
-            this.$refs.progressTerminal.bind(terminalName);
+            this.bindTerminal();
 
             this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => {
                 this.processing = false;
@@ -170,8 +201,6 @@ export default {
 
                 if (res.ok) {
                     this.$router.push("/compose/" + this.stack.name);
-                } else {
-                    this.submitted = true;
                 }
             });
         },
@@ -187,6 +216,14 @@ export default {
                 }
             });
         },
+        deleteDialog() {
+            this.$root.getSocket().emit("deleteStack", this.stack.name, (res) => {
+                this.$root.toastRes(res);
+                if (res.ok) {
+                    this.$router.push("/");
+                }
+            });
+        },
 
         discardStack() {
             this.loadStack();
@@ -221,4 +258,8 @@ export default {
 .terminal {
     height: 200px;
 }
+
+.editor-box.edit-mode {
+    background-color: #2c2f38 !important;
+}
 </style>

frontend/src/pages/Console.vue

@@ -9,7 +9,7 @@
                 </p>
             </div>
 
-            <Terminal :allow-input="true" class="terminal"></Terminal>
+            <Terminal ref="terminal" :allow-input="true" class="terminal" :rows="20"></Terminal>
         </div>
     </transition>
 </template>
@@ -20,7 +20,16 @@ export default {
     components: {
     },
     mounted() {
-        this.$root.terminalFit(50);
+        // Bind Terminal Component to Socket.io
+        const terminalName = "console";
+        this.$refs.terminal.bind(terminalName);
+
+        // Create a new Terminal
+        this.$root.getSocket().emit("mainTerminal", terminalName, (res) => {
+            if (!res.ok) {
+                this.$root.toastRes(res);
+            }
+        });
     },
     methods: {
 

package.json

@@ -20,6 +20,7 @@
         "check-password-strength": "~2.0.7",
         "command-exists": "^1.2.9",
         "compare-versions": "~6.1.0",
+        "croner": "^7.0.4",
         "dayjs": "^1.11.10",
         "express": "~4.18.2",
         "express-static-gzip": "~2.1.7",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   compare-versions:
     specifier: ~6.1.0
     version: 6.1.0
+  croner:
+    specifier: ^7.0.4
+    version: 7.0.4
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
@@ -1783,6 +1786,11 @@ packages:
     dev: false
     optional: true
 
+  /croner@7.0.4:
+    resolution: {integrity: sha512-P8Zd88km8oQ0xH8Es0u75GtOnFyCNopuAhlFv5kAnbcTuXd0xNvRTgnxnJEs63FicCOsHTL7rpu4BHzY3cMq4w==}
+    engines: {node: '>=6.0'}
+    dev: false
+
   /cross-env@7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}