
<div id="net-container"></div>

<div class="col-md-9"><div class="panel panel-default">
    <div class="panel-heading">Routing Table</div>
    <div class="panel-body">
        <table id="routing-table" class="table table-hover small" data-sort-name="metric">
            <thead>
            <tr>
                <th data-field="interface"   data-sortable="true"><b>Interface</b></th>
                <th data-field="destination" data-sortable="true">Destination</th>
                <th data-field="gateway"     data-sortable="true">Gateway</th>
                <th data-field="netmask"     data-sortable="true">Netmask</th>
                <th data-field="flags"       data-sortable="true">Flags</th>
                <th data-field="metric"      data-sortable="true">Metric</th>
            </tr>
            </thead>
        </table>
    </div>
</div></div>




<script language="javascript" type="text/javascript">
$(function() {
    updateNet();
    updateRoutingTable();
});

var net_chart = [];
var net_chart_data = {
    labels : ["","","","","","","","","",""],
    datasets: [
        {
            label: "Tx",
            strokeColor: "rgba(255,0,0,1)",
            fillColor: "rgba(255,0,0,0.2)",
            data: [0,0,0,0,0,0,0,0,0,0,0]
        },{
            label: "Rx",
            strokeColor: "rgba(0,255,0,1)",
            fillColor: "rgba(0,255,0,0.2)",
            data: [0,0,0,0,0,0,0,0,0,0,0]
        }
    ]
};

function updateNet(){
    $.getJSON("{{nav.getUrl()}}&json&net", function( data ) {
        $.each(data['net'], function( index, net ){
            var element = null;
            var html_id = "net-" + net.id;
            if($("#"+html_id).length)
                element = $("#" + html_id);
            else{ // Create new element
                element = $("#template").children().clone();
                $(element).attr("id", html_id);
                $(element).appendTo("#net-container");
                // Set static values
                $(element).find(".net-title").html(net.desc);
                //$(element).find(".net-desc").html(net.desc);
                $(element).find(".net-name").html(net.name);
                /// Create Graph
                var ctx = $(element).find(".net-graph").get(0).getContext("2d");
                net_chart[net.id] = new Chart(ctx).Line(net_chart_data, {
                    responsive: true,
                    maintainAspectRatio: false, // Fixes stuped behaviour with size
                    datasetFill: true, pointDot: false, showTooltips: false, scaleShowVerticalLines: false,
                    animation : false,
                });
            }

            $(element).find(".net-rx").html(byteToString(net.rx));
            $(element).find(".net-tx").html(byteToString(net.tx));
            $(element).find(".net-total-rx").html(byteToString(net.total_rx));
            $(element).find(".net-total-tx").html(byteToString(net.total_tx));
            $(element).find(".net-dropped").html(net.dropped);
            $(element).find(".net-error").html(net.error);
            $(element).find(".net-up").html( (net.up ?
                    "<span class='label label-success'>UP</span>" :
                    "<span class='label label-danger'>DOWN</span>") );
            $(element).find(".net-ip").html(net.ip);
            $(element).find(".net-netmask").html(net.netmask);
            $(element).find(".net-mac").html(net.mac);
            $(element).find(".net-type").html(net.type);
            $(element).find(".net-flags").html(net.flags);

            // Update Graph
            net_chart[net.id].addData([net.tx, net.rx], "");
            net_chart[net.id].removeData();
        });
    });
    setTimeout(updateNet, 2000);
}

var sizes = ["YB", "ZB", "EB", "PB", "TB", "GB", "MB", "kB", "B"];
function byteToString(value){
    var total = sizes.length-1;

    for(; value > 1024 ;--total) {
        value /= 1024;
    }

    value = Math.round(value*10)/10;
    return value+" "+sizes[total];
}

function updateRoutingTable(){
    $.getJSON("{{nav.url}}&json&routing", function( data ) {
        $("#routing-table").bootstrapTable({
            data: data['routing']
        });
    });
    setTimeout(updateNet, 30000);
}
</script>


<div id="template" class="hidden">
    <div id="" class="col-md-6"><div class="panel panel-default">
        <div class="panel-heading net-title"></div>
        <div class="panel-body">
            <div class="col-md-8">
                <div><canvas class="net-graph" height="370"></canvas></div>
            </div>
            <div class="col-md-4">
                <table class="table small net-detail">
                    <tr><th>Name</th><td class="net-name"></td></tr>
                    <tr><th>Status</th><td class="net-up"></td></tr>
                    <tr><th>IP</th><td class="net-ip"></td></tr>
                    <tr><th>Netmask</th><td class="net-netmask"></td></tr>
                    <tr><th>Total Rx</th><td class="net-total-rx"></td></tr>
                    <tr><th>Total Tx</th><td class="net-total-tx"></td></tr>
                    <tr><th>Dropped</th><td class="net-dropped"></td></tr>
                    <tr><th>Errors</th><td class="net-error"></td></tr>
                    <tr><th>Mac</th><td class="net-mac"></td></tr>
                    <tr><th>Type</th><td class="net-type"></td></tr>
                    <tr><th>Flags</th><td class="net-flags"></td></tr>
                </table>
            </div>
            <!--<div><canvas id="hdd-io" height="400"></canvas></div>-->
        </div>
    </div></div>
</div>