modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js

   1 'use strict';
   2 'require view';
   3 'require dom';
   4 'require poll';
   5 'require fs';
   6 'require ui';
   7 'require uci';
   8 'require form';
   9 'require network';
  10 'require firewall';
  11 'require tools.widgets as widgets';
  12 'require tools.network as nettools';
  13
  14 var isReadonlyView = !L.hasViewPermission() || null;
  15
  16 function count_changes(section_id) {
  17         var changes = ui.changes.changes, n = 0;
  18
  19         if (!L.isObject(changes))
  20                 return n;
  21
  22         if (Array.isArray(changes.network))
  23                 for (var i = 0; i < changes.network.length; i++)
  24                         n += (changes.network[i][1] == section_id);
  25
  26         if (Array.isArray(changes.dhcp))
  27                 for (var i = 0; i < changes.dhcp.length; i++)
  28                         n += (changes.dhcp[i][1] == section_id);
  29
  30         return n;
  31 }
  32
  33 function render_iface(dev, alias) {
  34         var type = dev ? dev.getType() : 'ethernet',
  35             up   = dev ? dev.isUp() : false;
  36
  37         return E('span', { class: 'cbi-tooltip-container' }, [
  38                 E('img', { 'class' : 'middle', 'src': L.resource('icons/%s%s.png').format(
  39                         alias ? 'alias' : type,
  40                         up ? '' : '_disabled') }),
  41                 E('span', { 'class': 'cbi-tooltip ifacebadge large' }, [
  42                         E('img', { 'src': L.resource('icons/%s%s.png').format(
  43                                 type, up ? '' : '_disabled') }),
  44                         L.itemlist(E('span', { 'class': 'left' }), [
  45                                 _('Type'),      dev ? dev.getTypeI18n() : null,
  46                                 _('Device'),    dev ? dev.getName() : _('Not present'),
  47                                 _('Connected'), up ? _('yes') : _('no'),
  48                                 _('MAC'),       dev ? dev.getMAC() : null,
  49                                 _('RX'),        dev ? '%.2mB (%d %s)'.format(dev.getRXBytes(), dev.getRXPackets(), _('Pkts.')) : null,
  50                                 _('TX'),        dev ? '%.2mB (%d %s)'.format(dev.getTXBytes(), dev.getTXPackets(), _('Pkts.')) : null
  51                         ])
  52                 ])
  53         ]);
  54 }
  55
  56 function render_status(node, ifc, with_device) {
  57         var desc = null, c = [];
  58
  59         if (ifc.isDynamic())
  60                 desc = _('Virtual dynamic interface');
  61         else if (ifc.isAlias())
  62                 desc = _('Alias Interface');
  63         else if (!uci.get('network', ifc.getName()))
  64                 return L.itemlist(node, [
  65                         null, E('em', _('Interface is marked for deletion'))
  66                 ]);
  67
  68         var i18n = ifc.getI18n();
  69         if (i18n)
  70                 desc = desc ? '%s (%s)'.format(desc, i18n) : i18n;
  71
  72         var changecount = with_device ? 0 : count_changes(ifc.getName()),
  73             ipaddrs = changecount ? [] : ifc.getIPAddrs(),
  74             ip6addrs = changecount ? [] : ifc.getIP6Addrs(),
  75             errors = ifc.getErrors(),
  76             maindev = ifc.getL3Device() || ifc.getDevice(),
  77             macaddr = maindev ? maindev.getMAC() : null;
  78
  79         return L.itemlist(node, [
  80                 _('Protocol'), with_device ? null : (desc || '?'),
  81                 _('Device'),   with_device ? (maindev ? maindev.getShortName() : E('em', _('Not present'))) : null,
  82                 _('Uptime'),   (!changecount && ifc.isUp()) ? '%t'.format(ifc.getUptime()) : null,
  83                 _('MAC'),      (!changecount && !ifc.isDynamic() && !ifc.isAlias() && macaddr) ? macaddr : null,
  84                 _('RX'),       (!changecount && !ifc.isDynamic() && !ifc.isAlias() && maindev) ? '%.2mB (%d %s)'.format(maindev.getRXBytes(), maindev.getRXPackets(), _('Pkts.')) : null,
  85                 _('TX'),       (!changecount && !ifc.isDynamic() && !ifc.isAlias() && maindev) ? '%.2mB (%d %s)'.format(maindev.getTXBytes(), maindev.getTXPackets(), _('Pkts.')) : null,
  86                 _('IPv4'),     ipaddrs[0],
  87                 _('IPv4'),     ipaddrs[1],
  88                 _('IPv4'),     ipaddrs[2],
  89                 _('IPv4'),     ipaddrs[3],
  90                 _('IPv4'),     ipaddrs[4],
  91                 _('IPv6'),     ip6addrs[0],
  92                 _('IPv6'),     ip6addrs[1],
  93                 _('IPv6'),     ip6addrs[2],
  94                 _('IPv6'),     ip6addrs[3],
  95                 _('IPv6'),     ip6addrs[4],
  96                 _('IPv6'),     ip6addrs[5],
  97                 _('IPv6'),     ip6addrs[6],
  98                 _('IPv6'),     ip6addrs[7],
  99                 _('IPv6'),     ip6addrs[8],
 100                 _('IPv6'),     ip6addrs[9],
 101                 _('IPv6-PD'),  changecount ? null : ifc.getIP6Prefix(),
 102                 _('Information'), with_device ? null : (ifc.get('auto') != '0' ? null : _('Not started on boot')),
 103                 _('Error'),    errors ? errors[0] : null,
 104                 _('Error'),    errors ? errors[1] : null,
 105                 _('Error'),    errors ? errors[2] : null,
 106                 _('Error'),    errors ? errors[3] : null,
 107                 _('Error'),    errors ? errors[4] : null,
 108                 null, changecount ? E('a', {
 109                         href: '#',
 110                         click: L.bind(ui.changes.displayChanges, ui.changes)
 111                 }, _('Interface has %d pending changes').format(changecount)) : null
 112         ]);
 113 }
 114
 115 function render_modal_status(node, ifc) {
 116         var dev = ifc ? (ifc.getDevice() || ifc.getL3Device() || ifc.getL3Device()) : null;
 117
 118         dom.content(node, [
 119                 E('img', {
 120                         'src': L.resource('icons/%s%s.png').format(dev ? dev.getType() : 'ethernet', (dev && dev.isUp()) ? '' : '_disabled'),
 121                         'title': dev ? dev.getTypeI18n() : _('Not present')
 122                 }),
 123                 ifc ? render_status(E('span'), ifc, true) : E('em', _('Interface not present or not connected yet.'))
 124         ]);
 125
 126         return node;
 127 }
 128
 129 function render_ifacebox_status(node, ifc) {
 130         var dev = ifc.getL3Device() || ifc.getDevice(),
 131             subdevs = ifc.getDevices(),
 132             c = [ render_iface(dev, ifc.isAlias()) ];
 133
 134         if (subdevs && subdevs.length) {
 135                 var sifs = [ ' (' ];
 136
 137                 for (var j = 0; j < subdevs.length; j++)
 138                         sifs.push(render_iface(subdevs[j]));
 139
 140                 sifs.push(')');
 141
 142                 c.push(E('span', {}, sifs));
 143         }
 144
 145         c.push(E('br'));
 146         c.push(E('small', {}, ifc.isAlias() ? _('Alias of "%s"').format(ifc.isAlias())
 147                                             : (dev ? dev.getName() : E('em', _('Not present')))));
 148
 149         dom.content(node, c);
 150
 151         return firewall.getZoneByNetwork(ifc.getName()).then(L.bind(function(zone) {
 152                 this.style.backgroundColor = zone ? zone.getColor() : '#EEEEEE';
 153                 this.title = zone ? _('Part of zone %q').format(zone.getName()) : _('No zone assigned');
 154         }, node.previousElementSibling));
 155 }
 156
 157 function iface_updown(up, id, ev, force) {
 158         var row = document.querySelector('.cbi-section-table-row[data-sid="%s"]'.format(id)),
 159             dsc = row.querySelector('[data-name="_ifacestat"] > div'),
 160             btns = row.querySelectorAll('.cbi-section-actions .reconnect, .cbi-section-actions .down');
 161
 162         btns[+!up].blur();
 163         btns[+!up].classList.add('spinning');
 164
 165         btns[0].disabled = true;
 166         btns[1].disabled = true;
 167
 168         if (!up) {
 169                 L.resolveDefault(fs.exec_direct('/usr/libexec/luci-peeraddr')).then(function(res) {
 170                         var info = null; try { info = JSON.parse(res); } catch(e) {}
 171
 172                         if (L.isObject(info) &&
 173                             Array.isArray(info.inbound_interfaces) &&
 174                             info.inbound_interfaces.filter(function(i) { return i == id })[0]) {
 175
 176                                 ui.showModal(_('Confirm disconnect'), [
 177                                         E('p', _('You appear to be currently connected to the device via the "%h" interface. Do you really want to shut down the interface?').format(id)),
 178                                         E('div', { 'class': 'right' }, [
 179                                                 E('button', {
 180                                                         'class': 'cbi-button cbi-button-neutral',
 181                                                         'click': function(ev) {
 182                                                                 btns[1].classList.remove('spinning');
 183                                                                 btns[1].disabled = false;
 184                                                                 btns[0].disabled = false;
 185
 186                                                                 ui.hideModal();
 187                                                         }
 188                                                 }, _('Cancel')),
 189                                                 ' ',
 190                                                 E('button', {
 191                                                         'class': 'cbi-button cbi-button-negative important',
 192                                                         'click': function(ev) {
 193                                                                 dsc.setAttribute('disconnect', '');
 194                                                                 dom.content(dsc, E('em', _('Interface is shutting down...')));
 195
 196                                                                 ui.hideModal();
 197                                                         }
 198                                                 }, _('Disconnect'))
 199                                         ])
 200                                 ]);
 201                         }
 202                         else {
 203                                 dsc.setAttribute('disconnect', '');
 204                                 dom.content(dsc, E('em', _('Interface is shutting down...')));
 205                         }
 206                 });
 207         }
 208         else {
 209                 dsc.setAttribute(up ? 'reconnect' : 'disconnect', force ? 'force' : '');
 210                 dom.content(dsc, E('em', up ? _('Interface is reconnecting...') : _('Interface is shutting down...')));
 211         }
 212 }
 213
 214 function get_netmask(s, use_cfgvalue) {
 215         var readfn = use_cfgvalue ? 'cfgvalue' : 'formvalue',
 216             addrs = L.toArray(s[readfn](s.section, 'ipaddr')),
 217             mask = s[readfn](s.section, 'netmask'),
 218             firstsubnet = mask ? addrs[0] + '/' + mask : addrs.filter(function(a) { return a.indexOf('/') > 0 })[0];
 219
 220         if (firstsubnet == null)
 221                 return null;
 222
 223         var subnetmask = firstsubnet.split('/')[1];
 224
 225         if (!isNaN(subnetmask))
 226                 subnetmask = network.prefixToMask(+subnetmask);
 227
 228         return subnetmask;
 229 }
 230
 231 return view.extend({
 232         poll_status: function(map, networks) {
 233                 var resolveZone = null;
 234
 235                 for (var i = 0; i < networks.length; i++) {
 236                         var ifc = networks[i],
 237                             row = map.querySelector('.cbi-section-table-row[data-sid="%s"]'.format(ifc.getName()));
 238
 239                         if (row == null)
 240                                 continue;
 241
 242                         var dsc = row.querySelector('[data-name="_ifacestat"] > div'),
 243                             box = row.querySelector('[data-name="_ifacebox"] .ifacebox-body'),
 244                             btn1 = row.querySelector('.cbi-section-actions .reconnect'),
 245                             btn2 = row.querySelector('.cbi-section-actions .down'),
 246                             stat = document.querySelector('[id="%s-ifc-status"]'.format(ifc.getName())),
 247                             resolveZone = render_ifacebox_status(box, ifc),
 248                             disabled = ifc ? !ifc.isUp() : true,
 249                             dynamic = ifc ? ifc.isDynamic() : false;
 250
 251                         if (dsc.hasAttribute('reconnect')) {
 252                                 dom.content(dsc, E('em', _('Interface is starting...')));
 253                         }
 254                         else if (dsc.hasAttribute('disconnect')) {
 255                                 dom.content(dsc, E('em', _('Interface is stopping...')));
 256                         }
 257                         else if (ifc.getProtocol() || uci.get('network', ifc.getName()) == null) {
 258                                 render_status(dsc, ifc, false);
 259                         }
 260                         else if (!ifc.getProtocol()) {
 261                                 var e = map.querySelector('[id="cbi-network-%s"] .cbi-button-edit'.format(ifc.getName()));
 262                                 if (e) e.disabled = true;
 263
 264                                 var link = L.url('admin/system/opkg') + '?query=luci-proto';
 265                                 dom.content(dsc, [
 266                                         E('em', _('Unsupported protocol type.')), E('br'),
 267                                         E('a', { href: link }, _('Install protocol extensions...'))
 268                                 ]);
 269                         }
 270                         else {
 271                                 dom.content(dsc, E('em', _('Interface not present or not connected yet.')));
 272                         }
 273
 274                         if (stat) {
 275                                 var dev = ifc.getDevice();
 276                                 dom.content(stat, [
 277                                         E('img', {
 278                                                 'src': L.resource('icons/%s%s.png').format(dev ? dev.getType() : 'ethernet', (dev && dev.isUp()) ? '' : '_disabled'),
 279                                                 'title': dev ? dev.getTypeI18n() : _('Not present')
 280                                         }),
 281                                         render_status(E('span'), ifc, true)
 282                                 ]);
 283                         }
 284
 285                         btn1.disabled = isReadonlyView || btn1.classList.contains('spinning') || btn2.classList.contains('spinning') || dynamic;
 286                         btn2.disabled = isReadonlyView || btn1.classList.contains('spinning') || btn2.classList.contains('spinning') || dynamic || disabled;
 287                 }
 288
 289                 return Promise.all([ resolveZone, network.flushCache() ]);
 290         },
 291
 292         load: function() {
 293                 return Promise.all([
 294                         network.getDSLModemType(),
 295                         network.getDevices(),
 296                         fs.lines('/etc/iproute2/rt_tables'),
 297                         uci.changes()
 298                 ]);
 299         },
 300
 301         render: function(data) {
 302                 var dslModemType = data[0],
 303                     netDevs = data[1],
 304                     m, s, o;
 305
 306                 var rtTables = data[2].map(function(l) {
 307                         var m = l.trim().match(/^(\d+)\s+(\S+)$/);
 308                         return m ? [ +m[1], m[2] ] : null;
 309                 }).filter(function(e) {
 310                         return e && e[0] > 0;
 311                 });
 312
 313                 m = new form.Map('network');
 314                 m.tabbed = true;
 315                 m.chain('dhcp');
 316
 317                 s = m.section(form.GridSection, 'interface', _('Interfaces'));
 318                 s.anonymous = true;
 319                 s.addremove = true;
 320                 s.addbtntitle = _('Add new interface...');
 321
 322                 s.load = function() {
 323                         return Promise.all([
 324                                 network.getNetworks(),
 325                                 firewall.getZones()
 326                         ]).then(L.bind(function(data) {
 327                                 this.networks = data[0];
 328                                 this.zones = data[1];
 329                         }, this));
 330                 };
 331
 332                 s.tab('general', _('General Settings'));
 333                 s.tab('advanced', _('Advanced Settings'));
 334                 s.tab('physical', _('Physical Settings'));
 335                 s.tab('brport', _('Bridge port specific options'));
 336                 s.tab('bridgevlan', _('Bridge VLAN filtering'));
 337                 s.tab('firewall', _('Firewall Settings'));
 338                 s.tab('dhcp', _('DHCP Server'));
 339
 340                 s.cfgsections = function() {
 341                         return this.networks.map(function(n) { return n.getName() })
 342                                 .filter(function(n) { return n != 'loopback' });
 343                 };
 344
 345                 s.modaltitle = function(section_id) {
 346                         return _('Interfaces') + ' » ' + section_id.toUpperCase();
 347                 };
 348
 349                 s.renderRowActions = function(section_id) {
 350                         var tdEl = this.super('renderRowActions', [ section_id, _('Edit') ]),
 351                             net = this.networks.filter(function(n) { return n.getName() == section_id })[0],
 352                             disabled = net ? !net.isUp() : true,
 353                             dynamic = net ? net.isDynamic() : false;
 354
 355                         dom.content(tdEl.lastChild, [
 356                                 E('button', {
 357                                         'class': 'cbi-button cbi-button-neutral reconnect',
 358                                         'click': iface_updown.bind(this, true, section_id),
 359                                         'title': _('Reconnect this interface'),
 360                                         'disabled': dynamic ? 'disabled' : null
 361                                 }, _('Restart')),
 362                                 E('button', {
 363                                         'class': 'cbi-button cbi-button-neutral down',
 364                                         'click': iface_updown.bind(this, false, section_id),
 365                                         'title': _('Shutdown this interface'),
 366                                         'disabled': (dynamic || disabled) ? 'disabled' : null
 367                                 }, _('Stop')),
 368                                 tdEl.lastChild.firstChild,
 369                                 tdEl.lastChild.lastChild
 370                         ]);
 371
 372                         if (!dynamic && net && !uci.get('network', net.getName())) {
 373                                 tdEl.lastChild.childNodes[0].disabled = true;
 374                                 tdEl.lastChild.childNodes[2].disabled = true;
 375                                 tdEl.lastChild.childNodes[3].disabled = true;
 376                         }
 377
 378                         return tdEl;
 379                 };
 380
 381                 s.addModalOptions = function(s) {
 382                         var protoval = uci.get('network', s.section, 'proto'),
 383                             protoclass = protoval ? network.getProtocol(protoval) : null,
 384                             o, ifname_single, ifname_multi, proto_select, proto_switch, type, stp, igmp, ss, so;
 385
 386                         if (!protoval)
 387                                 return;
 388
 389                         return network.getNetwork(s.section).then(L.bind(function(ifc) {
 390                                 var protocols = network.getProtocols();
 391
 392                                 protocols.sort(function(a, b) {
 393                                         return a.getProtocol() > b.getProtocol();
 394                                 });
 395
 396                                 o = s.taboption('general', form.DummyValue, '_ifacestat_modal', _('Status'));
 397                                 o.modalonly = true;
 398                                 o.cfgvalue = L.bind(function(section_id) {
 399                                         var net = this.networks.filter(function(n) { return n.getName() == section_id })[0];
 400
 401                                         return render_modal_status(E('div', {
 402                                                 'id': '%s-ifc-status'.format(section_id),
 403                                                 'class': 'ifacebadge large'
 404                                         }), net);
 405                                 }, this);
 406                                 o.write = function() {};
 407
 408                                 proto_select = s.taboption('general', form.ListValue, 'proto', _('Protocol'));
 409                                 proto_select.modalonly = true;
 410
 411                                 proto_switch = s.taboption('general', form.Button, '_switch_proto');
 412                                 proto_switch.modalonly  = true;
 413                                 proto_switch.title      = _('Really switch protocol?');
 414                                 proto_switch.inputtitle = _('Switch protocol');
 415                                 proto_switch.inputstyle = 'apply';
 416                                 proto_switch.onclick = L.bind(function(ev) {
 417                                         s.map.save()
 418                                                 .then(L.bind(m.load, m))
 419                                                 .then(L.bind(m.render, m))
 420                                                 .then(L.bind(this.renderMoreOptionsModal, this, s.section));
 421                                 }, this);
 422
 423                                 o = s.taboption('general', form.Flag, 'auto', _('Bring up on boot'));
 424                                 o.modalonly = true;
 425                                 o.default = o.enabled;
 426
 427                                 if (L.hasSystemFeature('firewall')) {
 428                                         o = s.taboption('firewall', widgets.ZoneSelect, '_zone', _('Create / Assign firewall-zone'), _('Choose the firewall zone you want to assign to this interface. Select <em>unspecified</em> to remove the interface from the associated zone or fill out the <em>custom</em> field to define a new zone and attach the interface to it.'));
 429                                         o.network = ifc.getName();
 430                                         o.optional = true;
 431
 432                                         o.cfgvalue = function(section_id) {
 433                                                 return firewall.getZoneByNetwork(ifc.getName()).then(function(zone) {
 434                                                         return (zone != null ? zone.getName() : null);
 435                                                 });
 436                                         };
 437
 438                                         o.write = o.remove = function(section_id, value) {
 439                                                 return Promise.all([
 440                                                         firewall.getZoneByNetwork(ifc.getName()),
 441                                                         (value != null) ? firewall.getZone(value) : null
 442                                                 ]).then(function(data) {
 443                                                         var old_zone = data[0],
 444                                                             new_zone = data[1];
 445
 446                                                         if (old_zone == null && new_zone == null && (value == null || value == ''))
 447                                                                 return;
 448
 449                                                         if (old_zone != null && new_zone != null && old_zone.getName() == new_zone.getName())
 450                                                                 return;
 451
 452                                                         if (old_zone != null)
 453                                                                 old_zone.deleteNetwork(ifc.getName());
 454
 455                                                         if (new_zone != null)
 456                                                                 new_zone.addNetwork(ifc.getName());
 457                                                         else if (value != null)
 458                                                                 return firewall.addZone(value).then(function(new_zone) {
 459                                                                         new_zone.addNetwork(ifc.getName());
 460                                                                 });
 461                                                 });
 462                                         };
 463                                 }
 464
 465                                 for (var i = 0; i < protocols.length; i++) {
 466                                         proto_select.value(protocols[i].getProtocol(), protocols[i].getI18n());
 467
 468                                         if (protocols[i].getProtocol() != uci.get('network', s.section, 'proto'))
 469                                                 proto_switch.depends('proto', protocols[i].getProtocol());
 470                                 }
 471
 472                                 if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd')) {
 473                                         o = s.taboption('dhcp', form.SectionValue, '_dhcp', form.TypedSection, 'dhcp');
 474                                         o.depends('proto', 'static');
 475
 476                                         ss = o.subsection;
 477                                         ss.uciconfig = 'dhcp';
 478                                         ss.addremove = false;
 479                                         ss.anonymous = true;
 480
 481                                         ss.tab('general',  _('General Setup'));
 482                                         ss.tab('advanced', _('Advanced Settings'));
 483                                         ss.tab('ipv6', _('IPv6 Settings'));
 484
 485                                         ss.filter = function(section_id) {
 486                                                 return (uci.get('dhcp', section_id, 'interface') == ifc.getName());
 487                                         };
 488
 489                                         ss.renderSectionPlaceholder = function() {
 490                                                 return E('div', { 'class': 'cbi-section-create' }, [
 491                                                         E('p', _('No DHCP Server configured for this interface') + ' &#160; '),
 492                                                         E('button', {
 493                                                                 'class': 'cbi-button cbi-button-add',
 494                                                                 'title': _('Setup DHCP Server'),
 495                                                                 'click': ui.createHandlerFn(this, function(section_id, ev) {
 496                                                                         this.map.save(function() {
 497                                                                                 uci.add('dhcp', 'dhcp', section_id);
 498                                                                                 uci.set('dhcp', section_id, 'interface', section_id);
 499                                                                                 uci.set('dhcp', section_id, 'start', 100);
 500                                                                                 uci.set('dhcp', section_id, 'limit', 150);
 501                                                                                 uci.set('dhcp', section_id, 'leasetime', '12h');
 502                                                                         });
 503                                                                 }, ifc.getName())
 504                                                         }, _('Setup DHCP Server'))
 505                                                 ]);
 506                                         };
 507
 508                                         ss.taboption('general', form.Flag, 'ignore', _('Ignore interface'), _('Disable <abbr title="Dynamic Host Configuration Protocol">DHCP</abbr> for this interface.'));
 509
 510                                         so = ss.taboption('general', form.Value, 'start', _('Start'), _('Lowest leased address as offset from the network address.'));
 511                                         so.optional = true;
 512                                         so.datatype = 'or(uinteger,ip4addr("nomask"))';
 513                                         so.default = '100';
 514
 515                                         so = ss.taboption('general', form.Value, 'limit', _('Limit'), _('Maximum number of leased addresses.'));
 516                                         so.optional = true;
 517                                         so.datatype = 'uinteger';
 518                                         so.default = '150';
 519
 520                                         so = ss.taboption('general', form.Value, 'leasetime', _('Lease time'), _('Expiry time of leased addresses, minimum is 2 minutes (<code>2m</code>).'));
 521                                         so.optional = true;
 522                                         so.default = '12h';
 523
 524                                         so = ss.taboption('advanced', form.Flag, 'dynamicdhcp', _('Dynamic <abbr title="Dynamic Host Configuration Protocol">DHCP</abbr>'), _('Dynamically allocate DHCP addresses for clients. If disabled, only clients having static leases will be served.'));
 525                                         so.default = so.enabled;
 526
 527                                         ss.taboption('advanced', form.Flag, 'force', _('Force'), _('Force DHCP on this network even if another server is detected.'));
 528
 529                                         // XXX: is this actually useful?
 530                                         //ss.taboption('advanced', form.Value, 'name', _('Name'), _('Define a name for this network.'));
 531
 532                                         so = ss.taboption('advanced', form.Value, 'netmask', _('<abbr title="Internet Protocol Version 4">IPv4</abbr>-Netmask'), _('Override the netmask sent to clients. Normally it is calculated from the subnet that is served.'));
 533                                         so.optional = true;
 534                                         so.datatype = 'ip4addr';
 535
 536                                         so.render = function(option_index, section_id, in_table) {
 537                                                 this.placeholder = get_netmask(s, true);
 538                                                 return form.Value.prototype.render.apply(this, [ option_index, section_id, in_table ]);
 539                                         };
 540
 541                                         so.validate = function(section_id, value) {
 542                                                 var uielem = this.getUIElement(section_id);
 543                                                 if (uielem)
 544                                                         uielem.setPlaceholder(get_netmask(s, false));
 545                                                 return form.Value.prototype.validate.apply(this, [ section_id, value ]);
 546                                         };
 547
 548                                         ss.taboption('advanced', form.DynamicList, 'dhcp_option', _('DHCP-Options'), _('Define additional DHCP options, \
 549                                                 for example "<code>6,192.168.2.1,192.168.2.2</code>" which advertises different DNS servers to clients.'));
 550
 551                                         for (var i = 0; i < ss.children.length; i++)
 552                                                 if (ss.children[i].option != 'ignore')
 553                                                         ss.children[i].depends('ignore', '0');
 554
 555                                         so = ss.taboption('ipv6', form.ListValue, 'ra', _('<abbr title="Router Advertisement">RA</abbr>-Service'), _('<ul style="list-style-type:none;">\
 556                                                 <li><strong>server mode</strong>: Router advertises itself as the default IPv6 gateway \
 557                                                 via <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr> messages \
 558                                                 (to <code>ff02::1</code>) and provides <abbr title="Prefix Delegation">PD</abbr> to downstream devices.</li>\
 559                                                 <li><strong>relay mode</strong>:  Router relays <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr> from upstream, \
 560                                                 and extends upstream (e.g. WAN) interface config and prefix to downstream (e.g. LAN) interfaces.</li>\
 561                                                 <li><strong>hybrid mode</strong>: Router does both server+relay; extends upstream config and prefix downstream, and \
 562                                                 uses <abbr title="Prefix Delegation">PD</abbr> locally.</li></ul>'));
 563                                         so.value('', _('disabled'));
 564                                         so.value('server', _('server mode'));
 565                                         so.value('relay', _('relay mode'));
 566                                         so.value('hybrid', _('hybrid mode'));
 567
 568                                         so = ss.taboption('ipv6', form.Value, 'ra_maxinterval', _('Max <abbr title="Router Advertisement">RA</abbr> interval'), _('Maximum time allowed \
 569                                                 between sending unsolicited <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr>. Default is 600 seconds (<code>600</code>).'));
 570                                         so.optional = true;
 571                                         so.placeholder = '600';
 572                                         so.depends('ra', 'server');
 573                                         so.depends('ra', 'hybrid');
 574                                         so.depends('ra', 'relay');
 575
 576
 577                                         so = ss.taboption('ipv6', form.Value, 'ra_mininterval', _('Min <abbr title="Router Advertisement">RA</abbr> interval'), _('Minimum time allowed \
 578                                                 between sending unsolicited <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr>. Default is 200 seconds (<code>200</code>).'));
 579                                         so.optional = true;
 580                                         so.placeholder = '200';
 581                                         so.depends('ra', 'server');
 582                                         so.depends('ra', 'hybrid');
 583                                         so.depends('ra', 'relay');
 584
 585                                         so = ss.taboption('ipv6', form.Value, 'ra_lifetime', _('<abbr title="Router Advertisement">RA</abbr> Lifetime'), _('Router Lifetime published \
 586                                                 in <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr> messages. Default is 1800 seconds (<code>1800</code>). \
 587                                                 Max 9000 seconds.'));
 588                                         so.optional = true;
 589                                         so.depends('ra', 'server');
 590                                         so.depends('ra', 'hybrid');
 591                                         so.depends('ra', 'relay');
 592
 593                                         so = ss.taboption('ipv6', form.Value, 'ra_mtu', _('<abbr title="Router Advertisement">RA</abbr> MTU'), _('The <abbr title="Maximum Transmission Unit">MTU</abbr> \
 594                                                 to be published in <abbr title="Router Advertisement, ICMPv6 Type 134">RA</abbr> messages. Default is 0 (<code>0</code>).\
 595                                                 Min 1280.'));
 596                                         so.optional = true;
 597                                         so.depends('ra', 'server');
 598                                         so.depends('ra', 'hybrid');
 599                                         so.depends('ra', 'relay');
 600
 601                                         so = ss.taboption('ipv6', form.Value, 'ra_hoplimit', _('<abbr title="Router Advertisement">RA</abbr> Hop Limit'), _('The maximum hops \
 602                                                 to be published in <abbr title="Router Advertisement">RA</abbr> messages.<br />Default is 0 (<code>0</code>), meaning unspecified.\
 603                                                 Max 255.'));
 604                                         so.optional = true;
 605                                         so.depends('ra', 'server');
 606                                         so.depends('ra', 'hybrid');
 607                                         so.depends('ra', 'relay');
 608
 609                                         so = ss.taboption('ipv6', form.ListValue, 'ra_management', _('DHCPv6-Mode'), _('Default is stateless + stateful<br />\
 610                                                 <ul style="list-style-type:none;">\
 611                                                 <li><strong>stateless</strong>: Router advertises prefixes, host uses <abbr title="Stateless Address Auto Config">SLAAC</abbr> \
 612                                                 to self assign its own address. No DHCPv6.</li>\
 613                                                 <li><strong>stateless + stateful</strong>: SLAAC. In addition, router assigns an IPv6 address to a host via DHCPv6.</li>\
 614                                                 <li><strong>stateful-only</strong>:  No SLAAC. Router assigns an IPv6 address to a host via DHCPv6.</li></ul>'));
 615                                         so.value('0', _('stateless'));
 616                                         so.value('1', _('stateless + stateful'));
 617                                         so.value('2', _('stateful-only'));
 618                                         so.depends('dhcpv6', 'server');
 619                                         so.depends('dhcpv6', 'hybrid');
 620                                         so.default = '1';
 621
 622                                         so = ss.taboption('ipv6', form.ListValue, 'dhcpv6', _('DHCPv6-Service'), _('<ul style="list-style-type:none;">\
 623                                                 <li><strong>server mode</strong>: Router assigns IPs and delegates prefixes \
 624                                                 (<abbr title="Prefix Delegation">PD</abbr>) to downstream interfaces.</li>\
 625                                                 <li><strong>relay mode</strong>:   Router relays WAN interface config downstream. Helps support upstream \
 626                                                 links that lack <abbr title="Prefix Delegation">PD</abbr>.</li>\
 627                                                 <li><strong>hybrid mode</strong>:  Router does combination of server+relay.</li></ul>'));
 628                                         so.value('', _('disabled'));
 629                                         so.value('server', _('server mode'));
 630                                         so.value('relay', _('relay mode'));
 631                                         so.value('hybrid', _('hybrid mode'));
 632
 633                                         so = ss.taboption('ipv6', form.ListValue, 'ndp', _('<abbr title="Neighbour Discovery Protocol">NDP</abbr>-Proxy'), _('Reverts to \
 634                                                 disabled internally if there are no interfaces with boolean <code>ndproxy_slave</code> set to 1. Think of \
 635                                                 <abbr title="Neighbour Discovery Protocol">NDP</abbr> Proxy as Proxy ARP for IPv6: unify hosts on different physical \
 636                                                 hardware segments into the same IP subnet. Consists of <abbr title="Neighbour Solicitation, Type 135">NS</abbr> and \
 637                                                 <abbr title="Neighbour Advertisement, Type 136">NA</abbr> messages. <abbr title="Neighbour Discovery Protocol">NDP</abbr>-Proxy \
 638                                                 listens for <abbr title="Neighbour Solicitation, Type 135">NS</abbr> on an interface marked with boolean \
 639                                                 <code>master</code> as 1 (i.e. upstream), then queries the slave/internal interfaces for that target IP before finally \
 640                                                 sending an <abbr title="Neighbour Advertisement, Type 136">NA</abbr> message. \
 641                                                 <abbr title="Neighbour Discovery Protocol">NDP</abbr> is effectively ARP for IPv6. \
 642                                                 <abbr title="Neighbour Solicitation, Type 135">NS</abbr> and <abbr title="Neighbour Advertisement, Type 136">NA</abbr> \
 643                                                 detect reachability and duplicate addresses on a link, themselves also a prerequisite for SLAAC autoconfig.<br />\
 644                                                 <ul style="list-style-type:none;">\
 645                                                 <li><strong>disabled</strong>: No <abbr title="Neighbour Discovery Protocol">NDP</abbr> messages are proxied through to \
 646                                                 <code>ndproxy_slave</code> true interfaces.</li>        \
 647                                                 <li><strong>relay mode</strong>: Proxies <abbr title="Neighbour Discovery Protocol">NDP</abbr> messages from <code>master</code> to \
 648                                                 <code>ndproxy_slave</code> true interfaces. Helps to support provider links without \
 649                                                 <abbr title="Prefix Delegation">PD</abbr>, and to firewall proxied hosts.</li>\
 650                                                 <li><strong>hybrid mode</strong>: Relay mode is disabled unless the interface boolean <code>master</code> is 1.</li></ul>'));
 651                                         so.value('', _('disabled'));
 652                                         so.value('relay', _('relay mode'));
 653                                         so.value('hybrid', _('hybrid mode'));
 654
 655                                         so = ss.taboption('ipv6', form.Flag, 'ndproxy_routing', _('Learn routes from NDP'), _('Default is on.'));
 656                                         so.default = '1';
 657                                         so.optional = true;
 658
 659                                         so = ss.taboption('ipv6', form.Flag, 'ndproxy_slave', _('NDP-Proxy slave'), _('Set interface as NDP-Proxy external slave. Default is off.'));
 660
 661                                         so = ss.taboption('ipv6', form.DynamicList, 'ndproxy_static', _('Static NDP-Proxy prefixes'));
 662
 663                                         so = ss.taboption('ipv6', form.Flag , 'master', _('Master'), _('Set this interface as master for the dhcpv6 relay.'));
 664                                         so.depends('dhcpv6', 'relay');
 665                                         so.depends('dhcpv6', 'hybrid');
 666
 667                                         so = ss.taboption('ipv6', form.Flag , 'master', _('Master'), _('Set this interface as master for the dhcpv6 relay.'));
 668                                         so.depends('dhcpv6', 'relay');
 669                                         so.depends('dhcpv6', 'hybrid');
 670
 671                                         so = ss.taboption('ipv6', form.Flag, 'ra_default', _('Announce as default router'), _('Always, even if no public prefix is available.'));
 672                                         so.depends('ra', 'server');
 673                                         so.depends('ra', 'hybrid');
 674
 675                                         ss.taboption('ipv6', form.DynamicList, 'dns', _('Announced DNS servers'));
 676                                         ss.taboption('ipv6', form.DynamicList, 'domain', _('Announced DNS domains'));
 677                                 }
 678
 679                                 ifc.renderFormOptions(s);
 680                                 nettools.addDeviceOptions(s, null, true);
 681
 682                                 // Common interface options
 683                                 o = nettools.replaceOption(s, 'advanced', form.Flag, 'defaultroute', _('Use default gateway'), _('If unchecked, no default route is configured'));
 684                                 o.default = o.enabled;
 685
 686                                 if (protoval != 'static') {
 687                                         o = nettools.replaceOption(s, 'advanced', form.Flag, 'peerdns', _('Use DNS servers advertised by peer'), _('If unchecked, the advertised DNS server addresses are ignored'));
 688                                         o.default = o.enabled;
 689                                 }
 690
 691                                 o = nettools.replaceOption(s, 'advanced', form.DynamicList, 'dns', _('Use custom DNS servers'));
 692                                 if (protoval != 'static')
 693                                         o.depends('peerdns', '0');
 694                                 o.datatype = 'ipaddr';
 695
 696                                 o = nettools.replaceOption(s, 'advanced', form.DynamicList, 'dns_search', _('DNS search domains'));
 697                                 if (protoval != 'static')
 698                                         o.depends('peerdns', '0');
 699                                 o.datatype = 'hostname';
 700
 701                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'dns_metric', _('DNS weight'), _('The DNS server entries in the local resolv.conf are primarily sorted by the weight specified here'));
 702                                 o.datatype = 'uinteger';
 703                                 o.placeholder = '0';
 704
 705                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'metric', _('Use gateway metric'));
 706                                 o.datatype = 'uinteger';
 707                                 o.placeholder = '0';
 708
 709                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip4table', _('Override IPv4 routing table'));
 710                                 o.datatype = 'or(uinteger, string)';
 711                                 for (var i = 0; i < rtTables.length; i++)
 712                                         o.value(rtTables[i][1], '%s (%d)'.format(rtTables[i][1], rtTables[i][0]));
 713
 714                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip6table', _('Override IPv6 routing table'));
 715                                 o.datatype = 'or(uinteger, string)';
 716                                 for (var i = 0; i < rtTables.length; i++)
 717                                         o.value(rtTables[i][1], '%s (%d)'.format(rtTables[i][0], rtTables[i][1]));
 718
 719                                 o = nettools.replaceOption(s, 'advanced', form.Flag, 'delegate', _('Delegate IPv6 prefixes'), _('Enable downstream delegation of IPv6 prefixes available on this interface'));
 720                                 o.default = o.enabled;
 721
 722                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip6assign', _('IPv6 assignment length'), _('Assign a part of given length of every public IPv6-prefix to this interface'));
 723                                 o.value('', _('disabled'));
 724                                 o.value('64');
 725                                 o.datatype = 'max(128)';
 726
 727                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip6hint', _('IPv6 assignment hint'), _('Assign prefix parts using this hexadecimal subprefix ID for this interface.'));
 728                                 o.placeholder = '0';
 729                                 o.validate = function(section_id, value) {
 730                                         if (value == null || value == '')
 731                                                 return true;
 732
 733                                         var n = parseInt(value, 16);
 734
 735                                         if (!/^(0x)?[0-9a-fA-F]+$/.test(value) || isNaN(n) || n >= 0xffffffff)
 736                                                 return _('Expecting a hexadecimal assignment hint');
 737
 738                                         return true;
 739                                 };
 740                                 for (var i = 33; i <= 64; i++)
 741                                         o.depends('ip6assign', String(i));
 742
 743
 744                                 o = nettools.replaceOption(s, 'advanced', form.DynamicList, 'ip6class', _('IPv6 prefix filter'), _('If set, downstream subnets are only allocated from the given IPv6 prefix classes.'));
 745                                 o.value('local', 'local (%s)'.format(_('Local ULA')));
 746
 747                                 var prefixClasses = {};
 748
 749                                 this.networks.forEach(function(net) {
 750                                         var prefixes = net._ubus('ipv6-prefix');
 751                                         if (Array.isArray(prefixes)) {
 752                                                 prefixes.forEach(function(pfx) {
 753                                                         if (L.isObject(pfx) && typeof(pfx['class']) == 'string') {
 754                                                                 prefixClasses[pfx['class']] = prefixClasses[pfx['class']] || {};
 755                                                                 prefixClasses[pfx['class']][net.getName()] = true;
 756                                                         }
 757                                                 });
 758                                         }
 759                                 });
 760
 761                                 Object.keys(prefixClasses).sort().forEach(function(c) {
 762                                         var networks = Object.keys(prefixClasses[c]).sort().join(', ');
 763                                         o.value(c, (c != networks) ? '%s (%s)'.format(c, networks) : c);
 764                                 });
 765
 766
 767                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip6ifaceid', _('IPv6 suffix'), _("Optional. Allowed values: 'eui64', 'random', fixed value like '::1' or '::1:2'. When IPv6 prefix (like 'a:b:c:d::') is received from a delegating server, use the suffix (like '::1') to form the IPv6 address ('a:b:c:d::1') for the interface."));
 768                                 o.datatype = 'ip6hostid';
 769                                 o.placeholder = '::1';
 770
 771                                 o = nettools.replaceOption(s, 'advanced', form.Value, 'ip6weight', _('IPv6 preference'), _('When delegating prefixes to multiple downstreams, interfaces with a higher preference value are considered first when allocating subnets.'));
 772                                 o.datatype = 'uinteger';
 773                                 o.placeholder = '0';
 774
 775                                 for (var i = 0; i < s.children.length; i++) {
 776                                         o = s.children[i];
 777
 778                                         switch (o.option) {
 779                                         case 'proto':
 780                                         case 'auto':
 781                                         case '_dhcp':
 782                                         case '_zone':
 783                                         case '_switch_proto':
 784                                         case '_ifacestat_modal':
 785                                                 continue;
 786
 787                                         case 'ifname_multi':
 788                                         case 'ifname_single':
 789                                         case 'igmp_snooping':
 790                                         case 'stp':
 791                                         case 'type':
 792                                                 var deps = [];
 793                                                 for (var j = 0; j < protocols.length; j++) {
 794                                                         if (!protocols[j].isVirtual()) {
 795                                                                 if (o.deps.length)
 796                                                                         for (var k = 0; k < o.deps.length; k++)
 797                                                                                 deps.push(Object.assign({ proto: protocols[j].getProtocol() }, o.deps[k]));
 798                                                                 else
 799                                                                         deps.push({ proto: protocols[j].getProtocol() });
 800                                                         }
 801                                                 }
 802                                                 o.deps = deps;
 803                                                 break;
 804
 805                                         default:
 806                                                 if (o.deps.length)
 807                                                         for (var j = 0; j < o.deps.length; j++)
 808                                                                 o.deps[j].proto = protoval;
 809                                                 else
 810                                                         o.depends('proto', protoval);
 811                                         }
 812                                 }
 813
 814                                 this.activeSection = s.section;
 815                         }, this));
 816                 };
 817
 818                 s.handleModalCancel = function(/* ... */) {
 819                         var type = uci.get('network', this.activeSection || this.addedSection, 'type'),
 820                             ifname = (type == 'bridge') ? 'br-%s'.format(this.activeSection || this.addedSection) : null;
 821
 822                         uci.sections('network', 'bridge-vlan', function(bvs) {
 823                                 if (ifname != null && bvs.device == ifname)
 824                                         uci.remove('network', bvs['.name']);
 825                         });
 826
 827                         return form.GridSection.prototype.handleModalCancel.apply(this, arguments);
 828                 };
 829
 830                 s.handleAdd = function(ev) {
 831                         var m2 = new form.Map('network'),
 832                             s2 = m2.section(form.NamedSection, '_new_'),
 833                             protocols = network.getProtocols(),
 834                             proto, name, ifname;
 835
 836                         protocols.sort(function(a, b) {
 837                                 return a.getProtocol() > b.getProtocol();
 838                         });
 839
 840                         s2.render = function() {
 841                                 return Promise.all([
 842                                         {},
 843                                         this.renderUCISection('_new_')
 844                                 ]).then(this.renderContents.bind(this));
 845                         };
 846
 847                         name = s2.option(form.Value, 'name', _('Name'));
 848                         name.rmempty = false;
 849                         name.datatype = 'uciname';
 850                         name.placeholder = _('New interface name…');
 851                         name.validate = function(section_id, value) {
 852                                 if (uci.get('network', value) != null)
 853                                         return _('The interface name is already used');
 854
 855                                 var pr = network.getProtocol(proto.formvalue(section_id), value),
 856                                     ifname = pr.isVirtual() ? '%s-%s'.format(pr.getProtocol(), value) : 'br-%s'.format(value);
 857
 858                                 if (value.length > 15)
 859                                         return _('The interface name is too long');
 860
 861                                 return true;
 862                         };
 863
 864                         ifname = s2.option(widgets.DeviceSelect, 'ifname', _('Device'));
 865                         ifname.noaliases = false;
 866                         ifname.optional = false;
 867
 868                         proto = s2.option(form.ListValue, 'proto', _('Protocol'));
 869                         proto.validate = name.validate;
 870
 871                         for (var i = 0; i < protocols.length; i++) {
 872                                 proto.value(protocols[i].getProtocol(), protocols[i].getI18n());
 873                         }
 874
 875                         m2.render().then(L.bind(function(nodes) {
 876                                 ui.showModal(_('Add new interface...'), [
 877                                         nodes,
 878                                         E('div', { 'class': 'right' }, [
 879                                                 E('button', {
 880                                                         'class': 'btn',
 881                                                         'click': ui.hideModal
 882                                                 }, _('Cancel')), ' ',
 883                                                 E('button', {
 884                                                         'class': 'cbi-button cbi-button-positive important',
 885                                                         'click': ui.createHandlerFn(this, function(ev) {
 886                                                                 var nameval = name.isValid('_new_') ? name.formvalue('_new_') : null,
 887                                                                     protoval = proto.isValid('_new_') ? proto.formvalue('_new_') : null,
 888                                                                     protoclass = protoval ? network.getProtocol(protoval, nameval) : null;
 889
 890                                                                 if (nameval == null || protoval == null || nameval == '' || protoval == '')
 891                                                                         return;
 892
 893                                                                 return protoclass.isCreateable(nameval).then(function(checkval) {
 894                                                                         if (checkval != null) {
 895                                                                                 ui.addNotification(null,
 896                                                                                                 E('p', _('New interface for "%s" can not be created: %s').format(protoclass.getI18n(), checkval)));
 897                                                                                 ui.hideModal();
 898                                                                                 return;
 899                                                                         }
 900
 901                                                                         return m.save(function() {
 902                                                                                 var section_id = uci.add('network', 'interface', nameval);
 903
 904                                                                                 protoclass.set('proto', protoval);
 905                                                                                 protoclass.addDevice(ifname.formvalue('_new_'));
 906
 907                                                                                 m.children[0].addedSection = section_id;
 908                                                                         }).then(L.bind(m.children[0].renderMoreOptionsModal, m.children[0], nameval));
 909                                                                 });
 910                                                         })
 911                                                 }, _('Create interface'))
 912                                         ])
 913                                 ], 'cbi-modal');
 914
 915                                 nodes.querySelector('[id="%s"] input[type="text"]'.format(name.cbid('_new_'))).focus();
 916                         }, this));
 917                 };
 918
 919                 s.handleRemove = function(section_id, ev) {
 920                         return network.deleteNetwork(section_id).then(L.bind(function(section_id, ev) {
 921                                 return form.GridSection.prototype.handleRemove.apply(this, [section_id, ev]);
 922                         }, this, section_id, ev));
 923                 };
 924
 925                 o = s.option(form.DummyValue, '_ifacebox');
 926                 o.modalonly = false;
 927                 o.textvalue = function(section_id) {
 928                         var net = this.section.networks.filter(function(n) { return n.getName() == section_id })[0],
 929                             zone = net ? this.section.zones.filter(function(z) { return !!z.getNetworks().filter(function(n) { return n == section_id })[0] })[0] : null;
 930
 931                         if (!net)
 932                                 return;
 933
 934                         var node = E('div', { 'class': 'ifacebox' }, [
 935                                 E('div', {
 936                                         'class': 'ifacebox-head',
 937                                         'style': 'background-color:%s'.format(zone ? zone.getColor() : '#EEEEEE'),
 938                                         'title': zone ? _('Part of zone %q').format(zone.getName()) : _('No zone assigned')
 939                                 }, E('strong', net.getName().toUpperCase())),
 940                                 E('div', {
 941                                         'class': 'ifacebox-body',
 942                                         'id': '%s-ifc-devices'.format(section_id),
 943                                         'data-network': section_id
 944                                 }, [
 945                                         E('img', {
 946                                                 'src': L.resource('icons/ethernet_disabled.png'),
 947                                                 'style': 'width:16px; height:16px'
 948                                         }),
 949                                         E('br'), E('small', '?')
 950                                 ])
 951                         ]);
 952
 953                         render_ifacebox_status(node.childNodes[1], net);
 954
 955                         return node;
 956                 };
 957
 958                 o = s.option(form.DummyValue, '_ifacestat');
 959                 o.modalonly = false;
 960                 o.textvalue = function(section_id) {
 961                         var net = this.section.networks.filter(function(n) { return n.getName() == section_id })[0];
 962
 963                         if (!net)
 964                                 return;
 965
 966                         var node = E('div', { 'id': '%s-ifc-description'.format(section_id) });
 967
 968                         render_status(node, net, false);
 969
 970                         return node;
 971                 };
 972
 973                 o = s.taboption('advanced', form.Flag, 'delegate', _('Use builtin IPv6-management'));
 974                 o.modalonly = true;
 975                 o.default = o.enabled;
 976
 977                 o = s.taboption('advanced', form.Flag, 'force_link', _('Force link'), _('Set interface properties regardless of the link carrier (If set, carrier sense events do not invoke hotplug handlers).'));
 978                 o.modalonly = true;
 979                 o.defaults = {
 980                         '1': [{ proto: 'static' }],
 981                         '0': []
 982                 };
 983
 984
 985                 // Device configuration
 986                 s = m.section(form.GridSection, 'device', _('Devices'));
 987                 s.addremove = true;
 988                 s.anonymous = true;
 989                 s.addbtntitle = _('Add device configuration…');
 990
 991                 s.cfgsections = function() {
 992                         var sections = uci.sections('network', 'device'),
 993                             section_ids = sections.sort(function(a, b) { return a.name > b.name }).map(function(s) { return s['.name'] });
 994
 995                         for (var i = 0; i < netDevs.length; i++) {
 996                                 if (sections.filter(function(s) { return s.name == netDevs[i].getName() }).length)
 997                                         continue;
 998
 999                                 if (netDevs[i].getType() == 'wifi' && !netDevs[i].isUp())
1000                                         continue;
1001
1002                                 /* Unless http://lists.openwrt.org/pipermail/openwrt-devel/2020-July/030397.html is implemented,
1003                                    we cannot properly redefine bridges as devices, so filter them away for now... */
1004
1005                                 var m = netDevs[i].isBridge() ? netDevs[i].getName().match(/^br-([A-Za-z0-9_]+)$/) : null,
1006                                     s = m ? uci.get('network', m[1]) : null;
1007
1008                                 if (s && s['.type'] == 'interface' && s.type == 'bridge')
1009                                         continue;
1010
1011                                 section_ids.push('dev:%s'.format(netDevs[i].getName()));
1012                         }
1013
1014                         return section_ids;
1015                 };
1016
1017                 s.renderMoreOptionsModal = function(section_id, ev) {
1018                         var m = section_id.match(/^dev:(.+)$/);
1019
1020                         if (m) {
1021                                 var devtype = getDevType(section_id);
1022
1023                                 section_id = uci.add('network', 'device');
1024
1025                                 uci.set('network', section_id, 'name', m[1]);
1026                                 uci.set('network', section_id, 'type', (devtype != 'ethernet') ? devtype : null);
1027
1028                                 this.addedSection = section_id;
1029                         }
1030
1031                         return this.super('renderMoreOptionsModal', [section_id, ev]);
1032                 };
1033
1034                 s.renderRowActions = function(section_id) {
1035                         var trEl = this.super('renderRowActions', [ section_id, _('Configure…') ]),
1036                             deleteBtn = trEl.querySelector('button:last-child');
1037
1038                         deleteBtn.firstChild.data = _('Reset');
1039                         deleteBtn.disabled = section_id.match(/^dev:/) ? true : null;
1040
1041                         return trEl;
1042                 };
1043
1044                 s.modaltitle = function(section_id) {
1045                         var m = section_id.match(/^dev:(.+)$/),
1046                             name = m ? m[1] : uci.get('network', section_id, 'name');
1047
1048                         return name ? '%s: %q'.format(getDevTypeDesc(section_id), name) : _('Add device configuration');
1049                 };
1050
1051                 s.addModalOptions = function(s) {
1052                         var isNew = (uci.get('network', s.section, 'name') == null),
1053                             dev = getDevice(s.section);
1054
1055                         nettools.addDeviceOptions(s, dev, isNew);
1056                 };
1057
1058                 s.handleModalCancel = function(/* ... */) {
1059                         var name = uci.get('network', this.addedSection, 'name')
1060
1061                         uci.sections('network', 'bridge-vlan', function(bvs) {
1062                                 if (name != null && bvs.device == name)
1063                                         uci.remove('network', bvs['.name']);
1064                         });
1065
1066                         return form.GridSection.prototype.handleModalCancel.apply(this, arguments);
1067                 };
1068
1069                 function getDevice(section_id) {
1070                         var m = section_id.match(/^dev:(.+)$/),
1071                             name = m ? m[1] : uci.get('network', section_id, 'name');
1072
1073                         return netDevs.filter(function(d) { return d.getName() == name })[0];
1074                 }
1075
1076                 function getDevType(section_id) {
1077                         var cfgtype = uci.get('network', section_id, 'type'),
1078                             dev = getDevice(section_id);
1079
1080                         switch (cfgtype || (dev ? dev.getType() : '')) {
1081                         case '':
1082                                 return null;
1083
1084                         case 'vlan':
1085                         case '8021q':
1086                                 return '8021q';
1087
1088                         case '8021ad':
1089                                 return '8021ad';
1090
1091                         case 'bridge':
1092                                 return 'bridge';
1093
1094                         case 'tunnel':
1095                                 return 'tunnel';
1096
1097                         case 'macvlan':
1098                                 return 'macvlan';
1099
1100                         case 'veth':
1101                                 return 'veth';
1102
1103                         case 'wifi':
1104                         case 'alias':
1105                         case 'switch':
1106                         case 'ethernet':
1107                         default:
1108                                 return 'ethernet';
1109                         }
1110                 }
1111
1112                 function getDevTypeDesc(section_id) {
1113                         switch (getDevType(section_id) || '') {
1114                         case '':
1115                                 return E('em', [ _('Device not present') ]);
1116
1117                         case '8021q':
1118                                 return _('VLAN (802.1q)');
1119
1120                         case '8021ad':
1121                                 return _('VLAN (802.1ad)');
1122
1123                         case 'bridge':
1124                                 return _('Bridge device');
1125
1126                         case 'tunnel':
1127                                 return _('Tunnel device');
1128
1129                         case 'macvlan':
1130                                 return _('MAC VLAN');
1131
1132                         case 'veth':
1133                                 return _('Virtual Ethernet');
1134
1135                         default:
1136                                 return _('Network device');
1137                         }
1138                 }
1139
1140                 o = s.option(form.DummyValue, 'name', _('Device'));
1141                 o.modalonly = false;
1142                 o.textvalue = function(section_id) {
1143                         var dev = getDevice(section_id),
1144                             ext = section_id.match(/^dev:/),
1145                             icon = render_iface(dev);
1146
1147                         if (ext)
1148                                 icon.querySelector('img').style.opacity = '.5';
1149
1150                         return E('span', { 'class': 'ifacebadge' }, [
1151                                 icon,
1152                                 E('span', { 'style': ext ? 'opacity:.5' : null }, [
1153                                         dev ? dev.getName() : (uci.get('network', section_id, 'name') || '?')
1154                                 ])
1155                         ]);
1156                 };
1157
1158                 o = s.option(form.DummyValue, 'type', _('Type'));
1159                 o.textvalue = getDevTypeDesc;
1160                 o.modalonly = false;
1161
1162                 o = s.option(form.DummyValue, 'macaddr', _('MAC Address'));
1163                 o.modalonly = false;
1164                 o.textvalue = function(section_id) {
1165                         var dev = getDevice(section_id),
1166                             val = uci.get('network', section_id, 'macaddr'),
1167                             mac = dev ? dev.getMAC() : null;
1168
1169                         return val ? E('strong', {
1170                                 'data-tooltip': _('The value is overridden by configuration. Original: %s').format(mac || _('unknown'))
1171                         }, [ val.toUpperCase() ]) : (mac || '-');
1172                 };
1173
1174                 o = s.option(form.DummyValue, 'mtu', _('MTU'));
1175                 o.modalonly = false;
1176                 o.textvalue = function(section_id) {
1177                         var dev = getDevice(section_id),
1178                             val = uci.get('network', section_id, 'mtu'),
1179                             mtu = dev ? dev.getMTU() : null;
1180
1181                         return val ? E('strong', {
1182                                 'data-tooltip': _('The value is overridden by configuration. Original: %s').format(mtu || _('unknown'))
1183                         }, [ val ]) : (mtu || '-').toString();
1184                 };
1185
1186                 s = m.section(form.TypedSection, 'globals', _('Global network options'));
1187                 s.addremove = false;
1188                 s.anonymous = true;
1189
1190                 o = s.option(form.Value, 'ula_prefix', _('IPv6 ULA-Prefix'), _('Unique Local Address - in the range <code>fc00::/7</code>. \
1191                         Typically only within the &#8216;local&#8217; half <code>fd00::/8</code>. ULA for IPv6 is analogous to IPv4 private network addressing.\
1192                         This prefix is randomly generated at first install.'));
1193                 o.datatype = 'cidr6';
1194
1195                 o = s.option(form.Flag, 'packet_steering', _('Packet Steering'), _('Enable packet steering across all CPUs. May help or hinder network speed.'));
1196                 o.optional = true;
1197
1198
1199                 if (dslModemType != null) {
1200                         s = m.section(form.TypedSection, 'dsl', _('DSL'));
1201                         s.anonymous = true;
1202
1203                         o = s.option(form.ListValue, 'annex', _('Annex'));
1204                         o.value('a', _('Annex A + L + M (all)'));
1205                         o.value('b', _('Annex B (all)'));
1206                         o.value('j', _('Annex J (all)'));
1207                         o.value('m', _('Annex M (all)'));
1208                         o.value('bdmt', _('Annex B G.992.1'));
1209                         o.value('b2', _('Annex B G.992.3'));
1210                         o.value('b2p', _('Annex B G.992.5'));
1211                         o.value('at1', _('ANSI T1.413'));
1212                         o.value('admt', _('Annex A G.992.1'));
1213                         o.value('alite', _('Annex A G.992.2'));
1214                         o.value('a2', _('Annex A G.992.3'));
1215                         o.value('a2p', _('Annex A G.992.5'));
1216                         o.value('l', _('Annex L G.992.3 POTS 1'));
1217                         o.value('m2', _('Annex M G.992.3'));
1218                         o.value('m2p', _('Annex M G.992.5'));
1219
1220                         o = s.option(form.ListValue, 'tone', _('Tone'));
1221                         o.value('', _('auto'));
1222                         o.value('a', _('A43C + J43 + A43'));
1223                         o.value('av', _('A43C + J43 + A43 + V43'));
1224                         o.value('b', _('B43 + B43C'));
1225                         o.value('bv', _('B43 + B43C + V43'));
1226
1227                         if (dslModemType == 'vdsl') {
1228                                 o = s.option(form.ListValue, 'xfer_mode', _('Encapsulation mode'));
1229                                 o.value('', _('auto'));
1230                                 o.value('atm', _('ATM (Asynchronous Transfer Mode)'));
1231                                 o.value('ptm', _('PTM/EFM (Packet Transfer Mode)'));
1232
1233                                 o = s.option(form.ListValue, 'line_mode', _('DSL line mode'));
1234                                 o.value('', _('auto'));
1235                                 o.value('adsl', _('ADSL'));
1236                                 o.value('vdsl', _('VDSL'));
1237
1238                                 o = s.option(form.ListValue, 'ds_snr_offset', _('Downstream SNR offset'));
1239                                 o.default = '0';
1240
1241                                 for (var i = -100; i <= 100; i += 5)
1242                                         o.value(i, _('%.1f dB').format(i / 10));
1243                         }
1244
1245                         s.option(form.Value, 'firmware', _('Firmware File'));
1246                 }
1247
1248
1249                 // Show ATM bridge section if we have the capabilities
1250                 if (L.hasSystemFeature('br2684ctl')) {
1251                         s = m.section(form.TypedSection, 'atm-bridge', _('ATM Bridges'), _('ATM bridges expose encapsulated ethernet in AAL5 connections as virtual Linux network interfaces which can be used in conjunction with DHCP or PPP to dial into the provider network.'));
1252
1253                         s.addremove = true;
1254                         s.anonymous = true;
1255                         s.addbtntitle = _('Add ATM Bridge');
1256
1257                         s.handleAdd = function(ev) {
1258                                 var sections = uci.sections('network', 'atm-bridge'),
1259                                     max_unit = -1;
1260
1261                                 for (var i = 0; i < sections.length; i++) {
1262                                         var unit = +sections[i].unit;
1263
1264                                         if (!isNaN(unit) && unit > max_unit)
1265                                                 max_unit = unit;
1266                                 }
1267
1268                                 return this.map.save(function() {
1269                                         var sid = uci.add('network', 'atm-bridge');
1270
1271                                         uci.set('network', sid, 'unit', max_unit + 1);
1272                                         uci.set('network', sid, 'atmdev', 0);
1273                                         uci.set('network', sid, 'encaps', 'llc');
1274                                         uci.set('network', sid, 'payload', 'bridged');
1275                                         uci.set('network', sid, 'vci', 35);
1276                                         uci.set('network', sid, 'vpi', 8);
1277                                 });
1278                         };
1279
1280                         s.tab('general', _('General Setup'));
1281                         s.tab('advanced', _('Advanced Settings'));
1282
1283                         o = s.taboption('general', form.Value, 'vci', _('ATM Virtual Channel Identifier (VCI)'));
1284                         s.taboption('general', form.Value, 'vpi', _('ATM Virtual Path Identifier (VPI)'));
1285
1286                         o = s.taboption('general', form.ListValue, 'encaps', _('Encapsulation mode'));
1287                         o.value('llc', _('LLC'));
1288                         o.value('vc', _('VC-Mux'));
1289
1290                         s.taboption('advanced', form.Value, 'atmdev', _('ATM device number'));
1291                         s.taboption('advanced', form.Value, 'unit', _('Bridge unit number'));
1292
1293                         o = s.taboption('advanced', form.ListValue, 'payload', _('Forwarding mode'));
1294                         o.value('bridged', _('bridged'));
1295                         o.value('routed', _('routed'));
1296                 }
1297
1298
1299                 return m.render().then(L.bind(function(m, nodes) {
1300                         poll.add(L.bind(function() {
1301                                 var section_ids = m.children[0].cfgsections(),
1302                                     tasks = [];
1303
1304                                 for (var i = 0; i < section_ids.length; i++) {
1305                                         var row = nodes.querySelector('.cbi-section-table-row[data-sid="%s"]'.format(section_ids[i])),
1306                                             dsc = row.querySelector('[data-name="_ifacestat"] > div'),
1307                                             btn1 = row.querySelector('.cbi-section-actions .reconnect'),
1308                                             btn2 = row.querySelector('.cbi-section-actions .down');
1309
1310                                         if (dsc.getAttribute('reconnect') == '') {
1311                                                 dsc.setAttribute('reconnect', '1');
1312                                                 tasks.push(fs.exec('/sbin/ifup', [section_ids[i]]).catch(function(e) {
1313                                                         ui.addNotification(null, E('p', e.message));
1314                                                 }));
1315                                         }
1316                                         else if (dsc.getAttribute('disconnect') == '') {
1317                                                 dsc.setAttribute('disconnect', '1');
1318                                                 tasks.push(fs.exec('/sbin/ifdown', [section_ids[i]]).catch(function(e) {
1319                                                         ui.addNotification(null, E('p', e.message));
1320                                                 }));
1321                                         }
1322                                         else if (dsc.getAttribute('reconnect') == '1') {
1323                                                 dsc.removeAttribute('reconnect');
1324                                                 btn1.classList.remove('spinning');
1325                                                 btn1.disabled = false;
1326                                         }
1327                                         else if (dsc.getAttribute('disconnect') == '1') {
1328                                                 dsc.removeAttribute('disconnect');
1329                                                 btn2.classList.remove('spinning');
1330                                                 btn2.disabled = false;
1331                                         }
1332                                 }
1333
1334                                 return Promise.all(tasks)
1335                                         .then(L.bind(network.getNetworks, network))
1336                                         .then(L.bind(this.poll_status, this, nodes));
1337                         }, this), 5);
1338
1339                         return nodes;
1340                 }, this, m));
1341         }
1342 });