diff options
Diffstat (limited to 'modules/luci-mod-status/luasrc/view')
| -rw-r--r-- | modules/luci-mod-status/luasrc/view/admin_status/index.htm | 246 | ||||
| -rw-r--r-- | modules/luci-mod-status/luasrc/view/admin_status/iptables.htm | 265 |
2 files changed, 12 insertions, 499 deletions
diff --git a/modules/luci-mod-status/luasrc/view/admin_status/index.htm b/modules/luci-mod-status/luasrc/view/admin_status/index.htm index b98ba76f89..b11956a8af 100644 --- a/modules/luci-mod-status/luasrc/view/admin_status/index.htm +++ b/modules/luci-mod-status/luasrc/view/admin_status/index.htm @@ -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. -%> @@ -131,248 +131,6 @@ <%+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"> @@ -470,4 +228,6 @@ end -%> +<script type="text/javascript" src="<%=resource%>/view/status/index.js"></script> + <%+footer%> diff --git a/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm b/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm index 50defac90e..89f229f3ba 100644 --- a/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm +++ b/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm @@ -41,265 +41,16 @@ } </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 %> @@ -314,7 +65,9 @@ </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%> |