WIP

backend/dockge-instance-manager.ts

@@ -62,11 +62,7 @@ export class DockgeInstanceManager {
                 ];
 
                 if (proxyEventList.includes(eventName)) {
-                    // Add the socket url in the res object to determine which socket server it is from
-                    if (args.length > 0 && typeof args[0] === "object") {
-                        args[0].instanceURL = url;
-                    }
-                    socket.emit(eventName, ...args);
+                    socket.emit(eventName, ...args, url);
                 } else {
                     log.debug("INSTANCEMANAGER", "Event not in the proxy list: " + eventName);
                 }

frontend/src/components/StackList.vue

@@ -120,7 +120,7 @@ export default {
          * @returns {Array} The sorted list of stacks.
          */
         sortedStackList() {
-            let result = Object.values(this.$root.stackList);
+            let result = Object.values(this.$root.completeStackList);
 
             result = result.filter(stack => {
                 // filter by search text

frontend/src/components/StackListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="`/compose/${stack.name}`" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
+    <router-link :to="url" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
         <Uptime :stack="stack" :fixed-width="true" class="me-2" />
         <span class="title">{{ stackName }}</span>
     </router-link>
@@ -51,6 +51,12 @@ export default {
         };
     },
     computed: {
+        url() {
+            if (!this.stack.instanceURL) {
+                return `/compose/${this.stack.name}`;
+            }
+            return `/compose/${this.stack.name}/${this.stack.instanceURL}`;
+        },
         depthMargin() {
             return {
                 marginLeft: `${31 * this.depth}px`,

frontend/src/mixins/socket.ts

@@ -28,11 +28,24 @@ export default defineComponent({
             loggedIn: false,
             allowLoginDialog: false,
             username: null,
+            instanceList: {} as Record<string, any>,
             stackList: {},
             composeTemplate: "",
         };
     },
     computed: {
+
+        completeStackList() {
+            let list : Record<string, any> = this.stackList;
+            for (let instanceURL in this.instanceList) {
+                let instance = this.instanceList[instanceURL];
+                for (let stackName in instance.stackList) {
+                    list[stackName + "_" + instanceURL] = instance.stackList[stackName];
+                }
+            }
+            return list;
+        },
+
         usernameFirstChar() {
             if (typeof this.username == "string" && this.username.length >= 1) {
                 return this.username.charAt(0).toUpperCase();
@@ -81,7 +94,6 @@ export default defineComponent({
     },
     mounted() {
         return;
-
     },
     methods: {
         /**
@@ -186,9 +198,24 @@ export default defineComponent({
                 terminal.write(data);
             });
 
-            socket.on("stackList", (res) => {
+            socket.on("stackList", (res, instanceURL) => {
                 if (res.ok) {
-                    this.stackList = res.stackList;
+                    if (!instanceURL) {
+                        this.stackList = res.stackList;
+                    } else {
+                        if (!this.instanceList[instanceURL]) {
+                            this.instanceList[instanceURL] = {
+                                stackList: {},
+                            };
+                        }
+
+                        for (let stackName in res.stackList) {
+                            const stackObj = res.stackList[stackName];
+                            stackObj.instanceURL = instanceURL;
+                        }
+
+                        this.instanceList[instanceURL].stackList = res.stackList;
+                    }
                 }
             });