From 2b7f5c571a029d14109eb65b4f8903599ad575e6 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Fri, 10 Nov 2023 16:22:24 -0700
Subject: [PATCH 01/23] Add threshold line to ping chart

---
 ...11-10-slow-response-visual-improvements.js | 17 +++++++++
 package.json                                  |  1 +
 server/model/heartbeat.js                     |  2 +
 server/model/monitor.js                       |  2 +
 src/components/PingChart.vue                  | 37 ++++++++++++++++++-
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 db/knex_migrations/2023-11-10-slow-response-visual-improvements.js

diff --git a/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js b/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js
new file mode 100644
index 000000000..05fc950bd
--- /dev/null
+++ b/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js
@@ -0,0 +1,17 @@
+exports.up = function (knex) {
+    // add various slow response parameters
+    return knex.schema
+        .alterTable("heartbeat", function (table) {
+            table.integer("ping_status").nullable().defaultTo(null);
+            table.integer("ping_threshold").nullable().defaultTo(null);
+        });
+};
+
+exports.down = function (knex) {
+    // remove various slow response parameters
+    return knex.schema
+        .alterTable("heartbeat", function (table) {
+            table.dropColumn("ping_status");
+            table.dropColumn("ping_threshold");
+        });
+};
diff --git a/package.json b/package.json
index f11712658..7121e2f24 100644
--- a/package.json
+++ b/package.json
@@ -152,6 +152,7 @@
         "bootstrap": "5.1.3",
         "chart.js": "~4.2.1",
         "chartjs-adapter-dayjs-4": "~1.0.4",
+        "chartjs-plugin-annotation": "~3.0.1",
         "concurrently": "^7.1.0",
         "core-js": "~3.26.1",
         "cronstrue": "~2.24.0",
diff --git a/server/model/heartbeat.js b/server/model/heartbeat.js
index cc86ef634..f9eae4ed2 100644
--- a/server/model/heartbeat.js
+++ b/server/model/heartbeat.js
@@ -36,6 +36,8 @@ class Heartbeat extends BeanModel {
             ping: this.ping,
             important: this.important,
             duration: this.duration,
+            pingThreshold: this.ping_threshold,
+            pingStatus: this.ping_status,
         };
     }
 
diff --git a/server/model/monitor.js b/server/model/monitor.js
index b6b3ee933..c6bde39be 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -1529,6 +1529,8 @@ class Monitor extends BeanModel {
             return;
         }
 
+        bean.pingThreshold = threshold;
+
         // Responding normally
         if (actualResponseTime < threshold) {
             if (bean.slowResponseCount === 0) {
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index c550b4b4f..9f4e89e0b 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -19,11 +19,12 @@
 <script lang="js">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
 import "chartjs-adapter-dayjs-4";
+import annotationPlugin from "chartjs-plugin-annotation";
 import dayjs from "dayjs";
 import { Line } from "vue-chartjs";
 import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";
 
-Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
+Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler, annotationPlugin);
 
 export default {
     components: { Line },
@@ -56,6 +57,22 @@ export default {
         };
     },
     computed: {
+        threshold() {
+            let heartbeatList = this.heartbeatList ||
+             (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
+             [];
+
+            let lastBeat = heartbeatList.at(-1);
+            // TODO: Simplify? When page loads, lastBeat contains ping_threshold,
+            // but after the following heartbeat it has pingThreshold.
+            if (lastBeat?.hasOwnProperty('pingThreshold')) {
+                return lastBeat.pingThreshold;
+            } else if (lastBeat?.hasOwnProperty('ping_threshold')) {
+                return lastBeat.ping_threshold;
+            } else {
+                return undefined;
+            }
+        },
         chartOptions() {
             return {
                 responsive: true,
@@ -120,6 +137,8 @@ export default {
                         grid: {
                             color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
                         },
+                        /* min: 0, */
+                        /* max: 1000, */
                     },
                     y1: {
                         display: false,
@@ -153,6 +172,22 @@ export default {
                     legend: {
                         display: false,
                     },
+                    annotation: {
+                        /* drawTime: 'afterDraw', */
+                        annotations:{
+                            line1: {
+                                type: 'line',
+                                mode: 'horizontal',
+                                scaleID: 'y',
+                                value: this.threshold,
+                                endValue: this.threshold,
+                                borderColor: 'rgba(248,163,6,1.0)',
+                                borderWith: 2,
+                                borderDash: [1, 3],
+                                display: this.threshold !== undefined,
+                            }
+                        }
+                    },
                 },
             };
         },

From d9e787b36d754306d3a6ce7dc5b569c1fa855253 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Sat, 11 Nov 2023 22:28:03 -0700
Subject: [PATCH 02/23] Fix threshold line autoscaling y-axis range

---
 src/components/PingChart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9f4e89e0b..ee080a4fb 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -184,6 +184,7 @@ export default {
                                 borderColor: 'rgba(248,163,6,1.0)',
                                 borderWith: 2,
                                 borderDash: [1, 3],
+                                adjustScaleRange: false,
                                 display: this.threshold !== undefined,
                             }
                         }

From 6228ef1be422008630e5a793dcddc982099f6cbe Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 13 Nov 2023 16:39:20 -0700
Subject: [PATCH 03/23] Add `Slow` display to monitor dashboard

---
 server/model/monitor.js |  7 ++++++-
 src/mixins/socket.js    | 36 +++++++++++++++++++++++++++++++++++-
 src/pages/Details.vue   | 11 ++++++++++-
 src/util.js             |  2 ++
 src/util.ts             |  2 ++
 5 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/server/model/monitor.js b/server/model/monitor.js
index c6bde39be..058ee1817 100644
--- a/server/model/monitor.js
+++ b/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
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index bbb06658e..ea67c90a3 100644
--- a/src/mixins/socket.js
+++ b/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,
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 20c8aa13a..65cdd7169 100644
--- a/src/pages/Details.vue
+++ b/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')
diff --git a/src/util.js b/src/util.js
index f6ed5cd99..9f64161a2 100644
--- a/src/util.js
+++ b/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;
diff --git a/src/util.ts b/src/util.ts
index 0f8981102..0efeb7fbb 100644
--- a/src/util.ts
+++ b/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;

From ecbd105343e59db32ddf06c360d554d409f5cb8b Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 13 Nov 2023 23:17:16 -0700
Subject: [PATCH 04/23] Add slow response events to details dashboard

---
 ...23-11-10-slow-response-visual-improvements.js |  4 ++++
 server/model/heartbeat.js                        |  2 ++
 server/model/monitor.js                          | 10 +++++++++-
 server/server.js                                 |  8 ++++++--
 src/components/Status.vue                        | 16 ++++++++++++++++
 src/pages/Details.vue                            |  6 ++++--
 src/util.js                                      |  4 ++--
 src/util.ts                                      |  4 ++--
 8 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js b/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js
index 05fc950bd..d85e1cfd9 100644
--- a/db/knex_migrations/2023-11-10-slow-response-visual-improvements.js
+++ b/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");
         });
 };
diff --git a/server/model/heartbeat.js b/server/model/heartbeat.js
index f9eae4ed2..0084f49a3 100644
--- a/server/model/heartbeat.js
+++ b/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,
         };
     }
 
diff --git a/server/model/monitor.js b/server/model/monitor.js
index 058ee1817..de0c8b616 100644
--- a/server/model/monitor.js
+++ b/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) {
diff --git a/server/server.js b/server/server.js
index 6f55ef888..477fe761a 100644
--- a/server/server.js
+++ b/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 ?
diff --git a/src/components/Status.vue b/src/components/Status.vue
index 92ed8a6b0..0a4960007 100644
--- a/src/components/Status.vue
+++ b/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");
         },
     },
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 65cdd7169..1dff7bcb1 100644
--- a/src/pages/Details.vue
+++ b/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">
diff --git a/src/util.js b/src/util.js
index 9f64161a2..ce0a95bf8 100644
--- a/src/util.js
+++ b/src/util.js
@@ -18,8 +18,8 @@ exports.DOWN = 0;
 exports.UP = 1;
 exports.PENDING = 2;
 exports.MAINTENANCE = 3;
-exports.SLOW = 0;
-exports.NOMINAL = 1;
+exports.SLOW = 4;
+exports.NOMINAL = 5;
 exports.STATUS_PAGE_ALL_DOWN = 0;
 exports.STATUS_PAGE_ALL_UP = 1;
 exports.STATUS_PAGE_PARTIAL_DOWN = 2;
diff --git a/src/util.ts b/src/util.ts
index 0efeb7fbb..c0341a076 100644
--- a/src/util.ts
+++ b/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 NOMINAL = 1;
+export const SLOW = 4;
+export const NOMINAL = 5;
 
 export const STATUS_PAGE_ALL_DOWN = 0;
 export const STATUS_PAGE_ALL_UP = 1;

From c503d12a4a6d417450fc67245537aab03c11bb49 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 13 Nov 2023 23:22:23 -0700
Subject: [PATCH 05/23] Add slow response events to dashboard home

---
 src/pages/DashboardHome.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 3baf35a62..ccbb90b9f 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -43,9 +43,11 @@
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
-                            <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">

From 1870b5c9d613eeeb781dfca0cc13f771458fba65 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 13 Nov 2023 23:30:38 -0700
Subject: [PATCH 06/23] Fix: Clear Events clears slow response events too

---
 server/server.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/server/server.js b/server/server.js
index 477fe761a..040de225f 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1446,7 +1446,9 @@ let needSetup = false;
 
                 log.info("manage", `Clear Events Monitor: ${monitorID} User ID: ${socket.userID}`);
 
-                await R.exec("UPDATE heartbeat SET msg = ?, important = ? WHERE monitor_id = ? ", [
+                await R.exec("UPDATE heartbeat SET msg = ?, important = ?, ping_msg = ?, ping_important = ? WHERE monitor_id = ? ", [
+                    "",
+                    "0",
                     "",
                     "0",
                     monitorID,

From a453e3c273a1f24eb7b4c4df8d8ef39d82b97c42 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 13:03:14 -0700
Subject: [PATCH 07/23] Fix for important & pingImportant both true

---
 src/pages/DashboardHome.vue | 13 ++++++++-----
 src/pages/Details.vue       | 12 ++++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index ccbb90b9f..8aa0ead0f 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -43,13 +43,16 @@
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
-                            <td v-if="beat.important"><Status :status="beat.status" /></td>
-                            <td v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></td>
+                            <td>
+                                <div v-if="beat.important"><Status :status="beat.status" /></div>
+                                <div v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></div>
+                            </td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
-                            <td v-if="beat.important" class="border-0">{{ beat.msg }}</td>
-                            <td v-if="beat.pingImportant" class="border-0">{{ beat.pingMsg }}</td>
+                            <td class="border-0">
+                                <div v-if="beat.important">{{ beat.msg }}</div>
+                                <div v-if="beat.pingImportant">{{ beat.pingMsg }}</div>
+                            </td>
                         </tr>
-
                         <tr v-if="importantHeartBeatListLength === 0">
                             <td colspan="4">
                                 {{ $t("No important events") }}
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 1dff7bcb1..c06689e93 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -219,11 +219,15 @@
                     </thead>
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
-                            <td v-if="beat.important"><Status :status="beat.status" /></td>
-                            <td v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></td>
+                            <td>
+                                <div v-if="beat.important"><Status :status="beat.status" /></div>
+                                <div v-if="beat.pingImportant"><Status :status="beat.pingStatus" /></div>
+                            </td>
                             <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
-                            <td v-if="beat.important" class="border-0">{{ beat.msg }}</td>
-                            <td v-if="beat.pingImportant" class="border-0">{{ beat.pingMsg }}</td>
+                            <td class="border-0">
+                                <div v-if="beat.important">{{ beat.msg }}</div>
+                                <div v-if="beat.pingImportant">{{ beat.pingMsg }}</div>
+                            </td>
                         </tr>
 
                         <tr v-if="importantHeartBeatListLength === 0">

From 6c0aaaab7e8942eed53907abba449cbc01d10bf1 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 13:16:43 -0700
Subject: [PATCH 08/23] Add Slow to Dashboard Quick Stats

---
 src/mixins/socket.js        | 5 +++++
 src/pages/DashboardHome.vue | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index ea67c90a3..07ce0f70e 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -776,6 +776,7 @@ export default {
                 active: 0,
                 up: 0,
                 down: 0,
+                slow: 0,
                 maintenance: 0,
                 pending: 0,
                 unknown: 0,
@@ -801,6 +802,10 @@ export default {
                     } else {
                         result.unknown++;
                     }
+
+                    if (beat.pingStatus === SLOW) {
+                        results.slow++;
+                    }
                 } else {
                     result.unknown++;
                 }
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 8aa0ead0f..274ace105 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -15,6 +15,10 @@
                         <h3>{{ $t("Down") }}</h3>
                         <span class="num text-danger">{{ $root.stats.down }}</span>
                     </div>
+                    <div class="col">
+                        <h3>{{ $t("Slow") }}</h3>
+                        <span class="num text-warning">{{ $root.stats.slow }}</span>
+                    </div>
                     <div class="col">
                         <h3>{{ $t("Maintenance") }}</h3>
                         <span class="num text-maintenance">{{ $root.stats.maintenance }}</span>

From 06c22eb336e01b206e40e739dd94c686a31b4186 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 13:55:37 -0700
Subject: [PATCH 09/23] Fix slow response status messages auto show up now

---
 server/server.js     |  8 ++------
 src/mixins/socket.js | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/server/server.js b/server/server.js
index 040de225f..4aa8ced11 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1192,13 +1192,9 @@ let needSetup = false;
 
                 let count;
                 if (monitorID == null) {
-                    count = await R.count("heartbeat", "important = 1");
-                    count += await R.count("heartbeat", "ping_important = 1");
+                    count = await R.count("heartbeat", "important = 1 OR 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", [
+                    count = await R.count("heartbeat", "monitor_id = ? AND (important = 1 OR ping_important = 1)", [
                         monitorID,
                     ]);
                 }
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 07ce0f70e..07e0f618a 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -205,6 +205,26 @@ export default {
 
                     this.emitter.emit("newImportantHeartbeat", data);
                 }
+
+                if (data.pingImportant) {
+
+                    // TODO Do we want slow response toast messages?
+                    // if (this.monitorList[data.monitorID] !== undefined) {
+                    //     if (data.pingStatus === SLOW) {
+                    //         toast.error(`[${this.monitorList[data.monitorID].name}] [SLOW] ${data.pingMsg}`, {
+                    //             timeout: getToastErrorTimeout(),
+                    //         });
+                    //     } else if (data.pingStatus === NOMINAL) {
+                    //         toast.success(`[${this.monitorList[data.monitorID].name}] [NOMINAL] ${data.pingMsg}`, {
+                    //             timeout: getToastSuccessTimeout(),
+                    //         });
+                    //     } else {
+                    //         toast(`[${this.monitorList[data.monitorID].name}] ${data.pingMsg}`);
+                    //     }
+                    // }
+
+                    this.emitter.emit("newImportantHeartbeat", data);
+                }
             });
 
             socket.on("heartbeatList", (monitorID, data, overwrite = false) => {

From cabc458883cd36bfc133d247aa30e43195f4e943 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 14:00:04 -0700
Subject: [PATCH 10/23] Fix "slow" quick stats calculation

---
 src/mixins/socket.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 07e0f618a..59fb0fec4 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -823,8 +823,16 @@ export default {
                         result.unknown++;
                     }
 
-                    if (beat.pingStatus === SLOW) {
-                        results.slow++;
+                    // TODO ping_status(1st) vs pingStatus(every other time)
+                    let pingStatus;
+                    if (beat.hasOwnProperty('ping_status')) {
+                        pingStatus = beat.ping_status;
+                    } else if (beat.hasOwnProperty('pingStatus')) {
+                        pingStatus = beat.pingStatus;
+                    }
+
+                    if (pingStatus === SLOW) {
+                        result.slow++;
                     }
                 } else {
                     result.unknown++;

From b2aa549f509ea35d5d285d78677a8ef094a0557a Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 14:28:41 -0700
Subject: [PATCH 11/23] Add slow response toast messages

---
 src/mixins/socket.js | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 59fb0fec4..1f81e088a 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -186,6 +186,10 @@ export default {
                 }
 
                 // Add to important list if it is important
+                if (data.important || data.pingImportant) {
+                    this.emitter.emit("newImportantHeartbeat", data);
+                }
+
                 // Also toast
                 if (data.important) {
 
@@ -202,28 +206,23 @@ export default {
                             toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
                         }
                     }
-
-                    this.emitter.emit("newImportantHeartbeat", data);
                 }
 
                 if (data.pingImportant) {
 
-                    // TODO Do we want slow response toast messages?
-                    // if (this.monitorList[data.monitorID] !== undefined) {
-                    //     if (data.pingStatus === SLOW) {
-                    //         toast.error(`[${this.monitorList[data.monitorID].name}] [SLOW] ${data.pingMsg}`, {
-                    //             timeout: getToastErrorTimeout(),
-                    //         });
-                    //     } else if (data.pingStatus === NOMINAL) {
-                    //         toast.success(`[${this.monitorList[data.monitorID].name}] [NOMINAL] ${data.pingMsg}`, {
-                    //             timeout: getToastSuccessTimeout(),
-                    //         });
-                    //     } else {
-                    //         toast(`[${this.monitorList[data.monitorID].name}] ${data.pingMsg}`);
-                    //     }
-                    // }
-
-                    this.emitter.emit("newImportantHeartbeat", data);
+                    if (this.monitorList[data.monitorID] !== undefined) {
+                        if (data.pingStatus === SLOW) {
+                            toast.warning(`[${this.monitorList[data.monitorID].name}] [SLOW] ${data.pingMsg}`, {
+                                timeout: getToastErrorTimeout(),
+                            });
+                        } else if (data.pingStatus === NOMINAL) {
+                            toast.success(`[${this.monitorList[data.monitorID].name}] [NOMINAL] ${data.pingMsg}`, {
+                                timeout: getToastSuccessTimeout(),
+                            });
+                        } else {
+                            toast(`[${this.monitorList[data.monitorID].name}] ${data.pingMsg}`);
+                        }
+                    }
                 }
             });
 

From 533e5311b28e19bd9bc98441cb20b744456a3aaa Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 15:07:54 -0700
Subject: [PATCH 12/23] Adjust notification messagess

---
 server/model/monitor.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/server/model/monitor.js b/server/model/monitor.js
index de0c8b616..d7f977a38 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -1516,8 +1516,9 @@ class Monitor extends BeanModel {
         }
 
         // Create stats to append to messages/logs
-        const methodDescription = [ "average", "max" ].includes(method) ? `${method} of ${windowDuration}s` : method;
+        const methodDescription = [ "average", "max" ].includes(method) ? `${method} of last ${windowDuration}s` : method;
         let msgStats = `Response: ${actualResponseTime}ms (${methodDescription}) | Threshold: ${threshold}ms (${thresholdDescription})`;
+        let pingMsg = `${actualResponseTime}ms response (${methodDescription})`;
 
         // Verify valid response time was calculated
         if (actualResponseTime === 0 || !Number.isInteger(actualResponseTime)) {
@@ -1546,7 +1547,7 @@ class Monitor extends BeanModel {
 
                 // Mark important (SLOW -> NOMINAL)
                 bean.pingImportant = true;
-                bean.pingMsg = msgStats;
+                bean.pingMsg = pingMsg;
             }
 
             // Reset slow response count
@@ -1565,7 +1566,7 @@ class Monitor extends BeanModel {
 
                 // Mark important (NOMINAL -> SLOW)
                 bean.pingImportant = true;
-                bean.pingMsg = msgStats;
+                bean.pingMsg = pingMsg;
 
             // Send notification every x times
             } else if (this.slowResponseNotificationResendInterval > 0) {

From 71d0bd596aa8354764cf71ba3a5c6933662c385b Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 15:32:40 -0700
Subject: [PATCH 13/23] Fix class typo

---
 src/pages/Details.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index c06689e93..9975a55b3 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -71,7 +71,7 @@
                         <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
                     </div>
                     <div class="col-md-4 text-center">
-                        <span class="badge rounded-pill m1" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
+                        <span class="badge rounded-pill m-1" :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>

From 18f2056223f07219332b1f8f95ce4c47d9aa042d Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 16:37:39 -0700
Subject: [PATCH 14/23] Fixing a comment

---
 server/model/monitor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/model/monitor.js b/server/model/monitor.js
index dcf070c82..be607122e 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -32,8 +32,8 @@ const rootCertificates = rootCertificatesFingerprints();
  *      2 = PENDING
  *      3 = MAINTENANCE
  *  pingStatus:
- *      0 = SLOW
- *      1 = NOMINAL
+ *      4 = SLOW
+ *      5 = NOMINAL
  */
 class Monitor extends BeanModel {
 

From 263eecc455c454f21acfe3220e7ecbc860914967 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 17:22:57 -0700
Subject: [PATCH 15/23] lint fix

---
 src/components/PingChart.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index ee080a4fb..b34629ccc 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -65,9 +65,9 @@ export default {
             let lastBeat = heartbeatList.at(-1);
             // TODO: Simplify? When page loads, lastBeat contains ping_threshold,
             // but after the following heartbeat it has pingThreshold.
-            if (lastBeat?.hasOwnProperty('pingThreshold')) {
+            if (lastBeat?.hasOwnProperty("pingThreshold")) {
                 return lastBeat.pingThreshold;
-            } else if (lastBeat?.hasOwnProperty('ping_threshold')) {
+            } else if (lastBeat?.hasOwnProperty("ping_threshold")) {
                 return lastBeat.ping_threshold;
             } else {
                 return undefined;
@@ -174,16 +174,16 @@ export default {
                     },
                     annotation: {
                         /* drawTime: 'afterDraw', */
-                        annotations:{
+                        annotations: {
                             line1: {
-                                type: 'line',
-                                mode: 'horizontal',
-                                scaleID: 'y',
+                                type: "line",
+                                mode: "horizontal",
+                                scaleID: "y",
                                 value: this.threshold,
                                 endValue: this.threshold,
-                                borderColor: 'rgba(248,163,6,1.0)',
+                                borderColor: "rgba(248,163,6,1.0)",
                                 borderWith: 2,
-                                borderDash: [1, 3],
+                                borderDash: [ 1, 3 ],
                                 adjustScaleRange: false,
                                 display: this.threshold !== undefined,
                             }

From 2297645a3dbedc57fe0ad0359923913599933e08 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Tue, 14 Nov 2023 17:36:28 -0700
Subject: [PATCH 16/23] lint fix

---
 src/mixins/socket.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 1f81e088a..8ded9283e 100644
--- a/src/mixins/socket.js
+++ b/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, SLOW, NOMINAL} 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();
 
@@ -765,9 +765,9 @@ export default {
                 if (lastHeartBeat?.status === UP) {
                     // TODO ping_status(1st) vs pingStatus(every other time)
                     let pingStatus;
-                    if (lastHeartBeat.hasOwnProperty('ping_status')) {
+                    if (lastHeartBeat.hasOwnProperty("ping_status")) {
                         pingStatus = lastHeartBeat.ping_status;
-                    } else if (lastHeartBeat.hasOwnProperty('pingStatus')) {
+                    } else if (lastHeartBeat.hasOwnProperty("pingStatus")) {
                         pingStatus = lastHeartBeat.pingStatus;
                     }
 
@@ -824,9 +824,9 @@ export default {
 
                     // TODO ping_status(1st) vs pingStatus(every other time)
                     let pingStatus;
-                    if (beat.hasOwnProperty('ping_status')) {
+                    if (beat.hasOwnProperty("ping_status")) {
                         pingStatus = beat.ping_status;
-                    } else if (beat.hasOwnProperty('pingStatus')) {
+                    } else if (beat.hasOwnProperty("pingStatus")) {
                         pingStatus = beat.pingStatus;
                     }
 

From 20d5ded721246627517b8e1a364a383440276a00 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Wed, 15 Nov 2023 15:26:27 -0700
Subject: [PATCH 17/23] Fix: sendHeartbeatList now sends correct format

---
 server/client.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/client.js b/server/client.js
index d03065f36..3da6646fc 100644
--- a/server/client.js
+++ b/server/client.js
@@ -54,7 +54,7 @@ async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite =
         monitorID,
     ]);
 
-    let result = list.reverse();
+    let result = R.convertToBeans("heartbeat", list.reverse());
 
     if (toUser) {
         io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);

From ee53ded19e580f379cf60ca0a6187d6bb8615bb4 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Wed, 15 Nov 2023 15:38:10 -0700
Subject: [PATCH 18/23] Simplify logic due to bug fix

---
 server/model/heartbeat.js    |  3 +++
 src/components/PingChart.vue |  7 ++-----
 src/mixins/socket.js         | 28 ++--------------------------
 3 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/server/model/heartbeat.js b/server/model/heartbeat.js
index 0084f49a3..f18bbf17e 100644
--- a/server/model/heartbeat.js
+++ b/server/model/heartbeat.js
@@ -6,6 +6,9 @@ const { BeanModel } = require("redbean-node/dist/bean-model");
  *      1 = UP
  *      2 = PENDING
  *      3 = MAINTENANCE
+ * pingStatus:
+ *      3 = SLOW
+ *      4 = NOMINAL
  */
 class Heartbeat extends BeanModel {
 
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index b34629ccc..b667dc96a 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -63,12 +63,9 @@ export default {
              [];
 
             let lastBeat = heartbeatList.at(-1);
-            // TODO: Simplify? When page loads, lastBeat contains ping_threshold,
-            // but after the following heartbeat it has pingThreshold.
-            if (lastBeat?.hasOwnProperty("pingThreshold")) {
+
+            if (lastBeat) {
                 return lastBeat.pingThreshold;
-            } else if (lastBeat?.hasOwnProperty("ping_threshold")) {
-                return lastBeat.ping_threshold;
             } else {
                 return undefined;
             }
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 8ded9283e..0c20d41ad 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -763,28 +763,12 @@ export default {
                 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) {
+                    if (lastHeartBeat.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;
@@ -822,15 +806,7 @@ export default {
                         result.unknown++;
                     }
 
-                    // TODO ping_status(1st) vs pingStatus(every other time)
-                    let pingStatus;
-                    if (beat.hasOwnProperty("ping_status")) {
-                        pingStatus = beat.ping_status;
-                    } else if (beat.hasOwnProperty("pingStatus")) {
-                        pingStatus = beat.pingStatus;
-                    }
-
-                    if (pingStatus === SLOW) {
+                    if (beat.pingStatus === SLOW) {
                         result.slow++;
                     }
                 } else {

From 20d19706a774d2069b17d2e672470fe42e28c114 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Wed, 15 Nov 2023 15:47:00 -0700
Subject: [PATCH 19/23] oops, wrong numbers

---
 server/model/heartbeat.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/model/heartbeat.js b/server/model/heartbeat.js
index f18bbf17e..5b56a3628 100644
--- a/server/model/heartbeat.js
+++ b/server/model/heartbeat.js
@@ -7,8 +7,8 @@ const { BeanModel } = require("redbean-node/dist/bean-model");
  *      2 = PENDING
  *      3 = MAINTENANCE
  * pingStatus:
- *      3 = SLOW
- *      4 = NOMINAL
+ *      4 = SLOW
+ *      5 = NOMINAL
  */
 class Heartbeat extends BeanModel {
 

From d1af449079d9278ee9c68c6f818525b032ab3dec Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Wed, 15 Nov 2023 17:06:54 -0700
Subject: [PATCH 20/23] Add `Slow`/`Nominal` to en.json

---
 src/lang/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lang/en.json b/src/lang/en.json
index a5d0cb11c..1c010f62f 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -27,6 +27,8 @@
     "Pending": "Pending",
     "statusMaintenance": "Maintenance",
     "Maintenance": "Maintenance",
+    "Slow": "Slow",
+    "Nominal": "Nominal",
     "Unknown": "Unknown",
     "Cannot connect to the socket server": "Cannot connect to the socket server",
     "Reconnecting...": "Reconnecting...",

From 9cfaf9841a8376760c9f98db540fd89cbf9d51b5 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Wed, 15 Nov 2023 17:17:14 -0700
Subject: [PATCH 21/23] Add threshold to pingMsg

---
 server/model/monitor.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/server/model/monitor.js b/server/model/monitor.js
index be607122e..619078015 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -1565,7 +1565,7 @@ class Monitor extends BeanModel {
         // Create stats to append to messages/logs
         const methodDescription = [ "average", "max" ].includes(method) ? `${method} of last ${windowDuration}s` : method;
         let msgStats = `Response: ${actualResponseTime}ms (${methodDescription}) | Threshold: ${threshold}ms (${thresholdDescription})`;
-        let pingMsg = `${actualResponseTime}ms response (${methodDescription})`;
+        let pingMsg = `${actualResponseTime}ms resp. (${methodDescription})`;
 
         // Verify valid response time was calculated
         if (actualResponseTime === 0 || !Number.isInteger(actualResponseTime)) {
@@ -1593,6 +1593,7 @@ class Monitor extends BeanModel {
                 Monitor.sendSlowResponseNotification(monitor, bean, msg);
 
                 // Mark important (SLOW -> NOMINAL)
+                pingMsg += ` < ${threshold}ms`;
                 bean.pingImportant = true;
                 bean.pingMsg = pingMsg;
             }
@@ -1612,6 +1613,7 @@ class Monitor extends BeanModel {
                 Monitor.sendSlowResponseNotification(monitor, bean, msg);
 
                 // Mark important (NOMINAL -> SLOW)
+                pingMsg += ` > ${threshold}ms`;
                 bean.pingImportant = true;
                 bean.pingMsg = pingMsg;
 

From fc7884e4aef5473abccb5ee13a8988d008478ce8 Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 27 Nov 2023 13:37:16 -0700
Subject: [PATCH 22/23] Remove commented out code

---
 src/components/PingChart.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index b667dc96a..dd9db4e3f 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -134,8 +134,6 @@ export default {
                         grid: {
                             color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
                         },
-                        /* min: 0, */
-                        /* max: 1000, */
                     },
                     y1: {
                         display: false,
@@ -170,7 +168,6 @@ export default {
                         display: false,
                     },
                     annotation: {
-                        /* drawTime: 'afterDraw', */
                         annotations: {
                             line1: {
                                 type: "line",

From cbea6dea6080c2a606987569a945517ddd8cd62d Mon Sep 17 00:00:00 2001
From: Stephen Papierski <stephenpapierski@gmail.com>
Date: Mon, 27 Nov 2023 13:45:52 -0700
Subject: [PATCH 23/23] Update lock file

---
 package-lock.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index d5f1699f6..521bfe779 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,6 +95,7 @@
                 "bootstrap": "5.1.3",
                 "chart.js": "~4.2.1",
                 "chartjs-adapter-dayjs-4": "~1.0.4",
+                "chartjs-plugin-annotation": "~3.0.1",
                 "concurrently": "^7.1.0",
                 "core-js": "~3.26.1",
                 "cronstrue": "~2.24.0",
@@ -6069,6 +6070,15 @@
                 "dayjs": "^1.9.7"
             }
         },
+        "node_modules/chartjs-plugin-annotation": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.0.1.tgz",
+            "integrity": "sha512-hlIrXXKqSDgb+ZjVYHefmlZUXK8KbkCPiynSVrTb/HjTMkT62cOInaT1NTQCKtxKKOm9oHp958DY3RTAFKtkHg==",
+            "dev": true,
+            "peerDependencies": {
+                "chart.js": ">=4.0.0"
+            }
+        },
         "node_modules/check-more-types": {
             "version": "2.24.0",
             "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",