Convert device front ports list to table

netbox/dcim/tables/devices.py

@@ -11,8 +11,8 @@ from utilities.tables import (
     TagColumn, ToggleColumn,
 )
 from .template_code import (
-    CABLETERMINATION, CONSOLEPORT_BUTTONS, CONSOLESERVERPORT_BUTTONS, DEVICE_LINK, INTERFACE_IPADDRESSES,
-    INTERFACE_TAGGED_VLANS, POWEROUTLET_BUTTONS, POWERPORT_BUTTONS,
+    CABLETERMINATION, CONSOLEPORT_BUTTONS, CONSOLESERVERPORT_BUTTONS, DEVICE_LINK, FRONTPORT_BUTTONS,
+    INTERFACE_IPADDRESSES, INTERFACE_TAGGED_VLANS, POWEROUTLET_BUTTONS, POWERPORT_BUTTONS,
 )
 
 __all__ = (
@@ -21,6 +21,7 @@ __all__ = (
     'DeviceBayTable',
     'DeviceConsolePortTable',
     'DeviceConsoleServerPortTable',
+    'DeviceFrontPortTable',
     'DeviceImportTable',
     'DevicePowerPortTable',
     'DevicePowerOutletTable',
@@ -420,6 +421,32 @@ class FrontPortTable(DeviceComponentTable, CableTerminationTable):
         default_columns = ('pk', 'device', 'name', 'label', 'type', 'rear_port', 'rear_port_position', 'description')
 
 
+class DeviceFrontPortTable(FrontPortTable):
+    name = tables.TemplateColumn(
+        template_code='<i class="fa fa-square{% if not record.cable %}-o{% endif %}"></i> '
+                      '<a href="{{ record.get_absolute_url }}">{{ value }}</a>'
+    )
+    actions = ButtonsColumn(
+        model=FrontPort,
+        buttons=('edit', 'delete'),
+        prepend_template=FRONTPORT_BUTTONS
+    )
+
+    class Meta(DeviceComponentTable.Meta):
+        model = FrontPort
+        fields = (
+            'pk', 'name', 'label', 'type', 'rear_port', 'rear_port_position', 'description', 'cable', 'cable_peer',
+            'connection', 'tags', 'actions',
+        )
+        default_columns = (
+            'pk', 'name', 'label', 'type', 'rear_port', 'rear_port_position', 'description', 'cable', 'cable_peer',
+            'actions',
+        )
+        row_attrs = {
+            'class': lambda record: record.cable.get_status_class() if record.cable else ''
+        }
+
+
 class RearPortTable(DeviceComponentTable, CableTerminationTable):
     tags = TagColumn(
         url_name='dcim:rearport_list'

netbox/dcim/tables/template_code.py

@@ -137,3 +137,23 @@ POWEROUTLET_BUTTONS = """
     </a>
 {% endif %}
 """
+
+FRONTPORT_BUTTONS = """
+{% if frontport.cable %}
+    {% include 'dcim/inc/cable_toggle_buttons.html' with cable=record.cable %}
+{% elif perms.dcim.add_cable %}
+    <span class="dropdown">
+        <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-right">
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='interface' %}?return_url={{ device.get_absolute_url }}">Interface</a></li>
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='console-server-port' %}?return_url={{ device.get_absolute_url }}">Console Server Port</a></li>
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='console-port' %}?return_url={{ device.get_absolute_url }}">Console Port</a></li>
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='front-port' %}?return_url={{ device.get_absolute_url }}">Front Port</a></li>
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='rear-port' %}?return_url={{ device.get_absolute_url }}">Rear Port</a></li>
+            <li><a href="{% url 'dcim:frontport_connect' termination_a_id=record.pk termination_b_type='circuit-termination' %}?return_url={{ device.get_absolute_url }}">Circuit Termination</a></li>
+        </ul>
+    </span>
+{% endif %}
+"""

netbox/dcim/views.py

@@ -1061,6 +1061,9 @@ class DeviceView(ObjectView):
         frontports = FrontPort.objects.restrict(request.user, 'view').filter(device=device).prefetch_related(
             'rear_port', 'cable',
         )
+        frontport_table = tables.DeviceFrontPortTable(frontports, orderable=False)
+        if request.user.has_perm('dcim.change_frontport') or request.user.has_perm('dcim.delete_frontport'):
+            frontport_table.columns.show('pk')
 
         # Rear ports
         rearports = RearPort.objects.restrict(request.user, 'view').filter(device=device).prefetch_related('cable')
@@ -1097,7 +1100,7 @@ class DeviceView(ObjectView):
             'powerport_table': powerport_table,
             'poweroutlet_table': poweroutlet_table,
             'interfaces': interfaces,
-            'frontports': frontports,
+            'frontport_table': frontport_table,
             'rearports': rearports,
             'devicebays': devicebays,
             'inventoryitems': inventoryitems,

netbox/templates/dcim/device.html

@@ -125,7 +125,7 @@
                     <a href="#interfaces" role="tab" data-toggle="tab">Interfaces {% badge interfaces|length %}</a>
                 </li>
                 <li role="presentation">
-                    <a href="#frontports" role="tab" data-toggle="tab">Front Ports {% badge frontports|length %}</a>
+                    <a href="#frontports" role="tab" data-toggle="tab">Front Ports {% badge frontport_table.rows|length %}</a>
                 </li>
                 <li role="presentation">
                     <a href="#rearports" role="tab" data-toggle="tab">Rear Ports {% badge rearports|length %}</a>
@@ -542,8 +542,8 @@
                                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
                                         </a>
                                     </div>
-                                    <div class="clearfix"></div>
                                 {% endif %}
+                                <div class="clearfix"></div>
                              </div>
                         </div>
                     </form>
@@ -555,28 +555,7 @@
                             <div class="panel-heading">
                                 <strong>Front Ports</strong>
                             </div>
-                            <table class="table table-hover table-headings panel-body component-list">
-                                <thead>
-                                    <tr>
-                                        {% if perms.dcim.change_frontport or perms.dcim.delete_frontport %}
-                                            <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
-                                        {% endif %}
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Rear Port</th>
-                                        <th>Position</th>
-                                        <th>Description</th>
-                                        <th>Cable</th>
-                                        <th colspan="2">Cable Termination</th>
-                                        <th></th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {% for frontport in frontports %}
-                                        {% include 'dcim/inc/frontport.html' %}
-                                    {% endfor %}
-                                </tbody>
-                            </table>
+                            {% include 'responsive_table.html' with table=frontport_table %}
                             <div class="panel-footer noprint">
                                 {% if frontports and perms.dcim.change_frontport %}
                                     <button type="submit" name="_rename" formaction="{% url 'dcim:frontport_bulk_rename' %}?return_url={{ device.get_absolute_url }}" class="btn btn-warning btn-xs">
@@ -600,8 +579,8 @@
                                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add front ports
                                         </a>
                                     </div>
-                                    <div class="clearfix"></div>
                                 {% endif %}
+                                <div class="clearfix"></div>
                             </div>
                         </div>
                     </form>
@@ -657,8 +636,8 @@
                                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add rear ports
                                         </a>
                                     </div>
-                                    <div class="clearfix"></div>
                                 {% endif %}
+                                <div class="clearfix"></div>
                             </div>
                         </div>
                     </form>
@@ -804,8 +783,8 @@
                                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power outlets
                                         </a>
                                     </div>
-                                    <div class="clearfix"></div>
                                 {% endif %}
+                                <div class="clearfix"></div>
                             </div>
                         </div>
                     </form>
@@ -857,8 +836,8 @@
                                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add device bays
                                         </a>
                                     </div>
-                                    <div class="clearfix"></div>
                                 {% endif %}
+                                <div class="clearfix"></div>
                              </div>
                         </div>
                     </form>

netbox/templates/dcim/inc/frontport.html

@@ -1,72 +0,0 @@
-{% load helpers %}
-<tr class="frontport{% if frontport.cable %} {{ frontport.cable.get_status_class }}{% endif %}">
-
-    {# Checkbox #}
-    {% if perms.dcim.change_frontport or perms.dcim.delete_frontport %}
-        <td class="pk">
-            <input name="pk" type="checkbox" value="{{ frontport.pk }}" />
-        </td>
-    {% endif %}
-
-    {# Name #}
-    <td>
-        <i class="fa fa-fw fa-square{% if not frontport.cable %}-o{% endif %}"></i>
-        <a href="{{ frontport.get_absolute_url }}">{{ frontport }}</a>
-    </td>
-
-    {# Type #}
-    <td>{{ frontport.get_type_display }}</td>
-
-    {# Rear port #}
-    <td>{{ frontport.rear_port }}</td>
-    <td>{{ frontport.rear_port_position }}</td>
-
-    {# Description #}
-    <td>{{ frontport.description|placeholder }}</td>
-
-    {# Cable #}
-    {% if frontport.cable %}
-        <td>
-            <a href="{{ frontport.cable.get_absolute_url }}">{{ frontport.cable }}</a>
-            <a href="{% url 'dcim:frontport_trace' pk=frontport.pk %}" class="btn btn-primary btn-xs" title="Trace">
-                <i class="fa fa-share-alt" aria-hidden="true"></i>
-            </a>
-        </td>
-        {% include 'dcim/inc/cabletermination.html' with termination=frontport.get_cable_peer %}
-    {% else %}
-        <td colspan="3">
-            <span class="text-muted">Not connected</span>
-        </td>
-    {% endif %}
-
-    {# Actions #}
-    <td class="text-right noprint">
-        {% if frontport.cable %}
-            {% include 'dcim/inc/cable_toggle_buttons.html' with cable=frontport.cable %}
-        {% elif perms.dcim.add_cable %}
-            <span class="dropdown">
-                <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-right">
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='interface' %}?return_url={{ device.get_absolute_url }}">Interface</a></li>
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='console-server-port' %}?return_url={{ device.get_absolute_url }}">Console Server Port</a></li>
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='console-port' %}?return_url={{ device.get_absolute_url }}">Console Port</a></li>
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='front-port' %}?return_url={{ device.get_absolute_url }}">Front Port</a></li>
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='rear-port' %}?return_url={{ device.get_absolute_url }}">Rear Port</a></li>
-                    <li><a href="{% url 'dcim:frontport_connect' termination_a_id=frontport.pk termination_b_type='circuit-termination' %}?return_url={{ device.get_absolute_url }}">Circuit Termination</a></li>
-                </ul>
-            </span>
-        {% endif %}
-        {% if perms.dcim.change_frontport %}
-            <a href="{% url 'dcim:frontport_edit' pk=frontport.pk %}?return_url={{ device.get_absolute_url }}" title="Edit port" class="btn btn-info btn-xs">
-                <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-        {% if perms.dcim.delete_frontport %}
-            <a href="{% url 'dcim:frontport_delete' pk=frontport.pk %}?return_url={{ device.get_absolute_url }}" title="Delete port" class="btn btn-danger btn-xs">
-                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
-            </a>
-        {% endif %}
-    </td>
-</tr>