From 4afafee5b7080d8cbbdff544ad8798e62b29004e Mon Sep 17 00:00:00 2001
From: nc5432 <ncasey113@gmail.com>
Date: Wed, 18 Jun 2025 15:38:05 -0400
Subject: [PATCH] Began improvements to server monitor page. Notifies when a
 server is offline now

---
 html/js/monitor.js      | 344 +++++++++++++++++++++-------------------
 html/pages/monitor.html |   3 +
 2 files changed, 185 insertions(+), 162 deletions(-)

diff --git a/html/js/monitor.js b/html/js/monitor.js
index 2e72109..9b6f3aa 100644
--- a/html/js/monitor.js
+++ b/html/js/monitor.js
@@ -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);
-    }
+    });
 }
diff --git a/html/pages/monitor.html b/html/pages/monitor.html
index 098f9b9..e34b5cf 100644
--- a/html/pages/monitor.html
+++ b/html/pages/monitor.html
@@ -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>