mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2026-04-29 18:25:58 +00:00
Refreshed status display layout for easier reading
This commit is contained in:
@@ -1,52 +1,50 @@
|
||||
// Load server status
|
||||
function loadStatus() {
|
||||
$.getJSON('/api/v1/status', function(jsonData) {
|
||||
$("#status-container").empty();
|
||||
$("#status-container").append(generateStatusCard("Server Information", [
|
||||
`Software Version: ${jsonData["software-version"]}`,
|
||||
`Server Owner Callsign: ${jsonData["server-owner-callsign"]}`,
|
||||
`Server up since: ${moment().subtract(jsonData["uptime"], 'seconds').fromNow()}`,
|
||||
`Memory Use: ${jsonData["mem_use_mb"]} MB`,
|
||||
`Total Spots: ${jsonData["num_spots"]}`,
|
||||
`Total Alerts: ${jsonData["num_alerts"]}`
|
||||
]));
|
||||
$("#status-container").append(generateStatusCard("Web Server", [
|
||||
`Status: ${jsonData["webserver"]["status"]}`,
|
||||
`Last API Access: ${moment.unix(jsonData["webserver"]["last_api_access"]).utc().fromNow()}`,
|
||||
`Last Page Access: ${moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow()}`
|
||||
]));
|
||||
$("#status-container").append(generateStatusCard("Cleanup Service", [
|
||||
`Status: ${jsonData["cleanup"]["status"]}`,
|
||||
`Last Ran: ${moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow()}`
|
||||
]));
|
||||
$("#software-version").text(jsonData["software-version"]);
|
||||
$("#server-owner-callsign").text(jsonData["server-owner-callsign"]);
|
||||
$("#up-since").text(moment().subtract(jsonData["uptime"], 'seconds').fromNow());
|
||||
$("#memory-use").text(jsonData["mem_use_mb"] + " MB");
|
||||
$("#total-spots").text(jsonData["num_spots"]);
|
||||
$("#total-alerts").text(jsonData["num_alerts"]);
|
||||
|
||||
$("#web-server-status").text(jsonData["webserver"]["status"]);
|
||||
$("#web-server-last-api").text(moment.unix(jsonData["webserver"]["last_api_access"]).utc().fromNow());
|
||||
$("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
|
||||
|
||||
$("#cleanup-status").text(jsonData["cleanup"]["status"]);
|
||||
$("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
|
||||
|
||||
jsonData["spot_providers"].forEach(p => {
|
||||
$("#status-container").append(generateStatusCard("Spot Provider: " + p["name"], [
|
||||
`Status: ${p["status"]}`,
|
||||
`Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`,
|
||||
`Latest Spot: ${(p["enabled"] && p["last_spot"] > 0) ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}`
|
||||
]));
|
||||
$("#spot-providers-status-container").append(`
|
||||
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
|
||||
<div class="col"><strong>${p["name"]}</strong></div>
|
||||
<div class="col">Status: ${p["status"]}</div>
|
||||
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
|
||||
<div class="col">Latest spot: ${(p["enabled"] && p["last_spot"] > 0) ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}</div>
|
||||
</div>`);
|
||||
});
|
||||
|
||||
jsonData["alert_providers"].forEach(p => {
|
||||
$("#status-container").append(generateStatusCard("Alert Provider: " + p["name"], [
|
||||
`Status: ${p["status"]}`,
|
||||
`Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`
|
||||
]));
|
||||
$("#alert-providers-status-container").append(`
|
||||
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
|
||||
<div class="col"><strong>${p["name"]}</strong></div>
|
||||
<div class="col">Status: ${p["status"]}</div>
|
||||
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
|
||||
</div>`);
|
||||
});
|
||||
|
||||
jsonData["solar_condition_providers"].forEach(p => {
|
||||
$("#condition-providers-status-container").append(`
|
||||
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
|
||||
<div class="col"><strong>${p["name"]}</strong></div>
|
||||
<div class="col">Status: ${p["status"]}</div>
|
||||
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
|
||||
</div>`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Generate a status card
|
||||
function generateStatusCard(title, textLines) {
|
||||
let $col = $("<div class='col'>");
|
||||
let $card = $("<div class='card'>");
|
||||
let $card_body = $("<div class='card-body'>");
|
||||
$card_body.append(`<h5 class='card-title'>${title}</h5>`);
|
||||
$card_body.append(`<p class='card-text'>${textLines.join("<br/>")}</p>`);
|
||||
$card.append($card_body);
|
||||
$col.append($card);
|
||||
return $col;
|
||||
}
|
||||
|
||||
// Startup
|
||||
$(document).ready(function() {
|
||||
loadStatus();
|
||||
|
||||
Reference in New Issue
Block a user