Global.env editor and usage in docker operations (#387)

Co-authored-by: Paco Culebras <69261057+pacoculebras@users.noreply.github.com>
Co-authored-by: Paco Culebras <pculebras@me.com>
Co-authored-by: Cyril59310 <70776486+cyril59310@users.noreply.github.com>
Co-authored-by: Louis Lam <louislam@users.noreply.github.com>
Co-authored-by: cmcooper1980 <31871143+cmcooper1980@users.noreply.github.com>

frontend/components.d.ts

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

frontend/src/components/Container.vue

@@ -9,7 +9,7 @@
                 <div v-if="!isEditMode">
                     <span class="badge me-1" :class="bgStyle">{{ status }}</span>
 
-                    <a v-for="port in envsubstService.ports" :key="port" :href="parsePort(port).url" target="_blank">
+                    <a v-for="port in (ports ?? envsubstService.ports)" :key="port" :href="parsePort(port).url" target="_blank">
                         <span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
                     </a>
                 </div>
@@ -159,6 +159,10 @@ export default defineComponent({
         status: {
             type: String,
             default: "N/A",
+        },
+        ports: {
+            type: Array,
+            default: null
         }
     },
     emits: [

frontend/src/components/settings/GlobalEnv.vue

@@ -0,0 +1,97 @@
+<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/lang/en.json

@@ -114,6 +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.",
     "Saved": "Saved",
     "Deployed": "Deployed",

frontend/src/pages/Compose.vue

@@ -128,7 +128,8 @@
                             :name="name"
                             :is-edit-mode="isEditMode"
                             :first="name === Object.keys(jsonConfig.services)[0]"
-                            :status="serviceStatusList[name]"
+                            :status="serviceStatusList[name]?.state"
+                            :ports="serviceStatusList[name]?.ports"
                         />
                     </div>
 

frontend/src/pages/Settings.vue

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

frontend/src/router.ts

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