Cleaned up component tables and checkbox toggling

netbox/dcim/views.py

@@ -510,29 +510,29 @@ class DeviceTypeView(View):
         # Component tables
         consoleport_table = tables.ConsolePortTemplateTable(
             natsorted(ConsolePortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
-            show_header=False
+            orderable=False
         )
         consoleserverport_table = tables.ConsoleServerPortTemplateTable(
             natsorted(ConsoleServerPortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
-            show_header=False
+            orderable=False
         )
         powerport_table = tables.PowerPortTemplateTable(
             natsorted(PowerPortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
-            show_header=False
+            orderable=False
         )
         poweroutlet_table = tables.PowerOutletTemplateTable(
             natsorted(PowerOutletTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
-            show_header=False
+            orderable=False
         )
         interface_table = tables.InterfaceTemplateTable(
             list(InterfaceTemplate.objects.order_naturally(
                 devicetype.interface_ordering
             ).filter(device_type=devicetype)),
-            show_header=False
+            orderable=False
         )
         devicebay_table = tables.DeviceBayTemplateTable(
             natsorted(DeviceBayTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
-            show_header=False
+            orderable=False
         )
         if request.user.has_perm('dcim.change_devicetype'):
             consoleport_table.columns.show('pk')

netbox/project-static/css/base.css

@@ -121,7 +121,7 @@ input[name="pk"] {
 }
 
 /* Tables */
-.table > tbody > tr > th.pk, .table > tbody > tr > td.pk {
+th.pk, td.pk {
     padding-bottom: 6px;
     padding-top: 10px;
     width: 30px;

netbox/project-static/js/forms.js

@@ -1,14 +1,24 @@
 $(document).ready(function() {
 
-    // "Toggle all" checkbox (table header)
-    $('#toggle_all').click(function() {
-        $('td input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
+    // "Toggle" checkbox for object lists (PK column)
+    $('input:checkbox.toggle').click(function() {
+        $(this).closest('table').find('input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
+
+        // Show the "select all" box if present
         if ($(this).is(':checked')) {
             $('#select_all_box').removeClass('hidden');
         } else {
             $('#select_all').prop('checked', false);
         }
     });
+
+    // Uncheck the "toggle" and "select all" checkboxes if an item is unchecked
+    $('input:checkbox[name=pk]').click(function (event) {
+        if (!$(this).attr('checked')) {
+            $('input:checkbox.toggle, #select_all').prop('checked', false);
+        }
+    });
+
     // Enable hidden buttons when "select all" is checked
     $('#select_all').click(function() {
         if ($(this).is(':checked')) {
@@ -17,21 +27,6 @@ $(document).ready(function() {
             $('#select_all_box').find('button').prop('disabled', 'disabled');
         }
     });
-    // Uncheck the "toggle all" checkbox if an item is unchecked
-    $('input:checkbox[name=pk]').click(function (event) {
-        if (!$(this).attr('checked')) {
-            $('#select_all, #toggle_all').prop('checked', false);
-        }
-    });
-
-    // Simple "Toggle all" button (panel)
-    $('button.toggle').click(function() {
-        var selected = $(this).attr('selected');
-        $(this).closest('form').find('input:checkbox[name=pk]').prop('checked', !selected);
-        $(this).attr('selected', !selected);
-        $(this).children('span').toggleClass('glyphicon-unchecked glyphicon-check');
-        return false;
-    });
 
     // Slugify
     function slugify(s, num_chars) {

netbox/templates/dcim/device.html

@@ -376,27 +376,27 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Device Bays</strong>
-                    <div class="pull-right">
-                        {% if perms.dcim.change_devicebay and device_bays|length > 1 %}
-                            <button class="btn btn-default btn-xs toggle">
-                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                            </button>
-                        {% endif %}
-                        {% if perms.dcim.add_devicebay and device_bays|length > 10 %}
-                            <a href="{% url 'dcim:devicebay_add' pk=device.pk %}" class="btn btn-primary btn-xs">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add device bays
-                            </a>
-                        {% endif %}
-                    </div>
                 </div>
-                <table class="table table-hover panel-body component-list">
-                    {% for devicebay in device_bays %}
-                        {% include 'dcim/inc/devicebay.html' %}
-                    {% empty %}
+                <table class="table table-hover table-headings panel-body component-list">
+                    <thead>
                         <tr>
-                            <td colspan="4">No device bays defined</td>
+                            {% if perms.dcim.change_devicebay or perms.dcim.delete_devicebay %}
+                                <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
+                            {% endif %}
+                            <th>Name</th>
+                            <th colspan="2">Installed Device</th>
+                            <th></th>
                         </tr>
-                    {% endfor %}
+                    </thead>
+                    <tbody>
+                        {% for devicebay in device_bays %}
+                            {% include 'dcim/inc/devicebay.html' %}
+                        {% empty %}
+                            <tr>
+                                <td colspan="4" class="text-center text-muted">&mdash; No device bays defined &mdash;</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
                 </table>
                 {% if perms.dcim.add_devicebay or perms.dcim.delete_devicebay %}
                     <div class="panel-footer">
@@ -433,38 +433,32 @@
                         <button class="btn btn-default btn-xs toggle-ips" selected="selected">
                             <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
                         </button>
-                        {% if perms.dcim.change_interface and interfaces|length > 1 %}
-                            <button class="btn btn-default btn-xs toggle">
-                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                            </button>
-                        {% endif %}
-                        {% if perms.dcim.add_interface and interfaces|length > 10 %}
-                            <a href="{% url 'dcim:interface_add' pk=device.pk %}" class="btn btn-primary btn-xs">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
-                            </a>
-                        {% endif %}
                     </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' %}
-                    {% empty %}
+                <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
+                    <thead>
                         <tr>
-                            <td colspan="8">No interfaces defined</td>
+                            {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
+                                <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></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>
-                    {% endfor %}
+                    </thead>
+                    <tbody>
+                        {% for iface in interfaces %}
+                            {% include 'dcim/inc/interface.html' %}
+                        {% empty %}
+                            <tr>
+                                <td colspan="8" class="text-center text-muted">&mdash; No interfaces defined &mdash;</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
                 </table>
                 {% if perms.dcim.add_interface or perms.dcim.delete_interface %}
                     <div class="panel-footer">
@@ -506,35 +500,27 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Console Server Ports</strong>
-                    <div class="pull-right">
-                        {% if perms.dcim.change_consoleserverport and cs_ports|length > 1 %}
-                            <button class="btn btn-default btn-xs toggle">
-                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                            </button>
-                        {% endif %}
-                        {% if perms.dcim.add_consoleserverport and cs_ports|length > 10 %}
-                            <a href="{% url 'dcim:consoleserverport_add' pk=device.pk %}" class="btn btn-primary btn-xs">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add console server ports
-                            </a>
-                        {% endif %}
-                    </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' %}
-                    {% empty %}
+                <table class="table table-hover table-headings panel-body component-list">
+                    <thead>
                         <tr>
-                            <td colspan="4">No console server ports defined</td>
+                            {% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
+                                <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
+                            {% endif %}
+                            <th>Name</th>
+                            <th colspan="2">Connection</th>
+                            <th></th>
                         </tr>
-                    {% endfor %}
+                    </thead>
+                    <tbody>
+                        {% for csp in cs_ports %}
+                            {% include 'dcim/inc/consoleserverport.html' %}
+                        {% empty %}
+                            <tr>
+                                <td colspan="4" class="text-center text-muted">&mdash; No console server ports defined &mdash;</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
                 </table>
                 {% if perms.dcim.add_consoleserverport or perms.dcim.delete_consoleserverport %}
                     <div class="panel-footer">
@@ -571,35 +557,27 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Power Outlets</strong>
-                    <div class="pull-right">
-                        {% if perms.dcim.change_poweroutlet and cs_ports|length > 1 %}
-                            <button class="btn btn-default btn-xs toggle">
-                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                            </button>
-                        {% endif %}
-                        {% if perms.dcim.add_poweroutlet and power_outlets|length > 10 %}
-                            <a href="{% url 'dcim:poweroutlet_add' pk=device.pk %}" class="btn btn-primary btn-xs">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power outlets
-                            </a>
-                        {% endif %}
-                    </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' %}
-                    {% empty %}
+                <table class="table table-hover table-headings panel-body component-list">
+                    <thead>
                         <tr>
-                            <td colspan="4">No power outlets defined</td>
-                        </tr> text-nowrap
-                    {% endfor %}
+                            {% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
+                                <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
+                            {% endif %}
+                            <th>Name</th>
+                            <th colspan="2">Connection</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for po in power_outlets %}
+                            {% include 'dcim/inc/poweroutlet.html' %}
+                        {% empty %}
+                            <tr>
+                                <td colspan="4" class="text-center text-muted">&mdash; No power outlets defined &mdash;</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
                 </table>
                 {% if perms.dcim.add_poweroutlet or perms.dcim.delete_poweroutlet %}
                     <div class="panel-footer">

netbox/templates/dcim/inc/devicebay.html

@@ -5,7 +5,7 @@
         </td>
     {% endif %}
     <td>
-        <i class="fa fa-fw fa-{% if devicebay.installed_device %}dot-circle-o{% else %}circle-o{% endif %}"></i> {{ devicebay }}
+        <i class="fa fa-fw fa-{% if devicebay.installed_device %}dot-circle-o{% else %}circle-o{% endif %}"></i> {{ devicebay.name }}
     </td>
     {% if devicebay.installed_device %}
         <td>
@@ -19,7 +19,7 @@
             <span class="text-muted">Vacant</span>
         </td>
     {% endif %}
-    <td colspan="2" class="text-right">
+    <td class="text-right">
         {% if perms.dcim.change_devicebay %}
             {% if devicebay.installed_device %}
                 <a href="{% url 'dcim:devicebay_depopulate' pk=devicebay.pk %}" class="btn btn-danger btn-xs">

netbox/templates/dcim/inc/devicetype_component_table.html

@@ -4,19 +4,6 @@
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>{{ title }}</strong>
-                <div class="pull-right">
-                    {% if table.rows|length > 1 %}
-                        <button class="btn btn-default btn-xs toggle">
-                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                        </button>
-                    {% endif %}
-                    {% if table.rows|length > 10 %}
-                        <a href="{% url add_url pk=devicetype.pk %}{{ add_url_extra }}" class="btn btn-primary btn-xs">
-                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                            Add {{ title }}
-                        </a>
-                    {% endif %}
-                </div>
             </div>
             {% include 'responsive_table.html' %}
             <div class="panel-footer">

netbox/templates/dcim/inc/interface.html

@@ -3,7 +3,7 @@
     {# Checkbox (exclude VC members) #}
     {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
         <td class="pk">
-            {% if iface.device == device %}
+            {% if iface.parent == device %}
                 <input name="pk" type="checkbox" value="{{ iface.pk }}" />
             {% endif %}
         </td>

netbox/templates/virtualization/virtualmachine.html

@@ -235,38 +235,32 @@
                     <button class="btn btn-default btn-xs toggle-ips" selected="selected">
                         <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
                     </button>
-                    {% if perms.dcim.change_interface and interfaces|length > 1 %}
-                        <button class="btn btn-default btn-xs toggle">
-                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
-                        </button>
-                    {% endif %}
-                    {% if perms.dcim.add_interface and interfaces|length > 10 %}
-                        <a href="{% url 'virtualization:interface_add' pk=vm.pk %}" class="btn btn-primary btn-xs">
-                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
-                        </a>
-                    {% endif %}
                 </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 device=vm %}
-                {% empty %}
+            <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
+                <thead>
                     <tr>
-                        <td colspan="6">No interfaces defined</td>
+                        {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
+                            <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></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>
-                {% endfor %}
+                </thead>
+                <tbody>
+                    {% for iface in interfaces %}
+                        {% include 'dcim/inc/interface.html' with device=vm %}
+                    {% empty %}
+                        <tr>
+                            <td colspan="6">No interfaces defined</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
             </table>
             {% if perms.dcim.add_interface or perms.dcim.delete_interface %}
                 <div class="panel-footer">

netbox/utilities/tables.py

@@ -30,4 +30,4 @@ class ToggleColumn(tables.CheckBoxColumn):
 
     @property
     def header(self):
-        return mark_safe('<input type="checkbox" id="toggle_all" title="Toggle all" />')
+        return mark_safe('<input type="checkbox" class="toggle" title="Toggle all" />')