<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>
        <br>
        <table class="table table-hover">
            <tr><th></th><th>Used</th><th>Free</th></tr>
            <tr><th><b>Memory</b></th>
                <td id="mem-used"></td><td id="mem-free"></td></tr>
            <tr><th><b>Swap</b></th>
                <td id="swap-used"></td><td id="swap-free"></td></tr>
        </table>
    </div>
</div></div>
<div class="col-md-8"><div class="panel panel-default">
    <div class="panel-heading">Process List</div>
    <div class="panel-body">
        <table id="proc-list" class="table table-hover small" data-sort-name="cpu" data-sort-order="desc">
            <thead>
                <tr>
                    <th data-field="pid"     data-sortable="true"><b>PID</b></th>
                    <th data-field="user"    data-sortable="true">User</th>
                    <th data-field="cpu"     data-sortable="true">CPU</th>
                    <th data-field="cputime" data-sortable="true">CpuTime</th>
                    <th data-field="mem"     data-sortable="true">Memory(MB)</th>
                    <th data-field="cmd"     data-sortable="true" style="word-wrap: break-word;">Proc</th>
                </tr>
            </thead>
        </table>
    </div>
</div></div>

<script language="javascript" type="text/javascript">

$(function() {
    updateCpuChart();
    updateMemChart();
    updateProcTable();
});


var cpu_chart = null;
var cpu_data = {
    labels : ["","","","","","","","","","",
        "","","","","","","","","","",
        "","","","","","","","","","",],
    datasets: []
};

function updateCpuChart(){
    $.getJSON("{{nav.getUrl()}}&json&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(151,187,205,1)",
                    fillColor: "rgba(151,187,205,0.2)",
                    data: [0,0,0,0,0,0,0,0,0,0,0,
                        0,0,0,0,0,0,0,0,0,0,0,
                        0,0,0,0,0,0,0,0,0,0,0]
                });
            }
            // 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: true, pointDot: false, showTooltips: false,
                scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 0.1, scaleSteps: 10, scaleIntegersOnly: false,
                animation : false,
            });
        }

        // Update graph
        cpu_chart.addData(data['cpu'], "");
        cpu_chart.removeData();
    });
    setTimeout(updateCpuChart, 2000);
}


var mem_chart = null;
var mem_data = [
    {
        value: 0,
        color:"#46BFBD",
        highlight: "#5AD3D1",
        label: "Used"
    },{
        value: 1,
        color: "#EEEEEE",
        highlight: "#DDDDDD",
        label: "Free"
    }
];

function updateMemChart(){
    $.getJSON("{{nav.getUrl()}}&json&memory", function( data ) {
        if(mem_chart == null){
            var ctx = $("#mem-chart").get(0).getContext("2d");
            mem_chart = new Chart(ctx).Doughnut(mem_data, {
                animateScale: true
            });
        }
        mem_chart.segments[0].value = data.memory.used;
        mem_chart.segments[1].value = data.memory.free;
        mem_chart.update();

        $("#mem-used").html(data.memory.used + " MB");
        $("#mem-free").html(data.memory.free + " MB");
        $("#swap-used").html(data.swap.used + " MB");
        $("#swap-free").html(data.swap.free + " MB");
    });
    setTimeout(updateMemChart, 5000);
}


function updateProcTable(){
    $.getJSON("{{nav.getUrl()}}&json&proc", function( data ) {
        $('#proc-list').bootstrapTable({
            data: data['proc']
        });
    });
    setTimeout(updateProcTable, 10000);
}
</script>
