WIP

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

@@ -189,6 +189,28 @@ export class DockerSocketHandler extends SocketHandler {
             }
         });
 
+        // rolloutStack
+        socket.on("rolloutStack", 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.rollout(socket);
+                callback({
+                    ok: true,
+                    msg: "Rolled out"
+                });
+                server.sendStackList();
+                stack.joinCombinedTerminal(socket);
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
+
         // down stack
         socket.on("downStack", async (stackName : unknown, callback) => {
             try {

backend/stack.ts

@@ -323,6 +323,21 @@ export class Stack {
         return exitCode;
     }
 
+    async rollout(socket: DockgeSocket) {
+        let terminalName = getComposeTerminalName(this.name);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "pull" ], this.path);
+        if (exitCode !== 0) {
+            throw new Error("Failed to pull, please check the terminal output for more information.");
+        }
+
+        terminalName = getComposeTerminalName(this.name);
+        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "rollout", this.name ], this.path);
+        if (exitCode !== 0) {
+            throw new Error("Failed to rollout, please check the terminal output for more information.");
+        }
+        return exitCode;
+    }
+
     async stop(socket: DockgeSocket) : Promise<number> {
         const terminalName = getComposeTerminalName(this.name);
         let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop" ], this.path);

backend/terminal.ts

@@ -5,6 +5,8 @@ import { LimitQueue } from "./utils/limit-queue";
 import { DockgeSocket } from "./util-server";
 import {
     allowedCommandList, allowedRawKeys,
+    getComposeTerminalName,
+    getCryptoRandomInt,
     PROGRESS_TERMINAL_ROWS,
     TERMINAL_COLS,
     TERMINAL_ROWS
@@ -205,20 +207,14 @@ export class Terminal {
     }
 
     public static exec(server : DockgeServer, socket : DockgeSocket | undefined, terminalName : string, file : string, args : string | string[], cwd : string) : Promise<number> {
-        return new Promise((resolve, reject) => {
+        const terminal = new Terminal(server, terminalName, file, args, cwd);
-            // check if terminal exists
+        terminal.rows = PROGRESS_TERMINAL_ROWS;
-            if (Terminal.terminalMap.has(terminalName)) {
-                reject("Another operation is already running, please try again later.");
-                return;
-            }
 
-            let terminal = new Terminal(server, terminalName, file, args, cwd);
+        if (socket) {
-            terminal.rows = PROGRESS_TERMINAL_ROWS;
+            terminal.join(socket);
-
+        }
-            if (socket) {
-                terminal.join(socket);
-            }
 
+        return new Promise((resolve) => {
             terminal.onExit((exitCode : number) => {
                 resolve(exitCode);
             });

docker/Base.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.17.1-bookworm-slim
+FROM node:20-bookworm-slim
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
@@ -24,3 +24,9 @@ RUN apt update && apt install --yes --no-install-recommends \
     && rm -rf /var/lib/apt/lists/* \
     && npm install pnpm -g \
     && pnpm install -g tsx
+
+# Install docker rollout plugin \
+RUN mkdir -p ~/.docker/cli-plugins \
+    && curl https://raw.githubusercontent.com/wowu/docker-rollout/master/docker-rollout -o ~/.docker/cli-plugins/docker-rollout \
+    && chmod +x ~/.docker/cli-plugins/docker-rollout \
+    && docker rollout --help

frontend/src/components/ArrayInput.vue

@@ -30,10 +30,6 @@ export default {
         displayName: {
             type: String,
             required: true,
-        },
-        objectType: {
-            type: String,
-            default: "service",
         }
     },
     data() {
@@ -45,7 +41,8 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                return [];
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                this.service[this.name] = [];
             }
             return this.service[this.name];
         },
@@ -59,24 +56,8 @@ export default {
             return this.service[this.name] !== undefined;
         },
 
-        /**
-         * Not a good name, but it is used to get the object.
-         */
         service() {
-            if (this.objectType === "service") {
+            return this.$parent.$parent.service;
-                // Used in Container.vue
-                return this.$parent.$parent.service;
-            } else if (this.objectType === "x-dockge") {
-
-                if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
-                    return {};
-                }
-
-                // Used in Compose.vue
-                return this.$parent.$parent.jsonConfig["x-dockge"];
-            } else {
-                return {};
-            }
         },
 
         valid() {
@@ -100,19 +81,6 @@ export default {
     },
     methods: {
         addField() {
-
-            // Create the object if not exists.
-            if (this.objectType === "x-dockge") {
-                if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
-                    this.$parent.$parent.jsonConfig["x-dockge"] = {};
-                }
-            }
-
-            // Create the array if not exists.
-            if (!this.service[this.name]) {
-                this.service[this.name] = [];
-            }
-
             this.array.push("");
         },
         remove(index) {

frontend/src/components/ArraySelect.vue

@@ -49,7 +49,8 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                return [];
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                this.service[this.name] = [];
             }
             return this.service[this.name];
         },
@@ -88,10 +89,6 @@ export default {
     },
     methods: {
         addField() {
-            // Create the array if not exists.
-            if (!this.service[this.name]) {
-                this.service[this.name] = [];
-            }
             this.array.push("");
         },
         remove(index) {

frontend/src/icon.ts

@@ -54,6 +54,7 @@ import {
     faTerminal, faWarehouse, faHome, faRocket,
     faRotate,
     faCloudArrowDown, faArrowsRotate,
+    faPaintRoller,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -109,6 +110,7 @@ library.add(
     faRotate,
     faCloudArrowDown,
     faArrowsRotate,
+    faPaintRoller,
 );
 
 export { FontAwesomeIcon };

frontend/src/lang/README.md

@@ -2,18 +2,13 @@
 
 A simple guide on how to translate `Dockge` in your native language.
 
-## How to Translate
-
-(11-26-2023) Updated
-
-1. Go to <https://weblate.kuma.pet>
-2. Register an account on Weblate
-3. Make sure your GitHub email is matched with Weblate's account, so that it could show you as a contributor on GitHub
-4. Choose your language on Weblate and start translating.
-
 ## How to add a new language in the dropdown
 
-1. Add your Language at <https://weblate.kuma.pet/projects/dockge/dockge/>.
+(11-21-2023) Updated
-2. Find the language code (You can find it at the end of the URL)
+
+1. Add your Language at `frontend/src/lang/` by creating a new file with your language Code, format: `zh-TW.json` .
+2. Copy the content from `en.json` and make translations from that.
 3. Add your language at the end of `languageList` in `frontend/src/i18n.ts`, format: `"zh-TW": "繁體中文 (台灣)"`,
 4. Commit to new branch and make a new Pull Request for me to approve.
+
+*Note:* Currently we are only accepting one Pull Request per Language Translate.

frontend/src/lang/en.json

@@ -20,6 +20,7 @@
     "updateStack": "Update",
     "startStack": "Start",
     "downStack": "Stop & Down",
+    "rolloutStack": "Rollout Update (Zero Downtime)",
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
@@ -91,12 +92,5 @@
     "Allowed commands:": "Allowed commands:",
     "Internal Networks": "Internal Networks",
     "External Networks": "External Networks",
-    "No External Networks": "No External Networks",
+    "No External Networks": "No External Networks"
-    "reverseProxyMsg1": "Using a Reverse Proxy?",
-    "reverseProxyMsg2": "Check how to config it for WebSocket",
-    "Cannot connect to the socket server.": "Cannot connect to the socket server.",
-    "reconnecting...": "Reconnecting...",
-    "connecting...": "Connecting to the socket server...",
-    "url": "URL | URLs",
-    "extra": "Extra"
 }

frontend/src/lang/ur.json

@@ -12,7 +12,7 @@
     "registry": "رجسٹری",
     "compose": "تحریر",
     "addFirstStackMsg": "اپنا پہلا اسٹیک کمپوز کریں!",
-    "stackName": "اسٹیک کا نام",
+    "stackName" : "اسٹیک کا نام",
     "deployStack": "تعینات",
     "deleteStack": "حذف کریں",
     "stopStack": "روکو",
@@ -22,7 +22,7 @@
     "editStack": "ترمیم",
     "discardStack": "رد کر دیں۔",
     "saveStackDraft": "محفوظ کریں۔",
-    "notAvailableShort": "N / A",
+    "notAvailableShort" : "N / A",
     "deleteStackMsg": "کیا آپ واقعی اس اسٹیک کو حذف کرنا چاہتے ہیں؟",
     "stackNotManagedByDockgeMsg": "یہ اسٹیک Dockge کے زیر انتظام نہیں ہے۔",
     "primaryHostname": "بنیادی میزبان نام",
@@ -90,13 +90,5 @@
     "Allowed commands:": "اجازت شدہ احکامات:",
     "Internal Networks": "اندرونی نیٹ ورکس",
     "External Networks": "بیرونی نیٹ ورکس",
-    "No External Networks": "کوئی بیرونی نیٹ ورک نہیں",
+    "No External Networks": "کوئی بیرونی نیٹ ورک نہیں"
-    "reverseProxyMsg1": "ایک ریورس پراکسی کا استعمال کرتے ہوئے؟",
-    "Cannot connect to the socket server.": "ساکٹ سرور سے منسلک نہیں ہو سکتا۔",
-    "reconnecting...": "دوبارہ منسلک ہو رہا ہے...",
-    "connecting...": "ساکٹ سرور سے منسلک ہو رہا ہے...",
-    "url": "یو آر ایل | یو آر ایل",
-    "extra": "اضافی",
-    "downStack": "اسٹاپ اینڈ ڈاؤن",
-    "reverseProxyMsg2": "اسے WebSocket کے لیے ترتیب دینے کا طریقہ چیک کریں"
 }

frontend/src/lang/zh-CN.json

@@ -12,7 +12,7 @@
     "registry": "镜像仓库",
     "compose": "Compose",
     "addFirstStackMsg": "组合你的第一个堆栈！",
-    "stackName": "堆栈名称",
+    "stackName" : "堆栈名称",
     "deployStack": "部署",
     "deleteStack": "删除",
     "stopStack": "停止",
@@ -22,7 +22,7 @@
     "editStack": "编辑",
     "discardStack": "放弃",
     "saveStackDraft": "保存",
-    "notAvailableShort": "不可用",
+    "notAvailableShort" : "不可用",
     "deleteStackMsg": "你确定要删除这个堆栈吗?",
     "stackNotManagedByDockgeMsg": "这个堆栈不由Dockge管理",
     "primaryHostname": "主机名",
@@ -90,10 +90,5 @@
     "Allowed commands:": "允许使用的指令:",
     "Internal Networks": "内部网络",
     "External Networks": "外部网络",
-    "No External Networks": "无外部网络",
+    "No External Networks": "无外部网络"
-    "reconnecting...": "重连中...",
-    "reverseProxyMsg2": "检查如何配置WebSocket",
-    "reverseProxyMsg1": "正在使用反向代理？",
-    "connecting...": "正在连接到socket服务器...",
-    "Cannot connect to the socket server.": "无法连接到socket服务器。"
 }

frontend/src/layouts/Layout.vue

@@ -3,9 +3,6 @@
         <div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.socketIO.connectionErrorMsg }}
-                <div v-if="$root.socketIO.showReverseProxyGuide">
-                    {{ $t("reverseProxyMsg1") }} <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">{{ $t("reverseProxyMsg2") }}</a>
-                </div>
             </div>
         </div>
 
@@ -85,10 +82,6 @@
         </header>
 
         <main>
-            <div v-if="$root.socketIO.connecting" class="container mt-5">
-                <h4>{{ $t("connecting...") }}</h4>
-            </div>
-
             <router-view v-if="$root.loggedIn" />
             <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
         </main>

frontend/src/mixins/socket.ts

@@ -19,7 +19,6 @@ export default defineComponent({
                 initedSocketIO: false,
                 connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
                 showReverseProxyGuide: true,
-                connecting: false,
             },
             info: {
 
@@ -104,10 +103,6 @@ export default defineComponent({
                 url = location.protocol + "//" + location.host;
             }
 
-            let connectingMsgTimeout = setTimeout(() => {
-                this.socketIO.connecting = true;
-            }, 1500);
-
             socket = io(url, {
                 transports: [ "websocket", "polling" ]
             });
@@ -115,9 +110,6 @@ export default defineComponent({
             socket.on("connect", () => {
                 console.log("Connected to the socket server");
 
-                clearTimeout(connectingMsgTimeout);
-                this.socketIO.connecting = false;
-
                 this.socketIO.connectCount++;
                 this.socketIO.connected = true;
                 this.socketIO.showReverseProxyGuide = false;
@@ -151,11 +143,10 @@ export default defineComponent({
 
             socket.on("connect_error", (err) => {
                 console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("reconnecting...")}`;
+                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("Reconnecting...")}`;
                 this.socketIO.showReverseProxyGuide = true;
                 this.socketIO.connected = false;
                 this.socketIO.firstConnect = false;
-                this.socketIO.connecting = false;
             });
 
             // Custom Events

frontend/src/pages/Compose.vue

@@ -41,11 +41,15 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown right text="" variant="normal">
+                    <BDropdown v-if="!isEditMode || active" right text="" variant="normal">
-                        <BDropdownItem @click="downStack">
+                        <BDropdownItem v-if="!isEditMode" @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}
                         </BDropdownItem>
+                        <BDropdownItem v-if="active" @click="rolloutStack">
+                            <font-awesome-icon icon="paint-roller" class="me-1" />
+                            {{ $t("rolloutStack") }} <span class="badge bg-info">Beta</span>
+                        </BDropdownItem>
                     </BDropdown>
                 </div>
 
@@ -56,13 +60,6 @@
                 </button>
             </div>
 
-            <!-- URLs -->
-            <div v-if="urls.length > 0" class="mb-3">
-                <a v-for="(url, index) in urls" :key="index" target="_blank" :href="url.url">
-                    <span class="badge bg-secondary me-2">{{ url.display }}</span>
-                </a>
-            </div>
-
             <!-- Progress Terminal -->
             <transition name="slide-fade" appear>
                 <Terminal
@@ -118,20 +115,6 @@
 
                     <button v-if="false && isEditMode && jsonConfig.services && Object.keys(jsonConfig.services).length > 0" class="btn btn-normal mb-3" @click="addContainer">{{ $t("addContainer") }}</button>
 
-                    <!-- General -->
-                    <div v-if="isEditMode">
-                        <h4 class="mb-3">{{ $t("extra") }}</h4>
-                        <div class="shadow-box big-padding mb-3">
-                            <!-- URLs -->
-                            <div class="mb-4">
-                                <label class="form-label">
-                                    {{ $tc("url", 2) }}
-                                </label>
-                                <ArrayInput name="urls" :display-name="$t('url')" placeholder="https://" object-type="x-dockge" />
-                            </div>
-                        </div>
-                    </div>
-
                     <!-- Combined Terminal Output -->
                     <div v-show="!isEditMode">
                         <h4 class="mb-3">Terminal</h4>
@@ -273,34 +256,6 @@ export default {
         };
     },
     computed: {
-
-        urls() {
-            if (!this.jsonConfig["x-dockge"] || !this.jsonConfig["x-dockge"].urls || !Array.isArray(this.jsonConfig["x-dockge"].urls)) {
-                return [];
-            }
-
-            let urls = [];
-            for (const url of this.jsonConfig["x-dockge"].urls) {
-                let display;
-                try {
-                    let obj = new URL(url);
-                    let pathname = obj.pathname;
-                    if (pathname === "/") {
-                        pathname = "";
-                    }
-                    display = obj.host + pathname + obj.search;
-                } catch (e) {
-                    display = url;
-                }
-
-                urls.push({
-                    display,
-                    url,
-                });
-            }
-            return urls;
-        },
-
         isAdd() {
             return this.$route.path === "/compose" && !this.submitted;
         },
@@ -535,6 +490,15 @@ export default {
             });
         },
 
+        rolloutStack() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("rolloutStack", this.stack.name, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+            });
+        },
+
         downStack() {
             this.processing = true;
 

package.json

@@ -1,10 +1,7 @@
 {
     "name": "dockge",
-    "version": "1.2.0",
+    "version": "1.1.1",
     "type": "module",
-    "engines": {
-        "node": ">= 18.0.0 && <= 18.17.1"
-    },
     "scripts": {
         "fmt": "eslint \"**/*.{ts,vue}\" --fix",
         "lint": "eslint \"**/*.{ts,vue}\"",