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 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);
|
|
||||||
}
|
try{
|
||||||
json = await response.json();
|
var response = await fetch(api.url);
|
||||||
console.log(json);
|
if (!response.ok){
|
||||||
}catch (error){
|
throw new Error(response.status);
|
||||||
console.log(error.message);
|
}
|
||||||
}
|
json = await response.json();
|
||||||
|
|
||||||
var labels = [];
|
var labels = [];
|
||||||
for (var i = 0; i < resolution; i++){
|
for (var i = 0; i < resolution; i++){
|
||||||
labels.push("");
|
labels.push("");
|
||||||
}
|
}
|
||||||
|
|
||||||
var datasets = [];
|
var datasets = [];
|
||||||
{
|
|
||||||
var data = []
|
|
||||||
for (var j = 0; j < resolution; j++) data.push(0);
|
|
||||||
data[resolution - 1] = json["cpu0"]
|
|
||||||
datasets.push(
|
|
||||||
{
|
{
|
||||||
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",{
|
||||||
|
type: "line",
|
||||||
cpu = new Chart("cpu",{
|
data:{
|
||||||
type: "line",
|
labels: labels,
|
||||||
data:{
|
datasets: datasets
|
||||||
labels: labels,
|
},
|
||||||
datasets: datasets
|
options:{
|
||||||
},
|
responsive: true,
|
||||||
options:{
|
title:{
|
||||||
responsive: true,
|
display: true,
|
||||||
title:{
|
text: "Total Utilization",
|
||||||
display: true,
|
position: "top"
|
||||||
text: "Total Utilization",
|
},
|
||||||
position: "top"
|
animation:{
|
||||||
},
|
duration: 0
|
||||||
animation:{
|
},
|
||||||
duration: 0
|
legend:{
|
||||||
},
|
display: false
|
||||||
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"]
|
|
||||||
}
|
}
|
||||||
]
|
});
|
||||||
},
|
|
||||||
options:{
|
datasets = [];
|
||||||
responsive: false,
|
for (var i = 1; i < json["cpuCount"] + 1; i++){
|
||||||
title:{
|
var data = []
|
||||||
display: true,
|
for (var j = 0; j < resolution; j++) data.push(0);
|
||||||
text: "RAM Usage",
|
data[resolution - 1] = json["cpu" + i]
|
||||||
position: "top"
|
datasets.push(
|
||||||
},
|
{
|
||||||
animation:{
|
label: "cpu" + i,
|
||||||
duration: 0
|
data: data,
|
||||||
|
borderColor: colors[i - 1],
|
||||||
|
fill: false,
|
||||||
|
pointRadius: 0,
|
||||||
|
borderWidth: 2.
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
threads = new Chart("threads", {
|
||||||
|
type: "line",
|
||||||
swap = new Chart("swap",{
|
data:{
|
||||||
type: "doughnut",
|
labels: labels,
|
||||||
labels: x,
|
datasets: datasets
|
||||||
data:{
|
},
|
||||||
labels: x,
|
options:{
|
||||||
datasets:[
|
responsive: true,
|
||||||
{
|
title:{
|
||||||
data: [json["usedSwap"], json["totalSwap"] - json["usedSwap"]],
|
display: true,
|
||||||
backgroundColor: ["darkgreen", "lawngreen"]
|
text: "Thread Utilization",
|
||||||
|
position: "top"
|
||||||
|
},
|
||||||
|
legend:{
|
||||||
|
position: "bottom"
|
||||||
|
},
|
||||||
|
animation:{
|
||||||
|
duration: 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
});
|
||||||
},
|
|
||||||
options:{
|
var x = ["Used", "Free"]
|
||||||
responsive: false,
|
ram = new Chart("ram",{
|
||||||
title:{
|
type: "doughnut",
|
||||||
display: true,
|
data:{
|
||||||
text: "Swap Usage",
|
labels: x,
|
||||||
position: "top"
|
datasets:[
|
||||||
},
|
{
|
||||||
animation:{
|
data: [json["usedRam"], json["totalRam"] - json["usedRam"]],
|
||||||
duration: 0
|
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user