Ghaymah intern

q5-mithal-monitor/dashboard/app.js

@@ -0,0 +1,138 @@
+const REFRESH_INTERVAL_MS = 60000;
+let chart = null;
+
+function fmtDate(iso) {
+  const d = new Date(iso);
+  return d.toLocaleString('ar-EG', { hour12: false });
+}
+
+function fmtTimeShort(iso) {
+  const d = new Date(iso);
+  return d.toLocaleTimeString('ar-EG', { hour12: false });
+}
+
+async function loadData() {
+  try {
+    const res = await fetch('data/metrics_history.json', { cache: 'no-store' });
+    if (!res.ok) throw new Error('metrics file not found yet');
+    const history = await res.json();
+    if (!history.length) throw new Error('no data yet');
+    render(history);
+  } catch (err) {
+    document.getElementById('overallStatus').textContent = 'بانتظار أول فحص...';
+    document.getElementById('logTableBody').innerHTML =
+      `<tr><td colspan="7">${err.message}</td></tr>`;
+  }
+}
+
+function render(history) {
+  const latest = history[history.length - 1];
+
+  // ---- Overall status pill ----
+  const statusPill = document.getElementById('overallStatus');
+  statusPill.textContent = latest.up ? 'الموقع شغال (UP)' : 'الموقع متوقف (DOWN)';
+  statusPill.className = 'status-pill ' + (latest.up ? 'up' : 'down');
+
+  // ---- Uptime (last 24h) ----
+  const now = new Date();
+  const last24h = history.filter(r => (now - new Date(r.timestamp)) <= 24 * 60 * 60 * 1000);
+  const upCount = last24h.filter(r => r.up).length;
+  const uptimePct = last24h.length ? ((upCount / last24h.length) * 100).toFixed(2) : '--';
+  document.getElementById('uptimeValue').textContent = uptimePct + '%';
+  document.getElementById('uptimeDetail').textContent = `${upCount} من ${last24h.length} فحص`;
+
+  // ---- Latest latency ----
+  document.getElementById('latencyValue').textContent =
+    latest.latency_ms != null ? Math.round(latest.latency_ms) + ' ms' : '--';
+  document.getElementById('latencyDetail').textContent = 'آخر فحص: ' + fmtTimeShort(latest.timestamp);
+
+  // ---- SSL ----
+  const sslEl = document.getElementById('sslValue');
+  const sslDetail = document.getElementById('sslDetail');
+  if (latest.ssl_valid) {
+    sslEl.textContent = latest.ssl_days_remaining + ' يوم متبقي';
+    sslEl.style.color = latest.ssl_days_remaining < 14 ? '#e74c3c' : '#2ecc71';
+    sslDetail.textContent = 'تنتهي في: ' + fmtDate(latest.ssl_expiry);
+  } else {
+    sslEl.textContent = 'غير صالحة';
+    sslEl.style.color = '#e74c3c';
+    sslDetail.textContent = 'فشل التحقق من الشهادة';
+  }
+
+  // ---- DNS ----
+  document.getElementById('dnsValue').textContent =
+    latest.dns_ms != null ? Math.round(latest.dns_ms) + ' ms' : '--';
+  document.getElementById('dnsDetail').textContent = 'آخر فحص: ' + fmtTimeShort(latest.timestamp);
+
+  // ---- Search response ----
+  document.getElementById('searchValue').textContent =
+    latest.search_latency_ms != null ? Math.round(latest.search_latency_ms) + ' ms' : '--';
+  document.getElementById('searchDetail').textContent =
+    'Status: ' + (latest.search_status ?? '--');
+
+  // ---- Chart: last hour of latency ----
+  const lastHour = history.filter(r => (now - new Date(r.timestamp)) <= 60 * 60 * 1000);
+  renderChart(lastHour);
+
+  // ---- Log table: last 10 checks ----
+  renderLogTable(history.slice(-10).reverse());
+}
+
+function renderChart(data) {
+  const labels = data.map(r => fmtTimeShort(r.timestamp));
+  const values = data.map(r => r.latency_ms);
+
+  const ctx = document.getElementById('latencyChart');
+  if (chart) {
+    chart.data.labels = labels;
+    chart.data.datasets[0].data = values;
+    chart.update();
+    return;
+  }
+
+  chart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [{
+        label: 'زمن الاستجابة (ms)',
+        data: values,
+        borderColor: '#4f8cff',
+        backgroundColor: 'rgba(79,140,255,0.1)',
+        tension: 0.3,
+        fill: true,
+        pointRadius: 2,
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: { legend: { display: false } },
+      scales: {
+        x: { ticks: { color: '#5b6579', maxTicksLimit: 8 }, grid: { color: '#232d42' } },
+        y: { ticks: { color: '#5b6579' }, grid: { color: '#232d42' }, beginAtZero: true }
+      }
+    }
+  });
+}
+
+function renderLogTable(rows) {
+  const tbody = document.getElementById('logTableBody');
+  if (!rows.length) {
+    tbody.innerHTML = '<tr><td colspan="7">لا توجد بيانات بعد</td></tr>';
+    return;
+  }
+  tbody.innerHTML = rows.map(r => `
+    <tr>
+      <td>${fmtDate(r.timestamp)}</td>
+      <td class="${r.up ? 'status-up' : 'status-down'}">${r.up ? 'UP' : 'DOWN'}</td>
+      <td>${r.status_code ?? '--'}</td>
+      <td>${r.latency_ms != null ? Math.round(r.latency_ms) + ' ms' : '--'}</td>
+      <td>${r.dns_ms != null ? Math.round(r.dns_ms) + ' ms' : '--'}</td>
+      <td>${r.ssl_valid ? r.ssl_days_remaining + ' يوم' : 'غير صالحة'}</td>
+      <td>${r.search_latency_ms != null ? Math.round(r.search_latency_ms) + ' ms' : '--'}</td>
+    </tr>
+  `).join('');
+}
+
+loadData();
+setInterval(loadData, REFRESH_INTERVAL_MS);