Add src/stats.html

2024-11-12 00:00:14 +01:00 · 2024-11-12 00:00:14 +01:00 · 49a4ae96ef
commit 49a4ae96ef
parent 878e5618fa
1 changed files with 160 additions and 0 deletions
--- a/src/stats.html
+++ b/src/stats.html
@ -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>