nolan/nolan-casey-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for monitoring multiple servers

Browse Source
This commit is contained in:
nc5432 2025-06-18 16:48:50 -04:00
parent 4afafee5b7
commit 81cb89af88
2 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
html/js/monitor.js
View File

@ -1,30 +1,81 @@
var threads;
var cpu;
var ram;
var swap;
const apis = [
{
"id":"Main",
"url":"https://api.nolancasey.click/server",
"online": true
"online": true,
"failedAttempts": 0
},
{
"id":"Proxy",
"url":"https://api.nolancasey.click/proxy",
"online": true,
"failedAttempts": 0
},
{
"id":"Lightweight",
"url":"https://api.nolancasey.click/lightweight",
"online": true,
"failedAttempts": 0
}
];
const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"];
const resolution = 32;
window.addEventListener("load", async function () {
apis.forEach(api => {
var div = this.document.createElement("div");
div.id = api.id;
div.classList.add("box");
div.classList.add("vflex");
div.classList.add("thin");
document.body.insertBefore(div, document.body.lastElementChild);
document.body.insertBefore(document.createElement("br"), document.body.lastElementChild);
});
apis.forEach(async api => {
var json;
// var div = document.getElementById(api.id);
var div = document.getElementById(api.id);
console.log(div.childNodes);
try{
var response = await fetch(api.url);
if (!response.ok){
throw new Error(response.status);
}
json = await response.json();
var title = document.createElement("h3");
var hr = document.createElement("hr");
title.innerText = api.id + " Server";
var cpuCanvas = document.createElement("canvas");
cpuCanvas.id = api.id + "_cpu";
var br1 = document.createElement("br");
var threadsCanvas = document.createElement("canvas");
threadsCanvas.id = api.id + "_threads";
var br2 = document.createElement("br");
var memDiv = document.createElement("div");
memDiv.classList.add("center-flex")
var ramCanvas = document.createElement("canvas");
ramCanvas.classList.add("donut");
ramCanvas.id = api.id + "_ram";
var swapCanvas = document.createElement("canvas");
swapCanvas.classList.add("donut");
swapCanvas.id = api.id + "_swap";
memDiv.appendChild(ramCanvas);
memDiv.appendChild(swapCanvas);
var br3 = document.createElement("br");
div.appendChild(title);
div.appendChild(hr);
div.appendChild(cpuCanvas);
div.appendChild(br1);
div.appendChild(threadsCanvas);
div.appendChild(br2);
div.appendChild(memDiv);
div.appendChild(br3);
var labels = [];
for (var i = 0; i < resolution; i++){
labels.push("");
@ -46,7 +97,7 @@ window.addEventListener("load", async function () {
)
}
cpu = new Chart("cpu",{
cpu = new Chart(api.id + "_cpu",{
type: "line",
data:{
labels: labels,
@ -85,7 +136,7 @@ window.addEventListener("load", async function () {
);
}
threads = new Chart("threads", {
threads = new Chart(api.id + "_threads", {
type: "line",
data:{
labels: labels,
@ -108,7 +159,7 @@ window.addEventListener("load", async function () {
});
var x = ["Used", "Free"]
ram = new Chart("ram",{
ram = new Chart(api.id + "_ram",{
type: "doughnut",
data:{
labels: x,
@ -132,7 +183,7 @@ window.addEventListener("load", async function () {
}
});
swap = new Chart("swap",{
swap = new Chart(api.id + "_swap",{
type: "doughnut",
labels: x,
data:{
@ -159,11 +210,13 @@ window.addEventListener("load", async function () {
}catch (error){
div.textContent = "";
api.online = false;
var p = document.createElement("p");
var node = document.createTextNode(api.id + " Server Offline");
var p = document.createElement("h3");
var node = document.createTextNode("Connection error to server: " + api.id);
var br = document.createElement("br");
console.log(api.id + " Server Offline");
p.appendChild(node);
div.appendChild(p);
div.appendChild(br);
console.log(error.message);
}
});
@ -200,7 +253,21 @@ async function increment() {
ram.update();
swap.update();
}catch (error){
console.log(error.message);
if (api.failedAttempts > 5){
api.online = false;
var div = document.getElementById(api.id);
div.textContent = "";
var p = document.createElement("h3");
var node = document.createTextNode("Connection error to server: " + api.id);
var br = document.createElement("br");
console.log(api.id + " Server Offline");
p.appendChild(node);
div.appendChild(p);
div.appendChild(br);
console.log(error.message);
}else{
api.failedAttempts += 1;
}
}
});
}

12
html/pages/monitor.html
View File

@ -26,18 +26,6 @@
<hr>
</div>
<br>
<div id="Main" class="box vflex thin">
<canvas id="cpu"></canvas>
<br>
<canvas id="threads"></canvas>
<br>
<div class="center-flex">
<canvas class="donut" id="ram"></canvas>
<canvas class="donut" id="swap"></canvas>
</div>
<br>
</div>
<br>
<div class="box hflex thin">
<a href="https://github.com/nc5432" class="site-icon" target="_blank"><img class="icon-image" src="/images/github-mark-white.svg" alt="Github link"></a>
<a href="https://gitea.nolancasey.click" class="site-icon" target="_blank"><img class="icon-image" src="/images/Gitea_Logo.svg" alt="Gitea link"></a>