monit-dashboard/static/monit-dashboard.js

65 lines
1.8 KiB
JavaScript
Raw Normal View History

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
2020-01-26 23:21:03 +00:00
acc[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
2020-03-08 06:16:14 +00:00
var acc = document.getElementsByClassName("inner-rows");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
2019-08-16 17:07:50 +00:00
function draw(rate) {
2019-10-25 15:48:24 +00:00
var count = [rate['green'], rate['red']];
var percentage = [
2020-01-26 23:21:03 +00:00
(count[0] * 100) / (count[0] + count[1]),
(count[1] * 100) / (count[0] + count[1])
2019-10-25 15:48:24 +00:00
]
2019-10-25 15:14:40 +00:00
var status = ['Ok', 'Error'];
2020-01-26 23:21:03 +00:00
var green = (percentage[0] * 2) / 100;
var red = (percentage[1] * 2) / 100;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
2020-01-26 23:21:03 +00:00
var colors = ['#00a90e', '#ff9a02'];
2019-08-16 17:07:50 +00:00
var angles = [Math.PI * green, Math.PI * red];
var offset = 0;
var beginAngle = 0;
var endAngle = 0;
var offsetX, offsetY, medianAngle;
2020-01-26 23:21:03 +00:00
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < angles.length; i = i + 1) {
beginAngle = endAngle;
endAngle = endAngle + angles[i];
medianAngle = (endAngle + beginAngle) / 2;
offsetX = Math.cos(medianAngle) * offset;
offsetY = Math.sin(medianAngle) * offset;
2019-10-25 13:05:29 +00:00
ctx.beginPath();
2019-10-25 13:05:29 +00:00
2020-01-26 23:21:03 +00:00
if (percentage[i] !== 0) {
2019-10-25 15:14:40 +00:00
ctx.fillStyle = colors[i % colors.length];
ctx.moveTo(200 + offsetX, 200 + offsetY);
ctx.arc(200 + offsetX, 200 + offsetY, 120, beginAngle, endAngle);
ctx.lineTo(200 + offsetX, 200 + offsetY);
ctx.fill();
2019-10-25 15:48:24 +00:00
ctx.rect(canvas.width - 129, i * 20 + 10, 10, 10);
2019-10-25 15:14:40 +00:00
ctx.fill();
ctx.font = "13px sans-serif";
2019-10-25 15:48:24 +00:00
ctx.fillText(status[i] + " - " + count[i] + " (" +
Number(percentage[i]).toFixed(1) + "%)",
canvas.width - 109, i * 20 + 20);
2019-10-25 15:14:40 +00:00
}
}
}