Overhaul UI and upgrade to Bootstrap 5

[jeremystretch]

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

[ryanmerolle]

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.

[jeremystretch]

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

[thatmattlove]

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.

[ryanmerolle]

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

[jeremystretch]

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.

[thatmattlove]

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.

[jeremystretch]

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.

[sdktr]

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

[jeremystretch]

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]

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]

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.