Add html/metrics_page.html
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<title>Server Stats</title>
|
||||
<h1 id="hostname">Loading...</h1>
|
||||
|
||||
<p>Uptime: <span id="uptime">-</span></p>
|
||||
<p>CPU usage: <span id="cpu">-</span>%</p>
|
||||
<p>CPU count: <span id="cpu-count">-</span></p>
|
||||
<p>RAM usage: <span id="ram">-</span>%</p>
|
||||
<p>RAM total: <span id="ram-total">-</span> GB</p>
|
||||
<p>Swap usage: <span id="swap">-</span>%</p>
|
||||
<p>Swap total: <span id="swap-total">-</span> GB</p>
|
||||
<p>Disk total: <span id="disk-total">-</span> GB</p>
|
||||
<p>Disk usage: <span id="disk">-</span>%</p>
|
||||
<p>Last updated: <span id="timestamp">-</span></p>
|
||||
|
||||
<script>
|
||||
fetch("stats.json")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById("hostname").textContent = data.hostname;
|
||||
document.getElementById("uptime").textContent = data.uptime;
|
||||
document.getElementById("cpu").textContent = data.cpu_usage;
|
||||
document.getElementById("cpu-count").textContent = data.cpu_count;
|
||||
document.getElementById("ram").textContent = data.ram_usage;
|
||||
document.getElementById("ram-total").textContent = data.ram_total_gb;
|
||||
document.getElementById("swap").textContent = data.swap_usage;
|
||||
document.getElementById("swap-total").textContent = data.swap_total_gb;
|
||||
document.getElementById("disk-total").textContent = data.disk_total_gb;
|
||||
document.getElementById("disk").textContent = data.disk_usage;
|
||||
document.getElementById("timestamp").textContent = data.timestamp;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user