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", "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)
 end
 
 local function exec(cmd, args, writer)


@@ -214,3 +215,11 @@ function action_restore()
                        table.concat(output, ", "))
        })
 end
                        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 = [[
 
 
 <% 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;
                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;
 
        table {
                border: 1px solid #999;


@@ -195,8 +195,8 @@
 
 <%+header%>
 
 
 <%+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 = {},
 <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 });
 
 {
        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;
        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) +
 
        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
                });
                        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);
        }
 
        pie('bubble-pie1', rxData);


@@ -639,6 +628,13 @@ function renderHostData()
                conn_total += rec.conns;
        }
 
                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);
 
        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);
 
        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;
 
                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,
                    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.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)  : '-';
 
                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)));
 
        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 "Fixed interval"
 msgstr "特定の間隔"
 

+msgid "Force reload…"
+msgstr ""
+

 msgid "General Settings"
 msgstr "全般設定"
 
 msgid "General Settings"
 msgstr "全般設定"
 


@@ -271,6 +274,9 @@ msgstr "Netlink Bandwidth Monitor - バックアップ / 復元"
 msgid "Netlink Bandwidth Monitor - Configuration"
 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 ""
 
 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 "Fixed interval"
 msgstr ""
 

+msgid "Force reload…"
+msgstr ""
+

 msgid "General Settings"
 msgstr ""
 
 msgid "General Settings"
 msgstr ""
 


@@ -248,6 +251,9 @@ msgstr ""
 msgid "Netlink Bandwidth Monitor - Configuration"
 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 ""
 
 msgid "Only conntrack streams from or to any of these networks are counted."
 msgstr ""