281 أسطر
5.2 KiB
HTML
281 أسطر
5.2 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mithal Monitoring Dashboard</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
font-family:Arial,Helvetica,sans-serif;
|
|
}
|
|
|
|
body{
|
|
background:#0f172a;
|
|
color:white;
|
|
padding:30px;
|
|
}
|
|
|
|
.container{
|
|
max-width:1400px;
|
|
margin:auto;
|
|
}
|
|
|
|
h1{
|
|
text-align:center;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
|
gap:20px;
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.card{
|
|
background:#1e293b;
|
|
border-radius:12px;
|
|
padding:20px;
|
|
box-shadow:0 0 10px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.card h3{
|
|
color:#94a3b8;
|
|
margin-bottom:15px;
|
|
}
|
|
|
|
.value{
|
|
font-size:32px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.green{
|
|
color:#22c55e;
|
|
}
|
|
|
|
.red{
|
|
color:#ef4444;
|
|
}
|
|
|
|
.orange{
|
|
color:#f59e0b;
|
|
}
|
|
|
|
.chart{
|
|
background:#1e293b;
|
|
padding:20px;
|
|
border-radius:12px;
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.table-card{
|
|
background:#1e293b;
|
|
border-radius:12px;
|
|
padding:20px;
|
|
}
|
|
|
|
table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
}
|
|
|
|
th{
|
|
background:#334155;
|
|
padding:12px;
|
|
}
|
|
|
|
td{
|
|
text-align:center;
|
|
padding:10px;
|
|
border-bottom:1px solid #334155;
|
|
}
|
|
|
|
footer{
|
|
text-align:center;
|
|
margin-top:25px;
|
|
color:#94a3b8;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1>🚀 Mithal.space Monitoring Dashboard</h1>
|
|
|
|
<div class="grid">
|
|
|
|
<div class="card">
|
|
<h3>Status</h3>
|
|
<div id="status" class="value green">Loading...</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>HTTP Latency</h3>
|
|
<div id="latency" class="value">--</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>DNS Lookup</h3>
|
|
<div id="dns" class="value">--</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Search Response</h3>
|
|
<div id="search" class="value">--</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>SSL Days Left</h3>
|
|
<div id="ssl" class="value">--</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>24h Uptime</h3>
|
|
<div id="uptime" class="value">--</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="chart">
|
|
<canvas id="latencyChart"></canvas>
|
|
</div>
|
|
|
|
<div class="table-card">
|
|
<h2 style="margin-bottom:20px;">Last 10 Checks</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Status</th>
|
|
<th>Latency</th>
|
|
<th>DNS</th>
|
|
<th>Search</th>
|
|
<th>SSL Days</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<footer>Updates every 60 seconds</footer>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
let chart;
|
|
|
|
async function loadData(){
|
|
|
|
const response = await fetch("/api/metrics");
|
|
const data = await response.json();
|
|
|
|
if(data.length === 0){
|
|
return;
|
|
}
|
|
|
|
const latest = data[data.length - 1];
|
|
|
|
document.getElementById("status").innerHTML =
|
|
latest.uptime
|
|
? '<span class="green">● ONLINE</span>'
|
|
: '<span class="red">● OFFLINE</span>';
|
|
|
|
document.getElementById("latency").innerHTML = latest.latency_ms + " ms";
|
|
document.getElementById("dns").innerHTML = latest.dns_ms + " ms";
|
|
document.getElementById("search").innerHTML = latest.search_latency_ms + " ms";
|
|
document.getElementById("ssl").innerHTML = latest.ssl_days_left + " days";
|
|
|
|
const uptimePercent = (
|
|
data.filter(x => x.uptime).length / data.length * 100
|
|
).toFixed(2);
|
|
|
|
document.getElementById("uptime").innerHTML = uptimePercent + "%";
|
|
|
|
const labels = data.slice(-60).map(x => x.timestamp.split(" ")[1]);
|
|
const latency = data.slice(-60).map(x => x.latency_ms);
|
|
|
|
if(chart){
|
|
chart.destroy();
|
|
}
|
|
|
|
chart = new Chart(
|
|
document.getElementById("latencyChart"),
|
|
{
|
|
type: "line",
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: "Latency (ms)",
|
|
data: latency,
|
|
borderWidth: 3,
|
|
fill: false,
|
|
tension: .3,
|
|
borderColor: "#38bdf8"
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: "white"
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "white"
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "white"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
const tbody = document.getElementById("history");
|
|
tbody.innerHTML = "";
|
|
|
|
data.slice(-10).reverse().forEach(row => {
|
|
tbody.innerHTML += `
|
|
<tr>
|
|
<td>${row.timestamp}</td>
|
|
<td>
|
|
${row.uptime
|
|
? '<span class="green">Online</span>'
|
|
: '<span class="red">Offline</span>'}
|
|
</td>
|
|
<td>${row.latency_ms} ms</td>
|
|
<td>${row.dns_ms} ms</td>
|
|
<td>${row.search_latency_ms} ms</td>
|
|
<td>${row.ssl_days_left} days</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
}
|
|
|
|
loadData();
|
|
setInterval(loadData, 60000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|