implement tcping

package-lock.json

@@ -3208,6 +3208,11 @@
       "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.1.tgz",
       "integrity": "sha512-6usSlV9KyHsspvwu2duKH+FMUhqJnAh6J5J/4MITl8s94iSUQTLkJggdiewKv4RyARQccnigV48Z+khiuVZDJw=="
     },
+    "tcp-ping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/tcp-ping/-/tcp-ping-0.1.1.tgz",
+      "integrity": "sha1-At1/QrW/fXy3jVt6rO+hVf2PfAw="
+    },
     "tildify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/tildify/-/tildify-2.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
         "redbean-node": "0.0.20",
         "socket.io": "^4.0.2",
         "socket.io-client": "^4.1.2",
+        "tcp-ping": "^0.1.1",
         "vue": "^3.0.5",
         "vue-confirm-dialog": "^1.0.2",
         "vue-router": "^4.0.10",

server/model/monitor.js

@@ -1,9 +1,11 @@
+
 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} = require("../util-server");
 const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
 
@@ -20,6 +22,8 @@ class Monitor extends BeanModel {
             id: this.id,
             name: this.name,
             url: this.url,
+            hostname: this.hostname,
+            port: this.port,
             weight: this.weight,
             active: this.active,
             type: this.type,
@@ -59,6 +63,10 @@ class Monitor extends BeanModel {
                     bean.msg = `${res.status} - ${res.statusText}`
                     bean.ping = dayjs().valueOf() - startTime;
                     bean.status = 1;
+
+                } else if (this.type === "port") {
+                    bean.ping = await tcping(this.hostname, this.port);
+                    bean.status = 1;
                 }
 
             } catch (error) {
@@ -74,9 +82,8 @@ class Monitor extends BeanModel {
 
             io.to(this.user_id).emit("heartbeat", bean.toJSON());
 
-            Monitor.sendStats(io, this.id, this.user_id)
-
             await R.store(bean)
+            Monitor.sendStats(io, this.id, this.user_id)
 
             previousBeat = bean;
         }

server/server.js

@@ -145,6 +145,8 @@ let monitorList = {};
                 bean.type = monitor.type
                 bean.url = monitor.url
                 bean.interval = monitor.interval
+                bean.hostname = monitor.hostname;
+                bean.port = monitor.port;
 
                 await R.store(bean)
 

server/util-server.js

@@ -0,0 +1,22 @@
+const tcpp = require('tcp-ping');
+
+exports.tcping = function (hostname, port) {
+    return new Promise((resolve, reject) => {
+        tcpp.ping({
+            address: hostname,
+            port: port,
+            attempts: 1,
+        }, function(err, data) {
+
+            if (err) {
+                reject(err);
+            }
+
+            if (data.results.length >= 1 && data.results[0].err) {
+                reject(data.results[0].err);
+            }
+
+            resolve(Math.round(data.max));
+        });
+    });
+}

src/components/CountUp.vue

@@ -48,7 +48,7 @@ export default {
             let frames = 12;
             let step = Math.floor(diff / frames);
 
-            if ((diff > 0 && step < 1) || (diff < 0 && step > 1) || diff === 0) {
+            if (! 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/pages/Details.vue

@@ -1,6 +1,9 @@
 <template>
     <h1> {{ monitor.name }}</h1>
-    <p class="url"><a :href="monitor.url" target="_blank" v-if="monitor.type === 'http'">{{ monitor.url }}</a></p>
+    <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>
+    </p>
 
     <div class="functions">
         <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>

src/pages/EditMonitor.vue

@@ -22,11 +22,24 @@
                         <input type="text" class="form-control" id="name" v-model="monitor.name" required>
                     </div>
 
-                    <div class="mb-3">
+                    <div class="mb-3" v-if="monitor.type === 'http' ">
                         <label for="url" class="form-label">URL</label>
                         <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">
+                            <label for="hostname" class="form-label">Hostname</label>
+                            <input type="text" class="form-control" id="hostname" v-model="monitor.hostname" required>
+                        </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">
                         <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">