137 lines
5.3 KiB
HTML
137 lines
5.3 KiB
HTML
<html>
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>HTTP Status Page</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>HTTP Status Page</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header" id="hddtitle">
|
|
Check HDD
|
|
</div>
|
|
<div class="card-body" id="hddpercent">
|
|
<p class="card-text">
|
|
HDD 1:
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header" id="ramtitle">
|
|
Check RAM
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text" id="rampercent">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 20px;">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header" id="loadtitle">
|
|
Check Load
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text" id="loadcontent">...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function getData() {
|
|
$.ajax({
|
|
url: "/data.json",
|
|
}).done(function(data) {
|
|
console.log("ajax done")
|
|
handleData(data)
|
|
}).always(function(data) {
|
|
console.log("always")
|
|
if(data.responseText != "") {
|
|
console.log(data.responseText)
|
|
handleData(data.responseText)
|
|
}
|
|
|
|
setTimeout("getData();", 10000);
|
|
});
|
|
}
|
|
|
|
function handleData(data) {
|
|
console.log("PARSE")
|
|
o = JSON.parse(data)
|
|
//Disc space
|
|
console.log(o)
|
|
|
|
let html = ""
|
|
$("#hddpercent").empty()
|
|
keys = Object.keys(o.Checks["Disc space"].data)
|
|
for(var i = 0; i < keys.length; i++) {
|
|
name = keys[i]
|
|
value = o.Checks["Disc space"].data[keys[i]]
|
|
$("#hddpercent").append('<b>'+name+'</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+value+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +value+ '%</div></div>');
|
|
}
|
|
if (o.Checks["Disc space"].success) {
|
|
$("#hddtitle").addClass("bg-success");
|
|
$("#hddtitle").removeClass("bg-error");
|
|
} else {
|
|
$("#hddtitle").addClass("bg-danger");
|
|
$("#hddtitle").removeClass("bg-success");
|
|
}
|
|
|
|
//ram
|
|
|
|
if (o.Checks["Memory usage"].success) {
|
|
$("#ramtitle").addClass("bg-success");
|
|
$("#ramtitle").removeClass("bg-error");
|
|
} else {
|
|
$("#ramtitle").addClass("bg-danger");
|
|
$("#ramtitle").removeClass("bg-success");
|
|
}
|
|
|
|
$("#rampercent").empty()
|
|
$("#rampercent").append('<b>Ram</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+o.Checks["Memory usage"].data["ram"]+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +o.Checks["Memory usage"].data["ram"]+ '%</div></div>');
|
|
$("#rampercent").append('<b>Swap</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+o.Checks["Memory usage"].data["swap"]+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +o.Checks["Memory usage"].data["swap"]+ '%</div></div>');
|
|
|
|
|
|
//load
|
|
|
|
if (o.Checks["System Load"].success) {
|
|
$("#loadtitle").addClass("bg-success");
|
|
$("#loadtitle").removeClass("bg-error");
|
|
} else {
|
|
$("#loadtitle").addClass("bg-danger");
|
|
$("#loadtitle").removeClass("bg-success");
|
|
}
|
|
$("#loadcontent").empty()
|
|
html = "<table class='table'>"
|
|
html += "<tr><td>1</td><td>"+o.Checks["System Load"].data["Loadavg1"]+"</td></tr>"
|
|
html += "<tr><td>5</td><td>"+o.Checks["System Load"].data["Loadavg5"]+"</td></tr>"
|
|
html += "<tr><td>15</td><td>"+o.Checks["System Load"].data["Loadavg15"]+"</td></tr>"
|
|
html += "</table>"
|
|
$("#loadcontent").append(html)
|
|
|
|
|
|
|
|
}
|
|
getData();
|
|
</script>
|
|
</body>
|
|
</html> |