61 lines
1.8 KiB
HTML
61 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>System Monitor</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.stat {
|
|
font-size: 1.2em;
|
|
margin-bottom: 10px;
|
|
}
|
|
.descriptor {
|
|
font-weight: 300; /* Light */
|
|
}
|
|
.value {
|
|
font-weight: 700; /* Bold */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>System Monitor</h1>
|
|
<div class="stat">
|
|
<span class="descriptor">CPU Usage:</span>
|
|
<span class="value" id="cpu-usage"></span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="descriptor">Memory Usage:</span>
|
|
<span class="value" id="memory-usage"></span>
|
|
</div>
|
|
|
|
<script>
|
|
function fetchStats() {
|
|
fetch('http://localhost:8080/stats')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('cpu-usage').textContent = `${data.cpu_percent}%`;
|
|
document.getElementById('memory-usage').textContent = `${data.memory_percent}%`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching system stats:', error);
|
|
document.getElementById('cpu-usage').textContent = "server not running";
|
|
document.getElementById('memory-usage').textContent = "server not running";
|
|
});
|
|
}
|
|
|
|
// Fetch stats every 2 seconds
|
|
setInterval(fetchStats, 2000);
|
|
|
|
// Initial fetch
|
|
fetchStats();
|
|
</script>
|
|
</body>
|
|
</html>
|