diff options
4 files changed, 190 insertions, 244 deletions
diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/network.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/network.js new file mode 100644 index 000000000..acca7cf8a --- /dev/null +++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/network.js @@ -0,0 +1,135 @@ +function iface_reconnect(id) { + L.halt(); + L.dom.content(document.getElementById(id + '-ifc-description'), E('em', _('Interface is reconnecting...'))); + L.post(L.url('admin/network/iface_reconnect', id), L.run); +} + +function iface_delete(ev) { + if (!confirm(_('Really delete this interface? The deletion cannot be undone! You might lose access to this device if you are connected via this interface'))) { + ev.preventDefault(); + return false; + } + + ev.target.previousElementSibling.value = '1'; + return true; +} + +var networks = []; + +document.querySelectorAll('[data-network]').forEach(function(n) { + networks.push(n.getAttribute('data-network')); +}); + +function render_iface(ifc) { + return E('span', { class: 'cbi-tooltip-container' }, [ + E('img', { 'class' : 'middle', 'src': L.resource('icons/%s%s.png').format( + ifc.is_alias ? 'alias' : ifc.type, + ifc.is_up ? '' : '_disabled') }), + E('span', { 'class': 'cbi-tooltip ifacebadge large' }, [ + E('img', { 'src': L.resource('icons/%s%s.png').format( + ifc.type, ifc.is_up ? '' : '_disabled') }), + L.itemlist(E('span', { 'class': 'left' }), [ + _('Type'), ifc.typename, + _('Device'), ifc.ifname, + _('Connected'), ifc.is_up ? _('yes') : _('no'), + _('MAC'), ifc.macaddr, + _('RX'), '%.2mB (%d %s)'.format(ifc.rx_bytes, ifc.rx_packets, _('Pkts.')), + _('TX'), '%.2mB (%d %s)'.format(ifc.tx_bytes, ifc.tx_packets, _('Pkts.')) + ]) + ]) + ]); +} + +L.poll(5, L.url('admin/network/iface_status', networks.join(',')), null, + function(x, ifcs) { + if (ifcs) { + for (var idx = 0; idx < ifcs.length; idx++) { + var ifc = ifcs[idx]; + + var s = document.getElementById(ifc.id + '-ifc-devices'); + if (s) { + var c = [ render_iface(ifc) ]; + + if (ifc.subdevices && ifc.subdevices.length) + { + var sifs = [ ' (' ]; + + for (var j = 0; j < ifc.subdevices.length; j++) + sifs.push(render_iface(ifc.subdevices[j])); + + sifs.push(')'); + + c.push(E('span', {}, sifs)); + } + + c.push(E('br')); + c.push(E('small', {}, ifc.is_alias ? _('Alias of "%s"').format(ifc.is_alias) : ifc.name)); + + L.dom.content(s, c); + } + + var d = document.getElementById(ifc.id + '-ifc-description'); + if (d && ifc.proto && ifc.ifname) { + var desc = null, c = []; + + if (ifc.is_dynamic) + desc = _('Virtual dynamic interface'); + else if (ifc.is_alias) + desc = _('Alias Interface'); + + if (ifc.desc) + desc = desc ? '%s (%s)'.format(desc, ifc.desc) : ifc.desc; + + L.itemlist(d, [ + _('Protocol'), '%h'.format(desc || '?'), + _('Uptime'), ifc.is_up ? '%t'.format(ifc.uptime) : null, + _('MAC'), (!ifc.is_dynamic && !ifc.is_alias && ifc.macaddr) ? ifc.macaddr : null, + _('RX'), (!ifc.is_dynamic && !ifc.is_alias) ? '%.2mB (%d %s)'.format(ifc.rx_bytes, ifc.rx_packets, _('Pkts.')) : null, + _('TX'), (!ifc.is_dynamic && !ifc.is_alias) ? '%.2mB (%d %s)'.format(ifc.tx_bytes, ifc.tx_packets, _('Pkts.')) : null, + _('IPv4'), ifc.ipaddrs ? ifc.ipaddrs[0] : null, + _('IPv4'), ifc.ipaddrs ? ifc.ipaddrs[1] : null, + _('IPv4'), ifc.ipaddrs ? ifc.ipaddrs[2] : null, + _('IPv4'), ifc.ipaddrs ? ifc.ipaddrs[3] : null, + _('IPv4'), ifc.ipaddrs ? ifc.ipaddrs[4] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[0] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[1] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[2] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[3] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[4] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[5] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[6] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[7] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[8] : null, + _('IPv6'), ifc.ip6addrs ? ifc.ip6addrs[9] : null, + _('IPv6-PD'), ifc.ip6prefix, + _('Error'), ifc.errors ? ifc.errors[0] : null, + _('Error'), ifc.errors ? ifc.errors[1] : null, + _('Error'), ifc.errors ? ifc.errors[2] : null, + _('Error'), ifc.errors ? ifc.errors[3] : null, + _('Error'), ifc.errors ? ifc.errors[4] : null, + ]); + } + else if (d && !ifc.proto) { + var e = document.getElementById(ifc.id + '-ifc-edit'); + if (e) e.disabled = true; + + var link = L.url('admin/system/packages') + '?query=luci-proto&display=available'; + L.dom.content(d, [ + E('em', _('Unsupported protocol type.')), E('br'), + E('a', { href: link }, _('Install protocol extensions...')) + ]); + } + else if (d && !ifc.ifname) { + var link = L.url('admin/network/network', ifc.name) + '?tab.network.%s=physical'.format(ifc.name); + L.dom.content(d, [ + E('em', _('Network without interfaces.')), E('br'), + E('a', { href: link }, _('Assign interfaces...')) + ]); + } + else if (d) { + L.dom.content(d, E('em' ,_('Interface not present or not connected yet.'))); + } + } + } + } +); diff --git a/modules/luci-mod-network/luasrc/model/cbi/admin_network/network.lua b/modules/luci-mod-network/luasrc/model/cbi/admin_network/network.lua index 0c0ca5263..b98086dea 100644 --- a/modules/luci-mod-network/luasrc/model/cbi/admin_network/network.lua +++ b/modules/luci-mod-network/luasrc/model/cbi/admin_network/network.lua @@ -15,59 +15,6 @@ m:chain("dhcp") m.pageaction = false -local tpl_networks = tpl.Template(nil, [[ - <div class="cbi-section-node"> - <div class="table"> - <% - for i, net in ipairs(netlist) do - local z = net[3] - local c = z and z:get_color() or "#EEEEEE" - local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned") - local disabled = (net[4]:get("auto") == "0") - local dynamic = net[4]:is_dynamic() - %> - <div class="tr cbi-rowstyle-<%=i % 2 + 1%>"> - <div class="td col-3 center middle"> - <div class="ifacebox"> - <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> - <strong><%=net[1]:upper()%></strong> - </div> - <div class="ifacebox-body" id="<%=net[1]%>-ifc-devices" data-network="<%=net[1]%>"> - <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> - <small>?</small> - </div> - </div> - </div> - <div class="td col-5 left middle" id="<%=net[1]%>-ifc-description"> - <em><%:Collecting data...%></em> - </div> - <div class="td cbi-section-actions"> - <div> - <input type="button" class="cbi-button cbi-button-neutral" onclick="iface_reconnect('<%=net[1]%>')" title="<%:Reconnect this interface%>" value="<%:Restart%>"<%=ifattr(disabled or dynamic, "disabled", "disabled")%> /> - - <% if disabled then %> - <input type="hidden" name="cbid.network.<%=net[1]%>.__disable__" value="1" /> - <input type="submit" name="cbi.apply" class="cbi-button cbi-button-neutral" onclick="this.previousElementSibling.value='0'" title="<%:Reconnect this interface%>" value="<%:Connect%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> - <% else %> - <input type="hidden" name="cbid.network.<%=net[1]%>.__disable__" value="0" /> - <input type="submit" name="cbi.apply" class="cbi-button cbi-button-neutral" onclick="this.previousElementSibling.value='1'" title="<%:Shutdown this interface%>" value="<%:Stop%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> - <% end %> - - <input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=url("admin/network/network", net[1])%>'" title="<%:Edit this interface%>" value="<%:Edit%>" id="<%=net[1]%>-ifc-edit"<%=ifattr(dynamic, "disabled", "disabled")%> /> - - <input type="hidden" name="cbid.network.<%=net[1]%>.__delete__" value="" /> - <input type="submit" name="cbi.apply" class="cbi-button cbi-button-negative" onclick="iface_delete(event)" value="<%:Delete%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> - </div> - </div> - </div> - <% end %> - </div> - </div> - <div class="cbi-section-create"> - <input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" /> - </div> -]]) - local _, net local ifaces, netlist = { }, { } @@ -102,6 +49,8 @@ table.sort(netlist, end) s = m:section(TypedSection, "interface", translate("Interface Overview")) +s.template = "admin_network/iface_overview" +s.netlist = netlist function s.cfgsections(self) local _, net, sl = nil, nil, { } @@ -113,12 +62,6 @@ function s.cfgsections(self) return sl end -function s.render(self) - tpl_networks:render({ - netlist = netlist - }) -end - o = s:option(Value, "__disable__") function o.write(self, sid, value) @@ -138,8 +81,6 @@ function o.write(self, sid, value) end -m:section(SimpleSection).template = "admin_network/iface_overview_status" - if fs.access("/etc/init.d/dsl_control") then local ok, boarddata = pcall(json.parse, fs.readfile("/etc/board.json")) local modemtype = (ok == true) diff --git a/modules/luci-mod-network/luasrc/view/admin_network/iface_overview.htm b/modules/luci-mod-network/luasrc/view/admin_network/iface_overview.htm new file mode 100644 index 000000000..4fd46e2bf --- /dev/null +++ b/modules/luci-mod-network/luasrc/view/admin_network/iface_overview.htm @@ -0,0 +1,53 @@ +<div class="cbi-section-node"> + <div class="table"> + <% + for i, net in ipairs(self.netlist) do + local z = net[3] + local c = z and z:get_color() or "#EEEEEE" + local t = z and translate("Part of zone %q" % z:name()) or translate("No zone assigned") + local disabled = (net[4]:get("auto") == "0") + local dynamic = net[4]:is_dynamic() + %> + <div class="tr cbi-rowstyle-<%=i % 2 + 1%>"> + <div class="td col-3 center middle"> + <div class="ifacebox"> + <div class="ifacebox-head" style="background-color:<%=c%>" title="<%=pcdata(t)%>"> + <strong><%=net[1]:upper()%></strong> + </div> + <div class="ifacebox-body" id="<%=net[1]%>-ifc-devices" data-network="<%=net[1]%>"> + <img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> + <small>?</small> + </div> + </div> + </div> + <div class="td col-5 left middle" id="<%=net[1]%>-ifc-description"> + <em><%:Collecting data...%></em> + </div> + <div class="td cbi-section-actions"> + <div> + <input type="button" class="cbi-button cbi-button-neutral" onclick="iface_reconnect('<%=net[1]%>')" title="<%:Reconnect this interface%>" value="<%:Restart%>"<%=ifattr(disabled or dynamic, "disabled", "disabled")%> /> + + <% if disabled then %> + <input type="hidden" name="cbid.network.<%=net[1]%>.__disable__" value="1" /> + <input type="submit" name="cbi.apply" class="cbi-button cbi-button-neutral" onclick="this.previousElementSibling.value='0'" title="<%:Reconnect this interface%>" value="<%:Connect%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> + <% else %> + <input type="hidden" name="cbid.network.<%=net[1]%>.__disable__" value="0" /> + <input type="submit" name="cbi.apply" class="cbi-button cbi-button-neutral" onclick="this.previousElementSibling.value='1'" title="<%:Shutdown this interface%>" value="<%:Stop%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> + <% end %> + + <input type="button" class="cbi-button cbi-button-action important" onclick="location.href='<%=url("admin/network/network", net[1])%>'" title="<%:Edit this interface%>" value="<%:Edit%>" id="<%=net[1]%>-ifc-edit"<%=ifattr(dynamic, "disabled", "disabled")%> /> + + <input type="hidden" name="cbid.network.<%=net[1]%>.__delete__" value="" /> + <input type="submit" name="cbi.apply" class="cbi-button cbi-button-negative" onclick="iface_delete(event)" value="<%:Delete%>"<%=ifattr(dynamic, "disabled", "disabled")%> /> + </div> + </div> + </div> + <% end %> + </div> +</div> + +<div class="cbi-section-create"> + <input type="button" class="cbi-button cbi-button-add" value="<%:Add new interface...%>" onclick="location.href='<%=url("admin/network/iface_add")%>'" /> +</div> + +<script type="text/javascript" src="<%=resource%>/view/network/network.js"></script> diff --git a/modules/luci-mod-network/luasrc/view/admin_network/iface_overview_status.htm b/modules/luci-mod-network/luasrc/view/admin_network/iface_overview_status.htm deleted file mode 100644 index 7427154a0..000000000 --- a/modules/luci-mod-network/luasrc/view/admin_network/iface_overview_status.htm +++ /dev/null @@ -1,183 +0,0 @@ -<%# - Copyright 2010-2018 Jo-Philipp Wich <jo@mein.io> - Licensed to the public under the Apache License 2.0. --%> - -<script type="text/javascript">//<![CDATA[ - function iface_reconnect(id) { - XHR.halt(); - - var d = document.getElementById(id + '-ifc-description'); - if (d) d.innerHTML = '<em><%:Interface is reconnecting...%></em>'; - - (new XHR()).post('<%=url('admin/network/iface_reconnect')%>/' + id, - { token: '<%=token%>' }, XHR.run); - } - - function iface_delete(ev) { - if (!confirm(<%=luci.http.write_json(translate('Really delete this interface? The deletion cannot be undone! You might lose access to this device if you are connected via this interface'))%>)) { - ev.preventDefault(); - return false; - } - - ev.target.previousElementSibling.value = '1'; - return true; - } - - var networks = []; - - document.querySelectorAll('[data-network]').forEach(function(n) { - networks.push(n.getAttribute('data-network')); - }); - - function render_iface(ifc) { - return E('span', { class: 'cbi-tooltip-container' }, [ - E('img', { 'class' : 'middle', 'src': '<%=resource%>/icons/%s%s.png'.format( - ifc.is_alias ? 'alias' : ifc.type, - ifc.is_up ? '' : '_disabled') }), - E('span', { 'class': 'cbi-tooltip ifacebadge large' }, [ - E('img', { 'src': '<%=resource%>/icons/%s%s.png'.format( - ifc.type, ifc.is_up ? '' : '_disabled') }), - E('span', { 'class': 'left' }, [ - E('strong', '<%:Type%>: '), ifc.typename, E('br'), - E('strong', '<%:Device%>: '), ifc.ifname, E('br'), - E('strong', '<%:Connected%>: '), ifc.is_up ? '<%:yes%>' : '<%:no%>', E('br'), - ifc.macaddr ? E('strong', '<%:MAC%>: ') : '', - ifc.macaddr ? ifc.macaddr : '', - ifc.macaddr ? E('br') : '', - E('strong', '<%:RX%>: '), '%.2mB (%d <%:Pkts.%>)'.format(ifc.rx_bytes, ifc.rx_packets), E('br'), - E('strong', '<%:TX%>: '), '%.2mB (%d <%:Pkts.%>)'.format(ifc.tx_bytes, ifc.tx_packets) - ]) - ]) - ]); - } - - XHR.poll(5, '<%=url('admin/network/iface_status')%>/' + networks.join(','), null, - function(x, ifcs) - { - if (ifcs) - { - for (var idx = 0; idx < ifcs.length; idx++) - { - var ifc = ifcs[idx]; - var html = ''; - - var s = document.getElementById(ifc.id + '-ifc-devices'); - if (s) - { - while (s.firstChild) - s.removeChild(s.firstChild); - - s.appendChild(render_iface(ifc)); - - if (ifc.subdevices && ifc.subdevices.length) - { - var sifs = [ ' (' ]; - - for (var j = 0; j < ifc.subdevices.length; j++) - sifs.push(render_iface(ifc.subdevices[j])); - - sifs.push(')'); - - s.appendChild(E('span', {}, sifs)); - } - - s.appendChild(E('br')); - s.appendChild(E('small', {}, ifc.is_alias ? '<%:Alias of "%s"%>'.format(ifc.is_alias) : ifc.name)); - } - - var d = document.getElementById(ifc.id + '-ifc-description'); - if (d && ifc.proto && ifc.ifname) - { - var desc = null; - - if (ifc.is_dynamic) - desc = '<%:Virtual dynamic interface%>'; - else if (ifc.is_alias) - desc = '<%:Alias Interface%>'; - - if (ifc.desc) - desc = desc ? '%s (%s)'.format(desc, ifc.desc) : ifc.desc; - - html += String.format('<strong><%:Protocol%>:</strong> %h<br />', desc || '?'); - - if (ifc.is_up) - { - html += String.format('<strong><%:Uptime%>:</strong> %t<br />', ifc.uptime); - } - - - if (!ifc.is_dynamic && !ifc.is_alias) - { - if (ifc.macaddr) - html += String.format('<strong><%:MAC%>:</strong> %s<br />', ifc.macaddr); - - html += String.format( - '<strong><%:RX%>:</strong> %.2mB (%d <%:Pkts.%>)<br />' + - '<strong><%:TX%>:</strong> %.2mB (%d <%:Pkts.%>)<br />', - ifc.rx_bytes, ifc.rx_packets, - ifc.tx_bytes, ifc.tx_packets - ); - } - - if (ifc.ipaddrs && ifc.ipaddrs.length) - { - for (var i = 0; i < ifc.ipaddrs.length; i++) - html += String.format( - '<strong><%:IPv4%>:</strong> %s<br />', - ifc.ipaddrs[i] - ); - } - - if (ifc.ip6addrs && ifc.ip6addrs.length) - { - for (var i = 0; i < ifc.ip6addrs.length; i++) - html += String.format( - '<strong><%:IPv6%>:</strong> %s<br />', - ifc.ip6addrs[i] - ); - } - - if (ifc.ip6prefix) - html += String.format('<strong><%:IPv6-PD%>:</strong> %s<br />', ifc.ip6prefix); - - if (ifc.errors) - { - for (var i = 0; i < ifc.errors.length; i++) - html += String.format( - '<em class="error"><strong><%:Error%>:</strong> %h</em><br />', - ifc.errors[i] - ); - } - - d.innerHTML = html; - } - else if (d && !ifc.proto) - { - var e = document.getElementById(ifc.id + '-ifc-edit'); - if (e) - e.disabled = true; - - d.innerHTML = String.format( - '<em><%:Unsupported protocol type.%></em><br />' + - '<a href="%h"><%:Install protocol extensions...%></a>', - '<%=url("admin/system/packages")%>?query=luci-proto&display=available' - ); - } - else if (d && !ifc.ifname) - { - d.innerHTML = String.format( - '<em><%:Network without interfaces.%></em><br />' + - '<a href="<%=url("admin/network/network/%s")%>?tab.network.%s=physical"><%:Assign interfaces...%></a>', - ifc.name, ifc.name - ); - } - else if (d) - { - d.innerHTML = '<em><%:Interface not present or not connected yet.%></em>'; - } - } - } - } - ); -//]]></script> |