Start converting embedded tables to use HTMX (WIP)

netbox/circuits/views.py

@@ -29,20 +29,6 @@ class ProviderListView(generic.ObjectListView):
 class ProviderView(generic.ObjectView):
     queryset = Provider.objects.all()
 
-    def get_extra_context(self, request, instance):
-        circuits = Circuit.objects.restrict(request.user, 'view').filter(
-            provider=instance
-        ).prefetch_related(
-            'tenant__group', 'termination_a__site', 'termination_z__site',
-            'termination_a__provider_network', 'termination_z__provider_network',
-        )
-        circuits_table = tables.CircuitTable(circuits, user=request.user, exclude=('provider',))
-        circuits_table.configure(request)
-
-        return {
-            'circuits_table': circuits_table,
-        }
-
 
 @register_model_view(Provider, 'edit')
 class ProviderEditView(generic.ObjectEditView):
@@ -93,21 +79,6 @@ class ProviderNetworkListView(generic.ObjectListView):
 class ProviderNetworkView(generic.ObjectView):
     queryset = ProviderNetwork.objects.all()
 
-    def get_extra_context(self, request, instance):
-        circuits = Circuit.objects.restrict(request.user, 'view').filter(
-            Q(termination_a__provider_network=instance.pk) |
-            Q(termination_z__provider_network=instance.pk)
-        ).prefetch_related(
-            'tenant__group', 'termination_a__site', 'termination_z__site',
-            'termination_a__provider_network', 'termination_z__provider_network',
-        )
-        circuits_table = tables.CircuitTable(circuits, user=request.user)
-        circuits_table.configure(request)
-
-        return {
-            'circuits_table': circuits_table,
-        }
-
 
 @register_model_view(ProviderNetwork, 'edit')
 class ProviderNetworkEditView(generic.ObjectEditView):
@@ -156,15 +127,6 @@ class CircuitTypeListView(generic.ObjectListView):
 class CircuitTypeView(generic.ObjectView):
     queryset = CircuitType.objects.all()
 
-    def get_extra_context(self, request, instance):
-        circuits = Circuit.objects.restrict(request.user, 'view').filter(type=instance)
-        circuits_table = tables.CircuitTable(circuits, user=request.user, exclude=('type',))
-        circuits_table.configure(request)
-
-        return {
-            'circuits_table': circuits_table,
-        }
-
 
 @register_model_view(CircuitType, 'edit')
 class CircuitTypeEditView(generic.ObjectEditView):

netbox/dcim/views.py

@@ -581,20 +581,6 @@ class RackRoleListView(generic.ObjectListView):
 class RackRoleView(generic.ObjectView):
     queryset = RackRole.objects.all()
 
-    def get_extra_context(self, request, instance):
-        racks = Rack.objects.restrict(request.user, 'view').filter(role=instance).annotate(
-            device_count=count_related(Device, 'rack')
-        )
-
-        racks_table = tables.RackTable(racks, user=request.user, exclude=(
-            'role', 'get_utilization', 'get_power_utilization',
-        ))
-        racks_table.configure(request)
-
-        return {
-            'racks_table': racks_table,
-        }
-
 
 @register_model_view(RackRole, 'edit')
 class RackRoleEditView(generic.ObjectEditView):
@@ -855,8 +841,6 @@ class ManufacturerView(generic.ObjectView):
     def get_extra_context(self, request, instance):
         device_types = DeviceType.objects.restrict(request.user, 'view').filter(
             manufacturer=instance
-        ).annotate(
-            instance_count=count_related(Device, 'device_type')
         )
         module_types = ModuleType.objects.restrict(request.user, 'view').filter(
             manufacturer=instance
@@ -865,13 +849,10 @@ class ManufacturerView(generic.ObjectView):
             manufacturer=instance
         )
 
-        devicetypes_table = tables.DeviceTypeTable(device_types, user=request.user, exclude=('manufacturer',))
-        devicetypes_table.configure(request)
-
         return {
-            'devicetypes_table': devicetypes_table,
-            'inventory_item_count': inventory_items.count(),
-            'module_type_count': module_types.count(),
+            'devicetype_count': device_types.count(),
+            'inventoryitem_count': inventory_items.count(),
+            'moduletype_count': module_types.count(),
         }
 
 
@@ -1722,19 +1703,6 @@ class DeviceRoleListView(generic.ObjectListView):
 class DeviceRoleView(generic.ObjectView):
     queryset = DeviceRole.objects.all()
 
-    def get_extra_context(self, request, instance):
-        devices = Device.objects.restrict(request.user, 'view').filter(
-            device_role=instance
-        )
-        devices_table = tables.DeviceTable(devices, user=request.user, exclude=('device_role',))
-        devices_table.configure(request)
-
-        return {
-            'devices_table': devices_table,
-            'device_count': Device.objects.filter(device_role=instance).count(),
-            'virtualmachine_count': VirtualMachine.objects.filter(role=instance).count(),
-        }
-
 
 @register_model_view(DeviceRole, 'edit')
 class DeviceRoleEditView(generic.ObjectEditView):
@@ -1793,12 +1761,13 @@ class PlatformView(generic.ObjectView):
         devices = Device.objects.restrict(request.user, 'view').filter(
             platform=instance
         )
-        devices_table = tables.DeviceTable(devices, user=request.user, exclude=('platform',))
-        devices_table.configure(request)
+        virtual_machines = VirtualMachine.objects.restrict(request.user, 'view').filter(
+            platform=instance
+        )
 
         return {
-            'devices_table': devices_table,
-            'virtualmachine_count': VirtualMachine.objects.filter(platform=instance).count()
+            'device_count': devices.count(),
+            'virtualmachine_count': virtual_machines.count()
         }
 
 
@@ -3615,16 +3584,6 @@ class VirtualDeviceContextListView(generic.ObjectListView):
 class VirtualDeviceContextView(generic.ObjectView):
     queryset = VirtualDeviceContext.objects.all()
 
-    def get_extra_context(self, request, instance):
-        interfaces_table = tables.InterfaceTable(instance.interfaces, user=request.user)
-        interfaces_table.configure(request)
-        interfaces_table.columns.hide('device')
-
-        return {
-            'interfaces_table': interfaces_table,
-            'interface_count': instance.interfaces.count(),
-        }
-
 
 @register_model_view(VirtualDeviceContext, 'edit')
 class VirtualDeviceContextEditView(generic.ObjectEditView):

netbox/templates/circuits/circuittype.html

@@ -31,7 +31,7 @@
           <tr>
             <th scope="row">Circuits</th>
             <td>
-              <a href="{% url 'circuits:circuit_list' %}?type_id={{ object.pk }}">{{ circuits_table.rows|length }}</a>
+              <a href="{% url 'circuits:circuit_list' %}?type_id={{ object.pk }}">{{ object.circuits.count }}</a>
             </td>
           </tr>
         </table>
@@ -49,10 +49,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Circuits</h5>
-      <div class="card-body table-responsive">
-        {% render_table circuits_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'circuits:circuit_list' %}?type_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/circuits/provider.html

@@ -40,7 +40,7 @@
                     <tr>
                         <th scope="row">Circuits</th>
                         <td>
-                            <a href="{% url 'circuits:circuit_list' %}?provider={{ object.slug }}">{{ circuits_table.rows|length }}</a>
+                            <a href="{% url 'circuits:circuit_list' %}?provider={{ object.slug }}">{{ object.circuits.count }}</a>
                         </td>
                     </tr>
                 </table>
@@ -60,10 +60,10 @@
   <div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Circuits</h5>
-      <div class="card-body table-responsive">
-        {% render_table circuits_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'circuits:circuit_list' %}?provider_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/circuits/providernetwork.html

@@ -50,10 +50,10 @@
   <div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Circuits</h5>
-      <div class="card-body table-responsive">
-        {% render_table circuits_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'circuits:circuit_list' %}?provider_network_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/dcim/devicerole.html

@@ -45,14 +45,14 @@
           <tr>
             <th scope="row">Devices</th>
             <td>
-              <a href="{% url 'dcim:device_list' %}?role_id={{ object.pk }}">{{ device_count }}</a>
+              <a href="{% url 'dcim:device_list' %}?role_id={{ object.pk }}">{{ object.devices.count }}</a>
             </td>
           </tr>
           <tr>
             <th>Virtual Machines</th>
             <td>
               {% if object.vm_role %}
-                <a href="{% url 'virtualization:virtualmachine_list' %}?role_id={{ object.pk }}">{{ virtualmachine_count }}</a>
+                <a href="{% url 'virtualization:virtualmachine_list' %}?role_id={{ object.pk }}">{{ object.virtual_machines.count }}</a>
               {% else %}
                 {{ ''|placeholder }}
               {% endif %}
@@ -73,10 +73,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Devices</h5>
-      <div class="card-body table-responsive">
-        {% render_table devices_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=devices_table.paginator page=devices_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'dcim:device_list' %}?role_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/dcim/manufacturer.html

@@ -45,19 +45,19 @@
           <tr>
             <th scope="row">Device types</th>
             <td>
-              <a href="{% url 'dcim:devicetype_list' %}?manufacturer_id={{ object.pk }}">{{ devicetypes_table.rows|length }}</a>
+              <a href="{% url 'dcim:devicetype_list' %}?manufacturer_id={{ object.pk }}">{{ devicetype_count }}</a>
             </td>
           </tr>
           <tr>
             <th scope="row">Module types</th>
             <td>
-              <a href="{% url 'dcim:moduletype_list' %}?manufacturer_id={{ object.pk }}">{{ module_type_count }}</a>
+              <a href="{% url 'dcim:moduletype_list' %}?manufacturer_id={{ object.pk }}">{{ moduletype_count }}</a>
             </td>
           </tr>
           <tr>
             <th scope="row">Inventory Items</th>
             <td>
-              <a href="{% url 'dcim:inventoryitem_list' %}?manufacturer_id={{ object.pk }}">{{ inventory_item_count }}</a>
+              <a href="{% url 'dcim:inventoryitem_list' %}?manufacturer_id={{ object.pk }}">{{ inventoryitem_count }}</a>
             </td>
           </tr>
         </table>
@@ -76,10 +76,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Device Types</h5>
-      <div class="card-body table-responsive">
-        {% render_table devicetypes_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=devicetypes_table.paginator page=devicetypes_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'dcim:devicetype_list' %}?manufacturer_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/dcim/platform.html

@@ -46,7 +46,7 @@
           <tr>
             <th scope="row">Devices</th>
             <td>
-              <a href="{% url 'dcim:device_list' %}?platform_id={{ object.pk }}">{{ devices_table.rows|length }}</a>
+              <a href="{% url 'dcim:device_list' %}?platform_id={{ object.pk }}">{{ device_count }}</a>
             </td>
           </tr>
           <tr>
@@ -78,10 +78,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Devices</h5>
-      <div class="card-body table-responsive">
-        {% render_table devices_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=devices_table.paginator page=devices_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'dcim:device_list' %}?platform_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/dcim/rackrole.html

@@ -37,7 +37,7 @@
           <tr>
             <th scope="row">Racks</th>
             <td>
-              <a href="{% url 'dcim:rack_list' %}?role_id={{ object.pk }}">{{ racks_table.rows|length }}</a>
+              <a href="{% url 'dcim:rack_list' %}?role_id={{ object.pk }}">{{ object.racks.count }}</a>
             </td>
           </tr>
         </table>
@@ -55,10 +55,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Racks</h5>
-      <div class="card-body table-responsive">
-        {% render_table racks_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=racks_table.paginator page=racks_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'dcim:rack_list' %}?role_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/dcim/virtualdevicecontext.html

@@ -49,6 +49,12 @@
               {{ object.tenant|linkify|placeholder }}
             </td>
           </tr>
+          <tr>
+            <th scope="row">Interfaces</th>
+            <td>
+              <a href="{% url 'dcim:interface_list' %}?vdc_id={{ object.pk }}">{{ object.interfaces.count }}</a>
+            </td>
+          </tr>
         </table>
       </div>
     </div>
@@ -65,10 +71,10 @@
   <div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Interfaces</h5>
-      <div class="card-body table-responsive">
-        {% render_table interfaces_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=interfaces_table.paginator page=interfaces_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'dcim:interface_list' %}?vdc_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/templates/tenancy/contactgroup.html

@@ -34,7 +34,7 @@
             <tr>
               <th scope="row">Contacts</th>
               <td>
-                <a href="{% url 'tenancy:contact_list' %}?group_id={{ object.pk }}">{{ contacts_table.rows|length }}</a>
+                <a href="{% url 'tenancy:contact_list' %}?group_id={{ object.pk }}">{{ object.contacts.count }}</a>
               </td>
             </tr>
           </table>
@@ -63,16 +63,14 @@
       {% plugin_right_page object %}
     </div>
   </div>
-  <div class="row mb-3">
-    <div class="col col-md-12">
-      <div class="card">
-        <h5 class="card-header">Contacts</h5>
-        <div class="card-body table-responsive">
-          {% render_table contacts_table 'inc/table.html' %}
-          {% include 'inc/paginator.html' with paginator=contacts_table.paginator page=contacts_table.page %}
-        </div>
-      </div>
-      {% plugin_full_width_page object %}
+  <div class="col col-md-12">
+    <div class="card">
+      <h5 class="card-header">Contacts</h5>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'tenancy:contact_list' %}?group_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
+    {% plugin_full_width_page object %}
   </div>
 {% endblock %}

netbox/templates/tenancy/tenantgroup.html

@@ -42,7 +42,7 @@
           <tr>
             <th scope="row">Tenants</th>
             <td>
-              <a href="{% url 'tenancy:tenant_list' %}?group_id={{ object.pk }}">{{ tenants_table.rows|length }}</a>
+              <a href="{% url 'tenancy:tenant_list' %}?group_id={{ object.pk }}">{{ object.tenants.count }}</a>
             </td>
           </tr>
         </table>
@@ -60,10 +60,10 @@
 	<div class="col col-md-12">
     <div class="card">
       <h5 class="card-header">Tenants</h5>
-      <div class="card-body table-responsive">
-        {% render_table tenants_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=tenants_table.paginator page=tenants_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'tenancy:tenant_list' %}?group_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
     </div>
     {% plugin_full_width_page object %}
   </div>

netbox/tenancy/views.py

@@ -34,17 +34,6 @@ class TenantGroupListView(generic.ObjectListView):
 class TenantGroupView(generic.ObjectView):
     queryset = TenantGroup.objects.all()
 
-    def get_extra_context(self, request, instance):
-        tenants = Tenant.objects.restrict(request.user, 'view').filter(
-            group=instance
-        )
-        tenants_table = tables.TenantTable(tenants, user=request.user, exclude=('group',))
-        tenants_table.configure(request)
-
-        return {
-            'tenants_table': tenants_table,
-        }
-
 
 @register_model_view(TenantGroup, 'edit')
 class TenantGroupEditView(generic.ObjectEditView):
@@ -195,17 +184,8 @@ class ContactGroupView(generic.ObjectView):
         child_groups_table = tables.ContactGroupTable(child_groups)
         child_groups_table.columns.hide('actions')
 
-        contacts = Contact.objects.restrict(request.user, 'view').filter(
-            group=instance
-        ).annotate(
-            assignment_count=count_related(ContactAssignment, 'contact')
-        )
-        contacts_table = tables.ContactTable(contacts, user=request.user, exclude=('group',))
-        contacts_table.configure(request)
-
         return {
             'child_groups_table': child_groups_table,
-            'contacts_table': contacts_table,
         }