luci-mod-status: move index and iptables page JS code into external files

Also adjust the Bootstrap and OpenWrt themes accordingly

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

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 b98ba76f8..b11956a8a 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 50defac90..89f229f3b 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%>