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

Overhaul UI and upgrade to Bootstrap 5 #4607

New Issue
Closed
opened 2025-12-29 18:38:11 +01:00 by adam · 11 comments
adam commented 2025-12-29 18:38:11 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (Feb 27, 2021).

Originally assigned to: @thatmattlove on GitHub.

Proposed Changes

NetBox currently uses the outdated Bootstrap 3 CSS/JS framework for its user interface. Bootstrap 5 is currently in late beta and should be released in the near future. This issue proposes adopting BS5, and in the process giving the entire UI a substantial refresh.

However, as @checktheroads notes in a recent discussion, it's worth noting that BS5 explicitly drops support for Internet Explorer (in favor of Edge). If the community is opposed to this, we can consider adopting BS4 instead.

If accepted, I am willing to take the lead on this initiative. I've already been experimenting with some layouts and templates offline, and am encouraged by my progress thus far.

Justification

  • Modernizes the UI
  • BS5 introduces a suite of utility classes that allows for more flexible customization
Originally created by @jeremystretch on GitHub (Feb 27, 2021). Originally assigned to: @thatmattlove on GitHub. ### Proposed Changes NetBox currently uses the outdated Bootstrap 3 CSS/JS framework for its user interface. [Bootstrap 5](https://getbootstrap.com/) is currently in late beta and should be released in the near future. This issue proposes adopting BS5, and in the process giving the entire UI a substantial refresh. However, as @checktheroads notes in a [recent discussion](https://github.com/netbox-community/netbox/discussions/5782#discussioncomment-407811), it's worth noting that BS5 explicitly [drops support for Internet Explorer](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/) (in favor of Edge). If the community is opposed to this, we can consider adopting BS4 instead. If accepted, I am willing to take the lead on this initiative. I've already been experimenting with some layouts and templates offline, and am encouraged by my progress thus far. ### Justification - Modernizes the UI - BS5 introduces a suite of utility classes that allows for more flexible customization
adam added the status: acceptedtype: housekeeping labels 2025-12-29 18:38:11 +01:00
adam closed this issue 2025-12-29 18:38:11 +01:00
adam commented 2025-12-29 18:38:12 +01:00
Author
Owner
Copy Link

@ryanmerolle commented on GitHub (Feb 27, 2021):

I say death to IE, but seriously most people using NetBox have other means of browsers these days. Nearly all shops allow Chrome.

A drop for internet explorer may not even kill the entire usability but just greatly hamper the new functionality. Which might not be the end of the world.

@ryanmerolle commented on GitHub (Feb 27, 2021): I say death to IE, but seriously most people using NetBox have other means of browsers these days. Nearly all shops allow Chrome. A drop for internet explorer may not even kill the entire usability but just greatly hamper the new functionality. Which might not be the end of the world.
adam commented 2025-12-29 18:38:12 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Feb 27, 2021):

I also have to think that organizations stuck on Internet Explorer probably aren't running the latest and greatest NetBox release right away either.

@jeremystretch commented on GitHub (Feb 27, 2021): I also have to think that organizations stuck on Internet Explorer _probably_ aren't running the latest and greatest NetBox release right away either.
adam commented 2025-12-29 18:38:13 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (Feb 27, 2021):

To add some clarity, the list of browsers Bootstrap 5 supports is here. TL;DR: Everything except IE. It's worth noting that I (re)built hyperglass with React and several other dependencies, and inadvertently dropped IE support. I've yet to hear a word from any users that this has been a problem (and this is an app meant to be end-user facing!). Additionally, my organization's website has been IE-free for over a year with nary a complaint.

It's also worth noting that one of the other major CSS frameworks out there — Tailwind — also no longer supports IE. I tend to agree with both @jeremystretch & @ryanmerolle — it's likely that either Netbox users are already using a modern browser, or if not, they're probably not running modern Netbox.

I would also be willing to contribute heavily to this. Something else to note with Bootstrap 5 is that jQuery is no longer a dependency. I think this is excellent - I'm very much in favor of jQuery dying a firey death. However, I'm sure much of the Javascript written for NetBox would need to be refactored to vanilla JS in order to drop the jQuery dependency. I'd be happy to help with this as well.

@thatmattlove commented on GitHub (Feb 27, 2021): To add some clarity, the list of browsers Bootstrap 5 supports is [here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/). TL;DR: Everything except IE. It's worth noting that I (re)built [hyperglass](https://github.com/checktheroads/hyperglass) with React and several other dependencies, and inadvertently dropped IE support. I've yet to hear a word from any users that this has been a problem (and this is an app meant to be end-user facing!). Additionally, my organization's website has been IE-free for over a year with nary a complaint. It's also worth noting that one of the other major CSS frameworks out there — [Tailwind](https://tailwindcss.com/) — also no longer supports IE. I tend to agree with both @jeremystretch & @ryanmerolle — it's likely that either Netbox users are already using a modern browser, or if not, they're probably not running modern Netbox. I would also be willing to contribute heavily to this. Something else to note with Bootstrap 5 is that jQuery is no longer a dependency. I think this is excellent - I'm very much in favor of jQuery dying a firey death. However, I'm sure much of the Javascript written for NetBox would need to be refactored to vanilla JS in order to drop the jQuery dependency. I'd be happy to help with this as well.
adam commented 2025-12-29 18:38:13 +01:00
Author
Owner
Copy Link

@ryanmerolle commented on GitHub (Feb 27, 2021):

@checktheroads I never heard of hyperglass, but you got me intrigued.

@ryanmerolle commented on GitHub (Feb 27, 2021): @checktheroads I never heard of hyperglass, but you got me intrigued.
adam commented 2025-12-29 18:38:13 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Feb 27, 2021):

I would also be willing to contribute heavily to this.

Awesome!

I'm sure much of the Javascript written for NetBox would need to be refactored to vanilla JS in order to drop the jQuery dependency.

I think the biggest hurdle is going to be Select2, which I think relies jQuery. I haven't started digging into it yet though.

@jeremystretch commented on GitHub (Feb 27, 2021): > I would also be willing to contribute heavily to this. Awesome! > I'm sure much of the Javascript written for NetBox would need to be refactored to vanilla JS in order to drop the jQuery dependency. I think the biggest hurdle is going to be Select2, which I think relies jQuery. I haven't started digging into it yet though.
adam commented 2025-12-29 18:38:13 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (Feb 27, 2021):

Choices.JS seems to be the defacto jQuery-free solution. I've not played with it, but the API looks reasonable enough. As long as we can get the styling right, it should do the job.

@thatmattlove commented on GitHub (Feb 27, 2021): [Choices.JS](https://github.com/jshjohnson/Choices) seems to be the defacto jQuery-free solution. I've not played with it, but the API looks reasonable enough. As long as we can get the styling right, it _should_ do the job.
adam commented 2025-12-29 18:38:13 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Feb 27, 2021):

Well I'm pumped to knock this out. Let's sync up sometime next week and see if we can come up with a plan of attack.

@jeremystretch commented on GitHub (Feb 27, 2021): Well I'm pumped to knock this out. Let's sync up sometime next week and see if we can come up with a plan of attack.
adam commented 2025-12-29 18:38:14 +01:00
Author
Owner
Copy Link

@sdktr commented on GitHub (Mar 1, 2021):

Before rebuilding the UI and putting significant work into it I want to raise the following point:
Shouldn't the Netbox UI be an API-client of the Netbox REST API? With a correctly documented OpenAPI spec a good frontend framework would be able to pick up the hard work of CRUD action generation.
It would save some work on the duplicate code parts that cause divergent behaviour between Netbox UI and Netbox API every now and then.

I'm not stating implementing a complete new UI method is a small task (at all!), just that work on an upgraded bootstrap might be redundant if this path would be desired in the long run.

Example frontend generator code for OpenAPI spec'd backend

@sdktr commented on GitHub (Mar 1, 2021): Before rebuilding the UI and putting significant work into it I want to raise the following point: Shouldn't the Netbox UI be an API-client of the Netbox REST API? With a correctly documented OpenAPI spec a good frontend framework would be able to pick up the hard work of CRUD action generation. It would save some work on the duplicate code parts that cause divergent behaviour between Netbox UI and Netbox API every now and then. I'm not stating implementing a complete new UI method is a small task (at all!), just that work on an upgraded bootstrap might be redundant if this path would be desired in the long run. [Example frontend generator code for OpenAPI spec'd backend](https://github.com/api-platform/client-generator)
adam commented 2025-12-29 18:38:14 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Mar 1, 2021):

Shouldn't the Netbox UI be an API-client of the Netbox REST API?

Ideally, yes, and we've discussed this a good deal, but the practical challenges of implementing this are enormous. Until we can secure the resources necessary for such an endeavor, we should stick with cosmetic changes, which need to be done anyway.

Edit: The migration to a fully API-backed UI will likely effect "NetBox v3.0" and will require substantial changes to the REST API. To avoid confusion, it should be undertaken as its own separate initiative, and not bundled with the more routine features and data model changes that we see implemented in 2.x releases.

@jeremystretch commented on GitHub (Mar 1, 2021): > Shouldn't the Netbox UI be an API-client of the Netbox REST API? Ideally, yes, and we've discussed this a good deal, but the practical challenges of implementing this are enormous. Until we can secure the resources necessary for such an endeavor, we should stick with cosmetic changes, which need to be done anyway. Edit: The migration to a fully API-backed UI will likely effect "NetBox v3.0" and will require substantial changes to the REST API. To avoid confusion, it should be undertaken as its own separate initiative, and not bundled with the more routine features and data model changes that we see implemented in 2.x releases.
adam commented 2025-12-29 18:38:14 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Mar 2, 2021):

I spoke with @checktheroads @DanSheps and @ryanmerolle about this initiative in detail today. We've identified a few key areas of improvement:

  • Restructure the existing Django templates to reduce redundancy and cruft
  • Adopt a bundling framework (e.g. Webpack or Rollup) to improve bundling of JS and CSS resources
  • Eliminate our dependency on jQuery and jQuery-UI
  • Change the layout to a dashboard style and adopt a more custom look

Obviously, nothing is set in stone at this point, but I feel like we have a solid plan of attack, and a real shot at getting this done as part of the v2.11 release. I'm going to start on cleaning up the templates this week, and @checktheroads will start on adopting a bundling framework and determining our options for replace jQuery. We won't be pursuing an API-backed frontend for this release, however this work should make doing so in the future (e.g. for v3.0) much more attainable.

@jeremystretch commented on GitHub (Mar 2, 2021): I spoke with @checktheroads @DanSheps and @ryanmerolle about this initiative in detail today. We've identified a few key areas of improvement: - Restructure the existing Django templates to reduce redundancy and cruft - Adopt a bundling framework (e.g. Webpack or Rollup) to improve bundling of JS and CSS resources - Eliminate our dependency on jQuery and jQuery-UI - Change the layout to a dashboard style and adopt a more custom look Obviously, nothing is set in stone at this point, but I feel like we have a solid plan of attack, and a real shot at getting this done as part of the v2.11 release. I'm going to start on cleaning up the templates this week, and @checktheroads will start on adopting a bundling framework and determining our options for replace jQuery. We won't be pursuing an API-backed frontend for this release, however this work should make doing so in the future (e.g. for v3.0) much more attainable.
adam commented 2025-12-29 18:38:14 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Mar 26, 2021):

After speaking with @checktheroads and the other maintainers, we've decided to push the UI work back to v2.12 to avoid jamming too much change into a single release. This decision allows us to release v2.11 much sooner than anticipated, and ensures that the UI overhaul isn't rushed.

@jeremystretch commented on GitHub (Mar 26, 2021): After speaking with @checktheroads and the other maintainers, we've decided to push the UI work back to v2.12 to avoid jamming too much change into a single release. This decision allows us to release v2.11 much sooner than anticipated, and ensures that the UI overhaul isn't rushed.
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 status: accepted type: housekeeping
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#4607
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?