fixed linting issues

implemented additional changes
Add custom html code to head
2025-09-18 17:36:54 +08:00 · 2024-06-04 01:23:51 +02:00 · 2024-06-04 01:11:13 +02:00 · 2024-06-04 00:31:47 +02:00
15 changed files with 180 additions and 98 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,6 +1,7 @@
 /.idea
 /node_modules
 /data*
+/cypress
 /out
 /test
 /kubernetes
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,7 @@
 module.exports = {
    ignorePatterns: [
        "test/*.js",
+        "test/cypress",
        "server/modules/apicache/*",
        "src/util.js"
    ],
--- a/config/cypress.config.js
+++ b/config/cypress.config.js
@@ -0,0 +1,28 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+    projectId: "vyjuem",
+    e2e: {
+        experimentalStudio: true,
+        setupNodeEvents(on, config) {
+
+        },
+        fixturesFolder: "test/cypress/fixtures",
+        screenshotsFolder: "test/cypress/screenshots",
+        videosFolder: "test/cypress/videos",
+        downloadsFolder: "test/cypress/downloads",
+        supportFile: "test/cypress/support/e2e.js",
+        baseUrl: "http://localhost:3002",
+        defaultCommandTimeout: 10000,
+        pageLoadTimeout: 60000,
+        viewportWidth: 1920,
+        viewportHeight: 1080,
+        specPattern: [
+            "test/cypress/e2e/setup.cy.js",
+            "test/cypress/e2e/**/*.js"
+        ],
+    },
+    env: {
+        baseUrl: "http://localhost:3002",
+    },
+});
--- a/config/cypress.frontend.config.js
+++ b/config/cypress.frontend.config.js
@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+    e2e: {
+        supportFile: false,
+        specPattern: [
+            "test/cypress/unit/**/*.js"
+        ],
+    }
+});
--- a/db/knex_migrations/2023-10-13-1200-add-custom-html.js
+++ b/db/knex_migrations/2023-10-13-1200-add-custom-html.js
@@ -0,0 +1,14 @@
+exports.up = function (knex) {
+    // Insert column for custom HTML code
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.text("custom_html").nullable().defaultTo(null);
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.dropColumn("custom_html");
+        });
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
                "socket.io": "~4.6.1",
                "socket.io-client": "~4.6.1",
                "socks-proxy-agent": "6.1.1",
-                "sqlite3": "^5.1.7",
+                "sqlite3": "~5.1.7",
                "tar": "~6.2.1",
                "tcp-ping": "~0.1.1",
                "thirty-two": "~1.0.2",
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -4,7 +4,7 @@ const { Prometheus } = require("../prometheus");
 const { log, UP, DOWN, PENDING, MAINTENANCE, flipStatus, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND,
    SQL_DATETIME_FORMAT
 } = require("../../src/util");
-const { tcping, ping, checkCertificate, checkStatusCode, getTotalClientInRoom, setting, mssqlQuery, postgresQuery, mysqlQuery, setSetting, httpNtlm, radius,
+const { tcping, ping, checkCertificate, checkStatusCode, getTotalClientInRoom, setting, mssqlQuery, postgresQuery, mysqlQuery, setSetting, httpNtlm, radius, grpcQuery,
    redisPingAsync, kafkaProducerAsync, getOidcTokenClientCredentials, rootCertificatesFingerprints, axiosAbortSignal
 } = require("../util-server");
 const { R } = require("redbean-node");
@@ -773,6 +773,37 @@ class Monitor extends BeanModel {
                    bean.msg = "";
                    bean.status = UP;
                    bean.ping = dayjs().valueOf() - startTime;
+                } else if (this.type === "grpc-keyword") {
+                    let startTime = dayjs().valueOf();
+                    const options = {
+                        grpcUrl: this.grpcUrl,
+                        grpcProtobufData: this.grpcProtobuf,
+                        grpcServiceName: this.grpcServiceName,
+                        grpcEnableTls: this.grpcEnableTls,
+                        grpcMethod: this.grpcMethod,
+                        grpcBody: this.grpcBody,
+                    };
+                    const response = await grpcQuery(options);
+                    bean.ping = dayjs().valueOf() - startTime;
+                    log.debug("monitor:", `gRPC response: ${JSON.stringify(response)}`);
+                    let responseData = response.data;
+                    if (responseData.length > 50) {
+                        responseData = responseData.toString().substring(0, 47) + "...";
+                    }
+                    if (response.code !== 1) {
+                        bean.status = DOWN;
+                        bean.msg = `Error in send gRPC ${response.code} ${response.errorMessage}`;
+                    } else {
+                        let keywordFound = response.data.toString().includes(this.keyword);
+                        if (keywordFound === !this.isInvertKeyword()) {
+                            bean.status = UP;
+                            bean.msg = `${responseData}, keyword [${this.keyword}] ${keywordFound ? "is" : "not"} found`;
+                        } else {
+                            log.debug("monitor:", `GRPC response [${response.data}] + ", but keyword [${this.keyword}] is ${keywordFound ? "present" : "not"} in [" + ${response.data} + "]"`);
+                            bean.status = DOWN;
+                            bean.msg = `, but keyword [${this.keyword}] is ${keywordFound ? "present" : "not"} in [" + ${responseData} + "]`;
+                        }
+                    }
                } else if (this.type === "postgres") {
                    let startTime = dayjs().valueOf();

--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -66,6 +66,10 @@ class StatusPage extends BeanModel {
            head.append($(escapedGoogleAnalyticsScript));
        }

+        if (process.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1") {
+            head.append(statusPage.customHtml);
+        }
+
        // OG Meta Tags
        let ogTitle = $("<meta property=\"og:title\" content=\"\" />").attr("content", statusPage.title);
        head.append(ogTitle);
@@ -247,6 +251,7 @@ class StatusPage extends BeanModel {
            showPoweredBy: !!this.show_powered_by,
            googleAnalyticsId: this.google_analytics_tag_id,
            showCertificateExpiry: !!this.show_certificate_expiry,
+            customHtml: this.custom_html
        };
    }

@@ -270,6 +275,7 @@ class StatusPage extends BeanModel {
            showPoweredBy: !!this.show_powered_by,
            googleAnalyticsId: this.google_analytics_tag_id,
            showCertificateExpiry: !!this.show_certificate_expiry,
+            customHtml: this.custom_html
        };
    }

--- a/server/monitor-types/grpc.js
+++ b/server/monitor-types/grpc.js
@@ -1,90 +0,0 @@
-const { MonitorType } = require("./monitor-type");
-const { UP, log } = require("../../src/util");
-const dayjs = require("dayjs");
-const grpc = require("@grpc/grpc-js");
-const protojs = require("protobufjs");
-
-class GrpcKeywordMonitorType extends MonitorType {
-    name = "grpc-keyword";
-
-    /**
-     * @inheritdoc
-     */
-    async check(monitor, heartbeat, _server) {
-        const startTime = dayjs().valueOf();
-        const service = this.constructGrpcService(this.grpcUrl, this.grpcProtobuf, this.grpcServiceName, this.grpcEnableTls);
-        let response = await this.grpcQuery(service, this.grpcMethod, this.grpcBody);
-        heartbeat.ping = dayjs().valueOf() - startTime;
-        log.debug(this.name, `gRPC response: ${response}`);
-        if (response.length > 50) {
-            response = response.toString().substring(0, 47) + "...";
-        }
-        let keywordFound = response.toString().includes(this.keyword);
-        if (keywordFound !== !this.isInvertKeyword()) {
-            log.debug(this.name, `GRPC response [${response}] + ", but keyword [${this.keyword}] is ${keywordFound ? "present" : "not"} in [" + ${response} + "]"`);
-            throw new Error(`keyword [${this.keyword}] is ${keywordFound ? "present" : "not"} in [" + ${response} + "]`);
-        }
-        heartbeat.status = UP;
-        heartbeat.msg = `${response}, keyword [${this.keyword}] ${keywordFound ? "is" : "not"} found`;
-    }
-
-    /**
-     * Create gRPC client
-     * @param {string} url grpc Url
-     * @param {string} protobufData grpc ProtobufData
-     * @param {string} serviceName grpc ServiceName
-     * @param {string} enableTls grpc EnableTls
-     * @returns {grpc.Service} grpc Service
-     */
-    constructGrpcService(url, protobufData, serviceName, enableTls) {
-        const protocObject = protojs.parse(protobufData);
-        const protoServiceObject = protocObject.root.lookupService(serviceName);
-        const Client = grpc.makeGenericClientConstructor({});
-        const credentials = enableTls ? grpc.credentials.createSsl() : grpc.credentials.createInsecure();
-        const client = new Client(url, credentials);
-        return protoServiceObject.create((method, requestData, cb) => {
-            const fullServiceName = method.fullName;
-            const serviceFQDN = fullServiceName.split(".");
-            const serviceMethod = serviceFQDN.pop();
-            const serviceMethodClientImpl = `/${serviceFQDN.slice(1).join(".")}/${serviceMethod}`;
-            log.debug(this.name, `gRPC method ${serviceMethodClientImpl}`);
-            client.makeUnaryRequest(
-                serviceMethodClientImpl,
-                arg => arg,
-                arg => arg,
-                requestData,
-                cb);
-        }, false, false);
-    }
-
-    /**
-     * Create gRPC client stib
-     * @param {grpc.Service} service grpc Url
-     * @param {string} method grpc Method
-     * @param {string} body grpc Body
-     * @returns {Promise<string>} Result of gRPC query
-     */
-    async grpcQuery(service, method, body) {
-        return new Promise((resolve, reject) => {
-            try {
-                service[`${method}`](JSON.parse(body), (err, response) => {
-                    if (err) {
-                        if (err.code !== 1) {
-                            reject(`Error in send gRPC ${err.code} ${err.details}`);
-                        }
-                        log.debug(this.name, `ignoring ${err.code} ${err.details}, as code=1 is considered OK`);
-                        resolve(`${err.code} is considered OK because ${err.details}`);
-                    }
-                    resolve(JSON.stringify(response));
-                });
-            } catch (err) {
-                reject(`Error ${err}. Please review your gRPC configuration option. The service name must not include package name value, and the method name must follow camelCase format`);
-            }
-
-        });
-    }
-}
-
-module.exports = {
-    GrpcKeywordMonitorType,
-};
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -101,10 +101,11 @@ module.exports.statusPageSocketHandler = (socket) => {
            if (!statusPage) {
                throw new Error("No slug?");
            }
-
+            const config = await statusPage.toJSON();
+            config.allowEditingCustomHtml = import.meta.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1";
            callback({
                ok: true,
-                config: await statusPage.toJSON(),
+                config,
            });
        } catch (error) {
            callback({
@@ -167,6 +168,9 @@ module.exports.statusPageSocketHandler = (socket) => {
            statusPage.show_certificate_expiry = config.showCertificateExpiry;
            statusPage.modified_date = R.isoDateTime();
            statusPage.google_analytics_tag_id = config.googleAnalyticsId;
+            if (process.env.UPTIME_KUMA_ALLOW_CUSTOM_HTML === "1") {
+                statusPage.custom_html = config.customHtml;
+            }

            await R.store(statusPage);

--- a/server/uptime-kuma-server.js
+++ b/server/uptime-kuma-server.js
@@ -113,7 +113,6 @@ class UptimeKumaServer {
        UptimeKumaServer.monitorTypeList["tailscale-ping"] = new TailscalePing();
        UptimeKumaServer.monitorTypeList["dns"] = new DnsMonitorType();
        UptimeKumaServer.monitorTypeList["mqtt"] = new MqttMonitorType();
-        UptimeKumaServer.monitorTypeList["grpc-keyword"] = new GrpcKeywordMonitorType();
        UptimeKumaServer.monitorTypeList["mongodb"] = new MongodbMonitorType();

        // Allow all CORS origins (polling) in development
@@ -518,5 +517,4 @@ const { RealBrowserMonitorType } = require("./monitor-types/real-browser-monitor
 const { TailscalePing } = require("./monitor-types/tailscale-ping");
 const { DnsMonitorType } = require("./monitor-types/dns");
 const { MqttMonitorType } = require("./monitor-types/mqtt");
-const { GrpcKeywordMonitorType } = require("./monitor-types/grpc");
 const { MongodbMonitorType } = require("./monitor-types/mongodb");
--- a/server/util-server.js
+++ b/server/util-server.js
@@ -13,6 +13,8 @@ const postgresConParse = require("pg-connection-string").parse;
 const mysql = require("mysql2");
 const { NtlmClient } = require("axios-ntlm");
 const { Settings } = require("./settings");
+const grpc = require("@grpc/grpc-js");
+const protojs = require("protobufjs");
 const radiusClient = require("node-radius-client");
 const redis = require("redis");
 const oidc = require("openid-client");
@@ -917,6 +919,64 @@ module.exports.timeObjectToLocal = (obj, timezone = undefined) => {
    return timeObjectConvertTimezone(obj, timezone, false);
 };

+/**
+ * Create gRPC client stib
+ * @param {object} options from gRPC client
+ * @returns {Promise<object>} Result of gRPC query
+ */
+module.exports.grpcQuery = async (options) => {
+    const { grpcUrl, grpcProtobufData, grpcServiceName, grpcEnableTls, grpcMethod, grpcBody } = options;
+    const protocObject = protojs.parse(grpcProtobufData);
+    const protoServiceObject = protocObject.root.lookupService(grpcServiceName);
+    const Client = grpc.makeGenericClientConstructor({});
+    const credentials = grpcEnableTls ? grpc.credentials.createSsl() : grpc.credentials.createInsecure();
+    const client = new Client(
+        grpcUrl,
+        credentials
+    );
+    const grpcService = protoServiceObject.create(function (method, requestData, cb) {
+        const fullServiceName = method.fullName;
+        const serviceFQDN = fullServiceName.split(".");
+        const serviceMethod = serviceFQDN.pop();
+        const serviceMethodClientImpl = `/${serviceFQDN.slice(1).join(".")}/${serviceMethod}`;
+        log.debug("monitor", `gRPC method ${serviceMethodClientImpl}`);
+        client.makeUnaryRequest(
+            serviceMethodClientImpl,
+            arg => arg,
+            arg => arg,
+            requestData,
+            cb);
+    }, false, false);
+    return new Promise((resolve, _) => {
+        try {
+            return grpcService[`${grpcMethod}`](JSON.parse(grpcBody), function (err, response) {
+                const responseData = JSON.stringify(response);
+                if (err) {
+                    return resolve({
+                        code: err.code,
+                        errorMessage: err.details,
+                        data: ""
+                    });
+                } else {
+                    log.debug("monitor:", `gRPC response: ${JSON.stringify(response)}`);
+                    return resolve({
+                        code: 1,
+                        errorMessage: "",
+                        data: responseData
+                    });
+                }
+            });
+        } catch (err) {
+            return resolve({
+                code: -1,
+                errorMessage: `Error ${err}. Please review your gRPC configuration option. The service name must not include package name value, and the method name must follow camelCase format`,
+                data: ""
+            });
+        }
+
+    });
+};
+
 /**
 * Returns an array of SHA256 fingerprints for all known root certificates.
 * @returns {Set} A set of SHA256 fingerprints.
--- a/src/components/notifications/SMSPartner.vue
+++ b/src/components/notifications/SMSPartner.vue
@@ -3,7 +3,7 @@
        <label for="smspartner-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smspartner-key" v-model="$parent.notification.smspartnerApikey" :required="true" autocomplete="new-password"></HiddenInput>
        <div class="form-text">
-            <i18n-t keypath="smspartnerApiurl" tag="div" class="form-text">
+            <i18n-t keypath="smspartnerApiurl" as="div" class="form-text">
                <a href="https://my.smspartner.fr/dashboard/api" target="_blank">my.smspartner.fr/dashboard/api</a>
            </i18n-t>
        </div>
@@ -12,7 +12,7 @@
        <label for="smspartner-phone-number" class="form-label">{{ $t("smspartnerPhoneNumber") }}</label>
        <input id="smspartner-phone-number" v-model="$parent.notification.smspartnerPhoneNumber" type="text" minlength="3" maxlength="20" pattern="^[\d+,]+$" class="form-control" required>
        <div class="form-text">
-            <i18n-t keypath="smspartnerPhoneNumberHelptext" tag="div" class="form-text">
+            <i18n-t keypath="smspartnerPhoneNumberHelptext" as="div" class="form-text">
                <code>+336xxxxxxxx</code>
                <code>+496xxxxxxxx</code>
                <code>,</code>
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -776,6 +776,9 @@
    "wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .",
    "Custom Monitor Type": "Custom Monitor Type",
    "Google Analytics ID": "Google Analytics ID",
+    "Custom HTML": "Custom HTML",
+    "customHtmlEnvVarDisabled": "environment variable {allow_custom_html} must be set to inject html to the head",
+    "customHtmlEnvVarEnabled": "Because the environment variable {allow_custom_html} is set, arbitrary html can be injected into the head. Make sure to remove the environment variable after use",
    "Edit Tag": "Edit Tag",
    "Server Address": "Server Address",
    "Learn More": "Learn More",
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -104,6 +104,22 @@
                    <prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
                </div>

+                <!-- Custom HTML -->
+                <div class="my-3">
+                    <div class="mb-1">{{ $t("Custom HTML") }}</div>
+                    <prism-editor v-model="config.customHtml" class="css-editor" :highlight="highlighter" line-numbers :readonly="!config.allowEditingCustomHtml"></prism-editor>
+                    <i18n-t v-if="config.allowEditingCustomHtml" tag="div" class="form-text" keypath="customHtmlEnvVarEnabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML</code>
+                        </template>
+                    </i18n-t>
+                    <i18n-t v-else tag="div" class="form-text" keypath="customHtmlEnvVarDisabled">
+                        <template #allow_custom_html>
+                            <code>UPTIME_KUMA_ALLOW_CUSTOM_HTML=1</code>
+                        </template>
+                    </i18n-t>
+                </div>
+
                <div class="danger-zone">
                    <button class="btn btn-danger me-2" @click="deleteDialog">
                        <font-awesome-icon icon="trash" />