Merge pull request #1183 from c0derMo/master

Adding option to monitor other docker containers

src/components/DockerHostDialog.vue

@@ -0,0 +1,177 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Setup Docker Host") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="docker-name" class="form-label">{{ $t("Friendly Name") }}</label>
+                            <input id="docker-name" v-model="dockerHost.name" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-type" class="form-label">{{ $t("Connection Type") }}</label>
+                            <select id="docker-type" v-model="dockerHost.dockerType" class="form-select">
+                                <option v-for="type in connectionTypes" :key="type" :value="type">{{ $t(type) }}</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-daemon" class="form-label">{{ $t("Docker Daemon") }}</label>
+                            <input id="docker-daemon" v-model="dockerHost.dockerDaemon" type="text" class="form-control" required>
+
+                            <div class="form-text">
+                                {{ $t("Examples") }}:
+                                <ul>
+                                    <li>/var/run/docker.sock</li>
+                                    <li>tcp://localhost:2375</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="button" class="btn btn-warning" :disabled="processing" @click="test">
+                            {{ $t("Test") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteDockerHost">
+        {{ $t("deleteDockerHostMsg") }}
+    </Confirm>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+import { useToast } from "vue-toastification";
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {},
+    emits: [ "added" ],
+    data() {
+        return {
+            model: null,
+            processing: false,
+            id: null,
+            connectionTypes: [ "socket", "tcp" ],
+            dockerHost: {
+                name: "",
+                dockerDaemon: "",
+                dockerType: "",
+                // Do not set default value here, please scroll to show()
+            }
+        };
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show();
+        },
+
+        show(dockerHostID) {
+            if (dockerHostID) {
+                let found = false;
+
+                this.id = dockerHostID;
+
+                for (let n of this.$root.dockerHostList) {
+                    if (n.id === dockerHostID) {
+                        this.dockerHost = n;
+                        found = true;
+                        break;
+                    }
+                }
+
+                if (!found) {
+                    toast.error("Docker Host not found!");
+                }
+
+            } else {
+                this.id = null;
+                this.dockerHost = {
+                    name: "",
+                    dockerType: "socket",
+                    dockerDaemon: "/var/run/docker.sock",
+                };
+            }
+
+            this.modal.show();
+        },
+
+        submit() {
+            this.processing = true;
+            this.$root.getSocket().emit("addDockerHost", this.dockerHost, this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+
+                    // Emit added event, doesn't emit edit.
+                    if (! this.id) {
+                        this.$emit("added", res.id);
+                    }
+
+                }
+            });
+        },
+
+        test() {
+            this.processing = true;
+            this.$root.getSocket().emit("testDockerHost", this.dockerHost, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+            });
+        },
+
+        deleteDockerHost() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteDockerHost", this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/settings/Docker.vue

@@ -0,0 +1,48 @@
+<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";
+
+export default {
+    components: {
+        DockerHostDialog,
+    },
+
+    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

@@ -487,7 +487,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,9 +531,19 @@ 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",
     "ntfy Topic": "ntfy Topic",
     "Domain": "Domain",
     "Workstation": "Workstation",

src/mixins/socket.js

@@ -39,6 +39,7 @@ export default {
             uptimeList: { },
             tlsInfoList: {},
             notificationList: [],
+            dockerHostList: [],
             statusPageListLoaded: false,
             statusPageList: [],
             proxyList: [],
@@ -147,6 +148,10 @@ export default {
                 });
             });
 
+            socket.on("dockerHostList", (data) => {
+                this.dockerHostList = data;
+            });
+
             socket.on("heartbeat", (data) => {
                 if (! (data.monitorID in this.heartbeatList)) {
                     this.heartbeatList[data.monitorID] = [];

src/pages/EditMonitor.vue

@@ -27,6 +27,9 @@
                                         <option value="dns">
                                             DNS
                                         </option>
+                                        <option value="docker">
+                                            {{ $t("Docker Container") }}
+                                        </option>
                                     </optgroup>
 
                                     <optgroup label="Passive Monitor Type">
@@ -141,6 +144,34 @@
                                 </div>
                             </template>
 
+                            <!-- Docker Container Name / ID -->
+                            <!-- For Docker Type -->
+                            <div v-if="monitor.type === 'docker'" class="my-3">
+                                <label for="docker_container" class="form-label">{{ $t("Container Name / ID") }}</label>
+                                <input id="docker_container" v-model="monitor.docker_container" type="text" class="form-control" required>
+                            </div>
+
+                            <!-- Docker Host -->
+                            <!-- For Docker Type -->
+                            <div v-if="monitor.type === 'docker'" class="my-3">
+                                <h2 class="mb-2">{{ $t("Docker Host") }}</h2>
+                                <p v-if="$root.dockerHostList.length === 0">
+                                    {{ $t("Not available, please setup.") }}
+                                </p>
+
+                                <div v-else class="mb-3">
+                                    <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>
+                                    </select>
+                                    <a href="#" @click="$refs.dockerHostDialog.show(monitor.docker_host)">{{ $t("Edit") }}</a>
+                                </div>
+
+                                <button class="btn btn-primary me-2" type="button" @click="$refs.dockerHostDialog.show()">
+                                    {{ $t("Setup Docker Host") }}
+                                </button>
+                            </div>
+
                             <!-- MQTT -->
                             <!-- For MQTT Type -->
                             <template v-if="monitor.type === 'mqtt'">
@@ -424,6 +455,7 @@
             </form>
 
             <NotificationDialog ref="notificationDialog" @added="addedNotification" />
+            <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
             <ProxyDialog ref="proxyDialog" @added="addedProxy" />
         </div>
     </transition>
@@ -434,6 +466,7 @@ import VueMultiselect from "vue-multiselect";
 import { useToast } from "vue-toastification";
 import CopyableInput from "../components/CopyableInput.vue";
 import NotificationDialog from "../components/NotificationDialog.vue";
+import DockerHostDialog from "../components/DockerHostDialog.vue";
 import ProxyDialog from "../components/ProxyDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
 import { genSecret, isDev } from "../util.ts";
@@ -445,6 +478,7 @@ export default {
         ProxyDialog,
         CopyableInput,
         NotificationDialog,
+        DockerHostDialog,
         TagsManager,
         VueMultiselect,
     },
@@ -602,6 +636,8 @@ export default {
                     accepted_statuscodes: [ "200-299" ],
                     dns_resolve_type: "A",
                     dns_resolve_server: "1.1.1.1",
+                    docker_container: "",
+                    docker_host: null,
                     proxyId: null,
                     mqttUsername: "",
                     mqttPassword: "",
@@ -729,6 +765,12 @@ export default {
         addedProxy(id) {
             this.monitor.proxyId = id;
         },
+
+        // Added a Docker Host Event
+        // Enable it if the Docker Host is added in EditMonitor.vue
+        addedDockerHost(id) {
+            this.monitor.docker_host = id;
+        }
     },
 };
 </script>

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,