WIP

backend/dockge-instance-manager.ts

@@ -20,8 +20,9 @@ export class DockgeInstanceManager {
 
     connect(socket: DockgeSocket) {
 
-        let list : Record<string, { username : string, password : string}> = {
-            "ws://louis-twister-pi:5001": {
+        let list : Record<string, {tls : boolean, username : string, password : string}> = {
+            "louis-twister-pi:5001": {
+                tls: false,
                 username: "admin",
                 password: process.env.DOCKGE_PW || "",
             }
@@ -31,28 +32,41 @@ export class DockgeInstanceManager {
             log.info("INSTANCEMANAGER", "Connecting to all instance socket server(s)...");
         }
 
-        for (let url in list) {
-            let item = list[url];
+        for (let endpoint in list) {
+            let item = list[endpoint];
 
+            let url = (item.tls) ? "wss://" : "ws://";
+            url += endpoint;
+
+            log.info("INSTANCEMANAGER", "Connecting to the socket server: " + endpoint);
             let client = io(url, {
                 transports: [ "websocket", "polling" ],
             });
 
             client.on("connect", () => {
-                log.info("INSTANCEMANAGER", "Connected to the socket server: " + url);
+                log.info("INSTANCEMANAGER", "Connected to the socket server: " + endpoint);
 
                 client.emit("login", {
                     username: item.username,
                     password: item.password,
                 }, (res) => {
                     if (res.ok) {
-                        log.info("INSTANCEMANAGER", "Logged in to the socket server: " + url);
+                        log.info("INSTANCEMANAGER", "Logged in to the socket server: " + endpoint);
                     } else {
-                        log.error("INSTANCEMANAGER", "Failed to login to the socket server: " + url);
+                        log.error("INSTANCEMANAGER", "Failed to login to the socket server: " + endpoint);
                     }
                 });
             });
 
+            client.on("error", (err) => {
+                log.error("INSTANCEMANAGER", "Error from the socket server: " + endpoint);
+                log.error("INSTANCEMANAGER", err);
+            });
+
+            client.on("disconnect", () => {
+                log.info("INSTANCEMANAGER", "Disconnected from the socket server: " + endpoint);
+            });
+
             // Catch all events
             client.onAny((eventName, ...args) => {
                 log.debug("INSTANCEMANAGER", "Received event: " + eventName);
@@ -61,10 +75,15 @@ export class DockgeInstanceManager {
                     "stackList",
                 ];
 
-                if (proxyEventList.includes(eventName)) {
-                    socket.emit(eventName, ...args, url);
+                if (proxyEventList.includes(eventName) &&
+                    args.length >= 1 &&
+                    typeof(args[0]) === "object" &&
+                    args[0].endpoint === undefined      // Only proxy the event from the endpoint, any upstream event will be ignored
+                ) {
+                    args[0].endpoint = endpoint;
+                    socket.emit(eventName, ...args);
                 } else {
-                    log.debug("INSTANCEMANAGER", "Event not in the proxy list: " + eventName);
+                    log.debug("INSTANCEMANAGER", "Event not in the proxy list or cannot set endpoint to the res: " + eventName);
                 }
             });
 

backend/dockge-server.ts

@@ -525,6 +525,7 @@ export class DockgeServer {
                 this.io.to(room).emit("stackList", {
                     ok: true,
                     stackList: Object.fromEntries(map),
+                    endpoint: undefined,
                 });
             }
         }

frontend/src/components/StackListItem.vue

@@ -1,7 +1,10 @@
 <template>
     <router-link :to="url" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
         <Uptime :stack="stack" :fixed-width="true" class="me-2" />
-        <span class="title">{{ stackName }}</span>
+        <div class="title">
+            <span>{{ stackName }}</span>
+            <div v-if="stack.endpoint" class="endpoint">{{ stack.endpoint }}</div>
+        </div>
     </router-link>
 </template>
 
@@ -52,10 +55,10 @@ export default {
     },
     computed: {
         url() {
-            if (!this.stack.instanceURL) {
+            if (!this.stack.endpoint) {
                 return `/compose/${this.stack.name}`;
             }
-            return `/compose/${this.stack.name}/${this.stack.instanceURL}`;
+            return `/compose/${this.stack.name}/${this.stack.endpoint}`;
         },
         depthMargin() {
             return {
@@ -123,16 +126,36 @@ export default {
     padding-right: 2px !important;
 }
 
-// .stack-item {
-//     width: 100%;
-// }
-
-.tags {
-    margin-top: 4px;
-    padding-left: 67px;
+.item {
+    text-decoration: none;
     display: flex;
-    flex-wrap: wrap;
-    gap: 0;
+    align-items: center;
+    min-height: 52px;
+    border-radius: 10px;
+    transition: all ease-in-out 0.15s;
+    width: 100%;
+    padding: 5px 8px;
+
+    &.disabled {
+        opacity: 0.3;
+    }
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    &.active {
+        background-color: #cdf8f4;
+    }
+
+    .title {
+        margin-top: -4px;
+    }
+
+    .endpoint {
+        font-size: 12px;
+        color: $dark-font-color3;
+    }
 }
 
 .collapsed {

frontend/src/mixins/socket.ts

@@ -37,10 +37,10 @@ export default defineComponent({
 
         completeStackList() {
             let list : Record<string, any> = this.stackList;
-            for (let instanceURL in this.instanceList) {
-                let instance = this.instanceList[instanceURL];
+            for (let endpoint in this.instanceList) {
+                let instance = this.instanceList[endpoint];
                 for (let stackName in instance.stackList) {
-                    list[stackName + "_" + instanceURL] = instance.stackList[stackName];
+                    list[stackName + "_" + endpoint] = instance.stackList[stackName];
                 }
             }
             return list;
@@ -198,23 +198,25 @@ export default defineComponent({
                 terminal.write(data);
             });
 
-            socket.on("stackList", (res, instanceURL) => {
+            socket.on("stackList", (res) => {
+                console.log(res);
                 if (res.ok) {
-                    if (!instanceURL) {
+                    if (!res.endpoint) {
                         this.stackList = res.stackList;
                     } else {
-                        if (!this.instanceList[instanceURL]) {
-                            this.instanceList[instanceURL] = {
+                        if (!this.instanceList[res.endpoint]) {
+                            this.instanceList[res.endpoint] = {
                                 stackList: {},
                             };
                         }
 
+                        // Set endpoint for each stack
                         for (let stackName in res.stackList) {
                             const stackObj = res.stackList[stackName];
-                            stackObj.instanceURL = instanceURL;
+                            stackObj.endpoint = res.endpoint;
                         }
 
-                        this.instanceList[instanceURL].stackList = res.stackList;
+                        this.instanceList[res.endpoint].stackList = res.stackList;
                     }
                 }
             });

frontend/src/router.ts

@@ -38,7 +38,10 @@ const routes = [
                                 path: "/compose/:stackName",
                                 name: "compose",
                                 component: Compose,
-                                props: true,
+                            },
+                            {
+                                path: "/compose/:stackName/:endpoint",
+                                component: Compose,
                             },
                             {
                                 path: "/terminal/:stackName/:serviceName/:type",

frontend/src/styles/main.scss

@@ -490,33 +490,7 @@ optgroup {
         }
     }
 
-    .item {
-        display: flex;
-        align-items: center;
-        height: 52px;
-        text-decoration: none;
-        border-radius: 10px;
-        transition: all ease-in-out 0.15s;
-        width: 100%;
-        padding: 0 8px;
-
-        &.disabled {
-            opacity: 0.3;
-        }
-
-        &:hover {
-            background-color: $highlight-white;
-        }
-
-        &.active {
-            background-color: #cdf8f4;
-        }
 
-        .title {
-            display: inline-block;
-            margin-top: -4px;
-        }
-    }
 }
 
 .alert-success {