|
@ -1,5 +1,6 @@ |
|
|
var hosts = []; |
|
|
var hosts = []; |
|
|
var charts = {}; |
|
|
var charts = {}; |
|
|
|
|
|
var activeChart = 1; |
|
|
|
|
|
|
|
|
async function createHost(host) { |
|
|
async function createHost(host) { |
|
|
$.postJSON("/api/host", host).then((res, status) => { |
|
|
$.postJSON("/api/host", host).then((res, status) => { |
|
@ -77,16 +78,19 @@ async function prepareChart(host) { |
|
|
var chartDiv = $("#chartContainer"); |
|
|
var chartDiv = $("#chartContainer"); |
|
|
var chartId = "chart_" + host.hostId; |
|
|
var chartId = "chart_" + host.hostId; |
|
|
var canvas = $("<canvas>", { id: chartId, width: 400, height: 200 }).appendTo(chartDiv).hide(); |
|
|
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); |
|
|
await activateChart(host.hostId); |
|
|
|
|
|
activeChart = host.hostId; |
|
|
}); |
|
|
}); |
|
|
return canvas[0]; |
|
|
return canvas[0]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function updateGraphs() { |
|
|
async function updateGraphs() { |
|
|
var chartDiv = $("#charts"); |
|
|
var chartDiv = $("#chartContainer"); |
|
|
chartDiv.empty(); |
|
|
chartDiv.empty(); |
|
|
charts = []; |
|
|
charts = []; |
|
|
|
|
|
var buttonDiv = $("#chartContainerButtons"); |
|
|
|
|
|
buttonDiv.empty(); |
|
|
var pastMinutes = $("#inpHistoryPast").val(); |
|
|
var pastMinutes = $("#inpHistoryPast").val(); |
|
|
var start = Date.now() - pastMinutes * 60 * 1000; |
|
|
var start = Date.now() - pastMinutes * 60 * 1000; |
|
|
var end = Date.now(); |
|
|
var end = Date.now(); |
|
@ -122,6 +126,14 @@ async function updateGraphs() { |
|
|
yAxisID: "y-latency", |
|
|
yAxisID: "y-latency", |
|
|
data: val.max |
|
|
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: { |
|
|
options: { |
|
@ -129,6 +141,24 @@ async function updateGraphs() { |
|
|
display: true, |
|
|
display: true, |
|
|
text: host.name |
|
|
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: { |
|
|
scales: { |
|
|
xAxes: [{ |
|
|
xAxes: [{ |
|
|
type: 'time', |
|
|
type: 'time', |
|
@ -143,7 +173,16 @@ async function updateGraphs() { |
|
|
position: "left", |
|
|
position: "left", |
|
|
ticks: { |
|
|
ticks: { |
|
|
suggestedMin: 0, |
|
|
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 () => { |
|
|
$('#btnDebug').click(async () => { |
|
|