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>
This commit is contained in:
Jo-Philipp Wich
parent
a03ec60696
commit
6a0c1d1ab6
6 changed files with 482 additions and 501 deletions
|
|
@ -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);
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<%#
|
<%#
|
||||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
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.
|
Licensed to the public under the Apache License 2.0.
|
||||||
-%>
|
-%>
|
||||||
|
|
||||||
|
|
@ -131,248 +131,6 @@
|
||||||
|
|
||||||
<%+header%>
|
<%+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>
|
<h2 name="content"><%:Status%></h2>
|
||||||
|
|
||||||
<div class="cbi-section">
|
<div class="cbi-section">
|
||||||
|
|
@ -470,4 +228,6 @@
|
||||||
end
|
end
|
||||||
-%>
|
-%>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="<%=resource%>/view/status/index.js"></script>
|
||||||
|
|
||||||
<%+footer%>
|
<%+footer%>
|
||||||
|
|
|
||||||
|
|
@ -41,265 +41,16 @@
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<h2 name="content"><%:Firewall Status%></h2>
|
||||||
|
|
||||||
<% if has_ip6tables then %>
|
<% if has_ip6tables then %>
|
||||||
<ul class="cbi-tabmenu">
|
<ul class="cbi-tabmenu">
|
||||||
<li class="cbi-tab<%= mode ~= 4 and "-disabled" %>"><a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a></li>
|
<li data-mode="4" class="cbi-tab<%= mode ~= 4 and "-disabled" %>">
|
||||||
<li class="cbi-tab<%= mode ~= 6 and "-disabled" %>"><a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a></li>
|
<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>
|
</ul>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
|
|
@ -314,7 +65,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="iptables">
|
<div id="iptables">
|
||||||
<p><em><%:Collecting data...%></em></p>
|
<p><em class="spinning"><%:Collecting data...%></em></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="<%=resource%>/view/status/iptables.js"></script>
|
||||||
|
|
||||||
<%+footer%>
|
<%+footer%>
|
||||||
|
|
|
||||||
|
|
@ -1993,7 +1993,7 @@ table table td,
|
||||||
margin: -.125em;
|
margin: -.125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dsl_status_table .ifacebox-body > span > strong {
|
#dsl_status_table .ifacebox-body span > strong {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 35%;
|
min-width: 35%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1511,7 +1511,7 @@ select + .cbi-button {
|
||||||
margin: .5em 0 0 0;
|
margin: .5em 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dsl_status_table .ifacebox-body > span > strong {
|
#dsl_status_table .ifacebox-body span > strong {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 35%;
|
min-width: 35%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue