modules/admin-full: rework interface overview

This commit is contained in:
Jo-Philipp Wich 2011-09-24 01:03:06 +00:00
parent 2dae492a36
commit 6047aea3c4
2 changed files with 204 additions and 137 deletions

View file

@ -14,6 +14,7 @@ $Id$
<%- <%-
local ntm = require "luci.model.network".init() local ntm = require "luci.model.network".init()
local fwm = require "luci.model.firewall".init()
local net local net
local netlist = { } local netlist = { }
@ -30,9 +31,9 @@ $Id$
if (!reconnect && !confirm(String.format('<%_Really shutdown interface "%s" ?\nYou might lose access to this router if you are connected via this interface.%>', id))) if (!reconnect && !confirm(String.format('<%_Really shutdown interface "%s" ?\nYou might lose access to this router if you are connected via this interface.%>', id)))
return; return;
var a = document.getElementById(id + '-ifc-addrs'); var d = document.getElementById(id + '-ifc-description');
if (a) if (d)
a.innerHTML = reconnect d.innerHTML = reconnect
? '<em><%:Interface is reconnecting...%></em>' ? '<em><%:Interface is reconnecting...%></em>'
: '<em><%:Interface is shutting down...%></em>'; : '<em><%:Interface is shutting down...%></em>';
@ -66,7 +67,8 @@ $Id$
var wifidevs = <%=luci.http.write_json(netdevs)%>; var wifidevs = <%=luci.http.write_json(netdevs)%>;
var arptable = <%=luci.http.write_json(arpcache)%>; var arptable = <%=luci.http.write_json(arpcache)%>;
var update_status = function() { (function() {
var func = arguments.callee;
iwxhr.get('<%=luci.dispatcher.build_url("admin", "network", "iface_status", table.concat(netlist, ","))%>', null, iwxhr.get('<%=luci.dispatcher.build_url("admin", "network", "iface_status", table.concat(netlist, ","))%>', null,
function(x, ifcs) function(x, ifcs)
{ {
@ -75,113 +77,126 @@ $Id$
for (var i = 0; i < ifcs.length; i++) for (var i = 0; i < ifcs.length; i++)
{ {
var ifc = ifcs[i]; var ifc = ifcs[i];
var is_up = (ifc.flags && ifc.flags.up); var rxb = ifc.rx_bytes || 0;
var rxb = ifc.stats ? ifc.stats["rx_bytes"] : 0; var txb = ifc.tx_bytes || 0;
var txb = ifc.stats ? ifc.stats["tx_bytes"] : 0; var rxp = ifc.rx_packets || 0;
var rxp = ifc.stats ? ifc.stats["rx_packets"] : 0; var txp = ifc.tx_packets || 0;
var txp = ifc.stats ? ifc.stats["tx_packets"] : 0; var mac = ifc.macaddr;
var mac = ifc.macaddr ? ifc.macaddr : '00:00:00:00:00:00'; var upt = null;
var upt = '-';
var html = '';
var icon; var icon;
if (is_up) if (ifc.is_up)
{ {
if (ifc.uptime) if (ifc.uptime)
upt = String.format('%t', ifc.uptime); upt = String.format('%t', ifc.uptime);
icon = "<%=resource%>/icons/ethernet.png"; icon = "<%=resource%>/icons/%s.png";
} }
else else
{ {
icon = "<%=resource%>/icons/ethernet_disabled.png"; icon = "<%=resource%>/icons/%s_disabled.png";
} }
var s = document.getElementById(ifc.id + '-ifc-signal'); var s = document.getElementById(ifc.id + '-ifc-devices');
if (s) if (s)
{ {
s.innerHTML = String.format( var stat = String.format(
'<img src="%s" style="width:16px; height:16px" /><br />' + '<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px; vertical-align:middle" />',
'<small>%s</small>', ifc.type,
icon, ifc.ifname ? ifc.ifname : '?' ifc.is_up ? '' : '_disabled'
); );
}
var u = document.getElementById(ifc.id + '-ifc-uptime'); if (ifc.subdevices && ifc.subdevices.length)
if (u)
{
u.innerHTML = upt;
}
var m = document.getElementById(ifc.id + '-ifc-mac');
if (m)
{
m.innerHTML = mac.toUpperCase();
}
var a = document.getElementById(ifc.id + '-ifc-addrs');
if (a)
{
if (ifc.ifname)
{ {
a.innerHTML = ''; stat += ' <strong>(';
if (ifc.ipaddrs && ifc.ipaddrs.length) for (var j = 0; j < ifc.subdevices.length; j++)
{ {
a.innerHTML += '<strong><%:IPv4%>: </strong>'; var sif = ifc.subdevices[j];
for (var j = 0; j < ifc.ipaddrs.length; j++) stat += String.format(
a.innerHTML += String.format( '<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px; vertical-align:middle" title="%q" />',
'%s%s/%d', sif.type,
j ? ', ' : '', sif.is_up ? '' : '_disabled',
ifc.ipaddrs[j].addr, sif.name
ifc.ipaddrs[j].prefix );
);
a.innerHTML += '<br />';
} }
if (ifc.ip6addrs && ifc.ip6addrs.length) stat += ')</strong>';
{
a.innerHTML += '<strong><%:IPv6%>: </strong>';
for (var j = 0; j < ifc.ip6addrs.length; j++)
a.innerHTML += String.format(
'%s%s/%d',
j ? ', ' : '',
ifc.ip6addrs[j].addr.toUpperCase(),
ifc.ip6addrs[j].prefix
);
a.innerHTML += '<br />';
}
if (!a.innerHTML)
a.innerHTML = '<em><%:No address configured on this interface.%></em>'
}
else
{
a.innerHTML = '<em><%:Interface not present or not connected yet.%></em>';
} }
stat += String.format(
'<br /><small>%s</small>',
ifc.name
);
s.innerHTML = stat;
} }
var t = document.getElementById(ifc.id + '-ifc-transfer'); var d = document.getElementById(ifc.id + '-ifc-description');
if (t) if (d && ifc.ifname)
{ {
t.innerHTML = String.format( if (upt)
'<strong><%:RX%></strong>: %1024.2mB (%d <%:Pkts.%>)<br />' + {
'<strong><%:TX%></strong>: %1024.2mB (%d <%:Pkts.%>)<br />', html += String.format('<strong><%:Uptime%>:</strong> %s<br />', upt);
}
if (ifc.type != 'tunnel')
{
html += String.format('<strong><%:MAC Address%>:</strong> %s<br />', mac);
}
html += String.format(
'<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' +
'<strong><%:TX%></strong>: %.2mB (%d <%:Pkts.%>)<br />',
rxb, rxp, txb, txp rxb, rxp, txb, txp
); );
if (ifc.ipaddrs && ifc.ipaddrs.length)
{
html += '<strong><%:IPv4%>: </strong>';
for (var i = 0; i < ifc.ipaddrs.length; i++)
html += String.format(
'%s%s/%d',
i ? ', ' : '',
ifc.ipaddrs[i].addr,
ifc.ipaddrs[i].prefix
);
html += '<br />';
}
if (ifc.ip6addrs && ifc.ip6addrs.length)
{
html += '<strong><%:IPv6%>: </strong>';
for (var i = 0; i < ifc.ip6addrs.length; i++)
html += String.format(
'%s%s/%d',
i ? ', ' : '',
ifc.ip6addrs[i].addr.toUpperCase(),
ifc.ip6addrs[i].prefix
);
html += '<br />';
}
d.innerHTML = html;
}
else if (d)
{
d.innerHTML = '<em><%:Interface not present or not connected yet.%></em>';
} }
} }
} }
window.setTimeout(update_status, 5000); window.setTimeout(func, 5000);
} }
) )
}; })();
update_status();
//]]></script> //]]></script>
<fieldset class="cbi-section" style="display:none"> <fieldset class="cbi-section" style="display:none">
@ -196,37 +211,36 @@ $Id$
<table class="cbi-section-table" style="margin:10px; empty-cells:hide"> <table class="cbi-section-table" style="margin:10px; empty-cells:hide">
<tr class="cbi-section-table-titles"> <tr class="cbi-section-table-titles">
<th class="cbi-section-table-cell">&#160;</th> <th class="cbi-section-table-cell"><%:Network%></th>
<th class="cbi-section-table-cell"><%:Interface%></th> <th class="cbi-section-table-cell" style="text-align:left"><%:Status%></th>
<th class="cbi-section-table-cell"><%:Uptime%></th> <th class="cbi-section-table-cell"><%:Actions%></th>
<th class="cbi-section-table-cell"><%:MAC%></th>
<th class="cbi-section-table-cell" style="text-align:left"><%:Addresses%></th>
<th class="cbi-section-table-cell" style="text-align:left"><%:Transfer%></th>
<th class="cbi-section-table-cell" colspan="2"><%:Actions%></th>
</tr> </tr>
<% for i, net in ipairs(netlist) do %> <%
for i, net in ipairs(netlist) do
local z = fwm:get_zone_by_network(net)
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")
%>
<tr class="cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>"> <tr class="cbi-section-table-row cbi-rowstyle-<%=i % 2 + 1%>">
<td> <td class="cbi-value-field" style="padding:3px">
<span style="background-color:#FFFFFF; border:1px solid #CCCCCC; padding:2px"><%=net%></span> <div style="background-color:#FFFFFF; border:1px solid #CCCCCC; margin:0 10px">
<div style="border-bottom:1px solid #CCCCCC; padding:2px; background-color:<%=c%>" title="<%=pcdata(t)%>">
<strong><%=net:upper()%></strong>
</div>
<div style="padding:2px" id="<%=net%>-ifc-devices">
<img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br />
<small>?</small>
</div>
</div>
</td> </td>
<td class="cbi-value-field" style="min-width:16px; padding:3px; text-align:center" id="<%=net%>-ifc-signal"> <td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net%>-ifc-description">
<img src="<%=resource%>/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /> <em><%:Collecting data...%></em>
<small>?</small>
</td> </td>
<td class="cbi-value-field" id="<%=net%>-ifc-uptime">?</td> <td style="width:340px">
<td class="cbi-value-field" id="<%=net%>-ifc-mac">?</td> <input type="button" class="cbi-button cbi-button-add" style="width:80px; background-image:url(<%=resource%>/cbi/reload.gif)" onclick="iface_shutdown('<%=net%>', true)" title="<%:Reconnect this interface%>" value="<%:Connect%>" />
<td class="cbi-value-field" style="text-align:left; padding:3px" id="<%=net%>-ifc-addrs"><em><%:Collecting data...%></em></td> <input type="button" class="cbi-button cbi-button-add" style="width:80px; background-image:url(<%=resource%>/cbi/reset.gif)" onclick="iface_shutdown('<%=net%>', false)" title="<%:Shutdown this interface%>" value="<%:Stop%>" />
<td class="cbi-value-field" style="text-align:left; padding:3px" id="<%=net%>-ifc-transfer"> <input type="button" class="cbi-button cbi-button-add" style="width:80px; background-image:url(<%=resource%>/cbi/edit.gif)" onclick="location.href='<%=luci.dispatcher.build_url("admin/network/network", net)%>'" title="<%:Edit this interface%>" value="<%:Edit%>" />
<strong><%:RX%></strong>: 0 <%:KB%> (0 <%:Pkts.%>)<br /> <input type="button" class="cbi-button cbi-button-add" style="width:80px; background-image:url(<%=resource%>/cbi/remove.gif)" onclick="if (confirm('<%:Really delete this interface? The deletion cannot be undone!\nYou might lose access to this router if you are connected via this interface.%>')) location.href='<%=luci.dispatcher.build_url("admin/network/iface_delete", net)%>'" title="<%:Delete this interface%>" value="<%:Delete%>" />
<strong><%:TX%></strong>: 0 <%:KB%> (0 <%:Pkts.%>)<br />
</td>
<td>
<a href="#" onclick="iface_shutdown('<%=net%>', true)"><img style="border:none" src="<%=resource%>/cbi/reload.gif" alt="<%:Reconnect this interface%>" title="<%:Reconnect this interface%>" /></a>
<a href="#" onclick="iface_shutdown('<%=net%>', false)"><img style="border:none" src="<%=resource%>/cbi/reset.gif" alt="<%:Shutdown this interface%>" title="<%:Shutdown this interface%>" /></a>
</td>
<td>
<a href="<%=luci.dispatcher.build_url("admin/network/network", net)%>"><img style="border:none" src="<%=resource%>/cbi/edit.gif" alt="<%:Edit this interface%>" title="<%:Edit this interface%>" /></a>
<a href="<%=luci.dispatcher.build_url("admin/network/iface_delete", net)%>" onclick="return confirm('<%:Really delete this interface? The deletion cannot be undone!\nYou might lose access to this router if you are connected via this interface.%>')"><img style="border:none" src="<%=resource%>/cbi/remove.gif" alt="<%:Delete this interface%>" title="<%:Delete this interface%>" /></a>
</td> </td>
</tr> </tr>
<% end %> <% end %>

View file

@ -2,91 +2,144 @@
<script type="text/javascript">//<![CDATA[ <script type="text/javascript">//<![CDATA[
var iwxhr = new XHR(); var iwxhr = new XHR();
var update_status = function() {
function iface_shutdown(id, reconnect) {
if (!reconnect && !confirm(String.format('<%_Really shutdown network ?\nYou might loose access to this router if you are connected via this interface.%>', id)))
return;
var a = document.getElementById(id + '-ifc-addrs');
if (a)
{
a.innerHTML = reconnect
? '<em><%:Interface is reconnecting...%></em>'
: '<em><%:Interface is shutting down...%></em>';
}
var s = document.getElementById('ifc-rc-status');
if (s)
{
s.parentNode.style.display = 'block';
s.innerHTML = '<%:Waiting for router...%>';
}
var rcxhr = new XHR();
rcxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/iface_' + (reconnect ? 'reconnect' : 'shutdown') + '/' + id, null,
function(x)
{
if (s)
{
s.innerHTML = reconnect
? '<%:Interface reconnected%>'
: '<%:Interface shut down%>';
window.setTimeout(function() {
s.parentNode.style.display = 'none';
}, 1000);
}
}
);
}
(function() {
var func = arguments.callee;
iwxhr.get('<%=luci.dispatcher.build_url("admin", "network", "iface_status", self.network)%>', null, iwxhr.get('<%=luci.dispatcher.build_url("admin", "network", "iface_status", self.network)%>', null,
function(x, ifc) function(x, ifc)
{ {
if (ifc && (ifc = ifc[0])) if (ifc && (ifc = ifc[0]))
{ {
var is_up = (ifc.flags && ifc.flags.up); var rxb = ifc.rx_bytes || 0;
var rxb = ifc.stats ? (ifc.stats["rx_bytes"] / 1024) : 0; var txb = ifc.tx_bytes || 0;
var txb = ifc.stats ? (ifc.stats["tx_bytes"] / 1024) : 0; var rxp = ifc.rx_packets || 0;
var rxp = ifc.stats ? ifc.stats["rx_packets"] : 0; var txp = ifc.tx_packets || 0;
var txp = ifc.stats ? ifc.stats["tx_packets"] : 0; var mac = ifc.macaddr;
var mac = ifc.macaddr ? ifc.macaddr : '00:00:00:00:00:00';
var upt = '-';
var icon; var html = '';
if (is_up) var upt, icon;
if (ifc.is_up)
{ {
if (ifc.uptime) if (ifc.uptime)
upt = String.format('%t', ifc.uptime); upt = String.format('%t', ifc.uptime);
icon = "<%=resource%>/icons/ethernet.png"; icon = "<%=resource%>/icons/%s.png";
} }
else else
{ {
icon = "<%=resource%>/icons/ethernet_disabled.png"; icon = "<%=resource%>/icons/%s_disabled.png";
} }
var s = document.getElementById('<%=self.option%>-ifc-signal'); var s = document.getElementById('<%=self.option%>-ifc-signal');
if (s) if (s)
s.innerHTML = String.format( s.innerHTML = String.format(
'<img src="%s" style="width:16px; height:16px" /><br />' + '<img src="%s" style="width:16px; height:16px" />' +
'<small>%s</small>', icon, ifc.ifname ? ifc.ifname : '?' '<br /><small>%s</small>',
String.format(icon, ifc.type),
ifc.ifname ? ifc.ifname : '?'
); );
var d = document.getElementById('<%=self.option%>-ifc-description'); var d = document.getElementById('<%=self.option%>-ifc-description');
if (d && ifc.ifname) if (d && ifc.ifname && mac != '00:00:00:00:00:00')
{ {
d.innerHTML = String.format( if (upt)
'<strong><%:Uptime%>:</strong> %s<br />' + {
'<strong><%:MAC Address%>:</strong> %s<br />' + html += String.format('<strong><%:Uptime%>:</strong> %s<br />', upt);
'<strong><%:RX%></strong>: %.2f <%:KB%> (%d <%:Pkts.%>)<br />' + }
'<strong><%:TX%></strong>: %.2f <%:KB%> (%d <%:Pkts.%>)<br />',
upt, mac, rxb, rxp, txb, txp if (ifc.type != 'tunnel')
{
html += String.format('<strong><%:MAC Address%>:</strong> %s<br />', mac);
}
html += String.format(
'<strong><%:RX%></strong>: %.2mB (%d <%:Pkts.%>)<br />' +
'<strong><%:TX%></strong>: %.2mB (%d <%:Pkts.%>)<br />',
rxb, rxp, txb, txp
); );
if (ifc.ipaddrs && ifc.ipaddrs.length) if (ifc.ipaddrs && ifc.ipaddrs.length)
{ {
d.innerHTML += '<strong><%:IPv4%>: </strong>'; html += '<strong><%:IPv4%>: </strong>';
for (var i = 0; i < ifc.ipaddrs.length; i++) for (var i = 0; i < ifc.ipaddrs.length; i++)
d.innerHTML += String.format( html += String.format(
'%s%s/%d', '%s%s/%d',
i ? ', ' : '', i ? ', ' : '',
ifc.ipaddrs[i].addr, ifc.ipaddrs[i].addr,
ifc.ipaddrs[i].prefix ifc.ipaddrs[i].prefix
); );
d.innerHTML += '<br />'; html += '<br />';
} }
if (ifc.ip6addrs && ifc.ip6addrs.length) if (ifc.ip6addrs && ifc.ip6addrs.length)
{ {
d.innerHTML += '<strong><%:IPv6%>: </strong>'; html += '<strong><%:IPv6%>: </strong>';
for (var i = 0; i < ifc.ip6addrs.length; i++) for (var i = 0; i < ifc.ip6addrs.length; i++)
d.innerHTML += String.format( html += String.format(
'%s%s/%d', '%s%s/%d',
i ? ', ' : '', i ? ', ' : '',
ifc.ip6addrs[i].addr.toUpperCase(), ifc.ip6addrs[i].addr.toUpperCase(),
ifc.ip6addrs[i].prefix ifc.ip6addrs[i].prefix
); );
d.innerHTML += '<br />'; html += '<br />';
} }
d.innerHTML = html;
} }
else if (d) else if (d)
d.innerHTML = '<%:Interface not present or not connected yet.%>'; {
d.innerHTML = '<em><%:Interface not present or not connected yet.%></em>';
}
} }
window.setTimeout(update_status, 5000); window.setTimeout(func, 5000);
} }
) )
}; })();
update_status();
//]]></script> //]]></script>
<table> <table>