<!DOCTYPE html>
<html lang="en">
<head>
<title>Status</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#results div.container:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#results div.container:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-width: 1px;
border-color: #dee2e6;
border-style: solid;
}
.status-ok {
display: inline-block;
width: 1%;
height: 20px;
margin-right: 4px;
background-color: #28a745;
}
</style>
</head>
<body>
<div class="container my-3 bg-light rounded p-4 border shadow">
<div class="text-center mb-3">
<div class="display-4">Status</div>
</div>
<div id="results">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
//const OK = "<div class='status-ok' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'></div>"
const OK = "<span class='badge badge-success ml-1' style='width: 5%' title='__TIMESTAMP____RESPONSE_TIME____CONDITIONS____ERRORS__'>✓</span>";
const NOK = "<span class='badge badge-danger ml-1' style='width: 5%' title='__TIMESTAMP____RESPONSE_TIME____CONDITIONS____TIMESTAMP____ERRORS__'>X</span>";
function generateServiceResultBox(serviceResult) {
let output = (serviceResult.success ? OK : NOK);
output = output.replace("__TIMESTAMP__", "Timestamp:\n" + prettifyTimestamp(serviceResult.timestamp));
output = output.replace("__RESPONSE_TIME__", "\n\nResponse time:\n" + parseInt(serviceResult.duration/1000000) + "ms");
let conditions = "";
for (let conditionResultIndex in serviceResult['condition-results']) {
let conditionResult = serviceResult['condition-results'][conditionResultIndex];
conditions += "\n- " + (conditionResult.success ? "✓" : "X") + " ~ " + conditionResult.condition;
}
output = output.replace("__CONDITIONS__", "\n\nConditions:" + conditions);
if (serviceResult['errors'].length > 0) {
let errors = "";
for (let errorIndex in serviceResult['errors']) {
errors += "\n- " + serviceResult['errors'][errorIndex];
}
output = output.replace("__ERRORS__", "\n\nErrors: " + errors);
} else {
output = output.replace("__ERRORS__", "");
}
return output;
}
function refreshResults() {
$.getJSON("/api/v1/results", function (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;
for (let key in data[serviceName]) {
let serviceResult = data[serviceName][key];
console.log(serviceResult);
serviceStatusOverTime = generateServiceResultBox(serviceResult) + serviceStatusOverTime;
const responseTime = parseInt(serviceResult.duration/1000000);
if (minResponseTime == null || minResponseTime > responseTime) {
minResponseTime = responseTime;
}
if (maxResponseTime == null || maxResponseTime < responseTime) {
maxResponseTime = responseTime;
}
}
output += ""
+ "<div class='container p-2 border-left border-right border-top border-black'>"
+ " <div class='row mb-2'>"
+ " <div class='col-8'>"
+ " <span class='font-weight-bold'>" + serviceName + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>"
+ " </div>"
+ " <div class='col-4 text-right'>"
+ " <span class='font-weight-lighter'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>"
+ " </div>"
+ " </div>"
+ " <div class='row'>"
+ " <div class='col-12 d-flex flex-row-reverse'>"
+ " " + serviceStatusOverTime
+ " </div>"
+ " </div>"
+ "</div>";
}
$("#results").html(output);
});
}
function prettifyTimestamp(timestamp) {
let date = new Date(timestamp);
let YYYY = date.getFullYear();
let MM = ((date.getMonth()+1)<10?"0":"")+""+(date.getMonth()+1);
let DD = ((date.getDate())<10?"0":"")+""+(date.getDate());
let hh = ((date.getHours())<10?"0":"")+""+(date.getHours());
let mm = ((date.getMinutes())<10?"0":"")+""+(date.getMinutes());
let ss = ((date.getSeconds())<10?"0":"")+""+(date.getSeconds());
return YYYY+"-"+MM+"-"+DD+" "+hh+":"+mm+":"+ss;
}
refreshResults();
setInterval(function() {
refreshResults();
}, 10000);
</script>
</body>
</html>