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
2024-05-10 07:54:54 +00:00 · 2023-01-16 15:50:45 -05:00
parent f74a2536f1
commit 1a2dae3471
65 changed files with 381 additions and 667 deletions
--- a/netbox/templates/ipam/aggregate/prefixes.html
+++ b/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>
--- a/netbox/templates/ipam/asn.html
+++ b/netbox/templates/ipam/asn.html
@@ -75,17 +75,17 @@
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">Sites</h5>
-        <div class="card-body table-responsive">
-          {% render_table sites_table 'inc/table.html' %}
-          {% include 'inc/paginator.html' with paginator=sites_table.paginator page=sites_table.page %}
-        </div>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'dcim:site_list' %}?asn_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
      </div>
      <div class="card">
        <h5 class="card-header">Providers</h5>
-        <div class="card-body table-responsive">
-          {% render_table providers_table 'inc/table.html' %}
-          {% include 'inc/paginator.html' with paginator=providers_table.paginator page=providers_table.page %}
-        </div>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'circuits:provider_list' %}?asn_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
      </div>
      {% plugin_full_width_page object %}
    </div>
--- a/netbox/templates/ipam/fhrpgroup.html
+++ b/netbox/templates/ipam/fhrpgroup.html
@@ -69,13 +69,10 @@
    <div class="col col-md-12">
      <div class="card">
        <h5 class="card-header">Virtual 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>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'ipam:ipaddress_list' %}?fhrpgroup_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
        {% if perms.ipam.add_ipaddress %}
          <div class="card-footer text-end">
            <a href="{% url 'ipam:ipaddress_add' %}?fhrpgroup={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary">
@@ -84,16 +81,7 @@
          </div>
        {% endif %}
      </div>
-      <div class="card">
-        <h5 class="card-header">Members</h5>
-        <div class="card-body table-responsive">
-          {% if members_table.rows %}
-            {% render_table members_table 'inc/table.html' %}
-          {% else %}
-            <div class="text-muted">None</div>
-          {% endif %}
-        </div>
-      </div>
+      {% include 'inc/panel_table.html' with table=members_table heading='Members' %}
      {% plugin_full_width_page object %}
    </div>
  </div>
--- a/netbox/templates/ipam/ipaddress.html
+++ b/netbox/templates/ipam/ipaddress.html
@@ -114,30 +114,9 @@
 	<div class="col col-md-8">
    {% include 'inc/panel_table.html' with table=parent_prefixes_table heading='Parent Prefixes' %}
    {% if duplicate_ips_table.rows %}
-        {# Custom version of panel_table.html #}
-        <div class="card border-danger">
-            <h5 class="card-header">
-              <span class="text-danger">Duplicate IP Addresses</span>
-                {% if more_duplicate_ips %}
-                  <div class="float-end">
-                    <a type="button" class="btn btn-primary btn-sm"
-                    {% if object.vrf %}
-                    href="{% url 'ipam:ipaddress_list' %}?address={{ object.address.ip }}&vrf_id={{ object.vrf.pk }}"
-                    {% else %}
-                    href="{% url 'ipam:ipaddress_list' %}?address={{ object.address.ip }}&vrf_id=null"
-                    {% endif %}
-                    >Show all</a>
-                  </div>
-                {% endif %}
-            </h5>
-            <div class="card-body table-responsive">
-              {% render_table duplicate_ips_table 'inc/table.html' %}
-            </div>
-        </div>
+      {% include 'inc/panel_table.html' with table=duplicate_ips_table heading='Duplicate IPs' panel_class='danger' %}
    {% endif %}
-    <div class="my-3">
-      {% include 'inc/panel_table.html' with table=related_ips_table heading='Related IP Addresses' %}
-    </div>
+    {% include 'inc/panel_table.html' with table=related_ips_table heading='Related IPs' %}
    {% include 'inc/panels/services.html' %}
    {% plugin_right_page object %}
 	</div>
--- a/netbox/templates/ipam/iprange/ip_addresses.html
+++ b/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>
--- a/netbox/templates/ipam/l2vpn.html
+++ b/netbox/templates/ipam/l2vpn.html
@@ -55,9 +55,10 @@
 	<div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Terminations</h5>
-      <div class="card-body">
-        {% render_table terminations_table 'inc/table.html' %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'ipam:l2vpntermination_list' %}?l2vpn_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
      {% if perms.ipam.add_l2vpntermination %}
        <div class="card-footer text-end noprint">
          <a href="{% url 'ipam:l2vpntermination_add' %}?l2vpn={{ object.pk }}&return_url={{ object.get_absolute_url }}" class="btn btn-primary btn-sm{% if not object.can_add_termination %} disabled" aria-disabled="true{% endif %}">
--- a/netbox/templates/ipam/prefix/ip_addresses.html
+++ b/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>
--- a/netbox/templates/ipam/prefix/ip_ranges.html
+++ b/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>
--- a/netbox/templates/ipam/prefix/prefixes.html
+++ b/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>
--- a/netbox/templates/ipam/rir.html
+++ b/netbox/templates/ipam/rir.html
@@ -35,16 +35,16 @@
          <tr>
            <th scope="row">Aggregates</th>
            <td>
-              <a href="{% url 'ipam:aggregate_list' %}?rir_id={{ object.pk }}">{{ aggregates_table.rows|length }}</a>
+              <a href="{% url 'ipam:aggregate_list' %}?rir_id={{ object.pk }}">{{ object.aggregates.count }}</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
-    {% include 'inc/panels/tags.html' %}
    {% plugin_left_page object %}
 	</div>
 	<div class="col col-md-6">
+    {% include 'inc/panels/tags.html' %}
    {% include 'inc/panels/custom_fields.html' %}
    {% plugin_right_page object %}
  </div>
@@ -53,10 +53,10 @@
 	<div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Aggregates</h5>
-      <div class="card-body table-responsive">
-        {% render_table aggregates_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=aggregates_table.paginator page=aggregates_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'ipam:aggregate_list' %}?rir_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
    </div>
    {% plugin_full_width_page object %}
  </div>
--- a/netbox/templates/ipam/role.html
+++ b/netbox/templates/ipam/role.html
@@ -35,40 +35,28 @@
          <tr>
            <th scope="row">Prefixes</th>
            <td>
-              <a href="{% url 'ipam:prefix_list' %}?role_id={{ object.pk }}">{{ prefixes_table.rows|length }}</a>
+              <a href="{% url 'ipam:prefix_list' %}?role_id={{ object.pk }}">{{ object.prefixes.count }}</a>
            </td>
          </tr>
          <tr>
            <th scope="row">IP Ranges</th>
            <td>
-              {% with ipranges_count=object.ip_ranges.count %}
-                {% if ipranges_count %}
-                  <a href="{% url 'ipam:iprange_list' %}?role_id={{ object.pk }}">{{ ipranges_count }}</a>
-                {% else %}
-                  {{ ''|placeholder }}
-                {% endif %}
-              {% endwith %}
+              <a href="{% url 'ipam:iprange_list' %}?role_id={{ object.pk }}">{{ object.ip_ranges.count }}</a>
            </td>
          </tr>
          <tr>
            <th scope="row">VLANs</th>
            <td>
-              {% with vlans_count=object.vlans.count %}
-                {% if vlans_count %}
-                  <a href="{% url 'ipam:vlan_list' %}?role_id={{ object.pk }}">{{ vlans_count }}</a>
-                {% else %}
-                  {{ ''|placeholder }}
-                {% endif %}
-              {% endwith %}
+              <a href="{% url 'ipam:vlan_list' %}?role_id={{ object.pk }}">{{ object.vlans.count }}</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
-    {% include 'inc/panels/tags.html' %}
    {% plugin_left_page object %}
 	</div>
 	<div class="col col-md-6">
+    {% include 'inc/panels/tags.html' %}
    {% include 'inc/panels/custom_fields.html' %}
    {% plugin_right_page object %}
  </div>
@@ -77,10 +65,10 @@
 	<div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Prefixes</h5>
-      <div class="card-body table-responsive">
-        {% render_table prefixes_table 'inc/table.html' %}
-        {% include 'inc/paginator.html' with paginator=prefixes_table.paginator page=prefixes_table.page %}
-      </div>
+      <div class="card-body htmx-container table-responsive"
+        hx-get="{% url 'ipam:prefix_list' %}?role_id={{ object.pk }}"
+        hx-trigger="load"
+      ></div>
    </div>
    {% plugin_full_width_page object %}
  </div>
--- a/netbox/templates/ipam/vlan.html
+++ b/netbox/templates/ipam/vlan.html
@@ -81,24 +81,22 @@
        </div>
    </div>
    <div class="row">
-        <div class="col col-md-12">
-            <div class="card">
-                <h5 class="card-header">
-                    Prefixes
-                </h5>
-                <div class="card-body table-responsive">
-                    {% render_table prefix_table 'inc/table.html' %}
-                </div>
-                {% if perms.ipam.add_prefix %}
-                <div class="card-footer text-end noprint">
-                    <a href="{% url 'ipam:prefix_add' %}?{% if object.tenant %}tenant={{ object.tenant.pk }}&{% endif %}site={{ object.site.pk }}&vlan={{ object.pk }}" class="btn btn-primary btn-sm">
-                        <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
-                        Add a Prefix
-                    </a>
-                </div>
-                {% endif %}
+      <div class="col col-md-12">
+        <div class="card">
+          <h5 class="card-header">Prefixes</h5>
+          <div class="card-body htmx-container table-responsive"
+            hx-get="{% url 'ipam:prefix_list' %}?vlan_id={{ object.pk }}"
+            hx-trigger="load"
+          ></div>
+          {% if perms.ipam.add_prefix %}
+            <div class="card-footer text-end noprint">
+              <a href="{% url 'ipam:prefix_add' %}?{% if object.tenant %}tenant={{ object.tenant.pk }}&{% endif %}site={{ object.site.pk }}&vlan={{ object.pk }}" class="btn btn-primary btn-sm">
+                <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add a Prefix
+              </a>
            </div>
-            {% plugin_full_width_page object %}
+          {% endif %}
        </div>
+        {% plugin_full_width_page object %}
+      </div>
    </div>
 {% endblock %}
--- a/netbox/templates/ipam/vlan/interfaces.html
+++ b/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>
--- a/netbox/templates/ipam/vlan/vminterfaces.html
+++ b/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>