112 أسطر
1.3 KiB
HTML
112 أسطر
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SRE Dashboard</title>
|
|
|
|
<style>
|
|
|
|
body{
|
|
font-family:Arial,Helvetica,sans-serif;
|
|
background:#f4f4f4;
|
|
margin:30px;
|
|
}
|
|
|
|
h1{
|
|
text-align:center;
|
|
color:#333;
|
|
}
|
|
|
|
table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
background:white;
|
|
box-shadow:0 2px 6px rgba(0,0,0,.15);
|
|
}
|
|
|
|
th{
|
|
background:#1976d2;
|
|
color:white;
|
|
padding:12px;
|
|
}
|
|
|
|
td{
|
|
padding:10px;
|
|
text-align:center;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
|
|
tr:nth-child(even){
|
|
background:#f9f9f9;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>API Monitoring Dashboard</h1>
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Timestamp</th>
|
|
<th>Status</th>
|
|
<th>Response Time</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody id="table-body">
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<script>
|
|
|
|
async function loadData(){
|
|
|
|
const response = await fetch("/metrics");
|
|
|
|
const data = await response.json();
|
|
|
|
const table = document.getElementById("table-body");
|
|
|
|
table.innerHTML = "";
|
|
|
|
data.reverse().forEach(item=>{
|
|
|
|
const parts = item.split("|");
|
|
|
|
table.innerHTML += `
|
|
|
|
<tr>
|
|
|
|
<td>${parts[0]}</td>
|
|
<td>${parts[1]}</td>
|
|
<td>${parts[2]}</td>
|
|
|
|
</tr>
|
|
|
|
`;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
loadData();
|
|
|
|
setInterval(loadData,30000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|