Initial commit for Ghaymah SRE Exam
هذا الالتزام موجود في:
48
q1-deploy-monitor/dashboard.html
Normal file
48
q1-deploy-monitor/dashboard.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ghaymah App Dashboard</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; background: #0f172a; color: #fff; padding: 30px; }
|
||||
.grid { display: flex; gap: 20px; margin-top: 20px; }
|
||||
.card { background: #1e293b; padding: 25px; border-radius: 10px; flex: 1; text-align: center; border: 1px solid #334155; }
|
||||
.status-up { color: #22c55e; }
|
||||
.status-down { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>🚀 لوحة مراقبة التطبيق - Ghaymah Cloud</h2>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h3>الحالة (Status)</h3>
|
||||
<h1 id="status" class="status-up">--</h1>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>زمن الاستجابة (Latency)</h3>
|
||||
<h1><span id="latency">0</span> ثانية</h1>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>إجمالي الطلبات (Total Requests)</h3>
|
||||
<h1 id="requests">0</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function updateDashboard() {
|
||||
try {
|
||||
const res = await fetch('metrics.json');
|
||||
const data = await res.json();
|
||||
document.getElementById('status').innerText = data.status === "200" ? "UP (200 OK)" : "DOWN (" + data.status + ")";
|
||||
document.getElementById('status').className = data.status === "200" ? "status-up" : "status-down";
|
||||
document.getElementById('latency').innerText = data.latency;
|
||||
document.getElementById('requests').innerText = data.total_requests;
|
||||
} catch (e) {
|
||||
console.log("Waiting for metrics data...");
|
||||
}
|
||||
}
|
||||
setInterval(updateDashboard, 5000);
|
||||
updateDashboard();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم