modules/luci-mod-status/htdocs/luci-static/resources/view/status/iptables.js

   1 var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ],
   2     current_mode = document.querySelector('.cbi-tab[data-mode="6"]') ? 6 : 4;
   3
   4 function create_table_section(table)
   5 {
   6         var idiv = document.getElementById('iptables'),
   7             tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
   8             title = '%s: %s'.format(_('Table'), table);
   9
  10         if (!tdiv) {
  11                 tdiv = E('div', { 'data-table': table }, [
  12                         E('h3', {}, title),
  13                         E('div')
  14                 ]);
  15
  16                 if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
  17                         idiv.removeChild(idiv.firstElementChild);
  18
  19                 var added = false, thisIdx = table_names.indexOf(table);
  20
  21                 idiv.querySelectorAll('[data-table]').forEach(function(child) {
  22                         var childIdx = table_names.indexOf(child.getAttribute('data-table'));
  23
  24                         if (added === false && childIdx > thisIdx) {
  25                                 idiv.insertBefore(tdiv, child);
  26                                 added = true;
  27                         }
  28                 });
  29
  30                 if (added === false)
  31                         idiv.appendChild(tdiv);
  32         }
  33
  34         return tdiv.lastElementChild;
  35 }
  36
  37 function create_chain_section(table, chain, policy, packets, bytes, references)
  38 {
  39         var tdiv = create_table_section(table),
  40             cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
  41             title;
  42
  43         if (policy)
  44                 title = '%s <em>%s</em> <span>(%s: <em>%s</em>, %d %s, %.2mB %s)</span>'
  45                         .format(_('Chain'), chain, _('Policy'), policy, packets, _('Packets'), bytes, _('Traffic'));
  46         else
  47                 title = '%s <em>%s</em> <span class="references">(%d %s)</span>'
  48                         .format(_('Chain'), chain, references, _('References'));
  49
  50         if (!cdiv) {
  51                 cdiv = E('div', { 'data-chain': chain }, [
  52                         E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
  53                         E('div', { 'class': 'table' }, [
  54                                 E('div', { 'class': 'tr table-titles' }, [
  55                                         E('div', { 'class': 'th center' }, _('Pkts.')),
  56                                         E('div', { 'class': 'th center' }, _('Traffic')),
  57                                         E('div', { 'class': 'th' }, _('Target')),
  58                                         E('div', { 'class': 'th' }, _('Prot.')),
  59                                         E('div', { 'class': 'th' }, _('In')),
  60                                         E('div', { 'class': 'th' }, _('Out')),
  61                                         E('div', { 'class': 'th' }, _('Source')),
  62                                         E('div', { 'class': 'th' }, _('Destination')),
  63                                         E('div', { 'class': 'th' }, _('Options')),
  64                                         E('div', { 'class': 'th' }, _('Comment'))
  65                                 ])
  66                         ])
  67                 ]);
  68
  69                 tdiv.appendChild(cdiv);
  70         }
  71         else {
  72                 cdiv.firstElementChild.innerHTML = title;
  73         }
  74
  75         return cdiv.lastElementChild;
  76 }
  77
  78 function update_chain_section(chaintable, rows)
  79 {
  80         if (!chaintable)
  81                 return;
  82
  83         cbi_update_table(chaintable, rows, _('No rules in this chain.'));
  84
  85         if (rows.length === 0 &&
  86             document.querySelector('form > [data-hide-empty="true"]'))
  87                 chaintable.parentNode.style.display = 'none';
  88         else
  89                 chaintable.parentNode.style.display = '';
  90
  91         chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
  92 }
  93
  94 function hide_empty(btn)
  95 {
  96         var hide = (btn.getAttribute('data-hide-empty') === 'false');
  97
  98         btn.setAttribute('data-hide-empty', hide);
  99         btn.value = hide ? _('Show empty chains') : _('Hide empty chains');
 100         btn.blur();
 101
 102         document.querySelectorAll('[data-chain][data-empty="true"]')
 103                 .forEach(function(chaintable) {
 104                         chaintable.style.display = hide ? 'none' : '';
 105                 });
 106 }
 107
 108 function jump_target(ev)
 109 {
 110         var link = ev.target,
 111             table = findParent(link, '[data-table]').getAttribute('data-table'),
 112             chain = link.textContent,
 113             num = +link.getAttribute('data-num'),
 114             elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));
 115
 116         if (elem) {
 117                 (document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
 118                 elem.classList.remove('flash');
 119                 void elem.offsetWidth;
 120                 elem.classList.add('flash');
 121
 122                 if (num) {
 123                         var rule = elem.nextElementSibling.childNodes[num];
 124                         if (rule) {
 125                                 rule.classList.remove('flash');
 126                                 void rule.offsetWidth;
 127                                 rule.classList.add('flash');
 128                         }
 129                 }
 130         }
 131 }
 132
 133 function parse_output(table, s)
 134 {
 135         var current_chain = null;
 136         var current_rules = [];
 137         var seen_chains = {};
 138         var chain_refs = {};
 139         var re = /([^\n]*)\n/g;
 140         var m, m2;
 141
 142         while ((m = re.exec(s)) != null) {
 143                 if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
 144                         var chain = RegExp.$1,
 145                             policy = RegExp.$2,
 146                             packets = +RegExp.$3,
 147                             bytes = +RegExp.$4;
 148
 149                         update_chain_section(current_chain, current_rules);
 150
 151                         seen_chains[chain] = true;
 152                         current_chain = create_chain_section(table, chain, policy, packets, bytes);
 153                         current_rules = [];
 154                 }
 155                 else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
 156                         var chain = RegExp.$1,
 157                             references = +RegExp.$2;
 158
 159                         update_chain_section(current_chain, current_rules);
 160
 161                         seen_chains[chain] = true;
 162                         current_chain = create_chain_section(table, chain, null, null, null, references);
 163                         current_rules = [];
 164                 }
 165                 else if (m[1].match(/^num /)) {
 166                         continue;
 167                 }
 168                 else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+(?:\/[a-f0-9:.]+)?) +([a-f0-9:.]+(?:\/[a-f0-9:.]+)?) +(.+)$/)) !== null) {
 169                         var num = +m2[1],
 170                             pkts = +m2[2],
 171                             bytes = +m2[3],
 172                             target = m2[4],
 173                             proto = m2[5],
 174                             indev = m2[7],
 175                             outdev = m2[8],
 176                             srcnet = m2[9],
 177                             dstnet = m2[10],
 178                             options = m2[11] || '-',
 179                             comment = '-';
 180
 181                         options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
 182                                 function(m1, m2) {
 183                                         comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
 184                                         return '';
 185                                 }) || '-';
 186
 187                         current_rules.push([
 188                                 '%.2m'.format(pkts).nobr(),
 189                                 '%.2mB'.format(bytes).nobr(),
 190                                 target ? '<span class="target">%s</span>'.format(target) : '-',
 191                                 proto,
 192                                 (indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
 193                                 (outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
 194                                 srcnet,
 195                                 dstnet,
 196                                 options,
 197                                 [ comment ]
 198                         ]);
 199
 200                         if (target) {
 201                                 chain_refs[target] = chain_refs[target] || [];
 202                                 chain_refs[target].push([ current_chain, num ]);
 203                         }
 204                 }
 205         }
 206
 207         update_chain_section(current_chain, current_rules);
 208
 209         document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
 210                 .forEach(function(cdiv) {
 211                         if (!seen_chains[cdiv.getAttribute('data-chain')]) {
 212                                 cdiv.parentNode.removeChild(cdiv);
 213                                 return;
 214                         }
 215
 216                         cdiv.querySelectorAll('.target').forEach(function(tspan) {
 217                                 if (seen_chains[tspan.textContent]) {
 218                                         tspan.classList.add('jump');
 219                                         tspan.addEventListener('click', jump_target);
 220                                 }
 221                         });
 222
 223                         cdiv.querySelectorAll('.references').forEach(function(rspan) {
 224                                 var refs = chain_refs[cdiv.getAttribute('data-chain')];
 225                                 if (refs && refs.length) {
 226                                         rspan.classList.add('cbi-tooltip-container');
 227                                         rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));
 228
 229                                         refs.forEach(function(ref) {
 230                                                 var chain = ref[0].parentNode.getAttribute('data-chain'),
 231                                                     num = ref[1];
 232
 233                                                 rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
 234                                                         _('Chain'), ' ',
 235                                                         E('span', {
 236                                                                 'class': 'jump',
 237                                                                 'data-num': num,
 238                                                                 'onclick': 'jump_target(event)'
 239                                                         }, chain),
 240                                                         ', %s #%d'.format(_('Rule'), num)
 241                                                 ]));
 242                                         });
 243                                 }
 244                         });
 245                 });
 246 }
 247
 248 table_names.forEach(function(table) {
 249         L.Poll.add(function() {
 250                 var cmd = (current_mode == 6) ? '/usr/sbin/ip6tables' : '/usr/sbin/iptables';
 251                 return L.fs.exec_direct(cmd, [ '--line-numbers', '-w', '-nvxL', '-t', table.toLowerCase() ]).then(function(output) {
 252                         parse_output(table, output);
 253                 });
 254         }, 5);
 255 });