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

feat: add service status widget.

Browse source
This commit is contained in:
Kentai Radiquum 2024-05-19 16:46:28 +05:00
parent adaa5a8c9b
commit 2d0a1adf42
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 102 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +1,2 @@
node_modules
TODO.md

13
index.html
View file

@ -12,6 +12,16 @@
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0">
<div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between">
<div><img src="/public/images/logo-light.svg" alt="wah.su" /></div>
<div>
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
<div class="bg-green-500 w-4 h-4 rounded-full hidden" id="status-up-icon"></div>
<div class="bg-yellow-400 w-4 h-4 rounded-full hidden" id="status-degraded-icon"></div>
<div class="bg-red-600 w-4 h-4 rounded-full hidden" id="status-down-icon"></div>
<p class="hidden" id="status-up-text">All Systems Operational.</p>
<p class="hidden" id="status-degraded-text">Degraded Services.</p>
<p class="hidden" id="status-down-text">All Systems Down.</p>
</a>
</div>
<div class="flex flex-row items-center justify-center">
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
@ -34,7 +44,7 @@
to the right place! wah.su is all about providing a safe and stable
environment for your projects.
Run by yours truly, @radiquum, we believe in quality over quantity, which is why access is currently invite-only.
Run by yours truly, <a href="https://bento.me/radiquum" class="font-medium text-blue-600 dark:text-blue-500 hover:underline" target="_blank">@radiquum</a>, we believe in quality over quantity, which is why access is currently invite-only.
Interested in joining the pack? Reach out to me to sniff out an invitation.
</p>
<!--noformat-->
@ -48,6 +58,7 @@
<script src="/public/js/flowbite.min.js"></script>
<script src="/public/js/cards.js"></script>
<script src="/public/js/status.js"></script>
</body>
</html>

66
public/js/status.js Normal file
View file

@ -0,0 +1,66 @@
const serviceUp = {
icon: document.getElementById("status-up-icon"),
text: document.getElementById("status-up-text"),
};
const serviceDegraded = {
icon: document.getElementById("status-degraded-icon"),
text: document.getElementById("status-degraded-text"),
};
const serviceDown = {
icon: document.getElementById("status-down-icon"),
text: document.getElementById("status-down-text"),
};
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
);
}
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") {
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");
}
}
getServicesHealth();
setInterval(getServicesHealth, 600000);

68
public/output.css
View file

@ -1162,10 +1162,6 @@ input:checked + .toggle-bg {
margin-top: 3.5rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
@ -1174,34 +1170,6 @@ input:checked + .toggle-bg {
margin-top: 1.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-28 {
margin-top: 7rem;
}
.block {
display: block;
}
@ -1422,6 +1390,10 @@ input:checked + .toggle-bg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-e-lg {
border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
@ -1513,6 +1485,21 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / 0.5);
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(14 159 110 / var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(224 36 36 / var(--tw-bg-opacity));
}
.bg-yellow-400 {
--tw-bg-opacity: 1;
background-color: rgb(227 160 8 / var(--tw-bg-opacity));
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
@ -1563,11 +1550,6 @@ input:checked + .toggle-bg {
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
@ -1576,14 +1558,6 @@ input:checked + .toggle-bg {
padding-top: 0.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-4 {
padding-top: 1rem;
}
@ -1776,6 +1750,10 @@ input:checked + .toggle-bg {
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.focus\:z-10:focus {
z-index: 10;
}