Add slow response events to details dashboard

db/knex_migrations/2023-11-10-slow-response-visual-improvements.js

@@ -4,6 +4,8 @@ exports.up = function (knex) {
         .alterTable("heartbeat", function (table) {
             table.integer("ping_status").nullable().defaultTo(null);
             table.integer("ping_threshold").nullable().defaultTo(null);
+            table.boolean("ping_important").notNullable().defaultTo(0);
+            table.string("ping_msg").nullable().defaultTo(null);
         });
 };
 
@@ -13,5 +15,7 @@ exports.down = function (knex) {
         .alterTable("heartbeat", function (table) {
             table.dropColumn("ping_status");
             table.dropColumn("ping_threshold");
+            table.dropColumn("ping_important");
+            table.dropColumn("ping_msg");
         });
 };

server/model/heartbeat.js

@@ -38,6 +38,8 @@ class Heartbeat extends BeanModel {
             duration: this.duration,
             pingThreshold: this.ping_threshold,
             pingStatus: this.ping_status,
+            pingImportant: this.ping_important,
+            pingMsg: this.ping_msg,
         };
     }
 

server/model/monitor.js

@@ -1518,7 +1518,6 @@ class Monitor extends BeanModel {
         // Create stats to append to messages/logs
         const methodDescription = [ "average", "max" ].includes(method) ? `${method} of ${windowDuration}s` : method;
         let msgStats = `Response: ${actualResponseTime}ms (${methodDescription}) | Threshold: ${threshold}ms (${thresholdDescription})`;
-        // Add window duration for methods that make sense
 
         // Verify valid response time was calculated
         if (actualResponseTime === 0 || !Number.isInteger(actualResponseTime)) {
@@ -1544,6 +1543,10 @@ class Monitor extends BeanModel {
                 log.debug("monitor", `[${this.name}] Returned to normal response time | ${msgStats}`);
                 let msg = `[${this.name}] Returned to Normal Response Time \n${msgStats}`;
                 Monitor.sendSlowResponseNotification(monitor, bean, msg);
+
+                // Mark important (SLOW -> NOMINAL)
+                bean.pingImportant = true;
+                bean.pingMsg = msgStats;
             }
 
             // Reset slow response count
@@ -1559,6 +1562,11 @@ class Monitor extends BeanModel {
                 log.debug("monitor", `[${this.name}] Responded slowly, sending notification | ${msgStats}`);
                 let msg = `[${this.name}] Responded Slowly \n${msgStats}`;
                 Monitor.sendSlowResponseNotification(monitor, bean, msg);
+
+                // Mark important (NOMINAL -> SLOW)
+                bean.pingImportant = true;
+                bean.pingMsg = msgStats;
+
             // Send notification every x times
             } else if (this.slowResponseNotificationResendInterval > 0) {
                 if (((bean.slowResponseCount) % this.slowResponseNotificationResendInterval) === 0) {

server/server.js

@@ -1193,10 +1193,14 @@ let needSetup = false;
                 let count;
                 if (monitorID == null) {
                     count = await R.count("heartbeat", "important = 1");
+                    count += await R.count("heartbeat", "ping_important = 1");
                 } else {
                     count = await R.count("heartbeat", "monitor_id = ? AND important = 1", [
                         monitorID,
                     ]);
+                    count += await R.count("heartbeat", "monitor_id = ? AND ping_important = 1", [
+                        monitorID,
+                    ]);
                 }
 
                 callback({
@@ -1218,7 +1222,7 @@ let needSetup = false;
                 let list;
                 if (monitorID == null) {
                     list = await R.find("heartbeat", `
-                        important = 1
+                        important = 1 OR ping_important = 1
                         ORDER BY time DESC
                         LIMIT ?
                         OFFSET ?
@@ -1229,7 +1233,7 @@ let needSetup = false;
                 } else {
                     list = await R.find("heartbeat", `
                         monitor_id = ?
-                        AND important = 1
+                        AND (important = 1 OR ping_important = 1)
                         ORDER BY time DESC
                         LIMIT ?
                         OFFSET ?

src/components/Status.vue

@@ -30,6 +30,14 @@ export default {
                 return "maintenance";
             }
 
+            if (this.status === 4) {
+                return "warning";
+            }
+
+            if (this.status === 5) {
+                return "primary";
+            }
+
             return "secondary";
         },
 
@@ -50,6 +58,14 @@ export default {
                 return this.$t("statusMaintenance");
             }
 
+            if (this.status === 4) {
+                return this.$t("Slow");
+            }
+
+            if (this.status === 5) {
+                return this.$t("Nominal");
+            }
+
             return this.$t("Unknown");
         },
     },

src/pages/Details.vue

@@ -219,9 +219,11 @@
                     </thead>
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
-                            <td><Status :status="beat.status" /></td>
+                            <td v-if="beat.important"><Status :status="beat.status" /></td>
+                            <td v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
-                            <td class="border-0">{{ beat.msg }}</td>
+                            <td v-if="beat.important" class="border-0">{{ beat.msg }}</td>
+                            <td v-if="beat.pingImportant" class="border-0">{{ beat.pingMsg }}</td>
                         </tr>
 
                         <tr v-if="importantHeartBeatListLength === 0">

src/util.js

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

src/util.ts

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