|
@@ -73,19 +73,19 @@
|
|
|
Network
|
|
|
<div class="sub header">Network usage in the previous 60 seconds</div>
|
|
|
</h2>
|
|
|
- <p id="NetSpeed" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">n/a</p>
|
|
|
+ <p id="netGraphScale" style="position: absolute; top: 1em; right: 0.3em; font-size: 16px;">n/a</p>
|
|
|
<canvas id="netChart" width="1200" height="300"></canvas>
|
|
|
<div class="ui stackable grid">
|
|
|
<div class="four wide column">
|
|
|
<div class="ui header" >
|
|
|
<span id="rx">0</span>
|
|
|
- <div class="sub header">RX</div>
|
|
|
+ <div class="sub header">Received</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="four wide column">
|
|
|
<div class="ui header" >
|
|
|
<span id="tx">0</span>
|
|
|
- <div class="sub header">TX</div>
|
|
|
+ <div class="sub header">Transmitted</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -260,6 +260,14 @@
|
|
|
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
|
|
|
}
|
|
|
|
|
|
+ function bitToSize(bytes) {
|
|
|
+ var sizes = ['b', 'Kb', 'Mb', 'Gb', 'Tb'];
|
|
|
+ if (bytes == 0) return '0 b';
|
|
|
+ var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)));
|
|
|
+ return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
function chartInit(){
|
|
|
cpuChart = new Chart('cpuChart', {
|
|
|
type: 'line',
|
|
@@ -270,6 +278,7 @@
|
|
|
borderColor: "#4c9dcb",
|
|
|
data: [],
|
|
|
radius: 0,
|
|
|
+ borderWidth: 2,
|
|
|
fill: 'start'
|
|
|
}]
|
|
|
},
|
|
@@ -291,6 +300,7 @@
|
|
|
borderColor: "#9528b4",
|
|
|
data: [],
|
|
|
radius: 0,
|
|
|
+ borderWidth: 2,
|
|
|
fill: 'start'
|
|
|
}]
|
|
|
},
|
|
@@ -301,7 +311,7 @@
|
|
|
addData(ramChart, "",0)
|
|
|
}
|
|
|
|
|
|
- //Create RAM Chart
|
|
|
+ //Create Network Chart
|
|
|
netChart = new Chart('netChart', {
|
|
|
type: 'line',
|
|
|
data: {
|
|
@@ -311,14 +321,16 @@
|
|
|
borderColor: "#a74f01",
|
|
|
data: [],
|
|
|
radius: 0,
|
|
|
+ borderWidth: 2,
|
|
|
fill: 'start'
|
|
|
},
|
|
|
{
|
|
|
- backgroundColor: "rgba(252,243,235,0.4)",
|
|
|
+ backgroundColor: "rgba(252,243,235,0.2)",
|
|
|
borderColor: "#a74f01",
|
|
|
borderDash: [5, 5],
|
|
|
data: [],
|
|
|
radius: 0,
|
|
|
+ borderWidth: 2,
|
|
|
fill: 'start'
|
|
|
|
|
|
}]
|
|
@@ -354,6 +366,12 @@
|
|
|
|
|
|
//Calculate the bandwidth diff
|
|
|
$.get("../../system/network/getNICUsage", function(data){
|
|
|
+ if (data.error !== undefined){
|
|
|
+ //Error
|
|
|
+ console.log(data.error);
|
|
|
+ $("#netGraphScale").text(data.error);
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (previousNetData[0] == 0 && previousNetData[1] == 0){
|
|
|
//Not initiated. Set base and wait for next iteration
|
|
|
previousNetData = [data.RX, data.TX];
|
|
@@ -363,9 +381,20 @@
|
|
|
previousNetData = [data.RX, data.TX];
|
|
|
addAndShiftNetworkDate(netChart, "", rxd/1024, txd/1024);
|
|
|
|
|
|
- //Update the text
|
|
|
- $("#rx").text(bytesToSize(rxd));
|
|
|
- $("#tx").text(bytesToSize(txd));
|
|
|
+ $("#rx").text(bitToSize(rxd)+"/s");
|
|
|
+ $("#tx").text(bitToSize(txd)+"/s");
|
|
|
+
|
|
|
+ //Get the max value of the diagram, round it to the cloest 10x
|
|
|
+ var chartMaxValue = Math.max.apply(this, getMergedRxTxDataset())
|
|
|
+ var logVal = Math.log(chartMaxValue) / Math.log(1024);
|
|
|
+
|
|
|
+ //Round and display the network speed as cloest 100 value
|
|
|
+ function roundNearest100(num, logVal) {
|
|
|
+ return Math.round(num / 100) * 100 * Math.pow(10, logVal);
|
|
|
+ }
|
|
|
+
|
|
|
+ var scale = roundNearest100(chartMaxValue, logVal);
|
|
|
+ $("#netGraphScale").text(scale);
|
|
|
}
|
|
|
})
|
|
|
|