From 9eb9715e05d550d4f0d3d43f6349198d55852e49 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@digitalocean.com>
Date: Tue, 3 Jul 2018 17:05:04 -0400
Subject: [PATCH] Cleaned up IP addresses list under device/VM interfaces

---
 netbox/project-static/css/base.css       |   4 +
 netbox/templates/dcim/device.html        |   4 +-
 netbox/templates/dcim/inc/interface.html | 122 ++++++++++++++---------
 3 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
index bd1570827..52656a505 100644
--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -366,6 +366,10 @@ table.component-list td.subtable td {
     padding-bottom: 6px;
     padding-top: 6px;
 }
+table.interface-ips th {
+    font-size: 80%;
+    font-weight: normal;
+}
 
 /* Reports */
 table.reports td.method {
diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
index 4984dad95..8a8bf5086 100644
--- a/netbox/templates/dcim/device.html
+++ b/netbox/templates/dcim/device.html
@@ -762,9 +762,9 @@ $(".interface-toggle").click(function() {
 $('button.toggle-ips').click(function() {
     var selected = $(this).attr('selected');
     if (selected) {
-        $('#interfaces_table tr.ipaddress').hide();
+        $('#interfaces_table tr.ipaddresses').hide();
     } else {
-        $('#interfaces_table tr.ipaddress').show();
+        $('#interfaces_table tr.ipaddresses').show();
     }
     $(this).attr('selected', !selected);
     $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
diff --git a/netbox/templates/dcim/inc/interface.html b/netbox/templates/dcim/inc/interface.html
index 33e30b126..b254794df 100644
--- a/netbox/templates/dcim/inc/interface.html
+++ b/netbox/templates/dcim/inc/interface.html
@@ -131,56 +131,82 @@
         {% endif %}
     </td>
 </tr>
-{% for ip in iface.ip_addresses.all %}
-    <tr class="ipaddress">
 
-        {# Placeholder #}
-        {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
-            <td></td>
-        {% endif %}
-
-        {# IP address #}
-        <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>
+{% with ipaddresses=iface.ip_addresses.all %}
+    {% if ipaddresses %}
+        <tr class="ipaddresses">
+            {# Placeholder #}
+            {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
+                <td></td>
             {% 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 #}
-        <td colspan="2">
-            {% if ip.vrf %}
-                <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>
+            {# IP addresses table #}
+            <td colspan="8" style="padding: 0">
+                <table class="table table-condensed interface-ips">
+                    <thead>
+                        <tr class="text-muted">
+                            <th class="col-md-3">IP Address</th>
+                            <th class="col-md-2">Status/Role</th>
+                            <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 #}
-        <td colspan="2">
-            {{ ip.description }}
-        </td>
+                            {# IP address #}
+                            <td>
+                                <a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
+                            </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 %}
+                            {# Primary/status/role #}
+                            <td>
+                                {% if device.primary_ip4 == ip or device.primary_ip6 == ip %}
+                                    <span class="label label-success">Primary</span>
+                                {% 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 #}
+                            <td>
+                                {% if ip.vrf %}
+                                    <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 %}