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/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>
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue