Created the server monitor page

html/css/style.css

@@ -79,6 +79,9 @@ p{
     flex-direction: column;
     align-items: center;
 }
+canvas{
+    flex-shrink: 10;
+}
 .button{
     background-color: var(--light-grey);
     color: var(--white);

html/js/monitor.js

@@ -0,0 +1,182 @@
+var threads;
+var cpu;
+var ram;
+var swap;
+const api = "https://api.nolancasey.click/server"
+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(
+            {
+                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
+            }
+        }
+    });
+
+    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
+            }
+        )
+    }
+
+    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:{
+            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
+            }
+        }
+    });
+
+    this.setInterval(increment, 1000);
+});
+
+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];
+            }
+            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);
+    }
+}

html/pages/monitor.html

@@ -11,6 +11,8 @@
         <link href="https://fonts.googleapis.com/css2?family=Balthazar&family=Germania+One&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Germania+One&display=swap" rel="stylesheet">
         <script src="/js/colors.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+        <script src="/js/monitor.js"></script>
     </head>
     <body>
         <header>
@@ -22,8 +24,15 @@
         <div class="box vflex thin">
             <h1>Server Monitor</h1>
             <hr>
-            <p>Coming Soon <span class="small">TM</span></p>
-            <img id="fury" src="/images/toothless-dragon-toothless.gif" alt="Really cool dancing Toothless gif" class="about-image-h">
+            <canvas id="cpu"></canvas>
+            <br>
+            <canvas id="threads"></canvas>
+            <br>
+            <span class="hflex">
+                <canvas id="ram"></canvas>
+                <canvas id="swap"></canvas>
+            </span>
+            <br>
         </div>
         <br>
         <div class="box hflex thin">