49 أسطر
1.8 KiB
HTML
49 أسطر
1.8 KiB
HTML
<!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>
|