53 أسطر
1.7 KiB
HTML
53 أسطر
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ghaymah App Dashboard</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; background: #0f172a; color: #fff; text-align: center; padding-top: 50px; }
|
|
.card { background: #1e293b; padding: 20px; margin: 15px auto; width: 320px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
|
|
h3 { color: #38bdf8; margin-bottom: 5px; }
|
|
p { font-size: 20px; font-weight: bold; margin: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Application Monitoring Dashboard</h1>
|
|
|
|
<div class="card">
|
|
<h3>Status</h3>
|
|
<p id="status" style="color: #4ade80;">Loading...</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Total Requests</h3>
|
|
<p id="count">0</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Response Time</h3>
|
|
<p id="time">0 ms</p>
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchMetrics() {
|
|
const start = performance.now();
|
|
try {
|
|
const response = await fetch('/health');
|
|
const end = performance.now();
|
|
const data = await response.json();
|
|
|
|
document.getElementById('status').innerText = data.status;
|
|
document.getElementById('count').innerText = data.requests;
|
|
document.getElementById('time').innerText = (end - start).toFixed(2) + ' ms';
|
|
} catch (error) {
|
|
document.getElementById('status').innerText = 'Down';
|
|
document.getElementById('status').style.color = '#f87171';
|
|
}
|
|
}
|
|
|
|
// Fetch metrics every 30 seconds as required
|
|
setInterval(fetchMetrics, 30000);
|
|
fetchMetrics();
|
|
</script>
|
|
</body>
|
|
</html> |