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 #13874] [MERGED] Refactor row coloring logic and simplify mark planned/connected toggle implementation #14269

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

📋 Pull Request Information

Original PR: https://github.com/netbox-community/netbox/pull/13874
Author: @pv2b
Created: 9/24/2023
Status: ✅ Merged
Merged: 4/23/2024
Merged by: @DanSheps

Base: develop ← Head: choices-css-rewrite

📝 Commits (10+)

  • d76ede1 Add data properties for device interface table
  • 41e1f24 Add --nbx-color-* variables for theme colors
  • d44f67a Add 15% alpha variants of --nbx-color
  • 27864ec Move DeviceInterfaceTable coloring logic into CSS
  • 83e2c45 Simplify mark connected/installed implementation
  • c728d3c Fix formatting
  • da7f67c Refactor noisy getter methods into neat lambdas
  • bf362f4 Hardcode cable status colours
  • c93413d Move interface colour logic into SCSS where it belongs
  • 8fadd6b Merge branch 'develop' into choices-css-rewrite

📊 Changes

9 files changed (+72 additions, -81 deletions)

View changed files

📝 netbox/dcim/tables/devices.py (+5 -32)
📝 netbox/project-static/dist/netbox-dark.css (+1 -1)
📝 netbox/project-static/dist/netbox-light.css (+1 -1)
📝 netbox/project-static/dist/netbox-print.css (+1 -1)
📝 netbox/project-static/dist/netbox.js (+9 -9)
📝 netbox/project-static/dist/netbox.js.map (+1 -1)
📝 netbox/project-static/src/buttons/connectionToggle.ts (+10 -26)
📝 netbox/project-static/styles/netbox.scss (+38 -1)
📝 netbox/templates/dcim/inc/cable_toggle_buttons.html (+6 -9)

📄 Description

Fixes: #13712 and #13806.

As I mentioned in the discussion of #13712, the root cause of the fact that this bug happens in the first place is that the current approach in Netbox to toggling cable state implements styling logic for interface rows in two distinct places, one which is server-side by applying CSS classes to table rows depending on different criteria, and again on the client-side by updating the DOM after the fact.

These two implementation had slipped out of sync at some point, which caused the bug to appear.

To fix the root problem, which is a duplication of logic, I have refactored the row coloring logic to fully happen in CSS. This makes sense, because setting colors of table rows is styling, so it makes sense to do that in CSS. To do this, the following enhancements needed to be made:

  • Adding data attributes to table rows representing virtual interface type, mark connected, as well as cable state. This is so that we can define CSS attribute selectors for said interface connection states.
  • Creating CSS variables for colors for choices. This is so that these colors can then be referenced by name in the runtime-generated CSS for styling rows.
  • Dynamically generating stylesheets based on available choices. This has to happen at runtime because connection states are potentially user-customizable.

This allowed the code implementing the toggle button for cable state to be substantially simplified. Instead of generating a single button at template render time depending on the current cable state, both buttons are now just always generated, and hidden/shown depending on the current state of the cable (as per the attribute on the table row). Visually the effect is the same, and code-wise, it's a lot simpler. The only element the Typescript current twiddles in the DOM is now the data-cable-status attribute of the table row, the CSS does the rest, including showing the correct buttons and coloring the rows.

Now, this pull request is likely not acceptable in its current state. A few issues I've already identified:

  • Cable connection states are not only togglable in Device Interface Views, but in several other places. For consistency, this should be updated across the board. In fact, I've probably broken these buttons in other views in the current state of the PR.
  • I'm not sure if I've added the new CSS styles in the right place. The "choice-based" colour styles by neccessity need to be generated at runtime and putting them in the dcim/device/interfaces.html template's head block was the easiest solution. I'm open for any opinions on whether these CSS styles need to be moved. For now I just did the simplest thing that could possibly work as a proof-of-concept, but ultimately this is a design decision.

Anyway, before I put in any more work into this PR to finish it, I'd like some feedback at least on the above points, and whether you agree with the general direction I'm going with this, because it turns out this was much more than a simple bugfix. If you're looking for a simpler "bugfix" type change that doesn't address the underlying issue, there's also my first stab at it, at #13807, but that's just likely to break again because it doesn't address the repetition of logic.

🔄 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/13874 **Author:** [@pv2b](https://github.com/pv2b) **Created:** 9/24/2023 **Status:** ✅ Merged **Merged:** 4/23/2024 **Merged by:** [@DanSheps](https://github.com/DanSheps) **Base:** `develop` ← **Head:** `choices-css-rewrite` --- ### 📝 Commits (10+) - [`d76ede1`](https://github.com/netbox-community/netbox/commit/d76ede17d30548d311b89c33ae77377909f3b2dc) Add data properties for device interface table - [`41e1f24`](https://github.com/netbox-community/netbox/commit/41e1f24cf7c1c7431088eda7e9feebd323e9711b) Add --nbx-color-* variables for theme colors - [`d44f67a`](https://github.com/netbox-community/netbox/commit/d44f67aea5c37d43075ef81a94ccaeff964c02a6) Add 15% alpha variants of --nbx-color - [`27864ec`](https://github.com/netbox-community/netbox/commit/27864ec8653e32f938ec04fc7120cb60f245ca4d) Move DeviceInterfaceTable coloring logic into CSS - [`83e2c45`](https://github.com/netbox-community/netbox/commit/83e2c45e74e2a28df8c9b3b42a89fd61788f631d) Simplify mark connected/installed implementation - [`c728d3c`](https://github.com/netbox-community/netbox/commit/c728d3c2e83cbfebfacf564ea8d3dae79dedd5ac) Fix formatting - [`da7f67c`](https://github.com/netbox-community/netbox/commit/da7f67c35951d54d7d6c318fe134574538aa7ec5) Refactor noisy getter methods into neat lambdas - [`bf362f4`](https://github.com/netbox-community/netbox/commit/bf362f4679f9d9c30519ea1ce80076c59a79e8c2) Hardcode cable status colours - [`c93413d`](https://github.com/netbox-community/netbox/commit/c93413dc9c14a76d70e55b39b44ce60ca6940623) Move interface colour logic into SCSS where it belongs - [`8fadd6b`](https://github.com/netbox-community/netbox/commit/8fadd6b744cdad4bdd656bc8ca95966e28768f57) Merge branch 'develop' into choices-css-rewrite ### 📊 Changes **9 files changed** (+72 additions, -81 deletions) <details> <summary>View changed files</summary> 📝 `netbox/dcim/tables/devices.py` (+5 -32) 📝 `netbox/project-static/dist/netbox-dark.css` (+1 -1) 📝 `netbox/project-static/dist/netbox-light.css` (+1 -1) 📝 `netbox/project-static/dist/netbox-print.css` (+1 -1) 📝 `netbox/project-static/dist/netbox.js` (+9 -9) 📝 `netbox/project-static/dist/netbox.js.map` (+1 -1) 📝 `netbox/project-static/src/buttons/connectionToggle.ts` (+10 -26) 📝 `netbox/project-static/styles/netbox.scss` (+38 -1) 📝 `netbox/templates/dcim/inc/cable_toggle_buttons.html` (+6 -9) </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 approved and assigned prior to opening a pull request. This helps avoid waste time and effort on a proposed change that we might not be able to accept. IF YOUR PULL REQUEST DOES NOT REFERENCE AN ISSUE WHICH HAS BEEN ASSIGNED TO YOU, IT WILL BE CLOSED AUTOMATICALLY. Please specify your assigned issue number on the line below. --> ### Fixes: #13712 and #13806. <!-- Please include a summary of the proposed changes below. --> As I mentioned in the discussion of #13712, the root cause of the fact that this bug happens in the first place is that the current approach in Netbox to toggling cable state implements styling logic for interface rows in two distinct places, one which is server-side by applying CSS classes to table rows depending on different criteria, and again on the client-side by updating the DOM after the fact. These two implementation had slipped out of sync at some point, which caused the bug to appear. To fix the root problem, which is a duplication of logic, I have refactored the row coloring logic to fully happen in CSS. This makes sense, because setting colors of table rows is styling, so it makes sense to do that in CSS. To do this, the following enhancements needed to be made: - Adding data attributes to table rows representing virtual interface type, mark connected, as well as cable state. This is so that we can define CSS attribute selectors for said interface connection states. - Creating CSS variables for colors for choices. This is so that these colors can then be referenced by name in the runtime-generated CSS for styling rows. - Dynamically generating stylesheets based on available choices. This has to happen at runtime because connection states are potentially user-customizable. This allowed the code implementing the toggle button for cable state to be substantially simplified. Instead of generating a single button at template render time depending on the current cable state, both buttons are now just always generated, and hidden/shown depending on the current state of the cable (as per the attribute on the table row). Visually the effect is the same, and code-wise, it's a lot simpler. The only element the Typescript current twiddles in the DOM is now the data-cable-status attribute of the table row, the CSS does the rest, including showing the correct buttons and coloring the rows. Now, this pull request is likely *not* acceptable in its current state. A few issues I've already identified: - Cable connection states are not only togglable in Device Interface Views, but in several other places. For consistency, this should be updated across the board. In fact, I've probably broken these buttons in other views in the current state of the PR. - I'm not sure if I've added the new CSS styles in the right place. The "choice-based" colour styles by neccessity need to be generated at runtime and putting them in the dcim/device/interfaces.html template's head block was the easiest solution. I'm open for any opinions on whether these CSS styles need to be moved. For now I just did the simplest thing that could possibly work as a proof-of-concept, but ultimately this is a design decision. Anyway, before I put in any more work into this PR to finish it, I'd like some feedback at least on the above points, and whether you agree with the general direction I'm going with this, because it turns out this was much more than a simple bugfix. If you're looking for a simpler "bugfix" type change that doesn't address the underlying issue, there's also my first stab at it, at #13807, but that's just likely to break again because it doesn't address the repetition of logic. --- <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 23:23:31 +01:00
adam closed this issue 2025-12-29 23:23:31 +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#14269
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?