}
</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%>
projects / project / luci.git / blobdiff