starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

[PR #2772] [MERGED] Select2 UI #12440

New Issue
Closed
opened 2025-12-29 22:21:35 +01:00 by adam · 0 comments
adam commented 2025-12-29 22:21:35 +01:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/netbox-community/netbox/pull/2772
Author: @lampwins
Created: 1/11/2019
Status: ✅ Merged
Merged: 1/16/2019
Merged by: @lampwins

Base: develop ← Head: select2-ui

📝 Commits (10+)

  • 28a02e9 initial select2 support
  • f3cfc17 fix processing of initial tags
  • 5285b69 updated filter-for attr handling
  • 81a0889 initial static select2 fields
  • 7a5a73c fixed whitespace
  • fca97f9 Merge branch 'develop' of github.com:digitalocean/netbox into select2-ui
  • c27cea9 select2 for all create/edit forms in dcim
  • 6d5d9c8 implemented #2590 - improved color picker with actual colors
  • 72d5c6f #2590 changelog
  • bf8d57c DCIM filter forms select2

📊 Changes

82 files changed (+16238 additions, -2694 deletions)

View changed files

📝 .gitignore (+2 -0)
📝 CHANGELOG.md (+1910 -1903)
📝 netbox/circuits/forms.py (+62 -28)
📝 netbox/dcim/filters.py (+11 -0)
📝 netbox/dcim/forms.py (+384 -212)
📝 netbox/ipam/forms.py (+256 -129)
📝 netbox/project-static/css/base.css (+111 -0)
📝 netbox/project-static/js/forms.js (+194 -108)
➕ netbox/project-static/select2-4.0.5/LICENSE.md (+21 -0)
➕ netbox/project-static/select2-4.0.5/README.md (+123 -0)
➕ netbox/project-static/select2-4.0.5/css/select2.css (+484 -0)
➕ netbox/project-static/select2-4.0.5/css/select2.min.css (+1 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/af.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/ar.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/az.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/bg.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/bs.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/ca.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/cs.js (+3 -0)
➕ netbox/project-static/select2-4.0.5/js/i18n/da.js (+3 -0)

...and 62 more files

📄 Description

Fixes: #2753

This PR formally implements support for Select2 as a NetBox standard replacement for most all regular Select fields in the web UI. Select2 allows a myriad of functionality including API backed selection, paging results, styling, and much more. Implementing Select2 allows us to consolidate many of the little things we have tried to do in the UI over time, with one awesome solution! Here is a summary of the changes.

Replacements

  • The Livesearch form widget and related form mechanics has been entirely replaced and removed.
  • All the JavaScript code (in forms.js and other template files) related to Chained Choice fields has been completely replaced and removed.
  • The tag field widgets in the UI have been replaced with appropriated Select2 multi-select fields.
  • All model selection fields have been replaced with API backed versions (no more worries about large result sets with new paging functionality!).
  • Standard multi-select fields (mostly in the list page filter forms) have been replaced with API backed Select2 multi-select fields.

Code Changes

NetBox has been using the concept of "Chained Choice Fields" for some time now and there are several intricate parts, particularly within the form widgets that make this all work. These mechanics have been refined, refactored, and/or implemented in new ways. Namely, there are now formal widget class params for filter_for, exclusion, conditional and additional element attributes. Also, by inverting the logic for how filter_for attributes are resolved before making an AJAX request, we completely remove the need to defined these as variable templates in the api_url, (e.g. ?site_id={{site}}&device_id={{device}}). Note that template variables are still supported in the URL path.

A new StaticSelect2() form widget has been introduced to support rendering a Select2 field for static choice fields. There is an important but subtle point there, that most everything is now controlled via the Django form classes. This means we should rarely have to touch the templates/JS to manipulate Select2 functionality down the road.

While all forms have seen slight modifications to adhere to the new APIs described above, a handful of forms have seen more drastic changes either because some fields like Livesearch are no longer needed, or because the overall flow of the form was not conducive to Select2 for some obtuse reason(s). Notably, the CableCreate and IPAddressAssign forms come to mind.

Most all of the list filter forms make use of annotated result sets to denote object counts for related fields. Sadly, we do not have the reasonable ability to do the same thing with API based result sets. This means the annotations were stripped away from the initial query sets (those rendered by the form itself). If the user base presents sufficient backlash to this, we may have to investigate what it would take to do this in the API.

The Region model is based on an MPTT tree field and its built-in form field produces result sets prefixed by a series of hyphens to denote visual parent/child relationships. Again, we can't do this sort of thing in the API in a single request to the region fields have been replaced by standard model choice fields. For the above two points, I strongly feel the excellent search capabilities in Select2 which are now exposed on nearly all select fields will make these moot points.

Some API model list endpoints did not support a q filter param, and in such cases that filter was added.

The ChainedFieldsMixin was modified so that filter chains are not required. Meaning a null value for a chain field will not result in a modified queryset unless that field is explicitly marked as nullable. This is because Select2 allows the final field in the chain (most often the only field in the chain which is an actual model field) to show results without the need for prior filters.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/netbox-community/netbox/pull/2772 **Author:** [@lampwins](https://github.com/lampwins) **Created:** 1/11/2019 **Status:** ✅ Merged **Merged:** 1/16/2019 **Merged by:** [@lampwins](https://github.com/lampwins) **Base:** `develop` ← **Head:** `select2-ui` --- ### 📝 Commits (10+) - [`28a02e9`](https://github.com/netbox-community/netbox/commit/28a02e994329e713a3f7494ab6cc58d0cdfd6b93) initial select2 support - [`f3cfc17`](https://github.com/netbox-community/netbox/commit/f3cfc17a52f874d74d32042d22bf9b759c715f02) fix processing of initial tags - [`5285b69`](https://github.com/netbox-community/netbox/commit/5285b6926ff0b1d419154f78ee95f758ee2a3e54) updated filter-for attr handling - [`81a0889`](https://github.com/netbox-community/netbox/commit/81a0889568eccd1e977604836791c81a3f82bc90) initial static select2 fields - [`7a5a73c`](https://github.com/netbox-community/netbox/commit/7a5a73ce34523c05327d1a7cb0c40181f1e56df5) fixed whitespace - [`fca97f9`](https://github.com/netbox-community/netbox/commit/fca97f9768458273c2f146905c4c8bd1a7043e3d) Merge branch 'develop' of github.com:digitalocean/netbox into select2-ui - [`c27cea9`](https://github.com/netbox-community/netbox/commit/c27cea981c6b0f018e7ab98a9756f68d68b7fb67) select2 for all create/edit forms in dcim - [`6d5d9c8`](https://github.com/netbox-community/netbox/commit/6d5d9c8af34ed1c5cff219add9a28cff34e6c5b8) implemented #2590 - improved color picker with actual colors - [`72d5c6f`](https://github.com/netbox-community/netbox/commit/72d5c6fd1b39d73c2c27647ca35aa01dc0fcb0df) #2590 changelog - [`bf8d57c`](https://github.com/netbox-community/netbox/commit/bf8d57c7d1b7c6b0e0ef62d6f932810ee78d67d0) DCIM filter forms select2 ### 📊 Changes **82 files changed** (+16238 additions, -2694 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+2 -0) 📝 `CHANGELOG.md` (+1910 -1903) 📝 `netbox/circuits/forms.py` (+62 -28) 📝 `netbox/dcim/filters.py` (+11 -0) 📝 `netbox/dcim/forms.py` (+384 -212) 📝 `netbox/ipam/forms.py` (+256 -129) 📝 `netbox/project-static/css/base.css` (+111 -0) 📝 `netbox/project-static/js/forms.js` (+194 -108) ➕ `netbox/project-static/select2-4.0.5/LICENSE.md` (+21 -0) ➕ `netbox/project-static/select2-4.0.5/README.md` (+123 -0) ➕ `netbox/project-static/select2-4.0.5/css/select2.css` (+484 -0) ➕ `netbox/project-static/select2-4.0.5/css/select2.min.css` (+1 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/af.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/ar.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/az.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/bg.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/bs.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/ca.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/cs.js` (+3 -0) ➕ `netbox/project-static/select2-4.0.5/js/i18n/da.js` (+3 -0) _...and 62 more files_ </details> ### 📄 Description <!-- Thank you for your interest in contributing to NetBox! Please note that our contribution policy requires that a feature request or bug report be opened for approval prior to filing a pull request. This helps avoid wasting time and effort on something that we might not be able to accept. Please indicate the relevant feature request or bug report below. IF YOUR PULL REQUEST DOES NOT REFERENCE AN ACCEPTED BUG REPORT OR FEATURE REQUEST, IT WILL BE MARKED AS INVALID AND CLOSED. --> ### Fixes: #2753 This PR formally implements support for [Select2](https://select2.org) as a NetBox standard replacement for most all regular Select fields in the web UI. Select2 allows a myriad of functionality including API backed selection, paging results, styling, and much more. Implementing Select2 allows us to consolidate many of the little things we have tried to do in the UI over time, with one awesome solution! Here is a summary of the changes. ### Replacements - The `Livesearch` form widget and related form mechanics has been entirely replaced and removed. - All the JavaScript code (in forms.js and other template files) related to Chained Choice fields has been completely replaced and removed. - The tag field widgets in the UI have been replaced with appropriated Select2 multi-select fields. - All model selection fields have been replaced with API backed versions (no more worries about large result sets with new paging functionality!). - Standard multi-select fields (mostly in the list page filter forms) have been replaced with API backed Select2 multi-select fields. ### Code Changes NetBox has been using the concept of "Chained Choice Fields" for some time now and there are several intricate parts, particularly within the form widgets that make this all work. These mechanics have been refined, refactored, and/or implemented in new ways. Namely, there are now formal widget class params for `filter_for`, `exclusion`, `conditional` and `additional` element attributes. Also, by inverting the logic for how `filter_for` attributes are resolved before making an AJAX request, we completely remove the need to defined these as variable templates in the `api_url`, (e.g. `?site_id={{site}}&device_id={{device}}`). Note that template variables are still supported in the URL path. A new `StaticSelect2()` form widget has been introduced to support rendering a Select2 field for static choice fields. There is an important but subtle point there, that most everything is now controlled via the Django form classes. This means we should rarely have to touch the templates/JS to manipulate Select2 functionality down the road. While all forms have seen slight modifications to adhere to the new APIs described above, a handful of forms have seen more drastic changes either because some fields like Livesearch are no longer needed, or because the overall flow of the form was not conducive to Select2 for some obtuse reason(s). Notably, the CableCreate and IPAddressAssign forms come to mind. Most all of the list filter forms make use of annotated result sets to denote object counts for related fields. Sadly, we do not have the reasonable ability to do the same thing with API based result sets. This means the annotations were stripped away from the initial query sets (those rendered by the form itself). If the user base presents sufficient backlash to this, we may have to investigate what it would take to do this in the API. The Region model is based on an MPTT tree field and its built-in form field produces result sets prefixed by a series of hyphens to denote visual parent/child relationships. Again, we can't do this sort of thing in the API in a single request to the region fields have been replaced by standard model choice fields. For the above two points, I strongly feel the excellent search capabilities in Select2 which are now exposed on nearly all select fields will make these moot points. Some API model list endpoints did not support a `q` filter param, and in such cases that filter was added. The `ChainedFieldsMixin` was modified so that filter chains are not required. Meaning a null value for a chain field will not result in a modified queryset unless that field is explicitly marked as nullable. This is because Select2 allows the final field in the chain (most often the only field in the chain which is an actual model field) to show results without the need for prior filters. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2025-12-29 22:21:35 +01:00
adam closed this issue 2025-12-29 22:21:35 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#12440
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?