Cleaned up IP addresses list under device/VM interfaces

This commit is contained in:
Jeremy Stretch 2018-07-03 17:05:04 -04:00
parent 49ecf5aa8a
commit 9eb9715e05
3 changed files with 80 additions and 50 deletions

View File

@ -366,6 +366,10 @@ table.component-list td.subtable td {
padding-bottom: 6px; padding-bottom: 6px;
padding-top: 6px; padding-top: 6px;
} }
table.interface-ips th {
font-size: 80%;
font-weight: normal;
}
/* Reports */ /* Reports */
table.reports td.method { table.reports td.method {

View File

@ -762,9 +762,9 @@ $(".interface-toggle").click(function() {
$('button.toggle-ips').click(function() { $('button.toggle-ips').click(function() {
var selected = $(this).attr('selected'); var selected = $(this).attr('selected');
if (selected) { if (selected) {
$('#interfaces_table tr.ipaddress').hide(); $('#interfaces_table tr.ipaddresses').hide();
} else { } else {
$('#interfaces_table tr.ipaddress').show(); $('#interfaces_table tr.ipaddresses').show();
} }
$(this).attr('selected', !selected); $(this).attr('selected', !selected);
$(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked'); $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');

View File

@ -131,56 +131,82 @@
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% for ip in iface.ip_addresses.all %}
<tr class="ipaddress">
{# Placeholder #} {% with ipaddresses=iface.ip_addresses.all %}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %} {% if ipaddresses %}
<td></td> <tr class="ipaddresses">
{% endif %} {# Placeholder #}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
{# IP address #} <td></td>
<td colspan="2">
<a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
</td>
{# Primary, status, role #}
<td>
{% if device.primary_ip4 == ip or device.primary_ip6 == ip %}
<span class="label label-success">Primary</span>
{% endif %} {% endif %}
<span class="label label-{{ ip.get_status_class }}">{{ ip.get_status_display }}</span>
{% if ip.role %}
<span class="label label-{{ ip.get_role_class }}">{{ ip.get_role_display }}</span>
{% endif %}
</td>
{# VRF #} {# IP addresses table #}
<td colspan="2"> <td colspan="8" style="padding: 0">
{% if ip.vrf %} <table class="table table-condensed interface-ips">
<a href="{% url 'ipam:vrf' pk=ip.vrf.pk %}" title="{{ ip.vrf.rd }}">{{ ip.vrf.name }}</a> <thead>
{% else %} <tr class="text-muted">
<span class="text-muted">Global</span> <th class="col-md-3">IP Address</th>
{% endif %} <th class="col-md-2">Status/Role</th>
</td> <th class="col-md-3">VRF</th>
<th class="col-md-3">Description</th>
<th class="col-md-1"></th>
</tr>
</thead>
{% for ip in iface.ip_addresses.all %}
<tr>
{# Description #} {# IP address #}
<td colspan="2"> <td>
{{ ip.description }} <a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
</td> </td>
{# Buttons #} {# Primary/status/role #}
<td class="text-right text-nowrap"> <td>
{% if perms.ipam.change_ipaddress %} {% if device.primary_ip4 == ip or device.primary_ip6 == ip %}
<a href="{% url 'ipam:ipaddress_edit' pk=ip.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-info btn-xs"> <span class="label label-success">Primary</span>
<i class="glyphicon glyphicon-pencil" aria-hidden="true" title="Edit IP address"></i> {% endif %}
</a> <span class="label label-{{ ip.get_status_class }}">{{ ip.get_status_display }}</span>
{% endif %} {% if ip.role %}
{% if perms.ipam.delete_ipaddress %} <span class="label label-{{ ip.get_role_class }}">{{ ip.get_role_display }}</span>
<a href="{% url 'ipam:ipaddress_delete' pk=ip.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-danger btn-xs"> {% endif %}
<i class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete IP address"></i> </td>
</a>
{% endif %} {# VRF #}
</td> <td>
</tr> {% if ip.vrf %}
{% endfor %} <a href="{% url 'ipam:vrf' pk=ip.vrf.pk %}" title="{{ ip.vrf.rd }}">{{ ip.vrf.name }}</a>
{% else %}
<span class="text-muted">Global</span>
{% endif %}
</td>
{# Description #}
<td>
{% if ip.description %}
{{ ip.description }}
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
{# Buttons #}
<td class="text-right text-nowrap">
{% if perms.ipam.change_ipaddress %}
<a href="{% url 'ipam:ipaddress_edit' pk=ip.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-info btn-xs">
<i class="glyphicon glyphicon-pencil" aria-hidden="true" title="Edit IP address"></i>
</a>
{% endif %}
{% if perms.ipam.delete_ipaddress %}
<a href="{% url 'ipam:ipaddress_delete' pk=ip.pk %}?return_url={{ device.get_absolute_url }}" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete IP address"></i>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
{% endif %}
{% endwith %}