From d8cfcd04f14ca37535e2c47e7fb70274d6d62728 Mon Sep 17 00:00:00 2001
From: TwinProduction <twin@twinnation.org>
Date: Wed, 30 Dec 2020 01:18:30 -0500
Subject: [PATCH] Revert changes that were accidentally committed

---
 static/index.html | 740 ++++++++++++++++++++++------------------------
 1 file changed, 360 insertions(+), 380 deletions(-)

diff --git a/static/index.html b/static/index.html
index 314ff665..9393e263 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,408 +5,388 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" href="./bootstrap.min.css" />
 	<style>
-		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 {
+        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 {
             cursor: pointer;
             user-select: none;
-		}
+        }
         .service-group h5:hover {
             color: #1b1e21 !important;
         }
 	</style>
 </head>
 <body>
-	<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%;"/>
-				</div>
+<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%;"/>
 			</div>
 		</div>
-		<div id="results"></div>
 	</div>
+	<div id="results"></div>
+</div>
 
-	<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>
+<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>
+	</div>
+</div>
+
+<script src="./jquery.min.js"></script>
+
+<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>
+
+<div id="settings">
+	<div class="input-group input-group-sm">
+		<div class="input-group-prepend">
+			<div class="input-group-text">&#x21bb;</div>
 		</div>
+		<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>
 	</div>
+</div>
 
-	<script src="./jquery.min.js"></script>
+<script>
+	let serviceStatuses = {};
+	let timerHandler = 0;
+	let refreshIntervalHandler = 0;
+	let userClickedStatus = false;
 
-	<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>
-
-	<div id="settings">
-		<div class="input-group input-group-sm">
-			<div class="input-group-prepend">
-				<div class="input-group-text">&#x21bb;</div>
-			</div>
-			<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>
-		</div>
-	</div>
-
-	<script>
-		let serviceStatuses = {};
-		let timerHandler = 0;
-		let refreshIntervalHandler = 0;
-		let userClickedStatus = false;
-		let showStatusOnHover = false;
-
-		function showTooltip(serviceName, index, element) {
-			//userClickedStatus = false;
-			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 />";
-				}
-				$("#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;
-				}
-			}
-			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;
-				}
-			}
-			$("#tooltip").css({top: targetTopPosition + "px", left: targetLeftPosition + "px"});
+	function showTooltip(serviceName, index, element) {
+		userClickedStatus = false;
+		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 />";
 		}
-
-		function fadeTooltip() {
-			if (!userClickedStatus) {
-				timerHandler = setTimeout(function () {
-					$("#tooltip").hide();
-				}, 500);
+		$("#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 />";
+			}
+			$("#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;
 			}
 		}
+		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;
+			}
+		}
+		$("#tooltip").css({top: targetTopPosition + "px", left: targetLeftPosition + "px"});
+	}
 
-		function toggleTooltip(serviceName, index, element) {
-			console.log("userClickedStatus="+userClickedStatus);
-			if (!userClickedStatus) {
-				showTooltip(serviceName, index, element);
-				userClickedStatus = true;
-			} else {
+	function fadeTooltip() {
+		if (!userClickedStatus) {
+			timerHandler = setTimeout(function () {
 				$("#tooltip").hide();
-				userClickedStatus = false;
+			}, 500);
+		}
+	}
+
+	function createStatusBadge(serviceStatusIndex, index, success) {
+		if (success) {
+			return "<span class='status badge badge-success' style='width: 5%' onmouseenter='showTooltip(\""+serviceStatusIndex+"\", "+index+", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>&#10003;</span>";
+		}
+		return "<span class='status badge badge-danger' style='width: 5%' onmouseenter='showTooltip(\""+serviceStatusIndex+"\", "+index+", this)' onmouseleave='fadeTooltip()' onclick='userClickedStatus = !userClickedStatus;'>X</span>";
+	}
+
+	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();
 			}
-		}
-
-		function createStatusBadge(serviceStatusIndex, index, success) {
-			if (success) {
-				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>";
-			}
-		}
-
-		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();
-				}
-			});
-		}
-
-		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;
-					}
-					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;
-					}
-				}
-				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] = "";
-				}
-				outputByGroup[serviceStatus.group] += output;
-			}
-			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);
-		}
-
-		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;");
-				}
-			});
-		}
-
-		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;
-		}
-
-		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";
-		}
-
-		function htmlEntities(s) {
-			return String(s)
-				.replace(/&/g, '&amp;')
-				.replace(/</g, '&lt;')
-				.replace(/>/g, '&gt;')
-				.replace(/"/g, '&quot;')
-				.replace(/'/g, '&apos;');
-		}
-
-		function setRefreshInterval(seconds) {
-			refreshStatuses();
-			refreshIntervalHandler = setInterval(function() {
-				refreshStatuses();
-			}, seconds * 1000);
-		}
-
-		$("#refresh-rate").change(function() {
-			clearInterval(refreshIntervalHandler);
-			setRefreshInterval($(this).val());
 		});
-		setRefreshInterval(30);
-		$("#refresh-rate").val(30);
-	</script>
+	}
+
+	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;
+				}
+				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;
+				}
+			}
+			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] = "";
+			}
+			outputByGroup[serviceStatus.group] += output;
+		}
+		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);
+	}
+
+	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;");
+			}
+		});
+	}
+
+	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;
+	}
+
+	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";
+	}
+
+	function htmlEntities(s) {
+		return String(s)
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&apos;');
+	}
+
+	function setRefreshInterval(seconds) {
+		refreshStatuses();
+		refreshIntervalHandler = setInterval(function() {
+			refreshStatuses();
+		}, seconds * 1000);
+	}
+
+	$("#refresh-rate").change(function() {
+		clearInterval(refreshIntervalHandler);
+		setRefreshInterval($(this).val());
+	});
+	setRefreshInterval(30);
+	$("#refresh-rate").val(30);
+</script>
 </body>
 </html>