Make graph slightly configurable

ISPChk/Properties/launchSettings.json

@@ -4,7 +4,7 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:4223",
+      "applicationUrl": "http://0.0.0.0:4223",
       "sslPort": 0
     }
   },
@@ -22,7 +22,7 @@
       "dotnetRunMessages": "true",
       "launchBrowser": true,
       "launchUrl": "/",
-      "applicationUrl": "http://localhost:4223",
+      "applicationUrl": "http://0.0.0.0:4223",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

ISPChk/appsettings.json

@@ -6,5 +6,12 @@
       "Microsoft.Hosting.Lifetime": "Information"
     }
   },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "Kestrel": {
+    "Endpoints": {
+      "Http": {
+        "Url": "http://0.0.0.0:4223"
+      }
+    }
+  }
 }

ISPChk/wwwroot/index.html

@@ -63,7 +63,13 @@
                 Testlel
             </div>
             <div class="col-sm">
-                Testlel
+                <form id="frmHistory">
+                    <div>
+                        <label for="inpHistoryPast" class="form-label">Show past x minutes</label>
+                        <input type="text" class="form-control" id="inpHistoryPast" aria-describedby="inpNameAddHelp" value="1440">
+                    </div>
+                    <button type="submit" class="btn btn-primary">Show me</button>
+                </form>
             </div>
         </div>
         <div id="charts" class="row">

ISPChk/wwwroot/ispchk.js

@@ -22,6 +22,7 @@ async function deleteHost(hostId) {
 async function fetchHosts() {
     var tbody = $("#tblHosts > tbody");
     tbody.empty();
+    hosts = [];
     var res = await $.getJSON("/api/host");
     console.log("Got hosts: ", res);
     for (let host of res) {
@@ -33,7 +34,8 @@ async function fetchHosts() {
             deleteHost(host.hostId);
             }).appendTo(row);
     }
-    updateGraphs(res);
+    hosts = res;
+    updateGraphs();
 }
 
 async function fetchPings(hostId, start, end) {
@@ -54,13 +56,17 @@ async function transformChartData(pings) {
     return res;
 }
 
-async function updateGraphs(hosts) {
+async function updateGraphs() {
-    var charts = $("#charts");
+    var chartDiv = $("#charts");
+    chartDiv.empty();
+    charts = [];
+    var pastMinutes = $("#inpHistoryPast").val();
+    var start = Date.now() - pastMinutes * 60 * 1000;
+    var end = Date.now();
     for (let host of hosts) {
         console.log("Appending ", host);
-        var before = Date.now() - 300000;
+        var val = await transformChartData(await fetchPings(host.hostId, start, end));
-        var val = await transformChartData(await fetchPings(host.hostId, before, Date.now()));
+        $("<canvas>", { id: "chart_" + host.hostId, width: 200, height: 200 }).appendTo(chartDiv);
-        $("<canvas>", { id: "chart_" + host.hostId, width: 200, height: 200 }).appendTo(charts);
         var ctx = document.getElementById('chart_' + host.hostId).getContext('2d');
         charts[host.hostId] = new Chart(ctx, {
             type: 'line',
@@ -132,6 +138,11 @@ $('#btnDebug').click(async () => {
     console.log("DEBUG");
 });
 
+$("#frmHistory").submit((event) => {
+    event.preventDefault();
+    updateGraphs();
+});
+
 $("#frmHostAdd").submit((event) => {
     event.preventDefault();
     var name = $("#inpNameAdd").val();