Leverage HTMX to semplify rendering of Circuit Termination Form

Associated with issue #11891

netbox/circuits/choices.py

@@ -70,3 +70,13 @@ class CircuitTerminationPortSpeedChoices(ChoiceSet):
         (1544, 'T1 (1.544 Mbps)'),
         (2048, 'E1 (2.048 Mbps)'),
     ]
+
+
+class CircuitTerminationTypeChoices(ChoiceSet):
+    SITE = 'site'
+    PROVIDER_NETWORK = 'provider_network'
+
+    CHOICES = [
+        (SITE, 'Site'),
+        (PROVIDER_NETWORK, 'Provider Network'),
+    ]

netbox/circuits/forms/model_forms.py

@@ -1,13 +1,15 @@
+from django import forms
 from django.utils.translation import gettext as _
 
-from circuits.choices import CircuitCommitRateChoices, CircuitTerminationPortSpeedChoices
+from circuits.choices import CircuitCommitRateChoices, CircuitTerminationPortSpeedChoices, CircuitTerminationTypeChoices
 from circuits.models import *
 from dcim.models import Site
 from ipam.models import ASN
 from netbox.forms import NetBoxModelForm
 from tenancy.forms import TenancyForm
 from utilities.forms.fields import CommentField, DynamicModelChoiceField, DynamicModelMultipleChoiceField, SlugField
-from utilities.forms.widgets import DatePicker, NumberWithOptions
+from utilities.forms.utils import get_field_value
+from utilities.forms.widgets import DatePicker, HTMXSelect, NumberWithOptions
 
 __all__ = (
     'CircuitForm',
@@ -139,11 +141,21 @@ class CircuitTerminationForm(NetBoxModelForm):
         selector=True
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        termination_type = get_field_value(self, 'termination_type')
+
+        if termination_type != CircuitTerminationTypeChoices.SITE:
+            del self.fields['site']
+        if termination_type != CircuitTerminationTypeChoices.PROVIDER_NETWORK:
+            del self.fields['provider_network']
+
     class Meta:
         model = CircuitTermination
         fields = [
-            'circuit', 'term_side', 'site', 'provider_network', 'mark_connected', 'port_speed', 'upstream_speed',
+            'circuit', 'term_side', 'termination_type', 'site', 'provider_network', 'mark_connected', 'port_speed',
-            'xconnect_id', 'pp_info', 'description', 'tags',
+            'upstream_speed', 'xconnect_id', 'pp_info', 'description', 'tags',
         ]
         widgets = {
             'port_speed': NumberWithOptions(
@@ -152,4 +164,8 @@ class CircuitTerminationForm(NetBoxModelForm):
             'upstream_speed': NumberWithOptions(
                 options=CircuitTerminationPortSpeedChoices
             ),
+            'termination_type': HTMXSelect(),
+        }
+        labels = {
+            'termination_type': 'Termination Type',
         }

netbox/circuits/migrations/0043_circuittermination_termination_type.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.9 on 2023-05-22 04:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('circuits', '0042_provideraccount'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='circuittermination',
+            name='termination_type',
+            field=models.CharField(default='site', max_length=50),
+        ),
+    ]

netbox/circuits/models/circuits.py

@@ -164,6 +164,11 @@ class CircuitTermination(
         choices=CircuitTerminationSideChoices,
         verbose_name='Termination'
     )
+    termination_type = models.CharField(
+        max_length=50,
+        choices=CircuitTerminationTypeChoices,
+        default=CircuitTerminationTypeChoices.SITE
+    )
     site = models.ForeignKey(
         to='dcim.Site',
         on_delete=models.PROTECT,

netbox/circuits/tests/test_views.py

@@ -323,6 +323,7 @@ class CircuitTerminationTestCase(
         cls.form_data = {
             'circuit': circuits[2].pk,
             'term_side': 'A',
+            'termination_type': CircuitTerminationTypeChoices.SITE,
             'site': sites[2].pk,
             'description': 'New description',
         }

netbox/circuits/views.py

@@ -412,7 +412,6 @@ class CircuitContactsView(ObjectContactsView):
 class CircuitTerminationEditView(generic.ObjectEditView):
     queryset = CircuitTermination.objects.all()
     form = forms.CircuitTerminationForm
-    template_name = 'circuits/circuittermination_edit.html'
 
 
 @register_model_view(CircuitTermination, 'delete')

netbox/templates/circuits/circuittermination_edit.html

@@ -1,57 +0,0 @@
-{% extends 'generic/object_edit.html' %}
-{% load static %}
-{% load form_helpers %}
-
-{% block form %}
-  <div class="field-group my-5">
-    <div class="row mb-2">
-      <h5 class="offset-sm-3">Circuit Termination</h5>
-    </div>
-    {% render_field form.circuit %}
-    {% render_field form.term_side %}
-    {% render_field form.tags %}
-    {% render_field form.mark_connected %}
-    {% with providernetwork_tab_active=form.initial.provider_network %}
-      <div class="row mb-2">
-        <div class="offset-sm-3">
-          <ul class="nav nav-pills" role="tablist">
-            <li class="nav-item" role="presentation">
-              <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
-            </li>
-            <li class="nav-item" role="presentation">
-              <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="tab-content p-0 border-0">
-        <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
-          {% render_field form.site %}
-        </div>
-        <div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
-          {% render_field form.provider_network %}
-        </div>
-      </div>
-    {% endwith %}
-  </div>
-
-  <div class="field-group my-5">
-    <div class="row mb-2">
-      <h5 class="offset-sm-3">Termination Details</h5>
-    </div>
-    {% render_field form.port_speed %}
-    {% render_field form.upstream_speed %}
-    {% render_field form.xconnect_id %}
-    {% render_field form.pp_info %}
-    {% render_field form.description %}
-  </div>
-
-  {% if form.custom_fields %}
-    <div class="field-group mb-5">
-      <div class="row mb-2">
-        <h5 class="offset-sm-3">Custom Fields</h5>
-      </div>
-      {% render_custom_fields form %}
-    </div>
-  {% endif %}
-{% endblock %}