wip

backend/dockge-server.ts

@@ -29,6 +29,7 @@ import { Stack } from "./stack";
 import { Cron } from "croner";
 import gracefulShutdown from "http-graceful-shutdown";
 import User from "./models/user";
+import childProcess from "child_process";
 
 export class DockgeServer {
     app : Express;
@@ -516,6 +517,20 @@ export class DockgeServer {
         }
     }
 
+    getDockerNetworkList() : string[] {
+        let res = childProcess.spawnSync("docker", [ "network", "ls", "--format", "{{.Name}}" ]);
+        let list = res.stdout.toString().split("\n");
+
+        // Remove empty string item
+        list = list.filter((item) => {
+            return item !== "";
+        }).sort((a, b) => {
+            return a.localeCompare(b);
+        });
+
+        return list;
+    }
+
     get stackDirFullPath() {
         return path.resolve(this.stacksDir);
     }

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

@@ -203,6 +203,20 @@ export class DockerSocketHandler extends SocketHandler {
                 callbackError(e, callback);
             }
         });
+
+        // getExternalNetworkList
+        socket.on("getDockerNetworkList", async (callback) => {
+            try {
+                checkLogin(socket);
+                const dockerNetworkList = server.getDockerNetworkList();
+                callback({
+                    ok: true,
+                    dockerNetworkList,
+                });
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
     }
 
     saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, isAdd : unknown) : Stack {

frontend/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     About: typeof import('./src/components/settings/About.vue')['default']
     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']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']

frontend/src/components/ArraySelect.vue

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <div v-if="valid">
+            <ul v-if="isArrayInited" class="list-group">
+                <li v-for="(value, index) in array" :key="index" class="list-group-item">
+                    <select v-model="array[index]" class="no-bg domain-input">
+                        <option value="">Select a network...</option>
+                        <option v-for="option in options" :value="option">{{ option }}</option>
+                    </select>
+
+                    <font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
+                </li>
+            </ul>
+
+            <button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
+        </div>
+        <div v-else>
+            Long syntax is not supported here. Please use the YAML editor.
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        placeholder: {
+            type: String,
+            default: "",
+        },
+        displayName: {
+            type: String,
+            required: true,
+        },
+        options: {
+            type: Array,
+            required: true,
+        },
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        array() {
+            // Create the array if not exists, it should be safe.
+            if (!this.service[this.name]) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                this.service[this.name] = [];
+            }
+            return this.service[this.name];
+        },
+
+        /**
+         * Check if the array is inited before called v-for.
+         * Prevent empty arrays inserted to the YAML file.
+         * @return {boolean}
+         */
+        isArrayInited() {
+            return this.service[this.name] !== undefined;
+        },
+
+        service() {
+            return this.$parent.$parent.service;
+        },
+
+        valid() {
+            // Check if the array is actually an array
+            if (!Array.isArray(this.array)) {
+                return false;
+            }
+
+            // Check if the array contains non-object only.
+            for (let item of this.array) {
+                if (typeof item === "object") {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+    },
+    created() {
+
+    },
+    methods: {
+        addField() {
+            this.array.push("");
+        },
+        remove(index) {
+            this.array.splice(index, 1);
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.list-group {
+    background-color: $dark-bg2;
+
+    li {
+        display: flex;
+        align-items: center;
+        padding: 10px 0 10px 10px;
+
+        .domain-input {
+            flex-grow: 1;
+            background-color: $dark-bg2;
+            border: none;
+            color: $dark-font-color;
+            outline: none;
+
+            &::placeholder {
+                color: #1d2634;
+            }
+        }
+    }
+}
+</style>

frontend/src/components/Container.vue

@@ -114,7 +114,12 @@
                     <label class="form-label">
                         {{ $tc("network", 2) }}
                     </label>
-                    <ArrayInput name="networks" :display-name="$t('network')" placeholder="Network Name" />
+
+                    <div v-if="networkList.length === 0 && service.networks.length > 0" class="text-warning mb-3">
+                        No networks available. You need to add internal networks or enable external networks in the right side first.
+                    </div>
+
+                    <ArraySelect name="networks" :display-name="$t('network')" placeholder="Network Name" :options="networkList" />
                 </div>
 
                 <!-- Depends on -->
@@ -165,6 +170,14 @@ export default defineComponent({
     },
     computed: {
 
+        networkList() {
+            let list = [];
+            for (const networkName in this.jsonObject.networks) {
+                list.push(networkName);
+            }
+            return list;
+        },
+
         bgStyle() {
             if (this.status === "running") {
                 return "bg-primary";