Updates to hw status

This commit is contained in:
Ziver Koc 2015-04-14 22:16:16 +00:00
parent e38355aa56
commit 4b7973de5f
3 changed files with 102 additions and 38 deletions

View file

@ -9,6 +9,13 @@
<link href="css/magic-bootstrap.css" rel="stylesheet"> <link href="css/magic-bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/Chart.js"></script>
</head> </head>
<body> <body>
<!-- Top Bar --> <!-- Top Bar -->
@ -83,10 +90,5 @@
</div> </div>
</footer>--> </footer>-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

View file

@ -50,11 +50,14 @@ public class StatusPage extends AbstractPage{
Map<String, Object> session, Map<String, Object> session,
Map<String, String> cookie, Map<String, String> cookie,
Map<String, String> request) { Map<String, String> request) {
if(request.containsKey("i")) { WAStatus obj = null;
WAStatus obj = getPlugin(Integer.parseInt(request.get("i"))); if(request.containsKey("i"))
if(obj != null) obj = getPlugin(Integer.parseInt(request.get("i")));
return new Templator(obj.html()); else
} obj = getPlugin(0);
if(obj != null)
return new Templator(obj.html());
return null; return null;
} }

View file

@ -1,39 +1,98 @@
<div class="panel panel-default"> <div class="col-md-12"><div class="panel panel-default">
<div class="panel-heading">Cpu Status</div> <div class="panel-heading">Cpu Status</div>
<div class="panel-body"> <div class="panel-body">
<div id="cpu_chart"></div> <div><canvas id="cpu-chart" style="height: 300px;"></canvas></div>
</div> </div>
</div> </div></div>
<div class="col-md-4"><div class="panel panel-default">
<div class="panel-heading">Memory</div>
<div class="panel-body">
<div><canvas id="mem-chart" style="height: 300px;"></canvas></div>
</div>
</div></div>
<div class="col-md-8"><div class="panel panel-default">
<div class="panel-heading">Process List</div>
<div class="panel-body">
<div id="proc-list">
<table class="table"></table>
</div>
</div>
</div></div>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var cpu_data = [];
function update_cpu(data){ $(function() {
$(data).find("cpu").each(function() { updateCpuChart();
$(this).find("core").each(function() { updateMemChart();
var cpu_nr = parseInt($(this).attr("id")); });
if(cpu_data.length < (cpu_nr+1))
cpu_data.push( [] );
cpu_data[cpu_nr].push( [index, $(this).attr("load")] ); var count = 0;
if(index>MAX_POINTS) var cpu_chart = null;
cpu_data[cpu_nr].shift(); var cpu_data = {labels : [], datasets: []};
});
function updateCpuChart(){
$.getJSON("?i=0&json&type=cpu", function( data ) {
// Setup graph
if(cpu_chart == null){
// Fill in cpus
for(i=0; i<data['cpu'].length; ++i)
cpu_data['datasets'].push({
strokeColor: "rgba(220,220,220,1)",
//strokeColor: "rgba(151,187,205,1)",
data: []
});
// Graph
var ctx = $("#cpu-chart").get(0).getContext("2d");
cpu_chart = new Chart(ctx).Line(cpu_data, {
responsive: true,
maintainAspectRatio: false, // Fixes stuped behaviour with size
datasetFill: false, pointDot: false, showTooltips: false,
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 0.1, scaleSteps: 10, scaleIntegersOnly: false,
animation : true,
});
}
// Update graph
cpu_chart.addData(data['cpu'], "");
if(count > 30)
cpu_chart.removeData();
++count;
}); });
setTimeout(updateCpuChart, 1000);
}
var datasets = [];
for(i=0; i<cpu_data.length ;i++){ var mem_chart = null;
datasets[i] = { var mem_data = [
label: "Cpu"+i, {
data: cpu_data[i], value: 300,
lines: { show: true }, color:"#46BFBD",
points: { show: true } highlight: "#5AD3D1",
}; label: "Used"
},{
value: 50,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Cache"
},{
value: 100,
color: "#FFFFFF",
highlight: "#EEEEEE",
label: "Free"
} }
var options = { ]
legend: { position: "ne" },
xaxis: { ticks: [] }, function updateMemChart(){
yaxis: { ticks: [0,20,40,60,80,100] } $.getJSON("?i=0&json&type=mem", function( data ) {
}; if(mem_chart == null){
$.plot($("#cpu_chart"), datasets, options); var ctx = $("#mem-chart").get(0).getContext("2d");
mem_chart = new Chart(ctx).Doughnut(mem_data, {
animateScale: true
});
}
});
setTimeout(updateMemChart, 5000);
} }
</script> </script>