Clean Q5 files
هذا الالتزام موجود في:
@@ -1,98 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Application Dashboard</title>
|
||||
|
||||
<style>
|
||||
body{
|
||||
font-family: Arial, sans-serif;
|
||||
background:#f4f4f4;
|
||||
text-align:center;
|
||||
margin-top:50px;
|
||||
}
|
||||
<meta charset="UTF-8">
|
||||
|
||||
.card{
|
||||
width:400px;
|
||||
margin:auto;
|
||||
background:white;
|
||||
padding:25px;
|
||||
border-radius:12px;
|
||||
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
<title>Mithal Monitoring Dashboard</title>
|
||||
|
||||
h1{
|
||||
color:#333;
|
||||
}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
p{
|
||||
font-size:22px;
|
||||
margin:15px 0;
|
||||
}
|
||||
<style>
|
||||
|
||||
span{
|
||||
font-weight:bold;
|
||||
color:green;
|
||||
}
|
||||
</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">
|
||||
|
||||
<h1>Application Dashboard</h1>
|
||||
<h2>Uptime</h2>
|
||||
|
||||
<p>
|
||||
Status:
|
||||
<span id="status">Loading...</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Requests:
|
||||
<span id="requests">0</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Response Time:
|
||||
<span id="response">0</span> ms
|
||||
</p>
|
||||
<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 updateDashboard() {
|
||||
async function loadDashboard(){
|
||||
|
||||
try {
|
||||
const response = await fetch("monitor_data.json");
|
||||
|
||||
const response = await fetch("http://127.0.0.1:8000/stats");
|
||||
const data = await response.json();
|
||||
|
||||
const data = await response.json();
|
||||
const total=data.length;
|
||||
|
||||
document.getElementById("status").textContent = data.status;
|
||||
const up=data.filter(x=>x.uptime==="UP").length;
|
||||
|
||||
document.getElementById("requests").textContent = data.requests;
|
||||
document.getElementById("uptime").innerHTML=((up/total)*100).toFixed(1)+"%";
|
||||
|
||||
document.getElementById("response").textContent = data.response_time;
|
||||
const latest=data[data.length-1];
|
||||
|
||||
}
|
||||
document.getElementById("ssl").innerHTML=latest.ssl_days_remaining+" Days";
|
||||
|
||||
catch(error){
|
||||
document.getElementById("status").innerHTML=latest.uptime;
|
||||
|
||||
document.getElementById("status").textContent = "DOWN";
|
||||
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
|
||||
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
updateDashboard();
|
||||
});
|
||||
|
||||
setInterval(updateDashboard,30000);
|
||||
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>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم