diff options
Diffstat (limited to 'modules')
5 files changed, 124 insertions, 106 deletions
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 0fbe49c12c..7d13679d81 100644 --- 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 168bfefdf8..23ff1df53e 100644 --- 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 633e43e6c3..bc6525969c 100644 --- 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 8848143c98..f5b3404382 100644 --- 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 190eef0ad3..848abb94a8 100644 --- 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", |