extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-25 09:24:04 +01:00
Code Issues Packages Projects Releases Wiki Activity
c3bc375ff1
gatus/static/index.html

414 lines
14 KiB
HTML
Raw Normal View History

Add first version of UI
2019-09-12 22:15:42 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
Improve dashboard
2020-04-20 00:38:50 +02:00
<title>Health Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
start working on context root configuration
2020-11-21 01:44:05 +01:00
<link rel="stylesheet" href="./bootstrap.min.css" />
Add tooltip on status view response time range instead of latest RT
2019-12-28 18:19:52 +01:00
<style>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
html, body {
background-color: #f7f9fb;
}
html {
height: 100%;
}
#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 {
cursor: pointer;
transition: all 500ms ease-in-out;
overflow-x: hidden;
padding: .25em 0;
color: white;
}
.title {
font-size: 2.5rem;
}
.status:hover {
opacity: 0.7;
transition: opacity 100ms ease-in-out;
color: black;
}
.status-over-time {
overflow: auto;
}
.status-over-time>span:not(:last-child) {
margin-left: 2px;
}
.status-time-ago {
color: #6a737d;
opacity: 0.5;
margin-top: 5px;
}
.status-min-max-ms {
overflow-x: hidden;
}
#tooltip {
position: fixed;
top: 0;
left: 0;
background-color: white;
border: 1px solid lightgray;
border-radius: 4px;
padding: 6px;
font-size: 13px;
}
#tooltip code {
color: #212529;
line-height: 1;
}
#tooltip .tooltip-title {
font-weight: bold;
margin-bottom: 0;
display: block;
}
#tooltip .tooltip-title {
margin-top: 8px;
}
#tooltip>.tooltip-title:first-child {
margin-top: 0;
}
#social {
position: fixed;
right: 5px;
bottom: 5px;
padding: 5px;
margin: 0;
z-index: 100;
}
#social img {
opacity: 0.3;
}
#social img:hover {
opacity: 1;
}
#settings {
position: fixed;
left: 5px;
bottom: 5px;
padding: 5px;
}
#settings select:focus {
box-shadow: none;
}
.service-group {
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
cursor: pointer;
user-select: none;
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
}
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
.service-group h5:hover {
color: #1b1e21 !important;
}
Add tooltip on status view response time range instead of latest RT
2019-12-28 18:19:52 +01:00
</style>
Add first version of UI
2019-09-12 22:15:42 +02:00
</head>
<body>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<div class="container my-3 rounded p-3 border shadow">
<div class="mb-2">
<div class="row">
<div class="col-8 text-left my-auto">
<div class="title display-4">Health Status</div>
</div>
<div class="col-4 text-right">
<img src="logo.png" alt="Gatus" style="position: relative; min-width: 50px; max-width: 200px; width: 20%;"/>
Improve mobile-friendliness and add logo
2020-08-22 04:07:46 +02:00
</div>
Add first version of UI
2019-09-12 22:15:42 +02:00
</div>
Improve dashboard
2020-04-20 00:38:50 +02:00
</div>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<div id="results"></div>
</div>
Improve dashboard
2020-04-20 00:38:50 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<div id="tooltip" style="display: none">
<div class="tooltip-title">Timestamp:</div>
<code id="tooltip-timestamp">...</code>
<div class="tooltip-title">Response time:</div>
<code id="tooltip-response-time">...</code>
<div class="tooltip-title">Conditions:</div>
<code id="tooltip-conditions">...</code>
<div id="tooltip-errors-container">
<div class="tooltip-title">Errors:</div>
<code id="tooltip-errors">...</code>
Add first version of UI
2019-09-12 22:15:42 +02:00
</div>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
</div>
Add first version of UI
2019-09-12 22:15:42 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<script src="./jquery.min.js"></script>
Add Dockerfile
2019-09-15 01:25:59 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<div id="social">
<a href="https://github.com/TwinProduction/gatus" target="_blank" title="Gatus on GitHub">
<img src="./github.png" alt="GitHub" width="32" height="auto" />
</a>
</div>
Add subtle Github link in bottom right corner
2020-09-09 00:28:19 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<div id="settings">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">&#x21bb;</div>
Move refresh interval to bottom left corner instead + Use icon + Minor improvements
2020-10-02 18:08:52 +02:00
</div>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<select class="form-control form-control-sm" id="refresh-rate">
<option value="10">10s</option>
<option value="30" selected>30s</option>
<option value="60">1m</option>
<option value="120">2m</option>
<option value="300">5m</option>
<option value="600">10m</option>
</select>
Move refresh interval to bottom left corner instead + Use icon + Minor improvements
2020-10-02 18:08:52 +02:00
</div>
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
</div>
Move refresh interval to bottom left corner instead + Use icon + Minor improvements
2020-10-02 18:08:52 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
<script>
let serviceStatuses = {};
let timerHandler = 0;
let refreshIntervalHandler = 0;
let userClickedStatus = false;
Add first version of UI
2019-09-12 22:15:42 +02:00
Revert "Revert changes that were accidentally committed" but default to showing status on hover
2020-12-30 07:20:22 +01:00
// TODO: make this variable configurable and persist the choice in localStorage
let showStatusOnHover = true;
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function showTooltip(serviceName, index, element) {
Revert "Revert changes that were accidentally committed" but default to showing status on hover
2020-12-30 07:20:22 +01:00
//userClickedStatus = false;
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
clearTimeout(timerHandler);
let serviceResult = serviceStatuses[serviceName].results[index];
$("#tooltip-timestamp").text(prettifyTimestamp(serviceResult.timestamp));
$("#tooltip-response-time").text(parseInt(serviceResult.duration/1000000) + "ms");
// Populate the condition section
let conditions = "";
for (let i in serviceResult['condition-results']) {
let conditionResult = serviceResult['condition-results'][i];
conditions += (conditionResult.success ? "&#10003;" : "X") + " ~ " + htmlEntities(conditionResult.condition) + "<br />";
}
$("#tooltip-conditions").html(conditions);
// Populate the error section only if there are errors
if (serviceResult.errors && serviceResult.errors.length > 0) {
let errors = "";
for (let i in serviceResult.errors) {
errors += "- " + htmlEntities(serviceResult.errors[i]) + "<br />";
Improve dashboard
2020-04-20 00:38:50 +02:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
$("#tooltip-errors").html(errors);
$("#tooltip-errors-container").show();
} else {
$("#tooltip-errors-container").hide();
}
// Position tooltip
$("#tooltip").css({top: "0px", left: "0px"}).show();
let targetTopPosition = element.getBoundingClientRect().y + 30;
let targetLeftPosition = element.getBoundingClientRect().x;
// Make adjustments if necessary
let tooltipBoundingClientRect = document.querySelector('#tooltip').getBoundingClientRect();
if (targetLeftPosition + window.scrollX + tooltipBoundingClientRect.width + 50 > document.body.getBoundingClientRect().width) {
targetLeftPosition = element.getBoundingClientRect().x - tooltipBoundingClientRect.width + element.getBoundingClientRect().width;
if (targetLeftPosition < 0) {
targetLeftPosition += -targetLeftPosition;
Improve dashboard
2020-04-20 00:38:50 +02:00
}
Add tooltip on status view response time range instead of latest RT
2019-12-28 18:19:52 +01:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
if (targetTopPosition + window.scrollY + tooltipBoundingClientRect.height + 50 > document.body.getBoundingClientRect().height && targetTopPosition >= 0) {
targetTopPosition = element.getBoundingClientRect().y - (tooltipBoundingClientRect.height + 10);
if (targetTopPosition < 0) {
targetTopPosition = element.getBoundingClientRect().y + 30;
Improve dashboard
2020-04-20 00:38:50 +02:00
}
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
$("#tooltip").css({top: targetTopPosition + "px", left: targetLeftPosition + "px"});
}
Improve dashboard
2020-04-20 00:38:50 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function fadeTooltip() {
if (!userClickedStatus) {
timerHandler = setTimeout(function () {
Work on #62: Add uptime percentage + badges
2020-12-30 02:22:17 +01:00
$("#tooltip").hide();
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
}, 500);
Work on #62: Add uptime percentage + badges
2020-12-30 02:22:17 +01:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
}
Work on #62: Add uptime percentage + badges
2020-12-30 02:22:17 +01:00
Revert "Revert changes that were accidentally committed" but default to showing status on hover
2020-12-30 07:20:22 +01:00
function toggleTooltip(serviceName, index, element) {
console.log("userClickedStatus="+userClickedStatus);
if (!userClickedStatus) {
showTooltip(serviceName, index, element);
userClickedStatus = true;
} else {
$("#tooltip").hide();
userClickedStatus = false;
}
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function createStatusBadge(serviceStatusIndex, index, success) {
if (success) {
Revert "Revert changes that were accidentally committed" but default to showing status on hover
2020-12-30 07:20:22 +01:00
if (showStatusOnHover) {
return "<span class='status badge badge-success' style='width: 5%' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>&#10003;</span>";
} else {
return "<span class='status badge badge-success' style='width: 5%' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>&#10003;</span>";
}
}
if (showStatusOnHover) {
return "<span class='status badge badge-danger' style='width: 5%' onmouseenter='showTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>X</span>";
} else {
return "<span class='status badge badge-danger' style='width: 5%' onclick='toggleTooltip(\"" + serviceStatusIndex + "\", " + index + ", this)'>X</span>";
Improve dashboard
2020-04-20 00:38:50 +02:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
}
Improve dashboard
2020-04-20 00:38:50 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function refreshStatuses() {
$.getJSON("./api/v1/statuses", function (data) {
// Update the table only if there's a change
if (JSON.stringify(serviceStatuses) !== JSON.stringify(data)) {
serviceStatuses = data;
buildTable();
}
});
}
Add first version of UI
2019-09-12 22:15:42 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function buildTable() {
let outputByGroup = {};
for (let serviceStatusIndex in serviceStatuses) {
let serviceStatusOverTime = "";
let serviceStatus = serviceStatuses[serviceStatusIndex];
let hostname = serviceStatus.results[serviceStatus.results.length-1].hostname;
let minResponseTime = null;
let maxResponseTime = null;
let newestTimestamp = null;
let oldestTimestamp = null;
for (let resultIndex in serviceStatus.results) {
let serviceResult = serviceStatus.results[resultIndex];
serviceStatusOverTime = createStatusBadge(serviceStatusIndex, resultIndex, serviceResult.success) + serviceStatusOverTime;
const responseTime = parseInt(serviceResult.duration/1000000);
if (minResponseTime == null || minResponseTime > responseTime) {
minResponseTime = responseTime;
Regenerate the table only if there's a change
2020-08-15 22:42:47 +02:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
if (maxResponseTime == null || maxResponseTime < responseTime) {
maxResponseTime = responseTime;
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
const timestamp = new Date(serviceResult.timestamp);
if (newestTimestamp == null || newestTimestamp < timestamp) {
newestTimestamp = timestamp;
Add non-grouped services at the bottom of the dashboard
2020-11-27 00:29:11 +01:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
if (oldestTimestamp == null || oldestTimestamp > timestamp) {
oldestTimestamp = timestamp;
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
}
Regenerate the table only if there's a change
2020-08-15 22:42:47 +02:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
let output = ""
+ "<div class='container py-3 border-left border-right border-top border-black rounded-0'>"
+ " <div class='row mb-2'>"
+ " <div class='col-md-10'>"
+ " <span class='font-weight-bold'>" + serviceStatus.name + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>"
+ " </div>"
+ " <div class='col-md-2 text-right'>"
+ " <span class='font-weight-lighter status-min-max-ms'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>"
+ " </div>"
+ " </div>"
+ " <div class='row'>"
+ " <div class='col-12 d-flex flex-row-reverse status-over-time'>"
+ " " + serviceStatusOverTime
+ " </div>"
+ " </div>"
+ " <div class='row status-time-ago'>"
+ " <div class='col-6'>"
+ " " + generatePrettyTimeAgo(oldestTimestamp)
+ " </div>"
+ " <div class='col-6 text-right'>"
+ " " + generatePrettyTimeAgo(newestTimestamp)
+ " </div>"
+ " </div>"
+ "</div>";
// create an empty entry if this group is new
if (!outputByGroup[serviceStatus.group]) {
outputByGroup[serviceStatus.group] = "";
Add non-grouped services at the bottom of the dashboard
2020-11-27 00:29:11 +01:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
outputByGroup[serviceStatus.group] += output;
Regenerate the table only if there's a change
2020-08-15 22:42:47 +02:00
}
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
let output = "";
for (let group in outputByGroup) {
// Services that don't have a group should be skipped and left for last
if (group === 'undefined') {
continue
}
let key = group.replace(/[^a-zA-Z0-9]/g, '');
let existingGroupContentSelector = $("#service-group-" + key + "-content");
let isCurrentlyHidden = existingGroupContentSelector.length && existingGroupContentSelector[0].style.display === 'none';
let groupStatus = "<span class='text-success'>&#10003;</span>";
if (outputByGroup[group].includes("badge badge-danger")) {
groupStatus = "<span class='text-warning'>~</span>";
}
output += ""
+ "<div class='mt-" + (output.length ? '4' : '3') + "'>"
+ " <div class='container pt-2 border-left border-right border-top border-black border-bottom service-group' id='service-group-" + key + "' data-group='" + key + "' onclick='toggleGroup(this)'>"
+ " <h5 class='text-secondary text-monospace pb-0'>"
+ " " + groupStatus + " " + group
+ " <span class='float-right service-group-arrow' id='service-group-" + key + "-arrow'>" + (isCurrentlyHidden ? "&#9660;" : "&#9650;") + "</span>"
+ " </h5>"
+ " </div>"
+ " <div class='service-group-content' id='service-group-" + key + "-content' style='" + (isCurrentlyHidden ? "display: none;" : "") + "'>"
+ " " + outputByGroup[group]
+ " </div>"
+ "</div>";
}
// Add all services that don't have a group at the end
if (outputByGroup['undefined']) {
output += ""
+ "<div class='mt-" + (output.length ? '4' : '3') + "'>"
+ " " + outputByGroup['undefined']
+ "</div>"
}
$("#results").html(output);
}
Regenerate the table only if there's a change
2020-08-15 22:42:47 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function toggleGroup(element) {
let selector = $("#service-group-" + element.dataset.group + "-content");
selector.toggle("fast", function() {
if (selector.length && selector[0].style.display === 'none') {
$("#service-group-" + element.dataset.group + "-arrow").html("&#9660;");
} else {
$("#service-group-" + element.dataset.group + "-arrow").html("&#9650;");
}
});
}
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
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;
}
Add timestamp in hover text
2020-04-08 00:23:26 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function generatePrettyTimeAgo(t) {
let differenceInMs = new Date().getTime() - new Date(t).getTime();
if (differenceInMs > 3600000) {
let hours = (differenceInMs/3600000).toFixed(0);
return hours + " hour" + (hours !== "1" ? "s" : "") + " ago";
}
if (differenceInMs > 60000) {
let minutes = (differenceInMs/60000).toFixed(0);
return minutes + " minute" + (minutes !== "1" ? "s" : "") + " ago";
}
return (differenceInMs/1000).toFixed(0) + " seconds ago";
}
Improve dashboard
2020-04-20 00:38:50 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function htmlEntities(s) {
return String(s)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
Add support for headers, method, body and json path with arrays
2020-04-15 01:20:00 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
function setRefreshInterval(seconds) {
refreshStatuses();
refreshIntervalHandler = setInterval(function() {
Start working on #13: Service groups
2020-11-27 00:09:01 +01:00
refreshStatuses();
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
}, seconds * 1000);
}
added code to set the refresh interval
2020-10-01 16:45:20 +02:00
Revert changes that were accidentally committed
2020-12-30 07:18:30 +01:00
$("#refresh-rate").change(function() {
clearInterval(refreshIntervalHandler);
setRefreshInterval($(this).val());
});
setRefreshInterval(30);
$("#refresh-rate").val(30);
</script>
Add first version of UI
2019-09-12 22:15:42 +02:00
</body>
Revert "Revert changes that were accidentally committed" but default to showing status on hover
2020-12-30 07:20:22 +01:00
</html>
Reference in New Issue Copy Permalink