Enable HTMX rendering for embedded tables

netbox/netbox/tables/tables.py

@@ -4,6 +4,8 @@ from django.contrib.contenttypes.fields import GenericForeignKey
 from django.contrib.contenttypes.models import ContentType
 from django.core.exceptions import FieldDoesNotExist
 from django.db.models.fields.related import RelatedField
+from django.urls import reverse
+from django.urls.exceptions import NoReverseMatch
 from django.utils.safestring import mark_safe
 from django.utils.translation import gettext as _
 from django_tables2.data import TableQuerysetData
@@ -12,7 +14,7 @@ from extras.models import CustomField, CustomLink
 from extras.choices import CustomFieldVisibilityChoices
 from netbox.tables import columns
 from utilities.paginator import EnhancedPaginator, get_paginate_count
-from utilities.utils import highlight_string, title
+from utilities.utils import get_viewname, highlight_string, title
 
 __all__ = (
     'BaseTable',
@@ -197,6 +199,15 @@ class NetBoxTable(BaseTable):
 
         super().__init__(*args, extra_columns=extra_columns, **kwargs)
 
+    @property
+    def htmx_url(self):
+        viewname = get_viewname(self._meta.model, action='list')
+        try:
+            return reverse(viewname)
+        except NoReverseMatch:
+            pass
+        return ''
+
 
 class SearchTable(tables.Table):
     object_type = columns.ContentTypeColumn(

netbox/netbox/views/generic/bulk_views.py

@@ -20,7 +20,7 @@ from utilities.choices import ImportFormatChoices
 from utilities.error_handlers import handle_protectederror
 from utilities.exceptions import AbortRequest, AbortTransaction, PermissionsViolation
 from utilities.forms import BulkRenameForm, ConfirmationForm, ImportForm, restrict_form_fields
-from utilities.htmx import is_htmx
+from utilities.htmx import is_embedded, is_htmx
 from utilities.permissions import get_permission_for_model
 from utilities.views import GetReturnURLMixin
 from .base import BaseMultiObjectView
@@ -161,6 +161,7 @@ class ObjectListView(BaseMultiObjectView, ActionsMixin, TableMixin):
 
         # If this is an HTMX request, return only the rendered table HTML
         if is_htmx(request):
+            table.embedded = is_embedded(request)
             return render(request, 'htmx/table.html', {
                 'table': table,
             })

netbox/templates/dcim/connections_list.html

@@ -12,7 +12,7 @@
     <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
       {% include 'inc/table_controls_htmx.html' %}
       <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/dcim/device/consoleports.html

@@ -10,7 +10,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/dcim/device/consoleserverports.html

@@ -10,7 +10,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/dcim/device/devicebays.html

@@ -10,7 +10,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/dcim/device/frontports.html

@@ -10,7 +10,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/dcim/device/interfaces.html

@@ -10,7 +10,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/dcim/device/inventory.html

@@ -10,7 +10,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/dcim/device/modulebays.html

@@ -10,7 +10,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/dcim/device/poweroutlets.html

@@ -10,7 +10,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/dcim/device/powerports.html

@@ -10,7 +10,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/dcim/device/rearports.html

@@ -10,7 +10,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/dcim/devicetype/component_templates.html

@@ -8,7 +8,7 @@
         {% csrf_token %}
         <div class="card">
             <h5 class="card-header">{{ title }}</h5>
-            <div class="card-body" id="object_list">
+            <div class="card-body htmx-container table-responsive" id="object_list">
               {% include 'htmx/table.html' %}
             </div>
             <div class="card-footer noprint">
@@ -36,7 +36,7 @@
   {% else %}
     <div class="card">
       <h5 class="card-header">{{ title }}</h5>
-      <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/dcim/moduletype/component_templates.html

@@ -8,7 +8,7 @@
         {% csrf_token %}
         <div class="card">
             <h5 class="card-header">{{ title }}</h5>
-            <div class="card-body" id="object_list">
+            <div class="card-body htmx-container table-responsive" id="object_list">
               {% include 'htmx/table.html' %}
             </div>
             <div class="card-footer noprint">
@@ -36,7 +36,7 @@
   {% else %}
     <div class="card">
       <h5 class="card-header">{{ title }}</h5>
-      <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/generic/object_list.html

@@ -110,7 +110,7 @@ Context:
               {% endif %}
 
           <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/inc/paginator_htmx.html

@@ -8,7 +8,7 @@
         {% if page.has_previous %}
           <a href="#"
              hx-get="{% querystring request page=page.previous_page_number %}"
-             hx-target="#object_list"
+             hx-target="closest .htmx-container"
              hx-push-url="true"
              class="btn btn-outline-secondary"
           >
@@ -19,7 +19,7 @@
           {% if p %}
             <a href="#"
                hx-get="{% querystring request page=p %}"
-               hx-target="#object_list"
+               hx-target="closest .htmx-container"
                hx-push-url="true"
                class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}"
             >
@@ -34,7 +34,7 @@
         {% if page.has_next %}
           <a href="#"
              hx-get="{% querystring request page=page.next_page_number %}"
-             hx-target="#object_list"
+             hx-target="closest .htmx-container"
              hx-push-url="true"
              class="btn btn-outline-secondary"
           >
@@ -56,7 +56,7 @@
             <li>
               <a href="#"
                  hx-get="{% querystring request per_page=n %}"
-                 hx-target="#object_list"
+                 hx-target="closest .htmx-container"
                  hx-push-url="true"
                  class="dropdown-item"
               >{{ n }}</a>

netbox/templates/inc/table_htmx.html

@@ -1,59 +1,56 @@
 {% load django_tables2 %}
-
-<div class="table-responsive">
-  <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
-    {% if table.show_header %}
-      <thead>
+<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
+  {% if table.show_header %}
+    <thead>
+      <tr>
+        {% for column in table.columns %}
+          {% if column.orderable %}
+            <th {{ column.attrs.th.as_html }}>
+              {% if column.is_ordered %}
+                <div class="float-end">
+                  <a href="#"
+                     hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field='' %}"
+                     hx-target="closest .htmx-container"
+                     {% if not table.embedded %}hx-push-url="true"{% endif %}
+                     class="text-danger"
+                  ><i class="mdi mdi-close"></i></a>
+                </div>
+              {% endif %}
+              <a href="#"
+                 hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
+                 hx-target="closest .htmx-container"
+                 {% if not table.embedded %}hx-push-url="true"{% endif %}
+              >{{ column.header }}</a>
+            </th>
+          {% else %}
+            <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
+          {% endif %}
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+  <tbody>
+    {% for row in table.page.object_list|default:table.rows %}
+      <tr {{ row.attrs.as_html }}>
+        {% for column, cell in row.items %}
+          <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
+        {% endfor %}
+      </tr>
+    {% empty %}
+      {% if table.empty_text %}
         <tr>
-          {% for column in table.columns %}
-            {% if column.orderable %}
-              <th {{ column.attrs.th.as_html }}>
-                {% if column.is_ordered %}
-                  <div class="float-end">
-                    <a href="#"
-                       hx-get="{% querystring table.prefixed_order_by_field='' %}"
-                       hx-target="#object_list"
-                       hx-push-url="true"
-                       class="text-danger"
-                    ><i class="mdi mdi-close"></i></a>
-                  </div>
-                {% endif %}
-                <a href="#"
-                   hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
-                   hx-target="#object_list"
-                   hx-push-url="true"
-                >{{ column.header }}</a>
-              </th>
-            {% else %}
-              <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
-            {% endif %}
-          {% endfor %}
+          <td colspan="{{ table.columns|length }}" class="text-center text-muted">&mdash; {{ table.empty_text }} &mdash;</td>
         </tr>
-      </thead>
-    {% endif %}
-    <tbody>
-      {% for row in table.page.object_list|default:table.rows %}
-        <tr {{ row.attrs.as_html }}>
-          {% for column, cell in row.items %}
-            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
-          {% endfor %}
-        </tr>
-      {% empty %}
-        {% if table.empty_text %}
-          <tr>
-            <td colspan="{{ table.columns|length }}" class="text-center text-muted">&mdash; {{ table.empty_text }} &mdash;</td>
-          </tr>
-        {% endif %}
-      {% endfor %}
-    </tbody>
-    {% if table.has_footer %}
-      <tfoot>
-        <tr>
-          {% for column in table.columns %}
-            <td>{{ column.footer }}</td>
-          {% endfor %}
-        </tr>
-      </tfoot>
-    {% endif %}
-  </table>
-</div>
+      {% endif %}
+    {% endfor %}
+  </tbody>
+  {% if table.has_footer %}
+    <tfoot>
+      <tr>
+        {% for column in table.columns %}
+          <td>{{ column.footer }}</td>
+        {% endfor %}
+      </tr>
+    </tfoot>
+  {% endif %}
+</table>

netbox/templates/ipam/aggregate/prefixes.html

@@ -18,7 +18,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/ipam/iprange/ip_addresses.html

@@ -16,7 +16,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/ipam/prefix/ip_addresses.html

@@ -16,7 +16,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/ipam/prefix/ip_ranges.html

@@ -16,7 +16,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/ipam/prefix/prefixes.html

@@ -18,7 +18,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/ipam/vlan/interfaces.html

@@ -7,7 +7,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/ipam/vlan/vminterfaces.html

@@ -7,7 +7,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/search.html

@@ -30,7 +30,7 @@
   </div>
   <div class="row px-3">
     <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/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/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/utilities/htmx.py

@@ -1,5 +1,19 @@
+from urllib.parse import urlparse
+
+
 def is_htmx(request):
     """
     Returns True if the request was made by HTMX; False otherwise.
     """
     return 'Hx-Request' in request.headers
+
+
+def is_embedded(request):
+    """
+    Returns True if the request indicates that it originates from a URL different from
+    the path being requested.
+    """
+    hx_current_url = request.headers.get('HX-Current-URL', None)
+    if not hx_current_url:
+        return False
+    return request.path != urlparse(hx_current_url).path