Improve object list layout (#6907)

* Split object list and filters into tabs

* Use object_list template for connections, rack elevations

* Include custom field filters in grouped filter form

* Annotate number of applied filters on tab

* Rearrange table controls

netbox/dcim/views.py

@@ -2541,6 +2541,7 @@ class ConsoleConnectionsListView(generic.ObjectListView):
     filterset_form = forms.ConsoleConnectionFilterForm
     table = tables.ConsoleConnectionTable
     template_name = 'dcim/connections_list.html'
+    action_buttons = ('export',)
 
     def extra_context(self):
         return {
@@ -2554,6 +2555,7 @@ class PowerConnectionsListView(generic.ObjectListView):
     filterset_form = forms.PowerConnectionFilterForm
     table = tables.PowerConnectionTable
     template_name = 'dcim/connections_list.html'
+    action_buttons = ('export',)
 
     def extra_context(self):
         return {
@@ -2567,6 +2569,7 @@ class InterfaceConnectionsListView(generic.ObjectListView):
     filterset_form = forms.InterfaceConnectionFilterForm
     table = tables.InterfaceConnectionTable
     template_name = 'dcim/connections_list.html'
+    action_buttons = ('export',)
 
     def extra_context(self):
         return {

netbox/extras/forms.py

@@ -519,12 +519,14 @@ class CustomFieldModelFilterForm(forms.Form):
         super().__init__(*args, **kwargs)
 
         # Add all applicable CustomFields to the form
+        self.custom_field_filters = []
         custom_fields = CustomField.objects.filter(content_types=self.obj_type).exclude(
             filter_logic=CustomFieldFilterLogicChoices.FILTER_DISABLED
         )
         for cf in custom_fields:
             field_name = 'cf_{}'.format(cf.name)
             self.fields[field_name] = cf.to_form_field(set_initial=True, enforce_required=False)
+            self.custom_field_filters.append(field_name)
 
 
 #

netbox/templates/dcim/connections_list.html

@@ -1,24 +1,34 @@
-{% extends 'base/layout.html' %}
+{% extends 'generic/object_list.html' %}
 {% load buttons %}
+{% load helpers %}
 {% load render_table from django_tables2 %}
 
 {% block title %}{{ title }}{% endblock %}
 
-{% block extra_controls %}{% export_button content_type %}{% endblock %}
+{% block content-wrapper %}
+  <div class="tab-content">
 
-{% block content %}
+    {# Conncetions list #}
-    <div class="row mb-3">
+    <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
-        <div class="col col-md-7 col-lg-8 col-xl-9 col-xxl-10">
       {% include 'inc/table_controls.html' %}
 
+      <div class="card">
+        <div class="card-body">
           <div class="table-responsive">
             {% render_table table 'inc/table.html' %}
           </div>
+        </div>
+      </div>
 
       {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
     </div>
+
+    {# Filter form #}
     {% if filter_form %}
+      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
         {% include 'inc/filter_list.html' %}
-        {% endif %}
       </div>
-{% endblock %}
+    {% endif %}
+
+  </div>
+{% endblock content-wrapper %}

netbox/templates/dcim/rack_elevation_list.html

@@ -1,4 +1,4 @@
-{% extends 'base/layout.html' %}
+{% extends 'generic/object_list.html' %}
 {% load helpers %}
 {% load static %}
 
@@ -22,9 +22,11 @@
     </div>
 {% endblock %}
 
-{% block content %}
+{% block content-wrapper %}
-    <div class="row">
+  <div class="tab-content">
-        <div class="col col-md-7 col-lg-8 col-xl-9 col-xxl-10">
+
+    {# Rack elevations #}
+    <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
       {% if page %}
           <div style="white-space: nowrap; overflow-x: scroll;">
               {% for rack in page %}
@@ -57,6 +59,13 @@
           <p>No Racks Found</p>
       {% endif %}
     </div>
+
+    {# Filter form #}
+    {% if filter_form %}
+      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
         {% include 'inc/filter_list.html' %}
       </div>
-{% endblock %}
+    {% endif %}
+
+  </div>
+{% endblock content-wrapper %}

netbox/templates/generic/object_list.html

@@ -4,10 +4,8 @@
 {% load render_table from django_tables2 %}
 {% load static %}
 
-{% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}
-
 {% block controls %}
-<div class="controls">
+  <div class="controls">
     <div class="control-group">
       {% block extra_controls %}{% endblock %}
       {% if permissions.add and 'add' in action_buttons %}
@@ -20,12 +18,39 @@
           {% export_button content_type %}
       {% endif %}
     </div>
-</div>
+  </div>
 {% endblock controls %}
 
-{% block content %}
+{% block tabs %}
-{% if table.paginator.num_pages > 1 %}
+  <ul class="nav nav-tabs px-3">
-{% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
+    {% block tab_items %}
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
+          {% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}
+          {% badge table.page.paginator.count %}
+        </button>
+      </li>
+      {% if filter_form %}
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="filters-form-tab" data-bs-toggle="tab" data-bs-target="#filters-form" type="button" role="tab" aria-controls="object-list" aria-selected="false">
+            Filters
+            {% if filter_form %}{% badge filter_form.changed_data|length %}{% endif %}
+          </button>
+        </li>
+      {% endif %}
+    {% endblock tab_items %}
+  </ul>
+{% endblock tabs %}
+
+{% block content-wrapper %}
+  <div class="tab-content">
+
+    {# Object list #}
+    <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
+      {% if table.paginator.num_pages > 1 %}
+
+        {# "Select all" form #}
+        {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
           <div id="select-all-box" class="d-none card noprint">
             <form method="post" class="form col-md-12">
               {% csrf_token %}
@@ -51,23 +76,28 @@
               </div>
             </form>
           </div>
-{% endwith %}
+        {% endwith %}
-{% endif %}
+      {% endif %}
 
-{# Object table #}
+      {# Object table controls #}
-<div class="row">
-  <div class="col {% if filter_form %}col-md-7 col-lg-8 col-xl-9 col-xxl-10{% else %}col-12{% endif %}">
-    {# Object list filter, table config #}
       {% include 'inc/table_controls.html' with table_modal="ObjectTable_config" %}
 
-    {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
-      {% if permissions.change or permissions.delete %}
       <form method="post" class="form form-horizontal">
         {% csrf_token %}
         <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
+
+        {# Object table #}
+        <div class="card">
+          <div class="card-body">
             <div class="table-responsive">
               {% render_table table 'inc/table.html' %}
             </div>
+          </div>
+        </div>
+
+        {# Form buttons #}
+        {% if permissions.change or permissions.delete %}
+          {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
             <div class="noprint bulk-buttons">
               <div class="bulk-button-group">
                 {% block bulk_buttons %}{% endblock %}
@@ -83,18 +113,23 @@
                 {% endif %}
               </div>
             </div>
-        </form>
-      {% else %}
-        <div class="table-responsive">
-          {% render_table table 'inc/table.html' %}
-        </div>
-      {% endif %}
           {% endwith %}
+        {% endif %}
+
+      </form>
+
+      {# Paginator #}
       {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
     </div>
+
+    {# Filter form #}
     {% if filter_form %}
+      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
         {% include 'inc/filter_list.html' %}
+      </div>
     {% endif %}
-</div>
+  </div>
-{% table_config_form table table_name="ObjectTable" %}
+
-{% endblock content %}
+  {# Table config form #}
+  {% table_config_form table table_name="ObjectTable" %}
+{% endblock content-wrapper %}

netbox/templates/inc/filter_list.html

@@ -1,12 +1,8 @@
 {% load form_helpers %}
 {% load helpers %}
 
-<div class="col col-md-5 col-lg-4 col-xl-3 col-xxl-2 noprint">
+<form action="." method="get">
-    <form action="." method="get">
+  <div class="card">
-        <div class="card small">
-            <h5 class="card-header">
-                Field Filters
-            </h5>
     <div class="card-body overflow-visible d-flex flex-wrap justify-content-between py-3">
           {% for field in filter_form.hidden_fields %}
               {{ field }}
@@ -16,38 +12,23 @@
                   <div class="col col-12">
                       {% for name in group %}
                           {% with field=filter_form|get_item:name %}
-                                        {% if field|widget_type == 'checkboxinput' %}
+                              {% render_field field %}
-                                            <div class="form-check mb-3">
-                                                <label class="form-check-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
-                                                {{ field }}
-                                            </div>
-                                        {% else %}
-                                            <div class="mb-3 px-2">
-                                                <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
-                                                {{ field }}
-                                            </div>
-                                        {% endif %}
                           {% endwith %}
                       {% endfor %}
                   </div>
-                            {% if forloop.counter != filter_form.field_groups|length %}
                   <hr class="card-divider mt-0" />
-                            {% endif %}
+              {% endfor %}
+              {% for name in filter_form.custom_field_filters %}
+                <div class="col col-12">
+                  {% with field=filter_form|get_item:name %}
+                    {% render_field field %}
+                  {% endwith %}
+                </div>
               {% endfor %}
           {% else %}
               {% for field in filter_form.visible_fields %}
                   <div class="col col-12">
-                                {% if field|widget_type == 'checkboxinput' %}
+                      {% render_field field %}
-                                    <div class="form-check mb-3">
-                                        <label class="form-check-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
-                                        {{ field }}
-                                    </div>
-                                {% else %}
-                                    <div class="mb-3 px-2">
-                                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
-                                    {{ field }}
-                                    </div>
-                                {% endif %}
                   </div>
               {% endfor %}
           {% endif %}
@@ -61,5 +42,4 @@
         </button>
     </div>
   </div>
-    </form>
+</form>
-</div>

netbox/templates/inc/table_controls.html

@@ -1,19 +1,4 @@
 <div class="row mb-3 justify-content-between">
-    <div class="col col-md-2 mb-0 d-flex noprint table-controls">
-        {% if request.user.is_authenticated and table_modal %}
-            <div class="input-group input-group-sm">
-                <button
-                    type="button"
-                    data-bs-toggle="modal"
-                    title="Configure Table"
-                    data-bs-target="#{{ table_modal }}"
-                    class="btn btn-sm btn-outline-dark"
-                >
-                    <i class="mdi mdi-cog"></i> Configure Table
-                </button>
-            </div>
-        {% endif %}
-    </div>
     <div class="col col-12 col-lg-4 my-3 my-lg-0 d-flex noprint table-controls">
         <div class="input-group input-group-sm">
             <input
@@ -24,4 +9,17 @@
             />
         </div>
     </div>
+    <div class="col col-md-2 mb-0 d-flex justify-content-end noprint table-controls">
+        {% if request.user.is_authenticated and table_modal %}
+            <button
+                type="button"
+                data-bs-toggle="modal"
+                title="Configure Table"
+                data-bs-target="#{{ table_modal }}"
+                class="btn btn-sm btn-outline-dark"
+            >
+                <i class="mdi mdi-cog"></i> Configure Table
+            </button>
+        {% endif %}
+    </div>
 </div>