Updates to hw status
This commit is contained in:
parent
e38355aa56
commit
4b7973de5f
3 changed files with 102 additions and 38 deletions
|
|
@ -9,6 +9,13 @@
|
|||
<link href="css/magic-bootstrap.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>
|
||||
<body>
|
||||
<!-- Top Bar -->
|
||||
|
|
@ -83,10 +90,5 @@
|
|||
</div>
|
||||
</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>
|
||||
</html>
|
||||
|
|
@ -50,11 +50,14 @@ public class StatusPage extends AbstractPage{
|
|||
Map<String, Object> session,
|
||||
Map<String, String> cookie,
|
||||
Map<String, String> request) {
|
||||
if(request.containsKey("i")) {
|
||||
WAStatus obj = getPlugin(Integer.parseInt(request.get("i")));
|
||||
if(obj != null)
|
||||
return new Templator(obj.html());
|
||||
}
|
||||
WAStatus obj = null;
|
||||
if(request.containsKey("i"))
|
||||
obj = getPlugin(Integer.parseInt(request.get("i")));
|
||||
else
|
||||
obj = getPlugin(0);
|
||||
|
||||
if(obj != null)
|
||||
return new Templator(obj.html());
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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-body">
|
||||
<div id="cpu_chart"></div>
|
||||
<div><canvas id="cpu-chart" style="height: 300px;"></canvas></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">
|
||||
var cpu_data = [];
|
||||
|
||||
function update_cpu(data){
|
||||
$(data).find("cpu").each(function() {
|
||||
$(this).find("core").each(function() {
|
||||
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")] );
|
||||
if(index>MAX_POINTS)
|
||||
cpu_data[cpu_nr].shift();
|
||||
});
|
||||
$(function() {
|
||||
updateCpuChart();
|
||||
updateMemChart();
|
||||
});
|
||||
|
||||
|
||||
var count = 0;
|
||||
var cpu_chart = null;
|
||||
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++){
|
||||
datasets[i] = {
|
||||
label: "Cpu"+i,
|
||||
data: cpu_data[i],
|
||||
lines: { show: true },
|
||||
points: { show: true }
|
||||
};
|
||||
|
||||
var mem_chart = null;
|
||||
var mem_data = [
|
||||
{
|
||||
value: 300,
|
||||
color:"#46BFBD",
|
||||
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: [] },
|
||||
yaxis: { ticks: [0,20,40,60,80,100] }
|
||||
};
|
||||
$.plot($("#cpu_chart"), datasets, options);
|
||||
]
|
||||
|
||||
function updateMemChart(){
|
||||
$.getJSON("?i=0&json&type=mem", function( data ) {
|
||||
if(mem_chart == null){
|
||||
var ctx = $("#mem-chart").get(0).getContext("2d");
|
||||
mem_chart = new Chart(ctx).Doughnut(mem_data, {
|
||||
animateScale: true
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
setTimeout(updateMemChart, 5000);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue