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

Rework filtering of tabbed list views - convert from javascript to HTMX #11090

New Issue
Open
opened 2025-12-29 21:40:10 +01:00 by adam · 1 comment
adam commented 2025-12-29 21:40:10 +01:00
Owner
Copy Link

Originally created by @arthanson on GitHub (Apr 25, 2025).

NetBox version

v4.2.8

Feature type

Change to existing functionality

Proposed functionality

Currently for related objects we present some of them as tabs under the detail view (for example look at a Device that has interfaces and click on the interfaces tab). We have some javascript filters under the Quick Search dropdown (see screenshot). The proposal is to potentially convert these to HTMX as these predate HTMX being in NetBox. But also look at re-working the UI to potentially provide a way to get to the normal filters to the list view.

These tabbed lists are a convenience and replicate functionality in the main list views, for example you can got to the Interfaces list and filter by a specific Device to get this list. Potential solutions:

  • Make the tabbed list views have all the filtering functionality of the main list views - so there is a button? that brings up the filtering dialog like on the main list views, also show the filter chits and allow saved filter functionality.
  • Use the current UX (but remove the saved filter dropdown) but convert the JS filters to HTMX. This would fix the display issues with the pagination buttons.
  • Instead of displaying the lists in tabs do what related objects do and just go the main list view that is filtered by the Device.

Image

Use case

There are several issues with the current implementation:

  • The drop-down are in javascript which is more difficult to change and replicates code that is much easier to implement in HTMX
  • The UI is limited (a dropdown without being able to enter in any parameters like the normal filtering), not very obvious as it is on the Quick Search.
  • The Saved filter dropdown appears on this page which does not work correctly.
  • If you do filter the items it can cause UX confusion as the pagination does not reflect the filtering, for example if you have more then one page of interfaces and don't have any interfaces that are disabled and you click hide disabled, your lists will show as empty but you will still have the pagination showing.

Database changes

None

External dependencies

None

Originally created by @arthanson on GitHub (Apr 25, 2025). ### NetBox version v4.2.8 ### Feature type Change to existing functionality ### Proposed functionality Currently for related objects we present some of them as tabs under the detail view (for example look at a Device that has interfaces and click on the interfaces tab). We have some javascript filters under the Quick Search dropdown (see screenshot). The proposal is to potentially convert these to HTMX as these predate HTMX being in NetBox. But also look at re-working the UI to potentially provide a way to get to the normal filters to the list view. These tabbed lists are a convenience and replicate functionality in the main list views, for example you can got to the Interfaces list and filter by a specific Device to get this list. Potential solutions: * Make the tabbed list views have all the filtering functionality of the main list views - so there is a button? that brings up the filtering dialog like on the main list views, also show the filter chits and allow saved filter functionality. * Use the current UX (but remove the saved filter dropdown) but convert the JS filters to HTMX. This would fix the display issues with the pagination buttons. * Instead of displaying the lists in tabs do what related objects do and just go the main list view that is filtered by the Device. ![Image](https://github.com/user-attachments/assets/3e8cfac9-bbd1-43e2-b446-e45f532e8df4) ### Use case There are several issues with the current implementation: * The drop-down are in javascript which is more difficult to change and replicates code that is much easier to implement in HTMX * The UI is limited (a dropdown without being able to enter in any parameters like the normal filtering), not very obvious as it is on the Quick Search. * The Saved filter dropdown appears on this page which does not work correctly. * If you do filter the items it can cause UX confusion as the pagination does not reflect the filtering, for example if you have more then one page of interfaces and don't have any interfaces that are disabled and you click hide disabled, your lists will show as empty but you will still have the pagination showing. ### Database changes None ### External dependencies None
adam added the type: featurecomplexity: mediumnetboxstatus: backlog labels 2025-12-29 21:40:10 +01:00
adam commented 2025-12-29 21:40:10 +01:00
Author
Owner
Copy Link

@pheus commented on GitHub (Apr 30, 2025):

Instead of displaying the lists in tabs do what related objects do and just go the main list view that is filtered by the Device.

As someone who has been using NetBox for several years across different environments and contexts, I just wanted to share a quick perspective. Many users - including myself - really appreciate the tabbed interface for providing contextual visibility into related models. While there are certainly limitations (as you mentioned), the current approach is more than sufficient for most daily tasks and offers a convenient way to switch between related objects without losing context.

I fully understand the desire to simplify or streamline things, but if possible, I’d like to kindly ask that the tabbed interface not be entirely replaced with redirects to the main list views. Maintaining some form of contextual integration would continue to be a great benefit for usability.

Regardless of the outcome, I want to sincerely thank you and the entire NetBox team for the incredible work on this project. It’s an outstanding open source tool, and your efforts are truly appreciated!

@pheus commented on GitHub (Apr 30, 2025): > Instead of displaying the lists in tabs do what related objects do and just go the main list view that is filtered by the Device. As someone who has been using NetBox for several years across different environments and contexts, I just wanted to share a quick perspective. Many users - including myself - really appreciate the tabbed interface for providing contextual visibility into related models. While there are certainly limitations (as you mentioned), the current approach is more than sufficient for most daily tasks and offers a convenient way to switch between related objects without losing context. I fully understand the desire to simplify or streamline things, but if possible, I’d like to kindly ask that the tabbed interface not be entirely replaced with redirects to the main list views. Maintaining some form of contextual integration would continue to be a great benefit for usability. Regardless of the outcome, I want to sincerely thank you and the entire NetBox team for the incredible work on this project. It’s an outstanding open source tool, and your efforts are truly appreciated!
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 complexity: medium netbox status: backlog type: feature
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#11090
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?