286 lines
9.7 KiB
JavaScript
286 lines
9.7 KiB
JavaScript
const apis = [
|
|
{
|
|
"id":"Main",
|
|
"url":"https://api.nolancasey.click/server",
|
|
"online": true,
|
|
"failedAttempts": 0,
|
|
"cpu": null,
|
|
"threads": null,
|
|
"ram": null,
|
|
"swap": null
|
|
},
|
|
{
|
|
"id":"Lightweight",
|
|
"url":"https://api.nolancasey.click/lightweight",
|
|
"online": true,
|
|
"failedAttempts": 0,
|
|
"cpu": null,
|
|
"threads": null,
|
|
"ram": null,
|
|
"swap": null
|
|
},
|
|
{
|
|
"id":"Proxy",
|
|
"url":"https://api.nolancasey.click/proxy",
|
|
"online": true,
|
|
"failedAttempts": 0,
|
|
"cpu": null,
|
|
"threads": null,
|
|
"ram": null,
|
|
"swap": null
|
|
}
|
|
];
|
|
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);
|
|
|
|
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("");
|
|
}
|
|
|
|
var datasets = [];
|
|
{
|
|
var data = []
|
|
for (var j = 0; j < resolution; j++) data.push(0);
|
|
data[resolution - 1] = json["cpu0"]
|
|
datasets.push(
|
|
{
|
|
label: "Total Utilization",
|
|
data: data,
|
|
borderColor: colors[0],
|
|
fill: false,
|
|
pointRadius: 0
|
|
}
|
|
)
|
|
}
|
|
|
|
api["cpu"] = new Chart(api.id + "_cpu",{
|
|
type: "line",
|
|
data:{
|
|
labels: labels,
|
|
datasets: datasets
|
|
},
|
|
options:{
|
|
responsive: true,
|
|
title:{
|
|
display: true,
|
|
text: "Total Utilization",
|
|
position: "top"
|
|
},
|
|
animation:{
|
|
duration: 0
|
|
},
|
|
legend:{
|
|
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.
|
|
}
|
|
);
|
|
}
|
|
|
|
api["threads"] = new Chart(api.id + "_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"]
|
|
api["ram"] = new Chart(api.id + "_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
|
|
}
|
|
}
|
|
});
|
|
|
|
api["swap"] = new Chart(api.id + "_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("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);
|
|
}
|
|
});
|
|
|
|
this.setInterval(increment, 1000);
|
|
});
|
|
|
|
async function increment() {
|
|
apis.forEach(async api => {
|
|
if (!api.online) return;
|
|
try{
|
|
var response = await fetch(api.url);
|
|
if (!response.ok){
|
|
throw new Error(response.status);
|
|
}
|
|
var json = await response.json();
|
|
api.failedAttempts = 0;
|
|
|
|
for (var i = 1; i < resolution; i++){
|
|
api["cpu"].data.datasets[0].data[i - 1] = api["cpu"].data.datasets[0].data[i];
|
|
}
|
|
api["cpu"].data.datasets[0].data[resolution - 1] = json["cpu0"];
|
|
api["cpu"].update();
|
|
for (var i = 0; i < json["cpuCount"]; i++){
|
|
for (var j = 1; j < resolution; j++){
|
|
api["threads"].data.datasets[i].data[j - 1] = api["threads"].data.datasets[i].data[j];
|
|
}
|
|
api["threads"].data.datasets[i].data[resolution - 1] = json["cpu" + (i + 1)];
|
|
}
|
|
api["threads"].update();
|
|
api["ram"].data.datasets[0].data[0] = json["usedRam"];
|
|
api["ram"].data.datasets[0].data[1] = json["totalRam"] - json["usedRam"];
|
|
api["swap"].data.datasets[0].data[0] = json["usedSwap"];
|
|
api["swap"].data.datasets[0].data[1] = json["totalSwap"] - json["usedSwap"];
|
|
api["ram"].update();
|
|
api["swap"].update();
|
|
}catch (error){
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
}
|