diff --git a/static/index.html b/static/index.html index dbe2d22b..5fd0c2fe 100644 --- a/static/index.html +++ b/static/index.html @@ -77,7 +77,7 @@
-
+
Health Status
@@ -160,62 +160,69 @@ function refreshResults() { $.getJSON("/api/v1/results", function (data) { - serviceStatuses = data; - let output = ""; - for (let serviceName in data) { - let serviceStatusOverTime = ""; - let hostname = data[serviceName][data[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]; - serviceStatusOverTime = createStatusBadge(serviceName, key, serviceResult.success) + serviceStatusOverTime; - const responseTime = parseInt(serviceResult.duration/1000000); - if (minResponseTime == null || minResponseTime > responseTime) { - minResponseTime = responseTime; - } - if (maxResponseTime == null || maxResponseTime < responseTime) { - maxResponseTime = responseTime; - } - const timestamp = new Date(serviceResult.timestamp); - if (newestTimestamp == null || newestTimestamp > timestamp) { - newestTimestamp = timestamp; - } - if (oldestTimestamp == null || oldestTimestamp < timestamp) { - oldestTimestamp = timestamp; - } - } - output += "" - + "
" - + "
" - + "
" - + " " + serviceName + " - " + hostname + "" - + "
" - + "
" - + " " + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms" - + "
" - + "
" - + "
" - + "
" - + " " + serviceStatusOverTime - + "
" - + "
" - + "
" - + "
" - + " " + generatePrettyTimeAgo(newestTimestamp) - + "
" - + "
" - + " " + generatePrettyTimeAgo(oldestTimestamp) - + "
" - + "
" - + "
"; + // Update the table only if there's a change + if (JSON.stringify(serviceStatuses) !== JSON.stringify(data)) { + serviceStatuses = data; + buildTable(); } - $("#results").html(output); }); } + function buildTable() { + let output = ""; + for (let serviceName in serviceStatuses) { + let serviceStatusOverTime = ""; + 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 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) { + minResponseTime = responseTime; + } + if (maxResponseTime == null || maxResponseTime < responseTime) { + maxResponseTime = responseTime; + } + const timestamp = new Date(serviceResult.timestamp); + if (newestTimestamp == null || newestTimestamp < timestamp) { + newestTimestamp = timestamp; + } + if (oldestTimestamp == null || oldestTimestamp > timestamp) { + oldestTimestamp = timestamp; + } + } + output += "" + + "
" + + "
" + + "
" + + " " + serviceName + " - " + hostname + "" + + "
" + + "
" + + " " + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms" + + "
" + + "
" + + "
" + + "
" + + " " + serviceStatusOverTime + + "
" + + "
" + + "
" + + "
" + + " " + generatePrettyTimeAgo(oldestTimestamp) + + "
" + + "
" + + " " + generatePrettyTimeAgo(newestTimestamp) + + "
" + + "
" + + "
"; + } + $("#results").html(output); + } + function prettifyTimestamp(timestamp) { let date = new Date(timestamp); let YYYY = date.getFullYear();