amki/ISPChk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve graph performance, limit axis to 200

Browse Source
This commit is contained in:
amki 2021-02-07 06:42:27 +01:00
parent a8033771da
commit 5c60f887f7
4 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

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

8
ISPChk/NetworkTest.cs
View File

@ -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();

BIN
ISPChk/ispchk.db
View File

Binary file not shown.

47
ISPChk/wwwroot/ispchk.js
View File

@ -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 () => {