luci-mod-status: move index and iptables page JS code into external files
authorJo-Philipp Wich <jo@mein.io>
Wed, 21 Nov 2018 19:16:06 +0000 (20:16 +0100)
committerJo-Philipp Wich <jo@mein.io>
Thu, 22 Nov 2018 12:07:33 +0000 (13:07 +0100)
Also adjust the Bootstrap and OpenWrt themes accordingly

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js [new file with mode: 0644]
modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js [new file with mode: 0644]
modules/luci-mod-status/luasrc/view/admin_status/index.htm
modules/luci-mod-status/luasrc/view/admin_status/iptables.htm
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js
new file mode 100644 (file)
index 0000000..c2aa3a9
--- /dev/null
@@ -0,0 +1,215 @@
+function progressbar(q, v, m)
+{
+       var pg = document.querySelector(q),
+           vn = parseInt(v) || 0,
+           mn = parseInt(m) || 100,
+           pc = Math.floor((100 / mn) * vn);
+
+       if (pg) {
+               pg.firstElementChild.style.width = pc + '%';
+               pg.setAttribute('title', '%s / %s (%d%%)'.format(v, m, pc));
+       }
+}
+
+function renderBox(title, active, childs) {
+       childs = childs || [];
+       childs.unshift(L.itemlist(E('span'), [].slice.call(arguments, 3)));
+
+       return E('div', { class: 'ifacebox' }, [
+               E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
+                       E('strong', title)),
+               E('div', { class: 'ifacebox-body left' }, childs)
+       ]);
+}
+
+function renderBadge(icon, title) {
+       return E('span', { class: 'ifacebadge' }, [
+               E('img', { src: icon, title: title || '' }),
+               L.itemlist(E('span'), [].slice.call(arguments, 2))
+       ]);
+}
+
+L.poll(5, L.location(), { status: 1 },
+       function(x, info)
+       {
+               var us = document.getElementById('upstream_status_table');
+
+               while (us.lastElementChild)
+                       us.removeChild(us.lastElementChild);
+
+               var wan_list = info.wan || [];
+
+               for (var i = 0; i < wan_list.length; i++) {
+                       var ifc = wan_list[i];
+
+                       us.appendChild(renderBox(
+                               _('IPv4 Upstream'),
+                               (ifc.ifname && ifc.proto != 'none'),
+                               [ E('div', {}, renderBadge(
+                               L.resource('icons/%s.png').format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null,
+                               _('Device'), ifc ? (ifc.name || ifc.ifname || '-') : '-',
+                               _('MAC-Address'), (ifc && ifc.ether) ? ifc.mac : null)) ],
+                               _('Protocol'), ifc.i18n || E('em', _('Not connected')),
+                               _('Address'), (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0',
+                               _('Netmask'), (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
+                               _('Gateway'), (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0',
+                               _('DNS') + ' 1', (ifc.dns) ? ifc.dns[0] : null,
+                               _('DNS') + ' 2', (ifc.dns) ? ifc.dns[1] : null,
+                               _('DNS') + ' 3', (ifc.dns) ? ifc.dns[2] : null,
+                               _('DNS') + ' 4', (ifc.dns) ? ifc.dns[3] : null,
+                               _('DNS') + ' 5', (ifc.dns) ? ifc.dns[4] : null,
+                               _('Expires'), (ifc.expires > -1) ? '%t'.format(ifc.expires) : null,
+                               _('Connected'), (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null));
+               }
+
+               var wan6_list = info.wan6 || [];
+
+               for (var i = 0; i < wan6_list.length; i++) {
+                       var ifc6 = wan6_list[i];
+
+                       us.appendChild(renderBox(
+                               _('IPv6 Upstream'),
+                               (ifc6.ifname && ifc6.proto != 'none'),
+                               [ E('div', {}, renderBadge(
+                                       L.resource('icons/%s.png').format(ifc6.type || 'ethernet_disabled'), null,
+                                       _('Device'), ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-',
+                                       _('MAC-Address'), (ifc6 && ifc6.ether) ? ifc6.mac : null)) ],
+                               _('Protocol'), ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', _('Not connected')),
+                               _('Prefix Delegated'), ifc6.ip6prefix,
+                               _('Address'), (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ip6addr || '::'),
+                               _('Gateway'), (ifc6.gw6addr) ? ifc6.gw6addr : '::',
+                               _('DNS') + ' 1', (ifc6.dns) ? ifc6.dns[0] : null,
+                               _('DNS') + ' 2', (ifc6.dns) ? ifc6.dns[1] : null,
+                               _('DNS') + ' 3', (ifc6.dns) ? ifc6.dns[2] : null,
+                               _('DNS') + ' 4', (ifc6.dns) ? ifc6.dns[3] : null,
+                               _('DNS') + ' 5', (ifc6.dns) ? ifc6.dns[4] : null,
+                               _('Connected'), (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null));
+               }
+
+               var ds = document.getElementById('dsl_status_table');
+               if (ds) {
+                       while (ds.lastElementChild)
+                               ds.removeChild(ds.lastElementChild);
+
+                       ds.appendChild(renderBox(
+                               _('DSL Status'),
+                               (info.dsl.line_state === 'UP'), [ ],
+                               _('Line State'), '%s [0x%x]'.format(info.dsl.line_state, info.dsl.line_state_detail),
+                               _('Line Mode'), info.dsl.line_mode_s || '-',
+                               _('Line Uptime'), info.dsl.line_uptime_s || '-',
+                               _('Annex'), info.dsl.annex_s || '-',
+                               _('Profile'), info.dsl.profile_s || '-',
+                               _('Data Rate'), '%s/s / %s/s'.format(info.dsl.data_rate_down_s, info.dsl.data_rate_up_s),
+                               _('Max. Attainable Data Rate (ATTNDR)'), '%s/s / %s/s'.format(info.dsl.max_data_rate_down_s, info.dsl.max_data_rate_up_s),
+                               _('Latency'), '%s / %s'.format(info.dsl.latency_num_down, info.dsl.latency_num_up),
+                               _('Line Attenuation (LATN)'), '%.1f dB / %.1f dB'.format(info.dsl.line_attenuation_down, info.dsl.line_attenuation_up),
+                               _('Signal Attenuation (SATN)'), '%.1f dB / %.1f dB'.format(info.dsl.signal_attenuation_down, info.dsl.signal_attenuation_up),
+                               _('Noise Margin (SNR)'), '%.1f dB / %.1f dB'.format(info.dsl.noise_margin_down, info.dsl.noise_margin_up),
+                               _('Aggregate Transmit Power(ACTATP)'), '%.1f dB / %.1f dB'.format(info.dsl.actatp_down, info.dsl.actatp_up),
+                               _('Forward Error Correction Seconds (FECS)'), '%d / %d'.format(info.dsl.errors_fec_near, info.dsl.errors_fec_far),
+                               _('Errored seconds (ES)'), '%d / %d'.format(info.dsl.errors_es_near, info.dsl.errors_es_far),
+                               _('Severely Errored Seconds (SES)'), '%d / %d'.format(info.dsl.errors_ses_near, info.dsl.errors_ses_far),
+                               _('Loss of Signal Seconds (LOSS)'), '%d / %d'.format(info.dsl.errors_loss_near, info.dsl.errors_loss_far),
+                               _('Unavailable Seconds (UAS)'), '%d / %d'.format(info.dsl.errors_uas_near, info.dsl.errors_uas_far),
+                               _('Header Error Code Errors (HEC)'), '%d / %d'.format(info.dsl.errors_hec_near, info.dsl.errors_hec_far),
+                               _('Non Pre-emtive CRC errors (CRC_P)'), '%d / %d'.format(info.dsl.errors_crc_p_near, info.dsl.errors_crc_p_far),
+                               _('Pre-emtive CRC errors (CRCP_P)'), '%d / %d'.format(info.dsl.errors_crcp_p_near, info.dsl.errors_crcp_p_far),
+                               _('ATU-C System Vendor ID'), info.dsl.atuc_vendor_id,
+                               _('Power Management Mode'), info.dsl.power_mode_s));
+               }
+
+               var ws = document.getElementById('wifi_status_table');
+               if (ws)
+               {
+                       while (ws.lastElementChild)
+                               ws.removeChild(ws.lastElementChild);
+
+                       for (var didx = 0; didx < info.wifinets.length; didx++)
+                       {
+                               var dev = info.wifinets[didx];
+                               var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {};
+                               var vifs = [];
+
+                               for (var nidx = 0; nidx < dev.networks.length; nidx++)
+                               {
+                                       var net = dev.networks[nidx];
+                                       var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled);
+
+                                       var icon;
+                                       if (net.disabled)
+                                               icon = L.resource('icons/signal-none.png');
+                                       else if (net.quality <= 0)
+                                               icon = L.resource('icons/signal-0.png');
+                                       else if (net.quality < 25)
+                                               icon = L.resource('icons/signal-0-25.png');
+                                       else if (net.quality < 50)
+                                               icon = L.resource('icons/signal-25-50.png');
+                                       else if (net.quality < 75)
+                                               icon = L.resource('icons/signal-50-75.png');
+                                       else
+                                               icon = L.resource('icons/signal-75-100.png');
+
+                                       vifs.push(renderBadge(
+                                               icon,
+                                               '%s: %d dBm / %s: %d%%'.format(_('Signal'), net.signal, _('Quality'), net.quality),
+                                               _('SSID'), E('a', { href: net.link }, [ net.ssid || '?' ]),
+                                               _('Mode'), net.mode,
+                                               _('BSSID'), is_assoc ? (net.bssid || '-') : null,
+                                               _('Encryption'), is_assoc ? net.encryption : null,
+                                               _('Associations'), is_assoc ? (net.num_assoc || '-') : null,
+                                               null, is_assoc ? null : E('em', net.disabled ? _('Wireless is disabled') : _('Wireless is not associated'))));
+                               }
+
+                               ws.appendChild(renderBox(
+                                       dev.device, dev.up || net0.up,
+                                       [ E('div', vifs) ],
+                                       _('Type'), dev.name.replace(/^Generic | Wireless Controller .+$/g, ''),
+                                       _('Channel'), net0.channel ? '%d (%.3f %s)'.format(net0.channel, net0.frequency, _('GHz')) : '-',
+                                       _('Bitrate'), net0.bitrate ? '%d %s'.format(net0.bitrate, _('Mbit/s')) : '-'));
+                       }
+
+                       if (!ws.lastElementChild)
+                               ws.appendChild(E('em', _('No information available')));
+               }
+
+               var e;
+
+               if (e = document.getElementById('localtime'))
+                       e.innerHTML = info.localtime;
+
+               if (e = document.getElementById('uptime'))
+                       e.innerHTML = String.format('%t', info.uptime);
+
+               if (e = document.getElementById('loadavg'))
+                       e.innerHTML = String.format(
+                               '%.02f, %.02f, %.02f',
+                               info.loadavg[0] / 65535.0,
+                               info.loadavg[1] / 65535.0,
+                               info.loadavg[2] / 65535.0
+                       );
+
+               progressbar('#memtotal',
+                       ((info.memory.free + info.memory.buffered) / 1024) + ' ' + _('kB'),
+                       (info.memory.total / 1024) + ' ' + _('kB'));
+
+               progressbar('#memfree',
+                       (info.memory.free / 1024) + ' ' + _('kB'),
+                       (info.memory.total / 1024) + ' ' + _('kB'));
+
+               progressbar('#membuff',
+                       (info.memory.buffered / 1024) + ' ' + _('kB'),
+                       (info.memory.total / 1024) + ' ' + _('kB'));
+
+               progressbar('#swaptotal',
+                       (info.swap.free / 1024) + ' ' + _('kB'),
+                       (info.swap.total / 1024) + ' ' + _('kB'));
+
+               progressbar('#swapfree',
+                       (info.swap.free / 1024) + ' ' + _('kB'),
+                       (info.swap.total / 1024) + ' ' + _('kB'));
+
+               progressbar('#conns',
+                       info.conncount, info.connmax);
+
+       }
+);
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js
new file mode 100644 (file)
index 0000000..39ddab3
--- /dev/null
@@ -0,0 +1,253 @@
+var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ],
+    current_mode = document.querySelector('.cbi-tab[data-mode="6"]') ? 6 : 4;
+
+function create_table_section(table)
+{
+       var idiv = document.getElementById('iptables'),
+           tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
+           title = '%s: %s'.format(_('Table'), table);
+
+       if (!tdiv) {
+               tdiv = E('div', { 'data-table': table }, [
+                       E('h3', {}, title),
+                       E('div')
+               ]);
+
+               if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
+                       idiv.removeChild(idiv.firstElementChild);
+
+               var added = false, thisIdx = table_names.indexOf(table);
+
+               idiv.querySelectorAll('[data-table]').forEach(function(child) {
+                       var childIdx = table_names.indexOf(child.getAttribute('data-table'));
+
+                       if (added === false && childIdx > thisIdx) {
+                               idiv.insertBefore(tdiv, child);
+                               added = true;
+                       }
+               });
+
+               if (added === false)
+                       idiv.appendChild(tdiv);
+       }
+
+       return tdiv.lastElementChild;
+}
+
+function create_chain_section(table, chain, policy, packets, bytes, references)
+{
+       var tdiv = create_table_section(table),
+           cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
+           title;
+
+       if (policy)
+               title = '%s <em>%s</em> <span>(%s: <em>%s</em>, %d %s, %.2mB %s)</span>'
+                       .format(_('Chain'), chain, _('Policy'), policy, packets, _('Packets'), bytes, _('Traffic'));
+       else
+               title = '%s <em>%s</em> <span class="references">(%d %s)</span>'
+                       .format(_('Chain'), chain, references, _('References'));
+
+       if (!cdiv) {
+               cdiv = E('div', { 'data-chain': chain }, [
+                       E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
+                       E('div', { 'class': 'table' }, [
+                               E('div', { 'class': 'tr table-titles' }, [
+                                       E('div', { 'class': 'th center' }, _('Pkts.')),
+                                       E('div', { 'class': 'th center' }, _('Traffic')),
+                                       E('div', { 'class': 'th' }, _('Target')),
+                                       E('div', { 'class': 'th' }, _('Prot.')),
+                                       E('div', { 'class': 'th' }, _('In')),
+                                       E('div', { 'class': 'th' }, _('Out')),
+                                       E('div', { 'class': 'th' }, _('Source')),
+                                       E('div', { 'class': 'th' }, _('Destination')),
+                                       E('div', { 'class': 'th' }, _('Options')),
+                                       E('div', { 'class': 'th' }, _('Comment'))
+                               ])
+                       ])
+               ]);
+
+               tdiv.appendChild(cdiv);
+       }
+       else {
+               cdiv.firstElementChild.innerHTML = title;
+       }
+
+       return cdiv.lastElementChild;
+}
+
+function update_chain_section(chaintable, rows)
+{
+       if (!chaintable)
+               return;
+
+       cbi_update_table(chaintable, rows, _('No rules in this chain.'));
+
+       if (rows.length === 0 &&
+           document.querySelector('form > [data-hide-empty="true"]'))
+               chaintable.parentNode.style.display = 'none';
+       else
+               chaintable.parentNode.style.display = '';
+
+       chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
+}
+
+function hide_empty(btn)
+{
+       var hide = (btn.getAttribute('data-hide-empty') === 'false');
+
+       btn.setAttribute('data-hide-empty', hide);
+       btn.value = hide ? _('Show empty chains') : _('Hide empty chains');
+       btn.blur();
+
+       document.querySelectorAll('[data-chain][data-empty="true"]')
+               .forEach(function(chaintable) {
+                       chaintable.style.display = hide ? 'none' : '';
+               });
+}
+
+function jump_target(ev)
+{
+       var link = ev.target,
+           table = findParent(link, '[data-table]').getAttribute('data-table'),
+           chain = link.textContent,
+           num = +link.getAttribute('data-num'),
+           elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));
+
+       if (elem) {
+               (document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
+               elem.classList.remove('flash');
+               void elem.offsetWidth;
+               elem.classList.add('flash');
+
+               if (num) {
+                       var rule = elem.nextElementSibling.childNodes[num];
+                       if (rule) {
+                               rule.classList.remove('flash');
+                               void rule.offsetWidth;
+                               rule.classList.add('flash');
+                       }
+               }
+       }
+}
+
+function parse_output(table, s)
+{
+       var current_chain = null;
+       var current_rules = [];
+       var seen_chains = {};
+       var chain_refs = {};
+       var re = /([^\n]*)\n/g;
+       var m, m2;
+
+       while ((m = re.exec(s)) != null) {
+               if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
+                       var chain = RegExp.$1,
+                           policy = RegExp.$2,
+                           packets = +RegExp.$3,
+                           bytes = +RegExp.$4;
+
+                       update_chain_section(current_chain, current_rules);
+
+                       seen_chains[chain] = true;
+                       current_chain = create_chain_section(table, chain, policy, packets, bytes);
+                       current_rules = [];
+               }
+               else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
+                       var chain = RegExp.$1,
+                           references = +RegExp.$2;
+
+                       update_chain_section(current_chain, current_rules);
+
+                       seen_chains[chain] = true;
+                       current_chain = create_chain_section(table, chain, null, null, null, references);
+                       current_rules = [];
+               }
+               else if (m[1].match(/^num /)) {
+                       continue;
+               }
+               else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+\/\d+) +([a-f0-9:.]+\/\d+) +(.+)$/)) !== null) {
+                       var num = +m2[1],
+                           pkts = +m2[2],
+                           bytes = +m2[3],
+                           target = m2[4],
+                           proto = m2[5],
+                           indev = m2[7],
+                           outdev = m2[8],
+                           srcnet = m2[9],
+                           dstnet = m2[10],
+                           options = m2[11] || '-',
+                           comment = '-';
+
+                       options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
+                               function(m1, m2) {
+                                       comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
+                                       return '';
+                               }) || '-';
+
+                       current_rules.push([
+                               '%.2m'.format(pkts).nobr(),
+                               '%.2mB'.format(bytes).nobr(),
+                               target ? '<span class="target">%s</span>'.format(target) : '-',
+                               proto,
+                               (indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
+                               (outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
+                               srcnet,
+                               dstnet,
+                               options,
+                               comment
+                       ]);
+
+                       if (target) {
+                               chain_refs[target] = chain_refs[target] || [];
+                               chain_refs[target].push([ current_chain, num ]);
+                       }
+               }
+       }
+
+       update_chain_section(current_chain, current_rules);
+
+       document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
+               .forEach(function(cdiv) {
+                       if (!seen_chains[cdiv.getAttribute('data-chain')]) {
+                               cdiv.parentNode.removeChild(cdiv);
+                               return;
+                       }
+
+                       cdiv.querySelectorAll('.target').forEach(function(tspan) {
+                               if (seen_chains[tspan.textContent]) {
+                                       tspan.classList.add('jump');
+                                       tspan.addEventListener('click', jump_target);
+                               }
+                       });
+
+                       cdiv.querySelectorAll('.references').forEach(function(rspan) {
+                               var refs = chain_refs[cdiv.getAttribute('data-chain')];
+                               if (refs && refs.length) {
+                                       rspan.classList.add('cbi-tooltip-container');
+                                       rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));
+
+                                       refs.forEach(function(ref) {
+                                               var chain = ref[0].parentNode.getAttribute('data-chain'),
+                                                   num = ref[1];
+
+                                               rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
+                                                       _('Chain'), ' ',
+                                                       E('span', {
+                                                               'class': 'jump',
+                                                               'data-num': num,
+                                                               'onclick': 'jump_target(event)'
+                                                       }, chain),
+                                                       ', %s #%d'.format(_('Rule'), num)
+                                               ]));
+                                       });
+                               }
+                       });
+               });
+}
+
+table_names.forEach(function(table) {
+       L.poll(5, L.url('admin/status/iptables_dump', current_mode, table.toLowerCase()), null,
+               function (xhr) {
+                       parse_output(table, xhr.responseText);
+               });
+});
index b98ba76f899f620d971d208ef24014d4d4f22b4d..b11956a8af5a5b444769269ef2081c4264e4d82c 100644 (file)
@@ -1,6 +1,6 @@
 <%#
  Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008-2011 Jo-Philipp Wich <jow@openwrt.org>
+ Copyright 2008-2018 Jo-Philipp Wich <jo@mein.io>
  Licensed to the public under the Apache License 2.0.
 -%>
 
 
 <%+header%>
 
-<script type="text/javascript">//<![CDATA[
-       function progressbar(q, v, m)
-       {
-               var pg = document.querySelector(q),
-                   vn = parseInt(v) || 0,
-                   mn = parseInt(m) || 100,
-                   pc = Math.floor((100 / mn) * vn);
-
-               if (pg) {
-                       pg.firstElementChild.style.width = pc + '%';
-                       pg.setAttribute('title', '%s / %s (%d%%)'.format(v, m, pc));
-               }
-       }
-
-       function labelList(items, offset) {
-               var rv = [ ];
-
-               for (var i = offset || 0; i < items.length; i += 2) {
-                       var label = items[i],
-                           value = items[i+1];
-
-                       if (value === undefined || value === null)
-                               continue;
-
-                       if (label)
-                               rv.push(E('strong', [label, ': ']));
-
-                       rv.push(value, E('br'));
-               }
-
-               return rv;
-       }
-
-       function renderBox(title, active, childs) {
-               childs = childs || [];
-               childs.unshift(E('span', labelList(arguments, 3)));
-
-               return E('div', { class: 'ifacebox' }, [
-                       E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
-                               E('strong', title)),
-                       E('div', { class: 'ifacebox-body left' }, childs)
-               ]);
-       }
-
-       function renderBadge(icon, title) {
-               return E('span', { class: 'ifacebadge' }, [
-                       E('img', { src: icon, title: title || '' }),
-                       E('span', labelList(arguments, 2))
-               ]);
-       }
-
-       XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
-               function(x, info)
-               {
-                       var us = document.getElementById('upstream_status_table');
-
-                       while (us.lastElementChild)
-                               us.removeChild(us.lastElementChild);
-
-                       var wan_list = info.wan || [];
-
-                       for (var i = 0; i < wan_list.length; i++) {
-                               var ifc = wan_list[i];
-
-                               us.appendChild(renderBox(
-                                       '<%:IPv4 Upstream%>',
-                                       (ifc.ifname && ifc.proto != 'none'),
-                                       [ E('div', {}, renderBadge(
-                                       '<%=resource%>' + '/icons/%s.png'.format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null,
-                                       '<%:Device%>', ifc ? (ifc.name || ifc.ifname || '-') : '-',
-                                       '<%:MAC-Address%>', (ifc && ifc.ether) ? ifc.mac : null)) ],
-                                       '<%:Protocol%>', ifc.i18n || E('em', '<%:Not connected%>'),
-                                       '<%:Address%>', (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0',
-                                       '<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255',
-                                       '<%:Gateway%>', (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0',
-                                       '<%:DNS%> 1', (ifc.dns) ? ifc.dns[0] : null,
-                                       '<%:DNS%> 2', (ifc.dns) ? ifc.dns[1] : null,
-                                       '<%:DNS%> 3', (ifc.dns) ? ifc.dns[2] : null,
-                                       '<%:DNS%> 4', (ifc.dns) ? ifc.dns[3] : null,
-                                       '<%:DNS%> 5', (ifc.dns) ? ifc.dns[4] : null,
-                                       '<%:Expires%>', (ifc.expires > -1) ? '%t'.format(ifc.expires) : null,
-                                       '<%:Connected%>', (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null));
-                       }
-
-                       <% if has_ipv6 then %>
-                       var wan6_list = info.wan6 || [];
-
-                       for (var i = 0; i < wan6_list.length; i++) {
-                               var ifc6 = wan6_list[i];
-
-                               us.appendChild(renderBox(
-                                       '<%:IPv6 Upstream%>',
-                                       (ifc6.ifname && ifc6.proto != 'none'),
-                                       [ E('div', {}, renderBadge(
-                                               '<%=resource%>/icons/%s.png'.format(ifc6.type || 'ethernet_disabled'), null,
-                                               '<%:Device%>', ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-',
-                                               '<%:MAC-Address%>', (ifc6 && ifc6.ether) ? ifc6.mac : null)) ],
-                                       '<%:Protocol%>', ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', '<%:Not connected%>'),
-                                       '<%:Prefix Delegated%>', ifc6.ip6prefix,
-                                       '<%:Address%>', (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ip6addr || '::'),
-                                       '<%:Gateway%>', (ifc6.gw6addr) ? ifc6.gw6addr : '::',
-                                       '<%:DNS%> 1', (ifc6.dns) ? ifc6.dns[0] : null,
-                                       '<%:DNS%> 2', (ifc6.dns) ? ifc6.dns[1] : null,
-                                       '<%:DNS%> 3', (ifc6.dns) ? ifc6.dns[2] : null,
-                                       '<%:DNS%> 4', (ifc6.dns) ? ifc6.dns[3] : null,
-                                       '<%:DNS%> 5', (ifc6.dns) ? ifc6.dns[4] : null,
-                                       '<%:Connected%>', (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null));
-                       }
-                       <% end %>
-
-                       <% if has_dsl then %>
-                               var ds = document.getElementById('dsl_status_table');
-
-                               while (ds.lastElementChild)
-                                       ds.removeChild(ds.lastElementChild);
-
-                               ds.appendChild(renderBox(
-                                       '<%:DSL Status%>',
-                                       (info.dsl.line_state === 'UP'), [ ],
-                                       '<%:Line State%>', '%s [0x%x]'.format(info.dsl.line_state, info.dsl.line_state_detail),
-                                       '<%:Line Mode%>', info.dsl.line_mode_s || '-',
-                                       '<%:Line Uptime%>', info.dsl.line_uptime_s || '-',
-                                       '<%:Annex%>', info.dsl.annex_s || '-',
-                                       '<%:Profile%>', info.dsl.profile_s || '-',
-                                       '<%:Data Rate%>', '%s/s / %s/s'.format(info.dsl.data_rate_down_s, info.dsl.data_rate_up_s),
-                                       '<%:Max. Attainable Data Rate (ATTNDR)%>', '%s/s / %s/s'.format(info.dsl.max_data_rate_down_s, info.dsl.max_data_rate_up_s),
-                                       '<%:Latency%>', '%s / %s'.format(info.dsl.latency_num_down, info.dsl.latency_num_up),
-                                       '<%:Line Attenuation (LATN)%>', '%.1f dB / %.1f dB'.format(info.dsl.line_attenuation_down, info.dsl.line_attenuation_up),
-                                       '<%:Signal Attenuation (SATN)%>', '%.1f dB / %.1f dB'.format(info.dsl.signal_attenuation_down, info.dsl.signal_attenuation_up),
-                                       '<%:Noise Margin (SNR)%>', '%.1f dB / %.1f dB'.format(info.dsl.noise_margin_down, info.dsl.noise_margin_up),
-                                       '<%:Aggregate Transmit Power(ACTATP)%>', '%.1f dB / %.1f dB'.format(info.dsl.actatp_down, info.dsl.actatp_up),
-                                       '<%:Forward Error Correction Seconds (FECS)%>', '%d / %d'.format(info.dsl.errors_fec_near, info.dsl.errors_fec_far),
-                                       '<%:Errored seconds (ES)%>', '%d / %d'.format(info.dsl.errors_es_near, info.dsl.errors_es_far),
-                                       '<%:Severely Errored Seconds (SES)%>', '%d / %d'.format(info.dsl.errors_ses_near, info.dsl.errors_ses_far),
-                                       '<%:Loss of Signal Seconds (LOSS)%>', '%d / %d'.format(info.dsl.errors_loss_near, info.dsl.errors_loss_far),
-                                       '<%:Unavailable Seconds (UAS)%>', '%d / %d'.format(info.dsl.errors_uas_near, info.dsl.errors_uas_far),
-                                       '<%:Header Error Code Errors (HEC)%>', '%d / %d'.format(info.dsl.errors_hec_near, info.dsl.errors_hec_far),
-                                       '<%:Non Pre-emtive CRC errors (CRC_P)%>', '%d / %d'.format(info.dsl.errors_crc_p_near, info.dsl.errors_crc_p_far),
-                                       '<%:Pre-emtive CRC errors (CRCP_P)%>', '%d / %d'.format(info.dsl.errors_crcp_p_near, info.dsl.errors_crcp_p_far),
-                                       '<%:ATU-C System Vendor ID%>', info.dsl.atuc_vendor_id,
-                                       '<%:Power Management Mode%>', info.dsl.power_mode_s));
-                       <% end %>
-
-                       <% if has_wifi then %>
-                       var ws = document.getElementById('wifi_status_table');
-                       if (ws)
-                       {
-                               while (ws.lastElementChild)
-                                       ws.removeChild(ws.lastElementChild);
-
-                               for (var didx = 0; didx < info.wifinets.length; didx++)
-                               {
-                                       var dev = info.wifinets[didx];
-                                       var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {};
-                                       var vifs = [];
-
-                                       for (var nidx = 0; nidx < dev.networks.length; nidx++)
-                                       {
-                                               var net = dev.networks[nidx];
-                                               var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled);
-
-                                               var icon;
-                                               if (net.disabled)
-                                                       icon = "<%=resource%>/icons/signal-none.png";
-                                               else if (net.quality <= 0)
-                                                       icon = "<%=resource%>/icons/signal-0.png";
-                                               else if (net.quality < 25)
-                                                       icon = "<%=resource%>/icons/signal-0-25.png";
-                                               else if (net.quality < 50)
-                                                       icon = "<%=resource%>/icons/signal-25-50.png";
-                                               else if (net.quality < 75)
-                                                       icon = "<%=resource%>/icons/signal-50-75.png";
-                                               else
-                                                       icon = "<%=resource%>/icons/signal-75-100.png";
-
-                                               vifs.push(renderBadge(
-                                                       icon,
-                                                       '<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, net.quality),
-                                                       '<%:SSID%>', E('a', { href: net.link }, [ net.ssid || '?' ]),
-                                                       '<%:Mode%>', net.mode,
-                                                       '<%:BSSID%>', is_assoc ? (net.bssid || '-') : null,
-                                                       '<%:Encryption%>', is_assoc ? net.encryption : null,
-                                                       '<%:Associations%>', is_assoc ? (net.num_assoc || '-') : null,
-                                                       null, is_assoc ? null : E('em', net.disabled ? '<%:Wireless is disabled%>' : '<%:Wireless is not associated%>')));
-                                       }
-
-                                       ws.appendChild(renderBox(
-                                               dev.device, dev.up || net0.up,
-                                               [ E('div', vifs) ],
-                                               '<%:Type%>', dev.name.replace(/^Generic | Wireless Controller .+$/g, ''),
-                                               '<%:Channel%>', net0.channel ? '%d (%.3f <%:GHz%>)'.format(net0.channel, net0.frequency) : '-',
-                                               '<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-'));
-                               }
-
-                               if (!ws.lastElementChild)
-                                       ws.appendChild(E('<em><%:No information available%></em>'));
-                       }
-                       <% end %>
-
-                       var e;
-
-                       if (e = document.getElementById('localtime'))
-                               e.innerHTML = info.localtime;
-
-                       if (e = document.getElementById('uptime'))
-                               e.innerHTML = String.format('%t', info.uptime);
-
-                       if (e = document.getElementById('loadavg'))
-                               e.innerHTML = String.format(
-                                       '%.02f, %.02f, %.02f',
-                                       info.loadavg[0] / 65535.0,
-                                       info.loadavg[1] / 65535.0,
-                                       info.loadavg[2] / 65535.0
-                               );
-
-                       progressbar('#memtotal',
-                               ((info.memory.free + info.memory.buffered) / 1024) + " <%:kB%>",
-                               (info.memory.total / 1024) + " <%:kB%>");
-
-                       progressbar('#memfree',
-                               (info.memory.free / 1024) + " <%:kB%>",
-                               (info.memory.total / 1024) + " <%:kB%>");
-
-                       progressbar('#membuff',
-                               (info.memory.buffered / 1024) + " <%:kB%>",
-                               (info.memory.total / 1024) + " <%:kB%>");
-
-                       progressbar('#swaptotal',
-                               (info.swap.free / 1024) + " <%:kB%>",
-                               (info.swap.total / 1024) + " <%:kB%>");
-
-                       progressbar('#swapfree',
-                               (info.swap.free / 1024) + " <%:kB%>",
-                               (info.swap.total / 1024) + " <%:kB%>");
-
-                       progressbar('#conns',
-                               info.conncount, info.connmax);
-
-               }
-       );
-//]]></script>
-
 <h2 name="content"><%:Status%></h2>
 
 <div class="cbi-section">
        end
 -%>
 
+<script type="text/javascript" src="<%=resource%>/view/status/index.js"></script>
+
 <%+footer%>
index 50defac90eff7ed7afc8d6a670c91f9230140326..89f229f3ba987c930a7e59209523925cbfcc087f 100644 (file)
        }
 </style>
 
-<script type="text/javascript">//<![CDATA[
-       var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ];
-
-       function create_table_section(table)
-       {
-               var idiv = document.getElementById('iptables'),
-                   tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
-                   title = '<%:Table%>: %s'.format(table);
-
-               if (!tdiv) {
-                       tdiv = E('div', { 'data-table': table }, [
-                               E('h3', {}, title),
-                               E('div')
-                       ]);
-
-                       if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
-                               idiv.removeChild(idiv.firstElementChild);
-
-                       var added = false, thisIdx = table_names.indexOf(table);
-
-                       idiv.querySelectorAll('[data-table]').forEach(function(child) {
-                               var childIdx = table_names.indexOf(child.getAttribute('data-table'));
-
-                               if (added === false && childIdx > thisIdx) {
-                                       idiv.insertBefore(tdiv, child);
-                                       added = true;
-                               }
-                       });
-
-                       if (added === false)
-                               idiv.appendChild(tdiv);
-               }
-
-               return tdiv.lastElementChild;
-       }
-
-       function create_chain_section(table, chain, policy, packets, bytes, references)
-       {
-               var tdiv = create_table_section(table),
-                   cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
-                   title;
-
-               if (policy)
-                       title = '<%:Chain%> <em>%s</em> <span>(<%:Policy%>: <em>%s</em>, %d <%:Packets%>, %.2mB <%:Traffic%>)</span>'.format(chain, policy, packets, bytes);
-               else
-                       title = '<%:Chain%> <em>%s</em> <span class="references">(%d <%:References%>)</span>'.format(chain, references);
-
-               if (!cdiv) {
-                       cdiv = E('div', { 'data-chain': chain }, [
-                               E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
-                               E('div', { 'class': 'table' }, [
-                                       E('div', { 'class': 'tr table-titles' }, [
-                                               E('div', { 'class': 'th center' }, '<%:Pkts.%>'),
-                                               E('div', { 'class': 'th center' }, '<%:Traffic%>'),
-                                               E('div', { 'class': 'th' }, '<%:Target%>'),
-                                               E('div', { 'class': 'th' }, '<%:Prot.%>'),
-                                               E('div', { 'class': 'th' }, '<%:In%>'),
-                                               E('div', { 'class': 'th' }, '<%:Out%>'),
-                                               E('div', { 'class': 'th' }, '<%:Source%>'),
-                                               E('div', { 'class': 'th' }, '<%:Destination%>'),
-                                               E('div', { 'class': 'th' }, '<%:Options%>'),
-                                               E('div', { 'class': 'th' }, '<%:Comment%>')
-                                       ])
-                               ])
-                       ]);
-
-                       tdiv.appendChild(cdiv);
-               }
-               else {
-                       cdiv.firstElementChild.innerHTML = title;
-               }
-
-               return cdiv.lastElementChild;
-       }
-
-       function update_chain_section(chaintable, rows)
-       {
-               if (!chaintable)
-                       return;
-
-               cbi_update_table(chaintable, rows, '<%:No rules in this chain.%>');
-
-               if (rows.length === 0 &&
-                   document.querySelector('form > [data-hide-empty="true"]'))
-                       chaintable.parentNode.style.display = 'none';
-               else
-                       chaintable.parentNode.style.display = '';
-
-               chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
-       }
-
-       function hide_empty(btn)
-       {
-               var hide = (btn.getAttribute('data-hide-empty') === 'false');
-
-               btn.setAttribute('data-hide-empty', hide);
-               btn.value = hide ? '<%:Show empty chains%>' : '<%:Hide empty chains%>';
-               btn.blur();
-
-               document.querySelectorAll('[data-chain][data-empty="true"]')
-                       .forEach(function(chaintable) {
-                               chaintable.style.display = hide ? 'none' : '';
-                       });
-       }
-
-       function jump_target(ev)
-       {
-               var link = ev.target,
-                   table = findParent(link, '[data-table]').getAttribute('data-table'),
-                   chain = link.textContent,
-                   num = +link.getAttribute('data-num'),
-                   elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));
-
-               if (elem) {
-                       (document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
-                       elem.classList.remove('flash');
-                       void elem.offsetWidth;
-                       elem.classList.add('flash');
-
-                       if (num) {
-                               var rule = elem.nextElementSibling.childNodes[num];
-                               if (rule) {
-                                       rule.classList.remove('flash');
-                                       void rule.offsetWidth;
-                                       rule.classList.add('flash');
-                               }
-                       }
-               }
-       }
-
-       function parse_output(table, s)
-       {
-               var current_chain = null;
-               var current_rules = [];
-               var seen_chains = {};
-               var chain_refs = {};
-               var re = /([^\n]*)\n/g;
-               var m, m2;
-
-               while ((m = re.exec(s)) != null) {
-                       if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
-                               var chain = RegExp.$1,
-                                   policy = RegExp.$2,
-                                   packets = +RegExp.$3,
-                                   bytes = +RegExp.$4;
-
-                               update_chain_section(current_chain, current_rules);
-
-                               seen_chains[chain] = true;
-                               current_chain = create_chain_section(table, chain, policy, packets, bytes);
-                               current_rules = [];
-                       }
-                       else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
-                               var chain = RegExp.$1,
-                                   references = +RegExp.$2;
-
-                               update_chain_section(current_chain, current_rules);
-
-                               seen_chains[chain] = true;
-                               current_chain = create_chain_section(table, chain, null, null, null, references);
-                               current_rules = [];
-                       }
-                       else if (m[1].match(/^num /)) {
-                               continue;
-                       }
-                       else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+\/\d+) +([a-f0-9:.]+\/\d+) +(.+)$/)) !== null) {
-                               var num = +m2[1],
-                                   pkts = +m2[2],
-                                   bytes = +m2[3],
-                                   target = m2[4],
-                                   proto = m2[5],
-                                   indev = m2[7],
-                                   outdev = m2[8],
-                                   srcnet = m2[9],
-                                   dstnet = m2[10],
-                                   options = m2[11] || '-',
-                                   comment = '-';
-
-                               options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
-                                       function(m1, m2) {
-                                               comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
-                                               return '';
-                                       }) || '-';
-
-                               current_rules.push([
-                                       '%.2m'.format(pkts).nobr(),
-                                       '%.2mB'.format(bytes).nobr(),
-                                       target ? '<span class="target">%s</span>'.format(target) : '-',
-                                       proto,
-                                       (indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
-                                       (outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
-                                       srcnet,
-                                       dstnet,
-                                       options,
-                                       comment
-                               ]);
-
-                               if (target) {
-                                       chain_refs[target] = chain_refs[target] || [];
-                                       chain_refs[target].push([ current_chain, num ]);
-                               }
-                       }
-               }
-
-               update_chain_section(current_chain, current_rules);
-
-               document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
-                       .forEach(function(cdiv) {
-                               if (!seen_chains[cdiv.getAttribute('data-chain')]) {
-                                       cdiv.parentNode.removeChild(cdiv);
-                                       return;
-                               }
-
-                               cdiv.querySelectorAll('.target').forEach(function(tspan) {
-                                       if (seen_chains[tspan.textContent]) {
-                                               tspan.classList.add('jump');
-                                               tspan.addEventListener('click', jump_target);
-                                       }
-                               });
-
-                               cdiv.querySelectorAll('.references').forEach(function(rspan) {
-                                       var refs = chain_refs[cdiv.getAttribute('data-chain')];
-                                       if (refs && refs.length) {
-                                               rspan.classList.add('cbi-tooltip-container');
-                                               rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));
-
-                                               refs.forEach(function(ref) {
-                                                       var chain = ref[0].parentNode.getAttribute('data-chain'),
-                                                           num = ref[1];
-
-                                                       rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
-                                                               '<%:Chain%> ',
-                                                               E('span', {
-                                                                       'class': 'jump',
-                                                                       'data-num': num,
-                                                                       'onclick': 'jump_target(event)'
-                                                               }, chain),
-                                                               ', <%:Rule%> #%d'.format(num)
-                                                       ]));
-                                               });
-                                       }
-                               });
-                       });
-       }
-
-       table_names.forEach(function(table) {
-               XHR.poll(5, '<%=url("admin/status/iptables_dump", tostring(mode))%>/' + table.toLowerCase(), null,
-                       function (xhr) {
-                               parse_output(table, xhr.responseText);
-                       });
-       });
-//]]></script>
-
 <h2 name="content"><%:Firewall Status%></h2>
 
 <% if has_ip6tables then %>
 <ul class="cbi-tabmenu">
-       <li class="cbi-tab<%= mode ~= 4 and "-disabled" %>"><a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a></li>
-       <li class="cbi-tab<%= mode ~= 6 and "-disabled" %>"><a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a></li>
+       <li data-mode="4" class="cbi-tab<%= mode ~= 4 and "-disabled" %>">
+               <a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a>
+       </li>
+       <li data-mode="6" class="cbi-tab<%= mode ~= 6 and "-disabled" %>">
+               <a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a>
+       </li>
 </ul>
 <% end %>
 
 </div>
 
 <div id="iptables">
-       <p><em><%:Collecting data...%></em></p>
+       <p><em class="spinning"><%:Collecting data...%></em></p>
 </div>
 
+<script type="text/javascript" src="<%=resource%>/view/status/iptables.js"></script>
+
 <%+footer%>
index bb0a0987da93bd31dd4179db2f9e96009be90d87..2322a738574eb81fa6e25688036aa66ed7fb9b00 100644 (file)
@@ -1993,7 +1993,7 @@ table table td,
        margin: -.125em;
 }
 
-#dsl_status_table .ifacebox-body span > strong {
+#dsl_status_table .ifacebox-body span > strong {
        display: inline-block;
        min-width: 35%;
 }
index 4203f03624bd8ab11b3bba9161aa4a88e5b640dd..f6ea9645ff56c2feed6e460641193d1b5f84ac84 100644 (file)
@@ -1511,7 +1511,7 @@ select + .cbi-button {
        margin: .5em 0 0 0;
 }
 
-#dsl_status_table .ifacebox-body span > strong {
+#dsl_status_table .ifacebox-body span > strong {
        display: inline-block;
        min-width: 35%;
 }