Add blank status badges on entries that haven't been filled yet
This commit is contained in:
		| @ -161,6 +161,7 @@ | |||||||
| </div> | </div> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
|  | 	let maximumNumberOfResults = 20; | ||||||
| 	let serviceStatuses = {}; | 	let serviceStatuses = {}; | ||||||
| 	let timerHandler = 0; | 	let timerHandler = 0; | ||||||
| 	let refreshIntervalHandler = 0; | 	let refreshIntervalHandler = 0; | ||||||
| @ -218,7 +219,7 @@ | |||||||
| 		if (!userClickedStatus) { | 		if (!userClickedStatus) { | ||||||
| 			timerHandler = setTimeout(function () { | 			timerHandler = setTimeout(function () { | ||||||
| 				$("#tooltip").hide(); | 				$("#tooltip").hide(); | ||||||
| 			}, 500); | 			}, 50); | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| @ -248,6 +249,10 @@ | |||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
|  | 	function createBlankStatusBadge() { | ||||||
|  | 		return "<span class='status badge badge-light border' style='width: 5%;'> </span>"; | ||||||
|  | 	} | ||||||
|  |  | ||||||
| 	function refreshStatuses() { | 	function refreshStatuses() { | ||||||
| 		$.getJSON("./api/v1/statuses", function (data) { | 		$.getJSON("./api/v1/statuses", function (data) { | ||||||
| 			// Update the table only if there's a change | 			// Update the table only if there's a change | ||||||
| @ -286,8 +291,11 @@ | |||||||
| 					oldestTimestamp = timestamp; | 					oldestTimestamp = timestamp; | ||||||
| 				} | 				} | ||||||
| 			} | 			} | ||||||
|  | 			for (let i = serviceStatus.results.length; i < maximumNumberOfResults; i++) { | ||||||
|  | 				serviceStatusOverTime += createBlankStatusBadge(); | ||||||
|  | 			} | ||||||
| 			let output = "" | 			let output = "" | ||||||
| 				+ "<div class='container py-3 border-left border-right border-top border-black rounded-0'>" | 				+ "<div class='container py-3 border-left border-right border-top rounded-0'>" | ||||||
| 				+ "  <div class='row mb-2'>" | 				+ "  <div class='row mb-2'>" | ||||||
| 				+ "    <div class='col-md-10'>" | 				+ "    <div class='col-md-10'>" | ||||||
| 				+ "      <span class='font-weight-bold'>" + serviceStatus.name + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>" | 				+ "      <span class='font-weight-bold'>" + serviceStatus.name + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>" | ||||||
| @ -306,7 +314,7 @@ | |||||||
| 				+ "      " + generatePrettyTimeAgo(oldestTimestamp) | 				+ "      " + generatePrettyTimeAgo(oldestTimestamp) | ||||||
| 				+ "    </div>" | 				+ "    </div>" | ||||||
| 				+ "    <div class='col-6 text-right'>" | 				+ "    <div class='col-6 text-right'>" | ||||||
| 				+ "      " + generatePrettyTimeAgo(newestTimestamp) | 				+ "      Last updated " + generatePrettyTimeAgo(newestTimestamp) | ||||||
| 				+ "    </div>" | 				+ "    </div>" | ||||||
| 				+ "  </div>" | 				+ "  </div>" | ||||||
| 				+ "</div>"; | 				+ "</div>"; | ||||||
| @ -331,7 +339,7 @@ | |||||||
| 			} | 			} | ||||||
| 			output += "" | 			output += "" | ||||||
| 				+ "<div class='mt-" + (output.length ? '4' : '3') + "'>" | 				+ "<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)'>" | 				+ "  <div class='container pt-2 border-left border-right border-top border-bottom service-group' id='service-group-" + key + "' data-group='" + key + "' onclick='toggleGroup(this)'>" | ||||||
| 				+ "    <h5 class='text-secondary text-monospace pb-0'>" | 				+ "    <h5 class='text-secondary text-monospace pb-0'>" | ||||||
| 				+ "      " + groupStatus + " " + group | 				+ "      " + groupStatus + " " + group | ||||||
| 				+ "      <span class='float-right service-group-arrow' id='service-group-" + key + "-arrow'>" + (isCurrentlyHidden ? "▼" : "▲") + "</span>" | 				+ "      <span class='float-right service-group-arrow' id='service-group-" + key + "-arrow'>" + (isCurrentlyHidden ? "▼" : "▲") + "</span>" | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user