Update to 1.0.7

# Conflicts:
#	server/model/monitor.js
#	src/pages/Details.vue

.dockerignore

@@ -11,3 +11,4 @@
 LICENSE
 README.md
 .editorconfig
+.vscode

.github/ISSUE_TEMPLATE/--please-go-to--discussion--tab-if-you-want-to-ask-or-share-something.md

@@ -0,0 +1,10 @@
+---
+name: ⚠ Please go to "Discussions" Tab if you want to ask or share something
+about: BUG REPORT ONLY HERE
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+BUG REPORT ONLY HERE

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,34 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - Uptime Kuma Version:
+ - Using Docker?: Yes/No
+ - OS: 
+ - Browser:
+
+
+**Additional context**
+Add any other context about the problem here.

.gitignore

@@ -7,3 +7,4 @@ dist-ssr
 
 /data
 !/data/.gitkeep
+.vscode

README.md

@@ -15,7 +15,7 @@ It is a self-hosted monitoring tool like "Uptime Robot".
 
 * Monitoring uptime for HTTP(s) / TCP / Ping.
 * Fancy, Reactive, Fast UI/UX.
-* Notifications via Webhook, Telegram, Discord and email (SMTP). 
+* Notifications via Webhook, Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP) and more by Apprise. 
 * 20 seconds interval.
 
 # How to Use
@@ -80,12 +80,17 @@ PS: For every new release, it takes some time to build the docker image, please
 
 ```bash
 git fetch --all
-git checkout 1.0.6 --force
+git checkout 1.0.7 --force
 npm install
 npm run build
 pm2 restart uptime-kuma
 ```
 
+# What's Next?
+
+I will mark requests/issues to the next milestone. 
+https://github.com/louislam/uptime-kuma/milestones
+
 # More Screenshots
 
 Settings Page:

db/patch1.sql

@@ -0,0 +1,37 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+-- Change Monitor.created_date from "TIMESTAMP" to "DATETIME"
+-- SQL Generated by Intellij Idea
+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,
+    keyword VARCHAR(255)
+);
+
+insert into monitor_dg_tmp(id, name, active, user_id, interval, url, type, weight, hostname, port, created_date, keyword) select id, name, active, user_id, interval, url, type, weight, hostname, port, created_date, keyword 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;

db/patch2.sql

@@ -0,0 +1,9 @@
+BEGIN TRANSACTION;
+
+CREATE TABLE monitor_tls_info (
+	id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+	monitor_id INTEGER NOT NULL,
+	info_json TEXT
+);
+
+COMMIT;

db/patch3.sql

@@ -0,0 +1,37 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+-- Add maxretries column to monitor
+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,
+    keyword VARCHAR(255),
+    maxretries INTEGER NOT NULL DEFAULT 0
+);
+
+insert into monitor_dg_tmp(id, name, active, user_id, interval, url, type, weight, hostname, port, created_date, keyword) select id, name, active, user_id, interval, url, type, weight, hostname, port, created_date, keyword 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;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "uptime-kuma",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -392,6 +392,11 @@
         "follow-redirects": "^1.10.0"
       }
     },
+    "babel-plugin-add-module-exports": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
+      "integrity": "sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU="
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -2093,6 +2098,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "merge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
+      "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -3698,6 +3708,16 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "optional": true
     },
+    "v-pagination-3": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/v-pagination-3/-/v-pagination-3-0.1.6.tgz",
+      "integrity": "sha512-82J8HnEIYtZijn6F3xhyP/ildI5K7Rv4Yu74VNfQWQsiPWTKntgVvZgBH8UPh/lFEjgWxty/M4N+YHvS+YbGzg==",
+      "requires": {
+        "babel-plugin-add-module-exports": "^0.2.1",
+        "merge": "^2.1.1",
+        "vue": ">=3.0.0"
+      }
+    },
     "v8flags": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -12,10 +12,10 @@
         "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.6 --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.0.7 --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.6 && npm install && npm run build",
+        "setup": "git checkout 1.0.7 && npm install && npm run build",
         "version-global-replace": "node extra/version-global-replace.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js"
     },
@@ -38,6 +38,7 @@
         "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-confirm-dialog": "^1.0.2",
         "vue-router": "^4.0.10",

server/database.js

@@ -0,0 +1,119 @@
+const fs = require("fs");
+const {sleep} = require("./util");
+const {R} = require("redbean-node");
+const {setSetting, setting} = require("./util-server");
+
+
+class Database {
+
+    static templatePath = "./db/kuma.db"
+    static path =  './data/kuma.db';
+    static latestVersion = 3;
+    static noReject = true;
+
+    static async patch() {
+        let version = parseInt(await setting("database_version"));
+
+        if (! version) {
+            version = 0;
+        }
+
+        console.info("Your database version: " + version);
+        console.info("Latest database version: " + this.latestVersion);
+
+        if (version === this.latestVersion) {
+            console.info("Database no need to patch");
+        } else {
+            console.info("Database patch is needed")
+
+            console.info("Backup the db")
+            const backupPath = "./data/kuma.db.bak" + version;
+            fs.copyFileSync(Database.path, backupPath);
+
+            // Try catch anything here, if gone wrong, restore the backup
+            try {
+                for (let i = version + 1; i <= this.latestVersion; i++) {
+                    const sqlFile = `./db/patch${i}.sql`;
+                    console.info(`Patching ${sqlFile}`);
+                    await Database.importSQLFile(sqlFile);
+                    console.info(`Patched ${sqlFile}`);
+                    await setSetting("database_version", i);
+                }
+                console.log("Database Patched Successfully");
+            } catch (ex) {
+                await Database.close();
+                console.error("Patch db failed!!! Restoring the backup")
+                fs.copyFileSync(backupPath, Database.path);
+                console.error(ex)
+
+                console.error("Start Uptime-Kuma failed due to patch db failed")
+                console.error("Please submit the bug report if you still encounter the problem after restart: https://github.com/louislam/uptime-kuma/issues")
+                process.exit(1);
+            }
+        }
+    }
+
+    /**
+     * Sadly, multi sql statements is not supported by many sqlite libraries, I have to implement it myself
+     * @param filename
+     * @returns {Promise<void>}
+     */
+    static async importSQLFile(filename) {
+
+        await R.getCell("SELECT 1");
+
+        let text = fs.readFileSync(filename).toString();
+
+        // Remove all comments (--)
+        let lines = text.split("\n");
+        lines = lines.filter((line) => {
+            return ! line.startsWith("--")
+        });
+
+        // Split statements by semicolon
+        // Filter out empty line
+        text = lines.join("\n")
+
+        let statements = text.split(";")
+            .map((statement) => {
+                return statement.trim();
+            })
+            .filter((statement) => {
+                return statement !== "";
+            })
+
+        for (let statement of statements) {
+            await R.exec(statement);
+        }
+    }
+
+    /**
+     * Special handle, because tarn.js throw a promise reject that cannot be caught
+     * @returns {Promise<void>}
+     */
+    static async close() {
+        const listener = (reason, p) => {
+            Database.noReject = false;
+        };
+        process.addListener('unhandledRejection', listener);
+
+        console.log("Closing DB")
+
+        while (true) {
+            Database.noReject = true;
+            await R.close()
+            await sleep(2000)
+
+            if (Database.noReject) {
+                break;
+            } else {
+                console.log("Waiting to close the db")
+            }
+        }
+        console.log("SQLite closed")
+
+        process.removeListener('unhandledRejection', listener);
+    }
+}
+
+module.exports = Database;

server/model/heartbeat.js

@@ -3,8 +3,6 @@ const utc = require('dayjs/plugin/utc')
 var timezone = require('dayjs/plugin/timezone')
 dayjs.extend(utc)
 dayjs.extend(timezone)
-const axios = require("axios");
-const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
 
 

server/model/monitor.js

@@ -1,22 +1,29 @@
 
+const https = require('https');
 const dayjs = require("dayjs");
 const utc = require('dayjs/plugin/utc')
 var timezone = require('dayjs/plugin/timezone')
 dayjs.extend(utc)
 dayjs.extend(timezone)
 const axios = require("axios");
-const {tcping, ping} = require("../util-server");
+const {debug, UP, DOWN, PENDING} = require("../util");
+const {tcping, ping, checkCertificate} = require("../util-server");
 const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
 const {Notification} = require("../notification")
 
+//  Use Custom agent to disable session reuse
+//  https://github.com/nodejs/node/issues/3940
+const customAgent = new https.Agent({
+    maxCachedSessions: 0
+});
+
 /**
  * status:
  *      0 = DOWN
  *      1 = UP
  */
 class Monitor extends BeanModel {
-
     async toJSON() {
 
         let notificationIDList = {};
@@ -35,6 +42,7 @@ class Monitor extends BeanModel {
             url: this.url,
             hostname: this.hostname,
             port: this.port,
+            maxretries: this.maxretries,
             weight: this.weight,
             active: this.active,
             type: this.type,
@@ -46,9 +54,9 @@ class Monitor extends BeanModel {
 
     start(io) {
         let previousBeat = null;
+        let retries = 0;
 
         const beat = async () => {
-            console.log(`Monitor ${this.id}: Heartbeat`)
 
             if (! previousBeat) {
                 previousBeat = await R.findOne("heartbeat", " monitor_id = ? ORDER BY time DESC", [
@@ -56,13 +64,15 @@ class Monitor extends BeanModel {
                 ])
             }
 
+            const isFirstBeat = !previousBeat;
+
             let bean = R.dispense("heartbeat")
             bean.monitor_id = this.id;
             bean.time = R.isoDateTime(dayjs.utc());
-            bean.status = 0;
+            bean.status = DOWN;
 
             // Duration
-            if (previousBeat) {
+            if (! isFirstBeat) {
                 bean.duration = dayjs(bean.time).diff(dayjs(previousBeat.time), 'second');
             } else {
                 bean.duration = 0;
@@ -72,13 +82,27 @@ class Monitor extends BeanModel {
                 if (this.type === "http" || this.type === "keyword") {
                     let startTime = dayjs().valueOf();
                     let res = await axios.get(this.url, {
-                        headers: { 'User-Agent':'Uptime-Kuma' }
-                    })
+                        headers: { "User-Agent": "Uptime-Kuma" },
+                        httpsAgent: customAgent,
+                    });
                     bean.msg = `${res.status} - ${res.statusText}`
                     bean.ping = dayjs().valueOf() - startTime;
 
+                    // Check certificate if https is used
+
+                    let certInfoStartTime = dayjs().valueOf();
+                    if (this.getUrl()?.protocol === "https:") {
+                        try {
+                            await this.updateTlsInfo(checkCertificate(res));
+                        } catch (e) {
+                            console.error(e.message)
+                        }
+                    }
+
+                    debug("Cert Info Query Time: " + (dayjs().valueOf() - certInfoStartTime) + "ms")
+
                     if (this.type === "http") {
-                        bean.status = 1;
+                        bean.status = UP;
                     } else {
 
                         let data = res.data;
@@ -90,7 +114,7 @@ class Monitor extends BeanModel {
 
                         if (data.includes(this.keyword)) {
                             bean.msg += ", keyword is found"
-                            bean.status = 1;
+                            bean.status = UP;
                         } else {
                             throw new Error(bean.msg + ", but keyword is not found")
                         }
@@ -101,32 +125,52 @@ class Monitor extends BeanModel {
                 } else if (this.type === "port") {
                     bean.ping = await tcping(this.hostname, this.port);
                     bean.msg = ""
-                    bean.status = 1;
+                    bean.status = UP;
 
                 } else if (this.type === "ping") {
                     bean.ping = await ping(this.hostname);
                     bean.msg = ""
-                    bean.status = 1;
+                    bean.status = UP;
                 }
 
+                retries = 0;
+
             } catch (error) {
+                if ((this.maxretries > 0) && (retries < this.maxretries)) {
+                    retries++;
+                    bean.status = PENDING;
+                }
                 bean.msg = error.message;
             }
 
-            // Mark as important if status changed
-            if (! previousBeat || previousBeat.status !== bean.status) {
+            // * ? -> ANY STATUS = important [isFirstBeat]
+            // UP -> PENDING = not important
+            // * UP -> DOWN = important
+            // UP -> UP = not important
+            // PENDING -> PENDING = not important
+            // * PENDING -> DOWN = important
+            // PENDING -> UP = not important
+            // DOWN -> PENDING = this case not exists
+            // DOWN -> DOWN = not important
+            // * DOWN -> UP = important
+            let isImportant = isFirstBeat ||
+                (previousBeat.status === UP && bean.status === DOWN) ||
+                (previousBeat.status === DOWN && bean.status === UP) ||
+                (previousBeat.status === PENDING && bean.status === DOWN);
+
+            // Mark as important if status changed, ignore pending pings,
+            // Don't notify if disrupted changes to up
+            if (isImportant) {
                 bean.important = true;
 
-                // Do not send if first beat is UP
-                if (previousBeat || bean.status !== 1) {
+                // Send only if the first beat is DOWN
+                if (!isFirstBeat || bean.status === DOWN) {
                     let notificationList = await R.getAll(`SELECT notification.* FROM notification, monitor_notification WHERE monitor_id = ? AND monitor_notification.notification_id = notification.id `, [
                         this.id
                     ])
 
-                    let promiseList = [];
-
                     let text;
-                    if (bean.status === 1) {
+                    if (bean.status === UP) {
                         text = "✅ Up"
                     } else {
                         text = "🔴 Down"
@@ -135,16 +179,26 @@ class Monitor extends BeanModel {
                     let msg = `[${this.name}] [${text}] ${bean.msg}`;
 
                     for(let notification of notificationList) {
-                        promiseList.push(Notification.send(JSON.parse(notification.config), msg, await this.toJSON(), bean.toJSON()));
+                        try {
+                            await Notification.send(JSON.parse(notification.config), msg, await this.toJSON(), bean.toJSON())
+                        } catch (e) {
+                            console.error("Cannot send notification to " + notification.name)
+                        }
                     }
-
-                    await Promise.all(promiseList);
                 }
 
             } else {
                 bean.important = false;
             }
 
+            if (bean.status === UP) {
+                console.info(`Monitor #${this.id} '${this.name}': Successful Response: ${bean.ping} ms | Interval: ${this.interval} seconds | Type: ${this.type}`)
+            } else if (bean.status === PENDING) {
+                console.warn(`Monitor #${this.id} '${this.name}': Pending: ${bean.msg} | Type: ${this.type}`)
+            } else {
+                console.warn(`Monitor #${this.id} '${this.name}': Failing: ${bean.msg} | Type: ${this.type}`)
+            }
+
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
 
             await R.store(bean)
@@ -161,10 +215,35 @@ class Monitor extends BeanModel {
         clearInterval(this.heartbeatInterval)
     }
 
+    // Helper Method:
+    // returns URL object for further usage
+    // returns null if url is invalid
+    getUrl() {
+        try {
+            return new URL(this.url);
+        } catch (_) {
+            return null;
+        }
+    }
+
+    // Store TLS info to database
+    async updateTlsInfo(checkCertificateResult) {
+        let tls_info_bean = await R.findOne("monitor_tls_info", "monitor_id = ?", [
+            this.id
+        ]);
+        if (tls_info_bean == null) {
+            tls_info_bean = R.dispense("monitor_tls_info");
+            tls_info_bean.monitor_id = this.id;
+        }
+        tls_info_bean.info_json = JSON.stringify(checkCertificateResult);
+        await R.store(tls_info_bean);
+    }
+
     static async sendStats(io, monitorID, userID) {
         Monitor.sendAvgPing(24, io, monitorID, userID);
         Monitor.sendUptime(24, io, monitorID, userID);
         Monitor.sendUptime(24 * 30, io, monitorID, userID);
+        Monitor.sendCertInfo(io, monitorID, userID);
     }
 
     /**
@@ -185,6 +264,15 @@ class Monitor extends BeanModel {
         io.to(userID).emit("avgPing", monitorID, avgPing);
     }
 
+    static async sendCertInfo(io, monitorID, userID) {
+         let tls_info = await R.findOne("monitor_tls_info", "monitor_id = ?", [
+            monitorID
+        ]);
+        if (tls_info != null) {
+            io.to(userID).emit("certInfo", monitorID, tls_info.info_json);
+        }
+    }
+
     /**
      * Uptime with calculation
      * Calculation based on:
@@ -233,7 +321,7 @@ class Monitor extends BeanModel {
                 }
 
                 total += value;
-                if (row.status === 0) {
+                if (row.status === 0 || row.status === 2) {
                     downtime += value;
                 }
             }

server/notification.js

@@ -72,7 +72,7 @@ class Notification {
                     finalData = data;
                 }
 
-                let res = await axios.post(notification.webhookURL, finalData, config)
+                await axios.post(notification.webhookURL, finalData, config)
                 return okMsg;
 
             } catch (error) {
@@ -90,7 +90,7 @@ class Notification {
                   username: 'Uptime-Kuma',
                   content: msg
                 }
-                let res = await axios.post(notification.discordWebhookUrl, data)
+                await axios.post(notification.discordWebhookUrl, data)
                 return okMsg;
               }
               // If heartbeatJSON is not null, we go into the normal alerting loop.
@@ -116,7 +116,7 @@ class Notification {
                   ]
                 }]
               }
-              let res = await axios.post(notification.discordWebhookUrl, data)
+              await axios.post(notification.discordWebhookUrl, data)
               return okMsg;
             } catch(error) {
               throwGeneralAxiosError(error)
@@ -131,7 +131,7 @@ class Notification {
             };
             let config = {};
 
-            let res = await axios.post(notification.signalURL, data, config)
+            await axios.post(notification.signalURL, data, config)
             return okMsg;
         } catch (error) {
               throwGeneralAxiosError(error)
@@ -141,7 +141,7 @@ class Notification {
             try {
                 if (heartbeatJSON == null) {
                     let data = {'text': "Uptime Kuma Slack testing successful.", 'channel': notification.slackchannel, 'username': notification.slackusername, 'icon_emoji': notification.slackiconemo}
-                    let res = await axios.post(notification.slackwebhookURL, data)
+                    await axios.post(notification.slackwebhookURL, data)
                     return okMsg;
                 }
 
@@ -186,7 +186,7 @@ class Notification {
                             }
                         ]
                     }
-                let res = await axios.post(notification.slackwebhookURL, data)
+                await axios.post(notification.slackwebhookURL, data)
                 return okMsg;
             } catch (error) {
                 throwGeneralAxiosError(error)
@@ -199,12 +199,12 @@ class Notification {
                     let data = {'message': "<b>Uptime Kuma Pushover testing successful.</b>",
                     'user': notification.pushoveruserkey, 'token': notification.pushoverapptoken, 'sound':notification.pushoversounds,
                     'priority': notification.pushoverpriority, 'title':notification.pushovertitle, 'retry': "30", 'expire':"3600", 'html': 1}
-                    let res = await axios.post(pushoverlink, data)
+                    await axios.post(pushoverlink, data)
                     return okMsg;
                 }
 
                 let data = {
-                    "message": "<b>Uptime Kuma Alert</b>\n\n<b>Message</b>:" +msg + '\n<b>Time (UTC)</b>:' +time,
+                    "message": "<b>Uptime Kuma Alert</b>\n\n<b>Message</b>:"+msg+ '\n<b>Time (UTC)</b>:' +heartbeatJSON["time"],
                     "user":notification.pushoveruserkey,
                     "token": notification.pushoverapptoken,
                     "sound": notification.pushoversounds,
@@ -214,7 +214,7 @@ class Notification {
                     "expire": "3600",
                     "html": 1
                     }
-                let res = await axios.post(pushoverlink, data)
+                await axios.post(pushoverlink, data)
                 return okMsg;
             } catch (error) {
                 throwGeneralAxiosError(error)
@@ -278,7 +278,7 @@ class Notification {
         });
 
         // send mail with defined transport object
-        let info = await transporter.sendMail({
+        await transporter.sendMail({
             from: `"Uptime Kuma" <${notification.smtpFrom}>`,
             to: notification.smtpTo,
             subject: msg,

server/server.js

@@ -12,6 +12,7 @@ const fs = require("fs");
 const {getSettings} = require("./util-server");
 const {Notification} = require("./notification")
 const gracefulShutdown = require('http-graceful-shutdown');
+const Database = require("./database");
 const {sleep} = require("./util");
 const args = require('args-parser')(process.argv);
 
@@ -27,9 +28,28 @@ const server = http.createServer(app);
 const io = new Server(server);
 app.use(express.json())
 
+/**
+ * Total WebSocket client connected to server currently, no actual use
+ * @type {number}
+ */
 let totalClient = 0;
+
+/**
+ * Use for decode the auth object
+ * @type {null}
+ */
 let jwtSecret = null;
+
+/**
+ * Main monitor list
+ * @type {{}}
+ */
 let monitorList = {};
+
+/**
+ * Show Setup Page
+ * @type {boolean}
+ */
 let needSetup = false;
 
 (async () => {
@@ -163,10 +183,6 @@ let needSetup = false;
                     msg: e.message
                 });
             }
-
-
-
-
         });
 
         // Auth Only API
@@ -217,6 +233,7 @@ let needSetup = false;
                 bean.url = monitor.url
                 bean.interval = monitor.interval
                 bean.hostname = monitor.hostname;
+                bean.maxretries = monitor.maxretries;
                 bean.port = monitor.port;
                 bean.keyword = monitor.keyword;
 
@@ -526,12 +543,12 @@ async function afterLogin(socket, user) {
     let monitorList = await sendMonitorList(socket)
 
     for (let monitorID in monitorList) {
-        await sendHeartbeatList(socket, monitorID);
-        await sendImportantHeartbeatList(socket, monitorID);
-        await Monitor.sendStats(io, monitorID, user.id)
+        sendHeartbeatList(socket, monitorID);
+        sendImportantHeartbeatList(socket, monitorID);
+        Monitor.sendStats(io, monitorID, user.id)
     }
 
-    await sendNotificationList(socket)
+    sendNotificationList(socket)
 }
 
 async function getMonitorJSONList(userID) {
@@ -555,19 +572,21 @@ function checkLogin(socket) {
 }
 
 async function initDatabase() {
-    const path = './data/kuma.db';
-
-    if (! fs.existsSync(path)) {
+    if (! fs.existsSync(Database.path)) {
         console.log("Copying Database")
-        fs.copyFileSync("./db/kuma.db", path);
+        fs.copyFileSync(Database.templatePath, Database.path);
     }
 
     console.log("Connecting to Database")
     R.setup('sqlite', {
-        filename: path
+        filename: Database.path
     });
     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");
 
@@ -587,6 +606,7 @@ async function initDatabase() {
         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
     if ((await R.count("user")) === 0) {
         console.log("No user, need setup")
         needSetup = true;
@@ -705,11 +725,6 @@ const startGracefulShutdown = async () => {
 
 }
 
-let noReject = true;
-process.on('unhandledRejection', (reason, p) => {
-    noReject = false;
-});
-
 async function shutdownFunction(signal) {
     console.log('Called signal: ' + signal);
 
@@ -718,24 +733,8 @@ async function shutdownFunction(signal) {
         let monitor = monitorList[id]
         monitor.stop()
     }
-    await sleep(2000)
-
-    console.log("Closing DB")
-
-    // Special handle, because tarn.js throw a promise reject that cannot be caught
-    while (true) {
-        noReject = true;
-        await R.close()
-        await sleep(2000)
-
-        if (noReject) {
-            break;
-        } else {
-            console.log("Waiting...")
-        }
-    }
-
-    console.log("OK")
+    await sleep(2000);
+    await Database.close();
 }
 
 function finalFunction() {

server/util-server.js

@@ -45,6 +45,18 @@ exports.setting = async function (key) {
     ])
 }
 
+exports.setSetting = async function (key, value) {
+    let bean = await R.findOne("setting", " `key` = ? ", [
+        key
+    ])
+    if (! bean) {
+        bean = R.dispense("setting")
+        bean.key = key;
+    }
+    bean.value = value;
+    await R.store(bean)
+}
+
 exports.getSettings = async function (type) {
     let list = await R.getAll("SELECT * FROM setting WHERE `type` = ? ", [
         type
@@ -58,3 +70,52 @@ exports.getSettings = async function (type) {
 
     return result;
 }
+
+
+// ssl-checker by @dyaa
+// param: res - response object from axios
+// return an object containing the certificate information
+
+const getDaysBetween = (validFrom, validTo) =>
+    Math.round(Math.abs(+validFrom - +validTo) / 8.64e7);
+
+const getDaysRemaining = (validFrom, validTo) => {
+    const daysRemaining = getDaysBetween(validFrom, validTo);
+    if (new Date(validTo).getTime() < new Date().getTime()) {
+        return -daysRemaining;
+    }
+    return daysRemaining;
+};
+
+exports.checkCertificate = function (res) {
+    const {
+        valid_from,
+        valid_to,
+        subjectaltname,
+        issuer,
+        fingerprint,
+    } = res.request.res.socket.getPeerCertificate(false);
+
+    if (!valid_from || !valid_to || !subjectaltname) {
+        throw { message: 'No TLS certificate in response' };
+    }
+
+    const valid = res.request.res.socket.authorized || false;
+
+    const validTo = new Date(valid_to);
+
+    const validFor = subjectaltname
+        .replace(/DNS:|IP Address:/g, "")
+        .split(", ");
+
+    const daysRemaining = getDaysRemaining(new Date(), validTo);
+
+    return {
+        valid,
+        validFor,
+        validTo,
+        daysRemaining,
+        issuer,
+        fingerprint,
+    };
+}

server/util.js

@@ -1,6 +1,10 @@
 // Common JS cannot be used in frontend sadly
 // sleep, ucfirst is duplicated in ../src/util-frontend.js
 
+exports.DOWN = 0;
+exports.UP = 1;
+exports.PENDING = 2;
+
 exports.sleep = function (ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -14,3 +18,9 @@ exports.ucfirst = function (str) {
     return firstLetter.toUpperCase() + str.substr(1);
 }
 
+exports.debug = (msg) => {
+    if (process.env.NODE_ENV === "development") {
+        console.log(msg)
+    }
+}
+

src/assets/vars.scss

@@ -1,7 +1,8 @@
 $primary: #5CDD8B;
 $danger: #DC3545;
+$warning: #f8a306;
 $link-color: #111;
 $border-radius: 50rem;
 
 $highlight: #7ce8a4;
-$highlight-white: #e7faec;
+$highlight-white: #e7faec;

src/components/Datetime.vue

@@ -4,9 +4,9 @@
 
 <script>
 import dayjs from "dayjs";
-import relativeTime  from "dayjs/plugin/relativeTime"
-import utc  from 'dayjs/plugin/utc'
-import timezone  from 'dayjs/plugin/timezone' // dependent on utc plugin
+import relativeTime from "dayjs/plugin/relativeTime"
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone' // dependent on utc plugin
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(relativeTime)
@@ -14,12 +14,23 @@ dayjs.extend(relativeTime)
 export default {
     props: {
         value: String,
+        dateOnly: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     computed: {
         displayText() {
-            let format = "YYYY-MM-DD HH:mm:ss";
-            return dayjs.utc(this.value).tz(this.$root.timezone).format(format)
+            if (this.value !== undefined && this.value !== "") {
+                let format = "YYYY-MM-DD HH:mm:ss";
+                if (this.dateOnly) {
+                    format = "YYYY-MM-DD";
+                }
+                return dayjs.utc(this.value).tz(this.$root.timezone).format(format);
+            } else {
+                return "";
+            }
         },
     }
 }

src/components/HeartbeatBar.vue

@@ -3,7 +3,7 @@
         <div class="hp-bar-big" :style="barStyle">
             <div
                 class="beat"
-                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0) }"
+                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
                 :style="beatStyle"
                 v-for="(beat, index) in shortBeatList"
                 :key="index"
@@ -166,6 +166,10 @@ export default {
             background-color: $danger;
         }
 
+        &.pending {
+            background-color: $warning;
+        }
+
         &:not(.empty):hover {
             transition: all ease-in-out 0.15s;
             opacity: 0.8;

src/components/NotificationDialog.vue

@@ -55,7 +55,7 @@
                                     <p style="margin-top: 8px;">
 
                                         <template v-if="notification.telegramBotToken">
-                                            <a :href="telegramGetUpdatesURL" target="_blank">{{ telegramGetUpdatesURL }}</a>
+                                            <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
                                         </template>
 
                                         <template v-else>
@@ -69,13 +69,13 @@
                         <template v-if="notification.type === 'webhook'">
                             <div class="mb-3">
                                 <label for="webhook-url" class="form-label">Post URL</label>
-                                <input type="url" pattern="https?://.+"  class="form-control" id="webhook-url" required v-model="notification.webhookURL">
+                                <input type="url" pattern="https?://.+" class="form-control" id="webhook-url" required v-model="notification.webhookURL">
 
                             </div>
 
                             <div class="mb-3">
                                 <label for="webhook-content-type" class="form-label">Content Type</label>
-                                <select class="form-select"  id="webhook-content-type" v-model="notification.webhookContentType" required>
+                                <select class="form-select" id="webhook-content-type" v-model="notification.webhookContentType" required>
                                     <option value="json">application/json</option>
                                     <option value="form-data">multipart/form-data</option>
                                 </select>
@@ -100,7 +100,7 @@
 
                             <div class="mb-3">
                                 <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" value="" id="secure"  v-model="notification.smtpSecure">
+                                    <input class="form-check-input" type="checkbox" value="" id="secure" v-model="notification.smtpSecure">
                                     <label class="form-check-label" for="secure">
                                         Secure
                                     </label>
@@ -141,7 +141,7 @@
                         <template v-if="notification.type === 'signal'">
                             <div class="mb-3">
                                 <label for="signal-url" class="form-label">Post URL</label>
-                                <input type="url" pattern="https?://.+"  class="form-control" id="signal-url" required v-model="notification.signalURL">
+                                <input type="url" pattern="https?://.+" class="form-control" id="signal-url" required v-model="notification.signalURL">
 
                             </div>
 
@@ -223,16 +223,22 @@
 
                         <template v-if="notification.type === 'pushover'">
                             <div class="mb-3">
-                                <label for="pushover-app-token" class="form-label">Application Token<span style="color:red;"><sup>*</sup></span></label>
-                                <input type="text" class="form-control" id="pushover-app-token" required v-model="notification.pushoverapptoken">
                                 <label for="pushover-user" class="form-label">User Key<span style="color:red;"><sup>*</sup></span></label>
                                 <input type="text" class="form-control" id="pushover-user" required v-model="notification.pushoveruserkey">
+                                <label for="pushover-app-token" class="form-label">Application Token<span style="color:red;"><sup>*</sup></span></label>
+                                <input type="text" class="form-control" id="pushover-app-token" required v-model="notification.pushoverapptoken">
                                 <label for="pushover-device" class="form-label">Device</label>
                                 <input type="text" class="form-control" id="pushover-device" v-model="notification.pushoverdevice">
                                 <label for="pushover-device" class="form-label">Message Title</label>
                                 <input type="text" class="form-control" id="pushover-title" v-model="notification.pushovertitle">
                                 <label for="pushover-priority" class="form-label">Priority</label>
-                                <input type="text" class="form-control" id="pushover-priority" v-model="notification.pushoverpriority">
+                                <select class="form-select"  id="pushover-priority" v-model="notification.pushoverpriority">
+                                    <option>-2</option>
+                                    <option>-1</option>
+                                    <option>0</option>
+                                    <option>1</option>
+                                    <option>2</option>
+                                </select>
                                 <label for="pushover-sound" class="form-label">Notification Sound</label>
                                 <select class="form-select"  id="pushover-sound" v-model="notification.pushoversounds">
                                     <option>pushover</option>
@@ -264,17 +270,19 @@
                                         More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
                                 </p>
                                  <p style="margin-top: 8px;">
-                                        Emergency priority(2) has default 30 second timeout between retries and will expire after 1 hour.
+                                        Emergency priority (2) has default 30 second timeout between retries and will expire after 1 hour.
+                                </p>
+                                 <p style="margin-top: 8px;">
+                                        If you want to send notifications to different devices, fill out Device field.
                                 </p>
                                 </div>
                             </div>
                         </template>
 
                         <template v-if="notification.type === 'apprise'">
-
                             <div class="mb-3">
-                                <label for="gotify-application-token" class="form-label">Apprise URL</label>
-                                <input type="text" class="form-control" id="gotify-application-token" required v-model="notification.appriseURL">
+                                <label for="apprise-url" class="form-label">Apprise URL</label>
+                                <input type="text" class="form-control" id="apprise-url" required v-model="notification.appriseURL">
                                 <div class="form-text">
                                     <p>Example: twilio://AccountSid:AuthToken@FromPhoneNo</p>
                                     <p>
@@ -282,7 +290,6 @@
                                     </p>
                                 </div>
                             </div>
-
                             <div class="mb-3">
                                 <p>
                                     Status:
@@ -290,7 +297,6 @@
                                     <span class="text-danger" v-else>Apprise is not installed. <a href="https://github.com/caronc/apprise">Read more</a></span>
                                 </p>
                             </div>
-
                         </template>
 
                     </div>

src/components/Status.vue

@@ -14,6 +14,8 @@ export default {
                 return "danger"
             } else if (this.status === 1) {
                 return "primary"
+            } else if (this.status === 2) {
+                return "warning"
             } else {
                 return "secondary"
             }
@@ -24,6 +26,8 @@ export default {
                 return "Down"
             } else if (this.status === 1) {
                 return "Up"
+            } else if (this.status === 2) {
+                return "Pending"
             } else {
                 return "Unknown"
             }
@@ -34,6 +38,6 @@ export default {
 
 <style scoped>
     span {
-        width: 45px;
+        width: 54px;
     }
 </style>

src/components/Uptime.vue

@@ -30,6 +30,8 @@ export default {
                 return "danger"
             } else if (this.lastHeartBeat.status === 1) {
                 return "primary"
+            } else if (this.lastHeartBeat.status === 2) {
+                return "warning"
             } else {
                 return "secondary"
             }

src/mixins/socket.js

@@ -25,6 +25,7 @@ export default {
             importantHeartbeatList: { },
             avgPingList: { },
             uptimeList: { },
+            certInfoList: {},
             notificationList: [],
             windowWidth: window.innerWidth,
             showListMobile: false,
@@ -58,7 +59,17 @@ export default {
             this.$router.push("/setup")
         });
 
-        socket.on('monitorList', (data) => {
+        socket.on("monitorList", (data) => {
+            // Add Helper function
+            Object.entries(data).forEach(([monitorID, monitor]) => {
+                monitor.getUrl = () => {
+                    try {
+                        return new URL(monitor.url);
+                    } catch (_) {
+                        return null;
+                    }
+                };
+            });
             this.monitorList = data;
         });
 
@@ -114,6 +125,10 @@ export default {
             this.uptimeList[`${monitorID}_${type}`] = data
         });
 
+        socket.on('certInfo', (monitorID, data) => {
+            this.certInfoList[monitorID] = JSON.parse(data)
+        });
+
         socket.on('importantHeartbeatList', (monitorID, data) => {
             if (! (monitorID in this.importantHeartbeatList)) {
                 this.importantHeartbeatList[monitorID] = data;
@@ -279,6 +294,11 @@ export default {
                         text: "Down",
                         color: "danger"
                     };
+                } else if (lastHeartBeat.status === 2) {
+                    result[monitorID] = {
+                        text: "Pending",
+                        color: "warning"
+                    };
                 } else {
                     result[monitorID] = unknown;
                 }

src/pages/Dashboard.vue

@@ -13,7 +13,7 @@
                         No Monitors, please <router-link to="/add">add one</router-link>.
                     </div>
 
-                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in sortedMonitorList" @click="$root.cancelActiveList">
+                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="(item, index) in sortedMonitorList" @click="$root.cancelActiveList" :key="index">
 
                         <div class="row">
                         	<div class="col-6 col-md-8 small-padding">

src/pages/DashboardHome.vue

@@ -47,7 +47,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                <tr v-for="beat in importantHeartBeatList">
+                <tr v-for="(beat, index) in displayedRecords" :key="index">
                     <td>{{ beat.name }}</td>
                     <td><Status :status="beat.status" /></td>
                     <td><Datetime :value="beat.time" /></td>
@@ -59,6 +59,13 @@
                 </tr>
                 </tbody>
             </table>
+
+            <div class="d-flex justify-content-center kuma_pagination">
+                <pagination
+                    v-model="page"
+                    :records=importantHeartBeatList.length
+                    :per-page="perPage" />
+            </div>
         </div>
     </div>
 
@@ -68,8 +75,21 @@
 <script>
 import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
+import Pagination from "v-pagination-3";
+
 export default {
-    components: {Datetime, Status},
+    components: {
+        Datetime,
+        Status,
+        Pagination,
+    },
+    data() {
+        return {
+            page: 1,
+            perPage: 25,
+            heartBeatList: [],
+        }
+    },
     computed: {
         stats() {
             let result = {
@@ -90,6 +110,8 @@ export default {
                         result.up++;
                     } else if (beat.status === 0) {
                         result.down++;
+                    } else if (beat.status === 2) {
+                        result.up++;                
                     } else {
                         result.unknown++;
                     }
@@ -127,8 +149,16 @@ export default {
                 }
             });
 
+            this.heartBeatList = result;
+
             return result;
-        }
+        },
+
+        displayedRecords() {
+            const startIndex = this.perPage * (this.page - 1);
+            const endIndex = startIndex + this.perPage;
+            return this.heartBeatList.slice(startIndex, endIndex);
+        },
     }
 }
 </script>

src/pages/Details.vue

@@ -12,7 +12,7 @@
 
     <div class="functions">
         <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
-        <button class="btn btn-primary" @click="resumeMonitor"  v-if="! monitor.active">Resume</button>
+        <button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active">Resume</button>
         <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
         <button class="btn btn-danger" @click="deleteDialog">Delete</button>
     </div>
@@ -51,6 +51,46 @@
                 <p>(30-day)</p>
                 <span class="num"><Uptime :monitor="monitor" type="720" /></span>
             </div>
+
+            <div class="col" v-if="certInfo">
+                <h4>CertExp.</h4>
+                <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
+                <span class="num" >
+                    <a href="#"  @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{certInfo.daysRemaining}} days</a>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="shadow-box big-padding text-center" v-if="showCertInfoBox">
+        <div class="row">
+            <div class="col">
+                <h4>Certificate Info</h4>
+                <table class="text-start">
+                    <tbody>
+                        <tr class="my-3">
+                            <td class="px-3">Valid: </td>
+                            <td>{{ certInfo.valid }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Valid To: </td>
+                            <td><Datetime :value="certInfo.validTo" /></td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Days Remaining: </td>
+                            <td>{{ certInfo.daysRemaining }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Issuer: </td>
+                            <td>{{ certInfo.issuer }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Fingerprint: </td>
+                            <td>{{ certInfo.fingerprint }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
@@ -64,7 +104,7 @@
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="beat in importantHeartBeatList">
+                <tr v-for="(beat, index) in displayedRecords" :key="index">
                     <td><Status :status="beat.status" /></td>
                     <td><Datetime :value="beat.time" /></td>
                     <td>{{ beat.msg }}</td>
@@ -75,6 +115,13 @@
                 </tr>
             </tbody>
         </table>
+
+        <div class="d-flex justify-content-center kuma_pagination">
+            <pagination
+                v-model="page"
+                :records=importantHeartBeatList.length
+                :per-page="perPage" />
+        </div>
     </div>
 
     <Confirm ref="confirmPause" @yes="pauseMonitor">
@@ -95,6 +142,7 @@ import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
+import Pagination from "v-pagination-3";
 
 export default {
     components: {
@@ -104,13 +152,17 @@ export default {
         HeartbeatBar,
         Confirm,
         Status,
+        Pagination,
     },
     mounted() {
 
     },
     data() {
         return {
-
+            page: 1,
+            perPage: 25,
+            heartBeatList: [],
+            toggleCertInfoBox: false,
         }
     },
     computed: {
@@ -154,6 +206,7 @@ export default {
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
+                this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
                 return this.$root.importantHeartbeatList[this.monitor.id]
             } else {
                 return [];
@@ -166,8 +219,25 @@ export default {
             } else {
                 return { }
             }
-        }
+        },
 
+        certInfo() {
+            if (this.$root.certInfoList[this.monitor.id]) {
+                return this.$root.certInfoList[this.monitor.id]
+            } else {
+                return null
+            }
+        },
+
+        showCertInfoBox() {
+            return this.certInfo != null && this.toggleCertInfoBox;
+        },
+
+        displayedRecords() {
+            const startIndex = this.perPage * (this.page - 1);
+            const endIndex = startIndex + this.perPage;
+            return this.heartBeatList.slice(startIndex, endIndex);
+        },
     },
     methods: {
         testNotification() {
@@ -251,4 +321,12 @@ table {
     font-size: 13px;
     color: #AAA;
 }
+
+.stats {
+    padding: 10px;
+
+    .col {
+        margin: 20px 0;
+    }
+}
 </style>

src/pages/EditMonitor.vue

@@ -48,6 +48,12 @@
                         <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
                     </div>
 
+                    <div class="mb-3">
+                        <label for="maxRetries" class="form-label">Retries</label>
+                        <input type="number" class="form-control" id="maxRetries" v-model="monitor.maxretries" required min="0" step="1">
+                        <div class="form-text">Maximum retries before the service is marked as down and a notification is sent</div>
+                    </div>
+
                     <div>
                         <button class="btn btn-primary" type="submit" :disabled="processing">Save</button>
                     </div>
@@ -61,7 +67,7 @@
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
 
-                <div class="form-check form-switch mb-3" v-for="notification in $root.notificationList">
+                <div class="form-check form-switch mb-3" :key="notification.id" v-for="notification in $root.notificationList">
                     <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">
 
                     <label class="form-check-label" :for=" 'notification' + notification.id">
@@ -119,6 +125,7 @@ export default {
                     name: "",
                     url: "https://",
                     interval: 60,
+                    maxretries: 0,
                     notificationIDList: {},
                 }
             } else if (this.isEdit) {

src/pages/Settings.vue

@@ -11,7 +11,7 @@
                         <label for="timezone" class="form-label">Timezone</label>
                         <select class="form-select" id="timezone" v-model="$root.userTimezone">
                             <option value="auto">Auto: {{ guessTimezone }}</option>
-                            <option v-for="timezone in timezoneList" :value="timezone.value">{{ timezone.name }}</option>
+                            <option v-for="(timezone, index) in timezoneList" :value="timezone.value" :key="index">{{ timezone.name }}</option>
                         </select>
                     </div>
 
@@ -36,7 +36,7 @@
                         <label for="repeat-new-password" class="form-label">Repeat New Password</label>
                         <input type="password" class="form-control" :class="{ 'is-invalid' : invalidPassword }" id="repeat-new-password" required v-model="password.repeatNewPassword">
                         <div class="invalid-feedback">
-                            The repeat password is not match.
+                            The repeat password does not match.
                         </div>
                     </div>
 
@@ -56,10 +56,10 @@
 
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
-                <p v-else>Please assign the notification to monitor(s) to get it works.</p>
+                <p v-else>Please assign a notification to monitor(s) to get it to work.</p>
 
                 <ul class="list-group mb-3" style="border-radius: 1rem;">
-                    <li  class="list-group-item"  v-for="notification in $root.notificationList">
+                    <li class="list-group-item" v-for="(notification, index) in $root.notificationList" :key="index">
                         {{ notification.name }}<br />
                         <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
                     </li>
@@ -77,8 +77,8 @@
 
 <script>
 import dayjs from "dayjs";
-import utc  from 'dayjs/plugin/utc'
-import timezone  from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 import NotificationDialog from "../components/NotificationDialog.vue";
 dayjs.extend(utc)
 dayjs.extend(timezone)

src/util-frontend.js

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
-import utc  from 'dayjs/plugin/utc'
-import timezone  from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -29,6 +29,7 @@ function getTimezoneOffset(timeZone) {
 }
 
 // From: https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
+// TODO: Move to separate file
 const aryIannaTimeZones = [
     'Europe/Andorra',
     'Asia/Dubai',
@@ -412,4 +413,3 @@ export function timezoneList() {
 
     return result;
 };
-