add ping and fix uptime

README.md

@@ -0,0 +1,29 @@
+# Uptime Kuma
+
+# Features
+
+* Monitoring uptime for HTTP(s) / TCP / Ping.
+* Fancy, Reactive, Fast UI/UX.
+* Notifications via Webhook, Telegram, Discord and email (SMTP).
+* 20 seconds interval.
+
+# How to Use
+
+npm
+
+Docker
+
+One-click Deploy to DigitalOcean
+
+# Motivation
+
+* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one.
+* Want to build a fancy UI.
+* Learn Vue 3 and vite.js.
+* Show the power of Bootstrap 5. 
+* 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 ⭐.
+

server/model/monitor.js

@@ -5,7 +5,7 @@ var timezone = require('dayjs/plugin/timezone')
 dayjs.extend(utc)
 dayjs.extend(timezone)
 const axios = require("axios");
-const {tcping} = require("../util-server");
+const {tcping, ping} = require("../util-server");
 const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
 
@@ -67,6 +67,10 @@ class Monitor extends BeanModel {
                 } else if (this.type === "port") {
                     bean.ping = await tcping(this.hostname, this.port);
                     bean.status = 1;
+
+                } else if (this.type === "ping") {
+                    bean.ping = await ping(this.hostname);
+                    bean.status = 1;
                 }
 
             } catch (error) {
@@ -125,19 +129,49 @@ class Monitor extends BeanModel {
      * @param duration : int Hours
      */
     static async sendUptime(duration, io, monitorID, userID) {
-        let downtime = parseInt(await R.getCell(`
+        let sec = duration * 3600;
-            SELECT SUM(duration)
+
+        let downtimeList = await R.getAll(`
+            SELECT duration, time
             FROM heartbeat
             WHERE time > DATE('now', ? || ' hours')
             AND status = 0
             AND monitor_id = ? `, [
             -duration,
             monitorID
-        ]));
+        ]);
+
+        let downtime = 0;
+
+        for (let row of downtimeList) {
+            let value = parseInt(row.duration)
+            let time = row.time
+
+            // Handle if heartbeat duration longer than the target duration
+            // e.g.   Heartbeat duration = 28hrs, but target duration = 24hrs
+            if (value <= sec) {
+                downtime += value;
+            } else {
+                console.log("Now: " + dayjs.utc());
+                console.log("Time: " + dayjs(time))
+
+                let trim = dayjs.utc().diff(dayjs(time), 'second');
+                console.log("trim: " + trim);
+                value = sec - trim;
+
+                if (value < 0) {
+                    value = 0;
+                }
+                downtime += value;
+            }
+        }
 
-        let sec = duration * 3600;
         let uptime = (sec - downtime) / sec;
 
+        if (uptime < 0) {
+            uptime = 0;
+        }
+
         io.to(userID).emit("uptime", monitorID, duration, uptime);
     }
 }

server/ping-lite.js

@@ -0,0 +1,118 @@
+// https://github.com/ben-bradley/ping-lite/blob/master/ping-lite.js
+// Fixed on Windows
+
+var 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);
+
+module.exports = Ping;
+
+function Ping(host, options) {
+    if (!host)
+        throw new Error('You must specify a host to ping!');
+
+    this._host = host;
+    this._options = options = (options || {});
+
+    events.EventEmitter.call(this);
+
+    if (WIN) {
+        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
+    }
+    else if (MAC) {
+        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.');
+    }
+
+    if (!fs.existsSync(this._bin))
+        throw new Error('Could not detect '+this._bin+' on your system');
+
+    this._i = 0;
+
+    return this;
+}
+
+Ping.prototype.__proto__ = events.EventEmitter.prototype;
+
+// SEND A PING
+// ===========
+Ping.prototype.send = function(callback) {
+    var self = this;
+    callback = callback || function(err, ms) {
+        if (err) return self.emit('error', err);
+        else     return self.emit('result', ms);
+    };
+
+    var _ended, _exited, _errored;
+
+    this._ping = spawn(this._bin, this._args); // spawn the binary
+
+    this._ping.on('error', function(err) { // handle binary errors
+        _errored = true;
+        callback(err);
+    });
+
+    this._ping.stdout.on('data', function(data) { // log stdout
+        this._stdout = (this._stdout || '') + data;
+    });
+
+    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._stderr = (this._stderr || '') + data;
+    });
+
+    this._ping.on('exit', function(code) { // handle complete
+        _exited = true;
+        if (_ended && !_errored) onEnd.call(self._ping);
+    });
+
+    function onEnd() {
+        var stdout = this.stdout._stdout,
+            stderr = this.stderr._stderr,
+            ms;
+
+        if (stderr)
+            return callback(new Error(stderr));
+        else if (!stdout)
+            return callback(new Error('No stdout detected'));
+
+        ms = stdout.match(self._regmatch); // parse out the ##ms response
+        ms = (ms && ms[1]) ? Number(ms[1]) : ms;
+
+        callback(null, ms);
+    }
+};
+
+// CALL Ping#send(callback) ON A TIMER
+// ===================================
+Ping.prototype.start = function(callback) {
+    var self = this;
+    this._i = setInterval(function() {
+        self.send(callback);
+    }, (self._options.interval || 5000));
+    self.send(callback);
+};
+
+// STOP SENDING PINGS
+// ==================
+Ping.prototype.stop = function() {
+    clearInterval(this._i);
+};

server/util-server.js

@@ -1,4 +1,5 @@
 const tcpp = require('tcp-ping');
+const Ping = require("./ping-lite");
 
 exports.tcping = function (hostname, port) {
     return new Promise((resolve, reject) => {
@@ -20,3 +21,19 @@ exports.tcping = function (hostname, port) {
         });
     });
 }
+
+exports.ping = function (hostname) {
+    return new Promise((resolve, reject) => {
+        const ping = new Ping(hostname);
+
+        ping.send(function(err, ms) {
+            if (err) {
+                reject(err)
+            } else if (ms === null) {
+                reject(new Error("timeout"))
+            } else {
+                resolve(Math.round(ms))
+            }
+        });
+    });
+}

src/components/CountUp.vue

@@ -48,7 +48,7 @@ export default {
             let frames = 12;
             let step = Math.floor(diff / frames);
 
-            if (! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
+            if (isNaN(step) || ! this.isNum || (diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
                 // Lazy to NOT this condition, hahaha.
             } else {
                 for (let i = 1; i < frames; i++) {

src/components/Uptime.vue

@@ -18,7 +18,7 @@ export default {
 
             let key = this.monitor.id + "_" + this.type;
 
-            if (this.$root.uptimeList[key]) {
+            if (this.$root.uptimeList[key] !== undefined) {
                 return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
             } else {
                 return "N/A"

src/pages/DashboardHome.vue

@@ -5,60 +5,6 @@
 
         <div class="shadow-box big-padding text-center">
             <div class="row">
-
-                <div class="col-12">
-                    <div class="hp-bar-big">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                    </div>
-                </div>
-
             	<div class="col">
                     <h3>Up</h3>
                     <span class="num">{{ stats.up }}</span>
@@ -76,32 +22,43 @@
                     <span class="num text-secondary">{{ stats.pause }}</span>
                 </div>
             </div>
+            <div class="row" v-if="false">
+                <div class="col-3">
+                    <h3>Uptime</h3>
+                    <p>(24-hour)</p>
+                    <span class="num"></span>
+                </div>
+                <div class="col-3">
+                    <h3>Uptime</h3>
+                    <p>(30-day)</p>
+                    <span class="num"></span>
+                </div>
+            </div>
         </div>
 
-        <div class="row mt-4">
+        <div class="shadow-box" style="margin-top: 25px;">
-        	<div class="col-8">
+            <table class="table table-borderless table-hover">
-                <h4>Latest Incident</h4>
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Status</th>
+                    <th>DateTime</th>
+                    <th>Message</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="beat in importantHeartBeatList">
+                    <td>{{ beat.name }}</td>
+                    <td><Status :status="beat.status" /></td>
+                    <td><Datetime :value="beat.time" /></td>
+                    <td>{{ beat.msg }}</td>
+                </tr>
 
-                <div class="shadow-box bg-danger text-light">
+                <tr v-if="importantHeartBeatList.length === 0">
-                    MySQL was down.
+                    <td colspan="4">No important events</td>
-                </div>
+                </tr>
-
+                </tbody>
-                <div class="shadow-box bg-primary text-light">
+            </table>
-                    No issues was found.
-                </div>
-
-            </div>
-        	<div class="col-4">
-
-                <h4>Overall Uptime</h4>
-
-                <div class="shadow-box">
-                    <div>100.00% (24 hours)</div>
-                    <div>100.00% (7 days)</div>
-                    <div>100.00% (30 days)</div>
-                </div>
-
-            </div>
         </div>
     </div>
 
@@ -109,7 +66,10 @@
 </template>
 
 <script>
+import Status from "../components/Status.vue";
+import Datetime from "../components/Datetime.vue";
 export default {
+    components: {Datetime, Status},
     computed: {
         stats() {
             let result = {
@@ -140,6 +100,25 @@ export default {
 
             return result;
         },
+
+        importantHeartBeatList() {
+            let result = [];
+
+            for (let monitorID in this.$root.importantHeartbeatList) {
+                let list =  this.$root.importantHeartbeatList[monitorID]
+                result = result.concat(list);
+            }
+
+            for (let beat of result) {
+                let monitor = this.$root.monitorList[beat.monitorID];
+
+                if (monitor) {
+                    beat.name = monitor.name
+                }
+            }
+
+            return result;
+        }
     }
 }
 </script>
@@ -151,5 +130,18 @@ export default {
     font-size: 30px;
     color: $primary;
     font-weight: bold;
+    display: block;
+}
+
+.shadow-box {
+    padding: 20px;
+}
+
+table {
+    font-size: 14px;
+
+    tr {
+        transition: all ease-in-out 0.2ms;
+    }
 }
 </style>

src/pages/Details.vue

@@ -2,7 +2,8 @@
     <h1> {{ monitor.name }}</h1>
     <p class="url">
         <a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a>
-        <span v-if="monitor.type === 'port'">{{ monitor.hostname }}:{{ monitor.port }}</span>
+        <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
+        <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
     </p>
 
     <div class="functions">

src/pages/EditMonitor.vue

@@ -27,22 +27,19 @@
                         <input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
                     </div>
 
-                    <template v-if="monitor.type === 'port' ">
+                    <div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
-                        <div class="mb-3">
+                        <label for="hostname" class="form-label">Hostname</label>
-                            <label for="hostname" class="form-label">Hostname</label>
+                        <input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
-                            <input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
+                    </div>
-                        </div>
-
-                        <div class="mb-3">
-                            <label for="port" class="form-label">Port</label>
-                            <input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535">
-                        </div>
-                    </template>
 
+                    <div class="mb-3" v-if="monitor.type === 'port' ">
+                        <label for="port" class="form-label">Port</label>
+                        <input type="number" class="form-control" id="port" v-model="monitor.port" required min="0" max="65535" step="1">
+                    </div>
 
                     <div class="mb-3">
                         <label for="interval" class="form-label">Heartbeat Interval (Every {{ monitor.interval }} seconds)</label>
-                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20">
+                        <input type="number" class="form-control" id="interval" v-model="monitor.interval" required min="20" step="1">
                     </div>
 
                     <div>