Added support for monitoring multiple servers
This commit is contained in:
parent
4afafee5b7
commit
81cb89af88
@ -1,30 +1,81 @@
|
|||||||
var threads;
|
|
||||||
var cpu;
|
|
||||||
var ram;
|
|
||||||
var swap;
|
|
||||||
const apis = [
|
const apis = [
|
||||||
{
|
{
|
||||||
"id":"Main",
|
"id":"Main",
|
||||||
"url":"https://api.nolancasey.click/server",
|
"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 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 () {
|
||||||
|
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 => {
|
apis.forEach(async api => {
|
||||||
var json;
|
var json;
|
||||||
|
// var div = document.getElementById(api.id);
|
||||||
var div = document.getElementById(api.id);
|
var div = document.getElementById(api.id);
|
||||||
console.log(div.childNodes);
|
|
||||||
|
|
||||||
try{
|
try{
|
||||||
var response = await fetch(api.url);
|
var response = await fetch(api.url);
|
||||||
if (!response.ok){
|
if (!response.ok){
|
||||||
|
|
||||||
throw new Error(response.status);
|
throw new Error(response.status);
|
||||||
}
|
}
|
||||||
json = await response.json();
|
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 = [];
|
var labels = [];
|
||||||
for (var i = 0; i < resolution; i++){
|
for (var i = 0; i < resolution; i++){
|
||||||
labels.push("");
|
labels.push("");
|
||||||
@ -46,7 +97,7 @@ window.addEventListener("load", async function () {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
cpu = new Chart("cpu",{
|
cpu = new Chart(api.id + "_cpu",{
|
||||||
type: "line",
|
type: "line",
|
||||||
data:{
|
data:{
|
||||||
labels: labels,
|
labels: labels,
|
||||||
@ -85,7 +136,7 @@ window.addEventListener("load", async function () {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
threads = new Chart("threads", {
|
threads = new Chart(api.id + "_threads", {
|
||||||
type: "line",
|
type: "line",
|
||||||
data:{
|
data:{
|
||||||
labels: labels,
|
labels: labels,
|
||||||
@ -108,7 +159,7 @@ window.addEventListener("load", async function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
var x = ["Used", "Free"]
|
var x = ["Used", "Free"]
|
||||||
ram = new Chart("ram",{
|
ram = new Chart(api.id + "_ram",{
|
||||||
type: "doughnut",
|
type: "doughnut",
|
||||||
data:{
|
data:{
|
||||||
labels: x,
|
labels: x,
|
||||||
@ -132,7 +183,7 @@ window.addEventListener("load", async function () {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
swap = new Chart("swap",{
|
swap = new Chart(api.id + "_swap",{
|
||||||
type: "doughnut",
|
type: "doughnut",
|
||||||
labels: x,
|
labels: x,
|
||||||
data:{
|
data:{
|
||||||
@ -159,11 +210,13 @@ window.addEventListener("load", async function () {
|
|||||||
}catch (error){
|
}catch (error){
|
||||||
div.textContent = "";
|
div.textContent = "";
|
||||||
api.online = false;
|
api.online = false;
|
||||||
var p = document.createElement("p");
|
var p = document.createElement("h3");
|
||||||
var node = document.createTextNode(api.id + " Server Offline");
|
var node = document.createTextNode("Connection error to server: " + api.id);
|
||||||
|
var br = document.createElement("br");
|
||||||
console.log(api.id + " Server Offline");
|
console.log(api.id + " Server Offline");
|
||||||
p.appendChild(node);
|
p.appendChild(node);
|
||||||
div.appendChild(p);
|
div.appendChild(p);
|
||||||
|
div.appendChild(br);
|
||||||
console.log(error.message);
|
console.log(error.message);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -200,7 +253,21 @@ async function increment() {
|
|||||||
ram.update();
|
ram.update();
|
||||||
swap.update();
|
swap.update();
|
||||||
}catch (error){
|
}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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -26,18 +26,6 @@
|
|||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<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">
|
<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://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>
|
<a href="https://gitea.nolancasey.click" class="site-icon" target="_blank"><img class="icon-image" src="/images/Gitea_Logo.svg" alt="Gitea link"></a>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user