elia/reqser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/stats.html

Browse Source
This commit is contained in:
elia 2024-11-12 00:00:14 +01:00
parent 878e5618fa
commit 49a4ae96ef
1 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/stats.html Normal file
View File

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<title>hyper demo page</title>
<meta charset="UTF-8">
<style>
body {
background-color: #1e1e1e;
color: #c7c7c7;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
h1, h2 {
color: #fff;
}
.chart-container {
width: 100%;
height: 400px;
margin-bottom: 50px;
}
canvas {
background-color: #2e2e2e;
border: 1px solid #444;
}
a {
color: #5bc0de;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav {
background-color: #252526;
padding: 10px 20px;
}
nav a {
margin-right: 20px;
color: #9cdcfe;
}
footer {
text-align: center;
padding: 20px;
background-color: #252526;
color: #666;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<nav>
<a href="/">main endpoint</a>
<a href="/stats">Metrics</a>
</nav>
<h1>Server Metrics</h1>
<div class="chart-container">
<h2>Requests per Second</h2>
<canvas id="requestsChart"></canvas>
</div>
<div class="chart-container">
<h2>CPU Usage</h2>
<canvas id="cpuChart"></canvas>
</div>
<script>
async function fetchData(url) {
const response = await fetch(url);
return await response.json();
}
function createChart(ctx, label, data, yLabel) {
return new Chart(ctx, {
type: 'line',
data: {
labels: data.map(point => new Date(point.timestamp * 1000).toLocaleTimeString()),
datasets: [{
label: label,
data: data.map(point => point.value),
fill: false,
borderColor: '#5bc0de',
backgroundColor: '#5bc0de',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#c7c7c7'
}
}
},
scales: {
y: {
title: {
display: true,
text: yLabel,
color: '#c7c7c7'
},
ticks: {
color: '#c7c7c7'
},
grid: {
color: '#444'
}
},
x: {
ticks: {
autoSkip: true,
maxTicksLimit: 20,
color: '#c7c7c7'
},
grid: {
color: '#444'
}
}
}
}
});
}
let requestsChart;
let cpuChart;
async function renderCharts() {
const requestsData = await fetchData('/data/requests');
const cpuData = await fetchData('/data/cpu');
if (requestsChart) {
requestsChart.data.labels = requestsData.points.map(point => new Date(point.timestamp * 1000).toLocaleTimeString());
requestsChart.data.datasets[0].data = requestsData.points.map(point => point.value);
requestsChart.update();
} else {
const requestsCtx = document.getElementById('requestsChart').getContext('2d');
requestsChart = createChart(requestsCtx, 'Requests per Second', requestsData.points, 'Requests/s');
}
if (cpuChart) {
cpuChart.data.labels = cpuData.points.map(point => new Date(point.timestamp * 1000).toLocaleTimeString());
cpuChart.data.datasets[0].data = cpuData.points.map(point => point.value);
cpuChart.update();
} else {
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
cpuChart = createChart(cpuCtx, 'CPU Usage (%)', cpuData.points, '%');
}
}
renderCharts();
setInterval(renderCharts, 1000);
</script>
<footer>
&copy; goofy inc.
</footer>
</body>
</html>