Merge pull request #7079 from TDT-AG/pr/20240423-luci-mod-status

luci-mod-status: unify of the appearance of the real-time graphic display.

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js
index 0fbe49c12cd7d87cbd19516f1a6f906e95c4269f..7d13679d8124b44c8dc89723239b6b4ca72de9c5 100644 (file)
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/bandwidth.js
@@ -247,7 +247,7 @@ return view.extend({
                var svg = data[0],
                    devs = data[1];
 
-               var v = E('div', {}, E('div'));
+               var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, E('div'));
 
                for (var i = 0; i < devs.length; i++) {
                        var ifname = devs[i].getName();
@@ -257,7 +257,7 @@ return view.extend({
 
                        var csvg = svg.cloneNode(true);
 
-                       v.firstElementChild.appendChild(E('div', { 'data-tab': ifname, 'data-tab-title': ifname }, [
+                       v.firstElementChild.appendChild(E('div', { 'class': 'cbi-section', 'data-tab': ifname, 'data-tab-title': ifname }, [
                                csvg,
                                E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
                                E('br'),
@@ -283,7 +283,8 @@ return view.extend({
                                                E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
                                                E('td', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
                                        ])
-                               ])
+                               ]),
+                               E('div', {'class': 'cbi-section-create'})
                        ]));
 
                        this.updateGraph(ifname, csvg, [ { line: 'rx', counter: true }, null, { line: 'tx', counter: true } ], function(svg, info) {
@@ -309,7 +310,11 @@ return view.extend({
 
                this.pollData();
 
-               return v;
+               return  E([], [
+                       E('h2', _('Bandwith')),
+                       E('div', {'class': 'cbi-map-descr'}, _('This page displays the bandwidth used for all available physical interfaces.')),
+                       v
+               ]);
        },
 
        handleSaveApply: null,

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
index 168bfefdf8673d7c6cf5f585588e45999538a947..23ff1df53ea5e4fbfe7aff6a9817bea3726b90b4 100644 (file)
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/connections.js
@@ -318,77 +318,81 @@ return view.extend({
        render: function(data) {
                var svg = data[0];
 
-               var v = E([], [
-                       svg,
-                       E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
-                       E('br'),
-
-                       E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('UDP:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_udp_cur' }, [ '0' ]),
+               var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, [
+                       E('h2', _('Connections')),
+                       E('div', {'class': 'cbi-map-descr'}, _('This page displays the active connections via this device.')),
+                       E('div', { 'class': 'cbi-section' }, [
+                               svg,
+                               E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+                               E('br'),
+
+                               E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('UDP:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_udp_cur' }, [ '0' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_udp_avg' }, [ '0' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_udp_peak' }, [ '0' ])
+                                       ]),
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('TCP:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_tcp_cur' }, [ '0' ]),
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_udp_avg' }, [ '0' ]),
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_tcp_avg' }, [ '0' ]),
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_udp_peak' }, [ '0' ])
-                               ]),
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('TCP:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_tcp_cur' }, [ '0' ]),
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_tcp_peak' }, [ '0' ])
+                                       ]),
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Other:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_otr_cur' }, [ '0' ]),
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_tcp_avg' }, [ '0' ]),
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_otr_avg' }, [ '0' ]),
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_tcp_peak' }, [ '0' ])
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_otr_peak' }, [ '0' ])
+                                       ])
                                ]),
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Other:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_otr_cur' }, [ '0' ]),
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_otr_avg' }, [ '0' ]),
+                               E('div', { 'class': 'right' }, [
+                                       E('button', {
+                                               'class': 'btn cbi-button cbi-button-apply toggle-lookups',
+                                               'click': function(ev) {
+                                                       if (!enableLookups) {
+                                                               ev.currentTarget.classList.add('spinning');
+                                                               ev.currentTarget.disabled = true;
+                                                               enableLookups = true;
+                                                       }
+                                                       else {
+                                                               ev.currentTarget.firstChild.data = _('Enable DNS lookups');
+                                                               enableLookups = false;
+                                                       }
 
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_otr_peak' }, [ '0' ])
-                               ])
-                       ]),
-
-                       E('div', { 'class': 'right' }, [
-                               E('button', {
-                                       'class': 'btn toggle-lookups',
-                                       'click': function(ev) {
-                                               if (!enableLookups) {
-                                                       ev.currentTarget.classList.add('spinning');
-                                                       ev.currentTarget.disabled = true;
-                                                       enableLookups = true;
-                                               }
-                                               else {
-                                                       ev.currentTarget.firstChild.data = _('Enable DNS lookups');
-                                                       enableLookups = false;
+                                                       this.blur();
                                                }
+                                       }, [ enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups') ])
+                               ]),
 
-                                               this.blur();
-                                       }
-                               }, [ enableLookups ? _('Disable DNS lookups') : _('Enable DNS lookups') ])
-                       ]),
-
-                       E('br'),
-
-                       E('div', { 'class': 'cbi-section-node' }, [
-                               E('table', { 'class': 'table', 'id': 'connections' }, [
-                                       E('tr', { 'class': 'tr table-titles' }, [
-                                               E('th', { 'class': 'th col-2 hide-xs' }, [ _('Network') ]),
-                                               E('th', { 'class': 'th col-2' }, [ _('Protocol') ]),
-                                               E('th', { 'class': 'th col-7' }, [ _('Source') ]),
-                                               E('th', { 'class': 'th col-7' }, [ _('Destination') ]),
-                                               E('th', { 'class': 'th col-4' }, [ _('Transfer') ])
-                                       ]),
-                                       E('tr', { 'class': 'tr placeholder' }, [
-                                               E('td', { 'class': 'td' }, [
-                                                       E('em', {}, [ _('Collecting data...') ])
+                               E('br'),
+
+                               E('div', { 'class': 'cbi-section-node' }, [
+                                       E('table', { 'class': 'table', 'id': 'connections' }, [
+                                               E('tr', { 'class': 'tr table-titles' }, [
+                                                       E('th', { 'class': 'th col-2 hide-xs' }, [ _('Network') ]),
+                                                       E('th', { 'class': 'th col-2' }, [ _('Protocol') ]),
+                                                       E('th', { 'class': 'th col-7' }, [ _('Source') ]),
+                                                       E('th', { 'class': 'th col-7' }, [ _('Destination') ]),
+                                                       E('th', { 'class': 'th col-4' }, [ _('Transfer') ])
+                                               ]),
+                                               E('tr', { 'class': 'tr placeholder' }, [
+                                                       E('td', { 'class': 'td' }, [
+                                                               E('em', {}, [ _('Collecting data...') ])
+                                                       ])
                                                ])
                                        ])
                                ])

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js
index 633e43e6c32abc5a8a145faa1347c61f4a05fe3b..bc6525969c9253406594a816b5e9943d89d033bf 100644 (file)
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/load.js
@@ -223,41 +223,45 @@ return view.extend({
        render: function(data) {
                var svg = data[0];
 
-               var v = E([], [
-                       svg,
-                       E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
-                       E('br'),
-
-                       E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f00' }, [ _('1 Minute Load:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load01_cur' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load01_avg' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load01_peak' }, [ '0.00' ])
-                               ]),
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f60' }, [ _('5 Minute Load:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load05_cur' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load05_avg' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load05_peak' }, [ '0.00' ])
-                               ]),
-                               E('tr', { 'class': 'tr' }, [
-                                       E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #fa0' }, [ _('15 Minute Load:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load15_cur' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load15_avg' }, [ '0.00' ]),
-
-                                       E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
-                                       E('td', { 'class': 'td', 'id': 'lb_load15_peak' }, [ '0.00' ])
+               var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, [
+                       E('h2', _('System load')),
+                       E('div', {'class': 'cbi-map-descr'}, _('Load Average is a metric that is used by Linux to keep track of system resources.')),
+                       E('div', { 'class': 'cbi-section' }, [
+                               svg,
+                               E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
+                               E('br'),
+
+                               E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f00' }, [ _('1 Minute Load:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load01_cur' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load01_avg' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load01_peak' }, [ '0.00' ])
+                                       ]),
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f60' }, [ _('5 Minute Load:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load05_cur' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load05_avg' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load05_peak' }, [ '0.00' ])
+                                       ]),
+                                       E('tr', { 'class': 'tr' }, [
+                                               E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #fa0' }, [ _('15 Minute Load:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load15_cur' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load15_avg' }, [ '0.00' ]),
+
+                                               E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
+                                               E('td', { 'class': 'td', 'id': 'lb_load15_peak' }, [ '0.00' ])
+                                       ])
                                ])
                        ])
                ]);

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js
index 8848143c98b53e7bf59082027bdb25976ddffd08..f5b3404382f44882a5bdbff6ed53747e64b78580 100644 (file)
--- a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js
+++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/wireless.js
@@ -241,7 +241,7 @@ return view.extend({
                    svg2 = data[1],
                    wifidevs = data[2];
 
-               var v = E('div', {}, E('div'));
+               var v = E('div', { 'class': 'cbi-map', 'id': 'map' }, E('div'));
 
                for (var i = 0; i < wifidevs.length; i++) {
                        var ifname = wifidevs[i].getIfname();
@@ -252,7 +252,7 @@ return view.extend({
                        var csvg1 = svg1.cloneNode(true),
                            csvg2 = svg2.cloneNode(true);
 
-                       v.firstElementChild.appendChild(E('div', { 'data-tab': ifname, 'data-tab-title': ifname }, [
+                       v.firstElementChild.appendChild(E('div', { 'class': 'cbi-section', 'data-tab': ifname, 'data-tab-title': ifname }, [
                                csvg1,
                                E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
                                E('br'),
@@ -296,7 +296,8 @@ return view.extend({
                                                E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
                                                E('td', { 'class': 'td', 'id': 'rate_bw_peak' }, [ '0 Mbit/s' ])
                                        ])
-                               ])
+                               ]),
+                               E('div', {'class': 'cbi-section-create'})
                        ]));
 
                        this.updateGraph(ifname, csvg1, [ null, { line: 'rssi', offset: 155 }, { line: 'noise', offset: 155 } ], function(svg, info) {
@@ -336,7 +337,11 @@ return view.extend({
 
                this.pollData();
 
-               return v;
+               return E([], [
+                       E('h2', _('Wireless')),
+                       E('div', {'class': 'cbi-map-descr'}, _('This page displays the wireless metrics, for each available radio interfaces.')),
+                       v
+               ]);
        },
 
        handleSaveApply: null,

diff --git a/modules/luci-mod-status/root/usr/share/luci/menu.d/luci-mod-status.json b/modules/luci-mod-status/root/usr/share/luci/menu.d/luci-mod-status.json
index 190eef0ad3107a38df8bff2853cbd25057a1b062..848abb94a86b2da15a356f753917bf7f0cd8a93b 100644 (file)
--- a/modules/luci-mod-status/root/usr/share/luci/menu.d/luci-mod-status.json
+++ b/modules/luci-mod-status/root/usr/share/luci/menu.d/luci-mod-status.json
@@ -136,7 +136,7 @@
        },
 
        "admin/status/realtime/bandwidth": {
-               "title": "Traffic",
+               "title": "Bandwith",
                "order": 2,
                "action": {
                        "type": "view",