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

"Mark planned" doesn't immediately change row highlight colour #8584

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

Originally created by @pv2b on GitHub (Sep 7, 2023).

Originally assigned to: @pv2b on GitHub.

NetBox version

v3.6.1

Python version

3.11

Steps to Reproduce

Prerequisites: You need a device with a cable attached to one of its interfaces. The interface should not be disabled.

Since it's a client-side issue it's not impossible that the problem is browser specific. In case it turns out to be browser-specific, I've observed this behaviour on Firefox 117.0.

  1. Open the "interfaces" view of the device in question.
  2. Locate an interface with a cable connected to it. Note that the background colour of the row in the table is green to indicate it has a connected cable.
  3. Click on the "marked planned" button (the third button from the right)
  4. Notice that the colour of the button changed from yellow to blue to indicate that the cable is now planned, and no longer installed. However notice that the background colour of the row is still green.
  5. Refresh the page, and notice that the background colour of the row is now correctly blue.

Expected Behavior

The background colour of the row should have changed from blue to green as soon as the "Mark Planned" button was clicked.

Observed Behavior

The background colour of the row did not change, and a page refresh was required to correctly display the current state.

(P.S. I'm willing to troubleshoot this issue and produce a PR, but as per project rules, I cannot do this before the issue has been accepted and assigned to me.)

Originally created by @pv2b on GitHub (Sep 7, 2023). Originally assigned to: @pv2b on GitHub. ### NetBox version v3.6.1 ### Python version 3.11 ### Steps to Reproduce Prerequisites: You need a device with a cable attached to one of its interfaces. The interface should not be disabled. Since it's a client-side issue it's not impossible that the problem is browser specific. In case it turns out to be browser-specific, I've observed this behaviour on Firefox 117.0. 1. Open the "interfaces" view of the device in question. 2. Locate an interface with a cable connected to it. Note that the background colour of the row in the table is green to indicate it has a connected cable. 3. Click on the "marked planned" button (the third button from the right) 4. Notice that the colour of the button changed from yellow to blue to indicate that the cable is now planned, and no longer installed. However notice that the background colour of the row is still green. 5. Refresh the page, and notice that the background colour of the row is now correctly blue. ### Expected Behavior The background colour of the row should have changed from blue to green as soon as the "Mark Planned" button was clicked. ### Observed Behavior The background colour of the row did not change, and a page refresh was required to correctly display the current state. (P.S. I'm willing to troubleshoot this issue and produce a PR, but as per project rules, I cannot do this before the issue has been accepted and assigned to me.)
adam added the type: bugstatus: acceptedtopic: UI/UXseverity: low labels 2025-12-29 20:38:29 +01:00
adam closed this issue 2025-12-29 20:38:30 +01:00
adam commented 2025-12-29 20:38:30 +01:00
Author
Owner
Copy Link

@pv2b commented on GitHub (Sep 7, 2023):

To exclude this being browser-specific, I've also tested this on Microsoft Edge Version 116.0.1938.69. The exact same behaviour appears there, so this is not browser-specific.

@pv2b commented on GitHub (Sep 7, 2023): To exclude this being browser-specific, I've also tested this on Microsoft Edge Version 116.0.1938.69. The exact same behaviour appears there, so this is not browser-specific.
adam commented 2025-12-29 20:38:30 +01:00
Author
Owner
Copy Link

@pv2b commented on GitHub (Sep 17, 2023):

I took a look at this, I believe the problem is here:

2dfbd72f10/netbox/project-static/src/buttons/connectionToggle.ts (L27-L28)

and here:

2dfbd72f10/netbox/project-static/src/buttons/connectionToggle.ts (L35-L36)

This code seems to be intended to replace the info class with success on the row and vide versa, but probably somewhere along the line during the development process of Netbox, the classes for the row changes from info and success to green and blue.

The "quick fix" would probably be to just change these colours to the proper ones, but that would likely be incomplete because different row colours can happen in different scenarios, and anyway, you'd end up with some fairly complicated logic for class selection, so in order to fix this properly some refactoring would be in order.

One possible approach would be to factor any logic for styling of rows out of the Jinja2 templates. Instead, the templates would only apply styles as "cable-connected" or "cable-planned" or "interface-disabled" etc to the rows, and then use CSS to handle the presentation details. All the connectionToggle javascript toggle would then have to do would be to remove/add the cable-planned class to the row. The style of the button itself could also probably inherit somehow from the style of the parent row.

Anyway, still willing to take a stab at this, but my favored approach would probably involve some significant refactoring of the styling of table rows, and would probably have to involve cable connections not just on interfaces, but other pages as well.

@pv2b commented on GitHub (Sep 17, 2023): I took a look at this, I believe the problem is here: https://github.com/netbox-community/netbox/blob/2dfbd72f10f8bfddbee3c54a275d73c953d0af4b/netbox/project-static/src/buttons/connectionToggle.ts#L27-L28 and here: https://github.com/netbox-community/netbox/blob/2dfbd72f10f8bfddbee3c54a275d73c953d0af4b/netbox/project-static/src/buttons/connectionToggle.ts#L35-L36 This code seems to be intended to replace the info class with success on the row and vide versa, but probably somewhere along the line during the development process of Netbox, the classes for the row changes from info and success to green and blue. The "quick fix" would probably be to just change these colours to the proper ones, but that would likely be incomplete because different row colours can happen in different scenarios, and anyway, you'd end up with some fairly complicated logic for class selection, so in order to fix this properly some refactoring would be in order. One possible approach would be to factor any logic for styling of rows out of the Jinja2 templates. Instead, the templates would only apply styles as "cable-connected" or "cable-planned" or "interface-disabled" etc to the rows, and then use CSS to handle the presentation details. All the connectionToggle javascript toggle would then have to do would be to remove/add the cable-planned class to the row. The style of the button itself could also probably inherit somehow from the style of the parent row. Anyway, still willing to take a stab at this, but my favored approach would probably involve some significant refactoring of the styling of table rows, and would probably have to involve cable connections not just on interfaces, but other pages as well.
adam commented 2025-12-29 20:38:31 +01:00
Author
Owner
Copy Link

@DanSheps commented on GitHub (Jan 23, 2024):

Since the previous issue was closed due to a lack of activity, I am putting this back to needs owner for now. If someone would like to take this on, just reply here.

@DanSheps commented on GitHub (Jan 23, 2024): Since the previous issue was closed due to a lack of activity, I am putting this back to needs owner for now. If someone would like to take this on, just reply here.
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 severity: low status: accepted topic: UI/UX type: bug
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#8584
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?