Closes #8184: Enable HTMX for embedded tables (#11518)

* Enable HTMX rendering for embedded tables

* Start converting embedded tables to use HTMX (WIP)

* Additional table conversions (WIP)

* Standardize HTMX usage for nested group models

* Enable HTMX for additional emebedded tables

* Fix HTMX table rendering for ObjectChildrenView

* Standardize usage of inc/panel_table.html

* Hide selection boxes in embedded tables

netbox/templates/virtualization/cluster/devices.html

@@ -8,7 +8,7 @@
   <form action="{% url 'virtualization:cluster_remove_devices' pk=object.pk %}" method="post">
     {% csrf_token %}
     <div class="card">
-      <div class="card-body" id="object_list">
+      <div class="card-body htmx-container table-responsive" id="object_list">
         {% include 'htmx/table.html' %}
       </div>
     </div>

netbox/templates/virtualization/cluster/virtual_machines.html

@@ -8,7 +8,7 @@
   <form method="post">
     {% csrf_token %}
     <div class="card">
-      <div class="card-body" id="object_list">
+      <div class="card-body htmx-container table-responsive" id="object_list">
         {% include 'htmx/table.html' %}
       </div>
     </div>

netbox/templates/virtualization/clustergroup.html

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

netbox/templates/virtualization/clustertype.html

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

netbox/templates/virtualization/virtualmachine/interfaces.html

@@ -9,7 +9,7 @@
     {% csrf_token %}
 
     <div class="card">
-      <div class="card-body" id="object_list">
+      <div class="card-body htmx-container table-responsive" id="object_list">
         {% include 'htmx/table.html' %}
       </div>
     </div>

netbox/templates/virtualization/vminterface.html

@@ -80,16 +80,11 @@
 <div class="row mb-3">
     <div class="col col-md-12">
         <div class="card">
-            <h5 class="card-header">
-                IP Addresses
-            </h5>
-            <div class="card-body table-responsive">
-                {% if ipaddress_table.rows %}
-                    {% render_table ipaddress_table 'inc/table.html' %}
-                {% else %}
-                    <div class="text-muted">None</div>
-                {% endif %}
-            </div>
+            <h5 class="card-header">IP Addresses</h5>
+            <div class="card-body htmx-container table-responsive"
+              hx-get="{% url 'ipam:ipaddress_list' %}?vminterface_id={{ object.pk }}"
+              hx-trigger="load"
+            ></div>
             {% if perms.ipam.add_ipaddress %}
                 <div class="card-footer text-end noprint">
                     <a href="{% url 'ipam:ipaddress_add' %}?virtual_machine={{ object.virtual_machine.pk }}&vminterface={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary">