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

Began improvements to server monitor page. Notifies when a server is offline now

Browse Source
This commit is contained in:
nc5432 2025-06-18 15:38:05 -04:00
parent fc4530b244
commit 4afafee5b7
2 changed files with 185 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

338
html/js/monitor.js
View File

@ -2,152 +2,169 @@ var threads;
var cpu; var cpu;
var ram; var ram;
var swap; var swap;
const api = "https://api.nolancasey.click/server" const apis = [
{
"id":"Main",
"url":"https://api.nolancasey.click/server",
"online": true
}
];
const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"]; const colors = ["red", "green", "blue", "chartreuse", "darkmagenta", "darkkhaki", "purple", "salmon", "yellow", "blueviolet", "chocolate", "crimson", "cyan", "darkslategrey", "khaki", "hotpink"];
const resolution = 32; const resolution = 32;
window.addEventListener("load", async function () { window.addEventListener("load", async function () {
var json; apis.forEach(async api => {
try{ var json;
var response = await fetch(api); var div = document.getElementById(api.id);
if (!response.ok){ console.log(div.childNodes);
throw new Error(response.status);
}
json = await response.json();
console.log(json);
}catch (error){
console.log(error.message);
}
var labels = []; try{
for (var i = 0; i < resolution; i++){ var response = await fetch(api.url);
labels.push(""); if (!response.ok){
} throw new Error(response.status);
}
json = await response.json();
var datasets = []; var labels = [];
{ for (var i = 0; i < resolution; i++){
var data = [] labels.push("");
for (var j = 0; j < resolution; j++) data.push(0); }
data[resolution - 1] = json["cpu0"]
datasets.push( var datasets = [];
{ {
label: "Total Utilization", var data = []
data: data, for (var j = 0; j < resolution; j++) data.push(0);
borderColor: colors[0], data[resolution - 1] = json["cpu0"]
fill: false, datasets.push(
pointRadius: 0 {
label: "Total Utilization",
data: data,
borderColor: colors[0],
fill: false,
pointRadius: 0
}
)
} }
)
}
cpu = new Chart("cpu",{ cpu = new Chart("cpu",{
type: "line", type: "line",
data:{ data:{
labels: labels, labels: labels,
datasets: datasets datasets: datasets
}, },
options:{ options:{
responsive: true, responsive: true,
title:{ title:{
display: true, display: true,
text: "Total Utilization", text: "Total Utilization",
position: "top" position: "top"
}, },
animation:{ animation:{
duration: 0 duration: 0
}, },
legend:{ legend:{
display: false display: false
} }
}
});
datasets = [];
for (var i = 1; i < json["cpuCount"] + 1; i++){
var data = []
for (var j = 0; j < resolution; j++) data.push(0);
data[resolution - 1] = json["cpu" + i]
datasets.push(
{
label: "cpu" + i,
data: data,
borderColor: colors[i - 1],
fill: false,
pointRadius: 0,
borderWidth: 2.
}
);
}
threads = new Chart("threads", {
type: "line",
data:{
labels: labels,
datasets: datasets
},
options:{
responsive: true,
title:{
display: true,
text: "Thread Utilization",
position: "top"
},
legend:{
position: "bottom"
},
animation:{
duration: 0
}
}
});
var x = ["Used", "Free"]
ram = new Chart("ram",{
type: "doughnut",
data:{
labels: x,
datasets:[
{
data: [json["usedRam"], json["totalRam"] - json["usedRam"]],
backgroundColor: ["darkred", "lightcoral"]
} }
] });
},
options:{
responsive: false,
title:{
display: true,
text: "RAM Usage",
position: "top"
},
animation:{
duration: 0
}
}
});
swap = new Chart("swap",{ datasets = [];
type: "doughnut", for (var i = 1; i < json["cpuCount"] + 1; i++){
labels: x, var data = []
data:{ for (var j = 0; j < resolution; j++) data.push(0);
labels: x, data[resolution - 1] = json["cpu" + i]
datasets:[ datasets.push(
{ {
data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]], label: "cpu" + i,
backgroundColor: ["darkgreen", "lawngreen"] data: data,
} borderColor: colors[i - 1],
] fill: false,
}, pointRadius: 0,
options:{ borderWidth: 2.
responsive: false, }
title:{ );
display: true,
text: "Swap Usage",
position: "top"
},
animation:{
duration: 0
} }
threads = new Chart("threads", {
type: "line",
data:{
labels: labels,
datasets: datasets
},
options:{
responsive: true,
title:{
display: true,
text: "Thread Utilization",
position: "top"
},
legend:{
position: "bottom"
},
animation:{
duration: 0
}
}
});
var x = ["Used", "Free"]
ram = new Chart("ram",{
type: "doughnut",
data:{
labels: x,
datasets:[
{
data: [json["usedRam"], json["totalRam"] - json["usedRam"]],
backgroundColor: ["darkred", "lightcoral"]
}
]
},
options:{
responsive: false,
title:{
display: true,
text: "RAM Usage",
position: "top"
},
animation:{
duration: 0
}
}
});
swap = new Chart("swap",{
type: "doughnut",
labels: x,
data:{
labels: x,
datasets:[
{
data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]],
backgroundColor: ["darkgreen", "lawngreen"]
}
]
},
options:{
responsive: false,
title:{
display: true,
text: "Swap Usage",
position: "top"
},
animation:{
duration: 0
}
}
});
}catch (error){
div.textContent = "";
api.online = false;
var p = document.createElement("p");
var node = document.createTextNode(api.id + " Server Offline");
console.log(api.id + " Server Offline");
p.appendChild(node);
div.appendChild(p);
console.log(error.message);
} }
}); });
@ -155,32 +172,35 @@ window.addEventListener("load", async function () {
}); });
async function increment() { async function increment() {
try{ apis.forEach(async api => {
var response = await fetch(api); if (!api.online) return;
if (!response.ok){ try{
throw new Error(response.status); var response = await fetch(api.url);
} if (!response.ok){
var json = await response.json(); throw new Error(response.status);
for (var i = 1; i < resolution; i++){ }
cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i]; var json = await response.json();
} for (var i = 1; i < resolution; i++){
cpu.data.datasets[0].data[resolution - 1] = json["cpu0"]; cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i];
cpu.update(); }
for (var i = 0; i < json["cpuCount"]; i++){ cpu.data.datasets[0].data[resolution - 1] = json["cpu0"];
for (var j = 1; j < resolution; j++){ cpu.update();
threads.data.datasets[i].data[j - 1] = threads.data.datasets[i].data[j]; for (var i = 0; i < json["cpuCount"]; i++){
for (var j = 1; j < resolution; j++){
threads.data.datasets[i].data[j - 1] = threads.data.datasets[i].data[j];
}
threads.data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)];
threads.update();
} }
threads.data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)];
threads.update(); threads.update();
ram.data.datasets[0].data[0] = json["usedRam"];
ram.data.datasets[0].data[1] = json["totalRam"] - json["usedRam"];
swap.data.datasets[0].data[0] = json["usedSwap"];
swap.data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"];
ram.update();
swap.update();
}catch (error){
console.log(error.message);
} }
threads.update(); });
ram.data.datasets[0].data[0] = json["usedRam"];
ram.data.datasets[0].data[1] = json["totalRam"] - json["usedRam"];
swap.data.datasets[0].data[0] = json["usedSwap"];
swap.data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"];
ram.update();
swap.update();
}catch (error){
console.log(error.message);
}
} }

3
html/pages/monitor.html
View File

@ -24,6 +24,9 @@
<div class="box vflex thin"> <div class="box vflex thin">
<h1>Server Monitor</h1> <h1>Server Monitor</h1>
<hr> <hr>
</div>
<br>
<div id="Main" class="box vflex thin">
<canvas id="cpu"></canvas> <canvas id="cpu"></canvas>
<br> <br>
<canvas id="threads"></canvas> <canvas id="threads"></canvas>