wah.su/wah-su.github.io
1
0
Fork 0
mirror of https://github.com/wah-su/wah-su.github.io.git synced 2025-05-03 03:19:40 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: status indicator and page

Browse source 
add transition animation to status indicator icon
refactor icon and text to be one element
add Unknown and Loading status
remove sticky class from header
This commit is contained in:
Kentai Radiquum 2024-06-22 14:27:05 +05:00
parent 9b9886a8d2
commit 62644e4c6f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 96 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

118
public/js/status.js
View file

@ -1,63 +1,85 @@
const statusIcon = document.getElementById("status-icon");
const statusText = document.getElementById("status-text");
const serviceUp = {
icon: document.getElementById("status-up-icon"),
text: document.getElementById("status-up-text"),
color: ["bg-green-500", "dark:bg-green-400"],
text: "All Services Operational",
};
const serviceDegraded = {
icon: document.getElementById("status-degraded-icon"),
text: document.getElementById("status-degraded-text"),
color: ["bg-yellow-400", "dark:bg-yellow-200"],
text: "Degraded Services",
};
const serviceDown = {
icon: document.getElementById("status-down-icon"),
text: document.getElementById("status-down-text"),
color: ["bg-red-600", "dark:bg-red-500"],
text: "All Services Down",
};
const serviceUnknown = {
color: ["bg-gray-500", "dark:bg-gray-400"],
text: "Services Status Unknown",
};
async function getServicesHealth() {
const serviceStatus = await fetch(
"https://status.wah.su/api/status-page/heartbeat/services"
);
const services = await serviceStatus.json();
const heartbeatDict = services.heartbeatList;
let lastHeartbeats = [];
for (const [key, value] of Object.entries(heartbeatDict)) {
lastHeartbeats.push(
heartbeatDict[key][heartbeatDict[key].length - 1].status
try {
const serviceStatus = await fetch(
"https://status.wah.su/api/status-page/heartbeat/services"
);
}
let status = "up";
const count = lastHeartbeats.reduce((partialSum, a) => partialSum + a, 0);
const services = await serviceStatus.json();
const heartbeatDict = services.heartbeatList;
let lastHeartbeats = [];
if (count === lastHeartbeats.length) {
status = "up";
} else if (count === 0) {
status = "down";
} else {
status = "degraded";
}
for (const [key, value] of Object.entries(heartbeatDict)) {
lastHeartbeats.push(
heartbeatDict[key][heartbeatDict[key].length - 1].status
);
}
if (status === "up") {
serviceUp.icon.classList.remove("hidden");
serviceUp.text.classList.remove("hidden");
serviceDegraded.icon.classList.add("hidden");
serviceDegraded.text.classList.add("hidden");
serviceDown.icon.classList.add("hidden");
serviceDown.text.classList.add("hidden");
} else if (status === "degraded") {
serviceUp.icon.classList.add("hidden");
serviceUp.text.classList.add("hidden");
serviceDegraded.icon.classList.remove("hidden");
serviceDegraded.text.classList.remove("hidden");
serviceDown.icon.classList.add("hidden");
serviceDown.text.classList.add("hidden");
} else if (status === "down") {
serviceUp.icon.classList.add("hidden");
serviceUp.text.classList.add("hidden");
serviceDegraded.icon.classList.add("hidden");
serviceDegraded.text.classList.add("hidden");
serviceDown.icon.classList.remove("hidden");
serviceDown.text.classList.remove("hidden");
let status = "up";
const count = lastHeartbeats.reduce((partialSum, a) => partialSum + a, 0);
if (count === lastHeartbeats.length) {
status = "up";
} else if (count === 0) {
status = "down";
} else {
status = "degraded";
}
if (status === "up") {
statusIcon.classList.add(...serviceUp.color);
statusIcon.classList.remove(
...serviceDegraded.color,
...serviceDown.color,
...serviceUnknown.color
);
statusText.textContent = serviceUp.text;
} else if (status === "degraded") {
statusIcon.classList.add(...serviceDegraded.color);
statusIcon.classList.remove(
...serviceUp.color,
...serviceDown.color,
...serviceUnknown.color
);
statusText.textContent = serviceDegraded.text;
} else if (status === "down") {
statusIcon.classList.add(...serviceDown.color);
statusIcon.classList.remove(
...serviceUp.color,
...serviceDegraded.color,
...serviceUnknown.color
);
statusText.textContent = serviceDown.text;
}
} catch (error) {
statusIcon.classList.add(...serviceUnknown.color);
statusIcon.classList.remove(
...serviceUp.color,
...serviceDegraded.color,
...serviceDown.color
);
statusText.textContent = serviceUnknown.text;
console.log("Failed to fetch services status: " + error);
return;
}
}