luci-app-nlbwmon: improve initial view
Make sure that placeholder pie charts are rendered, display a hint about
yet missing data in the tables and offer a link to force-commit ("Reload")
the data.
Also fix some mixed white space, an imbalanced dom operation and sync
translation template.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich
parent
176e1ded23
commit
f0c83ab341
4 changed files with 124 additions and 80 deletions
|
|
@ -13,6 +13,7 @@ function index()
|
|||
entry({"admin", "nlbw", "ptr"}, call("action_ptr"), nil, 6).leaf = true
|
||||
entry({"admin", "nlbw", "download"}, call("action_download"), nil, 7)
|
||||
entry({"admin", "nlbw", "restore"}, post("action_restore"), nil, 8)
|
||||
entry({"admin", "nlbw", "commit"}, call("action_commit"), nil, 9)
|
||||
end
|
||||
|
||||
local function exec(cmd, args, writer)
|
||||
|
|
@ -214,3 +215,11 @@ function action_restore()
|
|||
table.concat(output, ", "))
|
||||
})
|
||||
end
|
||||
|
||||
function action_commit()
|
||||
local http = require "luci.http"
|
||||
local disp = require "luci.dispatcher"
|
||||
|
||||
http.redirect(disp.build_url("admin/nlbw/display"))
|
||||
exec("/usr/sbin/nlbw", { "-c", "commit" })
|
||||
end
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
-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: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;
|
||||
|
|
@ -195,8 +195,8 @@
|
|||
|
||||
<%+header%>
|
||||
|
||||
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-17.211.60529-fd6f892"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js?v=git-17.211.60529-fd6f892"></script>
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
|
||||
var chartRegistry = {},
|
||||
|
|
@ -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 = '<tr>' +
|
||||
'<th>%s</th>'.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 = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
|
||||
}
|
||||
|
||||
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 = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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%)'
|
||||
}]);
|
||||
if (table.rows.length === 1) {
|
||||
var cell = table.insertRow(-1).insertCell(-1);
|
||||
|
||||
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%)'
|
||||
}]);
|
||||
cell.setAttribute('colspan', 7);
|
||||
cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
|
||||
}
|
||||
|
||||
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)));
|
||||
|
|
|
|||
|
|
@ -201,6 +201,9 @@ msgstr "IP 種別"
|
|||
msgid "Fixed interval"
|
||||
msgstr "特定の間隔"
|
||||
|
||||
msgid "Force reload…"
|
||||
msgstr ""
|
||||
|
||||
msgid "General Settings"
|
||||
msgstr "全般設定"
|
||||
|
||||
|
|
@ -271,6 +274,9 @@ msgstr "Netlink Bandwidth Monitor - バックアップ / 復元"
|
|||
msgid "Netlink Bandwidth Monitor - Configuration"
|
||||
msgstr "Netlink Bandwidth Monitor - 設定"
|
||||
|
||||
msgid "No data recorded yet."
|
||||
msgstr ""
|
||||
|
||||
msgid "Only conntrack streams from or to any of these networks are counted."
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
|
|
@ -182,6 +182,9 @@ msgstr ""
|
|||
msgid "Fixed interval"
|
||||
msgstr ""
|
||||
|
||||
msgid "Force reload…"
|
||||
msgstr ""
|
||||
|
||||
msgid "General Settings"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -248,6 +251,9 @@ msgstr ""
|
|||
msgid "Netlink Bandwidth Monitor - Configuration"
|
||||
msgstr ""
|
||||
|
||||
msgid "No data recorded yet."
|
||||
msgstr ""
|
||||
|
||||
msgid "Only conntrack streams from or to any of these networks are counted."
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue