feat: Ghayma Assessment - complete submission
هذا الالتزام موجود في:
678
q5-mithal-monitor/dashboard.html
Normal file
678
q5-mithal-monitor/dashboard.html
Normal file
@@ -0,0 +1,678 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>mithal.space — Monitoring Dashboard</title>
|
||||
<meta name="description" content="Real-time monitoring dashboard for mithal.space — uptime, latency, SSL, DNS">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg-primary: #06080f;
|
||||
--bg-secondary: #0c1120;
|
||||
--bg-card: rgba(12, 17, 32, 0.85);
|
||||
--bg-card-hover: rgba(18, 25, 45, 0.9);
|
||||
--border: rgba(255, 255, 255, 0.05);
|
||||
--border-hover: rgba(255, 255, 255, 0.1);
|
||||
--text-primary: #e8edf5;
|
||||
--text-secondary: #8892a8;
|
||||
--text-muted: #525d75;
|
||||
--green: #10b981;
|
||||
--green-glow: rgba(16, 185, 129, 0.12);
|
||||
--red: #ef4444;
|
||||
--red-glow: rgba(239, 68, 68, 0.12);
|
||||
--blue: #6366f1;
|
||||
--blue-glow: rgba(99, 102, 241, 0.12);
|
||||
--amber: #f59e0b;
|
||||
--amber-glow: rgba(245, 158, 11, 0.12);
|
||||
--purple: #a855f7;
|
||||
--purple-glow: rgba(168, 85, 247, 0.12);
|
||||
--cyan: #06b6d4;
|
||||
--cyan-glow: rgba(6, 182, 212, 0.12);
|
||||
--radius: 16px;
|
||||
--radius-sm: 10px;
|
||||
--radius-xs: 6px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 15% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 85% 80%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.03) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.app { position: relative; z-index: 1; }
|
||||
|
||||
/* ── Header ── */
|
||||
.header {
|
||||
padding: 20px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(24px);
|
||||
background: rgba(6, 8, 15, 0.7);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left { display: flex; align-items: center; gap: 14px; }
|
||||
|
||||
.logo {
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--blue), var(--purple));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px; font-weight: 900; color: #fff;
|
||||
box-shadow: 0 4px 24px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.header-title { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
|
||||
.header-title span { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
|
||||
|
||||
.header-right { display: flex; align-items: center; gap: 14px; }
|
||||
|
||||
.live-badge {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
padding: 6px 14px; border-radius: 100px;
|
||||
font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.live-badge.up { background: var(--green-glow); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.2); }
|
||||
.live-badge.down { background: var(--red-glow); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.2); }
|
||||
.live-badge.unknown { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }
|
||||
|
||||
.live-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%; position: relative;
|
||||
}
|
||||
.live-badge.up .live-dot { background: var(--green); }
|
||||
.live-badge.down .live-dot { background: var(--red); }
|
||||
.live-badge.unknown .live-dot { background: var(--text-muted); }
|
||||
.live-dot::after {
|
||||
content: '';
|
||||
position: absolute; top: -3px; left: -3px;
|
||||
width: 13px; height: 13px; border-radius: 50%;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
.live-badge.up .live-dot::after { background: rgba(16, 185, 129, 0.3); }
|
||||
.live-badge.down .live-dot::after { background: rgba(239, 68, 68, 0.3); }
|
||||
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
|
||||
|
||||
.updated-text { font-size: 11px; color: var(--text-muted); }
|
||||
|
||||
/* ── Main ── */
|
||||
.main { padding: 28px 32px; max-width: 1440px; margin: 0 auto; }
|
||||
|
||||
/* ── Top Cards ── */
|
||||
.top-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
||||
opacity: 0; transition: opacity 0.3s;
|
||||
}
|
||||
.card:hover::before { opacity: 1; }
|
||||
|
||||
.card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
|
||||
.card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
|
||||
.card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
|
||||
.card.purple::before { background: linear-gradient(90deg, var(--purple), transparent); }
|
||||
.card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
|
||||
|
||||
.card-icon {
|
||||
width: 36px; height: 36px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 17px; margin-bottom: 14px;
|
||||
}
|
||||
.card.green .card-icon { background: var(--green-glow); }
|
||||
.card.blue .card-icon { background: var(--blue-glow); }
|
||||
.card.amber .card-icon { background: var(--amber-glow); }
|
||||
.card.purple .card-icon { background: var(--purple-glow); }
|
||||
.card.cyan .card-icon { background: var(--cyan-glow); }
|
||||
|
||||
.card-label {
|
||||
font-size: 11px; color: var(--text-muted); font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px;
|
||||
}
|
||||
.card-value {
|
||||
font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1;
|
||||
}
|
||||
.card.green .card-value { color: var(--green); }
|
||||
.card.blue .card-value { color: var(--blue); }
|
||||
.card.amber .card-value { color: var(--amber); }
|
||||
.card.purple .card-value { color: var(--purple); }
|
||||
.card.cyan .card-value { color: var(--cyan); }
|
||||
|
||||
.card-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
|
||||
.card-unit { font-size: 13px; font-weight: 400; }
|
||||
|
||||
/* ── Panels ── */
|
||||
.mid-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
backdrop-filter: blur(12px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.panel-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
|
||||
.panel-body { padding: 20px; }
|
||||
|
||||
/* ── Line Chart ── */
|
||||
.chart-area {
|
||||
width: 100%; height: 220px; position: relative;
|
||||
}
|
||||
.chart-area canvas { width: 100% !important; height: 100% !important; }
|
||||
.chart-empty {
|
||||
height: 100%; display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-muted); font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── SSL Panel ── */
|
||||
.ssl-info { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.ssl-main {
|
||||
text-align: center; padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.ssl-days {
|
||||
font-size: 48px; font-weight: 900; line-height: 1;
|
||||
background: linear-gradient(135deg, var(--green), var(--cyan));
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.ssl-days.warning {
|
||||
background: linear-gradient(135deg, var(--amber), var(--red));
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
}
|
||||
.ssl-days-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
.ssl-detail {
|
||||
display: flex; justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.ssl-detail:last-child { border-bottom: none; }
|
||||
.ssl-detail-label { color: var(--text-muted); }
|
||||
.ssl-detail-value { font-weight: 600; }
|
||||
|
||||
/* ── Progress Bar (Uptime) ── */
|
||||
.uptime-bar-container {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 8px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.uptime-bar {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, var(--green), var(--cyan));
|
||||
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
/* ── Records Table ── */
|
||||
.records-panel { margin-bottom: 24px; }
|
||||
|
||||
.table-wrapper { overflow-x: auto; }
|
||||
|
||||
table {
|
||||
width: 100%; border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
th {
|
||||
text-align: left; padding: 10px 14px;
|
||||
color: var(--text-muted); font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
font-size: 11px; border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
td {
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.025);
|
||||
white-space: nowrap;
|
||||
}
|
||||
tr:hover td { background: rgba(255, 255, 255, 0.015); }
|
||||
|
||||
.badge {
|
||||
display: inline-flex; padding: 3px 10px; border-radius: 100px;
|
||||
font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge.up { background: var(--green-glow); color: var(--green); }
|
||||
.badge.down { background: var(--red-glow); color: var(--red); }
|
||||
.badge.warn { background: var(--amber-glow); color: var(--amber); }
|
||||
|
||||
.no-data {
|
||||
text-align: center; padding: 40px;
|
||||
color: var(--text-muted); font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1100px) {
|
||||
.top-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.mid-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.top-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.main { padding: 16px; }
|
||||
.header { padding: 14px 16px; }
|
||||
.header-title span { display: none; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.top-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<!-- ═══ Header ═══ -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">M</div>
|
||||
<h1 class="header-title">mithal.space <span>Monitoring Dashboard</span></h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div id="liveBadge" class="live-badge unknown">
|
||||
<div class="live-dot"></div>
|
||||
<span id="liveText">LOADING...</span>
|
||||
</div>
|
||||
<div class="updated-text">Updated: <span id="lastUpdated">—</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ═══ Main ═══ -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ── Top Metric Cards ── -->
|
||||
<section class="top-grid">
|
||||
<div class="card green" id="uptimeCard">
|
||||
<div class="card-icon">🟢</div>
|
||||
<div class="card-label">Uptime (24h)</div>
|
||||
<div class="card-value" id="uptimeValue">—<span class="card-unit">%</span></div>
|
||||
<div class="uptime-bar-container"><div class="uptime-bar" id="uptimeBar" style="width: 0%"></div></div>
|
||||
<div class="card-sub" id="uptimeSub">0 / 0 checks passed</div>
|
||||
</div>
|
||||
|
||||
<div class="card blue">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-label">Avg Latency</div>
|
||||
<div class="card-value" id="avgLatency">—<span class="card-unit"> ms</span></div>
|
||||
<div class="card-sub" id="latencySub">Last hour</div>
|
||||
</div>
|
||||
|
||||
<div class="card cyan">
|
||||
<div class="card-icon">🌐</div>
|
||||
<div class="card-label">DNS Resolution</div>
|
||||
<div class="card-value" id="dnsValue">—<span class="card-unit"> ms</span></div>
|
||||
<div class="card-sub" id="dnsSub">—</div>
|
||||
</div>
|
||||
|
||||
<div class="card amber">
|
||||
<div class="card-icon">🔒</div>
|
||||
<div class="card-label">SSL Certificate</div>
|
||||
<div class="card-value" id="sslDays">—<span class="card-unit"> days</span></div>
|
||||
<div class="card-sub" id="sslSub">—</div>
|
||||
</div>
|
||||
|
||||
<div class="card purple">
|
||||
<div class="card-icon">🔍</div>
|
||||
<div class="card-label">Search Response</div>
|
||||
<div class="card-value" id="searchValue">—<span class="card-unit"> ms</span></div>
|
||||
<div class="card-sub" id="searchSub">—</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Chart + SSL Details ── -->
|
||||
<section class="mid-grid">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">📈 Response Time — Last Hour</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="chart-area" id="chartArea">
|
||||
<canvas id="latencyChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">🔒 SSL Certificate Details</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="ssl-info">
|
||||
<div class="ssl-main">
|
||||
<div class="ssl-days" id="sslDaysBig">—</div>
|
||||
<div class="ssl-days-label">Days Until Expiration</div>
|
||||
</div>
|
||||
<div class="ssl-detail">
|
||||
<span class="ssl-detail-label">Status</span>
|
||||
<span class="ssl-detail-value" id="sslStatus">—</span>
|
||||
</div>
|
||||
<div class="ssl-detail">
|
||||
<span class="ssl-detail-label">Issuer</span>
|
||||
<span class="ssl-detail-value" id="sslIssuer">—</span>
|
||||
</div>
|
||||
<div class="ssl-detail">
|
||||
<span class="ssl-detail-label">Expires On</span>
|
||||
<span class="ssl-detail-value" id="sslExpires">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Last 10 Records Table ── -->
|
||||
<section class="records-panel">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">📋 Last 10 Test Results</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>HTTP</th>
|
||||
<th>Latency</th>
|
||||
<th>DNS</th>
|
||||
<th>Search</th>
|
||||
<th>SSL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recordsBody">
|
||||
<tr><td colspan="7" class="no-data">Waiting for data from collector...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Chart.js for line chart -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
|
||||
|
||||
<script>
|
||||
// ═══════════════════════════════════════
|
||||
// Config
|
||||
// ═══════════════════════════════════════
|
||||
const DATA_URL = '/api/monitoring/metrics';
|
||||
const POLL_INTERVAL = 10000; // 10 seconds
|
||||
let chart = null;
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Fetch & Update
|
||||
// ═══════════════════════════════════════
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await fetch(DATA_URL);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
updateDashboard(data);
|
||||
} catch (err) {
|
||||
setStatus('unknown', 'NO DATA');
|
||||
console.error('Fetch error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDashboard(data) {
|
||||
const records = data.records || [];
|
||||
if (records.length === 0) {
|
||||
setStatus('unknown', 'NO DATA');
|
||||
return;
|
||||
}
|
||||
|
||||
const latest = records[records.length - 1];
|
||||
document.getElementById('lastUpdated').textContent = formatTime(latest.timestamp);
|
||||
|
||||
// ── Live status ──
|
||||
if (latest.uptime.is_up) {
|
||||
setStatus('up', 'ONLINE');
|
||||
} else {
|
||||
setStatus('down', 'OFFLINE');
|
||||
}
|
||||
|
||||
// ── Uptime (24h) ──
|
||||
const upCount = records.filter(r => r.uptime.is_up).length;
|
||||
const total = records.length;
|
||||
const uptimePct = total > 0 ? ((upCount / total) * 100).toFixed(2) : 0;
|
||||
document.getElementById('uptimeValue').innerHTML = `${uptimePct}<span class="card-unit">%</span>`;
|
||||
document.getElementById('uptimeBar').style.width = `${uptimePct}%`;
|
||||
document.getElementById('uptimeSub').textContent = `${upCount} / ${total} checks passed`;
|
||||
|
||||
// ── Avg Latency (last hour = last 60 records max) ──
|
||||
const lastHour = records.slice(-60);
|
||||
const latencies = lastHour.map(r => r.latency.latency_ms).filter(v => v !== null);
|
||||
const avgLat = latencies.length > 0 ? Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length) : 0;
|
||||
document.getElementById('avgLatency').innerHTML = `${avgLat}<span class="card-unit"> ms</span>`;
|
||||
document.getElementById('latencySub').textContent = `${latencies.length} samples`;
|
||||
|
||||
// ── DNS ──
|
||||
const dnsTime = latest.dns.dns_time_ms;
|
||||
document.getElementById('dnsValue').innerHTML = dnsTime !== null
|
||||
? `${dnsTime}<span class="card-unit"> ms</span>`
|
||||
: `—<span class="card-unit"> ms</span>`;
|
||||
document.getElementById('dnsSub').textContent = latest.dns.resolved_ip || '—';
|
||||
|
||||
// ── SSL ──
|
||||
const sslDays = latest.ssl.days_remaining;
|
||||
document.getElementById('sslDays').innerHTML = sslDays !== null
|
||||
? `${sslDays}<span class="card-unit"> days</span>`
|
||||
: `—<span class="card-unit"></span>`;
|
||||
document.getElementById('sslSub').textContent = latest.ssl.valid ? 'Valid' : 'Invalid / Error';
|
||||
|
||||
// SSL Detail panel
|
||||
const sslBigEl = document.getElementById('sslDaysBig');
|
||||
sslBigEl.textContent = sslDays !== null ? sslDays : '—';
|
||||
sslBigEl.className = (sslDays !== null && sslDays < 30) ? 'ssl-days warning' : 'ssl-days';
|
||||
document.getElementById('sslStatus').textContent = latest.ssl.valid ? '✅ Valid' : '❌ Invalid';
|
||||
document.getElementById('sslIssuer').textContent = latest.ssl.issuer || '—';
|
||||
document.getElementById('sslExpires').textContent = latest.ssl.expires || '—';
|
||||
|
||||
// ── Search ──
|
||||
const searchTime = latest.search.search_time_ms;
|
||||
document.getElementById('searchValue').innerHTML = searchTime !== null
|
||||
? `${searchTime}<span class="card-unit"> ms</span>`
|
||||
: `—<span class="card-unit"> ms</span>`;
|
||||
document.getElementById('searchSub').textContent = latest.search.content_length
|
||||
? `${(latest.search.content_length / 1024).toFixed(1)} KB response`
|
||||
: '—';
|
||||
|
||||
// ── Line Chart (last hour) ──
|
||||
renderChart(lastHour);
|
||||
|
||||
// ── Last 10 Records Table ──
|
||||
renderTable(records.slice(-10).reverse());
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Status Badge
|
||||
// ═══════════════════════════════════════
|
||||
function setStatus(state, text) {
|
||||
const badge = document.getElementById('liveBadge');
|
||||
const label = document.getElementById('liveText');
|
||||
badge.className = `live-badge ${state}`;
|
||||
label.textContent = text;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Line Chart
|
||||
// ═══════════════════════════════════════
|
||||
function renderChart(records) {
|
||||
const labels = records.map(r => formatTime(r.timestamp));
|
||||
const latencies = records.map(r => r.latency.latency_ms || 0);
|
||||
|
||||
if (chart) {
|
||||
chart.data.labels = labels;
|
||||
chart.data.datasets[0].data = latencies;
|
||||
chart.update('none');
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = document.getElementById('latencyChart').getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 220);
|
||||
gradient.addColorStop(0, 'rgba(99, 102, 241, 0.25)');
|
||||
gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
|
||||
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Response Time (ms)',
|
||||
data: latencies,
|
||||
borderColor: '#6366f1',
|
||||
backgroundColor: gradient,
|
||||
borderWidth: 2,
|
||||
tension: 0.35,
|
||||
fill: true,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: '#6366f1',
|
||||
pointHoverBackgroundColor: '#a855f7',
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(12, 17, 32, 0.95)',
|
||||
borderColor: 'rgba(99, 102, 241, 0.3)',
|
||||
borderWidth: 1,
|
||||
titleColor: '#e8edf5',
|
||||
bodyColor: '#8892a8',
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
callbacks: {
|
||||
label: (ctx) => `${ctx.parsed.y} ms`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: { color: '#525d75', font: { size: 10 }, maxTicksLimit: 10, maxRotation: 0 },
|
||||
grid: { color: 'rgba(255, 255, 255, 0.03)' },
|
||||
border: { color: 'transparent' }
|
||||
},
|
||||
y: {
|
||||
ticks: { color: '#525d75', font: { size: 10 }, callback: v => v + 'ms' },
|
||||
grid: { color: 'rgba(255, 255, 255, 0.03)' },
|
||||
border: { color: 'transparent' },
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Records Table
|
||||
// ═══════════════════════════════════════
|
||||
function renderTable(records) {
|
||||
const tbody = document.getElementById('recordsBody');
|
||||
|
||||
if (records.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="no-data">No records yet — start the collector</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = records.map(r => {
|
||||
const isUp = r.uptime.is_up;
|
||||
const statusBadge = isUp
|
||||
? '<span class="badge up">UP</span>'
|
||||
: '<span class="badge down">DOWN</span>';
|
||||
const httpCode = r.latency.status_code || '—';
|
||||
const lat = r.latency.latency_ms !== null ? `${r.latency.latency_ms}ms` : '—';
|
||||
const dns = r.dns.dns_time_ms !== null ? `${r.dns.dns_time_ms}ms` : '—';
|
||||
const search = r.search.search_time_ms !== null ? `${r.search.search_time_ms}ms` : '—';
|
||||
const sslBadge = r.ssl.valid
|
||||
? `<span class="badge up">${r.ssl.days_remaining}d</span>`
|
||||
: '<span class="badge down">ERR</span>';
|
||||
|
||||
return `<tr>
|
||||
<td>${formatTime(r.timestamp)}</td>
|
||||
<td>${statusBadge}</td>
|
||||
<td>${httpCode}</td>
|
||||
<td>${lat}</td>
|
||||
<td>${dns}</td>
|
||||
<td>${search}</td>
|
||||
<td>${sslBadge}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Helpers
|
||||
// ═══════════════════════════════════════
|
||||
function formatTime(isoStr) {
|
||||
try {
|
||||
const d = new Date(isoStr);
|
||||
return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
} catch {
|
||||
return isoStr;
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
// Start
|
||||
// ═══════════════════════════════════════
|
||||
fetchData();
|
||||
setInterval(fetchData, POLL_INTERVAL);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
275
q5-mithal-monitor/monitor.py
Normal file
275
q5-mithal-monitor/monitor.py
Normal file
@@ -0,0 +1,275 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Monitoring Collector for mithal.space
|
||||
Collects metrics every 60 seconds: Latency, Uptime, SSL, DNS, Search Response.
|
||||
Stores results in data/mithal-metrics.json.
|
||||
"""
|
||||
|
||||
import urllib.request
|
||||
import urllib.error
|
||||
import ssl
|
||||
import socket
|
||||
import json
|
||||
import time
|
||||
import datetime
|
||||
import os
|
||||
import sys
|
||||
|
||||
# ─────────────────────────────────────────────
|
||||
# Configuration
|
||||
# ─────────────────────────────────────────────
|
||||
TARGET_URL = "https://mithal.space"
|
||||
SEARCH_URL = "https://mithal.space" # Search/query endpoint (adjust if different)
|
||||
CHECK_INTERVAL = 60 # seconds (1 minute)
|
||||
DATA_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "data")
|
||||
DATA_FILE = os.path.join(DATA_DIR, "mithal-metrics.json")
|
||||
MAX_RECORDS = 1440 # Keep 24 hours of data (1 per minute)
|
||||
TIMEOUT = 10 # seconds
|
||||
|
||||
# ANSI colors
|
||||
GREEN = "\033[92m"
|
||||
RED = "\033[91m"
|
||||
YELLOW = "\033[93m"
|
||||
CYAN = "\033[96m"
|
||||
BOLD = "\033[1m"
|
||||
RESET = "\033[0m"
|
||||
|
||||
|
||||
def ensure_data_dir():
|
||||
"""Create data directory if it doesn't exist."""
|
||||
os.makedirs(DATA_DIR, exist_ok=True)
|
||||
if not os.path.exists(DATA_FILE):
|
||||
with open(DATA_FILE, "w", encoding="utf-8") as f:
|
||||
json.dump({"records": []}, f)
|
||||
|
||||
|
||||
def load_data():
|
||||
"""Load existing metrics data."""
|
||||
try:
|
||||
with open(DATA_FILE, "r", encoding="utf-8") as f:
|
||||
return json.load(f)
|
||||
except (json.JSONDecodeError, FileNotFoundError):
|
||||
return {"records": []}
|
||||
|
||||
|
||||
def save_data(data):
|
||||
"""Save metrics data, keeping only the last MAX_RECORDS entries."""
|
||||
data["records"] = data["records"][-MAX_RECORDS:]
|
||||
with open(DATA_FILE, "w", encoding="utf-8") as f:
|
||||
json.dump(data, f, indent=2, ensure_ascii=False)
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────
|
||||
# Metric Collectors
|
||||
# ─────────────────────────────────────────────
|
||||
|
||||
def check_latency(url):
|
||||
"""Measure HTTP response time (latency) in milliseconds."""
|
||||
try:
|
||||
start = time.time()
|
||||
req = urllib.request.Request(url, method="GET")
|
||||
req.add_header("User-Agent", "GhaymaMonitor/1.0")
|
||||
response = urllib.request.urlopen(req, timeout=TIMEOUT)
|
||||
latency_ms = round((time.time() - start) * 1000)
|
||||
status_code = response.status
|
||||
response.close()
|
||||
return {
|
||||
"latency_ms": latency_ms,
|
||||
"status_code": status_code,
|
||||
"is_up": 200 <= status_code < 400,
|
||||
"error": None
|
||||
}
|
||||
except urllib.error.HTTPError as e:
|
||||
latency_ms = round((time.time() - start) * 1000)
|
||||
return {
|
||||
"latency_ms": latency_ms,
|
||||
"status_code": e.code,
|
||||
"is_up": False,
|
||||
"error": f"HTTP {e.code}: {e.reason}"
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
"latency_ms": None,
|
||||
"status_code": None,
|
||||
"is_up": False,
|
||||
"error": str(e)
|
||||
}
|
||||
|
||||
|
||||
def check_ssl(hostname):
|
||||
"""Check SSL certificate status and expiration date."""
|
||||
try:
|
||||
context = ssl.create_default_context()
|
||||
with socket.create_connection((hostname, 443), timeout=TIMEOUT) as sock:
|
||||
with context.wrap_socket(sock, server_hostname=hostname) as ssock:
|
||||
cert = ssock.getpeercert()
|
||||
|
||||
# Parse expiration date
|
||||
expire_str = cert.get("notAfter", "")
|
||||
expire_date = datetime.datetime.strptime(
|
||||
expire_str, "%b %d %H:%M:%S %Y %Z"
|
||||
)
|
||||
now = datetime.datetime.utcnow()
|
||||
days_remaining = (expire_date - now).days
|
||||
|
||||
# Get issuer
|
||||
issuer_parts = dict(x[0] for x in cert.get("issuer", []))
|
||||
issuer = issuer_parts.get("organizationName", "Unknown")
|
||||
|
||||
return {
|
||||
"valid": True,
|
||||
"issuer": issuer,
|
||||
"expires": expire_date.strftime("%Y-%m-%d %H:%M:%S UTC"),
|
||||
"days_remaining": days_remaining,
|
||||
"error": None
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
"valid": False,
|
||||
"issuer": None,
|
||||
"expires": None,
|
||||
"days_remaining": None,
|
||||
"error": str(e)
|
||||
}
|
||||
|
||||
|
||||
def check_dns(hostname):
|
||||
"""Measure DNS resolution time in milliseconds."""
|
||||
try:
|
||||
start = time.time()
|
||||
ip_address = socket.gethostbyname(hostname)
|
||||
dns_time_ms = round((time.time() - start) * 1000)
|
||||
return {
|
||||
"dns_time_ms": dns_time_ms,
|
||||
"resolved_ip": ip_address,
|
||||
"error": None
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
"dns_time_ms": None,
|
||||
"resolved_ip": None,
|
||||
"error": str(e)
|
||||
}
|
||||
|
||||
|
||||
def check_search_response(url):
|
||||
"""Send a search/query request and measure response time."""
|
||||
try:
|
||||
search_url = url.rstrip("/") + "/"
|
||||
start = time.time()
|
||||
req = urllib.request.Request(search_url, method="GET")
|
||||
req.add_header("User-Agent", "GhaymaMonitor/1.0")
|
||||
response = urllib.request.urlopen(req, timeout=TIMEOUT)
|
||||
search_time_ms = round((time.time() - start) * 1000)
|
||||
content_length = len(response.read())
|
||||
response.close()
|
||||
return {
|
||||
"search_time_ms": search_time_ms,
|
||||
"content_length": content_length,
|
||||
"status_code": response.status,
|
||||
"error": None
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
"search_time_ms": None,
|
||||
"content_length": None,
|
||||
"status_code": None,
|
||||
"error": str(e)
|
||||
}
|
||||
|
||||
|
||||
# ─────────────────────────────────────────────
|
||||
# Main Collector
|
||||
# ─────────────────────────────────────────────
|
||||
|
||||
def collect_metrics():
|
||||
"""Run all metric checks and return a combined record."""
|
||||
timestamp = datetime.datetime.utcnow().strftime("%Y-%m-%dT%H:%M:%SZ")
|
||||
hostname = TARGET_URL.replace("https://", "").replace("http://", "").split("/")[0]
|
||||
|
||||
print(f"\n{CYAN}[{timestamp}] Collecting metrics for {TARGET_URL}...{RESET}")
|
||||
|
||||
# 1. DNS Resolution
|
||||
dns_result = check_dns(hostname)
|
||||
status = f"{GREEN}✅ {dns_result['dns_time_ms']}ms{RESET}" if not dns_result["error"] else f"{RED}❌ {dns_result['error']}{RESET}"
|
||||
print(f" DNS Resolution: {status}")
|
||||
|
||||
# 2. HTTP Latency & Uptime
|
||||
latency_result = check_latency(TARGET_URL)
|
||||
if latency_result["is_up"]:
|
||||
status = f"{GREEN}✅ {latency_result['status_code']} in {latency_result['latency_ms']}ms{RESET}"
|
||||
else:
|
||||
status = f"{RED}❌ {latency_result.get('error', 'Down')}{RESET}"
|
||||
print(f" HTTP Latency: {status}")
|
||||
|
||||
# 3. SSL Certificate
|
||||
ssl_result = check_ssl(hostname)
|
||||
if ssl_result["valid"]:
|
||||
days = ssl_result["days_remaining"]
|
||||
color = GREEN if days > 30 else (YELLOW if days > 7 else RED)
|
||||
status = f"{color}✅ Valid, {days} days remaining{RESET}"
|
||||
else:
|
||||
status = f"{RED}❌ {ssl_result.get('error', 'Invalid')}{RESET}"
|
||||
print(f" SSL Status: {status}")
|
||||
|
||||
# 4. Search Response
|
||||
search_result = check_search_response(SEARCH_URL)
|
||||
if search_result["search_time_ms"]:
|
||||
status = f"{GREEN}✅ {search_result['search_time_ms']}ms ({search_result['content_length']} bytes){RESET}"
|
||||
else:
|
||||
status = f"{RED}❌ {search_result.get('error', 'Failed')}{RESET}"
|
||||
print(f" Search Response: {status}")
|
||||
|
||||
# Combine into a single record
|
||||
record = {
|
||||
"timestamp": timestamp,
|
||||
"latency": latency_result,
|
||||
"uptime": {
|
||||
"is_up": latency_result["is_up"],
|
||||
"status_code": latency_result["status_code"]
|
||||
},
|
||||
"ssl": ssl_result,
|
||||
"dns": dns_result,
|
||||
"search": search_result
|
||||
}
|
||||
|
||||
return record
|
||||
|
||||
|
||||
def main():
|
||||
ensure_data_dir()
|
||||
|
||||
print(f"{BOLD}{CYAN}")
|
||||
print("=" * 58)
|
||||
print(" mithal.space — Monitoring Collector")
|
||||
print(f" Target: {TARGET_URL}")
|
||||
print(f" Interval: {CHECK_INTERVAL}s (every minute)")
|
||||
print(f" Storage: {DATA_FILE}")
|
||||
print("=" * 58)
|
||||
print(f"{RESET}")
|
||||
|
||||
try:
|
||||
while True:
|
||||
record = collect_metrics()
|
||||
|
||||
# Load, append, save
|
||||
data = load_data()
|
||||
data["records"].append(record)
|
||||
save_data(data)
|
||||
|
||||
up_count = sum(1 for r in data["records"] if r["uptime"]["is_up"])
|
||||
total = len(data["records"])
|
||||
uptime_pct = round((up_count / total) * 100, 2) if total > 0 else 0
|
||||
|
||||
print(f" {BOLD}Uptime (session): {uptime_pct}% ({up_count}/{total} checks){RESET}")
|
||||
print(f" {CYAN}Next check in {CHECK_INTERVAL}s...{RESET}")
|
||||
|
||||
time.sleep(CHECK_INTERVAL)
|
||||
|
||||
except KeyboardInterrupt:
|
||||
print(f"\n{YELLOW}Collector stopped.{RESET}")
|
||||
sys.exit(0)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
المرجع في مشكلة جديدة
حظر مستخدم