Rearranged device/VM view and expanded component lists

netbox/dcim/views.py

@@ -1,5 +1,4 @@
 from __future__ import unicode_literals
-import re
 from natsort import natsorted
 from operator import attrgetter
 

netbox/ipam/constants.py

@@ -61,7 +61,7 @@ VLAN_STATUS_CHOICES = (
     (VLAN_STATUS_DEPRECATED, 'Deprecated')
 )
 
-# Bootstrap CSS classes for various statuses
+# Bootstrap CSS classes
 STATUS_CHOICE_CLASSES = {
     0: 'default',
     1: 'primary',
@@ -70,6 +70,16 @@ STATUS_CHOICE_CLASSES = {
     4: 'warning',
     5: 'success',
 }
+ROLE_CHOICE_CLASSES = {
+    10: 'default',
+    20: 'primary',
+    30: 'warning',
+    40: 'success',
+    41: 'success',
+    42: 'success',
+    43: 'success',
+    44: 'success',
+}
 
 # IP protocols (for services)
 IP_PROTOCOL_TCP = 6

netbox/ipam/models.py

@@ -460,6 +460,9 @@ class IPAddress(CreatedUpdatedModel, CustomFieldModel):
     def get_status_class(self):
         return STATUS_CHOICE_CLASSES[self.status]
 
+    def get_role_class(self):
+        return ROLE_CHOICE_CLASSES[self.role]
+
 
 @python_2_unicode_compatible
 class VLANGroup(models.Model):

netbox/project-static/css/base.css

@@ -395,6 +395,9 @@ table.reports td.stats label {
 }
 
 /* Misc */
+.text-nowrap {
+    white-space: nowrap;
+}
 .banner-bottom {
     margin-bottom: 50px;
 }

netbox/templates/dcim/device.html

@@ -7,7 +7,7 @@
 {% block content %}
 {% include 'dcim/inc/device_header.html' with active_tab='info' %}
 <div class="row">
-	<div class="col-md-5">
+	<div class="col-md-6">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Device</strong>
@@ -172,58 +172,20 @@
         {% with device.get_custom_fields as custom_fields %}
             {% include 'inc/custom_fields_panel.html' %}
         {% endwith %}
-        {% if request.user.is_authenticated %}
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Secrets</strong>
-                </div>
-                {% if secrets %}
-                    <table class="table table-hover panel-body">
-                        {% for secret in secrets %}
-                            {% include 'secrets/inc/secret_tr.html' %}
-                        {% endfor %}
-                    </table>
-                {% else %}
-                    <div class="panel-body text-muted">
-                        None found
-                    </div>
-                {% endif %}
-                {% if perms.secrets.add_secret %}
-                    <form id="secret_form">
-                        {% csrf_token %}
-                    </form>
-                    <div class="panel-footer text-right">
-                        <a href="{% url 'dcim:device_addsecret' pk=device.pk %}" class="btn btn-xs btn-primary">
-                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                            Add secret
-                        </a>
-                    </div>
-                {% endif %}
-            </div>
-        {% endif %}
         <div class="panel panel-default">
             <div class="panel-heading">
-                <strong>Services</strong>
+                <strong>Comments</strong>
+            </div>
+            <div class="panel-body">
+                {% if device.comments %}
+                    {{ device.comments|gfm }}
+                {% else %}
+                    <span class="text-muted">None</span>
+                {% endif %}
             </div>
-            {% if services %}
-                <table class="table table-hover panel-body">
-                    {% for service in services %}
-                        {% include 'ipam/inc/service.html' %}
-                    {% endfor %}
-                </table>
-            {% else %}
-                <div class="panel-body text-muted">
-                    None
-                </div>
-            {% endif %}
-            {% if perms.ipam.add_service %}
-                <div class="panel-footer text-right">
-                    <a href="{% url 'dcim:device_service_assign' device=device.pk %}" class="btn btn-xs btn-primary">
-                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Assign service
-                    </a>
-                </div>
-            {% endif %}
         </div>
+    </div>
+    <div class="col-md-6">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Console / Power</strong>
@@ -273,17 +235,57 @@
                 </div>
             {% endif %}
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Comments</strong>
-            </div>
-            <div class="panel-body">
-                {% if device.comments %}
-                    {{ device.comments|gfm }}
+        {% if request.user.is_authenticated %}
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <strong>Secrets</strong>
+                </div>
+                {% if secrets %}
+                    <table class="table table-hover panel-body">
+                        {% for secret in secrets %}
+                            {% include 'secrets/inc/secret_tr.html' %}
+                        {% endfor %}
+                    </table>
                 {% else %}
-                    <span class="text-muted">None</span>
+                    <div class="panel-body text-muted">
+                        None found
+                    </div>
                 {% endif %}
+                {% if perms.secrets.add_secret %}
+                    <form id="secret_form">
+                        {% csrf_token %}
+                    </form>
+                    <div class="panel-footer text-right">
+                        <a href="{% url 'dcim:device_addsecret' pk=device.pk %}" class="btn btn-xs btn-primary">
+                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                            Add secret
+                        </a>
+                    </div>
+                {% endif %}
+            </div>
+        {% endif %}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <strong>Services</strong>
             </div>
+            {% if services %}
+                <table class="table table-hover panel-body">
+                    {% for service in services %}
+                        {% include 'ipam/inc/service.html' %}
+                    {% endfor %}
+                </table>
+            {% else %}
+                <div class="panel-body text-muted">
+                    None
+                </div>
+            {% endif %}
+            {% if perms.ipam.add_service %}
+                <div class="panel-footer text-right">
+                    <a href="{% url 'dcim:device_service_assign' device=device.pk %}" class="btn btn-xs btn-primary">
+                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Assign service
+                    </a>
+                </div>
+            {% endif %}
         </div>
         <div class="panel panel-default">
             <div class="panel-heading">
@@ -326,7 +328,9 @@
             {% endif %}
         </div>
 	</div>
-	<div class="col-md-7">
+</div>
+<div class="row">
+	<div class="col-md-12">
         {% if device_bays or device.device_type.is_parent_device %}
             {% if perms.dcim.delete_devicebay %}
                 <form method="post" action="{% url 'dcim:devicebay_bulk_delete' pk=device.pk %}">
@@ -350,7 +354,7 @@
                 </div>
                 <table class="table table-hover panel-body component-list">
                     {% for devicebay in device_bays %}
-                        {% include 'dcim/inc/devicebay.html' with selectable=True %}
+                        {% include 'dcim/inc/devicebay.html' %}
                     {% empty %}
                         <tr>
                             <td colspan="4">No device bays defined</td>
@@ -405,11 +409,23 @@
                     </div>
                 </div>
                 <table id="interfaces_table" class="table table-hover panel-body component-list">
+                    <tr class="table-headings">
+                        {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
+                            <th></th>
+                        {% endif %}
+                        <th>Name</th>
+                        <th>LAG</th>
+                        <th>Description</th>
+                        <th>MTU</th>
+                        <th>MAC Address</th>
+                        <th colspan="2">Connection</th>
+                        <th></th>
+                    </tr>
                     {% for iface in interfaces %}
-                        {% include 'dcim/inc/interface.html' with selectable=True %}
+                        {% include 'dcim/inc/interface.html' %}
                     {% empty %}
                         <tr>
-                            <td colspan="4">No interfaces defined</td>
+                            <td colspan="8">No interfaces defined</td>
                         </tr>
                     {% endfor %}
                 </table>
@@ -467,8 +483,16 @@
                     </div>
                 </div>
                 <table class="table table-hover panel-body component-list">
+                    <tr class="table-headings">
+                        {% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
+                            <th></th>
+                        {% endif %}
+                        <th>Name</th>
+                        <th colspan="2">Connection</th>
+                        <th></th>
+                    </tr>
                     {% for csp in cs_ports %}
-                        {% include 'dcim/inc/consoleserverport.html' with selectable=True %}
+                        {% include 'dcim/inc/consoleserverport.html' %}
                     {% empty %}
                         <tr>
                             <td colspan="4">No console server ports defined</td>
@@ -524,12 +548,20 @@
                     </div>
                 </div>
                 <table class="table table-hover panel-body component-list">
+                    <tr class="table-headings">
+                        {% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
+                            <th></th>
+                        {% endif %}
+                        <th>Name</th>
+                        <th colspan="2">Connection</th>
+                        <th></th>
+                    </tr>
                     {% for po in power_outlets %}
-                        {% include 'dcim/inc/poweroutlet.html' with selectable=True %}
+                        {% include 'dcim/inc/poweroutlet.html' %}
                     {% empty %}
                         <tr>
                             <td colspan="4">No power outlets defined</td>
-                        </tr>
+                        </tr> text-nowrap
                     {% endfor %}
                 </table>
                 {% if perms.dcim.add_poweroutlet or perms.dcim.delete_poweroutlet %}

netbox/templates/dcim/inc/consoleserverport.html

@@ -1,5 +1,5 @@
 <tr class="consoleserverport{% if csp.connected_console and not csp.connected_console.connection_status %} info{% endif %}">
-    {% if selectable and perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
+    {% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
         <td class="pk">
             <input name="pk" type="checkbox" value="{{ csp.pk }}" />
         </td>
@@ -7,7 +7,6 @@
     <td>
         <i class="fa fa-fw fa-keyboard-o"></i> {{ csp }}
     </td>
-    <td></td>
     {% if csp.connected_console %}
         <td>
             <a href="{% url 'dcim:device' pk=csp.connected_console.device.pk %}">{{ csp.connected_console.device }}</a>
@@ -20,7 +19,7 @@
             <span class="text-muted">Not connected</span>
         </td>
     {% endif %}
-    <td colspan="2" class="text-right">
+    <td class="text-right">
         {% if perms.dcim.change_consoleserverport %}
             {% if csp.connected_console %}
                 {% if csp.connected_console.connection_status %}

netbox/templates/dcim/inc/devicebay.html

@@ -1,5 +1,5 @@
 <tr class="devicebay">
-    {% if selectable and perms.dcim.change_devicebay or perms.dcim.delete_devicebay %}
+    {% if perms.dcim.change_devicebay or perms.dcim.delete_devicebay %}
         <td class="pk">
             <input name="pk" type="checkbox" value="{{ devicebay.pk }}" />
         </td>

netbox/templates/dcim/inc/interface.html

@@ -1,21 +1,37 @@
-<tr class="interface{% if not iface.enabled %} danger{% elif iface.connection and iface.connection.connection_status or iface.circuit_termination %} success{% elif iface.connection and not iface.connection.connection_status %} info{% elif iface.is_virtual %} warning{% endif %}">
-    {% if selectable and perms.dcim.change_interface or perms.dcim.delete_interface %}
+<tr class="interface{% if not iface.enabled %} danger{% elif iface.connection and iface.connection.connection_status or iface.circuit_termination %} success{% elif iface.connection and not iface.connection.connection_status %} info{% elif iface.is_virtual %} warning{% endif %}" id="iface_{{ iface.name }}">
+
+    {# Checkbox #}
+    {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
         <td class="pk">
             <input name="pk" type="checkbox" value="{{ iface.pk }}" />
         </td>
     {% endif %}
+
+    {# Icon and name #}
+    <td>
+        <span title="{{ iface.get_form_factor_display }}">
+            <i class="fa fa-fw fa-{% if iface.mgmt_only %}wrench{% elif iface.is_lag %}align-justify{% elif iface.is_virtual %}circle{% elif iface.is_wireless %}wifi{% else %}exchange{% endif %}"></i>
+            {{ iface }}
+        </span>
+    </td>
+
+    {# LAG #}
     <td>
-        <i class="fa fa-fw fa-{% if iface.mgmt_only %}wrench{% elif iface.is_virtual %}square{% elif iface.is_wireless %}wifi{% else %}exchange{% endif %}"></i>
-        <span title="{{ iface.get_form_factor_display }}">{{ iface }}</span>
         {% if iface.lag %}
-            <span class="label label-primary">{{ iface.lag }}</span>
-        {% endif %}
-        {% if iface.description %}
-            <i class="fa fa-fw fa-comment-o" title="{{ iface.description }}"></i>
+            <a href="#iface_{{ iface.lag }}" class="label label-default">{{ iface.lag }}</a>
         {% endif %}
     </td>
+
+    {# Description #}
+    <td>{{ iface.description }}</td>
+
+    {# MTU #}
     <td>{{ iface.mtu|default:"" }}</td>
+
+    {# MAC address #}
     <td>{{ iface.mac_address|default:"" }}</td>
+
+    {# Connection or type #}
     {% if iface.is_lag %}
         <td colspan="2" class="text-muted">
             LAG interface<br />
@@ -55,7 +71,9 @@
             <span class="text-muted">Not connected</span>
         </td>
     {% endif %}
-    <td colspan="2" class="text-right">
+
+    {# Buttons #}
+    <td class="text-right text-nowrap">
         {% if show_graphs %}
             {% if iface.circuit_termination or iface.connection %}
                 <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#graphs_modal" data-obj="{{ device.name }} - {{ iface.name }}" data-url="{% url 'dcim-api:interface-graphs' pk=iface.pk %}" title="Show graphs">
@@ -96,7 +114,7 @@
                     </a>
                 {% endif %}
             {% endif %}
-            <a href="{% url 'dcim:interface_edit' pk=iface.pk %}" class="btn btn-info btn-xs" title="Edit interface">
+            <a href="{% if iface.device %}{% url 'dcim:interface_edit' pk=iface.pk %}{% else %}{% url 'virtualization:interface_edit' pk=iface.pk %}{% endif %}" class="btn btn-info btn-xs" title="Edit interface">
                 <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
             </a>
         {% endif %}
@@ -106,62 +124,60 @@
                     <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                 </button>
             {% else %}
-                <a href="{% url 'dcim:interface_delete' pk=iface.pk %}" class="btn btn-danger btn-xs" title="Delete interface">
+                <a href="{% if iface.device %}{% url 'dcim:interface_delete' pk=iface.pk %}{% else %}{% url 'virtualization:interface_delete' pk=iface.pk %}{% endif %}" class="btn btn-danger btn-xs" title="Delete interface">
                     <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                 </a>
             {% endif %}
         {% endif %}
     </td>
 </tr>
-{% with iface.ip_addresses.all as ipaddresses %}
-    {% if ipaddresses %}
-        <tr class="ipaddress">
-            {% if selectable and perms.dcim.change_interface or perms.dcim.delete_interface %}
-                <td></td>
-                <td colspan="6" class="subtable">
+{% 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>
+            {% endif %}
+            <span class="label label-{{ ip.get_status_class }}">{{ ip.get_status_display }}</span>
+        </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 %}
-                <td colspan="7" class="subtable">
+                <span class="text-muted">Global</span>
             {% endif %}
-            <table class="table table-hover">
-                {% for ip in ipaddresses %}
-                    <tr>
-                        <td>
-                            <a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
-                            {% if ip.description %}
-                                <i class="fa fa-fw fa-comment-o" title="{{ ip.description }}"></i>
-                            {% endif %}
-                        </td>
-                        <td>
-                            {% if device.primary_ip4 == ip or device.primary_ip6 == ip %}
-                                <span class="label label-success">Primary</span>
-                            {% endif %}
-                        </td>
-                        <td>
-                            {% if ip.vrf %}
-                                <a href="{% url 'ipam:vrf' pk=ip.vrf.pk %}">{{ ip.vrf }}</a>
-                            {% else %}
-                                <span class="text-muted">Global table</span>
-                            {% endif %}
-                        </td>
-                        <td>
-                            <span class="label label-{{ ip.get_status_class }}">{{ ip.get_status_display }}</span>
-                        </td>
-                        <td class="text-right">
-                            {% 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 %}
+        </td>
+
+        {# Description #}
+        <td colspan="2">
+            {{ ip.description }}
+        </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 %}

netbox/templates/dcim/inc/poweroutlet.html

@@ -1,5 +1,5 @@
 <tr class="poweroutlet{% if po.connected_port and not po.connected_port.connection_status %} info{% endif %}">
-    {% if selectable and perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
+    {% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
         <td class="pk">
             <input name="pk" type="checkbox" value="{{ po.pk }}" />
         </td>
@@ -7,7 +7,6 @@
     <td>
         <i class="fa fa-fw fa-bolt"></i> {{ po }}
     </td>
-    <td></td>
     {% if po.connected_port %}
         <td>
             <a href="{% url 'dcim:device' pk=po.connected_port.device.pk %}">{{ po.connected_port.device }}</a>
@@ -20,7 +19,7 @@
             <span class="text-muted">Not connected</span>
         </td>
     {% endif %}
-    <td colspan="2" class="text-right">
+    <td class="text-right">
         {% if perms.dcim.change_poweroutlet %}
             {% if po.connected_port %}
                 {% if po.connected_port.connection_status %}

netbox/templates/virtualization/inc/interface.html

@@ -1,70 +0,0 @@
-<tr class="interface{% if not iface.enabled %} danger{% endif %}">
-    {% if selectable and perms.dcim.change_interface or perms.dcim.delete_interface %}
-        <td class="pk">
-            <input name="pk" type="checkbox" value="{{ iface.pk }}" />
-        </td>
-    {% endif %}
-    <td>
-        <i class="fa fa-fw fa-square"></i> <span>{{ iface }}</span>
-        {% if iface.description %}
-            <i class="fa fa-fw fa-comment-o" title="{{ iface.description }}"></i>
-        {% endif %}
-    </td>
-    <td>{{ iface.mtu|default:"" }}</td>
-    <td>{{ iface.mac_address|default:"" }}</td>
-    <td class="text-right">
-        {% if perms.ipam.add_ipaddress %}
-            <a href="{% url 'ipam:ipaddress_add' %}?interface={{ iface.pk }}&return_url={{ vm.get_absolute_url }}" class="btn btn-xs btn-success" title="Add IP address">
-                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-        {% if perms.dcim.change_interface %}
-            <a href="{% url 'virtualization:interface_edit' pk=iface.pk %}" class="btn btn-info btn-xs" title="Edit interface">
-                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-        {% if perms.dcim.delete_interface %}
-            <a href="{% url 'virtualization:interface_delete' pk=iface.pk %}" class="btn btn-danger btn-xs" title="Delete interface">
-                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-    </td>
-</tr>
-{% for ip in iface.ip_addresses.all %}
-    <tr class="ipaddress">
-        {% if selectable and perms.dcim.change_interface or perms.dcim.delete_interface %}
-            <td></td>
-        {% endif %}
-        <td>
-            <a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
-            {% if ip.description %}
-                <i class="fa fa-fw fa-comment-o" title="{{ ip.description }}"></i>
-            {% endif %}
-            {% if vm.primary_ip4 == ip or vm.primary_ip6 == ip %}
-                <span class="label label-success">Primary</span>
-            {% endif %}
-        </td>
-        <td class="text-right">
-            {% if ip.vrf %}
-                <a href="{% url 'ipam:vrf' pk=ip.vrf.pk %}">{{ ip.vrf }}</a>
-            {% else %}
-                <span class="text-muted">Global</span>
-            {% endif %}
-        </td>
-        <td>
-            <span class="label label-{{ ip.get_status_class }}">{{ ip.get_status_display }}</span>
-        </td>
-        <td class="text-right">
-            {% if perms.ipam.change_ipaddress %}
-                <a href="{% url 'ipam:ipaddress_edit' pk=ip.pk %}?return_url={{ vm.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={{ vm.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 %}

netbox/templates/virtualization/virtualmachine.html

@@ -41,7 +41,7 @@
 <h1>{% block title %}{{ vm }}{% endblock %}</h1>
 {% include 'inc/created_updated.html' with obj=vm %}
 <div class="row">
-	<div class="col-md-5">
+	<div class="col-md-6">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Virtual Machine</strong>
@@ -123,6 +123,21 @@
                 </tr>
             </table>
         </div>
+        {% include 'inc/custom_fields_panel.html' with custom_fields=vm.get_custom_fields %}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <strong>Comments</strong>
+            </div>
+            <div class="panel-body">
+                {% if vm.comments %}
+                    {{ vm.comments|gfm }}
+                {% else %}
+                    <span class="text-muted">None</span>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+	<div class="col-md-6">
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>Cluster</strong>
@@ -204,21 +219,10 @@
                 </div>
             {% endif %}
         </div>
-        {% include 'inc/custom_fields_panel.html' with custom_fields=vm.get_custom_fields %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Comments</strong>
-            </div>
-            <div class="panel-body">
-                {% if vm.comments %}
-                    {{ vm.comments|gfm }}
-                {% else %}
-                    <span class="text-muted">None</span>
-                {% endif %}
-            </div>
-        </div>
     </div>
-    <div class="col-md-7">
+</div>
+<div class="row">
+    <div class="col-md-12">
         {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
             <form method="post">
             {% csrf_token %}
@@ -244,11 +248,23 @@
                 </div>
             </div>
             <table id="interfaces_table" class="table table-hover panel-body component-list">
+                <tr class="table-headings">
+                    {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
+                        <th></th>
+                    {% endif %}
+                    <th>Name</th>
+                    <th>LAG</th>
+                    <th>Description</th>
+                    <th>MTU</th>
+                    <th>MAC Address</th>
+                    <th colspan="2">Connection</th>
+                    <th></th>
+                </tr>
                 {% for iface in interfaces %}
-                    {% include 'virtualization/inc/interface.html' with selectable=True %}
+                    {% include 'dcim/inc/interface.html' with device=vm %}
                 {% empty %}
                     <tr>
-                        <td colspan="4">No interfaces defined</td>
+                        <td colspan="6">No interfaces defined</td>
                     </tr>
                 {% endfor %}
             </table>