-
Notifications
You must be signed in to change notification settings - Fork 0
/
uptime.js
104 lines (96 loc) · 2.87 KB
/
uptime.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// get the canvas context for chart.js
var ctx = document.getElementById("chart").getContext("2d");
function makeGraph(data) {
// parse the log data into a new array of momentjs objects
// rounded off to the start of the minute
const dateFormat = "DD-MMM-YYYY HH:mm:ss ZZ";
const logs = data.map(datetime =>
moment(datetime, dateFormat).startOf("minute")
);
const now = moment().startOf("minute");
const fourHoursAgo = now.clone().subtract(4, "hours");
const twentyFourHoursAgo = now.clone().subtract(24, "hours");
// calculate the 24 hour uptime
// count the number of entries in the logs array since 24 hours ago
// and convert it to a percentage of the number of minutes (1440)
const filtered = logs.filter(log => log.isAfter(twentyFourHoursAgo));
const uptime = ((100 * filtered.length) / 1440).toFixed(0);
document.querySelector("#uptime").innerText = `${uptime}%`;
// generate the graph data for the past 4 hours (240 mins)
const tickData = [];
const pointBackgroundColors = [];
for (var i = 1; i <= 240; i++) {
const tick = fourHoursAgo.clone().add(i, "minutes");
// check if the current tick exists in the logs array
const found = logs.find(log => log.isSame(tick));
// if it was found then the log was received at that time
// so set the y value to 1 for "on"
// and make the color green
tickData.push({
t: tick.valueOf(),
y: found ? 1 : 0
});
pointBackgroundColors.push(found ? "#00AA11" : "#AA0000");
}
// create the graph using chart.js
const chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "Uptime",
backgroundColor: "#00AA11",
borderColor: "white",
steppedLine: true,
pointBackgroundColor: pointBackgroundColors,
data: tickData
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Time"
},
type: "time",
distribution: "series",
ticks: {
source: "tickData",
autoSkip: true
}
}
],
yAxes: [
{
min: 0,
max: 1,
ticks: {
beginAtZero: true,
stepSize: 1,
callback: value => (value > 0 ? "ON" : "OFF")
}
}
]
}
}
});
return chart;
}
// 1440.json is generated from the apache access logs
// when report.cgi page is processed
const getData = async file => {
const response = await fetch(file);
let data = [];
if (response.ok) {
data = await response.json();
} else {
console.error("Response error!", response.status, response);
}
return data;
};
getData("1440.json").then(data => makeGraph(data));