diff options
Diffstat (limited to 'modules/luci-mod-status/htdocs/luci-static')
| -rw-r--r-- | modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js | 215 | ||||
| -rw-r--r-- | modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js | 253 |
2 files changed, 468 insertions, 0 deletions
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 index 000000000..c2aa3a9b0 --- /dev/null +++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/index.js @@ -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 index 000000000..39ddab397 --- /dev/null +++ b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js @@ -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); + }); +}); |