Add Slow display to monitor dashboard

server/model/monitor.js

@@ -2,7 +2,7 @@ const https = require("https");
 const dayjs = require("dayjs");
 const axios = require("axios");
 const { Prometheus } = require("../prometheus");
-const { log, UP, DOWN, PENDING, MAINTENANCE, flipStatus, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND,
+const { log, UP, DOWN, PENDING, MAINTENANCE, NOMINAL, SLOW, flipStatus, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND,
     SQL_DATETIME_FORMAT
 } = require("../../src/util");
 const { tcping, ping, checkCertificate, checkStatusCode, getTotalClientInRoom, setting, mssqlQuery, postgresQuery, mysqlQuery, mqttAsync, setSetting, httpNtlm, radius, grpcQuery,
@@ -29,6 +29,9 @@ const { UptimeCalculator } = require("../uptime-calculator");
  *      1 = UP
  *      2 = PENDING
  *      3 = MAINTENANCE
+ *  pingStatus:
+ *      0 = SLOW
+ *      1 = NOMINAL
  */
 class Monitor extends BeanModel {
 
@@ -1533,6 +1536,7 @@ class Monitor extends BeanModel {
 
         // Responding normally
         if (actualResponseTime < threshold) {
+            bean.pingStatus = NOMINAL;
             if (bean.slowResponseCount === 0) {
                 log.debug("monitor", `[${this.name}] Responding normally. No need to send slow response notification | ${msgStats}`);
             } else {
@@ -1547,6 +1551,7 @@ class Monitor extends BeanModel {
 
         // Responding slowly
         } else {
+            bean.pingStatus = SLOW;
             ++bean.slowResponseCount;
 
             // Always send first notification

src/mixins/socket.js

@@ -5,7 +5,7 @@ import Favico from "favico.js";
 import dayjs from "dayjs";
 import mitt from "mitt";
 
-import { DOWN, MAINTENANCE, PENDING, UP } from "../util.ts";
+import { DOWN, MAINTENANCE, PENDING, UP, SLOW, NOMINAL} from "../util.ts";
 import { getDevContainerServerHostname, isDevContainer, getToastSuccessTimeout, getToastErrorTimeout } from "../util-frontend.js";
 const toast = useToast();
 
@@ -737,6 +737,40 @@ export default {
             return result;
         },
 
+        pingStatusList() {
+            let result = {};
+
+            for (let monitorID in this.lastHeartbeatList) {
+                let lastHeartBeat = this.lastHeartbeatList[monitorID];
+
+                if (lastHeartBeat?.status === UP) {
+                    // TODO ping_status(1st) vs pingStatus(every other time)
+                    let pingStatus;
+                    if (lastHeartBeat.hasOwnProperty('ping_status')) {
+                        pingStatus = lastHeartBeat.ping_status;
+                    } else if (lastHeartBeat.hasOwnProperty('pingStatus')) {
+                        pingStatus = lastHeartBeat.pingStatus;
+                    }
+
+                    if (pingStatus === SLOW) {
+                        result[monitorID] = {
+                            text: this.$t("Slow"),
+                            color: "warning",
+                        };
+                    }
+                    // TODO Decide: currently only shows if "slow". Add the
+                    // code below else if we want to display "nominal" as well
+                    // else if (pingStatus === NOMINAL) {
+                    //     result[monitorID] = {
+                    //         text: this.$t("Nominal"),
+                    //         color: "primary",
+                    //     };
+                    // }
+                }
+            }
+            return result;
+        },
+
         stats() {
             let result = {
                 active: 0,

src/pages/Details.vue

@@ -71,7 +71,8 @@
                         <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
                     </div>
                     <div class="col-md-4 text-center">
-                        <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
+                        <span class="badge rounded-pill m1" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
+                        <span v-if="pingStatus" class="badge rounded-pill m-1" :class=" 'bg-' + pingStatus.color " style="font-size: 30px;">{{ pingStatus.text }}</span>
                     </div>
                 </div>
             </div>
@@ -363,6 +364,14 @@ export default {
             return { };
         },
 
+        pingStatus() {
+            if (this.$root.pingStatusList[this.monitor.id]) {
+                return this.$root.pingStatusList[this.monitor.id];
+            }
+
+            return { };
+        },
+
         tlsInfo() {
             // Add: this.$root.tlsInfoList[this.monitor.id].certInfo
             // Fix: TypeError: Cannot read properties of undefined (reading 'validTo')

src/util.js

@@ -18,6 +18,8 @@ exports.DOWN = 0;
 exports.UP = 1;
 exports.PENDING = 2;
 exports.MAINTENANCE = 3;
+exports.SLOW = 0;
+exports.NOMINAL = 1;
 exports.STATUS_PAGE_ALL_DOWN = 0;
 exports.STATUS_PAGE_ALL_UP = 1;
 exports.STATUS_PAGE_PARTIAL_DOWN = 2;

src/util.ts

@@ -22,6 +22,8 @@ export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;
 export const MAINTENANCE = 3;
+export const SLOW = 0;
+export const NOMINAL = 1;
 
 export const STATUS_PAGE_ALL_DOWN = 0;
 export const STATUS_PAGE_ALL_UP = 1;