Closes #12292: Replace SelectSpeedWidget and SelectDurationWidget with NumberWithOptions

netbox/circuits/choices.py

@@ -25,6 +25,22 @@ class CircuitStatusChoices(ChoiceSet):
     ]
 
 
+class CircuitCommitRateChoices(ChoiceSet):
+    key = 'Circuit.commit_rate'
+
+    CHOICES = [
+        (10000, '10 Mbps'),
+        (100000, '100 Mbps'),
+        (1000000, '1 Gbps'),
+        (10000000, '10 Gbps'),
+        (25000000, '25 Gbps'),
+        (40000000, '40 Gbps'),
+        (100000000, '100 Gbps'),
+        (1544, 'T1 (1.544 Mbps)'),
+        (2048, 'E1 (2.048 Mbps)'),
+    ]
+
+
 #
 # CircuitTerminations
 #
@@ -38,3 +54,19 @@ class CircuitTerminationSideChoices(ChoiceSet):
         (SIDE_A, 'A'),
         (SIDE_Z, 'Z')
     )
+
+
+class CircuitTerminationPortSpeedChoices(ChoiceSet):
+    key = 'CircuitTermination.port_speed'
+
+    CHOICES = [
+        (10000, '10 Mbps'),
+        (100000, '100 Mbps'),
+        (1000000, '1 Gbps'),
+        (10000000, '10 Gbps'),
+        (25000000, '25 Gbps'),
+        (40000000, '40 Gbps'),
+        (100000000, '100 Gbps'),
+        (1544, 'T1 (1.544 Mbps)'),
+        (2048, 'E1 (2.048 Mbps)'),
+    ]

netbox/circuits/forms/bulk_edit.py

@@ -1,14 +1,14 @@
 from django import forms
 from django.utils.translation import gettext as _
 
-from circuits.choices import CircuitStatusChoices
+from circuits.choices import CircuitCommitRateChoices, CircuitStatusChoices
 from circuits.models import *
 from ipam.models import ASN
 from netbox.forms import NetBoxModelBulkEditForm
 from tenancy.models import Tenant
 from utilities.forms import add_blank_choice
 from utilities.forms.fields import CommentField, DynamicModelChoiceField, DynamicModelMultipleChoiceField
-from utilities.forms.widgets import DatePicker
+from utilities.forms.widgets import DatePicker, NumberWithOptions
 
 __all__ = (
     'CircuitBulkEditForm',
@@ -139,7 +139,10 @@ class CircuitBulkEditForm(NetBoxModelBulkEditForm):
     )
     commit_rate = forms.IntegerField(
         required=False,
-        label=_('Commit rate (Kbps)')
+        label=_('Commit rate (Kbps)'),
+        widget=NumberWithOptions(
+            options=CircuitCommitRateChoices
+        )
     )
     description = forms.CharField(
         max_length=100,

netbox/circuits/forms/filtersets.py

@@ -1,14 +1,14 @@
 from django import forms
 from django.utils.translation import gettext as _
 
-from circuits.choices import CircuitStatusChoices
+from circuits.choices import CircuitCommitRateChoices, CircuitStatusChoices
 from circuits.models import *
 from dcim.models import Region, Site, SiteGroup
 from ipam.models import ASN
 from netbox.forms import NetBoxModelFilterSetForm
 from tenancy.forms import TenancyFilterForm, ContactModelFilterForm
 from utilities.forms.fields import DynamicModelMultipleChoiceField, TagFilterField
-from utilities.forms.widgets import DatePicker
+from utilities.forms.widgets import DatePicker, NumberWithOptions
 
 __all__ = (
     'CircuitFilterForm',
@@ -168,6 +168,9 @@ class CircuitFilterForm(TenancyFilterForm, ContactModelFilterForm, NetBoxModelFi
     commit_rate = forms.IntegerField(
         required=False,
         min_value=0,
-        label=_('Commit rate (Kbps)')
+        label=_('Commit rate (Kbps)'),
+        widget=NumberWithOptions(
+            options=CircuitCommitRateChoices
+        )
     )
     tag = TagFilterField(model)

netbox/circuits/forms/model_forms.py

@@ -1,12 +1,13 @@
 from django.utils.translation import gettext as _
 
+from circuits.choices import CircuitCommitRateChoices, CircuitTerminationPortSpeedChoices
 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, SelectSpeedWidget
+from utilities.forms.widgets import DatePicker, NumberWithOptions
 
 __all__ = (
     'CircuitForm',
@@ -116,7 +117,9 @@ class CircuitForm(TenancyForm, NetBoxModelForm):
         widgets = {
             'install_date': DatePicker(),
             'termination_date': DatePicker(),
-            'commit_rate': SelectSpeedWidget(),
+            'commit_rate': NumberWithOptions(
+                options=CircuitCommitRateChoices
+            ),
         }
 
 
@@ -143,6 +146,10 @@ class CircuitTerminationForm(NetBoxModelForm):
             'xconnect_id', 'pp_info', 'description', 'tags',
         ]
         widgets = {
-            'port_speed': SelectSpeedWidget(),
+            'port_speed': NumberWithOptions(
-            'upstream_speed': SelectSpeedWidget(),
+                options=CircuitTerminationPortSpeedChoices
+            ),
+            'upstream_speed': NumberWithOptions(
+                options=CircuitTerminationPortSpeedChoices
+            ),
         }

netbox/dcim/choices.py

@@ -1096,6 +1096,20 @@ class InterfaceTypeChoices(ChoiceSet):
     )
 
 
+class InterfaceSpeedChoices(ChoiceSet):
+    key = 'Interface.speed'
+
+    CHOICES = [
+        (10000, '10 Mbps'),
+        (100000, '100 Mbps'),
+        (1000000, '1 Gbps'),
+        (10000000, '10 Gbps'),
+        (25000000, '25 Gbps'),
+        (40000000, '40 Gbps'),
+        (100000000, '100 Gbps'),
+    ]
+
+
 class InterfaceDuplexChoices(ChoiceSet):
 
     DUPLEX_HALF = 'half'

netbox/dcim/forms/bulk_edit.py

@@ -12,7 +12,7 @@ from netbox.forms import NetBoxModelBulkEditForm
 from tenancy.models import Tenant
 from utilities.forms import BulkEditForm, add_blank_choice, form_from_model
 from utilities.forms.fields import ColorField, CommentField, DynamicModelChoiceField, DynamicModelMultipleChoiceField
-from utilities.forms.widgets import BulkEditNullBooleanSelect, SelectSpeedWidget
+from utilities.forms.widgets import BulkEditNullBooleanSelect, NumberWithOptions
 
 __all__ = (
     'CableBulkEditForm',
@@ -1169,8 +1169,9 @@ class InterfaceBulkEditForm(
     )
     speed = forms.IntegerField(
         required=False,
-        widget=SelectSpeedWidget(),
+        widget=NumberWithOptions(
-        label=_('Speed')
+            options=InterfaceSpeedChoices
+        )
     )
     mgmt_only = forms.NullBooleanField(
         required=False,

netbox/dcim/forms/filtersets.py

@@ -12,7 +12,7 @@ from netbox.forms import NetBoxModelFilterSetForm
 from tenancy.forms import ContactModelFilterForm, TenancyFilterForm
 from utilities.forms import BOOLEAN_WITH_BLANK_CHOICES, FilterForm, add_blank_choice
 from utilities.forms.fields import ColorField, DynamicModelMultipleChoiceField, TagFilterField
-from utilities.forms.widgets import APISelectMultiple, SelectSpeedWidget
+from utilities.forms.widgets import APISelectMultiple, NumberWithOptions
 from wireless.choices import *
 
 __all__ = (
@@ -1154,8 +1154,9 @@ class InterfaceFilterForm(PathEndpointFilterForm, DeviceComponentFilterForm):
     )
     speed = forms.IntegerField(
         required=False,
-        label='Speed',
+        widget=NumberWithOptions(
-        widget=SelectSpeedWidget()
+            options=InterfaceSpeedChoices
+        )
     )
     duplex = forms.MultipleChoiceField(
         choices=InterfaceDuplexChoices,

netbox/dcim/forms/model_forms.py

@@ -16,7 +16,7 @@ from utilities.forms.fields import (
     CommentField, ContentTypeChoiceField, DynamicModelChoiceField, DynamicModelMultipleChoiceField, JSONField,
     NumericArrayField, SlugField,
 )
-from utilities.forms.widgets import APISelect, ClearableFileInput, HTMXSelect, SelectSpeedWidget, SelectWithPK
+from utilities.forms.widgets import APISelect, ClearableFileInput, HTMXSelect, NumberWithOptions, SelectWithPK
 from virtualization.models import Cluster
 from wireless.models import WirelessLAN, WirelessLANGroup
 from .common import InterfaceCommonForm, ModuleCommonForm
@@ -1136,7 +1136,9 @@ class InterfaceForm(InterfaceCommonForm, ModularDeviceComponentForm):
             'untagged_vlan', 'tagged_vlans', 'vrf', 'tags',
         ]
         widgets = {
-            'speed': SelectSpeedWidget(),
+            'speed': NumberWithOptions(
+                options=InterfaceSpeedChoices
+            ),
             'mode': HTMXSelect(),
         }
         labels = {

netbox/extras/choices.py

@@ -116,7 +116,7 @@ class JournalEntryKindChoices(ChoiceSet):
 
 
 #
-# Log Levels for Reports and Scripts
+# Reports and Scripts
 #
 
 class LogLevelChoices(ChoiceSet):
@@ -136,6 +136,17 @@ class LogLevelChoices(ChoiceSet):
     )
 
 
+class DurationChoices(ChoiceSet):
+
+    CHOICES = (
+        (60, 'Hourly'),
+        (720, '12 hours'),
+        (1440, 'Daily'),
+        (10080, 'Weekly'),
+        (43200, '30 days'),
+    )
+
+
 #
 # Job results
 #

netbox/extras/forms/reports.py

@@ -1,8 +1,9 @@
 from django import forms
 from django.utils.translation import gettext as _
 
+from extras.choices import DurationChoices
 from utilities.forms import BootstrapMixin
-from utilities.forms.widgets import DateTimePicker, SelectDurationWidget
+from utilities.forms.widgets import DateTimePicker, NumberWithOptions
 from utilities.utils import local_now
 
 __all__ = (
@@ -21,7 +22,9 @@ class ReportForm(BootstrapMixin, forms.Form):
         required=False,
         min_value=1,
         label=_("Recurs every"),
-        widget=SelectDurationWidget(),
+        widget=NumberWithOptions(
+            options=DurationChoices
+        ),
         help_text=_("Interval at which this report is re-run (in minutes)")
     )
 

netbox/extras/forms/scripts.py

@@ -1,8 +1,9 @@
 from django import forms
 from django.utils.translation import gettext as _
 
+from extras.choices import DurationChoices
 from utilities.forms import BootstrapMixin
-from utilities.forms.widgets import DateTimePicker, SelectDurationWidget
+from utilities.forms.widgets import DateTimePicker, NumberWithOptions
 from utilities.utils import local_now
 
 __all__ = (
@@ -27,7 +28,9 @@ class ScriptForm(BootstrapMixin, forms.Form):
         required=False,
         min_value=1,
         label=_("Recurs every"),
-        widget=SelectDurationWidget(),
+        widget=NumberWithOptions(
+            options=DurationChoices
+        ),
         help_text=_("Interval at which this script is re-run (in minutes)")
     )
 

netbox/project-static/src/forms/speedSelector.ts

@@ -4,7 +4,7 @@ import { getElements } from '../util';
  * Set the value of the number input field based on the selection of the dropdown.
  */
 export function initSpeedSelector(): void {
-  for (const element of getElements<HTMLAnchorElement>('a.set_speed')) {
+  for (const element of getElements<HTMLAnchorElement>('a.set_field_value')) {
     if (element !== null) {
       function handleClick(event: Event) {
         // Don't reload the page (due to href="#").

netbox/utilities/forms/widgets/misc.py

@@ -3,6 +3,7 @@ from django import forms
 __all__ = (
     'ClearableFileInput',
     'MarkdownWidget',
+    'NumberWithOptions',
     'SlugWidget',
 )
 
@@ -21,6 +22,22 @@ class MarkdownWidget(forms.Textarea):
     template_name = 'widgets/markdown_input.html'
 
 
+class NumberWithOptions(forms.NumberInput):
+    """
+    Number field with a dropdown pre-populated with common values for convenience.
+    """
+    template_name = 'widgets/number_with_options.html'
+
+    def __init__(self, options, attrs=None):
+        self.options = options
+        super().__init__(attrs)
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['widget']['options'] = self.options
+        return context
+
+
 class SlugWidget(forms.TextInput):
     """
     Subclass TextInput and add a slug regeneration button next to the form field.

netbox/utilities/forms/widgets/select.py

@@ -7,8 +7,6 @@ __all__ = (
     'BulkEditNullBooleanSelect',
     'ColorSelect',
     'HTMXSelect',
-    'SelectDurationWidget',
-    'SelectSpeedWidget',
     'SelectWithPK',
 )
 
@@ -63,17 +61,3 @@ class SelectWithPK(forms.Select):
     Include the primary key of each option in the option label (e.g. "Router7 (4721)").
     """
     option_template_name = 'widgets/select_option_with_pk.html'
-
-
-class SelectDurationWidget(forms.NumberInput):
-    """
-    Dropdown to select one of several common options for a time duration (in minutes).
-    """
-    template_name = 'widgets/select_duration.html'
-
-
-class SelectSpeedWidget(forms.NumberInput):
-    """
-    Speed field with dropdown selections for convenience.
-    """
-    template_name = 'widgets/select_speed.html'

netbox/utilities/templates/widgets/number_with_options.html

@@ -0,0 +1,11 @@
+<div class="input-group">
+  {% include 'django/forms/widgets/number.html' %}
+  <button type="button" class="btn btn-outline-dark border-input dropdown-toggle" data-bs-toggle="dropdown"></button>
+  <ul class="dropdown-menu dropdown-menu-end">
+    {% for value, label in widget.options %}
+      <li>
+        <a href="#" target="id_{{ widget.name }}" data="{{ value }}" class="set_field_value dropdown-item">{{ label }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>

netbox/utilities/templates/widgets/select_duration.html

@@ -1,11 +0,0 @@
-<div class="input-group">
-  {% include 'django/forms/widgets/number.html' %}
-  <button type="button" class="btn btn-outline-dark border-input dropdown-toggle" data-bs-toggle="dropdown"></button>
-  <ul class="dropdown-menu dropdown-menu-end">
-    <li><a href="#" target="id_{{ widget.name }}" data="60" class="set_speed dropdown-item">Hourly</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="720" class="set_speed dropdown-item">12 hours</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="1440" class="set_speed dropdown-item">Daily</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="10080" class="set_speed dropdown-item">Weekly</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="43200" class="set_speed dropdown-item">30 days</a></li>
-  </ul>
-</div>

netbox/utilities/templates/widgets/select_speed.html

@@ -1,16 +0,0 @@
-<div class="input-group">
-  {% include 'django/forms/widgets/number.html' %}
-  <button type="button" class="btn btn-outline-dark border-input dropdown-toggle" data-bs-toggle="dropdown"></button>
-  <ul class="dropdown-menu dropdown-menu-end">
-    <li><a href="#" target="id_{{ widget.name }}" data="10000" class="set_speed dropdown-item">10 Mbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="100000" class="set_speed dropdown-item">100 Mbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="1000000" class="set_speed dropdown-item">1 Gbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="10000000" class="set_speed dropdown-item">10 Gbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="25000000" class="set_speed dropdown-item">25 Gbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="40000000" class="set_speed dropdown-item">40 Gbps</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="100000000" class="set_speed dropdown-item">100 Gbps</a></li>
-    <li><hr class="dropdown-divider"/></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="1544" class="set_speed dropdown-item">T1 (1.544 Mbps)</a></li>
-    <li><a href="#" target="id_{{ widget.name }}" data="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
-  </ul>
-</div>