update to 1.2.0

Add Pushbullet notification service

.do/deploy.template.yaml

@@ -1,11 +0,0 @@
-spec:
-  name: uptime-kuma
-  services:
-    - name: server
-      git:
-        repo_clone_url: https://github.com/louislam/uptime-kuma
-        branch: master
-      http_port: 3001
-      build_command: npm run setup
-      run_command: npm run start-server
-

.eslintrc.js

@@ -36,6 +36,11 @@ module.exports = {
         "no-multi-spaces": ["error", {
             ignoreEOLComments: true,
         }],
+        "space-before-function-paren": ["error", {
+            "anonymous": "always",
+            "named": "never",
+            "asyncArrow": "always"
+        }],
         "curly": "error",
         "object-curly-spacing": ["error", "always"],
         "object-curly-newline": "off",
@@ -62,9 +67,6 @@ module.exports = {
             exceptAfterSingleLine: true,
         }],
         "no-unneeded-ternary": "error",
-        "no-else-return": ["error", {
-            "allowElseIf": false,
-        }],
         "array-bracket-newline": ["error", "consistent"],
         "eol-last": ["error", "always"],
         //'prefer-template': 'error',

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

@@ -6,5 +6,6 @@ labels: help
 assignees: ''
 
 ---
-
+**Is it a duplicate question?**
+Please search in Issues without filters: https://github.com/louislam/uptime-kuma/issues?q=
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,6 +7,9 @@ assignees: ''
 
 ---
 
+**Is it a duplicate question?**
+Please search in Issues without filters: https://github.com/louislam/uptime-kuma/issues?q=
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,6 +6,8 @@ labels: enhancement
 assignees: ''
 
 ---
+**Is it a duplicate question?**
+Please search in Issues without filters: https://github.com/louislam/uptime-kuma/issues?q=
 
 **Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

.stylelintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "stylelint-config-recommended",
+  "extends": "stylelint-config-recommended"
 }

README.md

@@ -2,7 +2,6 @@
 
 <a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/stars/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/pulls/louislam/uptime-kuma" /></a> <a target="_blank" href="https://hub.docker.com/r/louislam/uptime-kuma"><img src="https://img.shields.io/docker/v/louislam/uptime-kuma/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://github.com/louislam/uptime-kuma"><img src="https://img.shields.io/github/last-commit/louislam/uptime-kuma" /></a>
 
-
 <div align="center" width="100%">
     <img src="./public/icon.svg" width="128" alt="" />
 </div>
@@ -11,16 +10,16 @@ It is a self-hosted monitoring tool like "Uptime Robot".
 
 <img src="https://louislam.net/uptimekuma/1.jpg" width="512" alt="" />
 
-# Features
+## ⭐ Features
 
 * Monitoring uptime for HTTP(s) / TCP / Ping.
 * Fancy, Reactive, Fast UI/UX.
 * Notifications via Webhook, Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP) and more by Apprise.
 * 20 seconds interval.
 
-# How to Use
+## 🔧 How to Install
 
-## Docker
+### 🐳 Docker
 
 ```bash
 # Create a volume
@@ -32,13 +31,10 @@ docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name upti
 
 Browse to http://localhost:3001 after started.
 
-Change Port and Volume
 
-```bash
-docker run -d --restart=always -p <YOUR_PORT>:3001 -v <YOUR_DIR OR VOLUME>:/app/data --name uptime-kuma louislam/uptime-kuma:1
-```
+If you want to change port and volume, or need to browse via a reserve proxy, please read: https://github.com/louislam/uptime-kuma/wiki/Installation.
 
-## Without Docker
+### 💪🏻 Without Docker (Recommanded for x86/x64 only)
 
 Required Tools: Node.js >= 14, git and pm2.
 
@@ -50,61 +46,55 @@ npm run setup
 # Option 1. Try it
 npm run start-server
 
-# (Recommended) 
+# (Recommended)
 # Option 2. Run in background using PM2
 # Install PM2 if you don't have: npm install pm2 -g
 pm2 start npm --name uptime-kuma -- run start-server
 
-# Listen to different port or hostname
-pm2 start npm --name uptime-kuma -- run start-server -- --port=80 --hostname=0.0.0.0
-
 ```
 
 Browse to http://localhost:3001 after started.
 
+If you want to change port and hostname, or need to browse via a reserve proxy, please read: https://github.com/louislam/uptime-kuma/wiki/Installation.
 
-## (Optional) One more step for Reverse Proxy
+## 🆙 How to Update
 
-This is optional for someone who want to do reverse proxy.
-
-Unlikely other web apps, Uptime Kuma is based on WebSocket. You need two more headers **"Upgrade"** and **"Connection"** in order to reverse proxy WebSocket.
-
-Please read wiki for more info:
-https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy
-
-## One-click Deploy
-
-<!---
-Abort. Heroku instance killed the server.js if idle, stupid.
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/louislam/uptime-kuma/tree/1.0.10)
--->
-
-[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/louislam/uptime-kuma/tree/master&refcode=e2c7eb658434)
-
-# How to Update
-
-### Docker
+### 🆙🐳 Docker
 
 Re-pull the latest docker image and create another container with the same volume.
 
-PS: For every new release, it takes some time to build the docker image, please be patient if it is not available yet.
-
-### Without Docker
+For someone who used my "How-to-use" commands to install Uptime Kuma, you can update by this:
 
 ```bash
+docker pull louislam/uptime-kuma:1
+docker stop uptime-kuma
+docker rm uptime-kuma
+docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1
+```
+
+PS: For every new release, it takes some time to build the docker image, please be patient if it is not available yet.
+
+### 🆙 💪🏻 Without Docker
+
+```bash
+cd <uptime-kuma-directory>
 git fetch --all
-git checkout 1.0.10 --force
+git checkout 1.2.0 --force
 npm install
 npm run build
 pm2 restart uptime-kuma
 ```
 
-# What's Next?
+## 🆕 What's Next?
 
 I will mark requests/issues to the next milestone.
 https://github.com/louislam/uptime-kuma/milestones
 
-# More Screenshots
+## 🖼 More Screenshots
+
+Dark Mode:
+
+<img src="https://user-images.githubusercontent.com/1336778/128710166-908f8d88-9256-43f3-9c49-bfc2c56011d2.png" width="400" alt="" />
 
 Settings Page:
 
@@ -114,8 +104,7 @@ Telegram Notification Sample:
 
 <img src="https://louislam.net/uptimekuma/3.jpg" width="400" alt="" />
 
-
-# Motivation
+## Motivation
 
 * I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one. One of the close one is statping. Unfortunately, it is not stable and unmaintained.
 * Want to build a fancy UI.
@@ -124,14 +113,14 @@ Telegram Notification Sample:
 * Try to use WebSocket with SPA instead of REST API.
 * Deploy my first Docker image to Docker Hub.
 
-
 If you love this project, please consider giving me a ⭐.
 
-
-# Contribute
+## Contribute
 
 If you want to report a bug or request a new feature. Free feel to open a new issue.
 
 If you want to modify Uptime Kuma, this guideline maybe useful for you: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md
 
 English proofreading is needed too, because my grammar is not that great sadly. Feel free to correct my grammar in this Readme, source code or wiki.
+
+🐻

app.json

@@ -1,7 +0,0 @@
-{
-    "name": "Uptime Kuma",
-    "description": "A fancy self-hosted monitoring tool",
-    "repository": "https://github.com/louislam/uptime-kuma",
-    "logo": "https://raw.githubusercontent.com/louislam/uptime-kuma/master/public/icon.png",
-    "keywords": ["node", "express", "socket-io", "uptime-kuma", "uptime"]
-}

db/patch6.sql

@@ -0,0 +1,74 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+PRAGMA foreign_keys = off;
+
+BEGIN TRANSACTION;
+
+create table monitor_dg_tmp (
+	id INTEGER not null primary key autoincrement,
+	name VARCHAR(150),
+	active BOOLEAN default 1 not null,
+	user_id INTEGER references user on update cascade on delete
+	set
+		null,
+		interval INTEGER default 20 not null,
+		url TEXT,
+		type VARCHAR(20),
+		weight INTEGER default 2000,
+		hostname VARCHAR(255),
+		port INTEGER,
+		created_date DATETIME default (DATETIME('now')) not null,
+		keyword VARCHAR(255),
+		maxretries INTEGER NOT NULL DEFAULT 0,
+		ignore_tls BOOLEAN default 0 not null,
+		upside_down BOOLEAN default 0 not null,
+        maxredirects INTEGER default 10 not null,
+        accepted_statuscodes_json TEXT default '["200-299"]' not null
+);
+
+insert into
+	monitor_dg_tmp(
+		id,
+		name,
+		active,
+		user_id,
+		interval,
+		url,
+		type,
+		weight,
+		hostname,
+		port,
+        created_date,
+		keyword,
+		maxretries,
+		ignore_tls,
+		upside_down
+	)
+select
+	id,
+	name,
+	active,
+	user_id,
+	interval,
+	url,
+	type,
+	weight,
+	hostname,
+	port,
+    created_date,
+	keyword,
+	maxretries,
+	ignore_tls,
+	upside_down
+from
+	monitor;
+
+drop table monitor;
+
+alter table
+	monitor_dg_tmp rename to monitor;
+
+create index user_id on monitor (user_id);
+
+COMMIT;
+
+PRAGMA foreign_keys = on;

dockerfile

@@ -5,8 +5,9 @@ WORKDIR /app
 # split the sqlite install here, so that it can caches the arm prebuilt
 RUN apk add --no-cache --virtual .build-deps make g++ python3 python3-dev && \
             ln -s /usr/bin/python3 /usr/bin/python && \
-            npm install sqlite3@5.0.2 bcrypt@5.0.1 && \
-            apk del .build-deps
+            npm install @louislam/sqlite3@5.0.3 bcrypt@5.0.1 && \
+            apk del .build-deps && \
+            rm -f /usr/bin/python
 
 # Touching above code may causes sqlite3 re-compile again, painful slow.
 
@@ -15,12 +16,8 @@ RUN apk add --no-cache python3 py3-cryptography py3-pip py3-six py3-yaml py3-cli
 RUN pip3 --no-cache-dir install apprise && \
             rm -rf /root/.cache
 
-# New things add here
-
 COPY . .
-RUN npm install && \
-            npm run build && \
-            npm prune
+RUN npm install && npm run build && npm prune
 
 EXPOSE 3001
 VOLUME ["/app/data"]

extra/compile-install-script.ps1

@@ -0,0 +1 @@
+docker run -it --rm -v ${pwd}:/app louislam/batsh /usr/bin/batsh bash --output ./install.sh ./extra/install.batsh

extra/healthcheck.js

@@ -1,19 +1,19 @@
-var http = require("http");
-var options = {
-  host: "localhost",
-  port: "3001",
-  timeout: 2000,
+let http = require("http");
+let options = {
+    host: "localhost",
+    port: "3001",
+    timeout: 2000,
 };
-var request = http.request(options, (res) => {
-  console.log(`STATUS: ${res.statusCode}`);
-  if (res.statusCode == 200) {
-    process.exit(0);
-  } else {
-    process.exit(1);
-  }
+let request = http.request(options, (res) => {
+    console.log(`STATUS: ${res.statusCode}`);
+    if (res.statusCode == 200) {
+        process.exit(0);
+    } else {
+        process.exit(1);
+    }
 });
 request.on("error", function (err) {
-  console.log("ERROR");
-  process.exit(1);
+    console.log("ERROR");
+    process.exit(1);
 });
 request.end();

extra/mark-as-nightly.js

@@ -1,25 +1,9 @@
-/**
- * String.prototype.replaceAll() polyfill
- * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
- * @author Chris Ferdinandi
- * @license MIT
- */
-if (!String.prototype.replaceAll) {
-    String.prototype.replaceAll = function(str, newStr){
-
-        // If a regex pattern
-        if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
-            return this.replace(str, newStr);
-        }
-
-        // If a string
-        return this.replace(new RegExp(str, 'g'), newStr);
-
-    };
-}
-
-const pkg = require('../package.json');
+const pkg = require("../package.json");
 const fs = require("fs");
+const util = require("../src/util");
+
+util.polyfill();
+
 const oldVersion = pkg.version
 const newVersion = oldVersion + "-nightly"
 
@@ -35,6 +19,6 @@ if (newVersion) {
 
     // Process README.md
     if (fs.existsSync("README.md")) {
-        fs.writeFileSync("README.md", fs.readFileSync("README.md", 'utf8').replaceAll(oldVersion, newVersion))
+        fs.writeFileSync("README.md", fs.readFileSync("README.md", "utf8").replaceAll(oldVersion, newVersion))
     }
 }

extra/reset-password.js

@@ -0,0 +1,59 @@
+console.log("== Uptime Kuma Reset Password Tool ==");
+
+console.log("Loading the database");
+
+const Database = require("../server/database");
+const { R } = require("redbean-node");
+const readline = require("readline");
+const { initJWTSecret } = require("../server/util-server");
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+(async () => {
+    await Database.connect();
+
+    try {
+        const user = await R.findOne("user");
+
+        if (! user) {
+            throw new Error("user not found, have you installed?");
+        }
+
+        console.log("Found user: " + user.username);
+
+        while (true) {
+            let password = await question("New Password: ");
+            let confirmPassword = await question("Confirm New Password: ");
+
+            if (password === confirmPassword) {
+                await user.resetPassword(password);
+
+                // Reset all sessions by reset jwt secret
+                await initJWTSecret();
+
+                rl.close();
+                break;
+            } else {
+                console.log("Passwords do not match, please try again.");
+            }
+        }
+
+        console.log("Password reset successfully.");
+    } catch (e) {
+        console.error("Error: " + e.message);
+    }
+
+    await Database.close();
+
+    console.log("Finished. You should restart the Uptime Kuma server.")
+})();
+
+function question(question) {
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            resolve(answer);
+        })
+    });
+}

extra/update-version.js

@@ -1,26 +1,10 @@
-/**
- * String.prototype.replaceAll() polyfill
- * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
- * @author Chris Ferdinandi
- * @license MIT
- */
-if (!String.prototype.replaceAll) {
-    String.prototype.replaceAll = function(str, newStr) {
-
-        // If a regex pattern
-        if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
-            return this.replace(str, newStr);
-        }
-
-        // If a string
-        return this.replace(new RegExp(str, "g"), newStr);
-
-    };
-}
-
 const pkg = require("../package.json");
 const fs = require("fs");
 const child_process = require("child_process");
+const util = require("../src/util");
+
+util.polyfill();
+
 const oldVersion = pkg.version;
 const newVersion = process.argv[2];
 

index.html

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#5cdd8b" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="theme-color" id="theme-color" content="" />
     <meta name="description" content="Uptime Kuma monitoring tool" />
     <title>Uptime Kuma</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.0.10",
+    "version": "1.2.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -13,58 +13,65 @@
         "dev": "vite --host",
         "start": "npm run start-server",
         "start-server": "node server/server.js",
+        "start-demo-server": "set NODE_ENV=demo && node server/server.js",
         "update": "",
         "build": "vite build",
         "vite-preview-dist": "vite preview --host",
-        "build-docker": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.0.10 --target release . --push",
+        "build-docker": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma -t louislam/uptime-kuma:1 -t louislam/uptime-kuma:1.2.0 --target release . --push",
         "build-docker-nightly": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:nightly --target nightly . --push",
         "build-docker-nightly-amd64": "docker buildx build --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push",
-        "setup": "git checkout 1.0.10 && npm install && npm run build",
+        "setup": "git checkout 1.2.0 && npm install && npm run build",
         "update-version": "node extra/update-version.js",
-        "mark-as-nightly": "node extra/mark-as-nightly.js"
+        "mark-as-nightly": "node extra/mark-as-nightly.js",
+        "reset-password": "node extra/reset-password.js",
+        "compile-install-script": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./extra/compile-install-script.ps1"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.35",
-        "@fortawesome/free-regular-svg-icons": "^5.15.3",
-        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-regular-svg-icons": "^5.15.4",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
-        "@popperjs/core": "^2.9.2",
+        "@louislam/sqlite3": "^5.0.3",
+        "@popperjs/core": "^2.9.3",
         "args-parser": "^1.3.0",
         "axios": "^0.21.1",
         "bcrypt": "^5.0.1",
-        "bootstrap": "^5.0.2",
+        "bootstrap": "^5.1.0",
+        "chart.js": "^3.5.0",
+        "chartjs-adapter-dayjs": "^1.0.0",
         "command-exists": "^1.2.9",
         "dayjs": "^1.10.6",
         "express": "^4.17.1",
         "express-basic-auth": "^1.2.0",
         "form-data": "^4.0.0",
-        "http-graceful-shutdown": "^3.1.2",
+        "http-graceful-shutdown": "^3.1.3",
         "jsonwebtoken": "^8.5.1",
         "nodemailer": "^6.6.3",
         "password-hash": "^1.2.2",
-        "prom-client": "^13.1.0",
+        "prom-client": "^13.2.0",
         "prometheus-api-metrics": "^3.2.0",
-        "redbean-node": "0.0.20",
+        "redbean-node": "0.0.21",
         "socket.io": "^4.1.3",
         "socket.io-client": "^4.1.3",
-        "sqlite3": "^5.0.2",
         "tcp-ping": "^0.1.1",
         "v-pagination-3": "^0.1.6",
-        "vue": "^3.0.5",
+        "vue": "^3.2.2",
+        "vue-chart-3": "^0.5.7",
         "vue-confirm-dialog": "^1.0.2",
-        "vue-router": "^4.0.10",
+        "vue-multiselect": "^3.0.0-alpha.2",
+        "vue-router": "^4.0.11",
         "vue-toastification": "^2.0.0-rc.1"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.13.10",
-        "@types/bootstrap": "^5.0.17",
-        "@vitejs/plugin-legacy": "^1.5.0",
-        "@vitejs/plugin-vue": "^1.3.0",
-        "@vue/compiler-sfc": "^3.1.5",
-        "core-js": "^3.15.2",
-        "eslint": "^7.31.0",
-        "eslint-plugin-vue": "^7.14.0",
-        "sass": "^1.36.0",
+        "@babel/eslint-parser": "^7.15.0",
+        "@types/bootstrap": "^5.1.1",
+        "@vitejs/plugin-legacy": "^1.5.1",
+        "@vitejs/plugin-vue": "^1.4.0",
+        "@vue/compiler-sfc": "^3.2.2",
+        "core-js": "^3.16.1",
+        "eslint": "^7.32.0",
+        "eslint-plugin-vue": "^7.16.0",
+        "sass": "^1.37.5",
         "stylelint": "^13.13.1",
         "stylelint-config-recommended": "^5.0.0",
         "stylelint-config-standard": "^22.0.0",

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

server/database.js

@@ -1,17 +1,38 @@
 const fs = require("fs");
 const { sleep } = require("../src/util");
 const { R } = require("redbean-node");
-const {
-    setSetting, setting,
-} = require("./util-server");
+const { setSetting, setting } = require("./util-server");
+const knex = require("knex");
 
 class Database {
 
     static templatePath = "./db/kuma.db"
     static path = "./data/kuma.db";
-    static latestVersion = 5;
+    static latestVersion = 6;
     static noReject = true;
 
+    static async connect() {
+        const Dialect = require("knex/lib/dialects/sqlite3/index.js");
+        Dialect.prototype._driver = () => require("@louislam/sqlite3");
+
+        R.setup(knex({
+            client: Dialect,
+            connection: {
+                filename: Database.path,
+            },
+            useNullAsDefault: true,
+            pool: {
+                min: 1,
+                max: 1,
+                idleTimeoutMillis: 30000,
+            }
+        }));
+
+        // Auto map the model to a bean object
+        R.freeze(true)
+        await R.autoloadModels("./server/model");
+    }
+
     static async patch() {
         let version = parseInt(await setting("database_version"));
 
@@ -24,6 +45,8 @@ class Database {
 
         if (version === this.latestVersion) {
             console.info("Database no need to patch");
+        } else if (version > this.latestVersion) {
+            console.info("Warning: Database version is newer than expected");
         } else {
             console.info("Database patch is needed")
 

server/model/monitor.js

@@ -7,10 +7,11 @@ dayjs.extend(timezone)
 const axios = require("axios");
 const { Prometheus } = require("../prometheus");
 const { debug, UP, DOWN, PENDING, flipStatus } = require("../../src/util");
-const { tcping, ping, checkCertificate } = require("../util-server");
+const { tcping, ping, checkCertificate, checkStatusCode } = require("../util-server");
 const { R } = require("redbean-node");
 const { BeanModel } = require("redbean-node/dist/bean-model");
 const { Notification } = require("../notification")
+const version = require("../../package.json").version;
 
 /**
  * status:
@@ -45,6 +46,8 @@ class Monitor extends BeanModel {
             keyword: this.keyword,
             ignoreTls: this.getIgnoreTls(),
             upsideDown: this.isUpsideDown(),
+            maxredirects: this.maxredirects,
+            accepted_statuscodes: this.getAcceptedStatuscodes(),
             notificationIDList,
         };
     }
@@ -65,6 +68,10 @@ class Monitor extends BeanModel {
         return Boolean(this.upsideDown);
     }
 
+    getAcceptedStatuscodes() {
+        return JSON.parse(this.accepted_statuscodes_json);
+    }
+
     start(io) {
         let previousBeat = null;
         let retries = 0;
@@ -73,6 +80,10 @@ class Monitor extends BeanModel {
 
         const beat = async () => {
 
+            // Expose here for prometheus update
+            // undefined if not https
+            let tlsInfo = undefined;
+
             if (! previousBeat) {
                 previousBeat = await R.findOne("heartbeat", " monitor_id = ? ORDER BY time DESC", [
                     this.id,
@@ -104,13 +115,19 @@ class Monitor extends BeanModel {
                     // Use Custom agent to disable session reuse
                     // https://github.com/nodejs/node/issues/3940
                     let res = await axios.get(this.url, {
+                        timeout: this.interval * 1000 * 0.8,
                         headers: {
-                            "User-Agent": "Uptime-Kuma",
+                            "Accept": "*/*",
+                            "User-Agent": "Uptime-Kuma/" + version,
                         },
                         httpsAgent: new https.Agent({
                             maxCachedSessions: 0,
                             rejectUnauthorized: ! this.getIgnoreTls(),
                         }),
+                        maxRedirects: this.maxredirects,
+                        validateStatus: (status) => {
+                            return checkStatusCode(status, this.getAcceptedStatuscodes());
+                        },
                     });
                     bean.msg = `${res.status} - ${res.statusText}`
                     bean.ping = dayjs().valueOf() - startTime;
@@ -120,9 +137,11 @@ class Monitor extends BeanModel {
                     let certInfoStartTime = dayjs().valueOf();
                     if (this.getUrl()?.protocol === "https:") {
                         try {
-                            await this.updateTlsInfo(checkCertificate(res));
+                            tlsInfo = await this.updateTlsInfo(checkCertificate(res));
                         } catch (e) {
-                            console.error(e.message)
+                            if (e.message !== "No TLS certificate in response") {
+                                console.error(e.message)
+                            }
                         }
                     }
 
@@ -240,7 +259,7 @@ class Monitor extends BeanModel {
                 console.warn(`Monitor #${this.id} '${this.name}': Failing: ${bean.msg} | Type: ${this.type}`)
             }
 
-            prometheus.update(bean)
+            prometheus.update(bean, tlsInfo)
 
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
 
@@ -275,7 +294,7 @@ class Monitor extends BeanModel {
     /**
      * Store TLS info to database
      * @param checkCertificateResult
-     * @returns {Promise<void>}
+     * @returns {Promise<object>}
      */
     async updateTlsInfo(checkCertificateResult) {
         let tls_info_bean = await R.findOne("monitor_tls_info", "monitor_id = ?", [
@@ -287,6 +306,8 @@ class Monitor extends BeanModel {
         }
         tls_info_bean.info_json = JSON.stringify(checkCertificateResult);
         await R.store(tls_info_bean);
+
+        return checkCertificateResult;
     }
 
     static async sendStats(io, monitorID, userID) {

server/model/user.js

@@ -0,0 +1,21 @@
+const { BeanModel } = require("redbean-node/dist/bean-model");
+const passwordHash = require("../password-hash");
+const { R } = require("redbean-node");
+
+class User extends BeanModel {
+
+    /**
+     * Direct execute, no need R.store()
+     * @param newPassword
+     * @returns {Promise<void>}
+     */
+    async resetPassword(newPassword) {
+        await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [
+            passwordHash.generate(newPassword),
+            this.id
+        ]);
+        this.password = newPassword;
+    }
+}
+
+module.exports = User;

server/notification.js

@@ -84,40 +84,78 @@ class Notification {
 
         } else if (notification.type === "discord") {
             try {
+                const discordDisplayName = notification.discordUsername || "Uptime Kuma";
+
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
-                    let data = {
-                        username: "Uptime-Kuma",
+                    let discordtestdata = {
+                        username: discordDisplayName,
                         content: msg,
                     }
-                    await axios.post(notification.discordWebhookUrl, data)
+                    await axios.post(notification.discordWebhookUrl, discordtestdata)
                     return okMsg;
                 }
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
-                    var alertColor = "16711680";
+                    let discorddowndata = {
+                        username: discordDisplayName,
+                        embeds: [{
+                            title: "❌ One of your services went down. ❌",
+                            color: 16711680,
+                            timestamp: heartbeatJSON["time"],
+                            fields: [
+                                {
+                                    name: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    name: "Service URL",
+                                    value: monitorJSON["url"],
+                                },
+                                {
+                                    name: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    name: "Error",
+                                    value: heartbeatJSON["msg"],
+                                },
+                            ],
+                        }],
+                    }
+                    await axios.post(notification.discordWebhookUrl, discorddowndata)
+                    return okMsg;
+
                 } else if (heartbeatJSON["status"] == 1) {
-                    var alertColor = "65280";
+                    let discordupdata = {
+                        username: discordDisplayName,
+                        embeds: [{
+                            title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
+                            color: 65280,
+                            timestamp: heartbeatJSON["time"],
+                            fields: [
+                                {
+                                    name: "Service Name",
+                                    value: monitorJSON["name"],
+                                },
+                                {
+                                    name: "Service URL",
+                                    value: "[Visit Service](" + monitorJSON["url"] + ")",
+                                },
+                                {
+                                    name: "Time (UTC)",
+                                    value: heartbeatJSON["time"],
+                                },
+                                {
+                                    name: "Ping",
+                                    value: heartbeatJSON["ping"] + "ms",
+                                },
+                            ],
+                        }],
+                    }
+                    await axios.post(notification.discordWebhookUrl, discordupdata)
+                    return okMsg;
                 }
-                let data = {
-                    username: "Uptime-Kuma",
-                    embeds: [{
-                        title: "Uptime-Kuma Alert",
-                        color: alertColor,
-                        fields: [
-                            {
-                                name: "Time (UTC)",
-                                value: heartbeatJSON["time"],
-                            },
-                            {
-                                name: "Message",
-                                value: msg,
-                            },
-                        ],
-                    }],
-                }
-                await axios.post(notification.discordWebhookUrl, data)
-                return okMsg;
             } catch (error) {
                 throwGeneralAxiosError(error)
             }
@@ -155,6 +193,34 @@ class Notification {
                 console.log(error)
                 return false;
             }
+        } else if (notification.type === "octopush") {
+            try {
+                let config = {
+                    headers: {
+                        'api-key': notification.octopushAPIKey,
+                        'api-login': notification.octopushLogin,
+                        'cache-control': 'no-cache'
+                    }
+                };
+                let data = {
+                    "recipients": [
+                        {
+                            "phone_number": notification.octopushPhoneNumber
+                        }
+                    ],
+                    //octopush not supporting non ascii char
+                    "text": msg.replace(/[^\x00-\x7F]/g, ""),
+                    "type": notification.octopushSMSType,
+                    "purpose": "alert",
+                    "sender": notification.octopushSenderName
+                };
+
+                await axios.post(`https://api.octopush.com/v1/public/sms-campaign/send`, data, config)
+                return true;
+            } catch (error) {
+                console.log(error)
+                return false;
+            }
         } else if (notification.type === "slack") {
             try {
                 if (heartbeatJSON == null) {
@@ -288,6 +354,41 @@ class Notification {
                 throwGeneralAxiosError(error)
             }
 
+        } else if (notification.type === "pushbullet") {
+            try {
+                let pushbulletUrl = `https://api.pushbullet.com/v2/pushes`;
+                let config = {
+                    headers: {
+                        'Access-Token': notification.pushbulletAccessToken,
+                        'Content-Type': 'application/json'
+                    }
+                };
+                if (heartbeatJSON == null) {
+                    let testdata = {
+                        "type": "note", 
+                        "title": "Uptime Kuma Alert",
+                        "body": "Testing Successful.",
+                    }
+                    await axios.post(pushbulletUrl, testdata, config)
+                } else if (heartbeatJSON["status"] == 0) {
+                    let downdata = {
+                        "type": "note", 
+                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "body": "[🔴 Down]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                    }
+                    await axios.post(pushbulletUrl, downdata, config)
+                } else if (heartbeatJSON["status"] == 1) {
+                    let updata = {
+                        "type": "note", 
+                        "title": "UptimeKuma Alert:" + monitorJSON["name"],
+                        "body": "[✅ Up]" + heartbeatJSON["msg"] + "\nTime (UTC):" + heartbeatJSON["time"],
+                    }
+                    await axios.post(pushbulletUrl, updata, config)
+                }
+                return okMsg;
+            } catch (error) {
+                throwGeneralAxiosError(error)
+            }
         } else {
             throw new Error("Notification type is not supported")
         }

server/ping-lite.js

@@ -1,12 +1,13 @@
 // https://github.com/ben-bradley/ping-lite/blob/master/ping-lite.js
 // Fixed on Windows
-
-let spawn = require("child_process").spawn,
+const net = require("net");
+const spawn = require("child_process").spawn,
     events = require("events"),
     fs = require("fs"),
     WIN = /^win/.test(process.platform),
     LIN = /^linux/.test(process.platform),
     MAC = /^darwin/.test(process.platform);
+const { debug } = require("../src/util");
 
 module.exports = Ping;
 
@@ -24,14 +25,30 @@ function Ping(host, options) {
         this._bin = "c:/windows/system32/ping.exe";
         this._args = (options.args) ? options.args : [ "-n", "1", "-w", "5000", host ];
         this._regmatch = /[><=]([0-9.]+?)ms/;
+
     } else if (LIN) {
         this._bin = "/bin/ping";
-        this._args = (options.args) ? options.args : [ "-n", "-w", "2", "-c", "1", host ];
-        this._regmatch = /=([0-9.]+?) ms/; // need to verify this
+
+        const defaultArgs = [ "-n", "-w", "2", "-c", "1", host ];
+
+        if (net.isIPv6(host) || options.ipv6) {
+            defaultArgs.unshift("-6");
+        }
+
+        this._args = (options.args) ? options.args : defaultArgs;
+        this._regmatch = /=([0-9.]+?) ms/;
+
     } else if (MAC) {
-        this._bin = "/sbin/ping";
+
+        if (net.isIPv6(host) || options.ipv6) {
+            this._bin = "/sbin/ping6";
+        } else {
+            this._bin = "/sbin/ping";
+        }
+
         this._args = (options.args) ? options.args : [ "-n", "-t", "2", "-c", "1", host ];
         this._regmatch = /=([0-9.]+?) ms/;
+
     } else {
         throw new Error("Could not detect your ping binary.");
     }
@@ -49,9 +66,9 @@ Ping.prototype.__proto__ = events.EventEmitter.prototype;
 
 // SEND A PING
 // ===========
-Ping.prototype.send = function(callback) {
+Ping.prototype.send = function (callback) {
     let self = this;
-    callback = callback || function(err, ms) {
+    callback = callback || function (err, ms) {
         if (err) {
             return self.emit("error", err);
         }
@@ -62,27 +79,27 @@ Ping.prototype.send = function(callback) {
 
     this._ping = spawn(this._bin, this._args); // spawn the binary
 
-    this._ping.on("error", function(err) { // handle binary errors
+    this._ping.on("error", function (err) { // handle binary errors
         _errored = true;
         callback(err);
     });
 
-    this._ping.stdout.on("data", function(data) { // log stdout
+    this._ping.stdout.on("data", function (data) { // log stdout
         this._stdout = (this._stdout || "") + data;
     });
 
-    this._ping.stdout.on("end", function() {
+    this._ping.stdout.on("end", function () {
         _ended = true;
         if (_exited && !_errored) {
             onEnd.call(self._ping);
         }
     });
 
-    this._ping.stderr.on("data", function(data) { // log stderr
+    this._ping.stderr.on("data", function (data) { // log stderr
         this._stderr = (this._stderr || "") + data;
     });
 
-    this._ping.on("exit", function(code) { // handle complete
+    this._ping.on("exit", function (code) { // handle complete
         _exited = true;
         if (_ended && !_errored) {
             onEnd.call(self._ping);
@@ -105,15 +122,15 @@ Ping.prototype.send = function(callback) {
         ms = stdout.match(self._regmatch); // parse out the ##ms response
         ms = (ms && ms[1]) ? Number(ms[1]) : ms;
 
-        callback(null, ms);
+        callback(null, ms, stdout);
     }
 };
 
 // CALL Ping#send(callback) ON A TIMER
 // ===================================
-Ping.prototype.start = function(callback) {
+Ping.prototype.start = function (callback) {
     let self = this;
-    this._i = setInterval(function() {
+    this._i = setInterval(function () {
         self.send(callback);
     }, (self._options.interval || 5000));
     self.send(callback);
@@ -121,6 +138,6 @@ Ping.prototype.start = function(callback) {
 
 // STOP SENDING PINGS
 // ==================
-Ping.prototype.stop = function() {
+Ping.prototype.stop = function () {
     clearInterval(this._i);
 };

server/prometheus.js

@@ -1,22 +1,33 @@
-const PrometheusClient = require('prom-client');
+const PrometheusClient = require("prom-client");
 
 const commonLabels = [
-    'monitor_name',
-    'monitor_type',
-    'monitor_url',
-    'monitor_hostname',
-    'monitor_port',
+    "monitor_name",
+    "monitor_type",
+    "monitor_url",
+    "monitor_hostname",
+    "monitor_port",
 ]
 
+const monitor_cert_days_remaining = new PrometheusClient.Gauge({
+    name: "monitor_cert_days_remaining",
+    help: "The number of days remaining until the certificate expires",
+    labelNames: commonLabels
+});
+
+const monitor_cert_is_valid = new PrometheusClient.Gauge({
+    name: "monitor_cert_is_valid",
+    help: "Is the certificate still valid? (1 = Yes, 0= No)",
+    labelNames: commonLabels
+});
 const monitor_response_time = new PrometheusClient.Gauge({
-    name: 'monitor_response_time',
-    help: 'Monitor Response Time (ms)',
+    name: "monitor_response_time",
+    help: "Monitor Response Time (ms)",
     labelNames: commonLabels
 });
 
 const monitor_status = new PrometheusClient.Gauge({
-    name: 'monitor_status',
-    help: 'Monitor Status (1 = UP, 0= DOWN)',
+    name: "monitor_status",
+    help: "Monitor Status (1 = UP, 0= DOWN)",
     labelNames: commonLabels
 });
 
@@ -33,7 +44,27 @@ class Prometheus {
         }
     }
 
-    update(heartbeat) {
+    update(heartbeat, tlsInfo) {
+        if (typeof tlsInfo !== "undefined") {
+            try {
+                let is_valid = 0
+                if (tlsInfo.valid == true) {
+                    is_valid = 1
+                } else {
+                    is_valid = 0
+                }
+                monitor_cert_is_valid.set(this.monitorLabelValues, is_valid)
+            } catch (e) {
+                console.error(e)
+            }
+
+            try {
+                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.daysRemaining)
+            } catch (e) {
+                console.error(e)
+            }
+        }
+
         try {
             monitor_status.set(this.monitorLabelValues, heartbeat.status)
         } catch (e) {
@@ -41,7 +72,7 @@ class Prometheus {
         }
 
         try {
-            if (typeof heartbeat.ping === 'number') {
+            if (typeof heartbeat.ping === "number") {
                 monitor_response_time.set(this.monitorLabelValues, heartbeat.ping)
             } else {
                 // Is it good?

server/server.js

@@ -1,4 +1,5 @@
-console.log("Welcome to Uptime Kuma")
+console.log("Welcome to Uptime Kuma");
+console.log("Node Env: " + process.env.NODE_ENV);
 
 const { sleep, debug } = require("../src/util");
 
@@ -26,7 +27,7 @@ console.log("Importing this project modules");
 debug("Importing Monitor");
 const Monitor = require("./model/monitor");
 debug("Importing Settings");
-const { getSettings, setSettings, setting } = require("./util-server");
+const { getSettings, setSettings, setting, initJWTSecret } = require("./util-server");
 debug("Importing Notification");
 const { Notification } = require("./notification");
 debug("Importing Database");
@@ -39,7 +40,11 @@ const passwordHash = require("./password-hash");
 const args = require("args-parser")(process.argv);
 
 const version = require("../package.json").version;
-const hostname = process.env.HOST || args.host || "0.0.0.0"
+
+// If host is omitted, the server will accept connections on the unspecified IPv6 address (::) when IPv6 is available and the unspecified IPv4 address (0.0.0.0) otherwise.
+// Dual-stack support for (::)
+const hostname = process.env.HOST || args.host;
+
 const port = parseInt(process.env.PORT || args.port || 3001);
 
 console.info("Version: " + version)
@@ -87,16 +92,26 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
 
     // Normal Router here
 
-    app.use("/", express.static("dist"));
+    // Robots.txt
+    app.get("/robots.txt", async (_request, response) => {
+        let txt = "User-agent: *\nDisallow:";
+        if (! await setting("searchEngineIndex")) {
+            txt += " /";
+        }
+        response.setHeader("Content-Type", "text/plain");
+        response.send(txt);
+    });
 
     // Basic Auth Router here
 
     // Prometheus API metrics  /metrics
     // With Basic Auth using the first user's username/password
-    app.get("/metrics", basicAuth, prometheusAPIMetrics())
+    app.get("/metrics", basicAuth, prometheusAPIMetrics());
+
+    app.use("/", express.static("dist"));
 
     // Universal Route Handler, must be at the end
-    app.get("*", function(_request, response) {
+    app.get("*", async (_request, response) => {
         response.send(indexHTML);
     });
 
@@ -230,6 +245,9 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
                 let notificationIDList = monitor.notificationIDList;
                 delete monitor.notificationIDList;
 
+                monitor.accepted_statuscodes_json = JSON.stringify(monitor.accepted_statuscodes);
+                delete monitor.accepted_statuscodes;
+
                 bean.import(monitor)
                 bean.user_id = socket.userID
                 await R.store(bean)
@@ -274,6 +292,8 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
                 bean.keyword = monitor.keyword;
                 bean.ignoreTls = monitor.ignoreTls;
                 bean.upsideDown = monitor.upsideDown;
+                bean.maxredirects = monitor.maxredirects;
+                bean.accepted_statuscodes_json = JSON.stringify(monitor.accepted_statuscodes);
 
                 await R.store(bean)
 
@@ -408,10 +428,7 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
 
                 if (user && passwordHash.verify(password.currentPassword, user.password)) {
 
-                    await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [
-                        passwordHash.generate(password.newPassword),
-                        socket.userID,
-                    ]);
+                    user.resetPassword(password.newPassword);
 
                     callback({
                         ok: true,
@@ -553,16 +570,26 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
 
     });
 
-    console.log("Init")
+    console.log("Init the server")
+
+    server.once("error", async (err) => {
+        console.error("Cannot listen: " + err.message);
+        await Database.close();
+    });
+
     server.listen(port, hostname, () => {
-        console.log(`Listening on ${hostname}:${port}`);
+        if (hostname) {
+            console.log(`Listening on ${hostname}:${port}`);
+        } else {
+            console.log(`Listening on ${port}`);
+        }
         startMonitors();
     });
 
 })();
 
 async function updateMonitorNotification(monitorID, notificationIDList) {
-    R.exec("DELETE FROM monitor_notification WHERE monitor_id = ? ", [
+    await R.exec("DELETE FROM monitor_notification WHERE monitor_id = ? ", [
         monitorID,
     ])
 
@@ -613,13 +640,17 @@ async function afterLogin(socket, user) {
 
     let monitorList = await sendMonitorList(socket)
 
-    for (let monitorID in monitorList) {
-        sendHeartbeatList(socket, monitorID);
-        sendImportantHeartbeatList(socket, monitorID);
-        Monitor.sendStats(io, monitorID, user.id)
-    }
-
     sendNotificationList(socket)
+
+    // Delay a bit, so that it let the main page to query the data first, since SQLite can process one sql at the same time only.
+    // For example, query the edit data first.
+    setTimeout(() => {
+        for (let monitorID in monitorList) {
+            sendHeartbeatList(socket, monitorID);
+            sendImportantHeartbeatList(socket, monitorID);
+            Monitor.sendStats(io, monitorID, user.id)
+        }
+    }, 500);
 }
 
 async function getMonitorJSONList(userID) {
@@ -649,32 +680,22 @@ async function initDatabase() {
     }
 
     console.log("Connecting to Database")
-    R.setup("sqlite", {
-        filename: Database.path,
-    });
+    await Database.connect();
     console.log("Connected")
 
     // Patch the database
     await Database.patch()
 
-    // Auto map the model to a bean object
-    R.freeze(true)
-    await R.autoloadModels("./server/model");
-
     let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
         "jwtSecret",
     ]);
 
     if (! jwtSecretBean) {
-        console.log("JWT secret is not found, generate one.")
-        jwtSecretBean = R.dispense("setting")
-        jwtSecretBean.key = "jwtSecret"
-
-        jwtSecretBean.value = passwordHash.generate(dayjs() + "")
-        await R.store(jwtSecretBean)
-        console.log("Stored JWT secret into database")
+        console.log("JWT secret is not found, generate one.");
+        jwtSecretBean = await initJWTSecret();
+        console.log("Stored JWT secret into database");
     } else {
-        console.log("Load JWT secret from database.")
+        console.log("Load JWT secret from database.");
     }
 
     // If there is no record in user table, it is a new Uptime Kuma instance, need to setup

server/util-server.js

@@ -2,6 +2,27 @@ const tcpp = require("tcp-ping");
 const Ping = require("./ping-lite");
 const { R } = require("redbean-node");
 const { debug } = require("../src/util");
+const passwordHash = require("./password-hash");
+const dayjs = require("dayjs");
+
+/**
+ * Init or reset JWT secret
+ * @returns {Promise<Bean>}
+ */
+exports.initJWTSecret = async () => {
+    let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
+        "jwtSecret",
+    ]);
+
+    if (! jwtSecretBean) {
+        jwtSecretBean = R.dispense("setting");
+        jwtSecretBean.key = "jwtSecret";
+    }
+
+    jwtSecretBean.value = passwordHash.generate(dayjs() + "");
+    await R.store(jwtSecretBean);
+    return jwtSecretBean;
+}
 
 exports.tcping = function (hostname, port) {
     return new Promise((resolve, reject) => {
@@ -9,7 +30,7 @@ exports.tcping = function (hostname, port) {
             address: hostname,
             port: port,
             attempts: 1,
-        }, function(err, data) {
+        }, function (err, data) {
 
             if (err) {
                 reject(err);
@@ -24,15 +45,30 @@ exports.tcping = function (hostname, port) {
     });
 }
 
-exports.ping = function (hostname) {
-    return new Promise((resolve, reject) => {
-        const ping = new Ping(hostname);
+exports.ping = async (hostname) => {
+    try {
+        return await exports.pingAsync(hostname);
+    } catch (e) {
+        // If the host cannot be resolved, try again with ipv6
+        if (e.message.includes("service not known")) {
+            return await exports.pingAsync(hostname, true);
+        } else {
+            throw e;
+        }
+    }
+}
 
-        ping.send(function(err, ms) {
+exports.pingAsync = function (hostname, ipv6 = false) {
+    return new Promise((resolve, reject) => {
+        const ping = new Ping(hostname, {
+            ipv6
+        });
+
+        ping.send(function (err, ms, stdout) {
             if (err) {
-                reject(err)
+                reject(err);
             } else if (ms === null) {
-                reject(new Error("timeout"))
+                reject(new Error(stdout))
             } else {
                 resolve(Math.round(ms))
             }
@@ -58,7 +94,7 @@ exports.setSetting = async function (key, value) {
     let bean = await R.findOne("setting", " `key` = ? ", [
         key,
     ])
-    if (! bean) {
+    if (!bean) {
         bean = R.dispense("setting")
         bean.key = key;
     }
@@ -158,3 +194,32 @@ exports.checkCertificate = function (res) {
         fingerprint,
     };
 }
+
+// Check if the provided status code is within the accepted ranges
+// Param: status - the status code to check
+// Param: accepted_codes - an array of accepted status codes
+// Return: true if the status code is within the accepted ranges, false otherwise
+// Will throw an error if the provided status code is not a valid range string or code string
+
+exports.checkStatusCode = function (status, accepted_codes) {
+    if (accepted_codes == null || accepted_codes.length === 0) {
+        return false;
+    }
+
+    for (const code_range of accepted_codes) {
+        const code_range_split = code_range.split("-").map(string => parseInt(string));
+        if (code_range_split.length === 1) {
+            if (status === code_range_split[0]) {
+                return true;
+            }
+        } else if (code_range_split.length === 2) {
+            if (status >= code_range_split[0] && status <= code_range_split[1]) {
+                return true;
+            }
+        } else {
+            throw new Error("Invalid status code range");
+        }
+    }
+
+    return false;
+}

src/assets/app.scss

@@ -5,8 +5,45 @@
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
 }
 
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 26px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #CCC;
+    border-radius: 20px;
+}
+
+.modal {
+    backdrop-filter: blur(3px);
+}
+
+.modal-content {
+    border-radius: 1rem;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
+
+    .dark & {
+        box-shadow: 0 15px 70px rgb(0 0 0);
+        background-color: $dark-bg;
+    }
+}
+
+.VuePagination__count {
+    font-size: 13px;
+    text-align: center;
+}
+
+
 .shadow-box {
-    overflow: hidden;
+    //overflow: hidden;   // Forget why add this, but multiple select hide by this
     box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
     padding: 10px;
     border-radius: 10px;
@@ -29,10 +66,120 @@
         background-color: $highlight;
         border-color: $highlight;
     }
+
+    .dark & {
+        color: $dark-font-color2;
+    }
 }
 
-.modal-content {
-    border-radius: 1rem;
-    backdrop-filter: blur(3px);
-}
 
+
+// Dark Theme override here
+.dark {
+    background-color: #090C10;
+    color: $dark-font-color;
+
+    &::-webkit-scrollbar-thumb {
+        background: $dark-border-color;
+    }
+
+    .shadow-box {
+        background-color: $dark-bg;
+    }
+
+    .form-check-input {
+        background-color: $dark-bg2;
+    }
+
+    .form-switch .form-check-input {
+        background-color: #131a21;
+    }
+
+    a,
+    .table,
+    .nav-link {
+        color: $dark-font-color;
+    }
+
+    .form-control,
+    .form-control:focus,
+    .form-select,
+    .form-select:focus {
+        color: $dark-font-color;
+        background-color: $dark-bg2;
+    }
+
+    .form-control, .form-select {
+        border-color: $dark-border-color;
+    }
+
+    .table-hover > tbody > tr:hover {
+        --bs-table-accent-bg: #070A10;
+        color: $dark-font-color;
+    }
+
+    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+        color: $dark-font-color2;
+    }
+
+    .bg-primary {
+        color: $dark-font-color2;
+    }
+
+    .btn-secondary {
+        color: white;
+    }
+
+    .btn-close {
+        box-shadow: none;
+        filter: invert(1);
+
+        &:hover {
+            opacity: 0.6;
+        }
+    }
+
+    .modal-header {
+        border-color: $dark-bg;
+    }
+
+    .modal-footer {
+        border-color: $dark-bg;
+    }
+
+    // Pagination
+    .page-item.disabled .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+    }
+
+    .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
+    // Multiselect
+    .multiselect__tags {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__input, .multiselect__single {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
+    }
+
+    .multiselect__content-wrapper {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        border-color: $dark-border-color;
+    }
+
+    .multiselect__option--selected {
+        background-color: $dark-bg;
+    }
+}

src/assets/vars.scss

@@ -5,4 +5,10 @@ $link-color: #111;
 $border-radius: 50rem;
 
 $highlight: #7ce8a4;
-$highlight-white: #e7faec;
+$highlight-white: #e7faec;
+
+$dark-font-color: #b1b8c0;
+$dark-font-color2: #020b05;
+$dark-bg: #0D1117;
+$dark-bg2: #070A10;
+$dark-border-color: #1d2634;

src/components/HeartbeatBar.vue

@@ -133,7 +133,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .wrap {
@@ -150,6 +150,10 @@ export default {
 
         &.empty {
             background-color: aliceblue;
+
+            .dark & {
+                background-color: #d0d3d5;
+            }
         }
 
         &.down {
@@ -168,4 +172,10 @@ export default {
     }
 }
 
+.dark {
+    .hp-bar-big .beat.empty{
+        background-color: #848484;
+    }
+}
+
 </style>

src/components/NotificationDialog.vue

@@ -22,8 +22,10 @@
                                 <option value="slack">Slack</option>
                                 <option value="pushover">Pushover</option>
                                 <option value="pushy">Pushy</option>
+                                <option value="octopush">Octopush</option>
                                 <option value="lunasea">LunaSea</option>
                                 <option value="apprise">Apprise (Support 50+ Notification services)</option>
+                                <option value="pushbullet">Pushbullet</option>
                             </select>
                         </div>
 
@@ -147,6 +149,11 @@
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>
                             </div>
+
+                            <div class="mb-3">
+                                <label for="discord-username" class="form-label">Bot Display Name</label>
+                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
+                            </div>
                         </template>
 
                         <template v-if="notification.type === 'signal'">
@@ -233,17 +240,48 @@
                         <template v-if="notification.type === 'pushy'">
                             <div class="mb-3">
                                 <label for="pushy-app-token" class="form-label">API_KEY</label>
-                                <input type="text" class="form-control" id="pushy-app-token" required v-model="notification.pushyAPIKey">
+                                <input id="pushy-app-token" v-model="notification.pushyAPIKey" type="text" class="form-control" required>
                             </div>
 
                             <div class="mb-3">
                                 <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
                                 <div class="input-group mb-3">
-                                    <input type="text" class="form-control" id="pushy-user-key" required v-model="notification.pushyToken">
+                                    <input id="pushy-user-key" v-model="notification.pushyToken" type="text" class="form-control" required>
                                 </div>
                             </div>
                             <p style="margin-top: 8px;">
-                                    More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
+                                More info on: <a href="https://pushy.me/docs/api/send-notifications" target="_blank">https://pushy.me/docs/api/send-notifications</a>
+                            </p>
+                        </template>
+
+                        <template v-if="notification.type === 'octopush'">
+                            <div class="mb-3">
+                                <label for="octopush-key" class="form-label">API KEY</label>
+                                <input id="octopush-key" v-model="notification.octopushAPIKey" type="text" class="form-control" required>
+                                <label for="octopush-login" class="form-label">API LOGIN</label>
+                                <input id="octopush-login" v-model="notification.octopushLogin" type="text" class="form-control" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="octopush-type-sms" class="form-label">SMS Type</label>
+                                <select id="octopush-type-sms" v-model="notification.octopushSMSType" class="form-select">
+                                    <option value="sms_premium">Premium (Fast - recommended for alerting)</option>
+                                    <option value="sms_low_cost">Low Cost (Slow, sometimes blocked by operator)</option>
+                                </select>
+                                <div class="form-text">
+                                    Check octopush prices <a href="https://octopush.com/tarifs-sms-international/" target="_blank">https://octopush.com/tarifs-sms-international/</a>.
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <label for="octopush-phone-number" class="form-label">Phone number (intl format, eg : +33612345678) </label>
+                                <input id="octopush-phone-number" v-model="notification.octopushPhoneNumber" type="text" class="form-control" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="octopush-sender-name" class="form-label">SMS Sender Name : 3-11 alphanumeric characters and space (a-zA-Z0-9)</label>
+                                <input id="octopush-sender-name" v-model="notification.octopushSenderName" type="text" minlength="3" maxlength="11" class="form-control">
+                            </div>
+
+                            <p style="margin-top: 8px;">
+                                More info on: <a href="https://octopush.com/api-sms-documentation/envoi-de-sms/" target="_blank">https://octopush.com/api-sms-documentation/envoi-de-sms/</a>
                             </p>
                         </template>
 
@@ -320,7 +358,7 @@
                                 <p>
                                     Status:
                                     <span v-if="appriseInstalled" class="text-primary">Apprise is installed</span>
-                                    <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise">Read more</a></span>
+                                    <span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span>
                                 </p>
                             </div>
                         </template>
@@ -335,6 +373,16 @@
                             </div>
                         </template>
 
+                        <template v-if="notification.type === 'pushbullet'">
+                            <div class="mb-3">
+                                <label for="pushbullet-access-token" class="form-label">Access Token</label>
+                                <input id="pushbullet-access-token" v-model="notification.pushbulletAccessToken" type="text" class="form-control" required>
+                            </div>
+
+                            <p style="margin-top: 8px;">
+                                More info on: <a href="https://docs.pushbullet.com" target="_blank">https://docs.pushbullet.com</a>
+                            </p>
+                        </template>
                     </div>
                     <div class="modal-footer">
                         <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
@@ -508,3 +556,13 @@ export default {
     },
 }
 </script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/PingChart.vue

@@ -0,0 +1,152 @@
+<template>
+    <LineChart :chart-data="chartData" :height="100" :options="chartOptions" />
+</template>
+
+<script>
+import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import "chartjs-adapter-dayjs";
+import { LineChart } from "vue-chart-3";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
+
+export default {
+    components: { LineChart },
+    props: {
+        monitorId: {
+            type: Number,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            chartPeriodHrs: 6,
+        };
+    },
+    computed: {
+        chartOptions() {
+            return {
+                responsive: true,
+                layout: {
+                    padding: {
+                        left: 10,
+                        right: 30,
+                        top: 30,
+                        bottom: 10,
+                    },
+                },
+
+                elements: {
+                    point: {
+                        radius: 0,
+                    },
+                    bar: {
+                        barThickness: "flex",
+                    }
+                },
+                scales: {
+                    x: {
+                        type: "time",
+                        time: {
+                            unit: "minute",
+                        },
+                        ticks: {
+                            maxRotation: 0,
+                            autoSkipPadding: 10,
+                        },
+                        grid: {
+                            color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
+                        },
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: "Response Time (ms)",
+                        },
+                        offset: false,
+                        grid: {
+                            color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
+                        },
+                    },
+                    y1: {
+                        display: false,
+                        position: "right",
+                        grid: {
+                            drawOnChartArea: false,
+                        },
+                        min: 0,
+                        max: 1,
+                        offset: false,
+                    },
+                },
+                bounds: "ticks",
+                plugins: {
+                    tooltip: {
+                        mode: "nearest",
+                        intersect: false,
+                        padding: 10,
+                        filter: function (tooltipItem) {
+                            return tooltipItem.datasetIndex === 0;
+                        },
+                        callbacks: {
+                            label: (context) => {
+                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`
+                            },
+                        }
+                    },
+                    legend: {
+                        display: false,
+                    },
+                },
+            }
+        },
+        chartData() {
+            let ping_data = [];
+            let down_data = [];
+            if (this.monitorId in this.$root.heartbeatList) {
+                ping_data = this.$root.heartbeatList[this.monitorId]
+                    .filter(
+                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
+                    .map((beat) => {
+                        return {
+                            x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
+                            y: beat.ping,
+                        };
+                    });
+                down_data = this.$root.heartbeatList[this.monitorId]
+                    .filter(
+                        (beat) => dayjs.utc(beat.time).tz(this.$root.timezone).isAfter(dayjs().subtract(this.chartPeriodHrs, "hours")))
+                    .map((beat) => {
+                        return {
+                            x: dayjs.utc(beat.time).tz(this.$root.timezone).format("YYYY-MM-DD HH:mm:ss"),
+                            y: beat.status === 0 ? 1 : 0,
+                        };
+                    });
+            }
+            return {
+                datasets: [
+                    {
+                        data: ping_data,
+                        fill: "origin",
+                        tension: 0.2,
+                        borderColor: "#5CDD8B",
+                        backgroundColor: "#5CDD8B38",
+                        yAxisID: "y",
+                    },
+                    {
+                        type: "bar",
+                        data: down_data,
+                        borderColor: "#00000000",
+                        backgroundColor: "#DC354568",
+                        yAxisID: "y1",
+                    },
+                ],
+            };
+        },
+    },
+};
+</script>

src/layouts/Layout.vue

@@ -1,109 +1,127 @@
 <template>
-    <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
-        <div class="container-fluid">
-            {{ $root.connectionErrorMsg }}
+    <div :class="classes">
+        <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
+            <div class="container-fluid">
+                {{ $root.connectionErrorMsg }}
+            </div>
         </div>
+
+        <!-- Desktop header -->
+        <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+            <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" alt="Logo" />
+                <span class="fs-4 title">Uptime Kuma</span>
+            </router-link>
+
+            <ul class="nav nav-pills">
+                <li class="nav-item">
+                    <router-link to="/dashboard" class="nav-link">
+                        <font-awesome-icon icon="tachometer-alt" /> Dashboard
+                    </router-link>
+                </li>
+                <li class="nav-item">
+                    <router-link to="/settings" class="nav-link">
+                        <font-awesome-icon icon="cog" /> Settings
+                    </router-link>
+                </li>
+            </ul>
+        </header>
+
+        <!-- Mobile header -->
+        <header v-else class="d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3">
+            <router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none">
+                <object class="bi" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title ms-2">Uptime Kuma</span>
+            </router-link>
+        </header>
+
+        <main>
+            <!-- Add :key to disable vue router re-use the same component -->
+            <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
+            <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
+        </main>
+
+        <footer>
+            <div class="container-fluid">
+                Uptime Kuma -
+                Version: {{ $root.info.version }} -
+                <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">Check Update On GitHub</a>
+            </div>
+        </footer>
+
+        <!-- Mobile Only -->
+        <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
+        <nav v-if="$root.isMobile" class="bottom-nav">
+            <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="tachometer-alt" /></div>
+                Dashboard
+            </router-link>
+
+            <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
+                <div><font-awesome-icon icon="list" /></div>
+                List
+            </a>
+
+            <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="plus" /></div>
+                Add
+            </router-link>
+
+            <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
+                <div><font-awesome-icon icon="cog" /></div>
+                Settings
+            </router-link>
+        </nav>
     </div>
-
-    <!-- Desktop header -->
-    <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
-        <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
-            <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" alt="Logo" />
-            <span class="fs-4 title">Uptime Kuma</span>
-        </router-link>
-
-        <ul class="nav nav-pills">
-            <li class="nav-item">
-                <router-link to="/dashboard" class="nav-link">
-                    <font-awesome-icon icon="tachometer-alt" /> Dashboard
-                </router-link>
-            </li>
-            <li class="nav-item">
-                <router-link to="/settings" class="nav-link">
-                    <font-awesome-icon icon="cog" /> Settings
-                </router-link>
-            </li>
-        </ul>
-    </header>
-
-    <!-- Mobile header -->
-    <header v-else class="d-flex flex-wrap justify-content-center mt-3 mb-3">
-        <router-link to="/dashboard" class="d-flex align-items-center  text-dark text-decoration-none">
-            <object class="bi" width="40" height="40" data="/icon.svg" />
-            <span class="fs-4 title ms-2">Uptime Kuma</span>
-        </router-link>
-    </header>
-
-    <main>
-        <!-- Add :key to disable vue router re-use the same component -->
-        <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
-        <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
-    </main>
-
-    <footer>
-        <div class="container-fluid">
-            Uptime Kuma -
-            Version: {{ $root.info.version }} -
-            <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">Check Update On GitHub</a>
-        </div>
-    </footer>
-
-    <!-- Mobile Only -->
-    <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
-    <nav v-if="$root.isMobile" class="bottom-nav">
-        <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="tachometer-alt" /></div>
-            Dashboard
-        </router-link>
-
-        <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
-            <div><font-awesome-icon icon="list" /></div>
-            List
-        </a>
-
-        <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="plus" /></div>
-            Add
-        </router-link>
-
-        <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
-            <div><font-awesome-icon icon="cog" /></div>
-            Settings
-        </router-link>
-    </nav>
 </template>
 
 <script>
 import Login from "../components/Login.vue";
 
 export default {
+
     components: {
         Login,
     },
+
     data() {
         return {}
     },
-    computed: {},
+
+    computed: {
+
+        // Theme or Mobile
+        classes() {
+            const classes = {};
+            classes[this.$root.theme] = true;
+            classes["mobile"] = this.$root.isMobile;
+            return classes;
+        }
+
+    },
+
     watch: {
         $route (to, from) {
             this.init();
         },
     },
+
     mounted() {
         this.init();
     },
+
     methods: {
         init() {
             if (this.$route.name === "root") {
                 this.$router.push("/dashboard")
             }
         },
-
     },
+
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .bottom-nav {
@@ -141,6 +159,10 @@ export default {
     }
 }
 
+main {
+    min-height: calc(100vh - 160px)
+}
+
 .title {
     font-weight: bold;
 }
@@ -159,9 +181,24 @@ footer {
     color: #AAA;
     font-size: 13px;
     margin-top: 10px;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
     margin-left: 10px;
     text-align: center;
 }
 
+.dark {
+    header {
+        background-color: #161B22;
+        border-bottom-color: #161B22 !important;
+
+        span {
+            color: #F0F6FC;
+        }
+    }
+
+    .bottom-nav {
+        background-color: $dark-bg;
+    }
+}
+
 </style>

src/main.js

@@ -9,12 +9,15 @@ import { FontAwesomeIcon } from "./icon.js";
 import EmptyLayout from "./layouts/EmptyLayout.vue";
 import Layout from "./layouts/Layout.vue";
 import socket from "./mixins/socket";
+import theme from "./mixins/theme";
+import mobile from "./mixins/mobile";
 import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
+import { appName } from "./util.ts";
 
 const routes = [
     {
@@ -76,7 +79,14 @@ const router = createRouter({
 const app = createApp({
     mixins: [
         socket,
+        theme,
+        mobile
     ],
+    data() {
+        return {
+            appName: appName
+        }
+    },
     render: () => h(App),
 })
 

src/mixins/mobile.js

@@ -0,0 +1,25 @@
+export default {
+
+    data() {
+        return {
+            windowWidth: window.innerWidth,
+        }
+    },
+
+    created() {
+        window.addEventListener("resize", this.onResize);
+    },
+
+    methods: {
+        onResize() {
+            this.windowWidth = window.innerWidth;
+        },
+    },
+
+    computed: {
+        isMobile() {
+            return this.windowWidth <= 767.98;
+        },
+    }
+
+}

src/mixins/socket.js

@@ -27,9 +27,8 @@ export default {
             uptimeList: { },
             certInfoList: {},
             notificationList: [],
-            windowWidth: window.innerWidth,
             showListMobile: false,
-            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting..."
+            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
     },
 
@@ -193,10 +192,6 @@ export default {
             this.$root.showListMobile = false;
         },
 
-        onResize() {
-            this.windowWidth = window.innerWidth;
-        },
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -270,10 +265,6 @@ export default {
 
     computed: {
 
-        isMobile() {
-            return this.windowWidth <= 767.98;
-        },
-
         timezone() {
 
             if (this.userTimezone === "auto") {

src/mixins/theme.js

@@ -0,0 +1,51 @@
+export default {
+
+    data() {
+        return {
+            system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
+            userTheme: localStorage.theme,
+        };
+    },
+
+    mounted() {
+        // Default Light
+        if (! this.userTheme) {
+            this.userTheme = "light";
+        }
+
+        document.body.classList.add(this.theme);
+        this.updateThemeColorMeta();
+    },
+
+    computed: {
+        theme() {
+            if (this.userTheme === "auto") {
+                return this.system;
+            }
+            return this.userTheme;
+        }
+    },
+
+    watch: {
+        userTheme(to, from) {
+            localStorage.theme = to;
+        },
+
+        theme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.theme);
+            this.updateThemeColorMeta();
+        }
+    },
+
+    methods: {
+        updateThemeColorMeta() {
+            if (this.theme === "dark") {
+                document.querySelector("#theme-color").setAttribute("content", "#161B22");
+            } else {
+                document.querySelector("#theme-color").setAttribute("content", "#5cdd8b");
+            }
+        }
+    }
+}
+

src/pages/Dashboard.vue

@@ -3,7 +3,7 @@
         <div class="row">
             <div class="col-12 col-md-5 col-xl-4">
                 <div v-if="! $root.isMobile">
-                    <router-link to="/add" class="btn btn-primary"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
+                    <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> Add New Monitor</router-link>
                 </div>
 
                 <div v-if="showList" class="shadow-box list mb-4">
@@ -89,7 +89,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars.scss";
 
 .container-fluid {
@@ -97,9 +97,8 @@ export default {
 }
 
 .list {
-    margin-top: 25px;
     height: auto;
-    min-height: calc(100vh - 200px);
+    min-height: calc(100vh - 240px);
 
     .item {
         display: block;
@@ -133,4 +132,18 @@ export default {
     padding-right: 5px !important;
 }
 
+.dark {
+    .list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+}
+
 </style>

src/pages/DashboardHome.vue

@@ -169,7 +169,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import "../assets/vars";
 
 .num {

src/pages/Details.vue

@@ -6,7 +6,7 @@
         <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
         <span v-if="monitor.type === 'keyword'">
             <br>
-            <span>Keyword:</span> <span style="color: black">{{ monitor.keyword }}</span>
+            <span>Keyword:</span> <span class="keyword">{{ monitor.keyword }}</span>
         </span>
     </p>
 
@@ -42,7 +42,11 @@
             <div class="col">
                 <h4>{{ pingTitle }}</h4>
                 <p>(Current)</p>
-                <span class="num"><CountUp :value="ping" /></span>
+                <span class="num">
+                    <a href="#" @click.prevent="showPingChartBox = !showPingChartBox">
+                        <CountUp :value="ping" />
+                    </a>
+                </span>
             </div>
             <div class="col">
                 <h4>Avg. {{ pingTitle }}</h4>
@@ -70,6 +74,14 @@
         </div>
     </div>
 
+    <div v-if="showPingChartBox" class="shadow-box big-padding text-center">
+        <div class="row">
+            <div class="col">
+                <PingChart :monitor-id="monitor.id" />
+            </div>
+        </div>
+    </div>
+
     <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
         <div class="row">
             <div class="col">
@@ -155,6 +167,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification"
 const toast = useToast()
 import Confirm from "../components/Confirm.vue";
@@ -164,6 +177,7 @@ import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
+const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
 
 export default {
     components: {
@@ -174,6 +188,7 @@ export default {
         Confirm,
         Status,
         Pagination,
+        PingChart,
     },
     data() {
         return {
@@ -181,6 +196,7 @@ export default {
             perPage: 25,
             heartBeatList: [],
             toggleCertInfoBox: false,
+            showPingChartBox: true,
         }
     },
     computed: {
@@ -306,6 +322,31 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+@media (max-width: 550px) { 
+    .functions {
+        text-align: center;
+    }
+
+    button, a {
+        margin-left: 10px !important;
+        margin-right: 10px !important;
+    }
+}
+
+@media (max-width: 400px) { 
+    .btn {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 10px;
+    }
+
+    a.btn {
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+}
+
 .url {
     color: $primary;
     margin-bottom: 20px;
@@ -352,4 +393,14 @@ table {
         margin: 20px 0;
     }
 }
+
+.keyword {
+    color: black;
+}
+
+.dark  {
+    .keyword {
+        color: $dark-font-color;
+    }
+}
 </style>

src/pages/EditMonitor.vue

@@ -1,14 +1,12 @@
 <template>
-    <h1 class="mb-3">
-        {{ pageName }}
-    </h1>
+    <h1 class="mb-3">{{ pageName }}</h1>
     <form @submit.prevent="submit">
         <div class="shadow-box">
             <div class="row">
                 <div class="col-md-6">
-                    <h2>General</h2>
+                    <h2 class="mb-2">General</h2>
 
-                    <div class="mb-3">
+                    <div class="my-3">
                         <label for="type" class="form-label">Monitor Type</label>
                         <select id="type" v-model="monitor.type" class="form-select" aria-label="Default select example">
                             <option value="http">
@@ -26,17 +24,17 @@
                         </select>
                     </div>
 
-                    <div class="mb-3">
+                    <div class="my-3">
                         <label for="name" class="form-label">Friendly Name</label>
                         <input id="name" v-model="monitor.name" type="text" class="form-control" required>
                     </div>
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3">
+                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
                         <label for="url" class="form-label">URL</label>
                         <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required>
                     </div>
 
-                    <div v-if="monitor.type === 'keyword' " class="mb-3">
+                    <div v-if="monitor.type === 'keyword' " class="my-3">
                         <label for="keyword" class="form-label">Keyword</label>
                         <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
                         <div class="form-text">
@@ -44,22 +42,22 @@
                         </div>
                     </div>
 
-                    <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="mb-3">
+                    <div v-if="monitor.type === 'port' || monitor.type === 'ping' " class="my-3">
                         <label for="hostname" class="form-label">Hostname</label>
                         <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" required>
                     </div>
 
-                    <div v-if="monitor.type === 'port' " class="mb-3">
+                    <div v-if="monitor.type === 'port' " class="my-3">
                         <label for="port" class="form-label">Port</label>
                         <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                     </div>
 
-                    <div class="mb-3">
+                    <div class="my-3">
                         <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
                         <input id="interval" v-model="monitor.interval" type="number" class="form-control" required min="20" step="1">
                     </div>
 
-                    <div class="mb-3">
+                    <div class="my-3">
                         <label for="maxRetries" class="form-label">Retries</label>
                         <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
                         <div class="form-text">
@@ -67,16 +65,16 @@
                         </div>
                     </div>
 
-                    <h2>Advanced</h2>
+                    <h2 class="mt-5 mb-2">Advanced</h2>
 
-                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="mb-3 form-check">
+                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3 form-check">
                         <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
                         <label class="form-check-label" for="ignore-tls">
                             Ignore TLS/SSL error for HTTPS websites
                         </label>
                     </div>
 
-                    <div class="mb-3 form-check">
+                    <div class="my-3 form-check">
                         <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
                         <label class="form-check-label" for="upside-down">
                             Upside Down Mode
@@ -86,22 +84,50 @@
                         </div>
                     </div>
 
-                    <div>
-                        <button class="btn btn-primary" type="submit" :disabled="processing">
-                            Save
-                        </button>
+                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                        <label for="maxRedirects" class="form-label">Max. Redirects</label>
+                        <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+                        <div class="form-text">
+                            Maximum number of redirects to follow. Set to 0 to disable redirects.
+                        </div>
+                    </div>
+
+                    <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
+                        <label for="acceptedStatusCodes" class="form-label">Accepted Status Codes</label>
+
+                        <VueMultiselect
+                            id="acceptedStatusCodes"
+                            v-model="monitor.accepted_statuscodes"
+                            :options="acceptedStatusCodeOptions"
+                            :multiple="true"
+                            :close-on-select="false"
+                            :clear-on-select="false"
+                            :preserve-search="true"
+                            placeholder="Pick Accepted Status Codes..."
+                            :preselect-first="false"
+                            :max-height="600"
+                            :taggable="true"
+                        ></VueMultiselect>
+
+                        <div class="form-text">
+                            Select status codes which are considered as a successful response.
+                        </div>
+                    </div>
+
+                    <div class="mt-5 mb-1">
+                        <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
                     </div>
                 </div>
 
                 <div class="col-md-6">
                     <div v-if="$root.isMobile" class="mt-3" />
 
-                    <h2>Notifications</h2>
+                    <h2 class="mb-2">Notifications</h2>
                     <p v-if="$root.notificationList.length === 0">
                         Not available, please setup.
                     </p>
 
-                    <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch mb-3">
+                    <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
                         <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
 
                         <label class="form-check-label" :for=" 'notification' + notification.id">
@@ -124,20 +150,25 @@
 <script>
 import NotificationDialog from "../components/NotificationDialog.vue";
 import { useToast } from "vue-toastification"
+import VueMultiselect from "vue-multiselect"
 const toast = useToast()
 
 export default {
     components: {
         NotificationDialog,
+        VueMultiselect,
     },
+
     data() {
         return {
             processing: false,
             monitor: {
                 notificationIDList: {},
             },
+            acceptedStatusCodeOptions: [],
         }
     },
+
     computed: {
         pageName() {
             return (this.isAdd) ? "Add New Monitor" : "Edit"
@@ -156,6 +187,20 @@ export default {
     },
     mounted() {
         this.init();
+
+        let acceptedStatusCodeOptions = [
+            "100-199",
+            "200-299",
+            "300-399",
+            "400-499",
+            "500-599",
+        ];
+
+        for (let i = 100; i <= 999; i++) {
+            acceptedStatusCodeOptions.push(i.toString());
+        }
+
+        this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
     },
     methods: {
         init() {
@@ -170,6 +215,8 @@ export default {
                     notificationIDList: {},
                     ignoreTls: false,
                     upsideDown: false,
+                    maxredirects: 10,
+                    accepted_statuscodes: ["200-299"],
                 }
             } else if (this.isEdit) {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
@@ -209,6 +256,40 @@ export default {
 }
 </script>
 
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style lang="scss">
+    @import "../assets/vars.scss";
+
+    .multiselect__tags {
+        border-radius: 1.5rem;
+        border: 1px solid #ced4da;
+    }
+
+    .multiselect--active .multiselect__tags {
+        border-radius: 1rem;
+    }
+
+    .multiselect__option--highlight {
+        background: $primary !important;
+    }
+
+    .multiselect__option--highlight::after {
+        background: $primary !important;
+    }
+
+    .multiselect__tag {
+        border-radius: 50rem;
+        background: $primary !important;
+    }
+
+    .dark {
+        .multiselect__tag {
+            color: $dark-font-color2;
+        }
+    }
+</style>
+
 <style scoped>
     .shadow-box {
         padding: 20px;

src/pages/Settings.vue

@@ -6,8 +6,26 @@
     <div class="shadow-box">
         <div class="row">
             <div class="col-md-6">
-                <h2>General</h2>
+                <h2 class="mb-2">General</h2>
+
                 <form class="mb-3" @submit.prevent="saveGeneral">
+                    <div class="mb-3">
+                        <label for="timezone" class="form-label">Theme</label>
+
+                        <div>
+                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                <input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
+                                <label class="btn btn-outline-primary" for="btncheck1">Light</label>
+
+                                <input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
+                                <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
+
+                                <input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
+                                <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="mb-3">
                         <label for="timezone" class="form-label">Timezone</label>
                         <select id="timezone" v-model="$root.userTimezone" class="form-select">
@@ -20,6 +38,23 @@
                         </select>
                     </div>
 
+                    <div class="mb-3">
+                        <label class="form-label">Search Engine Visibility</label>
+
+                        <div class="form-check">
+                            <input id="searchEngineIndexYes" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="true" required>
+                            <label class="form-check-label" for="searchEngineIndexYes">
+                                Allow indexing
+                            </label>
+                        </div>
+                        <div class="form-check">
+                            <input id="searchEngineIndexNo" v-model="settings.searchEngineIndex" class="form-check-input" type="radio" name="flexRadioDefault" :value="false" required>
+                            <label class="form-check-label" for="searchEngineIndexNo">
+                                Discourage search engines from indexing site
+                            </label>
+                        </div>
+                    </div>
+
                     <div>
                         <button class="btn btn-primary" type="submit">
                             Save
@@ -29,7 +64,7 @@
 
                 <template v-if="loaded">
                     <template v-if="! settings.disableAuth">
-                        <h2>Change Password</h2>
+                        <h2 class="mt-5 mb-2">Change Password</h2>
                         <form class="mb-3" @submit.prevent="savePassword">
                             <div class="mb-3">
                                 <label for="current-password" class="form-label">Current Password</label>
@@ -57,7 +92,7 @@
                         </form>
                     </template>
 
-                    <h2>Advanced</h2>
+                    <h2 class="mt-5 mb-2">Advanced</h2>
 
                     <div class="mb-3">
                         <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">Enable Auth</button>
@@ -67,7 +102,7 @@
                 </template>
             </div>
 
-            <div class="col-md-6">
+            <div class="notification-list col-md-6">
                 <div v-if="$root.isMobile" class="mt-3" />
 
                 <h2>Notifications</h2>
@@ -150,7 +185,7 @@ export default {
 
         saveGeneral() {
             localStorage.timezone = this.$root.userTimezone;
-            toast.success("Saved.")
+            this.saveSettings();
         },
 
         savePassword() {
@@ -171,6 +206,11 @@ export default {
         loadSettings() {
             this.$root.getSocket().emit("getSettings", (res) => {
                 this.settings = res.data;
+
+                if (this.settings.searchEngineIndex === undefined) {
+                    this.settings.searchEngineIndex = false;
+                }
+
                 this.loaded = true;
             })
         },
@@ -201,8 +241,29 @@ export default {
 }
 </script>
 
-<style scoped>
-    .shadow-box {
-        padding: 20px;
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.shadow-box {
+    padding: 20px;
+}
+
+.btn-check:active + .btn-outline-primary,
+.btn-check:checked + .btn-outline-primary,
+.btn-check:hover + .btn-outline-primary {
+    color: #fff;
+}
+
+.dark {
+    .list-group-item {
+        background-color: $dark-bg2;
+        color: $dark-font-color;
     }
+
+    .btn-check:active + .btn-outline-primary,
+    .btn-check:checked + .btn-outline-primary,
+    .btn-check:hover + .btn-outline-primary {
+        color: #000;
+    }
+}
 </style>

src/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = void 0;
+exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = void 0;
+exports.appName = "Uptime Kuma";
 exports.DOWN = 0;
 exports.UP = 1;
 exports.PENDING = 2;
@@ -32,3 +33,14 @@ function debug(msg) {
     }
 }
 exports.debug = debug;
+function polyfill() {
+    if (!String.prototype.replaceAll) {
+        String.prototype.replaceAll = function (str, newStr) {
+            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+                return this.replace(str, newStr);
+            }
+            return this.replace(new RegExp(str, "g"), newStr);
+        };
+    }
+}
+exports.polyfill = polyfill;

src/util.ts

@@ -1,8 +1,10 @@
+// @ts-nocheck
 // Common Util for frontend and backend
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
 // Need to run "tsc" to compile if there are any changes.
 
+export const appName = "Uptime Kuma";
 export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;
@@ -38,6 +40,28 @@ export function ucfirst(str) {
 
 export function debug(msg) {
     if (process.env.NODE_ENV === "development") {
-        console.log(msg)
+        console.log(msg);
+    }
+}
+
+export function polyfill() {
+    /**
+     * String.prototype.replaceAll() polyfill
+     * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
+     * @author Chris Ferdinandi
+     * @license MIT
+     */
+    if (!String.prototype.replaceAll) {
+        String.prototype.replaceAll = function(str, newStr) {
+
+            // If a regex pattern
+            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+                return this.replace(str, newStr);
+            }
+
+            // If a string
+            return this.replace(new RegExp(str, "g"), newStr);
+
+        };
     }
 }

tsconfig.json

@@ -1,8 +1,11 @@
 {
     "compileOnSave": true,
     "compilerOptions": {
-        "target": "ES2018",
+        "target": "es2018",
         "module": "commonjs",
+        "lib": [
+            "es2020"
+        ],
         "removeComments": true,
         "preserveConstEnums": true,
         "sourceMap": false,

vite.config.js

@@ -1,14 +1,14 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import legacy from '@vitejs/plugin-legacy'
+import legacy from "@vitejs/plugin-legacy"
+import vue from "@vitejs/plugin-vue"
+import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-      vue(),
-      legacy({
-          targets: ['ie > 11'],
-          additionalLegacyPolyfills: ['regenerator-runtime/runtime']
-      })
-  ]
+    plugins: [
+        vue(),
+        legacy({
+            targets: ["ie > 11"],
+            additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
+        })
+    ]
 })