WIP

* Create prevent-file-change.yml

* fix

.github/workflows/prevent-file-change.yml

@@ -0,0 +1,16 @@
+name: Prevent File Change
+
+on:
+  pull_request:
+
+jobs:
+  check-file-changes:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Prevent file change
+        uses: xalvarez/prevent-file-change-action@v1
+        with:
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          # Regex, /src/lang/*.json is not allowed to be changed, except for /src/lang/en.json
+          pattern: '^(?!frontend/src/lang/en\.json$)frontend/src/lang/.*\.json$'
+          trustedAuthors: UptimeKumaBot

CONTRIBUTING.md

@@ -7,13 +7,15 @@ Here are some references:
 ### ✅ Usually accepted:
 - Bug fix
 - Security fix
-- Translation
+- Adding new language files (see [these instructions](https://github.com/louislam/dockge/blob/master/frontend/src/lang/README.md))
+- Adding new language keys: `$t("...")`
 
 ### ⚠️ Discussion required:
 - Large pull requests
 - New features
 
 ### ❌ Won't be merged:
+- A dedicated PR for translating existing languages (see [these instructions](https://github.com/louislam/dockge/blob/master/frontend/src/lang/README.md))
 - Do not pass the auto-test
 - Any breaking changes
 - Duplicated pull requests

README.md

@@ -48,14 +48,14 @@ Requirements:
 - Default Port: 5001
 
 ```
-# Create a directory that stores your stacks and stores dockge's compose.yaml
+# Create directories that store your stacks and stores Dockge's stack
 mkdir -p /opt/stacks /opt/dockge
 cd /opt/dockge
 
 # Download the compose.yaml
 curl https://raw.githubusercontent.com/louislam/dockge/master/compose.yaml --output compose.yaml
 
-# Start the Server
+# Start the server
 docker compose up -d
 
 # If you are using docker-compose V1 or Podman
@@ -66,40 +66,27 @@ Dockge is now running on http://localhost:5001
 
 ### Advanced
 
-If you want to store your stacks in another directory, you can change the `DOCKGE_STACKS_DIR` environment variable and volumes.
+If you want to store your stacks in another directory, you can generate your compose.yaml file by using the following URL with custom query strings.
 
-```yaml
-version: "3.8"
-services:
-  dockge:
-    image: louislam/dockge:1
-    restart: unless-stopped
-    ports:
-      # Host Port : Container Port
-      - 5001:5001
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-      - ./data:/app/data
-        
-      # If you want to use private registries, you need to share the auth file with Dockge:
-      # - /root/.docker/:/root/.docker
-
-      # Your stacks directory in the host (The paths inside container must be the same as the host)
-      # ⚠️⚠️ If you did it wrong, your data could end up be written into a wrong path.
-      # ✔️✔️✔️✔️ CORRECT: - /my-stacks:/my-stacks (Both paths match)
-      # ❌❌❌❌ WRONG: - /docker:/my-stacks (Both paths do not match)
-      - /opt/stacks:/opt/stacks
-    environment:
-      # Tell Dockge where is your stacks directory
-      - DOCKGE_STACKS_DIR=/opt/stacks
 ```
+# Download your compose.yaml
+curl "https://dockge.kuma.pet/compose.yaml?port=5001&stacksPath=/opt/stacks" --output compose.yaml
+```
+
+- port=`5001`
+- stacksPath=`/opt/stacks`
+
+Interactive compose.yaml generator is available on: 
+https://dockge.kuma.pet
+
+You can also view compose.yaml here: 
+https://github.com/louislam/dockge/blob/master/compose.yaml
 
 ## How to Update
 
 ```bash
 cd /opt/dockge
-docker compose pull
-docker compose up -d
+docker compose pull && docker compose up -d
 ```
 
 ## Screenshots

backend/terminal.ts

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

docker/Base.Dockerfile

@@ -1,9 +1,7 @@
-FROM node:20-bookworm-slim
+# Due to the bug of #145, Node.js's version cannot be changed, unless upstream is fixed.
+FROM node:18.17.1-bookworm-slim
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-
-# COPY --from=docker:dind /usr/local/bin/docker /usr/local/bin/
-
 RUN apt update && apt install --yes --no-install-recommends \
     curl \
     ca-certificates \
@@ -24,16 +22,3 @@ RUN apt update && apt install --yes --no-install-recommends \
     && rm -rf /var/lib/apt/lists/* \
     && npm install pnpm -g \
     && pnpm install -g tsx
-
-# ensures that /var/run/docker.sock exists
-# changes the ownership of /var/run/docker.sock
-RUN touch /var/run/docker.sock && chown node:node /var/run/docker.sock
-
-# Full Base Image
-# MariaDB, Chromium and fonts
-#FROM base-slim AS base
-#ENV DOCKGE_ENABLE_EMBEDDED_MARIADB=1
-#RUN apt update && \
-#   apt --yes --no-install-recommends install mariadb-server && \
-#   rm -rf /var/lib/apt/lists/* && \
-#   apt --yes autoremove

docker/BuildHealthCheck.Dockerfile

@@ -0,0 +1,10 @@
+############################################
+# Build in Golang
+############################################
+FROM golang:1.21.4-bookworm
+WORKDIR /app
+ARG TARGETPLATFORM
+COPY ./extra/healthcheck.go ./extra/healthcheck.go
+
+# Compile healthcheck.go
+RUN go build -x -o ./extra/healthcheck ./extra/healthcheck.go

docker/Dockerfile

@@ -1,3 +1,8 @@
+############################################
+# Healthcheck Binary
+############################################
+FROM louislam/dockge:build-healthcheck AS build_healthcheck
+
 ############################################
 # Build
 ############################################
@@ -12,16 +17,17 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-l
 ############################################
 FROM louislam/dockge:base AS release
 WORKDIR /app
-COPY --chown=node:node  . .
+COPY --chown=node:node --from=build_healthcheck /app/extra/healthcheck /app/extra/healthcheck
 COPY --from=build /app/node_modules /app/node_modules
+COPY --chown=node:node  . .
 RUN mkdir ./data
 
 VOLUME /app/data
 EXPOSE 5001
+HEALTHCHECK --interval=60s --timeout=30s --start-period=60s --retries=5 CMD extra/healthcheck
 ENTRYPOINT ["/usr/bin/dumb-init", "--"]
 CMD ["tsx", "./backend/index.ts"]
 
-
 ############################################
 # Mark as Nightly
 ############################################

extra/healthcheck.go

@@ -0,0 +1,74 @@
+/*
+ * If changed, have to run `npm run build-docker-builder-go`.
+ * This script should be run after a period of time (180s), because the server may need some time to prepare.
+ */
+package main
+
+import (
+	"crypto/tls"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"os"
+	"strings"
+	"time"
+)
+
+func main() {
+	// Is K8S + "dockge" as the container name
+	// See https://github.com/louislam/uptime-kuma/pull/2083
+	isK8s := strings.HasPrefix(os.Getenv("DOCKGE_PORT"), "tcp://")
+
+	// process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+	http.DefaultTransport.(*http.Transport).TLSClientConfig = &tls.Config{
+		InsecureSkipVerify: true,
+	}
+
+	client := http.Client{
+		Timeout: 28 * time.Second,
+	}
+
+	sslKey := os.Getenv("DOCKGE_SSL_KEY")
+	sslCert := os.Getenv("DOCKGE_SSL_CERT")
+
+	hostname := os.Getenv("DOCKGE_HOST")
+	if len(hostname) == 0 {
+		hostname = "127.0.0.1"
+	}
+
+	port := ""
+	// DOCKGE_PORT is override by K8S unexpectedly,
+	if !isK8s {
+		port = os.Getenv("DOCKGE_PORT")
+	}
+	if len(port) == 0 {
+		port = "5001"
+	}
+
+	protocol := ""
+	if len(sslKey) != 0 && len(sslCert) != 0 {
+		protocol = "https"
+	} else {
+		protocol = "http"
+	}
+
+	url := protocol + "://" + hostname + ":" + port
+
+	log.Println("Checking " + url)
+	resp, err := client.Get(url)
+
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	defer resp.Body.Close()
+
+	_, err = ioutil.ReadAll(resp.Body)
+
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	log.Printf("Health Check OK [Res Code: %d]\n", resp.StatusCode)
+
+}

frontend/src/components/ArrayInput.vue

@@ -30,6 +30,10 @@ export default {
         displayName: {
             type: String,
             required: true,
+        },
+        objectType: {
+            type: String,
+            default: "service",
         }
     },
     data() {
@@ -41,8 +45,7 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-                this.service[this.name] = [];
+                return [];
             }
             return this.service[this.name];
         },
@@ -56,8 +59,24 @@ export default {
             return this.service[this.name] !== undefined;
         },
 
+        /**
+         * Not a good name, but it is used to get the object.
+         */
         service() {
-            return this.$parent.$parent.service;
+            if (this.objectType === "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() {
@@ -81,6 +100,19 @@ 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,8 +49,7 @@ export default {
         array() {
             // Create the array if not exists, it should be safe.
             if (!this.service[this.name]) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-                this.service[this.name] = [];
+                return [];
             }
             return this.service[this.name];
         },
@@ -89,6 +88,10 @@ 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/lang/README.md

@@ -2,13 +2,18 @@
 
 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
 
-(11-21-2023) Updated
-
-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.
+1. Add your Language at <https://weblate.kuma.pet/projects/dockge/dockge/>.
+2. Find the language code (You can find it at the end of the URL)
 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

@@ -91,5 +91,12 @@
     "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,5 +90,13 @@
     "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,5 +90,10 @@
     "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,6 +3,9 @@
         <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>
 
@@ -82,6 +85,10 @@
         </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,6 +19,7 @@ export default defineComponent({
                 initedSocketIO: false,
                 connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
                 showReverseProxyGuide: true,
+                connecting: false,
             },
             info: {
 
@@ -103,6 +104,10 @@ export default defineComponent({
                 url = location.protocol + "//" + location.host;
             }
 
+            let connectingMsgTimeout = setTimeout(() => {
+                this.socketIO.connecting = true;
+            }, 1500);
+
             socket = io(url, {
                 transports: [ "websocket", "polling" ]
             });
@@ -110,6 +115,9 @@ 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;
@@ -143,10 +151,11 @@ 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,7 +41,7 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
+                    <BDropdown right text="" variant="normal">
                         <BDropdownItem @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}
@@ -56,6 +56,13 @@
                 </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
@@ -111,6 +118,20 @@
 
                     <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>
@@ -252,6 +273,34 @@ 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;
         },

package.json

@@ -1,7 +1,10 @@
 {
     "name": "dockge",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "type": "module",
+    "engines": {
+        "node": ">= 18.0.0 && <= 18.17.1"
+    },
     "scripts": {
         "fmt": "eslint \"**/*.{ts,vue}\" --fix",
         "lint": "eslint \"**/*.{ts,vue}\"",
@@ -14,6 +17,7 @@
         "build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:base -f ./docker/Base.Dockerfile . --push",
         "build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
         "build:docker-nightly": "pnpm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
+        "build:healthcheck": "docker buildx build -f docker/BuildHealthCheck.Dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:build-healthcheck . --push",
         "start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",
         "mark-as-nightly": "tsx ./extra/mark-as-nightly.ts",
         "reformat-changelog": "tsx ./extra/reformat-changelog.ts"