welcome ghaymah
هذا الالتزام موجود في:
53
q1-deploy-monitor/dashboard.html
Normal file
53
q1-deploy-monitor/dashboard.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم