Gamal0909
439a31ba93
- Created a GitHub Actions workflow for CI/CD to deploy to Ghyamah, including testing, building, and pushing Docker images. - Added architecture design document for handling 15,000 requests per second, detailing system components, capacity planning, and cold start strategies. - Introduced a Python-based uptime/latency/SSL monitor with a static dashboard, utilizing standard libraries only. - Included Dockerfile and entrypoint script for the monitoring application, ensuring it runs as a non-root user and handles process management. - Added a .dockerignore file to exclude unnecessary files from the Docker build context. - Created an HTML dashboard for visualizing monitoring metrics, including uptime, latency, and SSL certificate status.
60 أسطر
2.7 KiB
HTML
60 أسطر
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>لوحة مراقبة الـ API</title>
|
|
<style>
|
|
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7f6; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
|
.dashboard { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 400px; }
|
|
h2 { color: #333; margin-bottom: 20px; }
|
|
.metric { background: #eef2f5; margin: 10px 0; padding: 15px; border-radius: 8px; font-size: 1.2em; display: flex; justify-content: space-between; }
|
|
.metric span { font-weight: bold; color: #0056b3; }
|
|
.status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: gray; margin-left: 8px; }
|
|
.online { background: #28a745; }
|
|
.offline { background: #dc3545; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="dashboard">
|
|
<h2>مراقبة النظام <span id="statusDot" class="status-dot"></span></h2>
|
|
|
|
<div class="metric">
|
|
الحالة: <span id="statusText">جاري التحميل...</span>
|
|
</div>
|
|
<div class="metric">
|
|
زمن الاستجابة: <span id="responseTime">0 ms</span>
|
|
</div>
|
|
<div class="metric">
|
|
عدد الطلبات الإجمالي: <span id="requestCount">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_URL = "";
|
|
|
|
async function fetchMetrics() {
|
|
try {
|
|
const res = await fetch(API_URL);
|
|
const data = await res.json();
|
|
|
|
document.getElementById('statusText').innerText = data.status;
|
|
document.getElementById('statusText').style.color = '#28a745';
|
|
document.getElementById('statusDot').className = 'status-dot online';
|
|
|
|
document.getElementById('responseTime').innerText = data.response_time_ms + ' ms';
|
|
document.getElementById('requestCount').innerText = data.request_count;
|
|
} catch (error) {
|
|
document.getElementById('statusText').innerText = 'انقطاع الاتصال (Offline)';
|
|
document.getElementById('statusText').style.color = '#dc3545';
|
|
document.getElementById('statusDot').className = 'status-dot offline';
|
|
document.getElementById('responseTime').innerText = '-';
|
|
}
|
|
}
|
|
|
|
setInterval(fetchMetrics, 5000);
|
|
fetchMetrics();
|
|
</script>
|
|
</body>
|
|
</html> |