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

welcome ghaymah

تصفح المصدر
هذا الالتزام موجود في:
arabdalla88
2026-07-27 23:06:16 +03:00
التزام 76f658bfab
17 ملفات معدلة مع 704 إضافات و0 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

149
q5-mithal-monitor/dashboard.html Normal file
عرض الملف

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>لوحة مراقبة موقع مثال - Mithal Monitor</title>
<!-- مكتبة الرسم البياني Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; background: #0f172a; margin: 0; padding: 40px 20px; color: #ffffff; }
.container { max-width: 800px; margin: auto; text-align: center; }
h1 { color: #ffffff; font-size: 24px; margin-bottom: 30px; }
.metrics-box { display: flex; gap: 15px; margin-bottom: 20px; }
.card { background: #1e293b; border-radius: 8px; padding: 20px; flex: 1; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
.card h3 { margin: 0 0 8px; font-size: 14px; color: #38bdf8; }
.card p { font-size: 18px; margin: 0; font-weight: bold; color: #ffffff; }
.chart-container { background: #1e293b; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
.status-ok { color: #4ade80 !important; }
.status-down { color: #f87171 !important; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #1e293b; border-radius: 8px; overflow: hidden; }
th, td { padding: 12px; text-align: center; font-size: 14px; border-bottom: 1px solid #334155; }
th { background: #0f172a; color: #38bdf8; }
tr:last-child td { border-bottom: none; }
</style>
</head>
<body>
<div class="container">
<h1>لوحة مراقبة موقع مثال (mithal.space)</h1>
<div class="metrics-box">
<div class="card">
<h3>حالة الموقع</h3>
<p id="siteStatus" class="status-ok">جاري التحميل...</p>
</div>
<div class="card">
<h3>حالة SSL وتاريخ الانتهاء</h3>
<p id="sslStatus" style="font-size: 14px;">جاري التحميل...</p>
</div>
<div class="card">
<h3>متوسط الـ Latency</h3>
<p id="latencyStatus">جاري التحميل...</p>
</div>
</div>
<!-- الرسم البياني (Line Chart) لزمن الاستجابة -->
<div class="chart-container">
<h3 style="color: #38bdf8; margin-top: 0; text-align: right;">رسم بياني لزمن الاستجابة (Latency - آخر ساعة)</h3>
<canvas id="latencyChart"></canvas>
</div>
<h2 style="font-size: 18px; margin-top: 30px; color: #38bdf8; text-align: right;">سجل آخر الفحصات</h2>
<table>
<thead>
<tr>
<th>الوقت</th>
<th>حالة الموقع</th>
<th>زمن الاستجابة</th>
<th>زمن البحث</th>
<th>حالة SSL</th>
</tr>
</thead>
<tbody id="logTableBody">
</tbody>
</table>
</div>
<script>
// إعداد الرسم البياني باستخدام Chart.js
const ctx = document.getElementById('latencyChart').getContext('2d');
const latencyChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'زمن الاستجابة (ms)',
data: [],
borderColor: '#38bdf8',
backgroundColor: 'rgba(56, 189, 248, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.3
}]
},
options: {
responsive: true,
plugins: {
legend: { labels: { color: '#ffffff' } }
},
scales: {
x: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } },
y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } }
}
}
});
async function fetchMetrics() {
try {
const response = await fetch('/api/metrics');
const data = await response.json();
if (data && data.length > 0) {
const latest = data[data.length - 1];
// تحديث الكروت العلوية
const statusElem = document.getElementById('siteStatus');
if (latest.status_code === 200) {
statusElem.textContent = "متصل (200 OK)";
statusElem.className = "status-ok";
} else {
statusElem.textContent = `غير متصل (${latest.status_code})`;
statusElem.className = "status-down";
}
document.getElementById('sslStatus').textContent = latest.ssl_status;
document.getElementById('latencyStatus').textContent = `${latest.latency_ms} ms`;
// تحديث بيانات الرسم البياني (Line Chart) من السكريبت
const timestamps = data.map(row => row.timestamp.split(' ')[1]); // أخذ الوقت فقط
const latencies = data.map(row => row.latency_ms);
latencyChart.data.labels = timestamps;
latencyChart.data.datasets[0].data = latencies;
latencyChart.update();
// تحديث الجدول
const tableBody = document.getElementById('logTableBody');
tableBody.innerHTML = '';
const reversedData = [...data].reverse().slice(0, 10);
reversedData.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${row.timestamp}</td>
<td class="${row.status_code === 200 ? 'status-ok' : 'status-down'}">${row.status_code} OK</td>
<td>${row.latency_ms} ms</td>
<td>${row.search_response_ms} ms</td>
<td>${row.ssl_status}</td>
`;
tableBody.appendChild(tr);
});
}
} catch (e) {
console.log("Error fetching metrics");
}
}
fetchMetrics();
setInterval(fetchMetrics, 5000); // تحديث الجراف والبيانات تلقائياً كل 5 ثوانٍ
</script>
</body>
</html>