Regenerate the table only if there's a change
</head>
<body>
<div class="container my-3 rounded p-4 border shadow">
- <div class="mb-3">
+ <div class="mb-5">
<div class="display-4">Health Status</div>
</div>
<div id="results"></div>
function refreshResults() {
$.getJSON("/api/v1/results", function (data) {
+ // Update the table only if there's a change
+ if (JSON.stringify(serviceStatuses) !== JSON.stringify(data)) {
serviceStatuses = data;
+ buildTable();
+ }
+ });
+ }
+
+ function buildTable() {
let output = "";
- for (let serviceName in data) {
+ for (let serviceName in serviceStatuses) {
let serviceStatusOverTime = "";
- let hostname = data[serviceName][data[serviceName].length-1].hostname
+ let hostname = serviceStatuses[serviceName][serviceStatuses[serviceName].length-1].hostname
let minResponseTime = null;
let maxResponseTime = null;
let newestTimestamp = null;
let oldestTimestamp = null;
- for (let key in data[serviceName]) {
- let serviceResult = data[serviceName][key];
+ for (let key in serviceStatuses[serviceName]) {
+ let serviceResult = serviceStatuses[serviceName][key];
serviceStatusOverTime = createStatusBadge(serviceName, key, serviceResult.success) + serviceStatusOverTime;
const responseTime = parseInt(serviceResult.duration/1000000);
if (minResponseTime == null || minResponseTime > responseTime) {
maxResponseTime = responseTime;
}
const timestamp = new Date(serviceResult.timestamp);
- if (newestTimestamp == null || newestTimestamp > timestamp) {
+ if (newestTimestamp == null || newestTimestamp < timestamp) {
newestTimestamp = timestamp;
}
- if (oldestTimestamp == null || oldestTimestamp < timestamp) {
+ if (oldestTimestamp == null || oldestTimestamp > timestamp) {
oldestTimestamp = timestamp;
}
}
+ " </div>"
+ " <div class='row status-time-ago'>"
+ " <div class='col-6'>"
- + " " + generatePrettyTimeAgo(newestTimestamp)
+ + " " + generatePrettyTimeAgo(oldestTimestamp)
+ " </div>"
+ " <div class='col-6 text-right'>"
- + " " + generatePrettyTimeAgo(oldestTimestamp)
+ + " " + generatePrettyTimeAgo(newestTimestamp)
+ " </div>"
+ " </div>"
+ "</div>";
}
$("#results").html(output);
- });
}
function prettifyTimestamp(timestamp) {
