WIP

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

@@ -11,14 +11,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
         agentSocket.on("deployStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
             try {
                 checkLogin(s);
-                const stack = await this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
+                const stack = await this.saveStack(server, name, composeYAML, composeENV, isAdd);
-                await stack.deploy(socket);
+                await stack.deploy(s);
                 server.sendStackList();
                 callback({
                     ok: true,
                     msg: "Deployed",
                 });
-                stack.joinCombinedTerminal(socket);
+                stack.joinCombinedTerminal(s);
             } catch (e) {
                 callbackError(e, callback);
             }
@@ -26,8 +26,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
 
         agentSocket.on("saveStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
-                this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
+                this.saveStack(server, name, composeYAML, composeENV, isAdd);
                 callback({
                     ok: true,
                     "msg": "Saved"
@@ -40,14 +40,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
 
         agentSocket.on("deleteStack", async (name : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
                 if (typeof(name) !== "string") {
                     throw new ValidationError("Name must be a string");
                 }
                 const stack = await Stack.getStack(server, name);
 
                 try {
-                    await stack.delete(socket);
+                    await stack.delete(s);
                 } catch (e) {
                     server.sendStackList();
                     throw e;
@@ -80,7 +80,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
 
                 callback({
                     ok: true,
-                    stack: stack.toJSON(),
+                    stack: stack.toJSON(s.endpoint),
                 });
             } catch (e) {
                 callbackError(e, callback);
@@ -90,7 +90,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // requestStackList
         agentSocket.on("requestStackList", async (callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
                 server.sendStackList();
                 callback({
                     ok: true,
@@ -104,21 +104,21 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // startStack
         agentSocket.on("startStack", async (stackName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 if (typeof(stackName) !== "string") {
                     throw new ValidationError("Stack name must be a string");
                 }
 
                 const stack = await Stack.getStack(server, stackName);
-                await stack.start(socket);
+                await stack.start(s);
                 callback({
                     ok: true,
                     msg: "Started"
                 });
                 server.sendStackList();
 
-                stack.joinCombinedTerminal(socket);
+                stack.joinCombinedTerminal(s);
 
             } catch (e) {
                 callbackError(e, callback);
@@ -128,14 +128,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // stopStack
         agentSocket.on("stopStack", async (stackName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 if (typeof(stackName) !== "string") {
                     throw new ValidationError("Stack name must be a string");
                 }
 
                 const stack = await Stack.getStack(server, stackName);
-                await stack.stop(socket);
+                await stack.stop(s);
                 callback({
                     ok: true,
                     msg: "Stopped"
@@ -170,14 +170,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // updateStack
         agentSocket.on("updateStack", async (stackName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 if (typeof(stackName) !== "string") {
                     throw new ValidationError("Stack name must be a string");
                 }
 
                 const stack = await Stack.getStack(server, stackName);
-                await stack.update(socket);
+                await stack.update(s);
                 callback({
                     ok: true,
                     msg: "Updated"
@@ -191,14 +191,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // down stack
         agentSocket.on("downStack", async (stackName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 if (typeof(stackName) !== "string") {
                     throw new ValidationError("Stack name must be a string");
                 }
 
                 const stack = await Stack.getStack(server, stackName);
-                await stack.down(socket);
+                await stack.down(s);
                 callback({
                     ok: true,
                     msg: "Downed"
@@ -232,7 +232,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
         // getExternalNetworkList
         agentSocket.on("getDockerNetworkList", async (callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
                 const dockerNetworkList = await server.getDockerNetworkList();
                 callback({
                     ok: true,
@@ -244,7 +244,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
         });
     }
 
-    async saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Promise<Stack> {
+    async saveStack(server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Promise<Stack> {
         // Check types
         if (typeof(name) !== "string") {
             throw new ValidationError("Name must be a string");

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

@@ -1,26 +1,17 @@
-import { SocketHandler } from "../socket-handler.js";
 import { DockgeServer } from "../dockge-server";
 import { callbackError, checkLogin, DockgeSocket, ValidationError } from "../util-server";
 import { log } from "../log";
-import yaml from "yaml";
-import path from "path";
-import fs from "fs";
-import {
-    allowedCommandList,
-    allowedRawKeys,
-    getComposeTerminalName, getContainerExecTerminalName,
-    isDev,
-    PROGRESS_TERMINAL_ROWS
-} from "../../common/util-common";
 import { InteractiveTerminal, MainTerminal, Terminal } from "../terminal";
 import { Stack } from "../stack";
+import { AgentSocketHandler } from "../agent-socket-handler";
+import { AgentSocket } from "../../common/agent-socket";
 
-export class TerminalSocketHandler extends SocketHandler {
+export class TerminalSocketHandler extends AgentSocketHandler {
-    create(socket : DockgeSocket, server : DockgeServer) {
+    create(s : DockgeSocket, server : DockgeServer, agentSocket : AgentSocket) {
 
-        socket.on("terminalInput", async (terminalName : unknown, cmd : unknown, errorCallback) => {
+        agentSocket.on("terminalInput", async (terminalName : unknown, cmd : unknown, errorCallback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 if (typeof(terminalName) !== "string") {
                     throw new Error("Terminal name must be a string.");
@@ -48,9 +39,9 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Main Terminal
-        socket.on("mainTerminal", async (terminalName : unknown, callback) => {
+        agentSocket.on("mainTerminal", async (terminalName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 // TODO: Reset the name here, force one main terminal for now
                 terminalName = "console";
@@ -81,7 +72,7 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Interactive Terminal for containers
-        socket.on("interactiveTerminal", async (stackName : unknown, serviceName : unknown, shell : unknown, callback) => {
+        agentSocket.on("interactiveTerminal", async (stackName : unknown, serviceName : unknown, shell : unknown, callback) => {
             try {
                 checkLogin(socket);
 
@@ -113,14 +104,14 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Join Output Terminal
-        socket.on("terminalJoin", async (terminalName : unknown, callback) => {
+        agentSocket.on("terminalJoin", async (terminalName : unknown, callback) => {
             if (typeof(callback) !== "function") {
                 log.debug("console", "Callback is not a function.");
                 return;
             }
 
             try {
-                checkLogin(socket);
+                checkLogin(s);
                 if (typeof(terminalName) !== "string") {
                     throw new ValidationError("Terminal name must be a string.");
                 }
@@ -141,9 +132,9 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Leave Combined Terminal
-        socket.on("leaveCombinedTerminal", async (stackName : unknown, callback) => {
+        agentSocket.on("leaveCombinedTerminal", async (stackName : unknown, callback) => {
             try {
-                checkLogin(socket);
+                checkLogin(s);
 
                 log.debug("leaveCombinedTerminal", "Stack name: " + stackName);
 
@@ -152,7 +143,7 @@ export class TerminalSocketHandler extends SocketHandler {
                 }
 
                 const stack = await Stack.getStack(server, stackName);
-                await stack.leaveCombinedTerminal(socket);
+                await stack.leaveCombinedTerminal(s);
 
                 callback({
                     ok: true,
@@ -163,43 +154,39 @@ export class TerminalSocketHandler extends SocketHandler {
         });
 
         // Resize Terminal
-        socket.on(
+        agentSocket.on("terminalResize", async (terminalName: unknown, rows: unknown, cols: unknown) => {
-            "terminalResize",
+            log.info("terminalResize", `Terminal: ${terminalName}`);
-            async (terminalName: unknown, rows: unknown, cols: unknown) => {
+            try {
-                log.info("terminalResize", `Terminal: ${terminalName}`);
+                checkLogin(socket);
-                try {
+                if (typeof terminalName !== "string") {
-                    checkLogin(socket);
+                    throw new Error("Terminal name must be a string.");
-                    if (typeof terminalName !== "string") {
+                }
-                        throw new Error("Terminal name must be a string.");
-                    }
 
-                    if (typeof rows !== "number") {
+                if (typeof rows !== "number") {
-                        throw new Error("Command must be a number.");
+                    throw new Error("Command must be a number.");
-                    }
+                }
-                    if (typeof cols !== "number") {
+                if (typeof cols !== "number") {
-                        throw new Error("Command must be a number.");
+                    throw new Error("Command must be a number.");
-                    }
+                }
 
-                    let terminal = Terminal.getTerminal(terminalName);
+                let terminal = Terminal.getTerminal(terminalName);
 
-                    // log.info("terminal", terminal);
+                // log.info("terminal", terminal);
-                    if (terminal instanceof Terminal) {
+                if (terminal instanceof Terminal) {
-                        //log.debug("terminalInput", "Terminal found, writing to terminal.");
+                    //log.debug("terminalInput", "Terminal found, writing to terminal.");
-                        terminal.rows = rows;
+                    terminal.rows = rows;
-                        terminal.cols = cols;
+                    terminal.cols = cols;
-                    } else {
+                } else {
-                        throw new Error(`${terminalName} Terminal not found.`);
+                    throw new Error(`${terminalName} Terminal not found.`);
-                    }
+                }
-                } catch (e) {
+            } catch (e) {
-                    log.debug(
+                log.debug("terminalResize",
-                        "terminalResize",
                         // Added to prevent the lint error when adding the type
                         // and ts type checker saying type is unknown.
                         // @ts-ignore
                         `Error on ${terminalName}: ${e.message}`
-                    );
+                );
-                }
             }
-        );
+        });
     }
 }

backend/dockge-instance-manager.ts

@@ -111,4 +111,11 @@ export class DockgeInstanceManager {
         client?.emit("agent", endpoint, eventName, ...args);
     }
 
+    emitToAllEndpoints(eventName: string, ...args : unknown[]) {
+        log.debug("INSTANCEMANAGER", "Emitting event to all endpoints");
+        for (let endpoint in this.instanceSocketList) {
+            this.emitToEndpoint(endpoint, eventName, ...args);
+        }
+    }
+
 }

backend/dockge-server.ts

@@ -25,7 +25,7 @@ import { Arguments, Config, DockgeSocket } from "./util-server";
 import { DockerSocketHandler } from "./agent-socket-handlers/docker-socket-handler";
 import expressStaticGzip from "express-static-gzip";
 import path from "path";
-import { TerminalSocketHandler } from "./socket-handlers/terminal-socket-handler";
+import { TerminalSocketHandler } from "./agent-socket-handlers/terminal-socket-handler";
 import { Stack } from "./stack";
 import { Cron } from "croner";
 import gracefulShutdown from "http-graceful-shutdown";
@@ -52,17 +52,20 @@ export class DockgeServer {
     ];
 
     /**
-     * List of socket handlers
+     * List of socket handlers (no agent support)
      */
     socketHandlerList : SocketHandler[] = [
         new MainSocketHandler(),
-        new TerminalSocketHandler(),
     ];
 
     agentProxySocketHandler = new AgentProxySocketHandler();
 
+    /**
+     * List of socket handlers (support agent)
+     */
     agentSocketHandlerList : AgentSocketHandler[] = [
         new DockerSocketHandler(),
+        new TerminalSocketHandler(),
     ];
 
     /**

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

@@ -3,6 +3,7 @@ import { DockgeServer } from "../dockge-server";
 import { log } from "../log";
 import { checkLogin, DockgeSocket } from "../util-server";
 import { AgentSocket } from "../../common/agent-socket";
+import { ALL_ENDPOINTS } from "../../common/util-common";
 
 export class AgentProxySocketHandler extends SocketHandler {
 
@@ -14,19 +15,22 @@ export class AgentProxySocketHandler extends SocketHandler {
 
                 // Check Type
                 if (typeof(endpoint) !== "string") {
-                    throw new Error("Endpoint must be a string");
+                    throw new Error("Endpoint must be a string: " + endpoint);
                 }
                 if (typeof(eventName) !== "string") {
                     throw new Error("Event name must be a string");
                 }
 
-                log.debug("agent", "Proxying request to " + endpoint + " for " + eventName);
+                if (endpoint === ALL_ENDPOINTS) {      // Send to all endpoints
+                    log.debug("agent", "Sending to all endpoints: " + eventName);
+                    socket.instanceManager.emitToAllEndpoints(eventName, ...args);
 
-                // Direct connection or matching endpoint
+                } else if (!endpoint || endpoint === socket.endpoint) {      // Direct connection or matching endpoint
-                if (!endpoint || endpoint === socket.endpoint) {
+                    log.debug("agent", "Matched endpoint: " + eventName);
-                    log.debug("agent", "Direct connection");
                     agentSocket.call(eventName, ...args);
+
                 } else {
+                    log.debug("agent", "Proxying request to " + endpoint + " for " + eventName);
                     socket.instanceManager.emitToEndpoint(endpoint, eventName, ...args);
                 }
             } catch (e) {

backend/terminal.ts

@@ -35,6 +35,8 @@ export class Terminal {
     public enableKeepAlive : boolean = false;
     protected keepAliveInterval? : NodeJS.Timeout;
 
+    protected socketList : DockgeSocket[] = [];
+
     constructor(server : DockgeServer, name : string, file : string, args : string | string[], cwd : string) {
         this.server = server;
         this._name = name;
@@ -87,8 +89,7 @@ export class Terminal {
 
             // Close if there is no clients
             this.keepAliveInterval = setInterval(() => {
-                const clients = this.server.io.sockets.adapter.rooms.get(this.name);
+                const numClients = this.socketList.length;
-                const numClients = clients ? clients.size : 0;
 
                 if (numClients === 0) {
                     log.debug("Terminal", "Terminal " + this.name + " has no client, closing...");
@@ -112,8 +113,9 @@ export class Terminal {
             // On Data
             this._ptyProcess.onData((data) => {
                 this.buffer.pushItem(data);
-                if (this.server.io) {
+
-                    this.server.io.to(this.name).emit("terminalWrite", this.name, data);
+                for (const socket of this.socketList) {
+                    socket.emitAgent("terminalWrite", this.name, data);
                 }
             });
 
@@ -137,10 +139,12 @@ export class Terminal {
      * @param res
      */
     protected exit = (res : {exitCode: number, signal?: number | undefined}) => {
-        this.server.io.to(this.name).emit("terminalExit", this.name, res.exitCode);
+        for (const socket of this.socketList) {
+            socket.emitAgent("terminalExit", this.name, res.exitCode);
+        }
 
-        // Remove room
+        // Remove all clients
-        this.server.io.in(this.name).socketsLeave(this.name);
+        this.socketList = [];
 
         Terminal.terminalMap.delete(this.name);
         log.debug("Terminal", "Terminal " + this.name + " exited with code " + res.exitCode);
@@ -157,11 +161,14 @@ export class Terminal {
     }
 
     public join(socket : DockgeSocket) {
-        socket.join(this.name);
+        this.socketList.push(socket);
     }
 
     public leave(socket : DockgeSocket) {
-        socket.leave(this.name);
+        const index = this.socketList.indexOf(socket);
+        if (index !== -1) {
+            this.socketList.splice(index, 1);
+        }
     }
 
     public get ptyProcess() {

common/util-common.ts

@@ -43,6 +43,8 @@ async function initRandomBytes() {
     }
 }
 
+export const ALL_ENDPOINTS = "##ALL_DOCKGE_ENDPOINTS##";
+
 // Stack Status
 export const UNKNOWN = 0;
 export const CREATED_FILE = 1;

frontend/src/components/NetworkInput.vue

@@ -65,6 +65,10 @@ export default {
         editorFocus() {
             return this.$parent.$parent.editorFocus;
         },
+
+        endpoint() {
+            return this.$parent.$parent.endpoint;
+        },
     },
     watch: {
         "jsonConfig.networks": {
@@ -134,7 +138,7 @@ export default {
         },
 
         loadExternalNetworkList() {
-            this.$root.getSocket().emit("getDockerNetworkList", (res) => {
+            this.$root.emitAgent(this.endpoint, "getDockerNetworkList", (res) => {
                 if (res.ok) {
                     this.externalNetworkList = res.dockerNetworkList.filter((n) => {
                         // Filter out this stack networks

frontend/src/components/StackListItem.vue

@@ -58,7 +58,7 @@ export default {
             if (this.stack.endpoint) {
                 return this.stack.endpoint;
             } else {
-                return "Default";
+                return "Current";
             }
         },
         url() {

frontend/src/components/Terminal.vue

@@ -24,6 +24,11 @@ export default {
             require: true,
         },
 
+        endpoint: {
+            type: String,
+            require: true,
+        },
+
         // Require if mode is interactive
         stackName: {
             type: String,
@@ -134,15 +139,15 @@ export default {
     },
 
     methods: {
-        bind(name) {
+        bind(endpoint, name) {
             // Workaround: normally this.name should be set, but it is not sometimes, so we use the parameter, but eventually this.name and name must be the same name
             if (name) {
                 this.$root.unbindTerminal(name);
-                this.$root.bindTerminal(name, this.terminal);
+                this.$root.bindTerminal(endpoint, name, this.terminal);
                 console.debug("Terminal bound via parameter: " + name);
             } else if (this.name) {
                 this.$root.unbindTerminal(this.name);
-                this.$root.bindTerminal(this.name, this.terminal);
+                this.$root.bindTerminal(this.endpoint, this.name, this.terminal);
                 console.debug("Terminal bound: " + this.name);
             } else {
                 console.debug("Terminal name not set");

frontend/src/lang/en.json

@@ -99,5 +99,7 @@
     "connecting...": "Connecting to the socket server…",
     "url": "URL | URLs",
     "extra": "Extra",
-    "newUpdate": "New Update"
+    "newUpdate": "New Update",
+    "dockgeAgent": "Dockge Agent | Dockge Agents",
+    "currentEndpoint": "Current"
 }

frontend/src/layouts/Layout.vue

@@ -98,6 +98,7 @@
 <script>
 import Login from "../components/Login.vue";
 import { compareVersions } from "compare-versions";
+import { ALL_ENDPOINTS } from "../../../common/util-common";
 
 export default {
 
@@ -145,7 +146,7 @@ export default {
 
     methods: {
         scanFolder() {
-            this.$root.getSocket().emit("requestStackList", (res) => {
+            this.$root.emitAgent(ALL_ENDPOINTS, "requestStackList", (res) => {
                 this.$root.toastRes(res);
             });
         },

frontend/src/mixins/socket.ts

@@ -197,7 +197,10 @@ export default defineComponent({
                 this.$router.push("/setup");
             });
 
-            socket.on("terminalWrite", (terminalName, data) => {
+            agentSocket.on("terminalWrite", (terminalName, data) => {
+
+                console.log(terminalName, data);
+
                 const terminal = terminalMap.get(terminalName);
                 if (!terminal) {
                     //console.error("Terminal not found: " + terminalName);
@@ -345,9 +348,9 @@ export default defineComponent({
 
         },
 
-        bindTerminal(terminalName : string, terminal : Terminal) {
+        bindTerminal(endpoint : string, terminalName : string, terminal : Terminal) {
             // Load terminal, get terminal screen
-            socket.emit("terminalJoin", terminalName, (res) => {
+            this.emitAgent(endpoint, "terminalJoin", terminalName, (res) => {
                 if (res.ok) {
                     terminal.write(res.buffer);
                     terminalMap.set(terminalName, terminal);

frontend/src/pages/Compose.vue

@@ -70,6 +70,7 @@
                     ref="progressTerminal"
                     class="mb-3 terminal"
                     :name="terminalName"
+                    :endpoint="endpoint"
                     :rows="progressTerminalRows"
                     @has-data="showProgressTerminal = true; submitted = true;"
                 ></Terminal>
@@ -87,6 +88,15 @@
                                 <input id="name" v-model="stack.name" type="text" class="form-control" required @blur="stackNameToLowercase">
                                 <div class="form-text">{{ $t("Lowercase only") }}</div>
                             </div>
+
+                            <!-- Endpoint -->
+                            <div class="mt-3">
+                                <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
+                                <select v-model="stack.endpoint" class="form-select">
+                                    <option value="">{{ $t("currentEndpoint") }}</option>
+                                    <option value="rs-debian:5001">rs-debian:5001</option>
+                                </select>
+                            </div>
                         </div>
                     </div>
 
@@ -139,6 +149,7 @@
                             ref="combinedTerminal"
                             class="mb-3 terminal"
                             :name="combinedTerminalName"
+                            :endpoint="endpoint"
                             :rows="combinedTerminalRows"
                             :cols="combinedTerminalCols"
                             style="height: 350px;"
@@ -411,7 +422,7 @@ export default {
         $route(to, from) {
             // Leave Combined Terminal
             console.debug("leaveCombinedTerminal", from.params.stackName);
-            this.$root.getSocket().emit("leaveCombinedTerminal", this.stack.name, () => {});
+            this.$root.emitAgent(this.endpoint, "leaveCombinedTerminal", this.stack.name, () => {});
         }
     },
     mounted() {
@@ -441,6 +452,7 @@ export default {
                 composeYAML,
                 composeENV,
                 isManagedByDockge: true,
+                endpoint: "",
             };
 
             this.yamlCodeChange();
@@ -489,7 +501,7 @@ export default {
         },
 
         bindTerminal() {
-            this.$refs.progressTerminal?.bind(this.terminalName);
+            this.$refs.progressTerminal?.bind(this.endpoint, this.terminalName);
         },
 
         loadStack() {
@@ -536,9 +548,9 @@ export default {
                 }
             }
 
-            this.bindTerminal(this.terminalName);
+            this.bindTerminal();
 
-            this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
+            this.$root.emitAgent(this.stack.endpoint, "deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
 
@@ -552,7 +564,7 @@ export default {
         saveStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
+            this.$root.emitAgent(this.stack.endpoint, "saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
 
@@ -566,7 +578,7 @@ export default {
         startStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("startStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "startStack", this.stack.name, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
             });
@@ -575,7 +587,7 @@ export default {
         stopStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("stopStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "stopStack", this.stack.name, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
             });
@@ -584,7 +596,7 @@ export default {
         downStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("downStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "downStack", this.stack.name, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
             });
@@ -593,7 +605,7 @@ export default {
         restartStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("restartStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "restartStack", this.stack.name, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
             });
@@ -602,14 +614,14 @@ export default {
         updateStack() {
             this.processing = true;
 
-            this.$root.getSocket().emit("updateStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "updateStack", this.stack.name, (res) => {
                 this.processing = false;
                 this.$root.toastRes(res);
             });
         },
 
         deleteDialog() {
-            this.$root.getSocket().emit("deleteStack", this.stack.name, (res) => {
+            this.$root.emitAgent(this.endpoint, "deleteStack", this.stack.name, (res) => {
                 this.$root.toastRes(res);
                 if (res.ok) {
                     this.$router.push("/");

frontend/src/pages/ContainerTerminal.vue

@@ -7,7 +7,7 @@
                 <router-link :to="sh" class="btn btn-normal me-2">Switch to sh</router-link>
             </div>
 
-            <Terminal class="terminal" :rows="20" mode="interactive" :name="terminalName" :stack-name="stackName" :service-name="serviceName" :shell="shell"></Terminal>
+            <Terminal class="terminal" :rows="20" mode="interactive" :name="terminalName" :stack-name="stackName" :service-name="serviceName" :shell="shell" :endpoint="endpoint"></Terminal>
         </div>
     </transition>
 </template>
@@ -27,6 +27,9 @@ export default {
         stackName() {
             return this.$route.params.stackName;
         },
+        endpoint() {
+            // TODO
+        },
         shell() {
             return this.$route.params.type;
         },

frontend/src/pages/DashboardHome.vue

@@ -5,19 +5,34 @@
                 {{ $t("home") }}
             </h1>
 
-            <div class="shadow-box big-padding text-center mb-4">
+            <div class="row first-row">
-                <div class="row">
+                <div class="col-md-6">
-                    <div class="col">
+                    <div class="shadow-box big-padding text-center mb-4">
-                        <h3>{{ $t("active") }}</h3>
+                        <div class="row">
-                        <span class="num active">{{ activeNum }}</span>
+                            <div class="col">
+                                <h3>{{ $t("active") }}</h3>
+                                <span class="num active">{{ activeNum }}</span>
+                            </div>
+                            <div class="col">
+                                <h3>{{ $t("exited") }}</h3>
+                                <span class="num exited">{{ exitedNum }}</span>
+                            </div>
+                            <div class="col">
+                                <h3>{{ $t("inactive") }}</h3>
+                                <span class="num inactive">{{ inactiveNum }}</span>
+                            </div>
+                        </div>
                     </div>
-                    <div class="col">
+                </div>
-                        <h3>{{ $t("exited") }}</h3>
+                <div class="col-md-6">
-                        <span class="num exited">{{ exitedNum }}</span>
+                    <div class="shadow-box big-padding">
-                    </div>
+                        <h3 class="mb-3">{{ $tc("dockgeAgent", 2) }} </h3>
-                    <div class="col">
+
-                        <h3>{{ $t("inactive") }}</h3>
+                        <div class="mb-3">
-                        <span class="num inactive">{{ inactiveNum }}</span>
+                            Current
+                        </div>
+
+                        <button class="btn btn-normal">Add Agent</button>
                     </div>
                 </div>
             </div>
@@ -27,7 +42,7 @@
                 <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
             </div>
 
-            <button class="btn-normal btn" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
+            <button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
         </div>
     </transition>
     <router-view ref="child" />
@@ -230,4 +245,9 @@ table {
     font-family: 'JetBrains Mono', monospace;
     font-size: 15px;
 }
+
+.first-row .shadow-box {
+
+}
+
 </style>