241 أسطر
2.4 KiB
HTML
241 أسطر
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>Mithal Monitoring Dashboard</title>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
|
|
body{
|
|
font-family:Arial;
|
|
background:#f4f4f4;
|
|
margin:30px;
|
|
}
|
|
|
|
h1{
|
|
text-align:center;
|
|
}
|
|
|
|
.cards{
|
|
display:flex;
|
|
justify-content:center;
|
|
gap:20px;
|
|
margin-bottom:30px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.card{
|
|
|
|
background:white;
|
|
|
|
padding:20px;
|
|
|
|
width:250px;
|
|
|
|
border-radius:10px;
|
|
|
|
box-shadow:0 0 10px rgba(0,0,0,.2);
|
|
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
canvas{
|
|
|
|
background:white;
|
|
|
|
padding:20px;
|
|
|
|
border-radius:10px;
|
|
|
|
box-shadow:0 0 10px rgba(0,0,0,.2);
|
|
|
|
}
|
|
|
|
table{
|
|
|
|
margin-top:30px;
|
|
|
|
width:100%;
|
|
|
|
border-collapse:collapse;
|
|
|
|
background:white;
|
|
|
|
}
|
|
|
|
th,td{
|
|
|
|
border:1px solid #ddd;
|
|
|
|
padding:10px;
|
|
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
th{
|
|
|
|
background:#3498db;
|
|
|
|
color:white;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Mithal Monitoring Dashboard</h1>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card">
|
|
|
|
<h2>Uptime</h2>
|
|
|
|
<h1 id="uptime">0%</h1>
|
|
|
|
</div>
|
|
|
|
<div class="card">
|
|
|
|
<h2>SSL Remaining</h2>
|
|
|
|
<h1 id="ssl">0 Days</h1>
|
|
|
|
</div>
|
|
|
|
<div class="card">
|
|
|
|
<h2>Last Status</h2>
|
|
|
|
<h1 id="status">-</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<canvas id="chart" height="100"></canvas>
|
|
|
|
<h2>Last 10 Checks</h2>
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Time</th>
|
|
|
|
<th>Status</th>
|
|
|
|
<th>Latency (ms)</th>
|
|
|
|
<th>DNS (ms)</th>
|
|
|
|
<th>Search (ms)</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody id="tableBody">
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<script>
|
|
|
|
async function loadDashboard(){
|
|
|
|
const response = await fetch("monitor_data.json");
|
|
|
|
const data = await response.json();
|
|
|
|
const total=data.length;
|
|
|
|
const up=data.filter(x=>x.uptime==="UP").length;
|
|
|
|
document.getElementById("uptime").innerHTML=((up/total)*100).toFixed(1)+"%";
|
|
|
|
const latest=data[data.length-1];
|
|
|
|
document.getElementById("ssl").innerHTML=latest.ssl_days_remaining+" Days";
|
|
|
|
document.getElementById("status").innerHTML=latest.uptime;
|
|
|
|
const last60=data.slice(-60);
|
|
|
|
const labels=last60.map(x=>x.timestamp.substring(11));
|
|
|
|
const latency=last60.map(x=>x.latency_ms);
|
|
|
|
new Chart(document.getElementById("chart"),{
|
|
|
|
type:"line",
|
|
|
|
data:{
|
|
|
|
labels:labels,
|
|
|
|
datasets:[{
|
|
|
|
label:"Latency",
|
|
|
|
data:latency
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const table=document.getElementById("tableBody");
|
|
|
|
table.innerHTML="";
|
|
|
|
const last10=data.slice(-10).reverse();
|
|
|
|
last10.forEach(item=>{
|
|
|
|
table.innerHTML+=`
|
|
|
|
<tr>
|
|
|
|
<td>${item.timestamp}</td>
|
|
|
|
<td>${item.uptime}</td>
|
|
|
|
<td>${item.latency_ms}</td>
|
|
|
|
<td>${item.dns_ms}</td>
|
|
|
|
<td>${item.search_latency_ms}</td>
|
|
|
|
</tr>
|
|
|
|
`;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
loadDashboard();
|
|
|
|
setInterval(loadDashboard,60000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|