Build frontend during docker build (#894)

Co-authored-by: Jamie Scott <jamie@jami.org.uk>

.dockerignore

@@ -9,9 +9,9 @@ tmp
 
 # Docker extra
 docker
-frontend
 .editorconfig
 .eslintrc.cjs
 .git
 .gitignore
-README.md
+.github
+*.md

.github/workflows/nightly-release.yml

@@ -1,52 +0,0 @@
-name: Nightly Release
-
-on:
-  schedule:
-    # Runs at 2:00 AM UTC every day
-    - cron: "0 2 * * *"
-  workflow_dispatch:  # Allow manual trigger
-
-permissions: {}
-
-jobs:
-  release-nightly:
-    runs-on: ubuntu-latest
-    timeout-minutes: 120
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GHCR_TOKEN }}
-
-      - name: Use Node.js 22
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - name: Install dependencies
-        run: npm clean-install --no-fund
-
-      - name: Run release-nightly
-        run: npm run release-nightly

README.md

@@ -81,52 +81,9 @@ curl "https://dockge.kuma.pet/compose.yaml?port=5001&stacksPath=/opt/stacks" --o
 - port=`5001`
 - stacksPath=`/opt/stacks`
 
-Also, once compose is generated/downloaded, add the `PUID` and `PGID` section below to your compose `environment:` section to set stack ownership, otherwise default is `root`
-
-```
-      # Both PUID and PGID must be set for it to do anything
-      - PUID=1000 # Set the stack file/dir ownership to this user
-      - PGID=1000 # Set the stack file/dir ownership to this group
-```
-
 Interactive compose.yaml generator is available on: 
 https://dockge.kuma.pet
 
-### -OR-
-Copy and paste your compose from the following:
-
-If you want to store your stacks in another directory, you can change the `DOCKGE_STACKS_DIR` environment variable and volumes.
-
-compose:
-```
-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
-
-      # Stacks Directory
-      # 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 EXAMPLE: - /my-stacks:/my-stacks (Both paths match)
-      # ❌ WRONG EXAMPLE: - /docker:/my-stacks (Both paths do not match)
-      - /opt/stacks:/opt/stacks
-    environment:
-      # Tell Dockge where your stacks directory is
-      - DOCKGE_STACKS_DIR=/opt/stacks
-      # Both PUID and PGID must be set for it to do anything
-      - PUID=1000 # Set the stack file/dir ownership to this user
-      - PGID=1000 # Set the stack file/dir ownership to this group
-```
-
 ## How to Update
 
 ```bash

backend/agent-manager.ts

@@ -76,14 +76,12 @@ export class AgentManager {
      * @param url
      * @param username
      * @param password
-     * @param name
      */
-    async add(url: string, username: string, password: string, name: string): Promise<Agent> {
+    async add(url : string, username : string, password : string) : Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
         bean.url = url;
         bean.username = username;
         bean.password = password;
-        bean.name = name;
         await R.store(bean);
         return bean;
     }
@@ -108,23 +106,6 @@ export class AgentManager {
         }
     }
 
-    /**
-     *
-     * @param url
-     * @param updatedName
-     */
-    async update(url: string, updatedName: string) {
-        const agent = await R.findOne("agent", " url = ? ", [
-            url,
-        ]);
-        if (agent) {
-            agent.name = updatedName;
-            await R.store(agent);
-        } else {
-            throw new Error("Agent not found");
-        }
-    }
-
     connect(url : string, username : string, password : string) {
         let obj = new URL(url);
         let endpoint = obj.host;
@@ -297,8 +278,6 @@ export class AgentManager {
             url: "",
             username: "",
             endpoint: "",
-            name: "",
-            updatedName: "",
         };
 
         for (let endpoint in list) {

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

@@ -147,8 +147,6 @@ export class DockerSocketHandler extends AgentSocketHandler {
                     msgi18n: true,
                 }, callback);
                 server.sendStackList();
-
-                stack.leaveCombinedTerminal(socket);
             } catch (e) {
                 callbackError(e, callback);
             }
@@ -240,84 +238,6 @@ export class DockerSocketHandler extends AgentSocketHandler {
             }
         });
 
-        // Docker stats
-        agentSocket.on("dockerStats", async (callback) => {
-            try {
-                checkLogin(socket);
-
-                const dockerStats = Object.fromEntries(await server.getDockerStats());
-                callbackResult({
-                    ok: true,
-                    dockerStats,
-                }, callback);
-                server.sendStackList();
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
-
-        // Start a service
-        agentSocket.on("startService", async (stackName: unknown, serviceName: unknown, callback) => {
-            try {
-                checkLogin(socket);
-
-                if (typeof (stackName) !== "string" || typeof (serviceName) !== "string") {
-                    throw new ValidationError("Stack name and service name must be strings");
-                }
-
-                const stack = await Stack.getStack(server, stackName);
-                await stack.startService(socket, serviceName);
-                stack.joinCombinedTerminal(socket); // Ensure the combined terminal is joined
-                callbackResult({
-                    ok: true,
-                    msg: "Service " + serviceName + " started"
-                }, callback);
-                server.sendStackList();
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
-
-        // Stop a service
-        agentSocket.on("stopService", async (stackName: unknown, serviceName: unknown, callback) => {
-            try {
-                checkLogin(socket);
-
-                if (typeof (stackName) !== "string" || typeof (serviceName) !== "string") {
-                    throw new ValidationError("Stack name and service name must be strings");
-                }
-
-                const stack = await Stack.getStack(server, stackName);
-                await stack.stopService(socket, serviceName);
-                callbackResult({
-                    ok: true,
-                    msg: "Service " + serviceName + " stopped"
-                }, callback);
-                server.sendStackList();
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
-
-        agentSocket.on("restartService", async (stackName: unknown, serviceName: unknown, callback) => {
-            try {
-                checkLogin(socket);
-
-                if (typeof stackName !== "string" || typeof serviceName !== "string") {
-                    throw new Error("Invalid stackName or serviceName");
-                }
-
-                const stack = await Stack.getStack(server, stackName, true);
-                await stack.restartService(socket, serviceName);
-                callbackResult({
-                    ok: true,
-                    msg: "Service " + serviceName + " restarted"
-                }, callback);
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
-
         // getExternalNetworkList
         agentSocket.on("getDockerNetworkList", async (callback) => {
             try {

backend/dockge-server.ts

@@ -637,35 +637,6 @@ export class DockgeServer {
         return list;
     }
 
-    async getDockerStats() : Promise<Map<string, object>> {
-        let stats = new Map<string, object>();
-
-        try {
-            let res = await childProcessAsync.spawn("docker", [ "stats", "--format", "json", "--no-stream" ], {
-                encoding: "utf-8",
-            });
-
-            if (!res.stdout) {
-                return stats;
-            }
-
-            let lines = res.stdout?.toString().split("\n");
-
-            for (let line of lines) {
-                try {
-                    let obj = JSON.parse(line);
-                    stats.set(obj.Name, obj);
-                } catch (e) {
-                }
-            }
-
-            return stats;
-        } catch (e) {
-            log.error("getDockerStats", e);
-            return stats;
-        }
-    }
-
     get stackDirFullPath() {
         return path.resolve(this.stacksDir);
     }

backend/migrations/2023-12-20-2117-agent-table.ts

@@ -7,7 +7,6 @@ export async function up(knex: Knex): Promise<void> {
         table.string("url", 255).notNullable().unique();
         table.string("username", 255).notNullable();
         table.string("password", 255).notNullable();
-        table.string("name", 255);
         table.boolean("active").notNullable().defaultTo(true);
     });
 }

backend/models/agent.ts

@@ -23,7 +23,6 @@ export class Agent extends BeanModel {
             url: this.url,
             username: this.username,
             endpoint: this.endpoint,
-            name: this.name,
         };
     }
 

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

@@ -18,8 +18,6 @@ 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) {
@@ -244,12 +242,6 @@ 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,
@@ -278,16 +270,6 @@ 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);
 

backend/socket-handlers/manage-agent-socket-handler.ts

@@ -20,7 +20,7 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 let data = requestData as LooseObject;
                 let manager = socket.instanceManager;
                 await manager.test(data.url, data.username, data.password);
-                await manager.add(data.url, data.username, data.password, data.name);
+                await manager.add(data.url, data.username, data.password);
 
                 // connect to the agent
                 manager.connect(data.url, data.username, data.password);
@@ -66,27 +66,5 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 callbackError(e, callback);
             }
         });
-
-        // updateAgent
-        socket.on("updateAgent", async (name : string, updatedName : string, callback : unknown) => {
-            try {
-                log.debug("manage-agent-socket-handler", "updateAgent");
-                checkLogin(socket);
-
-                let manager = socket.instanceManager;
-                await manager.update(name, updatedName);
-
-                server.disconnectAllSocketClients(undefined, socket.id);
-                manager.sendAgentList();
-
-                callbackResult({
-                    ok: true,
-                    msg: "agentUpdatedSuccessfully",
-                    msgi18n: true,
-                }, callback);
-            } catch (e) {
-                callbackError(e, callback);
-            }
-        });
     }
 }

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", this.getComposeOptions("ps", "--format", "json"), {
+        let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
             cwd: this.path,
             encoding: "utf-8",
         });
@@ -195,18 +195,20 @@ export class Stack {
         }
 
         // Write or overwrite the compose.yaml
-        fs.writeFileSync(path.join(dir, this._composeFileName), this.composeYAML);
-        if (process.env.PUID && process.env.PGID) {
-            const uid = Number(process.env.PUID);
-            const gid = Number(process.env.PGID);
-            fs.lchownSync(dir, uid, gid);
-            fs.chownSync(path.join(dir, this._composeFileName), uid, gid);
+        await fsAsync.writeFile(path.join(dir, this._composeFileName), this.composeYAML);
+
+        const envPath = path.join(dir, ".env");
+
+        // Write or overwrite the .env
+        // If .env is not existing and the composeENV is empty, we don't need to write it
+        if (await fileExists(envPath) || this.composeENV.trim() !== "") {
+            await fsAsync.writeFile(envPath, this.composeENV);
         }
     }
 
     async deploy(socket : DockgeSocket) : Promise<number> {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to deploy, please check the terminal output for more information.");
         }
@@ -215,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", this.getComposeOptions("down", "--remove-orphans"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down", "--remove-orphans" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to delete, please check the terminal output for more information.");
         }
@@ -405,22 +407,9 @@ 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", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to start, please check the terminal output for more information.");
         }
@@ -429,7 +418,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", this.getComposeOptions("stop"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to stop, please check the terminal output for more information.");
         }
@@ -438,7 +427,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", this.getComposeOptions("restart"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "restart" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to restart, please check the terminal output for more information.");
         }
@@ -447,7 +436,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", this.getComposeOptions("down"), this.path);
+        let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to down, please check the terminal output for more information.");
         }
@@ -456,7 +445,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", this.getComposeOptions("pull"), this.path);
+        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.");
         }
@@ -468,7 +457,7 @@ export class Stack {
             return exitCode;
         }
 
-        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
+        exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
         if (exitCode !== 0) {
             throw new Error("Failed to restart, please check the terminal output for more information.");
         }
@@ -477,7 +466,7 @@ export class Stack {
 
     async joinCombinedTerminal(socket: DockgeSocket) {
         const terminalName = getCombinedTerminalName(socket.endpoint, this.name);
-        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", this.getComposeOptions("logs", "-f", "--tail", "100"), this.path);
+        const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", [ "compose", "logs", "-f", "--tail", "100" ], this.path);
         terminal.enableKeepAlive = true;
         terminal.rows = COMBINED_TERMINAL_ROWS;
         terminal.cols = COMBINED_TERMINAL_COLS;
@@ -498,7 +487,7 @@ export class Stack {
         let terminal = Terminal.getTerminal(terminalName);
 
         if (!terminal) {
-            terminal = new InteractiveTerminal(this.server, terminalName, "docker", this.getComposeOptions("exec", serviceName, shell), this.path);
+            terminal = new InteractiveTerminal(this.server, terminalName, "docker", [ "compose", "exec", serviceName, shell ], this.path);
             terminal.rows = TERMINAL_ROWS;
             log.debug("joinContainerTerminal", "Terminal created");
         }
@@ -508,10 +497,10 @@ export class Stack {
     }
 
     async getServiceStatusList() {
-        let statusList = new Map<string, Array<object>>();
+        let statusList = new Map<string, number>();
 
         try {
-            let res = await childProcessAsync.spawn("docker", this.getComposeOptions("ps", "--format", "json"), {
+            let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
                 cwd: this.path,
                 encoding: "utf-8",
             });
@@ -522,23 +511,13 @@ export class Stack {
 
             let lines = res.stdout?.toString().split("\n");
 
-            const addLine = (obj: { Service: string, State: string, Name: string, Health: string }) => {
-                if (!statusList.has(obj.Service)) {
-                    statusList.set(obj.Service, []);
-                }
-                statusList.get(obj.Service)?.push({
-                    status: obj.Health || obj.State,
-                    name: obj.Name
-                });
-            };
-
             for (let line of lines) {
                 try {
                     let obj = JSON.parse(line);
-                    if (obj instanceof Array) {
-                        obj.forEach(addLine);
+                    if (obj.Health === "") {
+                        statusList.set(obj.Service, obj.State);
                     } else {
-                        addLine(obj);
+                        statusList.set(obj.Service, obj.Health);
                     }
                 } catch (e) {
                 }
@@ -549,35 +528,6 @@ export class Stack {
             log.error("getServiceStatusList", e);
             return statusList;
         }
-    }
 
-    async startService(socket: DockgeSocket, serviceName: string) {
-        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", serviceName ], this.path);
-        if (exitCode !== 0) {
-            throw new Error(`Failed to start service ${serviceName}, please check logs for more information.`);
-        }
-
-        return exitCode;
-    }
-
-    async stopService(socket: DockgeSocket, serviceName: string): Promise<number> {
-        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop", serviceName ], this.path);
-        if (exitCode !== 0) {
-            throw new Error(`Failed to stop service ${serviceName}, please check logs for more information.`);
-        }
-
-        return exitCode;
-    }
-
-    async restartService(socket: DockgeSocket, serviceName: string): Promise<number> {
-        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
-        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "restart", serviceName ], this.path);
-        if (exitCode !== 0) {
-            throw new Error(`Failed to restart service ${serviceName}, please check logs for more information.`);
-        }
-
-        return exitCode;
     }
 }

common/util-common.ts

@@ -299,7 +299,6 @@ 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
@@ -309,19 +308,9 @@ export function parseDockerPort(input : string, hostname : string) {
     let display;
 
     const parts = input.split("/");
-    let part1 = parts[0];
+    const 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(":");
 

compose.yaml

@@ -1,6 +1,9 @@
 services:
   dockge:
     image: louislam/dockge:1
+    build:
+      context: .
+      dockerfile: docker/Dockerfile
     restart: unless-stopped
     ports:
       # Host Port : Container Port

docker/Dockerfile

@@ -4,9 +4,19 @@
 FROM louislam/dockge:build-healthcheck AS build_healthcheck
 
 ############################################
-# Build
+# Build frontend
 ############################################
-FROM louislam/dockge:base AS build
+FROM louislam/dockge:base AS build_frontend
+WORKDIR /app
+COPY --chown=node:node . .
+RUN --mount=type=cache,id=npm,target=/npm/store \
+    npm install && \
+    npm run build:frontend
+
+############################################
+# Install node modules
+############################################
+FROM louislam/dockge:base AS build_nodemodules
 WORKDIR /app
 COPY --chown=node:node  ./package.json ./package.json
 COPY --chown=node:node  ./package-lock.json ./package-lock.json
@@ -18,8 +28,9 @@ RUN npm ci --omit=dev
 FROM louislam/dockge:base AS release
 WORKDIR /app
 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  . .
+COPY --from=build_frontend /app/frontend-dist /app/frontend-dist
+COPY --from=build_nodemodules /app/node_modules /app/node_modules
+COPY --chown=node:node . .
 RUN mkdir ./data
 
 

frontend/components.d.ts

@@ -11,17 +11,12 @@ declare module 'vue' {
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
-    BButton: typeof import('bootstrap-vue-next')['BButton']
     BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
     BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
-    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
-    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']
-    DockerStat: typeof import('./src/components/DockerStat.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']
@@ -34,7 +29,4 @@ declare module 'vue' {
     TwoFADialog: typeof import('./src/components/TwoFADialog.vue')['default']
     Uptime: typeof import('./src/components/Uptime.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vBModal: typeof import('bootstrap-vue-next')['vBModal']
-  }
 }

frontend/src/components/Container.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="shadow-box big-padding mb-3 container">
         <div class="row">
-            <div class="col-5">
+            <div class="col-7">
                 <h4>{{ name }}</h4>
                 <div class="image mb-2">
                     <span class="me-1">{{ imageName }}:</span><span class="tag">{{ imageTag }}</span>
@@ -9,46 +9,17 @@
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
 
-                    <a v-for="port in (ports ?? envsubstService.ports)" :key="port" :href="parsePort(port).url" target="_blank">
+                    <a v-for="port in envsubstService.ports" :key="port" :href="parsePort(port).url" target="_blank">
                         <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
                     </a>
                 </div>
             </div>
-            <div class="col-7">
+            <div class="col-5">
                 <div class="function">
-                    <div class="btn-group me-2" role="group">
-                        <router-link v-if="!isEditMode && (status === 'running' || status === 'healthy')" class="btn btn-normal" :to="terminalRouteLink" disabled="">
-                            <font-awesome-icon icon="terminal" />
-                            Bash
-                        </router-link>
-                        <button
-                            v-if="serviceCount > 1 && !isEditMode && status !== 'running' && status !== 'healthy'"
-                            class="btn btn-primary"
-                            :disabled="processing"
-                            @click="startService"
-                        >
-                            <font-awesome-icon icon="play" class="me-1" />
-                            {{ $t("startStack") }}
-                        </button>
-                        <button
-                            v-if="serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
-                            class="btn btn-normal"
-                            :disabled="processing"
-                            @click="restartService"
-                        >
-                            <font-awesome-icon icon="rotate" class="me-1" />
-                            {{ $t("restartStack") }}
-                        </button>
-                        <button
-                            v-if="serviceCount > 1 && !isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"
-                            class="btn btn-normal"
-                            :disabled="processing"
-                            @click="stopService"
-                        >
-                            <font-awesome-icon icon="stop" class="me-1" />
-                            {{ $t("stopStack") }}
-                        </button>
-                    </div>
+                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" disabled="">
+                        <font-awesome-icon icon="terminal" />
+                        Bash
+                    </router-link>
                 </div>
             </div>
         </div>
@@ -64,32 +35,6 @@
                 {{ $t("deleteContainer") }}
             </button>
         </div>
-        <div v-else-if="statsInstances.length > 0" class="mt-2">
-            <div class="d-flex align-items-center gap-3">
-                <template v-if="!expandedStats">
-                    <div class="stats">
-                        {{ $t('CPU') }}: {{ statsInstances[0].CPUPerc }}
-                    </div>
-                    <div class="stats">
-                        {{ $t('memoryAbbreviated') }}: {{ statsInstances[0].MemUsage }}
-                    </div>
-                </template>
-                <div class="d-flex flex-grow-1 justify-content-end">
-                    <button class="btn btn-sm btn-normal" @click="expandedStats = !expandedStats">
-                        <font-awesome-icon :icon="expandedStats ? 'chevron-up' : 'chevron-down'" />
-                    </button>
-                </div>
-            </div>
-            <transition name="slide-fade" appear>
-                <div v-if="expandedStats" class="d-flex flex-column gap-3 mt-2">
-                    <DockerStat
-                        v-for="stat in statsInstances"
-                        :key="stat.Name"
-                        :stat="stat"
-                    />
-                </div>
-            </transition>
-        </div>
 
         <transition name="slide-fade" appear>
             <div v-if="isEditMode && showConfig" class="config mt-3">
@@ -193,12 +138,10 @@
 import { defineComponent } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { parseDockerPort } from "../../../common/util-common";
-import DockerStat from "./DockerStat.vue";
 
 export default defineComponent({
     components: {
         FontAwesomeIcon,
-        DockerStat
     },
     props: {
         name: {
@@ -213,24 +156,16 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
-        serviceStatus: {
-            type: Object,
-            default: null,
-        },
-        dockerStats: {
-            type: Object,
-            default: null
+        status: {
+            type: String,
+            default: "N/A",
         }
     },
     emits: [
-        "start-service",
-        "stop-service",
-        "restart-service"
     ],
     data() {
         return {
             showConfig: false,
-            expandedStats: false,
         };
     },
     computed: {
@@ -295,10 +230,6 @@ export default defineComponent({
             return this.jsonObject.services[this.name];
         },
 
-        serviceCount() {
-            return Object.keys(this.jsonObject.services).length;
-        },
-
         jsonObject() {
             return this.$parent.$parent.jsonConfig;
         },
@@ -335,22 +266,6 @@ export default defineComponent({
                 return "";
             }
         },
-        statsInstances() {
-            if (!this.serviceStatus) {
-                return [];
-            }
-
-            return this.serviceStatus
-                .map(s => this.dockerStats[s.name])
-                .filter(s => !!s)
-                .sort((a, b) => a.Name.localeCompare(b.Name));
-        },
-        status() {
-            if (!this.serviceStatus) {
-                return "N/A";
-            }
-            return this.serviceStatus[0].status;
-        }
     },
     mounted() {
         if (this.first) {
@@ -369,16 +284,6 @@ export default defineComponent({
         remove() {
             delete this.jsonObject.services[this.name];
         },
-        startService() {
-            this.$emit("start-service", this.name);
-        },
-        stopService() {
-            this.$emit("stop-service", this.name);
-        },
-        restartService() {
-            this.$emit("restart-service", this.name);
-        }
-
     }
 });
 </script>
@@ -403,10 +308,5 @@ export default defineComponent({
         align-items: center;
         justify-content: end;
     }
-
-    .stats {
-        font-size: 0.8rem;
-        color: #6c757d;
-    }
 }
 </style>

frontend/src/components/DockerStat.vue

@@ -1,94 +0,0 @@
-<template>
-    <div class="stats-container">
-        <div class="stats-title">
-            {{ stat.Name }}
-        </div>
-        <div class="d-flex justify-content-between stats gap-2 mt-1">
-            <div class="stat">
-                <div class="stat-label">
-                    {{ $t('CPU') }}
-                </div>
-                <div>
-                    {{ stat.CPUPerc }}
-                </div>
-            </div>
-            <div class="stat">
-                <div class="stat-label">
-                    {{ $t('memory') }}
-                </div>
-                <div>
-                    {{ stat.MemUsage }} ({{ stat.MemPerc }})
-                </div>
-            </div>
-            <div class="stat">
-                <div class="stat-label">
-                    {{ $t('networkIO') }}
-                </div>
-                <div>
-                    {{ stat.NetIO }}
-                </div>
-            </div>
-            <div class="stat">
-                <div class="stat-label">
-                    {{ $t('blockIO') }}
-                </div>
-                <div>
-                    {{ stat.BlockIO }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        stat: {
-            type: Object,
-            required: true
-        }
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.stats-container {
-    container-type: inline-size;
-
-    .stats {
-        container-type: inline-size;
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        @container (width < 420px) {
-            flex-direction: column;
-
-            .stat {
-                flex-direction: row;
-            }
-
-            .stat-label::after {
-                content: ':'
-            }
-        }
-    }
-}
-
-.stats {
-    font-size: 0.8rem;
-    color: #6c757d;
-}
-
-.stat-label {
-    font-weight: bold;
-}
-
-.stats-title {
-    font-size: 0.9rem;
-    color: var(--bs-heading-color);
-}
-</style>

frontend/src/components/StackList.vue

@@ -3,10 +3,7 @@
         <div class="list-header">
             <div class="header-top">
                 <!-- TODO -->
-                <button
-                    v-if="false" class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button"
-                    @click="selectMode = !selectMode"
-                >
+                <button v-if="false" class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button" @click="selectMode = !selectMode">
                     {{ $t("Select") }}
                 </button>
 
@@ -31,44 +28,34 @@
 
             <!-- TODO: Selection Controls -->
             <div v-if="selectMode && false" class="selection-controls px-2 pt-2">
-                <input v-model="selectAll" class="form-check-input select-input" type="checkbox" />
+                <input
+                    v-model="selectAll"
+                    class="form-check-input select-input"
+                    type="checkbox"
+                />
 
-                <button class="btn-outline-normal" @click="pauseDialog">
-                    <font-awesome-icon icon="pause" size="sm" /> {{
-                        $t("Pause") }}
-                </button>
-                <button class="btn-outline-normal" @click="resumeSelected">
-                    <font-awesome-icon icon="play" size="sm" />
-                    {{ $t("Resume") }}
-                </button>
+                <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button>
+                <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button>
 
                 <span v-if="selectedStackCount > 0">
-                    {{ $t("selectedStackCount", [selectedStackCount]) }}
+                    {{ $t("selectedStackCount", [ selectedStackCount ]) }}
                 </span>
             </div>
         </div>
         <div ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
-            <div v-if="agentStackList[0] && agentStackList[0].stacks.length === 0" class="text-center mt-3">
+            <div v-if="Object.keys(sortedStackList).length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
-            <div v-for="(agent, agentIndex) in agentStackList" :key="agentIndex" class="stack-list-inner">
-                <div
-                    v-if="$root.agentCount > 1" class="p-2 agent-select"
-                    @click="closedAgents.set(agent.endpoint, !closedAgents.get(agent.endpoint))"
-                >
-                    <span class="me-1">
-                        <font-awesome-icon v-show="closedAgents.get(agent.endpoint)" icon="chevron-circle-right" />
-                        <font-awesome-icon v-show="!closedAgents.get(agent.endpoint)" icon="chevron-circle-down" />
-                    </span>
-                    <span v-if="agent.endpoint === 'current'">{{ $t("currentEndpoint") }}</span>
-                    <span v-else>{{ agent.endpoint }}</span>
-                </div>
-                <StackListItem
-                    v-for="(item, index) in agent.stacks"
-                    v-show="$root.agentCount === 1 || !closedAgents.get(agent.endpoint)" :key="index" :stack="item" :isSelectMode="selectMode"
-                    :isSelected="isSelected" :select="select" :deselect="deselect"
-                />
-            </div>
+
+            <StackListItem
+                v-for="(item, index) in sortedStackList"
+                :key="index"
+                :stack="item"
+                :isSelectMode="selectMode"
+                :isSelected="isSelected"
+                :select="select"
+                :deselect="deselect"
+            />
         </div>
     </div>
 
@@ -105,8 +92,7 @@ export default {
                 status: null,
                 active: null,
                 tags: null,
-            },
-            closedAgents: new Map(),
+            }
         };
     },
     computed: {
@@ -133,7 +119,7 @@ export default {
          * Returns a sorted list of stacks based on the applied filters and search text.
          * @returns {Array} The sorted list of stacks.
          */
-        agentStackList() {
+        sortedStackList() {
             let result = Object.values(this.$root.completeStackList);
 
             result = result.filter(stack => {
@@ -201,29 +187,6 @@ export default {
                 return m1.name.localeCompare(m2.name);
             });
 
-            // Group stacks by endpoint, sorting them so the local endpoint is first
-            // and the rest are sorted alphabetically
-            result = [
-                ...result.reduce((acc, stack) => {
-                    const endpoint = stack.endpoint || "current";
-                    if (!acc.has(endpoint)) {
-                        acc.set(endpoint, []);
-                    }
-                    acc.get(endpoint).push(stack);
-                    return acc;
-                }, new Map()).entries()
-            ].map(([ endpoint, stacks ]) => ({
-                endpoint,
-                stacks
-            })).sort((a, b) => {
-                if (a.endpoint === "current" && b.endpoint !== "current") {
-                    return -1;
-                } else if (a.endpoint !== "current" && b.endpoint === "current") {
-                    return 1;
-                }
-                return a.endpoint.localeCompare(b.endpoint);
-            });
-
             return result;
         },
 
@@ -258,7 +221,7 @@ export default {
     },
     watch: {
         searchText() {
-            for (let stack of this.agentStackList) {
+            for (let stack of this.sortedStackList) {
                 if (!this.selectedStacks[stack.id]) {
                     if (this.selectAll) {
                         this.disableSelectAllWatcher = true;
@@ -273,7 +236,7 @@ export default {
                 this.selectedStacks = {};
 
                 if (this.selectAll) {
-                    this.agentStackList.forEach((item) => {
+                    this.sortedStackList.forEach((item) => {
                         this.selectedStacks[item.id] = true;
                     });
                 }
@@ -368,7 +331,7 @@ export default {
         pauseSelected() {
             Object.keys(this.selectedStacks)
                 .filter(id => this.$root.stackList[id].active)
-                .forEach(id => this.$root.getSocket().emit("pauseStack", id, () => { }));
+                .forEach(id => this.$root.getSocket().emit("pauseStack", id, () => {}));
 
             this.cancelSelectMode();
         },
@@ -379,7 +342,7 @@ export default {
         resumeSelected() {
             Object.keys(this.selectedStacks)
                 .filter(id => !this.$root.stackList[id].active)
-                .forEach(id => this.$root.getSocket().emit("resumeStack", id, () => { }));
+                .forEach(id => this.$root.getSocket().emit("resumeStack", id, () => {}));
 
             this.cancelSelectMode();
         },
@@ -481,15 +444,4 @@ export default {
     gap: 10px;
 }
 
-.agent-select {
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    color: $dark-font-color3;
-    padding-left: 10px;
-    padding-right: 10px;
-    display: flex;
-    align-items: center;
-    user-select: none;
-}
 </style>

frontend/src/components/StackListItem.vue

@@ -3,6 +3,7 @@
         <Uptime :stack="stack" :fixed-width="true" class="me-2" />
         <div class="title">
             <span>{{ stackName }}</span>
+            <div v-if="$root.agentCount > 1" class="endpoint">{{ endpointDisplay }}</div>
         </div>
     </router-link>
 </template>

frontend/src/components/Terminal.vue

@@ -20,24 +20,22 @@ export default {
     props: {
         name: {
             type: String,
-            required: true,
+            require: true,
         },
 
         endpoint: {
             type: String,
-            required: true,
+            require: true,
         },
 
         // Require if mode is interactive
         stackName: {
             type: String,
-            default: "",
         },
 
         // Require if mode is interactive
         serviceName: {
             type: String,
-            default: "",
         },
 
         // Require if mode is interactive
@@ -103,14 +101,6 @@ export default {
         this.terminal.open(this.$refs.terminal);
         this.terminal.focus();
 
-        // Add right-click context menu handler for paste
-        this.$refs.terminal.addEventListener("contextmenu", this.handleContextMenu);
-
-        // Add selection handler for copy to clipboard
-        this.terminal.onSelectionChange(() => {
-            this.handleSelection();
-        });
-
         // Notify parent component when data is received
         this.terminal.onCursorMove(() => {
             console.debug("onData triggered");
@@ -145,7 +135,6 @@ export default {
         window.removeEventListener("resize", this.onResizeEvent); // Remove the resize event listener from the window object.
         this.$root.unbindTerminal(this.name);
         this.terminal.dispose();
-        this.$refs.terminal?.removeEventListener("contextmenu", this.handleContextMenu);
     },
 
     methods: {
@@ -165,27 +154,17 @@ export default {
         },
 
         removeInput() {
-            const textAfterCursorLength = this.terminalInputBuffer.length - this.cursorPosition;
-            const spaces = " ".repeat(textAfterCursorLength);
             const backspaceCount = this.terminalInputBuffer.length;
             const backspaces = "\b \b".repeat(backspaceCount);
             this.cursorPosition = 0;
-            this.terminal.write(spaces + backspaces);
+            this.terminal.write(backspaces);
             this.terminalInputBuffer = "";
         },
 
-        clearCurrentLine() {
-            // Move cursor to the beginning of the input and clear it
-            const backspaces = "\b".repeat(this.cursorPosition);
-            const spaces = " ".repeat(this.terminalInputBuffer.length);
-            const moreBackspaces = "\b".repeat(this.terminalInputBuffer.length);
-            this.terminal.write(backspaces + spaces + moreBackspaces);
-        },
-
         mainTerminalConfig() {
             this.terminal.onKey(e => {
-                // Optional: keep for debugging
-                // console.debug("Encode: " + JSON.stringify(e.key));
+                const code = e.key.charCodeAt(0);
+                console.debug("Encode: " + JSON.stringify(e.key));
 
                 if (e.key === "\r") {
                     // Return if no input
@@ -201,65 +180,34 @@ export default {
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, buffer + e.key, (err) => {
                         this.$root.toastError(err.msg);
                     });
-                } else if (e.key === "\u007F") {      // Backspace
+
+                } else if (code === 127) { // Backspace
                     if (this.cursorPosition > 0) {
-                        // Remove character to the left of cursor
-                        const beforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition - 1);
-                        const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
-                        this.terminalInputBuffer = beforeCursor + afterCursor;
+                        this.terminal.write("\b \b");
                         this.cursorPosition--;
-
-                        // Redraw the line
-                        this.terminal.write("\b" + afterCursor + " \b".repeat(afterCursor.length + 1));
-                    }
-                } else if (e.key === "\u001B\u005B\u0033\u007E") { // Delete key
-                    if (this.cursorPosition < this.terminalInputBuffer.length) {
-                        // Remove character to the right of cursor
-                        const beforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
-                        const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition + 1);
-                        this.terminalInputBuffer = beforeCursor + afterCursor;
-
-                        // Redraw the line from cursor position
-                        this.terminal.write(afterCursor + " \b".repeat(afterCursor.length + 1));
+                        this.terminalInputBuffer = this.terminalInputBuffer.slice(0, -1);
                     }
                 } else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") {      // UP OR DOWN
                     // Do nothing
+
                 } else if (e.key === "\u001B\u005B\u0043") {      // RIGHT
-                    if (this.cursorPosition < this.terminalInputBuffer.length) {
-                        this.terminal.write(this.terminalInputBuffer[this.cursorPosition]);
-                        this.cursorPosition++;
-                    }
+                    // TODO
                 } else if (e.key === "\u001B\u005B\u0044") {      // LEFT
-                    if (this.cursorPosition > 0) {
-                        this.terminal.write("\b");
-                        this.cursorPosition--;
-                    }
+                    // TODO
                 } else if (e.key === "\u0003") {      // Ctrl + C
                     console.debug("Ctrl + C");
                     this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key);
                     this.removeInput();
-                } else if (e.key === "\u0016" || (e.domEvent?.ctrlKey && e.key.toLowerCase() === "v")) {      // Ctrl + V
-                    this.handlePaste();
-                } else if (e.key === "\u0009" || e.key.startsWith("\u001B")) {      // TAB or other special keys
-                    // Do nothing
                 } else {
-                    const textBeforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
-                    const textAfterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
-                    this.terminalInputBuffer = textBeforeCursor + e.key + textAfterCursor;
-                    this.terminal.write(e.key + textAfterCursor + "\b".repeat(textAfterCursor.length));
                     this.cursorPosition++;
+                    this.terminalInputBuffer += e.key;
+                    this.terminal.write(e.key);
                 }
             });
         },
 
         interactiveTerminalConfig() {
             this.terminal.onKey(e => {
-                // Handle Ctrl+V for paste
-                if (e.key === "\u0016" || (e.domEvent?.ctrlKey && e.key.toLowerCase() === "v")) {
-                    this.handlePaste();
-                    return;
-                }
-
                 this.$root.emitAgent(this.endpoint, "terminalInput", this.name, e.key, (res) => {
                     if (!res.ok) {
                         this.$root.toastRes(res);
@@ -290,87 +238,7 @@ export default {
             let rows = this.terminal.rows;
             let cols = this.terminal.cols;
             this.$root.emitAgent(this.endpoint, "terminalResize", this.name, rows, cols);
-        },
-
-        /**
-         * Handle clipboard paste operation
-         */
-        async handlePaste() {
-            try {
-                const text = await navigator.clipboard.readText();
-                if (text) {
-                    this.pasteText(text);
-                }
-            } catch (error) {
-                console.error("Failed to read from clipboard:", error);
-            }
-        },
-
-        /**
-         * Paste text into the terminal based on current mode
-         */
-        pasteText(text) {
-            if (this.mode === "mainTerminal") {
-                // For main terminal, insert text at current cursor position
-                const beforeCursor = this.terminalInputBuffer.slice(0, this.cursorPosition);
-                const afterCursor = this.terminalInputBuffer.slice(this.cursorPosition);
-
-                // Update the buffer with inserted text
-                this.terminalInputBuffer = beforeCursor + text + afterCursor;
-
-                // Clear the current line and rewrite it
-                this.clearCurrentLine();
-                this.terminal.write(this.terminalInputBuffer);
-
-                // Move cursor to the correct position (after the pasted text)
-                this.cursorPosition += text.length;
-                const backspaces = "\b".repeat(afterCursor.length);
-                this.terminal.write(backspaces);
-
-            } else if (this.mode === "interactive") {
-                // For interactive terminal, send directly to server
-                this.$root.emitAgent(this.endpoint, "terminalInput", this.name, text, (res) => {
-                    if (!res.ok) {
-                        this.$root.toastRes(res);
-                    }
-                });
-            }
-        },
-
-        /**
-         * Handle right-click context menu for paste operation
-         */
-        handleContextMenu(event) {
-            // Prevent default context menu
-            event.preventDefault();
-
-            // Only handle paste for modes that support input
-            if (this.mode === "mainTerminal" || this.mode === "interactive") {
-                this.handlePaste();
-            }
-        },
-
-        /**
-         * Handle text selection in terminal - copy to clipboard
-         */
-        handleSelection() {
-            const selectedText = this.terminal.getSelection();
-            if (selectedText && selectedText.length > 0) {
-                this.copyToClipboard(selectedText);
-            }
-        },
-
-        /**
-         * Copy text to clipboard
-         */
-        async copyToClipboard(text) {
-            try {
-                await navigator.clipboard.writeText(text);
-                console.debug("Text copied to clipboard:", text);
-            } catch (error) {
-                console.error("Failed to copy to clipboard:", error);
-            }
-        },
+        }
     }
 };
 </script>

frontend/src/components/settings/Appearance.vue

@@ -14,7 +14,7 @@
                 </option>
             </select>
         </div>
-        <div v-show="true" class="my-4">
+        <div v-show="false" class="my-4">
             <label for="timezone" class="form-label">{{ $t("Theme") }}</label>
             <div>
                 <div

frontend/src/components/settings/GlobalEnv.vue

@@ -1,98 +0,0 @@
-<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>

frontend/src/components/settings/Security.vue

@@ -94,18 +94,10 @@
         <TwoFADialog ref="TwoFADialog" />
 
         <Confirm ref="confirmDisableAuth" btn-style="btn-danger" :yes-text="$t('I understand, please disable')" :no-text="$t('Leave')" @yes="disableAuth">
-            <i18n-t keypath="disableauth.message1" tag="p">
-                <template #disableAuth>
-                    <strong>{{ $t('disableAuth') }}</strong>
-                </template>
-            </i18n-t>
-
-            <i18n-t keypath="disableauth.message2" tag="p">
-                <template #scenarios>
-                    <strong>{{ $t('scenarios') }}</strong>
-                </template>
-            </i18n-t>
-
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <p v-html="$t('disableauth.message1')"></p>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <p v-html="$t('disableauth.message2')"></p>
             <p>{{ $t("Please use this option carefully!") }}</p>
 
             <div class="mb-3">

frontend/src/i18n.ts

@@ -33,8 +33,6 @@ const languageList = {
     "ca": "Català",
     "ga": "Gaeilge",
     "de-CH": "Schwiizerdütsch",
-    "mag": "मगही",
-    "mai": "मैथिली",
 };
 
 let messages = {

frontend/src/icon.ts

@@ -38,7 +38,6 @@ import {
     faAward,
     faLink,
     faChevronDown,
-    faChevronUp,
     faSignOutAlt,
     faPen,
     faExternalLinkSquareAlt,
@@ -55,8 +54,6 @@ import {
     faTerminal, faWarehouse, faHome, faRocket,
     faRotate,
     faCloudArrowDown, faArrowsRotate,
-    faChevronCircleRight,
-    faChevronCircleDown,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -91,7 +88,6 @@ library.add(
     faAward,
     faLink,
     faChevronDown,
-    faChevronUp,
     faSignOutAlt,
     faPen,
     faExternalLinkSquareAlt,
@@ -113,8 +109,6 @@ library.add(
     faRotate,
     faCloudArrowDown,
     faArrowsRotate,
-    faChevronCircleRight,
-    faChevronCircleDown,
 );
 
 export { FontAwesomeIcon };

frontend/src/lang/en.json

@@ -47,10 +47,8 @@
     "deleteContainer": "Delete",
     "addContainer": "Add Container",
     "addNetwork": "Add Network",
-    "disableauth.message1": "Are you sure want to {disableAuth}?",
-    "disableauth.message2": "It is designed for scenarios {scenarios}",
-    "disableAuth": "disable authentication",
-    "scenarios": "where you intend to implement third-party authentication",
+    "disableauth.message1": "Are you sure want to <strong>disable authentication</strong>?",
+    "disableauth.message2": "It is designed for scenarios <strong>where you intend to implement third-party authentication</strong> in front of Dockge such as Cloudflare Access, Authelia or other authentication mechanisms.",
     "passwordNotMatchMsg": "The repeat password does not match.",
     "autoGet": "Auto Get",
     "add": "Add",
@@ -116,10 +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.",
-    "name": "Dockge Agent Display name",
-    "updatedName": "New Dockge Agent Display name",
     "Saved": "Saved",
     "Deployed": "Deployed",
     "Deleted": "Deleted",
@@ -135,18 +130,9 @@
     "Network name...": "Network name...",
     "Select a network...": "Select a network...",
     "NoNetworksAvailable": "No networks available. You need to add internal networks or enable external networks in the right side first.",
-    "CPU": "CPU",
-    "memory": "Memory",
-    "memoryAbbreviated": "Mem",
-    "networkIO": "Network I/O",
-    "blockIO": "Block I/O",
     "Console is not enabled": "Console is not enabled",
-    "ConsoleNotEnabledMSG1": "Console is a powerful tool that allows you to execute any commands such as {docker}, {rm} within the Dockge's container in this Web UI.",
-    "ConsoleNotEnabledMSG2": "It might be dangerous since this Dockge container is connecting to the host's Docker daemon. Also Dockge could be possibly taken down by commands like {rmRf}",
-    "ConsoleNotEnabledMSG3": "If you understand the risk, you can enable it by setting {envVar} in the environment variables.",
-    "dockerCode": "docker",
-    "rmCode": "rm",
-    "rmRfCode": "rm -rf",
-    "envVarCode": "DOCKGE_ENABLE_CONSOLE=true",
+    "ConsoleNotEnabledMSG1": "Console is a powerful tool that allows you to execute any commands such as <code>docker</code>, <code>rm</code> within the Dockge's container in this Web UI.",
+    "ConsoleNotEnabledMSG2": "It might be dangerous since this Dockge container is connecting to the host's Docker daemon. Also Dockge could be possibly taken down by commands like <code>rm -rf</code>" ,
+    "ConsoleNotEnabledMSG3": "If you understand the risk, you can enable it by setting <code>DOCKGE_ENABLE_CONSOLE=true</code> in the environment variables.",
     "confirmLeaveStack": "You are currently editing a stack. Are you sure you want to leave?"
 }

frontend/src/mixins/socket.ts

@@ -131,15 +131,10 @@ export default defineComponent({
     methods: {
 
         endpointDisplayFunction(endpoint : string) {
-            for (const [ k, v ] of Object.entries(this.$data.agentList)) {
-                if (endpoint) {
-                    if (endpoint === v["endpoint"] && v["name"] !== "") {
-                        return v["name"];
-                    }
-                    if (endpoint === v["endpoint"] && v["name"] === "" ) {
-                        return endpoint;
-                    }
-                }
+            if (endpoint) {
+                return endpoint;
+            } else {
+                return this.$t("currentEndpoint");
             }
         },
 

frontend/src/pages/Compose.vue

@@ -4,7 +4,7 @@
             <h1 v-if="isAdd" class="mb-3">{{ $t("compose") }}</h1>
             <h1 v-else class="mb-3">
                 <Uptime :stack="globalStack" :pill="true" /> {{ stack.name }}
-                <span v-if="$root.agentCount > 1 && endpoint !== ''" class="agent-name">
+                <span v-if="$root.agentCount > 1" class="agent-name">
                     ({{ endpointDisplay }})
                 </span>
             </h1>
@@ -63,8 +63,8 @@
 
             <!-- URLs -->
             <div v-if="urls.length > 0" class="mb-3">
-                <a v-for="(urlItem, index) in urls" :key="index" target="_blank" :href="urlItem.url">
-                    <span class="badge bg-secondary me-2">{{ urlItem.display }}</span>
+                <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>
 
@@ -98,8 +98,8 @@
                             <div class="mt-3">
                                 <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
                                 <select v-model="stack.endpoint" class="form-select">
-                                    <option v-for="(agent, agentEndpoint) in $root.agentList" :key="agentEndpoint" :value="agentEndpoint" :disabled="$root.agentStatusList[agentEndpoint] != 'online'">
-                                        ({{ $root.agentStatusList[agentEndpoint] }}) {{ (agent.name !== '') ? agent.name : agent.url || $t("Current") }}
+                                    <option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
+                                        ({{ $root.agentStatusList[endpoint] }}) {{ (endpoint) ? endpoint : $t("currentEndpoint") }}
                                     </option>
                                 </select>
                             </div>
@@ -128,11 +128,7 @@
                             :name="name"
                             :is-edit-mode="isEditMode"
                             :first="name === Object.keys(jsonConfig.services)[0]"
-                            :serviceStatus="serviceStatusList[name]"
-                            :dockerStats="dockerStats"
-                            @start-service="startService"
-                            @stop-service="stopService"
-                            @restart-service="restartService"
+                            :status="serviceStatusList[name]"
                         />
                     </div>
 
@@ -171,18 +167,16 @@
 
                     <!-- YAML editor -->
                     <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
-                        <code-mirror
+                        <prism-editor
                             ref="editor"
                             v-model="stack.composeYAML"
-                            :extensions="extensions"
-                            minimal
-                            wrap="true"
-                            dark="true"
-                            tab="true"
-                            :disabled="!isEditMode"
-                            :hasFocus="editorFocus"
-                            @change="yamlCodeChange"
-                        />
+                            class="yaml-editor"
+                            :highlight="highlighterYAML"
+                            line-numbers :readonly="!isEditMode"
+                            @input="yamlCodeChange"
+                            @focus="editorFocus = true"
+                            @blur="editorFocus = false"
+                        ></prism-editor>
                     </div>
                     <div v-if="isEditMode" class="mb-3">
                         {{ yamlError }}
@@ -192,18 +186,15 @@
                     <div v-if="isEditMode">
                         <h4 class="mb-3">.env</h4>
                         <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
-                            <code-mirror
+                            <prism-editor
                                 ref="editor"
                                 v-model="stack.composeENV"
-                                :extensions="extensionsEnv"
-                                minimal
-                                wrap="true"
-                                dark="true"
-                                tab="true"
-                                :disabled="!isEditMode"
-                                :hasFocus="editorFocus"
-                                @change="yamlCodeChange"
-                            />
+                                class="env-editor"
+                                :highlight="highlighterENV"
+                                line-numbers :readonly="!isEditMode"
+                                @focus="editorFocus = true"
+                                @blur="editorFocus = false"
+                            ></prism-editor>
                         </div>
                     </div>
 
@@ -246,13 +237,13 @@
 </template>
 
 <script>
-import CodeMirror from "vue-codemirror6";
-import { yaml } from "@codemirror/lang-yaml";
-import { python } from "@codemirror/lang-python";
-import { dracula as editorTheme } from "thememirror";
-import { lineNumbers, EditorView } from "@codemirror/view";
+import { highlight, languages } from "prismjs/components/prism-core";
+import { PrismEditor } from "vue-prism-editor";
+import "prismjs/components/prism-yaml";
 import { parseDocument, Document } from "yaml";
 
+import "prismjs/themes/prism-tomorrow.css";
+import "vue-prism-editor/dist/prismeditor.min.css";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     COMBINED_TERMINAL_COLS,
@@ -266,7 +257,6 @@ import {
 import { BModal } from "bootstrap-vue-next";
 import NetworkInput from "../components/NetworkInput.vue";
 import dotenv from "dotenv";
-import { ref } from "vue";
 
 const template = `
 services:
@@ -281,13 +271,17 @@ const envDefault = "# VARIABLE=value #comment";
 let yamlErrorTimeout = null;
 
 let serviceStatusTimeout = null;
-let dockerStatsTimeout = null;
+let prismjsSymbolDefinition = {
+    "symbol": {
+        pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
+    }
+};
 
 export default {
     components: {
         NetworkInput,
         FontAwesomeIcon,
-        CodeMirror,
+        PrismEditor,
         BModal,
     },
     beforeRouteUpdate(to, from, next) {
@@ -296,35 +290,10 @@ export default {
     beforeRouteLeave(to, from, next) {
         this.exitConfirm(next);
     },
-    setup() {
-        const editorFocus = ref(false);
-
-        const focusEffectHandler = (state, focusing) => {
-            editorFocus.value = focusing;
-            return null;
-        };
-
-        const extensions = [
-            editorTheme,
-            yaml(),
-            lineNumbers(),
-            EditorView.focusChangeEffect.of(focusEffectHandler)
-        ];
-
-        const extensionsEnv = [
-            editorTheme,
-            python(),
-            lineNumbers(),
-            EditorView.focusChangeEffect.of(focusEffectHandler)
-        ];
-
-        return { extensions,
-            extensionsEnv,
-            editorFocus };
-    },
     yamlDoc: null,  // For keeping the yaml comments
     data() {
         return {
+            editorFocus: false,
             jsonConfig: {},
             envsubstJSONConfig: {},
             yamlError: "",
@@ -337,16 +306,15 @@ export default {
 
             },
             serviceStatusList: {},
-            dockerStats: {},
             isEditMode: false,
             submitted: false,
             showDeleteDialog: false,
             newContainerName: "",
             stopServiceStatusTimeout: false,
-            stopDockerStatsTimeout: false,
         };
     },
     computed: {
+
         endpointDisplay() {
             return this.$root.endpointDisplayFunction(this.endpoint);
         },
@@ -510,7 +478,6 @@ export default {
         }
 
         this.requestServiceStatus();
-        this.requestDockerStats();
     },
     unmounted() {
 
@@ -523,13 +490,6 @@ export default {
             }, 5000);
         },
 
-        startDockerStatsTimeout() {
-            clearTimeout(dockerStatsTimeout);
-            dockerStatsTimeout = setTimeout(async () => {
-                this.requestDockerStats();
-            }, 5000);
-        },
-
         requestServiceStatus() {
             // Do not request if it is add mode
             if (this.isAdd) {
@@ -546,17 +506,6 @@ export default {
             });
         },
 
-        requestDockerStats() {
-            this.$root.emitAgent(this.endpoint, "dockerStats", (res) => {
-                if (res.ok) {
-                    this.dockerStats = res.dockerStats;
-                }
-                if (!this.stopDockerStatsTimeout) {
-                    this.startDockerStatsTimeout();
-                }
-            });
-        },
-
         exitConfirm(next) {
             if (this.isEditMode) {
                 if (confirm(this.$t("confirmLeaveStack"))) {
@@ -574,9 +523,7 @@ export default {
         exitAction() {
             console.log("exitAction");
             this.stopServiceStatusTimeout = true;
-            this.stopDockerStatsTimeout = true;
             clearTimeout(serviceStatusTimeout);
-            clearTimeout(dockerStatsTimeout);
 
             // Leave Combined Terminal
             console.debug("leaveCombinedTerminal", this.endpoint, this.stack.name);
@@ -717,6 +664,46 @@ export default {
             this.isEditMode = false;
         },
 
+        highlighterYAML(code) {
+            if (!languages.yaml_with_symbols) {
+                languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", {
+                    "symbol": prismjsSymbolDefinition["symbol"]
+                });
+            }
+            return highlight(code, languages.yaml_with_symbols);
+        },
+
+        highlighterENV(code) {
+            if (!languages.docker_env) {
+                languages.docker_env = {
+                    "comment": {
+                        pattern: /(^#| #).*$/m,
+                        greedy: true
+                    },
+                    "keyword": {
+                        pattern: /^\w*(?=[:=])/m,
+                        greedy: true
+                    },
+                    "value": {
+                        pattern: /(?<=[:=]).*?((?= #)|$)/m,
+                        greedy: true,
+                        inside: {
+                            "string": [
+                                {
+                                    pattern: /^ *'.*?(?<!\\)'/m,
+                                },
+                                {
+                                    pattern: /^ *".*?(?<!\\)"|^.*$/m,
+                                    inside: prismjsSymbolDefinition
+                                },
+                            ],
+                        },
+                    },
+                };
+            }
+            return highlight(code, languages.docker_env);
+        },
+
         yamlToJSON(yaml) {
             let doc = parseDocument(yaml);
             if (doc.errors.length > 0) {
@@ -804,44 +791,6 @@ export default {
             this.stack.name = this.stack?.name?.toLowerCase();
         },
 
-        startService(serviceName) {
-            this.processing = true;
-
-            this.$root.emitAgent(this.endpoint, "startService", this.stack.name, serviceName, (res) => {
-                this.processing = false;
-                this.$root.toastRes(res);
-
-                if (res.ok) {
-                    this.requestServiceStatus(); // Refresh service status
-                }
-            });
-        },
-
-        stopService(serviceName) {
-            this.processing = true;
-
-            this.$root.emitAgent(this.endpoint, "stopService", this.stack.name, serviceName, (res) => {
-                this.processing = false;
-                this.$root.toastRes(res);
-
-                if (res.ok) {
-                    this.requestServiceStatus(); // Refresh service status
-                }
-            });
-        },
-
-        restartService(serviceName) {
-            this.processing = true;
-
-            this.$root.emitAgent(this.endpoint, "restartService", this.stack.name, serviceName, (res) => {
-                this.processing = false;
-                this.$root.toastRes(res);
-
-                if (res.ok) {
-                    this.requestServiceStatus(); // Refresh service status
-                }
-            });
-        },
     }
 };
 </script>
@@ -856,6 +805,9 @@ export default {
 .editor-box {
     font-family: 'JetBrains Mono', monospace;
     font-size: 14px;
+    &.edit-mode {
+        background-color: #2c2f38 !important;
+    }
 }
 
 .agent-name {

frontend/src/pages/Console.vue

@@ -7,22 +7,9 @@
 
             <div v-else class="alert alert-warning shadow-box" role="alert">
                 <h4 class="alert-heading">{{ $t("Console is not enabled") }}</h4>
-                <i18n-t keypath="ConsoleNotEnabledMSG1" tag="p">
-                    <template #docker><code>{{ $t('dockerCode') }}</code></template>
-                    <template #rm><code>{{ $t('rmCode') }}</code></template>
-                </i18n-t>
-
-                <i18n-t keypath="ConsoleNotEnabledMSG2" tag="p">
-                    <template #rmRf>
-                        <code>{{ $t('rmRfCode') }}</code>
-                    </template>
-                </i18n-t>
-
-                <i18n-t keypath="ConsoleNotEnabledMSG3" tag="p">
-                    <template #envVar>
-                        <code>{{ $t('envVarCode') }}</code>
-                    </template>
-                </i18n-t>
+                <p v-html="$t('ConsoleNotEnabledMSG1')"></p>
+                <p v-html="$t('ConsoleNotEnabledMSG2')"></p>
+                <p v-html="$t('ConsoleNotEnabledMSG3')"></p>
             </div>
         </div>
     </transition>
@@ -50,7 +37,7 @@ export default {
         });
     },
     methods: {
-
+        
     }
 };
 </script>

frontend/src/pages/ContainerTerminal.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="slide-fade" appear>
         <div>
-            <h1 class="mb-3">{{ $t("terminal") }} - {{ serviceName }} ({{ stackName }})</h1>
+            <h1 class="mb-3">{{$t("terminal")}} - {{ serviceName }} ({{ stackName }})</h1>
 
             <div class="mb-3">
                 <router-link :to="sh" class="btn btn-normal me-2">{{ $t("Switch to sh") }}</router-link>

frontend/src/pages/DashboardHome.vue

@@ -29,7 +29,7 @@
                     <!-- Docker Run -->
                     <h2 class="mb-3">{{ $t("Docker Run") }}</h2>
                     <div class="mb-3">
-                        <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run shadow-box" required placeholder="docker run ..."></textarea>
+                        <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
                     </div>
 
                     <button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
@@ -40,7 +40,7 @@
                     <div class="shadow-box big-padding">
                         <h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
 
-                        <div v-for="(agentItem, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
+                        <div v-for="(agent, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
                             <!-- Agent Status -->
                             <template v-if="$root.agentStatusList[endpoint]">
                                 <span v-if="$root.agentStatusList[endpoint] === 'online'" class="badge bg-primary me-2">{{ $t("agentOnline") }}</span>
@@ -49,27 +49,15 @@
                             </template>
 
                             <!-- Agent Display Name -->
-                            <template v-if="$root.agentStatusList[endpoint]">
-                                <span v-if="endpoint === '' && agentItem.name === ''" class="badge bg-secondary me-2">Current</span>
-                                <span v-else-if="agentItem.name === ''" :href="agentItem.url" class="me-2">{{ endpoint }}</span>
-                                <span v-else :href="agentItem.url" class="me-2">{{ agentItem.name }}</span>
-                            </template>
-
-                            <!-- Edit Name  -->
-                            <font-awesome-icon v-if="agentItem.name !== ''" icon="pen-to-square" @click="showEditAgentNameDialog[agentItem.name] = !showEditAgentNameDialog[agentItem.Name]" />
-
-                            <!-- Edit Dialog -->
-                            <BModal v-model="showEditAgentNameDialog[agentItem.name]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Name')" okVariant="info" @ok="updateName(agentItem.url, agentItem.updatedName)">
-                                <label for="Update Name" class="form-label">Current value: {{ $t(agentItem.name) }}</label>
-                                <input id="updatedName" v-model="agentItem.updatedName" type="text" class="form-control" optional>
-                            </BModal>
+                            <span v-if="endpoint === ''">{{ $t("currentEndpoint") }}</span>
+                            <a v-else :href="agent.url" target="_blank">{{ endpoint }}</a>
 
                             <!-- Remove Button -->
-                            <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agentItem.url] = !showRemoveAgentDialog[agentItem.url]" />
+                            <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
 
-                            <!-- Remove Agent Dialog -->
-                            <BModal v-model="showRemoveAgentDialog[agentItem.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agentItem.url)">
-                                <p>{{ agentItem.url }}</p>
+                            <!-- Remoe Agent Dialog -->
+                            <BModal v-model="showRemoveAgentDialog[agent.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agent.url)">
+                                <p>{{ agent.url }}</p>
                                 {{ $t("removeAgentMsg") }}
                             </BModal>
                         </div>
@@ -93,11 +81,6 @@
                                 <input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
                             </div>
 
-                            <div class="mb-3">
-                                <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
-                                <input id="name" v-model="agent.name" type="text" class="form-control" optional>
-                            </div>
-
                             <button type="submit" class="btn btn-primary" :disabled="connectingAgent">
                                 <template v-if="connectingAgent">{{ $t("connecting") }}</template>
                                 <template v-else>{{ $t("connect") }}</template>
@@ -138,14 +121,11 @@ export default {
             dockerRunCommand: "",
             showAgentForm: false,
             showRemoveAgentDialog: {},
-            showEditAgentNameDialog: {},
             connectingAgent: false,
             agent: {
                 url: "http://",
                 username: "",
                 password: "",
-                name: "",
-                updatedName: "",
             }
         };
     },
@@ -219,19 +199,6 @@ export default {
             });
         },
 
-        updateName(url, updatedName) {
-            this.$root.getSocket().emit("updateAgent", url, updatedName, (res) => {
-                this.$root.toastRes(res);
-
-                if (res.ok) {
-                    this.showAgentForm = false;
-                    this.agent = {
-                        updatedName: "",
-                    };
-                }
-            });
-        },
-
         getStatusNum(statusName) {
             let num = 0;
 
@@ -319,7 +286,7 @@ export default {
             }
 
         },
-    }
+    },
 };
 </script>
 
@@ -359,6 +326,7 @@ table {
 }
 
 .docker-run {
+    background-color: $dark-bg !important;
     border: none;
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;

frontend/src/pages/Settings.vue

@@ -83,9 +83,6 @@ export default {
                 security: {
                     title: this.$t("Security"),
                 },
-                globalEnv: {
-                    title: this.$t("GlobalEnv"),
-                },
                 about: {
                     title: this.$t("About"),
                 },

frontend/src/router.ts

@@ -14,7 +14,6 @@ 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 = [
@@ -79,10 +78,6 @@ const routes = [
                                 path: "security",
                                 component: Security,
                             },
-                            {
-                                path: "globalEnv",
-                                component: GlobalEnv,
-                            },
                             {
                                 path: "about",
                                 component: About,

frontend/src/styles/main.scss

@@ -593,6 +593,9 @@ optgroup {
     color: $primary;
 }
 
+.prism-editor__textarea {
+    outline: none !important;
+}
 
 h5.settings-subheading::after {
     content: "";
@@ -673,25 +676,18 @@ code {
     color: $dark-font-color3;
 }
 
-
-.cm-gutters {
-	background-color: transparent !important;
+// Vue Prism Editor bug - workaround
+// https://github.com/koca/vue-prism-editor/issues/87
+/*
+.prism-editor__textarea {
+    width: 999999px !important;
 }
-.dark [contenteditable="true"] {
-	background-color: transparent !important;
-}
-.cm-editor {
-	background-color: transparent !important;
-}
-.cm-activeLine, .cm-activeLineGutter {
-	background-color: transparent !important;
-}
-.cm-selectionBackground {
-    background-color: #74c2ff3d !important;
-}
-.cm-focused {
-    outline: none !important;
+.prism-editor__editor {
+    white-space: pre !important;
 }
+.prism-editor__container {
+    overflow-x: scroll !important;
+}*/
 
 // Localization
 @import "localization.scss";

package.json

@@ -19,8 +19,8 @@
         "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 -t louislam/dockge:beta -t louislam/dockge:nightly --target release -f ./docker/Dockerfile . --push",
         "build:docker-beta": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:beta -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
+        "build:docker-nightly": "npm 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",
-        "release-nightly": "npm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly -t ghcr.io/louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --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",
@@ -38,7 +38,7 @@
         "croner": "~8.1.2",
         "dayjs": "~1.11.13",
         "dotenv": "~16.3.2",
-        "express": "~4.22.1",
+        "express": "~4.21.2",
         "express-static-gzip": "~2.1.8",
         "http-graceful-shutdown": "~3.1.14",
         "jsonwebtoken": "~9.0.2",
@@ -59,8 +59,6 @@
     },
     "devDependencies": {
         "@actions/github": "^6.0.0",
-        "@codemirror/lang-python": "^6.1.7",
-        "@codemirror/lang-yaml": "^6.1.2",
         "@fontsource/jetbrains-mono": "^5.2.5",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
         "@fortawesome/free-regular-svg-icons": "6.4.2",
@@ -79,22 +77,21 @@
         "@xterm/xterm": "beta",
         "bootstrap": "5.3.2",
         "bootstrap-vue-next": "~0.14.10",
-        "codemirror": "^6.0.1",
         "concurrently": "^8.2.2",
         "cross-env": "~7.0.3",
         "eslint": "~8.50.0",
         "eslint-plugin-jsdoc": "~46.8.2",
         "eslint-plugin-vue": "~9.32.0",
+        "prismjs": "~1.30.0",
         "sass": "~1.68.0",
-        "thememirror": "^2.0.1",
         "typescript": "~5.2.2",
         "unplugin-vue-components": "~0.25.2",
         "vite": "~5.4.15",
         "vite-plugin-compression": "~0.5.1",
         "vue": "~3.5.13",
-        "vue-codemirror6": "^1.3.13",
         "vue-eslint-parser": "~9.3.2",
         "vue-i18n": "~10.0.6",
+        "vue-prism-editor": "2.0.0-alpha.2",
         "vue-qrcode": "~2.2.2",
         "vue-router": "~4.5.0",
         "vue-toastification": "2.0.0-rc.5",