Regenerate the table only if there's a change

This commit is contained in:
TwinProduction 2020-08-15 16:42:47 -04:00
parent a62eab58ef
commit 7849cc6dd4

View File

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