149 أسطر
6.8 KiB
HTML
149 أسطر
6.8 KiB
HTML
<!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> |