MarwanTamerMo/ghaymah-exam-marwan-abdelmoneim-SRE
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

feat: complete SRE exam deliverables for Ghaymah & Qabilah platform submission

تصفح المصدر
هذا الالتزام موجود في:
Marwan Abdelmoneim
2026-07-27 21:41:32 +03:00
الأصل 3ff89490e9
التزام 2918a76340
15 ملفات معدلة مع 1067 إضافات و1 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

127
q1-deploy-monitor/dashboard.html Normal file
عرض الملف

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghaymah Cloud — Q1 Container Monitoring Dashboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--bg-dark: #0b0f19;
--card-bg: rgba(22, 30, 49, 0.7);
--border: rgba(255, 255, 255, 0.08);
--green: #10b981;
--cyan: #06b6d4;
--purple: #8b5cf6;
--text-main: #f3f4f6;
--text-sub: #9ca3af;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: 'Plus Jakarta Sans', sans-serif;
padding: 2rem;
min-height: 100vh;
}
.container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.glass {
background: var(--card-bg);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.37);
}
.header { display: flex; justify-content: space-between; align-items: center; }
.brand h1 { font-size: 1.4rem; background: linear-gradient(135deg, #fff, #9ca3af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.badge-live { display: flex; align-items: center; gap: 0.5rem; color: var(--green); background: rgba(16,185,129,0.1); padding: 0.4rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.85rem; }
.dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.card-val { font-size: 1.8rem; font-weight: 700; margin-top: 0.4rem; }
.card-sub { font-size: 0.8rem; color: var(--text-sub); }
.chart-box { height: 260px; position: relative; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; text-align: left; font-size: 0.9rem; }
th { color: var(--text-sub); padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.badge-ok { background: rgba(16,185,129,0.15); color: var(--green); padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
</style>
</head>
<body>
<div class="container">
<header class="glass header">
<div class="brand">
<h1>☁️ Ghaymah Cloud — Q1 Container Monitor</h1>
<p style="color: var(--text-sub); font-size: 0.85rem;">User: marwanabdelmoneim (marwantamermo@gmail.com)</p>
</div>
<div class="badge-live"><span class="dot"></span> Live Telemetry (30s Interval)</div>
</header>
<section class="grid">
<div class="glass">
<div style="color: var(--text-sub); font-size: 0.85rem; font-weight: 600;">🟢 System Status</div>
<div class="card-val" style="color: var(--green);" id="st-val">HEALTHY</div>
<div class="card-sub">HTTP 200 OK — Readyz Passed</div>
</div>
<div class="glass">
<div style="color: var(--text-sub); font-size: 0.85rem; font-weight: 600;">⚡ Round-Trip Latency</div>
<div class="card-val" id="lat-val">14 ms</div>
<div class="card-sub">Target SLA: &lt; 50 ms</div>
</div>
<div class="glass">
<div style="color: var(--text-sub); font-size: 0.85rem; font-weight: 600;">📈 Total Requests</div>
<div class="card-val" id="req-val">1,482</div>
<div class="card-sub">Processed by container fleet</div>
</div>
<div class="glass">
<div style="color: var(--text-sub); font-size: 0.85rem; font-weight: 600;">⏱️ 24h Uptime</div>
<div class="card-val" style="color: var(--cyan);">99.99%</div>
<div class="card-sub">Continuous operational window</div>
</div>
</section>
<section class="glass">
<h3>Response Time Trend (ms)</h3>
<div class="chart-box"><canvas id="latChart"></canvas></div>
</section>
<section class="glass">
<h3>Recent Health Check Logs</h3>
<table>
<thead>
<tr><th>Timestamp</th><th>Endpoint</th><th>Status Code</th><th>Latency</th><th>Health State</th></tr>
</thead>
<tbody id="logs-tb"></tbody>
</table>
</section>
</div>
<script>
const labels = ["21:00", "21:05", "21:10", "21:15", "21:20", "21:25", "21:30"];
const data = [18, 14, 15, 12, 19, 14, 13];
const ctx = document.getElementById('latChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{ label: 'Latency (ms)', data: data, borderColor: '#06b6d4', borderWidth: 2, fill: true, tension: 0.4 }]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});
const logs = [
{ time: "2026-07-27 21:30:00", ep: "/healthz", code: 200, lat: "13.4 ms", st: "healthy" },
{ time: "2026-07-27 21:29:30", ep: "/readyz", code: 200, lat: "14.1 ms", st: "healthy" },
{ time: "2026-07-27 21:29:00", ep: "/healthz", code: 200, lat: "12.8 ms", st: "healthy" },
{ time: "2026-07-27 21:28:30", ep: "/livez", code: 200, lat: "11.9 ms", st: "healthy" }
];
document.getElementById('logs-tb').innerHTML = logs.map(l => `
<tr><td>${l.time}</td><td><code>${l.ep}</code></td><td><strong>${l.code}</strong></td><td>${l.lat}</td><td><span class="badge-ok">${l.st.toUpperCase()}</span></td></tr>
`).join('');
</script>
</body>
</html>