HTTPS Monitor using Real Browsers + Limited plugin support (#1787)

src/components/PluginItem.vue

@@ -0,0 +1,102 @@
+<template>
+    <div v-if="! (!plugin.installed && plugin.local)" class="plugin-item pt-4 pb-2">
+        <div class="info">
+            <h5>{{ plugin.fullName }}</h5>
+            <p class="description">
+                {{ plugin.description }}
+            </p>
+            <span class="version">{{ $t("Version") }}: {{ plugin.version }} <a v-if="plugin.repo" :href="plugin.repo" target="_blank">Repo</a></span>
+        </div>
+        <div class="buttons">
+            <button v-if="status === 'installing'" class="btn btn-primary" disabled>{{ $t("installing") }}</button>
+            <button v-else-if="status === 'uninstalling'" class="btn btn-danger" disabled>{{ $t("uninstalling") }}</button>
+            <button v-else-if="plugin.installed || status === 'installed'" class="btn btn-danger" @click="deleteConfirm">{{ $t("uninstall") }}</button>
+            <button v-else class="btn btn-primary" @click="install">{{ $t("install") }}</button>
+        </div>
+
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="uninstall">
+            {{ $t("confirmUninstallPlugin") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import Confirm from "./Confirm.vue";
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {
+        plugin: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            status: "",
+        };
+    },
+    methods: {
+        /**
+         * Show confirmation for deleting a tag
+         */
+        deleteConfirm() {
+            this.$refs.confirmDelete.show();
+        },
+
+        install() {
+            this.status = "installing";
+
+            this.$root.getSocket().emit("installPlugin", this.plugin.repo, this.plugin.name, (res) => {
+                if (res.ok) {
+                    this.status = "";
+                    // eslint-disable-next-line vue/no-mutating-props
+                    this.plugin.installed = true;
+                } else {
+                    this.$root.toastRes(res);
+                }
+            });
+        },
+
+        uninstall() {
+            this.status = "uninstalling";
+
+            this.$root.getSocket().emit("uninstallPlugin", this.plugin.name, (res) => {
+                if (res.ok) {
+                    this.status = "";
+                    // eslint-disable-next-line vue/no-mutating-props
+                    this.plugin.installed = false;
+                } else {
+                    this.$root.toastRes(res);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.plugin-item {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+
+    .info {
+        margin-right: 10px;
+    }
+
+    .description {
+        font-size: 13px;
+        margin-bottom: 0;
+    }
+
+    .version {
+        font-size: 13px;
+    }
+}
+</style>

src/components/settings/Plugins.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div class="mt-3">{{ remotePluginListMsg }}</div>
+        <PluginItem v-for="plugin in remotePluginList" :key="plugin.id" :plugin="plugin" />
+    </div>
+</template>
+
+<script>
+import PluginItem from "../PluginItem.vue";
+
+export default {
+    components: {
+        PluginItem
+    },
+
+    data() {
+        return {
+            remotePluginList: [],
+            remotePluginListMsg: "",
+        };
+    },
+
+    computed: {
+        pluginList() {
+            return this.$parent.$parent.$parent.pluginList;
+        },
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    async mounted() {
+        this.loadList();
+    },
+
+    methods: {
+        loadList() {
+            this.remotePluginListMsg = this.$t("Loading") + "...";
+
+            this.$root.getSocket().emit("getPluginList", (res) => {
+                if (res.ok) {
+                    this.remotePluginList = res.pluginList;
+                    this.remotePluginListMsg = "";
+                } else {
+                    this.remotePluginListMsg = this.$t("loadingError") + " " + res.message;
+                }
+            });
+        }
+    },
+};
+</script>

src/lang/en.json

@@ -428,6 +428,13 @@
     "Schedule Maintenance": "Schedule Maintenance",
     "Date and Time": "Date and Time",
     "DateTime Range": "DateTime Range",
+    "loadingError": "Cannot fetch the data, please try again later.",
+    "plugin": "Plugin | Plugins",
+    "install": "Install",
+    "installing": "Installing",
+    "uninstall": "Uninstall",
+    "uninstalling": "Uninstalling",
+    "confirmUninstallPlugin": "Are you sure want to uninstall this plugin?",
     "smtp": "Email (SMTP)",
     "secureOptionNone": "None / STARTTLS (25, 587)",
     "secureOptionTLS": "TLS (465)",

src/pages/EditMonitor.vue

@@ -70,6 +70,12 @@
                                             Redis
                                         </option>
                                     </optgroup>
+
+                                    <optgroup :label="$t('Custom Monitor Type')">
+                                        <option value="browser">
+                                            (Beta) HTTP(s) - Browser Engine (Chrome/Firefox)
+                                        </option>
+                                    </optgroup>
                                 </select>
                             </div>
 
@@ -80,7 +86,7 @@
                             </div>
 
                             <!-- URL -->
-                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'browser' " class="my-3">
                                 <label for="url" class="form-label">{{ $t("URL") }}</label>
                                 <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
                             </div>
@@ -102,7 +108,7 @@
                             </div>
 
                             <!-- Keyword -->
-                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword' " class="my-3">
+                            <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3">
                                 <label for="keyword" class="form-label">{{ $t("Keyword") }}</label>
                                 <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
                                 <div class="form-text">

src/pages/Settings.vue

@@ -113,6 +113,9 @@ export default {
                 backup: {
                     title: this.$t("Backup"),
                 },
+                plugins: {
+                    title: this.$tc("plugin", 2),
+                },
                 about: {
                     title: this.$t("About"),
                 },

src/router.js

@@ -18,6 +18,7 @@ import NotFound from "./pages/NotFound.vue";
 import DockerHosts from "./components/settings/Docker.vue";
 import MaintenanceDetails from "./pages/MaintenanceDetails.vue";
 import ManageMaintenance from "./pages/ManageMaintenance.vue";
+import Plugins from "./components/settings/Plugins.vue";
 
 // Settings - Sub Pages
 import Appearance from "./components/settings/Appearance.vue";
@@ -31,6 +32,7 @@ import Proxies from "./components/settings/Proxies.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
 
+
 const routes = [
     {
         path: "/",
@@ -120,6 +122,10 @@ const routes = [
                                 path: "backup",
                                 component: Backup,
                             },
+                            {
+                                path: "plugins",
+                                component: Plugins,
+                            },
                             {
                                 path: "about",
                                 component: About,