Use embedded tables for importing/export VRFs & L2VPNs under route target view

Author: jeremystretch

netbox/ipam/views.py

@@ -103,21 +103,6 @@ class RouteTargetListView(generic.ObjectListView):
 class RouteTargetView(generic.ObjectView):
     queryset = RouteTarget.objects.all()
 
-    def get_extra_context(self, request, instance):
-        importing_vrfs_table = tables.VRFTable(
-            instance.importing_vrfs.all(),
-            orderable=False
-        )
-        exporting_vrfs_table = tables.VRFTable(
-            instance.exporting_vrfs.all(),
-            orderable=False
-        )
-
-        return {
-            'importing_vrfs_table': importing_vrfs_table,
-            'exporting_vrfs_table': exporting_vrfs_table,
-        }
-
 
 @register_model_view(RouteTarget, 'edit')
 class RouteTargetEditView(generic.ObjectEditView):

netbox/templates/ipam/routetarget.html

@@ -25,16 +25,52 @@ <h5 class="card-header">Route Target</h5>
         </div>
       </div>
       {% include 'inc/panels/tags.html' %}
+      {% plugin_left_page object %}
+    </div>
+    <div class="col col-md-6">
       {% include 'inc/panels/custom_fields.html' %}
       {% include 'inc/panels/comments.html' %}
-      {% plugin_left_page object %}
+      {% plugin_right_page object %}
     </div>
+  </div>
+  <div class="row mb-3">
     <div class="col col-md-6">
-      <div class="mb-4">
-        {% include 'inc/panel_table.html' with table=importing_vrfs_table heading="Importing VRFs" %}
+      <div class="card">
+        <h5 class="card-header">Importing VRFs</h5>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'ipam:vrf_list' %}?import_target_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
+      </div>
+    </div>
+    <div class="col col-md-6">
+      <div class="card">
+        <h5 class="card-header">Exporting VRFs</h5>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'ipam:vrf_list' %}?export_target_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
+      </div>
+    </div>
+  </div>
+  <div class="row mb-3">
+    <div class="col col-md-6">
+      <div class="card">
+        <h5 class="card-header">Importing L2VPNs</h5>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'ipam:l2vpn_list' %}?import_target_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
+      </div>
+    </div>
+    <div class="col col-md-6">
+      <div class="card">
+        <h5 class="card-header">Exporting L2VPNs</h5>
+        <div class="card-body htmx-container table-responsive"
+          hx-get="{% url 'ipam:l2vpn_list' %}?export_target_id={{ object.pk }}"
+          hx-trigger="load"
+        ></div>
       </div>
-      {% include 'inc/panel_table.html' with table=exporting_vrfs_table heading="Exporting VRFs" %}
-      {% plugin_right_page object %}
     </div>
   </div>
   <div class="row">