Add threshold line to ping chart

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");
+        });
+};

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",

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,
         };
     }
 

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) {

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,
+                            }
+                        }
+                    },
                 },
             };
         },