Merge branch 'master' of https://github.com/louislam/uptime-kuma into status-page-expiry

.devcontainer/README.md

@@ -0,0 +1,28 @@
+# Codespaces
+
+You can modifiy Uptime Kuma in your browser without setting up a local development.
+
+![image](https://github.com/louislam/uptime-kuma/assets/1336778/31d9f06d-dd0b-4405-8e0d-a96586ee4595)
+
+1. Click `Code` -> `Create codespace on master`
+2. Wait a few minutes until you see there are two exposed ports
+3. Go to the `3000` url, see if it is working 
+
+![image](https://github.com/louislam/uptime-kuma/assets/1336778/909b2eb4-4c5e-44e4-ac26-6d20ed856e7f)
+
+## Frontend
+
+Since the frontend is using [Vite.js](https://vitejs.dev/), all changes in this area will be hot-reloaded.
+You don't need to restart the frontend, unless you try to add a new frontend dependency.
+
+## Backend
+
+The backend does not automatically hot-reload.
+You will need to restart the backend after changing something using these steps:
+
+1. Click `Terminal`
+2. Click `Codespaces: server-dev` in the right panel
+3. Press `Ctrl + C` to stop the server
+4. Press `Up` to run `npm run start-server-dev`
+
+![image](https://github.com/louislam/uptime-kuma/assets/1336778/e0c0a350-fe46-4588-9f37-e053c85834d1)

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+{
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:dev-18-bookworm",
+    "features": {
+        "ghcr.io/devcontainers/features/github-cli:1": {}
+    },
+    "updateContentCommand": "npm ci",
+    "postCreateCommand": "",
+    "postAttachCommand": {
+        "frontend-dev": "npm run start-frontend-devcontainer",
+        "server-dev": "npm run start-server-dev",
+        "open-port": "gh codespace ports visibility 3001:public -c $CODESPACE_NAME"
+    },
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "streetsidesoftware.code-spell-checker",
+                "dbaeumer.vscode-eslint"
+            ]
+        }
+    },
+    "forwardPorts": [3000, 3001]
+}

.github/ISSUE_TEMPLATE/ask-for-help.yaml

@@ -44,7 +44,7 @@ body:
     id: operating-system
     attributes:
       label: "💻 Operating System and Arch"
-      description: "Which OS is your server/device running on?"
+      description: "Which OS is your server/device running on? (For Replit, please do not report this bug)"
       placeholder: "Ex. Ubuntu 20.04 x86"
     validations:
       required: true
@@ -52,7 +52,7 @@ body:
     id: browser-vendor
     attributes:
       label: "🌐 Browser"
-      description: "Which browser are you running on?"
+      description: "Which browser are you running on? (For Replit, please do not report this bug)"
       placeholder: "Ex. Google Chrome 95.0.4638.69"
     validations:
       required: true

README.md

@@ -54,7 +54,7 @@ Requirements:
   - ✅ Major Linux distros such as Debian, Ubuntu, CentOS, Fedora and ArchLinux etc.
   - ✅ Windows 10 (x64), Windows Server 2012 R2 (x64) or higher
   - ❌ Replit / Heroku
-- [Node.js](https://nodejs.org/en/download/) 14 / 16 / 18 (20 is not supported)
+- [Node.js](https://nodejs.org/en/download/) 14 / 16 / 18 / 20.4
 - [npm](https://docs.npmjs.com/cli/) >= 7
 - [Git](https://git-scm.com/downloads)
 - [pm2](https://pm2.keymetrics.io/) - For running Uptime Kuma in the background

config/vite.config.js

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 import visualizer from "rollup-plugin-visualizer";
 import viteCompression from "vite-plugin-compression";
+import commonjs from "vite-plugin-commonjs";
 
 const postCssScss = require("postcss-scss");
 const postcssRTLCSS = require("postcss-rtlcss");
@@ -16,8 +17,12 @@ export default defineConfig({
     },
     define: {
         "FRONTEND_VERSION": JSON.stringify(process.env.npm_package_version),
+        "DEVCONTAINER": JSON.stringify(process.env.DEVCONTAINER),
+        "GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN": JSON.stringify(process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN),
+        "CODESPACE_NAME": JSON.stringify(process.env.CODESPACE_NAME),
     },
     plugins: [
+        commonjs(),
         vue(),
         legacy({
             targets: [ "since 2015" ],
@@ -42,6 +47,9 @@ export default defineConfig({
         }
     },
     build: {
+        commonjsOptions: {
+            include: [ /.js$/ ],
+        },
         rollupOptions: {
             output: {
                 manualChunks(id, { getModuleInfo, getModuleIds }) {

db/patch-added-kafka-producer.sql

@@ -0,0 +1,22 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE monitor
+	ADD kafka_producer_topic VARCHAR(255);
+
+ALTER TABLE monitor
+	ADD kafka_producer_brokers TEXT;
+
+ALTER TABLE monitor
+	ADD kafka_producer_ssl INTEGER;
+
+ALTER TABLE monitor
+	ADD kafka_producer_allow_auto_topic_creation VARCHAR(255);
+
+ALTER TABLE monitor
+	ADD kafka_producer_sasl_options TEXT;
+
+ALTER TABLE monitor
+	ADD kafka_producer_message TEXT;
+
+COMMIT;

docker/dockerfile

@@ -72,7 +72,6 @@ RUN git clone https://github.com/louislam/uptime-kuma.git .
 RUN npm ci
 
 EXPOSE 3000 3001
-VOLUME ["/app/data"]
 HEALTHCHECK --interval=60s --timeout=30s --start-period=180s --retries=5 CMD extra/healthcheck
 CMD ["npm", "run", "start-pr-test"]
 

package-lock.json

@@ -10,7 +10,7 @@
             "license": "MIT",
             "dependencies": {
                 "@grpc/grpc-js": "~1.7.3",
-                "@louislam/ping": "~0.4.4-mod.0",
+                "@louislam/ping": "~0.4.4-mod.1",
                 "@louislam/sqlite3": "15.1.6",
                 "args-parser": "~1.3.0",
                 "axios": "~0.27.0",
@@ -41,6 +41,7 @@
                 "jsonata": "^2.0.3",
                 "jsonwebtoken": "~9.0.0",
                 "jwt-decode": "~3.1.2",
+                "kafkajs": "^2.2.4",
                 "limiter": "~2.1.0",
                 "liquidjs": "^10.7.0",
                 "mongodb": "~4.14.0",
@@ -62,6 +63,7 @@
                 "qs": "~6.10.4",
                 "redbean-node": "~0.3.0",
                 "redis": "~4.5.1",
+                "semver": "~7.5.4",
                 "socket.io": "~4.6.1",
                 "socket.io-client": "~4.6.1",
                 "socks-proxy-agent": "6.1.1",
@@ -116,6 +118,7 @@
                 "typescript": "~4.4.4",
                 "v-pagination-3": "~0.1.7",
                 "vite": "~4.4.1",
+                "vite-plugin-commonjs": "^0.8.0",
                 "vite-plugin-compression": "^0.5.1",
                 "vue": "~3.3.4",
                 "vue-chartjs": "~5.2.0",
@@ -133,7 +136,7 @@
                 "whatwg-url": "~12.0.1"
             },
             "engines": {
-                "node": "14.* || 16.* || 18.*"
+                "node": "14 || 16 || 18 || >= 20.4.0"
             }
         },
         "node_modules/@aashutoshrathi/word-wrap": {
@@ -4395,11 +4398,12 @@
             "dev": true
         },
         "node_modules/@louislam/ping": {
-            "version": "0.4.4-mod.0",
+            "version": "0.4.4-mod.1",
-            "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.4-mod.0.tgz",
+            "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.4-mod.1.tgz",
-            "integrity": "sha512-U2ZXcgFRPmZYd/ooA8KILG4aCMBsDrGP9NDWseHriZSsKlu5Y1lf/LbenN6tnqQ9JjAsbJjqwSi3xtAcWqU+1w==",
+            "integrity": "sha512-uMq6qwL9/VYh2YBbDEhM7ZzJ8YON+juw/3k+28P3s9ue3uDMQ56MNPfywXoRpsxkU8RgjN0TDzEhQDzO1WisMw==",
             "dependencies": {
-                "command-exists": "~1.2.9"
+                "command-exists": "~1.2.9",
+                "underscore": "~1.13.6"
             },
             "engines": {
                 "node": ">=4.0.0"
@@ -8751,6 +8755,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/es-module-lexer": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
+            "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==",
+            "dev": true
+        },
         "node_modules/es-set-tostringtag": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
@@ -13001,6 +13011,14 @@
             "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
             "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
         },
+        "node_modules/kafkajs": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/kafkajs/-/kafkajs-2.2.4.tgz",
+            "integrity": "sha512-j/YeapB1vfPT2iOIUn/vxdyKEuhuY2PxMBvf5JWux6iSaukAccrMtXEY/Lb7OvavDhOWME589bpLrEdnVHjfjA==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.2",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.2.tgz",
@@ -17741,6 +17759,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/underscore": {
+            "version": "1.13.6",
+            "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+            "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
+        },
         "node_modules/unicode-canonical-property-names-ecmascript": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -18020,6 +18043,18 @@
                 }
             }
         },
+        "node_modules/vite-plugin-commonjs": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/vite-plugin-commonjs/-/vite-plugin-commonjs-0.8.1.tgz",
+            "integrity": "sha512-hL2wwqgSiLBcrmCH7z+H468Z9uyBnKXX5OAwoYmWd/i03PBGCqkOBR3rjeojyWOoGmWgDVB7lj6Xn5pVw3Fwyg==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.2",
+                "fast-glob": "^3.2.12",
+                "magic-string": "^0.30.1",
+                "vite-plugin-dynamic-import": "^1.5.0"
+            }
+        },
         "node_modules/vite-plugin-compression": {
             "version": "0.5.1",
             "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
@@ -18118,6 +18153,18 @@
                 "node": ">=8"
             }
         },
+        "node_modules/vite-plugin-dynamic-import": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.5.0.tgz",
+            "integrity": "sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.2",
+                "es-module-lexer": "^1.2.1",
+                "fast-glob": "^3.2.12",
+                "magic-string": "^0.30.1"
+            }
+        },
         "node_modules/vue": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",

package.json

@@ -7,7 +7,7 @@
         "url": "https://github.com/louislam/uptime-kuma.git"
     },
     "engines": {
-        "node": "14.* || 16.* || 18.*"
+        "node": "14 || 16 || 18 || >= 20.4.0"
     },
     "scripts": {
         "install-legacy": "npm install",
@@ -19,6 +19,7 @@
         "lint": "npm run lint:js && npm run lint:style",
         "dev": "concurrently -k -r \"wait-on tcp:3000 && npm run start-server-dev \" \"npm run start-frontend-dev\"",
         "start-frontend-dev": "cross-env NODE_ENV=development vite --host --config ./config/vite.config.js",
+        "start-frontend-devcontainer": "cross-env NODE_ENV=development DEVCONTAINER=1 vite --host --config ./config/vite.config.js",
         "start": "npm run start-server",
         "start-server": "node server/server.js",
         "start-server-dev": "cross-env NODE_ENV=development node server/server.js",
@@ -69,7 +70,7 @@
     },
     "dependencies": {
         "@grpc/grpc-js": "~1.7.3",
-        "@louislam/ping": "~0.4.4-mod.0",
+        "@louislam/ping": "~0.4.4-mod.1",
         "@louislam/sqlite3": "15.1.6",
         "args-parser": "~1.3.0",
         "axios": "~0.27.0",
@@ -100,6 +101,7 @@
         "jsonata": "^2.0.3",
         "jsonwebtoken": "~9.0.0",
         "jwt-decode": "~3.1.2",
+        "kafkajs": "^2.2.4",
         "limiter": "~2.1.0",
         "liquidjs": "^10.7.0",
         "mongodb": "~4.14.0",
@@ -121,6 +123,7 @@
         "qs": "~6.10.4",
         "redbean-node": "~0.3.0",
         "redis": "~4.5.1",
+        "semver": "~7.5.4",
         "socket.io": "~4.6.1",
         "socket.io-client": "~4.6.1",
         "socks-proxy-agent": "6.1.1",
@@ -175,6 +178,7 @@
         "typescript": "~4.4.4",
         "v-pagination-3": "~0.1.7",
         "vite": "~4.4.1",
+        "vite-plugin-commonjs": "^0.8.0",
         "vite-plugin-compression": "^0.5.1",
         "vue": "~3.3.4",
         "vue-chartjs": "~5.2.0",

server/client.js

@@ -141,12 +141,21 @@ async function sendAPIKeyList(socket) {
 /**
  * Emits the version information to the client.
  * @param {Socket} socket Socket.io socket instance
+ * @param {boolean} hideVersion
  * @returns {Promise<void>}
  */
-async function sendInfo(socket) {
+async function sendInfo(socket, hideVersion = false) {
+    let version;
+    let latestVersion;
+
+    if (!hideVersion) {
+        version = checkVersion.version;
+        latestVersion = checkVersion.latestVersion;
+    }
+
     socket.emit("info", {
-        version: checkVersion.version,
+        version,
-        latestVersion: checkVersion.latestVersion,
+        latestVersion,
         primaryBaseURL: await setting("primaryBaseURL"),
         serverTimezone: await server.getTimezone(),
         serverTimezoneOffset: server.getTimezoneOffset(),

server/config.js

@@ -1,4 +1,5 @@
-const args = require("args-parser")(process.argv);
+// Interop with browser
+const args = (typeof process !== "undefined") ? require("args-parser")(process.argv) : {};
 const demoMode = args["demo"] || false;
 
 const badgeConstants = {

server/database.js

@@ -73,6 +73,7 @@ class Database {
         "patch-add-parent-monitor.sql": true,
         "patch-add-invert-keyword.sql": true,
         "patch-added-json-query.sql": true,
+        "patch-added-kafka-producer.sql": true,
         "patch-add-certificate-expiry-status-page.sql": true,
     };
 

server/model/monitor.js

@@ -6,7 +6,7 @@ const { log, UP, DOWN, PENDING, MAINTENANCE, flipStatus, TimeLogger, MAX_INTERVA
     SQL_DATETIME_FORMAT
 } = require("../../src/util");
 const { tcping, ping, dnsResolve, checkCertificate, checkStatusCode, getTotalClientInRoom, setting, mssqlQuery, postgresQuery, mysqlQuery, mqttAsync, setSetting, httpNtlm, radius, grpcQuery,
-    redisPingAsync, mongodbPing,
+    redisPingAsync, mongodbPing, kafkaProducerAsync
 } = require("../util-server");
 const { R } = require("redbean-node");
 const { BeanModel } = require("redbean-node/dist/bean-model");
@@ -137,6 +137,11 @@ class Monitor extends BeanModel {
             httpBodyEncoding: this.httpBodyEncoding,
             jsonPath: this.jsonPath,
             expectedValue: this.expectedValue,
+            kafkaProducerTopic: this.kafkaProducerTopic,
+            kafkaProducerBrokers: JSON.parse(this.kafkaProducerBrokers),
+            kafkaProducerSsl: this.kafkaProducerSsl === "1" && true || false,
+            kafkaProducerAllowAutoTopicCreation: this.kafkaProducerAllowAutoTopicCreation === "1" && true || false,
+            kafkaProducerMessage: this.kafkaProducerMessage,
             screenshot,
         };
 
@@ -161,6 +166,7 @@ class Monitor extends BeanModel {
                 tlsCa: this.tlsCa,
                 tlsCert: this.tlsCert,
                 tlsKey: this.tlsKey,
+                kafkaProducerSaslOptions: JSON.parse(this.kafkaProducerSaslOptions),
             };
         }
 
@@ -175,7 +181,7 @@ class Monitor extends BeanModel {
     async isActive() {
         const parentActive = await Monitor.isParentActive(this.id);
 
-        return this.active && parentActive;
+        return (this.active === 1) && parentActive;
     }
 
     /**
@@ -825,6 +831,24 @@ class Monitor extends BeanModel {
                         bean.ping = dayjs().valueOf() - startTime;
                     }
 
+                } else if (this.type === "kafka-producer") {
+                    let startTime = dayjs().valueOf();
+
+                    bean.msg = await kafkaProducerAsync(
+                        JSON.parse(this.kafkaProducerBrokers),
+                        this.kafkaProducerTopic,
+                        this.kafkaProducerMessage,
+                        {
+                            allowAutoTopicCreation: this.kafkaProducerAllowAutoTopicCreation,
+                            ssl: this.kafkaProducerSsl,
+                            clientId: `Uptime-Kuma/${version}`,
+                            interval: this.interval,
+                        },
+                        JSON.parse(this.kafkaProducerSaslOptions),
+                    );
+                    bean.status = UP;
+                    bean.ping = dayjs().valueOf() - startTime;
+
                 } else {
                     throw new Error("Unknown Monitor Type");
                 }

server/notification-providers/slack.js

@@ -27,6 +27,11 @@ class Slack extends NotificationProvider {
 
     async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
         let okMsg = "Sent Successfully.";
+
+        if (notification.slackchannelnotify) {
+            msg += " <!channel>";
+        }
+
         try {
             if (heartbeatJSON == null) {
                 let data = {
@@ -53,7 +58,7 @@ class Slack extends NotificationProvider {
                                 "type": "header",
                                 "text": {
                                     "type": "plain_text",
-                                    "text": "Uptime Kuma Alert",
+                                    "text": textMsg,
                                 },
                             },
                             {

server/notification-providers/smsc.js

@@ -0,0 +1,42 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class SMSC extends NotificationProvider {
+    name = "smsc";
+
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        let okMsg = "Sent Successfully.";
+        try {
+            let config = {
+                headers: {
+                    "Content-Type": "application/json",
+                    "Accept": "text/json",
+                }
+            };
+
+            let getArray = [
+                "fmt=3",
+                "translit=" + notification.smscTranslit,
+                "login=" + notification.smscLogin,
+                "psw=" + notification.smscPassword,
+                "phones=" + notification.smscToNumber,
+                "mes=" + encodeURIComponent(msg.replace(/[^\x00-\x7F]/g, "")),
+            ];
+            if (notification.smscSenderName !== "") {
+                getArray.push("sender=" + notification.smscSenderName);
+            }
+
+            let resp = await axios.get("https://smsc.kz/sys/send.php?" + getArray.join("&"), config);
+            if (resp.data.id === undefined) {
+                let error = `Something gone wrong. Api returned code ${resp.data.error_code}: ${resp.data.error}`;
+                this.throwGeneralAxiosError(error);
+            }
+
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = SMSC;

server/notification.js

@@ -6,6 +6,7 @@ const AliyunSms = require("./notification-providers/aliyun-sms");
 const Apprise = require("./notification-providers/apprise");
 const Bark = require("./notification-providers/bark");
 const ClickSendSMS = require("./notification-providers/clicksendsms");
+const SMSC = require("./notification-providers/smsc");
 const DingDing = require("./notification-providers/dingding");
 const Discord = require("./notification-providers/discord");
 const Feishu = require("./notification-providers/feishu");
@@ -68,6 +69,7 @@ class Notification {
             new Apprise(),
             new Bark(),
             new ClickSendSMS(),
+            new SMSC(),
             new DingDing(),
             new Discord(),
             new Feishu(),

server/routers/api-router.js

@@ -442,7 +442,7 @@ router.get("/api/badge/:id/cert-exp", cache("5 minutes"), async (request, respon
                 if (!tlsInfo.valid) {
                     // return a "Bad Cert" badge in naColor (grey), when cert is not valid
                     badgeValues.message = "Bad Cert";
-                    badgeValues.color = badgeConstants.downColor;
+                    badgeValues.color = downColor;
                 } else {
                     const daysRemaining = parseInt(overrideValue ?? tlsInfo.certInfo.daysRemaining);
 

server/server.js

@@ -15,18 +15,25 @@ dayjs.extend(require("dayjs/plugin/customParseFormat"));
 require("dotenv").config();
 
 // Check Node.js Version
-const nodeVersion = parseInt(process.versions.node.split(".")[0]);
+const nodeVersion = process.versions.node;
-const requiredVersion = 14;
+
+// Get the required Node.js version from package.json
+const requiredNodeVersions = require("../package.json").engines.node;
+const bannedNodeVersions = " < 14 || 20.0.* || 20.1.* || 20.2.* || 20.3.* ";
 console.log(`Your Node.js version: ${nodeVersion}`);
 
-// See more: https://github.com/louislam/uptime-kuma/issues/3138
+const semver = require("semver");
-if (nodeVersion >= 20) {
+const requiredNodeVersionsComma = requiredNodeVersions.split("||").map((version) => version.trim()).join(", ");
-    console.warn("\x1b[31m%s\x1b[0m", "Warning: Uptime Kuma is currently not stable on Node.js >= 20, please use Node.js 18.");
+
+// Exit Uptime Kuma immediately if the Node.js version is banned
+if (semver.satisfies(nodeVersion, bannedNodeVersions)) {
+    console.error("\x1b[31m%s\x1b[0m", `Error: Your Node.js version: ${nodeVersion} is not supported, please upgrade your Node.js to ${requiredNodeVersionsComma}.`);
+    process.exit(-1);
 }
 
-if (nodeVersion < requiredVersion) {
+// Warning if the Node.js version is not in the support list, but it maybe still works
-    console.error(`Error: Your Node.js version is not supported, please upgrade to Node.js >= ${requiredVersion}.`);
+if (!semver.satisfies(nodeVersion, requiredNodeVersions)) {
-    process.exit(-1);
+    console.warn("\x1b[31m%s\x1b[0m", `Warning: Your Node.js version: ${nodeVersion} is not officially supported, please upgrade your Node.js to ${requiredNodeVersionsComma}.`);
 }
 
 const args = require("args-parser")(process.argv);
@@ -263,7 +270,7 @@ let needSetup = false;
     log.info("server", "Adding socket handler");
     io.on("connection", async (socket) => {
 
-        sendInfo(socket);
+        sendInfo(socket, true);
 
         if (needSetup) {
             log.info("server", "Redirect to setup page");
@@ -636,6 +643,9 @@ let needSetup = false;
                 monitor.accepted_statuscodes_json = JSON.stringify(monitor.accepted_statuscodes);
                 delete monitor.accepted_statuscodes;
 
+                monitor.kafkaProducerBrokers = JSON.stringify(monitor.kafkaProducerBrokers);
+                monitor.kafkaProducerSaslOptions = JSON.stringify(monitor.kafkaProducerSaslOptions);
+
                 bean.import(monitor);
                 bean.user_id = socket.userID;
 
@@ -750,6 +760,11 @@ let needSetup = false;
                 bean.httpBodyEncoding = monitor.httpBodyEncoding;
                 bean.expectedValue = monitor.expectedValue;
                 bean.jsonPath = monitor.jsonPath;
+                bean.kafkaProducerTopic = monitor.kafkaProducerTopic;
+                bean.kafkaProducerBrokers = JSON.stringify(monitor.kafkaProducerBrokers);
+                bean.kafkaProducerAllowAutoTopicCreation = monitor.kafkaProducerAllowAutoTopicCreation;
+                bean.kafkaProducerSaslOptions = JSON.stringify(monitor.kafkaProducerSaslOptions);
+                bean.kafkaProducerMessage = monitor.kafkaProducerMessage;
 
                 bean.validate();
 
@@ -1651,6 +1666,7 @@ async function afterLogin(socket, user) {
     socket.join(user.id);
 
     let monitorList = await server.sendMonitorList(socket);
+    sendInfo(socket);
     server.sendMaintenanceList(socket);
     sendNotificationList(socket);
     sendProxyList(socket);

server/uptime-kuma-server.js

@@ -10,7 +10,7 @@ const util = require("util");
 const { CacheableDnsHttpAgent } = require("./cacheable-dns-http-agent");
 const { Settings } = require("./settings");
 const dayjs = require("dayjs");
-// DO NOT IMPORT HERE IF THE MODULES USED `UptimeKumaServer.getInstance()`
+// DO NOT IMPORT HERE IF THE MODULES USED `UptimeKumaServer.getInstance()`, put at the bottom of this file instead.
 
 /**
  * `module.exports` (alias: `server`) should be inside this class, in order to avoid circular dependency issue.
@@ -249,9 +249,9 @@ class UptimeKumaServer {
 
             return (typeof forwardedFor === "string" ? forwardedFor.split(",")[0].trim() : null)
                 || socket.client.conn.request.headers["x-real-ip"]
-                || clientIP.replace(/^.*:/, "");
+                || clientIP.replace(/^::ffff:/, "");
         } else {
-            return clientIP.replace(/^.*:/, "");
+            return clientIP.replace(/^::ffff:/, "");
         }
     }
 
@@ -262,13 +262,43 @@ class UptimeKumaServer {
      * @returns {Promise<string>}
      */
     async getTimezone() {
+        // From process.env.TZ
+        try {
+            if (process.env.TZ) {
+                this.checkTimezone(process.env.TZ);
+                return process.env.TZ;
+            }
+        } catch (e) {
+            log.warn("timezone", e.message + " in process.env.TZ");
+        }
+
         let timezone = await Settings.get("serverTimezone");
-        if (timezone) {
+
-            return timezone;
+        // From Settings
-        } else if (process.env.TZ) {
+        try {
-            return process.env.TZ;
+            log.debug("timezone", "Using timezone from settings: " + timezone);
-        } else {
+            if (timezone) {
-            return dayjs.tz.guess();
+                this.checkTimezone(timezone);
+                return timezone;
+            }
+        } catch (e) {
+            log.warn("timezone", e.message + " in settings");
+        }
+
+        // Guess
+        try {
+            let guess = dayjs.tz.guess();
+            log.debug("timezone", "Guessing timezone: " + guess);
+            if (guess) {
+                this.checkTimezone(guess);
+                return guess;
+            } else {
+                return "UTC";
+            }
+        } catch (e) {
+            // Guess failed, fall back to UTC
+            log.debug("timezone", "Guessed an invalid timezone. Use UTC as fallback");
+            return "UTC";
         }
     }
 
@@ -280,11 +310,24 @@ class UptimeKumaServer {
         return dayjs().format("Z");
     }
 
+    /**
+     * Throw an error if the timezone is invalid
+     * @param timezone
+     */
+    checkTimezone(timezone) {
+        try {
+            dayjs.utc("2013-11-18 11:55").tz(timezone).format();
+        } catch (e) {
+            throw new Error("Invalid timezone:" + timezone);
+        }
+    }
+
     /**
      * Set the current server timezone and environment variables
      * @param {string} timezone
      */
     async setTimezone(timezone) {
+        this.checkTimezone(timezone);
         await Settings.set("serverTimezone", timezone, "general");
         process.env.TZ = timezone;
         dayjs.tz.setDefault(timezone);
@@ -300,6 +343,5 @@ module.exports = {
     UptimeKumaServer
 };
 
-// Must be at the end
+// Must be at the end to avoid circular dependencies
-const { MonitorType } = require("./monitor-types/monitor-type");
 const { RealBrowserMonitorType } = require("./monitor-types/real-browser-monitor-type");

server/util-server.js

@@ -28,8 +28,11 @@ const {
 } = require("node-radius-utils");
 const dayjs = require("dayjs");
 
-const isWindows = process.platform === /^win/.test(process.platform);
+// SASLOptions used in JSDoc
+// eslint-disable-next-line no-unused-vars
+const { Kafka, SASLOptions } = require("kafkajs");
 
+const isWindows = process.platform === /^win/.test(process.platform);
 /**
  * Init or reset JWT secret
  * @returns {Promise<Bean>}
@@ -196,6 +199,94 @@ exports.mqttAsync = function (hostname, topic, okMessage, options = {}) {
     });
 };
 
+/**
+ * Monitor Kafka using Producer
+ * @param {string} topic Topic name to produce into
+ * @param {string} message Message to produce
+ * @param {Object} [options={interval = 20, allowAutoTopicCreation = false, ssl = false, clientId = "Uptime-Kuma"}]
+ * Kafka client options. Contains ssl, clientId, allowAutoTopicCreation and
+ * interval (interval defaults to 20, allowAutoTopicCreation defaults to false, clientId defaults to "Uptime-Kuma"
+ * and ssl defaults to false)
+ * @param {string[]} brokers List of kafka brokers to connect, host and port joined by ':'
+ * @param {SASLOptions} [saslOptions={}] Options for kafka client Authentication (SASL) (defaults to
+ * {})
+ * @returns {Promise<string>}
+ */
+exports.kafkaProducerAsync = function (brokers, topic, message, options = {}, saslOptions = {}) {
+    return new Promise((resolve, reject) => {
+        const { interval = 20, allowAutoTopicCreation = false, ssl = false, clientId = "Uptime-Kuma" } = options;
+
+        let connectedToKafka = false;
+
+        const timeoutID = setTimeout(() => {
+            log.debug("kafkaProducer", "KafkaProducer timeout triggered");
+            connectedToKafka = true;
+            reject(new Error("Timeout"));
+        }, interval * 1000 * 0.8);
+
+        if (saslOptions.mechanism === "None") {
+            saslOptions = undefined;
+        }
+
+        let client = new Kafka({
+            brokers: brokers,
+            clientId: clientId,
+            sasl: saslOptions,
+            retry: {
+                retries: 0,
+            },
+            ssl: ssl,
+        });
+
+        let producer = client.producer({
+            allowAutoTopicCreation: allowAutoTopicCreation,
+            retry: {
+                retries: 0,
+            }
+        });
+
+        producer.connect().then(
+            () => {
+                try {
+                    producer.send({
+                        topic: topic,
+                        messages: [{
+                            value: message,
+                        }],
+                    });
+                    connectedToKafka = true;
+                    clearTimeout(timeoutID);
+                    resolve("Message sent successfully");
+                } catch (e) {
+                    connectedToKafka = true;
+                    producer.disconnect();
+                    clearTimeout(timeoutID);
+                    reject(new Error("Error sending message: " + e.message));
+                }
+            }
+        ).catch(
+            (e) => {
+                connectedToKafka = true;
+                producer.disconnect();
+                clearTimeout(timeoutID);
+                reject(new Error("Error in producer connection: " + e.message));
+            }
+        );
+
+        producer.on("producer.network.request_timeout", (_) => {
+            clearTimeout(timeoutID);
+            reject(new Error("producer.network.request_timeout"));
+        });
+
+        producer.on("producer.disconnect", (_) => {
+            if (!connectedToKafka) {
+                clearTimeout(timeoutID);
+                reject(new Error("producer.disconnect"));
+            }
+        });
+    });
+};
+
 /**
  * Use NTLM Auth for a http request.
  * @param {Object} options The http request options

src/assets/app.scss

@@ -436,12 +436,12 @@ optgroup {
 .monitor-list {
     &.scrollbar {
         overflow-y: auto;
-        height: calc(100% - 65px);
+        height: calc(100% - 107px);
     }
 
     @media (max-width: 770px) {
         &.scrollbar {
-            height: calc(100% - 40px);
+            height: calc(100% - 97px);
         }
     }
 

src/components/BadgeGeneratorDialog.vue

@@ -22,78 +22,78 @@
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('duration') " class="mb-3">
-                        <label for="duration" class="form-label">{{ $t("Badge Duration") }}</label>
+                        <label for="duration" class="form-label">{{ $t("Badge Duration (in hours)") }}</label>
-                        <input id="duration" v-model="badge.duration" type="number" min="0" class="form-control" required>
+                        <input id="duration" v-model="badge.duration" type="number" min="0" placeholder="24" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('label') " class="mb-3">
                         <label for="label" class="form-label">{{ $t("Badge Label") }}</label>
-                        <input id="label" v-model="badge.label" type="text" class="form-control" required>
+                        <input id="label" v-model="badge.label" type="text" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('prefix') " class="mb-3">
                         <label for="prefix" class="form-label">{{ $t("Badge Prefix") }}</label>
-                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control" required>
+                        <input id="prefix" v-model="badge.prefix" type="text" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('suffix') " class="mb-3">
                         <label for="suffix" class="form-label">{{ $t("Badge Suffix") }}</label>
-                        <input id="suffix" v-model="badge.suffix" type="text" class="form-control" required>
+                        <input id="suffix" v-model="badge.suffix" type="text" placeholder="%" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelColor') " class="mb-3">
                         <label for="labelColor" class="form-label">{{ $t("Badge Label Color") }}</label>
-                        <input id="labelColor" v-model="badge.labelColor" type="text" class="form-control" required>
+                        <input id="labelColor" v-model="badge.labelColor" type="text" placeholder="#555" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('color') " class="mb-3">
                         <label for="color" class="form-label">{{ $t("Badge Color") }}</label>
-                        <input id="color" v-model="badge.color" type="text" class="form-control" required>
+                        <input id="color" v-model="badge.color" type="text" :placeholder="badgeConstants.defaultUpColor" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelPrefix') " class="mb-3">
                         <label for="labelPrefix" class="form-label">{{ $t("Badge Label Prefix") }}</label>
-                        <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control" required>
+                        <input id="labelPrefix" v-model="badge.labelPrefix" type="text" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('labelSuffix') " class="mb-3">
                         <label for="labelSuffix" class="form-label">{{ $t("Badge Label Suffix") }}</label>
-                        <input id="labelSuffix" v-model="badge.labelSuffix" type="text" class="form-control" required>
+                        <input id="labelSuffix" v-model="badge.labelSuffix" type="text" placeholder="h" class="form-control">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('upColor') " class="mb-3">
                         <label for="upColor" class="form-label">{{ $t("Badge Up Color") }}</label>
-                        <input id="upColor" v-model="badge.upColor" type="text" class="form-control" required>
+                        <input id="upColor" v-model="badge.upColor" type="text" class="form-control" :placeholder="badgeConstants.defaultUpColor">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downColor') " class="mb-3">
                         <label for="downColor" class="form-label">{{ $t("Badge Down Color") }}</label>
-                        <input id="downColor" v-model="badge.downColor" type="text" class="form-control" required>
+                        <input id="downColor" v-model="badge.downColor" type="text" class="form-control" :placeholder="badgeConstants.defaultDownColor">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('pendingColor') " class="mb-3">
                         <label for="pendingColor" class="form-label">{{ $t("Badge Pending Color") }}</label>
-                        <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" required>
+                        <input id="pendingColor" v-model="badge.pendingColor" type="text" class="form-control" :placeholder="badgeConstants.defaultPendingColor">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('maintenanceColor') " class="mb-3">
                         <label for="maintenanceColor" class="form-label">{{ $t("Badge Maintenance Color") }}</label>
-                        <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" required>
+                        <input id="maintenanceColor" v-model="badge.maintenanceColor" type="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnColor') " class="mb-3">
                         <label for="warnColor" class="form-label">{{ $t("Badge Warn Color") }}</label>
-                        <input id="warnColor" v-model="badge.warnColor" type="number" min="0" class="form-control" required>
+                        <input id="warnColor" v-model="badge.warnColor" type="text" class="form-control" :placeholder="badgeConstants.defaultMaintenanceColor">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('warnDays') " class="mb-3">
                         <label for="warnDays" class="form-label">{{ $t("Badge Warn Days") }}</label>
-                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" required>
+                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireWarnDays">
                     </div>
 
                     <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
                         <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
-                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" required>
+                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireDownDays">
                     </div>
 
                     <div class="mb-3">
@@ -109,12 +109,16 @@
 
                     <div class="mb-3">
                         <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
-                        <input id="value" v-model="badge.value" type="text" class="form-control" required>
+                        <input id="value" v-model="badge.value" type="text" class="form-control">
+                    </div>
+
+                    <div class="mb-3 pt-3 d-flex justify-content-center">
+                        <img :src="badgeURL" :alt="$t('Badge Preview')">
                     </div>
 
                     <div class="my-3">
-                        <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
+                        <label for="badge-url" class="form-label">{{ $t("Badge URL") }}</label>
-                        <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
+                        <CopyableInput id="badge-url" v-model="badgeURL" type="url" disabled="disabled" />
                     </div>
                 </div>
 
@@ -131,6 +135,7 @@
 <script lang="ts">
 import { Modal } from "bootstrap";
 import CopyableInput from "./CopyableInput.vue";
+import { default as serverConfig } from "../../server/config.js";
 
 export default {
     components: {
@@ -224,7 +229,8 @@ export default {
                     "color",
                     "labelColor",
                 ],
-            }
+            },
+            badgeConstants: serverConfig.badgeConstants,
         };
     },
 

src/components/MonitorList.vue

@@ -1,17 +1,25 @@
 <template>
     <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
-            <div class="placeholder"></div>
+            <div class="header-top">
-            <div class="search-wrapper">
+                <div class="placeholder"></div>
-                <a v-if="searchText == ''" class="search-icon">
+                <div class="search-wrapper">
-                    <font-awesome-icon icon="search" />
+                    <a v-if="searchText == ''" class="search-icon">
-                </a>
+                        <font-awesome-icon icon="search" />
-                <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
+                    </a>
-                    <font-awesome-icon icon="times" />
+                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
-                </a>
+                        <font-awesome-icon icon="times" />
-                <form>
+                    </a>
-                    <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" autocomplete="off" />
+                    <form>
-                </form>
+                        <input
+                            v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')"
+                            autocomplete="off"
+                        />
+                    </form>
+                </div>
+            </div>
+            <div class="header-filter">
+                <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
             </div>
         </div>
         <div class="monitor-list" :class="{ scrollbar: scrollbar }">
@@ -19,18 +27,23 @@
                 {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
             </div>
 
-            <MonitorListItem v-for="(item, index) in sortedMonitorList" :key="index" :monitor="item" :isSearch="searchText !== ''" />
+            <MonitorListItem
+                v-for="(item, index) in sortedMonitorList" :key="index" :monitor="item"
+                :isSearch="searchText !== ''"
+            />
         </div>
     </div>
 </template>
 
 <script>
 import MonitorListItem from "../components/MonitorListItem.vue";
+import MonitorListFilter from "./MonitorListFilter.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 
 export default {
     components: {
         MonitorListItem,
+        MonitorListFilter,
     },
     props: {
         /** Should the scrollbar be shown */
@@ -42,6 +55,11 @@ export default {
         return {
             searchText: "",
             windowTop: 0,
+            filterState: {
+                status: null,
+                active: null,
+                tags: null,
+            }
         };
     },
     computed: {
@@ -72,8 +90,8 @@ export default {
                 const loweredSearchText = this.searchText.toLowerCase();
                 result = result.filter(monitor => {
                     return monitor.name.toLowerCase().includes(loweredSearchText)
-                    || monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
+                        || monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
-                    || tag.value?.toLowerCase().includes(loweredSearchText));
+                            || tag.value?.toLowerCase().includes(loweredSearchText));
                 });
             } else {
                 result = result.filter(monitor => monitor.parent === null);
@@ -105,6 +123,27 @@ export default {
                 return m1.name.localeCompare(m2.name);
             });
 
+            if (this.filterState.status != null && this.filterState.status.length > 0) {
+                result.map(monitor => {
+                    if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
+                        monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
+                    }
+                });
+                result = result.filter(monitor => this.filterState.status.includes(monitor.status));
+            }
+
+            if (this.filterState.active != null && this.filterState.active.length > 0) {
+                result = result.filter(monitor => this.filterState.active.includes(monitor.active));
+            }
+
+            if (this.filterState.tags != null && this.filterState.tags.length > 0) {
+                result = result.filter(monitor => {
+                    return monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
+                        .filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
+                        .length > 0;
+                });
+            }
+
             return result;
         },
     },
@@ -134,7 +173,14 @@ export default {
         /** Clear the search bar */
         clearSearchText() {
             this.searchText = "";
-        }
+        },
+        /**
+         * Update the MonitorList Filter
+         * @param {object} newFilter Object with new filter
+         */
+        updateFilter(newFilter) {
+            this.filterState = newFilter;
+        },
     },
 };
 </script>
@@ -159,8 +205,6 @@ export default {
     margin: -10px;
     margin-bottom: 10px;
     padding: 10px;
-    display: flex;
-    justify-content: space-between;
 
     .dark & {
         background-color: $dark-header-bg;
@@ -168,6 +212,17 @@ export default {
     }
 }
 
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-filter {
+    display: flex;
+    align-items: center;
+}
+
 @media (max-width: 770px) {
     .list-header {
         margin: -20px;
@@ -216,5 +271,4 @@ export default {
     padding-left: 67px;
     margin-top: 5px;
 }
-
 </style>

src/components/MonitorListFilter.vue

@@ -0,0 +1,284 @@
+<template>
+    <div class="px-2 pt-2 d-flex">
+        <button
+            type="button"
+            :title="$t('Clear current filters')"
+            class="clear-filters-btn btn"
+            :class="{ 'active': numFiltersActive > 0}"
+            tabindex="0"
+            :disabled="numFiltersActive === 0"
+            @click="clearFilters"
+        >
+            <font-awesome-icon icon="stream" />
+            <span v-if="numFiltersActive > 0" class="px-1 fw-bold">{{ numFiltersActive }}</span>
+            <font-awesome-icon v-if="numFiltersActive > 0" icon="times" />
+        </button>
+        <MonitorListFilterDropdown
+            :filterActive="filterState.status?.length > 0"
+        >
+            <template #status>
+                <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
+                <span v-else>
+                    {{ $t('Status') }}
+                </span>
+            </template>
+            <template #dropdown>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <Status :status="1" />
+                            <span class="ps-3">
+                                {{ $root.stats.up }}
+                                <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <Status :status="0" />
+                            <span class="ps-3">
+                                {{ $root.stats.down }}
+                                <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <Status :status="2" />
+                            <span class="ps-3">
+                                {{ $root.stats.pending }}
+                                <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <Status :status="3" />
+                            <span class="ps-3">
+                                {{ $root.stats.maintenance }}
+                                <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+            </template>
+        </MonitorListFilterDropdown>
+        <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
+            <template #status>
+                <span v-if="filterState.active?.length === 1">
+                    <span v-if="filterState.active[0]">{{ $t("Running") }}</span>
+                    <span v-else>{{ $t("filterActivePaused") }}</span>
+                </span>
+                <span v-else>
+                    {{ $t("filterActive") }}
+                </span>
+            </template>
+            <template #dropdown>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <span>{{ $t("Running") }}</span>
+                            <span class="ps-3">
+                                {{ $root.stats.active }}
+                                <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <span>{{ $t("filterActivePaused") }}</span>
+                            <span class="ps-3">
+                                {{ $root.stats.pause }}
+                                <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+            </template>
+        </MonitorListFilterDropdown>
+        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+            <template #status>
+                <Tag
+                    v-if="filterState.tags?.length === 1"
+                    :item="tagsList.find(tag => tag.id === filterState.tags[0])"
+                    :size="'sm'"
+                />
+                <span v-else>
+                    {{ $t('Tags') }}
+                </span>
+            </template>
+            <template #dropdown>
+                <li v-for="tag in tagsList" :key="tag.id">
+                    <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
+                        <div class="d-flex align-items-center justify-content-between">
+                            <span><Tag :item="tag" :size="'sm'" /></span>
+                            <span class="ps-3">
+                                {{ getTaggedMonitorCount(tag) }}
+                                <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                    <font-awesome-icon icon="check" />
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+            </template>
+        </MonitorListFilterDropdown>
+    </div>
+</template>
+
+<script>
+import MonitorListFilterDropdown from "./MonitorListFilterDropdown.vue";
+import Status from "./Status.vue";
+import Tag from "./Tag.vue";
+
+export default {
+    components: {
+        MonitorListFilterDropdown,
+        Status,
+        Tag,
+    },
+    props: {
+        filterState: {
+            type: Object,
+            required: true,
+        }
+    },
+    emits: [ "updateFilter" ],
+    data() {
+        return {
+            tagsList: [],
+        };
+    },
+    computed: {
+        numFiltersActive() {
+            let num = 0;
+
+            Object.values(this.filterState).forEach(item => {
+                if (item != null && item.length > 0) {
+                    num += 1;
+                }
+            });
+
+            return num;
+        }
+    },
+    mounted() {
+        this.getExistingTags();
+    },
+    methods: {
+        toggleStatusFilter(status) {
+            let newFilter = {
+                ...this.filterState
+            };
+
+            if (newFilter.status == null) {
+                newFilter.status = [ status ];
+            } else {
+                if (newFilter.status.includes(status)) {
+                    newFilter.status = newFilter.status.filter(item => item !== status);
+                } else {
+                    newFilter.status.push(status);
+                }
+            }
+            this.$emit("updateFilter", newFilter);
+        },
+        toggleActiveFilter(active) {
+            let newFilter = {
+                ...this.filterState
+            };
+
+            if (newFilter.active == null) {
+                newFilter.active = [ active ];
+            } else {
+                if (newFilter.active.includes(active)) {
+                    newFilter.active = newFilter.active.filter(item => item !== active);
+                } else {
+                    newFilter.active.push(active);
+                }
+            }
+            this.$emit("updateFilter", newFilter);
+        },
+        toggleTagFilter(tag) {
+            let newFilter = {
+                ...this.filterState
+            };
+
+            if (newFilter.tags == null) {
+                newFilter.tags = [ tag.id ];
+            } else {
+                if (newFilter.tags.includes(tag.id)) {
+                    newFilter.tags = newFilter.tags.filter(item => item !== tag.id);
+                } else {
+                    newFilter.tags.push(tag.id);
+                }
+            }
+            this.$emit("updateFilter", newFilter);
+        },
+        clearFilters() {
+            this.$emit("updateFilter", {
+                status: null,
+            });
+        },
+        getExistingTags() {
+            this.$root.getSocket().emit("getTags", (res) => {
+                if (res.ok) {
+                    this.tagsList = res.tags;
+                }
+            });
+        },
+        getTaggedMonitorCount(tag) {
+            return Object.values(this.$root.monitorList).filter(monitor => {
+                return monitor.tags.find(monitorTag => monitorTag.tag_id === tag.id);
+            }).length;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.clear-filters-btn {
+    font-size: 0.8em;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: 16px;
+    background-color: transparent;
+
+    .dark & {
+        color: $dark-font-color;
+        border: 1px solid $dark-font-color2;
+    }
+
+    &.active {
+        border: 1px solid $highlight;
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
+}
+</style>

src/components/MonitorListFilterDropdown.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="dropdown" @focusin="open = true" @focusout="handleFocusOut">
+        <button type="button" class="filter-dropdown-status" :class="{ 'active': filterActive }" tabindex="0">
+            <div class="px-1 d-flex align-items-center">
+                <slot name="status"></slot>
+            </div>
+            <span class="px-1">
+                <font-awesome-icon icon="angle-down" />
+            </span>
+        </button>
+        <ul class="filter-dropdown-menu" :class="{ 'open': open }">
+            <slot name="dropdown"></slot>
+        </ul>
+    </div>
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    props: {
+        filterActive: {
+            type: Boolean,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            open: false
+        };
+    },
+    methods: {
+        handleFocusOut(e) {
+            if (e.relatedTarget != null && this.$el.contains(e.relatedTarget)) {
+                return;
+            }
+            this.open = false;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+@import "../assets/vars.scss";
+
+.filter-dropdown-menu {
+    z-index: 100;
+    transition: all 0.2s;
+    padding: 5px 0 !important;
+    border-radius: 16px;
+    overflow: hidden;
+
+    position: absolute;
+    inset: 0 auto auto 0;
+    margin: 0;
+    transform: translate(0, 36px);
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+    visibility: hidden;
+    list-style: none;
+    height: 0;
+    opacity: 0;
+    background: white;
+
+    &.open {
+        height: unset;
+        visibility: inherit;
+        opacity: 1;
+    }
+
+    .dropdown-item {
+        padding: 5px 15px;
+    }
+
+    .dropdown-item:focus {
+        background: $highlight-white;
+
+        .dark & {
+            background: $dark-bg2;
+        }
+    }
+
+    .dark & {
+        background-color: $dark-bg;
+        color: $dark-font-color;
+        border-color: $dark-border-color;
+
+        .dropdown-item {
+            color: $dark-font-color;
+
+            &.active {
+                color: $dark-font-color2;
+                background-color: $highlight !important;
+            }
+
+            &:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+}
+
+.filter-dropdown-status {
+    display: flex;
+    align-items: center;
+    padding: 4px 10px;
+    margin-left: 5px;
+    border: 1px solid #ced4da;
+    border-radius: 25px;
+    background-color: transparent;
+
+    .dark & {
+        color: $dark-font-color;
+        border: 1px solid $dark-font-color2;
+    }
+
+    &.active {
+        border: 1px solid $highlight;
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
+}
+
+.filter-active {
+    color: $highlight;
+}
+</style>

src/components/NotificationDialog.vue

@@ -164,6 +164,7 @@ export default {
                 "SMSManager": "SmsManager (smsmanager.cz)",
                 "WeCom": "WeCom (企业微信群机器人)",
                 "ServerChan": "ServerChan (Server酱)",
+                "smsc": "SMSC",
             };
 
             // Sort by notification name

src/components/TagEditDialog.vue

@@ -99,7 +99,7 @@
                     </div>
 
                     <div class="modal-footer">
-                        <button v-if="tag" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                        <button v-if="tag && tag.id !== null" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
                             {{ $t("Delete") }}
                         </button>
                         <button type="submit" class="btn btn-primary" :disabled="processing">

src/components/notifications/SMSC.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="mb-3">
+        <label for="smsc-login" class="form-label">{{ $t("API Username") }}</label>
+        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSendSMSToken">
+            <a href="https://smsc.kz/" target="_blank">{{ $t("here") }}</a>
+        </i18n-t>
+        <input id="smsc-login" v-model="$parent.notification.smscLogin" type="text" class="form-control" required>
+        <label for="smsc-key" class="form-label">{{ $t("API Key") }}</label>
+        <HiddenInput id="smsc-key" v-model="$parent.notification.smscPassword" :required="true" autocomplete="new-password"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <div class="form-text">
+            {{ $t("checkPrice", ['СМСЦ']) }}
+            <a href="https://smsc.kz/tariffs/" target="_blank">https://smsc.kz/tariffs/</a>
+        </div>
+    </div>
+    <div class="mb-3">
+        <label for="smsc-to-number" class="form-label">{{ $t("Recipient Number") }}</label>
+        <input id="smsc-to-number" v-model="$parent.notification.smscToNumber" type="text" minlength="11" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="smsc-sender-name" class="form-label">{{ $t("From Name/Number") }}</label>
+        <input id="smsc-sender-name" v-model="$parent.notification.smscSenderName" type="text" minlength="1" maxlength="15" class="form-control">
+        <div class="form-text">{{ $t("Leave blank to use a shared sender number.") }}</div>
+    </div>
+    <div class="mb-3">
+        <label for="smsc-platform" class="form-label">{{ $t("smscTranslit") }}</label><span style="color: red;"><sup>*</sup></span>
+        <select id="smsc-platform" v-model="$parent.notification.smscTranslit" class="form-select">
+            <option value="0">{{ $t("Default") }}</option>
+            <option value="1">Translit</option>
+            <option value="2">MpaHc/Ium</option>
+        </select>
+    </div>
+</template>
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Slack.vue

@@ -24,5 +24,13 @@
                 <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank">https://www.webfx.com/tools/emoji-cheat-sheet/</a>
             </i18n-t>
         </div>
+
+        <div class="form-check form-switch">
+            <input id="slack-channel-notify" v-model="$parent.notification.slackchannelnotify" type="checkbox" class="form-check-input">
+            <label for="slack-channel-notify" class="form-label">{{ $t("Notify Channel") }}</label>
+        </div>
+        <div class="form-text">
+            {{ $t("aboutNotifyChannel") }}
+        </div>
     </div>
 </template>

src/components/notifications/index.js

@@ -4,6 +4,7 @@ import AliyunSMS from "./AliyunSms.vue";
 import Apprise from "./Apprise.vue";
 import Bark from "./Bark.vue";
 import ClickSendSMS from "./ClickSendSMS.vue";
+import SMSC from "./SMSC.vue";
 import DingDing from "./DingDing.vue";
 import Discord from "./Discord.vue";
 import Feishu from "./Feishu.vue";
@@ -61,6 +62,7 @@ const NotificationFormList = {
     "apprise": Apprise,
     "Bark": Bark,
     "clicksendsms": ClickSendSMS,
+    "smsc": SMSC,
     "DingDing": DingDing,
     "discord": Discord,
     "Feishu": Feishu,

src/lang/en.json

@@ -155,6 +155,8 @@
     "Disable 2FA": "Disable 2FA",
     "2FA Settings": "2FA Settings",
     "Two Factor Authentication": "Two Factor Authentication",
+    "filterActive": "Active",
+    "filterActivePaused": "Paused",
     "Active": "Active",
     "Inactive": "Inactive",
     "Token": "Token",
@@ -640,6 +642,8 @@
     "matrixDesc1": "You can find the internal room ID by looking in the advanced section of the room settings in your Matrix client. It should look like !QMdRCpUIfLwsfjxye6:home.server.",
     "matrixDesc2": "It is highly recommended you create a new user and do not use your own Matrix user's access token as it will allow full access to your account and all the rooms you joined. Instead, create a new user and only invite it to the room that you want to receive the notification in. You can get the access token by running {0}",
     "Channel Name": "Channel Name",
+    "Notify Channel": "Notify Channel",
+    "aboutNotifyChannel": "Notify channel will trigger a desktop or mobile notification for all members of the channel, whether their availability is set to active or away.",
     "Uptime Kuma URL": "Uptime Kuma URL",
     "Icon Emoji": "Icon Emoji",
     "signalImportant": "IMPORTANT: You cannot mix groups and numbers in recipients!",
@@ -743,13 +747,14 @@
     "Open Badge Generator": "Open Badge Generator",
     "Badge Generator": "{0}'s Badge Generator",
     "Badge Type": "Badge Type",
-    "Badge Duration": "Badge Duration",
+    "Badge Duration (in hours)": "Badge Duration (in hours)",
     "Badge Label": "Badge Label",
-    "Badge Prefix": "Badge Prefix",
+    "Badge Prefix": "Badge Value Prefix",
-    "Badge Suffix": "Badge Suffix",
+    "Badge Suffix": "Badge Value Suffix",
     "Badge Label Color": "Badge Label Color",
     "Badge Color": "Badge Color",
     "Badge Label Prefix": "Badge Label Prefix",
+    "Badge Preview": "Badge Preview",
     "Badge Label Suffix": "Badge Label Suffix",
     "Badge Up Color": "Badge Up Color",
     "Badge Down Color": "Badge Down Color",
@@ -763,6 +768,20 @@
     "Badge URL": "Badge URL",
     "Group": "Group",
     "Monitor Group": "Monitor Group",
+    "Kafka Brokers": "Kafka Brokers",
+    "Enter the list of brokers": "Enter the list of brokers",
+    "Press Enter to add broker": "Press Enter to add broker",
+    "Kafka Topic Name": "Kafka Topic Name",
+    "Kafka Producer Message": "Kafka Producer Message",
+    "Enable Kafka SSL": "Enable Kafka SSL",
+    "Enable Kafka Producer Auto Topic Creation": "Enable Kafka Producer Auto Topic Creation",
+    "Kafka SASL Options": "Kafka SASL Options",
+    "Mechanism": "Mechanism",
+    "Pick a SASL Mechanism...": "Pick a SASL Mechanism...",
+    "Authorization Identity": "Authorization Identity",
+    "AccessKey Id": "AccessKey Id",
+    "Secret AccessKey": "Secret AccessKey",
+    "Session Token": "Session Token",
     "noGroupMonitorMsg": "Not Available. Create a Group Monitor First.",
     "Close": "Close",
     "Request Body": "Request Body",

src/lang/zh-HK.json

@@ -139,6 +139,8 @@
     "Disable 2FA": "關閉 2FA",
     "2FA Settings": "2FA 設定",
     "Two Factor Authentication": "雙重認證",
+    "filterActive": "執行狀態",
+    "filterActivePaused": "已暫停",
     "Active": "生效",
     "Inactive": "未生效",
     "Token": "Token",

src/mixins/public.js

@@ -1,9 +1,12 @@
 import axios from "axios";
+import { getDevContainerServerHostname, isDevContainer } from "../util-frontend";
 
 const env = process.env.NODE_ENV || "production";
 
 // change the axios base url for development
-if (env === "development" || localStorage.dev === "dev") {
+if (env === "development" && isDevContainer()) {
+    axios.defaults.baseURL = location.protocol + "//" + getDevContainerServerHostname();
+} else if (env === "development" || localStorage.dev === "dev") {
     axios.defaults.baseURL = location.protocol + "//" + location.hostname + ":3001";
 }
 

src/mixins/socket.js

@@ -4,6 +4,7 @@ import jwtDecode from "jwt-decode";
 import Favico from "favico.js";
 import dayjs from "dayjs";
 import { DOWN, MAINTENANCE, PENDING, UP } from "../util.ts";
+import { getDevContainerServerHostname, isDevContainer } from "../util-frontend.js";
 const toast = useToast();
 
 let socket;
@@ -93,7 +94,9 @@ export default {
 
             let wsHost;
             const env = process.env.NODE_ENV || "production";
-            if (env === "development" || localStorage.dev === "dev") {
+            if (env === "development" && isDevContainer()) {
+                wsHost = protocol + getDevContainerServerHostname();
+            } else if (env === "development" || localStorage.dev === "dev") {
                 wsHost = protocol + location.hostname + ":3001";
             } else {
                 wsHost = protocol + location.host;
@@ -693,9 +696,11 @@ export default {
 
         stats() {
             let result = {
+                active: 0,
                 up: 0,
                 down: 0,
                 maintenance: 0,
+                pending: 0,
                 unknown: 0,
                 pause: 0,
             };
@@ -707,12 +712,13 @@ export default {
                 if (monitor && ! monitor.active) {
                     result.pause++;
                 } else if (beat) {
+                    result.active++;
                     if (beat.status === UP) {
                         result.up++;
                     } else if (beat.status === DOWN) {
                         result.down++;
                     } else if (beat.status === PENDING) {
-                        result.up++;
+                        result.pending++;
                     } else if (beat.status === MAINTENANCE) {
                         result.maintenance++;
                     } else {

src/pages/EditMonitor.vue

@@ -61,6 +61,9 @@
                                         <option value="mqtt">
                                             MQTT
                                         </option>
+                                        <option value="kafka-producer">
+                                            Kafka Producer
+                                        </option>
                                         <option value="sqlserver">
                                             Microsoft SQL Server
                                         </option>
@@ -166,6 +169,57 @@
                                 </select>
                             </div>
 
+                            <template v-if="monitor.type === 'kafka-producer'">
+                                <!-- Kafka Brokers List -->
+                                <div class="my-3">
+                                    <label for="kafkaProducerBrokers" class="form-label">{{ $t("Kafka Brokers") }}</label>
+                                    <VueMultiselect
+                                        id="kafkaProducerBrokers"
+                                        v-model="monitor.kafkaProducerBrokers"
+                                        :multiple="true"
+                                        :options="[]"
+                                        :placeholder="$t('Enter the list of brokers')"
+                                        :tag-placeholder="$t('Press Enter to add broker')"
+                                        :max-height="500"
+                                        :taggable="true"
+                                        :show-no-options="false"
+                                        :close-on-select="false"
+                                        :clear-on-select="false"
+                                        :preserve-search="false"
+                                        :preselect-first="false"
+                                        @tag="addKafkaProducerBroker"
+                                    ></VueMultiselect>
+                                </div>
+
+                                <!-- Kafka Topic Name -->
+                                <div class="my-3">
+                                    <label for="kafkaProducerTopic" class="form-label">{{ $t("Kafka Topic Name") }}</label>
+                                    <input id="kafkaProducerTopic" v-model="monitor.kafkaProducerTopic" type="text" class="form-control" required>
+                                </div>
+
+                                <!-- Kafka Producer Message -->
+                                <div class="my-3">
+                                    <label for="kafkaProducerMessage" class="form-label">{{ $t("Kafka Producer Message") }}</label>
+                                    <input id="kafkaProducerMessage" v-model="monitor.kafkaProducerMessage" type="text" class="form-control" required>
+                                </div>
+
+                                <!-- Kafka SSL -->
+                                <div class="my-3 form-check">
+                                    <input id="kafkaProducerSsl" v-model="monitor.kafkaProducerSsl" class="form-check-input" type="checkbox">
+                                    <label class="form-check-label" for="kafkaProducerSsl">
+                                        {{ $t("Enable Kafka SSL") }}
+                                    </label>
+                                </div>
+
+                                <!-- Kafka SSL -->
+                                <div class="my-3 form-check">
+                                    <input id="kafkaProducerAllowAutoTopicCreation" v-model="monitor.kafkaProducerAllowAutoTopicCreation" class="form-check-input" type="checkbox">
+                                    <label class="form-check-label" for="kafkaProducerAllowAutoTopicCreation">
+                                        {{ $t("Enable Kafka Producer Auto Topic Creation") }}
+                                    </label>
+                                </div>
+                            </template>
+
                             <!-- Hostname -->
                             <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius only -->
                             <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' ||monitor.type === 'mqtt' || monitor.type === 'radius'" class="my-3">
@@ -512,6 +566,56 @@
                                 </button>
                             </div>
 
+                            <!-- Kafka SASL Options -->
+                            <!-- Kafka Producer only -->
+                            <template v-if="monitor.type === 'kafka-producer'">
+                                <h2 class="mt-5 mb-2">{{ $t("Kafka SASL Options") }}</h2>
+                                <div class="my-3">
+                                    <label class="form-label" for="kafkaProducerSaslMechanism">
+                                        {{ $t("Mechanism") }}
+                                    </label>
+                                    <VueMultiselect
+                                        id="kafkaProducerSaslMechanism"
+                                        v-model="monitor.kafkaProducerSaslOptions.mechanism"
+                                        :options="kafkaSaslMechanismOptions"
+                                        :multiple="false"
+                                        :clear-on-select="false"
+                                        :preserve-search="false"
+                                        :placeholder="$t('Pick a SASL Mechanism...')"
+                                        :preselect-first="false"
+                                        :max-height="500"
+                                        :allow-empty="false"
+                                        :taggable="false"
+                                    ></VueMultiselect>
+                                </div>
+                                <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'None'">
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslUsername" class="form-label">{{ $t("Username") }}</label>
+                                        <input id="kafkaProducerSaslUsername" v-model="monitor.kafkaProducerSaslOptions.username" type="text" autocomplete="kafkaProducerSaslUsername" class="form-control">
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslPassword" class="form-label">{{ $t("Password") }}</label>
+                                        <input id="kafkaProducerSaslPassword" v-model="monitor.kafkaProducerSaslOptions.password" type="password" autocomplete="kafkaProducerSaslPassword" class="form-control">
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslAuthorizationIdentity" class="form-label">{{ $t("Authorization Identity") }}</label>
+                                        <input id="kafkaProducerSaslAuthorizationIdentity" v-model="monitor.kafkaProducerSaslOptions.authorizationIdentity" type="text" autocomplete="kafkaProducerSaslAuthorizationIdentity" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslAccessKeyId" class="form-label">{{ $t("AccessKey Id") }}</label>
+                                        <input id="kafkaProducerSaslAccessKeyId" v-model="monitor.kafkaProducerSaslOptions.accessKeyId" type="text" autocomplete="kafkaProducerSaslAccessKeyId" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslSecretAccessKey" class="form-label">{{ $t("Secret AccessKey") }}</label>
+                                        <input id="kafkaProducerSaslSecretAccessKey" v-model="monitor.kafkaProducerSaslOptions.secretAccessKey" type="password" autocomplete="kafkaProducerSaslSecretAccessKey" class="form-control" required>
+                                    </div>
+                                    <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+                                        <label for="kafkaProducerSaslSessionToken" class="form-label">{{ $t("Session Token") }}</label>
+                                        <input id="kafkaProducerSaslSessionToken" v-model="monitor.kafkaProducerSaslOptions.sessionToken" type="password" autocomplete="kafkaProducerSaslSessionToken" class="form-control">
+                                    </div>
+                                </div>
+                            </template>
+
                             <!-- HTTP Options -->
                             <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' ">
                                 <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
@@ -724,6 +828,7 @@ export default {
             },
             acceptedStatusCodeOptions: [],
             dnsresolvetypeOptions: [],
+            kafkaSaslMechanismOptions: [],
             ipOrHostnameRegexPattern: hostNameRegexPattern(),
             mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
             gameList: null,
@@ -987,12 +1092,21 @@ message HealthCheckResponse {
             "TXT",
         ];
 
+        let kafkaSaslMechanismOptions = [
+            "None",
+            "plain",
+            "scram-sha-256",
+            "scram-sha-512",
+            "aws",
+        ];
+
         for (let i = 100; i <= 999; i++) {
             acceptedStatusCodeOptions.push(i.toString());
         }
 
         this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
         this.dnsresolvetypeOptions = dnsresolvetypeOptions;
+        this.kafkaSaslMechanismOptions = kafkaSaslMechanismOptions;
     },
     methods: {
         /** Initialize the edit monitor form */
@@ -1026,7 +1140,11 @@ message HealthCheckResponse {
                     mqttTopic: "",
                     mqttSuccessMessage: "",
                     authMethod: null,
-                    httpBodyEncoding: "json"
+                    httpBodyEncoding: "json",
+                    kafkaProducerBrokers: [],
+                    kafkaProducerSaslOptions: {
+                        mechanism: "None",
+                    },
                 };
 
                 if (this.$root.proxyList && !this.monitor.proxyId) {
@@ -1067,6 +1185,7 @@ message HealthCheckResponse {
                             this.monitor.childrenIDs = undefined;
                             this.monitor.forceInactive = undefined;
                             this.monitor.pathName = undefined;
+                            this.monitor.screenshot = undefined;
 
                             this.monitor.name = this.$t("cloneOf", [ this.monitor.name ]);
                             this.$refs.tagsManager.newTags = this.monitor.tags.map((monitorTag) => {
@@ -1093,6 +1212,10 @@ message HealthCheckResponse {
 
         },
 
+        addKafkaProducerBroker(newBroker) {
+            this.monitor.kafkaProducerBrokers.push(newBroker);
+        },
+
         /**
          * Validate form input
          * @returns {boolean} Is the form input valid?

src/pages/StatusPage.vue

@@ -331,7 +331,7 @@
                 </p>
 
                 <div class="refresh-info mb-2">
-                    <div>{{ $t("Last Updated") }}: <date-time :value="lastUpdateTime" /></div>
+                    <div>{{ $t("Last Updated") }}:  {{ lastUpdateTimeDisplay }}</div>
                     <div>{{ $tc("statusPageRefreshIn", [ updateCountdownText]) }}</div>
                 </div>
             </footer>
@@ -366,7 +366,6 @@ import DOMPurify from "dompurify";
 import Confirm from "../components/Confirm.vue";
 import PublicGroupList from "../components/PublicGroupList.vue";
 import MaintenanceTime from "../components/MaintenanceTime.vue";
-import DateTime from "../components/Datetime.vue";
 import { getResBaseURL } from "../util-frontend";
 import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
 import Tag from "../components/Tag.vue";
@@ -392,7 +391,6 @@ export default {
         Confirm,
         PrismEditor,
         MaintenanceTime,
-        DateTime,
         Tag,
         VueMultiselect
     },
@@ -589,6 +587,10 @@ export default {
                 return "";
             }
         },
+
+        lastUpdateTimeDisplay() {
+            return this.$root.datetime(this.lastUpdateTime);
+        }
     },
     watch: {
 

src/util-frontend.js

@@ -72,13 +72,32 @@ export function setPageLocale() {
  */
 export function getResBaseURL() {
     const env = process.env.NODE_ENV;
-    if (env === "development" || localStorage.dev === "dev") {
+    if (env === "development" && isDevContainer()) {
+        return location.protocol + "//" + getDevContainerServerHostname();
+    } else if (env === "development" || localStorage.dev === "dev") {
         return location.protocol + "//" + location.hostname + ":3001";
     } else {
         return "";
     }
 }
 
+export function isDevContainer() {
+    // eslint-disable-next-line no-undef
+    return (typeof DEVCONTAINER === "string" && DEVCONTAINER === "1");
+}
+
+/**
+ * Supports GitHub Codespaces only currently
+ */
+export function getDevContainerServerHostname() {
+    if (!isDevContainer()) {
+        return "";
+    }
+
+    // eslint-disable-next-line no-undef
+    return CODESPACE_NAME + "-3001." + GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN;
+}
+
 /**
  *
  * @param {} mqtt wheather or not the regex should take into account the fact that it is an mqtt uri

test/backend.spec.js

@@ -306,6 +306,16 @@ describe("Test uptimeKumaServer.getClientIP()", () => {
         ip = await server.getClientIP(fakeSocket);
         expect(ip).toBe("203.0.113.195");
 
+        fakeSocket.client.conn.remoteAddress = "2001:db8::1";
+        fakeSocket.client.conn.request.headers = {};
+        ip = await server.getClientIP(fakeSocket);
+        expect(ip).toBe("2001:db8::1");
+
+        fakeSocket.client.conn.remoteAddress = "::ffff:127.0.0.1";
+        fakeSocket.client.conn.request.headers = {};
+        ip = await server.getClientIP(fakeSocket);
+        expect(ip).toBe("127.0.0.1");
+
         await Database.close();
     }, 120000);
 });