Global.env editor and usage in docker operations (#387)

Co-authored-by: Paco Culebras <69261057+pacoculebras@users.noreply.github.com> Co-authored-by: Paco Culebras <pculebras@me.com> Co-authored-by: Cyril59310 <70776486+cyril59310@users.noreply.github.com> Co-authored-by: Louis Lam <louislam@users.noreply.github.com> Co-authored-by: cmcooper1980 <31871143+cmcooper1980@users.noreply.github.com>
2026-05-21 05:52:18 +00:00 · 2025-12-23 04:41:04 -05:00
parent 98cd537ba8
commit 420c3af66d
10 changed files with 181 additions and 18 deletions
--- a/backend/socket-handlers/main-socket-handler.ts
+++ b/backend/socket-handlers/main-socket-handler.ts
@@ -18,6 +18,8 @@ import {
 import { passwordStrength } from "check-password-strength";
 import jwt from "jsonwebtoken";
 import { Settings } from "../settings";
+import fs, { promises as fsAsync } from "fs";
+import path from "path";

 export class MainSocketHandler extends SocketHandler {
    create(socket : DockgeSocket, server : DockgeServer) {
@@ -242,6 +244,12 @@ export class MainSocketHandler extends SocketHandler {
                checkLogin(socket);
                const data = await Settings.getSettings("general");

+                if (fs.existsSync(path.join(server.stacksDir, "global.env"))) {
+                    data.globalENV = fs.readFileSync(path.join(server.stacksDir, "global.env"), "utf-8");
+                } else {
+                    data.globalENV = "# VARIABLE=value #comment";
+                }
+
                callback({
                    ok: true,
                    data: data,
@@ -270,6 +278,16 @@ export class MainSocketHandler extends SocketHandler {
                if (!currentDisabledAuth && data.disableAuth) {
                    await doubleCheckPassword(socket, currentPassword);
                }
+                // Handle global.env
+                if (data.globalENV && data.globalENV != "# VARIABLE=value #comment") {
+                    await fsAsync.writeFile(path.join(server.stacksDir, "global.env"), data.globalENV);
+                } else {
+                    await fsAsync.rm(path.join(server.stacksDir, "global.env"), {
+                        recursive: true,
+                        force: true
+                    });
+                }
+                delete data.globalENV;

                await Settings.setSettings("general", data);

--- a/backend/stack.ts
+++ b/backend/stack.ts
@@ -93,7 +93,7 @@ export class Stack {
     * Get the status of the stack from `docker compose ps --format json`
     */
    async ps() : Promise<object> {
-        let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
+        let res = await childProcessAsync.spawn("docker", this.getComposeOptions("ps", "--format", "json"), {
            cwd: this.path,
            encoding: "utf-8",
        });
@@ -208,7 +208,7 @@ export class Stack {

    async deploy(socket : DockgeSocket) : Promise<number> {
        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
        if (exitCode !== 0) {
            throw new Error("Failed to deploy, please check the terminal output for more information.");
        }
@@ -217,7 +217,7 @@ export class Stack {

    async delete(socket: DockgeSocket) : Promise<number> {
        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down", "--remove-orphans" ], this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("down", "--remove-orphans"), this.path);
        if (exitCode !== 0) {
            throw new Error("Failed to delete, please check the terminal output for more information.");
        }
@@ -407,9 +407,22 @@ export class Stack {
        return stack;
    }

+    getComposeOptions(command : string, ...extraOptions : string[]) {
+        //--env-file ./../global.env --env-file .env
+        let options = [ "compose", command, ...extraOptions ];
+        if (fs.existsSync(path.join(this.server.stacksDir, "global.env"))) {
+            if (fs.existsSync(path.join(this.path, ".env"))) {
+                options.splice(1, 0, "--env-file", "./.env");
+            }
+            options.splice(1, 0, "--env-file", "../global.env");
+        }
+        console.log(options);
+        return options;
+    }
+
    async start(socket: DockgeSocket) {
        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
        if (exitCode !== 0) {
            throw new Error("Failed to start, please check the terminal output for more information.");
        }
@@ -418,7 +431,7 @@ export class Stack {

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

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

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

    async update(socket: DockgeSocket) {
        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "pull" ], this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("pull"), this.path);
        if (exitCode !== 0) {
            throw new Error("Failed to pull, please check the terminal output for more information.");
        }
@@ -457,7 +470,7 @@ export class Stack {
            return exitCode;
        }

-        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
+        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
        if (exitCode !== 0) {
            throw new Error("Failed to restart, please check the terminal output for more information.");
        }
@@ -466,7 +479,7 @@ export class Stack {

    async joinCombinedTerminal(socket: DockgeSocket) {
        const terminalName = getCombinedTerminalName(socket.endpoint, this.name);
-        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", [ "compose", "logs", "-f", "--tail", "100" ], this.path);
+        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", this.getComposeOptions("logs", "-f", "--tail", "100"), this.path);
        terminal.enableKeepAlive = true;
        terminal.rows = COMBINED_TERMINAL_ROWS;
        terminal.cols = COMBINED_TERMINAL_COLS;
@@ -487,7 +500,7 @@ export class Stack {
        let terminal = Terminal.getTerminal(terminalName);

        if (!terminal) {
-            terminal = new InteractiveTerminal(this.server, terminalName, "docker", [ "compose", "exec", serviceName, shell ], this.path);
+            terminal = new InteractiveTerminal(this.server, terminalName, "docker", this.getComposeOptions("exec", serviceName, shell), this.path);
            terminal.rows = TERMINAL_ROWS;
            log.debug("joinContainerTerminal", "Terminal created");
        }
@@ -497,10 +510,10 @@ export class Stack {
    }

    async getServiceStatusList() {
-        let statusList = new Map<string, number>();
+        let statusList = new Map<string, { state: string, ports: string[] }>();

        try {
-            let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
+            let res = await childProcessAsync.spawn("docker", this.getComposeOptions("ps", "--format", "json"), {
                cwd: this.path,
                encoding: "utf-8",
            });
@@ -514,10 +527,19 @@ export class Stack {
            for (let line of lines) {
                try {
                    let obj = JSON.parse(line);
+                    let ports = (obj.Ports as string).split(/,\s*/).filter((s) => {
+                        return s.indexOf("->") >= 0;
+                    });
                    if (obj.Health === "") {
-                        statusList.set(obj.Service, obj.State);
+                        statusList.set(obj.Service, {
+                            state: obj.State,
+                            ports: ports
+                        });
                    } else {
-                        statusList.set(obj.Service, obj.Health);
+                        statusList.set(obj.Service, {
+                            state: obj.Health,
+                            ports: ports
+                        });
                    }
                } catch (e) {
                }
--- a/common/util-common.ts
+++ b/common/util-common.ts
@@ -299,6 +299,7 @@ function copyYAMLCommentsItems(items: any, srcItems: any) {
 *   - "8000-9000:80"
 *   - "127.0.0.1:8001:8001"
 *   - "127.0.0.1:5000-5010:5000-5010"
+ *   - "0.0.0.0:8080->8080/tcp"
 *   - "6060:6060/udp"
 * @param input
 * @param hostname
@@ -308,9 +309,19 @@ export function parseDockerPort(input : string, hostname : string) {
    let display;

    const parts = input.split("/");
-    const part1 = parts[0];
+    let part1 = parts[0];
    let protocol = parts[1] || "tcp";

+    // coming from docker ps, split host part
+    const arrow = part1.indexOf("->");
+    if (arrow >= 0) {
+        part1 = part1.split("->")[0];
+        const colon = part1.indexOf(":");
+        if (colon >= 0) {
+            part1 = part1.split(":")[1];
+        }
+    }
+
    // Split the last ":"
    const lastColon = part1.lastIndexOf(":");

--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
    Confirm: typeof import('./src/components/Confirm.vue')['default']
    Container: typeof import('./src/components/Container.vue')['default']
    General: typeof import('./src/components/settings/General.vue')['default']
+    GlobalEnv: typeof import('./src/components/settings/GlobalEnv.vue')['default']
    HiddenInput: typeof import('./src/components/HiddenInput.vue')['default']
    Login: typeof import('./src/components/Login.vue')['default']
    NetworkInput: typeof import('./src/components/NetworkInput.vue')['default']
--- a/frontend/src/components/Container.vue
+++ b/frontend/src/components/Container.vue
@@ -9,7 +9,7 @@
                <div v-if="!isEditMode">
                    <span class="badge me-1" :class="bgStyle">{{ status }}</span>

-                    <a v-for="port in envsubstService.ports" :key="port" :href="parsePort(port).url" target="_blank">
+                    <a v-for="port in (ports ?? envsubstService.ports)" :key="port" :href="parsePort(port).url" target="_blank">
                        <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
                    </a>
                </div>
@@ -159,6 +159,10 @@ export default defineComponent({
        status: {
            type: String,
            default: "N/A",
+        },
+        ports: {
+            type: Array,
+            default: null
        }
    },
    emits: [
--- a/frontend/src/components/settings/GlobalEnv.vue
+++ b/frontend/src/components/settings/GlobalEnv.vue
@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div v-if="settingsLoaded" class="my-4">
+            <form class="my-4" autocomplete="off" @submit.prevent="saveGeneral">
+                <div class="shadow-box mb-3 editor-box edit-mode">
+                    <code-mirror
+                        ref="editor"
+                        v-model="settings.globalENV"
+                        :extensions="extensionsEnv"
+                        minimal
+                        wrap="true"
+                        dark="true"
+                        tab="true"
+                        :hasFocus="editorFocus"
+                        @change="onChange"
+                    />
+                </div>
+
+                <div class="my-4">
+                    <!-- Save Button -->
+                    <div>
+                        <button class="btn btn-primary" type="submit">
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import CodeMirror from "vue-codemirror6";
+import { python } from "@codemirror/lang-python"; // good enough for .env key=value highlighting
+import { dracula as editorTheme } from "thememirror";
+import { lineNumbers, EditorView } from "@codemirror/view";
+import { ref } from "vue";
+
+export default {
+    name: "GlobalEnv",
+    components: {
+        CodeMirror,
+    },
+
+    setup() {
+        const editorFocus = ref(false);
+
+        const focusEffectHandler = (state, focusing) => {
+            editorFocus.value = focusing;
+            return null;
+        };
+
+        const extensionsEnv = [
+            editorTheme,
+            python(),
+            lineNumbers(),
+            EditorView.focusChangeEffect.of(focusEffectHandler),
+        ];
+
+        return { editorFocus, extensionsEnv };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    methods: {
+        /** Save the settings */
+        saveGeneral() {
+            this.saveSettings();
+        },
+
+        onChange() {
+            // hook for future live validation if desired
+        },
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.editor-box {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+
+    &.edit-mode {
+        background-color: #2c2f38 !important;
+    }
+}
+</style>
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -114,6 +114,7 @@
    "agentRemovedSuccessfully": "Agent removed successfully.",
    "removeAgent": "Remove Agent",
    "removeAgentMsg": "Are you sure you want to remove this agent?",
+    "GlobalEnv": "Global .env",
    "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor.",
    "Saved": "Saved",
    "Deployed": "Deployed",
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -128,7 +128,8 @@
                            :name="name"
                            :is-edit-mode="isEditMode"
                            :first="name === Object.keys(jsonConfig.services)[0]"
-                            :status="serviceStatusList[name]"
+                            :status="serviceStatusList[name]?.state"
+                            :ports="serviceStatusList[name]?.ports"
                        />
                    </div>

--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -83,6 +83,9 @@ export default {
                security: {
                    title: this.$t("Security"),
                },
+                globalEnv: {
+                    title: this.$t("GlobalEnv"),
+                },
                about: {
                    title: this.$t("About"),
                },
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -14,6 +14,7 @@ const Settings = () => import("./pages/Settings.vue");
 import Appearance from "./components/settings/Appearance.vue";
 import General from "./components/settings/General.vue";
 const Security = () => import("./components/settings/Security.vue");
+const GlobalEnv = () => import("./components/settings/GlobalEnv.vue");
 import About from "./components/settings/About.vue";

 const routes = [
@@ -78,6 +79,10 @@ const routes = [
                                path: "security",
                                component: Security,
                            },
+                            {
+                                path: "globalEnv",
+                                component: GlobalEnv,
+                            },
                            {
                                path: "about",
                                component: About,