98 lines
2.8 KiB
Cheetah
98 lines
2.8 KiB
Cheetah
<div class="col-md-12"><div class="panel panel-default">
|
|
<div class="panel-heading">Cpu Status</div>
|
|
<div class="panel-body">
|
|
<div><canvas id="cpu-chart" height="300"></canvas></div>
|
|
</div>
|
|
</div></div>
|
|
<div class="col-md-4"><div class="panel panel-default">
|
|
<div class="panel-heading">Memory</div>
|
|
<div class="panel-body">
|
|
<center><canvas id="mem-chart" height="300"></canvas></center>
|
|
</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">
|
|
|
|
$(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 : false,
|
|
});
|
|
}
|
|
|
|
// Update graph
|
|
cpu_chart.addData(data['cpu'], "");
|
|
if(count > 30)
|
|
cpu_chart.removeData();
|
|
++count;
|
|
});
|
|
setTimeout(updateCpuChart, 1000);
|
|
}
|
|
|
|
|
|
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"
|
|
}
|
|
]
|
|
|
|
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>
|