X-Git-Url: http://git.archive.openwrt.org/?p=project%2Fluci.git;a=blobdiff_plain;f=applications%2Fluci-app-nlbwmon%2Fluasrc%2Fview%2Fnlbw%2Fdisplay.htm;h=749b42116ddaf31d96913fad50e1027abffa4d2c;hp=7db47852e68e0423d6936f1a6d67005bc07adfbd;hb=6f9b75cc427be57a1a05373312013ce30fa31b6b;hpb=0b11fdebf8a45ee858482896a96ec40232e32646
diff --git a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
index 7db47852e..749b42116 100644
--- a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
+++ b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
@@ -5,41 +5,41 @@
<% css = [[
- #chartjs-tooltip {
- opacity: 0;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- padding: 3px;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
+ #chartjs-tooltip {
+ opacity: 0;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ padding: 3px;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
z-index: 200;
- }
-
- #chartjs-tooltip.above {
- -webkit-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
- }
-
- #chartjs-tooltip.above:before {
- border: solid;
- border-color: #111 transparent;
- border-color: rgba(0, 0, 0, .8) transparent;
- border-width: 8px 8px 0 8px;
- bottom: 1em;
- content: "";
- display: block;
- left: 50%;
- top: 100%;
- position: absolute;
- z-index: 99;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
+ }
+
+ #chartjs-tooltip.above {
+ -webkit-transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%);
+ }
+
+ #chartjs-tooltip.above:before {
+ border: solid;
+ border-color: #111 transparent;
+ border-color: rgba(0, 0, 0, .8) transparent;
+ border-width: 8px 8px 0 8px;
+ bottom: 1em;
+ content: "";
+ display: block;
+ left: 50%;
+ top: 100%;
+ position: absolute;
+ z-index: 99;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
table {
border: 1px solid #999;
@@ -279,6 +279,13 @@ function pie(id, data)
{
data.sort(function(a, b) { return b.value - a.value });
+ if (data.length === 0 || (data.length === 1 && data[0].value === 0))
+ data[0] = {
+ value: 1,
+ color: '#cccccc',
+ label: [ '<%:no traffic%>' ]
+ };
+
for (var i = 0; i < data.length; i++) {
if (!data[i].color) {
var hue = 120 / (data.length-1) * i;
@@ -474,7 +481,7 @@ function renderHostDetail()
}
);
- var rxData = [], txData = [], rxEmpty = true, txEmpty = true;
+ var rxData = [], txData = [];
table.innerHTML = '
' +
'%s | '.format(label || col) +
@@ -503,24 +510,6 @@ function renderHostDetail()
label: ['%s: %%1024.2mB'.format(rec[col] || '<%:other%>'), row],
value: rec.tx_bytes
});
-
- if (rec.rx_bytes)
- rxEmpty = false;
-
- if (rec.tx_bytes)
- txEmpty = false;
- }
-
- if (rxEmpty) {
- rxData[0].value = 1;
- rxData[0].color = '#cccccc';
- rxData[0].label[0] = '<%:no traffic%>';
- }
-
- if (txEmpty) {
- txData[0].value = 1;
- txData[0].color = '#cccccc';
- txData[0].label[0] = '<%:no traffic%>';
}
pie('bubble-pie1', rxData);
@@ -639,6 +628,13 @@ function renderHostData()
conn_total += rec.conns;
}
+ if (table.rows.length === 1) {
+ var cell = table.insertRow(-1).insertCell(-1);
+
+ cell.setAttribute('colspan', 6);
+ cell.innerHTML = '<%:No data recorded yet.%> "><%:Force reloadâ¦%>';
+ }
+
pie('traf-pie', trafData);
pie('conn-pie', connData);
@@ -692,6 +688,13 @@ function renderLayer7Data()
}
}
+ if (table.rows.length === 1) {
+ var cell = table.insertRow(-1).insertCell(-1);
+
+ cell.setAttribute('colspan', 6);
+ cell.innerHTML = '<%:No data recorded yet.%> "><%:Force reloadâ¦%>';
+ }
+
pie('layer7-rx-pie', rxData);
pie('layer7-tx-pie', txData);
@@ -774,8 +777,7 @@ function renderIPv6Data()
if (mac === '00:00:00:00:00:00')
continue;
- var tbd = document.createElement('tbody'),
- row = tbd.insertRow(-1),
+ var row = table.insertRow(-1),
cell1 = row.insertCell(-1),
cell2 = row.insertCell(-1),
dns = hostInfo[mac] ? hostInfo[mac].name : null,
@@ -795,40 +797,61 @@ function renderIPv6Data()
row.insertCell(-1).innerHTML = rec4 ? "%1024.2mB".format(rec4.tx_bytes) : '-';
row.insertCell(-1).innerHTML = rec4 ? "%1000.2mP".format(rec4.tx_pkts) : '-';
- row = tbd.insertRow(-1);
+ row = table.insertRow(-1);
row.insertCell(-1).innerHTML = 'IPv6';
row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.rx_bytes) : '-';
row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.rx_pkts) : '-';
row.insertCell(-1).innerHTML = rec6 ? "%1024.2mB".format(rec6.tx_bytes) : '-';
row.insertCell(-1).innerHTML = rec6 ? "%1000.2mP".format(rec6.tx_pkts) : '-';
+ }
- table.appendChild(tbd);
+ if (table.rows.length === 1) {
+ var cell = table.insertRow(-1).insertCell(-1);
+
+ cell.setAttribute('colspan', 7);
+ cell.innerHTML = '<%:No data recorded yet.%> "><%:Force reloadâ¦%>';
}
- pie('ipv6-share-pie', [{
- value: rx4_total + tx4_total,
- label: ["IPv4: %.2mB"],
- color: 'hsl(140, 100%, 50%)'
- }, {
- value: rx6_total + tx6_total,
- label: ["IPv6: %.2mB"],
- color: 'hsl(180, 100%, 50%)'
- }]);
-
- pie('ipv6-hosts-pie', [{
- value: v4_total,
- label: ["<%:%d IPv4-only hosts%>"],
- color: 'hsl(140, 100%, 50%)'
- }, {
- value: v6_total,
- label: ["<%:%d IPv6-only hosts%>"],
- color: 'hsl(180, 100%, 50%)'
- }, {
- value: ds_total,
- label: ["<%:%d dual-stack hosts%>"],
- color: 'hsl(50, 100%, 50%)'
- }]);
+ var shareData = [], hostsData = [];
+
+ if (rx4_total > 0 || tx4_total > 0)
+ shareData.push({
+ value: rx4_total + tx4_total,
+ label: ["IPv4: %.2mB"],
+ color: 'hsl(140, 100%, 50%)'
+ });
+
+ if (rx6_total > 0 || tx6_total > 0)
+ shareData.push({
+ value: rx6_total + tx6_total,
+ label: ["IPv6: %.2mB"],
+ color: 'hsl(180, 100%, 50%)'
+ });
+
+ if (v4_total > 0)
+ hostsData.push({
+ value: v4_total,
+ label: ["<%:%d IPv4-only hosts%>"],
+ color: 'hsl(140, 100%, 50%)'
+ });
+
+ if (v6_total > 0)
+ hostsData.push({
+ value: v6_total,
+ label: ["<%:%d IPv6-only hosts%>"],
+ color: 'hsl(180, 100%, 50%)'
+ });
+
+ if (ds_total > 0)
+ hostsData.push({
+ value: ds_total,
+ label: ["<%:%d dual-stack hosts%>"],
+ color: 'hsl(50, 100%, 50%)'
+ });
+
+ pie('ipv6-share-pie', shareData);
+ pie('ipv6-hosts-pie', hostsData);
kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));