Improve graph performance, limit axis to 200

.gitignore

@@ -337,4 +337,6 @@ ASALocalRun/
 .localhistory/
 
 # BeatPulse healthcheck temp database
-healthchecksdb
+healthchecksdb
+
+ISPChk/ispchk.db

ISPChk/NetworkTest.cs

@@ -79,9 +79,9 @@ namespace ISPChk
                         if (reply.Status == IPStatus.Success)
                         {
                             successes++;
-                            System.Diagnostics.Debug.WriteLine("Reply from " + reply.Address.ToString() +
-                                ": bytes=" + reply.Buffer.Length +
-                                " time=" + reply.RoundtripTime + "ms");
+                            //System.Diagnostics.Debug.WriteLine("Reply from " + reply.Address.ToString() +
+                            //    ": bytes=" + reply.Buffer.Length +
+                            //    " time=" + reply.RoundtripTime + "ms");
                             avg += reply.RoundtripTime;
                             if (reply.RoundtripTime < min)
                             {
@@ -106,7 +106,7 @@ namespace ISPChk
                     // FIXME: This is dirty but I don't want the graph to explode
                     if (min > timeout)
                         min = 0;
-                    System.Diagnostics.Debug.WriteLine("min:" + min + " max:" + max + " avg:" + avg);
+                    System.Diagnostics.Debug.WriteLine(h.HostName+": "+"min:" + min + " max:" + max + " avg:" + avg);
                     PingItem pi = new PingItem { Date = DateTimeOffset.UtcNow, Min = min, Max = max, Avg = avg, Failures = failures };
                     h.PingItems.Add(pi);
                     ctx.SaveChanges();

ISPChk/wwwroot/ispchk.js

@@ -1,5 +1,6 @@
 var hosts = [];
 var charts = {};
+var activeChart = 1;
 
 async function createHost(host) {
     $.postJSON("/api/host", host).then((res, status) => {
@@ -77,16 +78,19 @@ async function prepareChart(host) {
     var chartDiv = $("#chartContainer");
     var chartId = "chart_" + host.hostId;
     var canvas = $("<canvas>", { id: chartId, width: 400, height: 200 }).appendTo(chartDiv).hide();
-    $("<button>").appendTo(buttonDiv).text(host.name).click(async () => {
+    $("<button>",{ class: "btn btn-primary"}).appendTo(buttonDiv).text(host.name).click(async () => {
         await activateChart(host.hostId);
+        activeChart = host.hostId;
     });
     return canvas[0];
 }
 
 async function updateGraphs() {
-    var chartDiv = $("#charts");
+    var chartDiv = $("#chartContainer");
     chartDiv.empty();
     charts = [];
+    var buttonDiv = $("#chartContainerButtons");
+    buttonDiv.empty();
     var pastMinutes = $("#inpHistoryPast").val();
     var start = Date.now() - pastMinutes * 60 * 1000;
     var end = Date.now();
@@ -122,6 +126,14 @@ async function updateGraphs() {
                         yAxisID: "y-latency",
                         data: val.max
                     },
+                    {
+                        label: 'fail',
+                        type: 'bar',
+                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+                        borderColor: 'rgb(0, 0, 0)',
+                        yAxisID: "y-loss",
+                        data: val.failures
+                    },
                 ]
             },
             options: {
@@ -129,6 +141,24 @@ async function updateGraphs() {
                     display: true,
                     text: host.name
                 },
+                //
+                // Performance optimizations
+                //
+                animation: {
+                    duration: 0, // general animation time
+                },
+                hover: {
+                    animationDuration: 0, // duration of animations when hovering an item
+                },
+                elements: {
+                    line: {
+                        tension: 0 // disables bezier curves
+                    }
+                },
+                responsiveAnimationDuration: 0, // animation duration after a resize
+                //
+                // Performance optimizations
+                //
                 scales: {
                     xAxes: [{
                         type: 'time',
@@ -143,7 +173,16 @@ async function updateGraphs() {
                             position: "left",
                             ticks: {
                                 suggestedMin: 0,
-                                suggestedMax: 100
+                                suggestedMax: 100,
+                                max: 200
+                            }
+                        },
+                        {
+                            id: "y-loss",
+                            position: "right",
+                            ticks: {
+                                suggestedMin: 0,
+                                suggestedMax: 5
                             }
                         },/*
                         {
@@ -167,7 +206,7 @@ async function updateGraphs() {
             }
         });
     }
-    activateChart(1);
+    activateChart(activeChart);
 }
 
 $('#btnDebug').click(async () => {