Convert VM interfaces list to table

netbox/templates/virtualization/inc/vminterface.html

@@ -1,136 +0,0 @@
-{% load helpers %}
-<tr class="interface{% if not iface.enabled %} danger{% endif %}" id="interface_{{ iface.name }}">
-
-    {# Checkbox #}
-    {% if perms.virtualization.change_vminterface or perms.virtualization.delete_vminterface %}
-        <td class="pk">
-            <input name="pk" type="checkbox" value="{{ iface.pk }}" />
-        </td>
-    {% endif %}
-
-    {# Name #}
-    <td>
-        <a href="{{ iface.get_absolute_url }}">{{ iface }}</a>
-    </td>
-
-    {# MAC address #}
-    <td class="text-monospace">
-        {{ iface.mac_address|default:"&mdash;" }}
-    </td>
-
-    {# MTU #}
-    <td>{{ iface.mtu|default:"&mdash;" }}</td>
-
-    {# 802.1Q mode #}
-    <td>{{ iface.get_mode_display|default:"&mdash;" }}</td>
-
-    {# Description/tags #}
-    <td>
-        {% if iface.description %}
-            {{ iface.description }}<br/>
-        {% endif %}
-        {% for tag in iface.tags.all %}
-            {% tag tag %}
-        {% empty %}
-            {% if not iface.description %}&mdash;{% endif %}
-        {% endfor %}
-    </td>
-
-    {# Buttons #}
-    <td class="text-right text-nowrap noprint">
-        {% if perms.ipam.add_ipaddress %}
-            <a href="{% url 'ipam:ipaddress_add' %}?vminterface={{ iface.pk }}&return_url={{ virtualmachine.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.virtualization.change_vminterface %}
-            <a href="{% url 'virtualization:vminterface_edit' pk=iface.pk %}?return_url={{ virtualmachine.get_absolute_url }}" class="btn btn-info btn-xs" title="Edit interface">
-                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-        {% if perms.virtualization.delete_vminterface %}
-            <a href="{% url 'virtualization:vminterface_delete' pk=iface.pk %}?return_url={{ virtualmachine.get_absolute_url }}" class="btn btn-danger btn-xs" title="Delete interface">
-                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-    </td>
-</tr>
-
-{% with ipaddresses=iface.ip_addresses.all %}
-    {% if ipaddresses %}
-        <tr class="ipaddresses">
-            {# Placeholder #}
-            {% if perms.virtualization.change_vminterface or perms.virtualization.delete_vminterface %}
-                <td></td>
-            {% endif %}
-
-            {# IP addresses table #}
-            <td colspan="9" 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>
-
-                            {# IP address #}
-                            <td>
-                                <a href="{% url 'ipam:ipaddress' pk=ip.pk %}">{{ ip }}</a>
-                            </td>
-
-                            {# Primary/status/role #}
-                            <td>
-                                {% if virtualmachine.primary_ip4 == ip or virtualmachine.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 noprint">
-                                {% if perms.ipam.change_ipaddress %}
-                                    <a href="{% url 'ipam:ipaddress_edit' pk=ip.pk %}?return_url={{ virtualmachine.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={{ virtualmachine.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 %}

netbox/templates/virtualization/virtualmachine.html

@@ -280,30 +280,7 @@
                     <input class="form-control interface-filter" type="text" placeholder="Filter" title="RegEx-enabled" style="height: 23px" />
                 </div>
             </div>
-            <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
-                <thead>
-                    <tr>
-                        {% if perms.virtualization.change_vminterface or perms.virtualization.delete_vminterface %}
-                            <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
-                        {% endif %}
-                        <th>Name</th>
-                        <th>MAC Address</th>
-                        <th>MTU</th>
-                        <th>Mode</th>
-                        <th>Description</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for iface in interfaces %}
-                        {% include 'virtualization/inc/vminterface.html' %}
-                    {% empty %}
-                        <tr>
-                            <td colspan="8" class="text-center text-muted">&mdash; No interfaces defined &mdash;</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
+            {% include 'responsive_table.html' with table=vminterface_table %}
             {% if perms.virtualization.add_vminterface or perms.virtualization.delete_vminterface %}
                 <div class="panel-footer noprint">
                     {% if interfaces and perms.virtualization.change_vminterface %}

netbox/virtualization/tables.py

@@ -7,6 +7,24 @@ from utilities.tables import (
 )
 from .models import Cluster, ClusterGroup, ClusterType, VirtualMachine, VMInterface
 
+__all__ = (
+    'ClusterTable',
+    'ClusterGroupTable',
+    'ClusterTypeTable',
+    'VirtualMachineDetailTable',
+    'VirtualMachineTable',
+    'VirtualMachineVMInterfaceTable',
+    'VMInterfaceTable',
+)
+
+VMINTERFACE_BUTTONS = """
+{% if perms.ipam.add_ipaddress %}
+    <a href="{% url 'ipam:ipaddress_add' %}?vminterface={{ record.pk }}&return_url={{ virtualmachine.get_absolute_url }}" class="btn btn-xs btn-success" title="Add IP address">
+        <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
+    </a>
+{% endif %}
+"""
+
 
 #
 # Cluster types
@@ -147,3 +165,19 @@ class VMInterfaceTable(BaseInterfaceTable):
             'untagged_vlan', 'tagged_vlans',
         )
         default_columns = ('pk', 'virtual_machine', 'name', 'enabled', 'description')
+
+
+class VirtualMachineVMInterfaceTable(VMInterfaceTable):
+    actions = ButtonsColumn(
+        model=VMInterface,
+        buttons=('edit', 'delete'),
+        prepend_template=VMINTERFACE_BUTTONS
+    )
+
+    class Meta(BaseTable.Meta):
+        model = VMInterface
+        fields = (
+            'pk', 'name', 'enabled', 'mac_address', 'mtu', 'mode', 'description', 'tags', 'ip_addresses',
+            'untagged_vlan', 'tagged_vlans', 'actions',
+        )
+        default_columns = ('pk', 'name', 'enabled', 'mac_address', 'mtu', 'mode', 'description', 'actions')

netbox/virtualization/views.py

@@ -244,11 +244,15 @@ class VirtualMachineView(ObjectView):
         virtualmachine = get_object_or_404(self.queryset, pk=pk)
 
         # Interfaces
-        interfaces = VMInterface.objects.restrict(request.user, 'view').filter(
+        vminterfaces = VMInterface.objects.restrict(request.user, 'view').filter(
             virtual_machine=virtualmachine
         ).prefetch_related(
             Prefetch('ip_addresses', queryset=IPAddress.objects.restrict(request.user))
         )
+        vminterface_table = tables.VirtualMachineVMInterfaceTable(vminterfaces, orderable=False)
+        if request.user.has_perm('virtualization.change_vminterface') or \
+                request.user.has_perm('virtualization.delete_vminterface'):
+            vminterface_table.columns.show('pk')
 
         # Services
         services = Service.objects.restrict(request.user, 'view').filter(
@@ -262,7 +266,7 @@ class VirtualMachineView(ObjectView):
 
         return render(request, 'virtualization/virtualmachine.html', {
             'virtualmachine': virtualmachine,
-            'interfaces': interfaces,
+            'vminterface_table': vminterface_table,
             'services': services,
             'secrets': secrets,
         })