From ef546f9c66117716bdd6e8340206130c0cadf590 Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Mon, 4 Dec 2023 00:41:52 +0100
Subject: [PATCH] feat: added super simple html chart polling api

it's the one i'm using from my site
---
 index.html | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 index.html

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e56bf5c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+<title>sysload::alemi.dev</title>
+<style>
+body {
+  background-color: #111111;
+}
+.full-size {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<div>
+  <canvas id="#chart" class="full-size"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+  function randomStr(len) {
+    let text = "";
+    const charset = "abcdefghijklmnopqrstuvwxyz0123456789";
+    for (let i = 0; i < len; i++) {
+      text += charset.charAt(Math.floor(Math.random() * charset.length));
+    }
+    return text;
+  }
+
+  const ctx = document.getElementById('#chart');
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const interval = urlParams.get("interval") || 30;
+  const samples = urlParams.get("samples") || 100;
+  const apiHost = urlParams.get("host") || "alemi.dev";
+  const deltaSession = urlParams.get("session") || randomStr(16);
+
+  Chart.defaults.backgroundColor = '#111111';
+  Chart.defaults.borderColor = '#777777';
+  Chart.defaults.color = '#DDD';
+
+  var chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [
+        {
+          label: 'CPU (%)',
+          data: [],
+          tension: 0.1,
+        },
+      {
+          label: 'RAM (%)',
+          data: [],
+          tension: 0.1,
+        },
+      {
+          label: 'TX (MB)',
+          data: [],
+          tension: 0.1,
+        },
+      {
+          label: 'RX (MB)',
+          data: [],
+          tension: 0.1,
+        },
+      {
+          label: 'R (10 MB)',
+          data: [],
+          tension: 0.1,
+        },
+      {
+          label: 'W (10 MB)',
+          data: [],
+          tension: 0.1,
+        },
+      ]
+    },
+    options: {
+        maintainAspectRatio: false,
+    }
+  });
+
+  fetch(`https://api.${apiHost}/load?session=${deltaSession}`); // prime delta counters
+
+  setInterval(async () => {
+    const response = await fetch(`https://api.${apiHost}/load?session=${deltaSession}`);
+    const sysstat = await response.json();
+    chart.data.labels.push(new Date().toLocaleTimeString());
+    chart.data.datasets[0].data.push(sysstat.cpu);
+    chart.data.datasets[1].data.push(sysstat.mem);
+    chart.data.datasets[2].data.push(sysstat.net.tx);
+    chart.data.datasets[3].data.push(sysstat.net.rx);
+    chart.data.datasets[4].data.push(sysstat.disk.r / 10);
+    chart.data.datasets[5].data.push(sysstat.disk.w / 10);
+
+    if (chart.data.labels.length > samples) {
+      chart.data.labels.splice(0, chart.data.labels.length - samples);
+    }
+    for (let i = 0; i < 6; i++) {
+      if (chart.data.datasets[i].data.length > samples) {
+        chart.data.datasets[i].data.splice(0, chart.data.datasets[i].data.length - samples);
+      }
+    }
+    chart.update();
+  }, interval * 1000);
+</script>