Feature: remote browser support (#3904)

* [empty commit] pull request for remote browser support

* Remote browser: Added UI screens and DB tables.

* Remote browser working

* Fixing tests

* Fix tests

* Fix tests

* fix tests

* Test browser

* revert init_db.js

* Changed drop down to ActionSelect

* Fix translations

* added remote browsers toggle

* revert changes package-lock

* Fix bad english

* Set default remote browser

* Remote browsers Requested changes

* fixed description.

src/components/RemoteBrowserDialog.vue

@@ -0,0 +1,185 @@
+<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("Add a Remote Browser") }}
+                        </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="remote-browser-name" class="form-label">{{ $t("Friendly Name") }}</label>
+                            <input id="remote-browser-name" v-model="remoteBrowser.name" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="remote-browser-url" class="form-label">{{ $t("URL") }}</label>
+                            <input id="remote-browser-url" v-model="remoteBrowser.url" type="text" class="form-control" required>
+
+                            <div class="form-text mt-3">
+                                {{ $t("Examples") }}:
+                                <ul>
+                                    <li>ws://chrome.browserless.io/playwright?token=YOUR-API-TOKEN</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("deleteRemoteBrowserMessage") }}
+    </Confirm>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {},
+    emits: [ "added" ],
+    data() {
+        return {
+            modal: null,
+            processing: false,
+            id: null,
+            remoteBrowser: {
+                name: "",
+                url: "",
+                // Do not set default value here, please scroll to show()
+            }
+        };
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+
+        /**
+         * Confirm deletion of docker host
+         * @returns {void}
+         */
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Show specified docker host
+         * @param {number} remoteBrowserID ID of host to show
+         * @returns {void}
+         */
+        show(remoteBrowserID) {
+            if (remoteBrowserID) {
+                let found = false;
+
+                this.id = remoteBrowserID;
+
+                for (let n of this.$root.remoteBrowserList) {
+                    if (n.id === remoteBrowserID) {
+                        this.remoteBrowser = n;
+                        found = true;
+                        break;
+                    }
+                }
+
+                if (!found) {
+                    this.$root.toastError(this.$t("Remote Browser not found!"));
+                }
+
+            } else {
+                this.id = null;
+                this.remoteBrowser = {
+                    name: "",
+                    url: "",
+                };
+            }
+
+            this.modal.show();
+        },
+
+        /**
+         * Add docker host
+         * @returns {void}
+         */
+        submit() {
+            this.processing = true;
+            this.$root.getSocket().emit("addRemoteBrowser", this.remoteBrowser, 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 the docker host
+         * @returns {void}
+         */
+        test() {
+            this.processing = true;
+            this.$root.getSocket().emit("testRemoteBrowser", this.remoteBrowser, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+            });
+        },
+
+        /**
+         * Delete this docker host
+         * @returns {void}
+         */
+        deleteDockerHost() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteRemoteBrowser", 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/RemoteBrowsers.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <div class="dockerHost-list my-4">
+            <p v-if="$root.remoteBrowserList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(remoteBrowser, index) in $root.remoteBrowserList" :key="index" class="list-group-item">
+                    {{ remoteBrowser.name }}<br>
+                    <a href="#" @click="$refs.remoteBrowserDialog.show(remoteBrowser.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.remoteBrowserDialog.show()">
+                <font-awesome-icon icon="plus" /> {{ $t("Add Remote Browser") }}
+            </button>
+        </div>
+
+        <div class="my-4 pt-4">
+            <h5 class="my-4 settings-subheading">{{ $t("What is a Remote Browser?") }}</h5>
+            <p>{{ $t("remoteBrowsersDescription") }} <a href="https://hub.docker.com/r/browserless/chrome">{{ $t("self-hosted container") }}</a></p>
+        </div>
+
+        <RemoteBrowserDialog ref="remoteBrowserDialog" />
+    </div>
+</template>
+
+<script>
+import RemoteBrowserDialog from "../../components/RemoteBrowserDialog.vue";
+
+export default {
+    components: {
+        RemoteBrowserDialog,
+    },
+
+    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/lang/en.json

@@ -859,6 +859,15 @@
     "successEnabled": "Enabled Successfully.",
     "tagNotFound": "Tag not found.",
     "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
+    "Remote Browsers": "Remote Browsers",
+    "Remote Browser": "Remote Browser",
+    "Add a Remote Browser": "Add a Remote Browser",
+    "Remote Browser not found!": "Remote Browser not found!",
+    "remoteBrowsersDescription": "Remote Browsers are an alternative to running Chromium locally. Setup with a service like browserless.io or connect to your own",
+    "self-hosted container": "self-hosted container",
+    "remoteBrowserToggle": "By default Chromium runs inside the Uptime Kuma container. You can use a remote browser by toggling this switch.",
+    "useRemoteBrowser": "Use a Remote Browser",
+    "deleteRemoteBrowserMessage": "Are you sure want to delete this Remote Browser for all monitors?",
     "GrafanaOncallUrl": "Grafana Oncall URL",
     "Browser Screenshot": "Browser Screenshot"
 }

src/mixins/socket.js

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

src/pages/EditMonitor.vue

@@ -144,6 +144,30 @@
                                 </div>
                             </div>
 
+                            <!-- Remote Browser -->
+                            <div v-if="monitor.type === 'real-browser'" class="my-3">
+                                <!-- Toggle -->
+                                <div class="my-3 form-check">
+                                    <input id="toggle" v-model="remoteBrowsersToggle" class="form-check-input" type="checkbox">
+                                    <label class="form-check-label" for="toggle">
+                                        {{ $t("useRemoteBrowser") }}
+                                    </label>
+                                    <div class="form-text">
+                                        {{ $t("remoteBrowserToggle") }}
+                                    </div>
+                                </div>
+
+                                <div v-if="remoteBrowsersToggle">
+                                    <label for="remote-browser" class="form-label">{{ $t("Remote Browser") }}</label>
+                                    <ActionSelect
+                                        v-model="monitor.remote_browser"
+                                        :options="remoteBrowsersOptions"
+                                        icon="plus"
+                                        :action="() => $refs.remoteBrowserDialog.show()"
+                                    />
+                                </div>
+                            </div>
+
                             <!-- Json Query -->
                             <div v-if="monitor.type === 'json-query'" class="my-3">
                                 <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
@@ -834,6 +858,7 @@
             <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
             <ProxyDialog ref="proxyDialog" @added="addedProxy" />
             <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
+            <RemoteBrowserDialog ref="remoteBrowserDialog" @added="addedRemoteBrowser" />
         </div>
     </transition>
 </template>
@@ -846,6 +871,7 @@ import CopyableInput from "../components/CopyableInput.vue";
 import CreateGroupDialog from "../components/CreateGroupDialog.vue";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import DockerHostDialog from "../components/DockerHostDialog.vue";
+import RemoteBrowserDialog from "../components/RemoteBrowserDialog.vue";
 import ProxyDialog from "../components/ProxyDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
 import { genSecret, isDev, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND } from "../util.ts";
@@ -894,6 +920,7 @@ const monitorDefaults = {
     kafkaProducerSsl: false,
     kafkaProducerAllowAutoTopicCreation: false,
     gamedigGivenPortOnly: true,
+    remote_browser: null
 };
 
 export default {
@@ -905,6 +932,7 @@ export default {
         CreateGroupDialog,
         NotificationDialog,
         DockerHostDialog,
+        RemoteBrowserDialog,
         TagsManager,
         VueMultiselect,
     },
@@ -932,6 +960,7 @@ export default {
                 "mongodb": "mongodb://username:password@host:port/database",
             },
             draftGroupName: null,
+            remoteBrowsersEnabled: false,
         };
     },
 
@@ -955,7 +984,31 @@ export default {
             }
             return this.$t(name);
         },
-
+        remoteBrowsersOptions() {
+            return this.$root.remoteBrowserList.map(browser => {
+                return {
+                    label: browser.name,
+                    value: browser.id,
+                };
+            });
+        },
+        remoteBrowsersToggle: {
+            get() {
+                return this.remoteBrowsersEnabled || this.monitor.remote_browser != null;
+            },
+            set(value) {
+                if (value) {
+                    this.remoteBrowsersEnabled = true;
+                    if (this.monitor.remote_browser == null && this.$root.remoteBrowserList.length > 0) {
+                        // set a default remote browser if there is one. Otherwise, the user will have to select one manually.
+                        this.monitor.remote_browser = this.$root.remoteBrowserList[0].id;
+                    }
+                } else {
+                    this.remoteBrowsersEnabled = false;
+                    this.monitor.remote_browser = null;
+                }
+            }
+        },
         isAdd() {
             return this.$route.path === "/add";
         },

src/pages/Settings.vue

@@ -104,6 +104,9 @@ export default {
                 "docker-hosts": {
                     title: this.$t("Docker Hosts"),
                 },
+                "remote-browsers": {
+                    title: this.$t("Remote Browsers"),
+                },
                 security: {
                     title: this.$t("Security"),
                 },

src/router.js

@@ -31,6 +31,7 @@ import MonitorHistory from "./components/settings/MonitorHistory.vue";
 const Security = () => import("./components/settings/Security.vue");
 import Proxies from "./components/settings/Proxies.vue";
 import About from "./components/settings/About.vue";
+import RemoteBrowsers from "./components/settings/RemoteBrowsers.vue";
 
 const routes = [
     {
@@ -113,6 +114,10 @@ const routes = [
                                 path: "docker-hosts",
                                 component: DockerHosts,
                             },
+                            {
+                                path: "remote-browsers",
+                                component: RemoteBrowsers,
+                            },
                             {
                                 path: "security",
                                 component: Security,