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>

diff --git a/applications/luci-app-nlbwmon/luasrc/controller/nlbw.lua b/applications/luci-app-nlbwmon/luasrc/controller/nlbw.lua
index 4f41bb8..bb56bc6 100644 (file)
--- a/applications/luci-app-nlbwmon/luasrc/controller/nlbw.lua
+++ b/applications/luci-app-nlbwmon/luasrc/controller/nlbw.lua
@@ -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

diff --git a/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm b/applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm
index 7db4785..701b242 100644 (file)
--- 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;
@@ -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);
+       if (table.rows.length === 1) {
+               var cell = table.insertRow(-1).insertCell(-1);
+
+               cell.setAttribute('colspan', 7);
+               cell.innerHTML = '<em><%:No data recorded yet.%> <a href="<%=url("admin/nlbw/commit")%>"><%:Force reload…%></a></em>';
        }
 
-       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)));

diff --git a/applications/luci-app-nlbwmon/po/ja/nlbwmon.po b/applications/luci-app-nlbwmon/po/ja/nlbwmon.po
index e81d2e9..71c656b 100644 (file)
--- a/applications/luci-app-nlbwmon/po/ja/nlbwmon.po
+++ b/applications/luci-app-nlbwmon/po/ja/nlbwmon.po
@@ -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 ""
 

diff --git a/applications/luci-app-nlbwmon/po/templates/nlbwmon.pot b/applications/luci-app-nlbwmon/po/templates/nlbwmon.pot
index 5f231f9..61d2230 100644 (file)
--- a/applications/luci-app-nlbwmon/po/templates/nlbwmon.pot
+++ b/applications/luci-app-nlbwmon/po/templates/nlbwmon.pot
@@ -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 ""