Began improvements to server monitor page. Notifies when a server is offline now
This commit is contained in:
nc5432
parent
fc4530b244
commit
4afafee5b7
@ -2,152 +2,169 @@ var threads;
|
||||
var cpu;
|
||||
var ram;
|
||||
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 resolution = 32;
|
||||
|
||||
window.addEventListener("load", async function () {
|
||||
var json;
|
||||
try{
|
||||
var response = await fetch(api);
|
||||
if (!response.ok){
|
||||
throw new Error(response.status);
|
||||
}
|
||||
json = await response.json();
|
||||
console.log(json);
|
||||
}catch (error){
|
||||
console.log(error.message);
|
||||
}
|
||||
|
||||
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(
|
||||
apis.forEach(async api => {
|
||||
var json;
|
||||
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 labels = [];
|
||||
for (var i = 0; i < resolution; i++){
|
||||
labels.push("");
|
||||
}
|
||||
|
||||
var datasets = [];
|
||||
{
|
||||
label: "Total Utilization",
|
||||
data: data,
|
||||
borderColor: colors[0],
|
||||
fill: false,
|
||||
pointRadius: 0
|
||||
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
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
cpu = new Chart("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.
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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"]
|
||||
|
||||
cpu = new Chart("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
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
options:{
|
||||
responsive: false,
|
||||
title:{
|
||||
display: true,
|
||||
text: "RAM Usage",
|
||||
position: "top"
|
||||
},
|
||||
animation:{
|
||||
duration: 0
|
||||
});
|
||||
|
||||
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.
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
swap = new Chart("swap",{
|
||||
type: "doughnut",
|
||||
labels: x,
|
||||
data:{
|
||||
labels: x,
|
||||
datasets:[
|
||||
{
|
||||
data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]],
|
||||
backgroundColor: ["darkgreen", "lawngreen"]
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
options:{
|
||||
responsive: false,
|
||||
title:{
|
||||
display: true,
|
||||
text: "Swap Usage",
|
||||
position: "top"
|
||||
},
|
||||
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() {
|
||||
try{
|
||||
var response = await fetch(api);
|
||||
if (!response.ok){
|
||||
throw new Error(response.status);
|
||||
}
|
||||
var json = await response.json();
|
||||
for (var i = 1; i < resolution; i++){
|
||||
cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i];
|
||||
}
|
||||
cpu.data.datasets[0].data[resolution - 1] = json["cpu0"];
|
||||
cpu.update();
|
||||
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];
|
||||
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();
|
||||
for (var i = 1; i < resolution; i++){
|
||||
cpu.data.datasets[0].data[i - 1] = cpu.data.datasets[0].data[i];
|
||||
}
|
||||
cpu.data.datasets[0].data[resolution - 1] = json["cpu0"];
|
||||
cpu.update();
|
||||
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();
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -24,6 +24,9 @@
|
||||
<div class="box vflex thin">
|
||||
<h1>Server Monitor</h1>
|
||||
<hr>
|
||||
</div>
|
||||
<br>
|
||||
<div id="Main" class="box vflex thin">
|
||||
<canvas id="cpu"></canvas>
|
||||
<br>
|
||||
<canvas id="threads"></canvas>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user