Added a settings page & localization

server/docker.js

@@ -48,6 +48,9 @@ class DockerHost {
             throw new Error("docker host not found");
         }
 
+        // Delete removed proxy from monitors if exists
+        await R.exec("UPDATE monitor SET docker_host = null WHERE docker_host = ?", [ dockerHostID ]);
+
         await R.trash(bean);
     }
 

src/components/settings/Docker.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div class="dockerHost-list my-4">
+            <p v-if="$root.dockerHostList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(dockerHost, index) in $root.dockerHostList" :key="index" class="list-group-item">
+                    {{ dockerHost.name }}<br>
+                    <a href="#" @click="$refs.dockerHostDialog.show(dockerHost.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.dockerHostDialog.show()">
+                {{ $t("Setup Docker Host") }}
+            </button>
+        </div>
+
+        <DockerHostDialog ref="dockerHostDialog" />
+    </div>
+</template>
+
+<script>
+import DockerHostDialog from "../../components/DockerHostDialog.vue";
+import ActionInput from "../ActionInput.vue";
+
+export default {
+    components: {
+        DockerHostDialog,
+        ActionInput,
+    },
+
+    data() {
+        return {};
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    }
+};
+</script>

src/languages/en.js

@@ -372,12 +372,6 @@ export default {
     smtpDkimHashAlgo: "Hash Algorithm (Optional)",
     smtpDkimheaderFieldNames: "Header Keys to sign (Optional)",
     smtpDkimskipFields: "Header Keys not to sign (Optional)",
-    "Container Name / ID": "Container Name / ID",
-    "Docker Daemon": "Docker Daemon",
-    "Docker Container": "Docker Container",
-    "Docker Type": "Connection Type",
-    docker_socket: "Socket",
-    docker_tcp: "TCP / HTTP",
     wayToGetPagerDutyKey: "You can get this by going to Service -> Service Directory -> (Select a service) -> Integrations -> Add integration. Here you can search for \"Events API V2\". More info {0}",
     "Integration Key": "Integration Key",
     "Integration URL": "Integration URL",
@@ -487,7 +481,7 @@ export default {
     "Leave blank to use a shared sender number.": "Leave blank to use a shared sender number.",
     "Octopush API Version": "Octopush API Version",
     "Legacy Octopush-DM": "Legacy Octopush-DM",
-    "endpoint": "endpoint",
+    endpoint: "endpoint",
     octopushAPIKey: "\"API key\" from HTTP API credentials in control panel",
     octopushLogin: "\"Login\" from HTTP API credentials in control panel",
     promosmsLogin: "API Login Name",
@@ -531,7 +525,17 @@ export default {
     "Coming Soon": "Coming Soon",
     wayToGetClickSendSMSToken: "You can get API Username and API Key from {0} .",
     "Connection String": "Connection String",
-    "Query": "Query",
+    Query: "Query",
     settingsCertificateExpiry: "TLS Certificate Expiry",
     certificationExpiryDescription: "HTTPS Monitors trigger notification when TLS certificate expires in:",
+    "Setup Docker Host": "Setup Docker Host",
+    "Connection Type": "Connection Type",
+    "Docker Daemon": "Docker Daemon",
+    deleteDockerHostMsg: "Are you sure want to delete this docker host for all monitors?",
+    socket: "Socket",
+    tcp: "TCP / HTTP",
+    "Docker Container": "Docker Container",
+    "Container Name / ID": "Container Name / ID",
+    "Docker Host": "Docker Host",
+    "Docker Hosts": "Docker Hosts"
 };

src/pages/EditMonitor.vue

@@ -156,7 +156,7 @@
                                     {{ $t("Not available, please setup.") }}
                                 </p>
 
-                                <div class="mb-3">
+                                <div class="mb-3" v-else>
                                     <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
                                     <select id="docket-host" v-model="monitor.docker_host" class="form-select">
                                         <option v-for="host in $root.dockerHostList" :key="host.id" :value="host.id">{{ host.name }}</option>

src/pages/Settings.vue

@@ -89,6 +89,9 @@ export default {
                 "monitor-history": {
                     title: this.$t("Monitor History"),
                 },
+                "docker-hosts": {
+                    title: this.$t("Docker Hosts"),
+                },
                 security: {
                     title: this.$t("Security"),
                 },

src/router.js

@@ -25,6 +25,7 @@ const Security = () => import("./components/settings/Security.vue");
 import Proxies from "./components/settings/Proxies.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
+import DockerHosts from "./components/settings/Docker.vue";
 
 const routes = [
     {
@@ -95,6 +96,10 @@ const routes = [
                                 path: "monitor-history",
                                 component: MonitorHistory,
                             },
+                            {
+                                path: "docker-hosts",
+                                component: DockerHosts,
+                            },
                             {
                                 path: "security",
                                 component: Security,