Rack view - Modal for actions (assign device or create device) #11834

New Issue

adam · 2025-12-29T21:50:26+01:00

adam commented

2025-12-29 21:50:26 +01:00

Originally created by @xkilian on GitHub (Nov 14, 2025).

NetBox version

v4.4.5

Feature type

Data model extension

Proposed functionality

In the Rack view, when clicking on a free U position, pop-up a modal to choose that action to take:

Assign Device to this position
Additional smaller Text: This will place the device at the selected position and take up any lower positions if it is larger.
Create new Device in this position
Additional smaller Text: This create a new device at the selected position and take up any lower positions if it is larger.

Use case

Assigning a device to a Rack in the Rack View is much more intuitive when the device already exists but has not yet been assigned to a Rack.
This will also remove ambiguity that is currently present between Assigning a Device to a Rack versus Areating a new Device to a Rack.

Database changes

No response

External dependencies

No response

Originally created by @xkilian on GitHub (Nov 14, 2025). ### NetBox version v4.4.5 ### Feature type Data model extension ### Proposed functionality In the Rack view, when clicking on a free U position, pop-up a modal to choose that action to take: Assign Device to this position Additional smaller Text: This will place the device at the selected position and take up any lower positions if it is larger. Create new Device in this position Additional smaller Text: This create a new device at the selected position and take up any lower positions if it is larger. ### Use case Assigning a device to a Rack in the Rack View is much more intuitive when the device already exists but has not yet been assigned to a Rack. This will also remove ambiguity that is currently present between Assigning a Device to a Rack versus Areating a new Device to a Rack. ### Database changes _No response_ ### External dependencies _No response_

adam added the type: feature status: needs owner netbox labels 2025-12-29 21:50:26 +01:00

adam commented

2025-12-29 21:50:27 +01:00

@jeremystretch commented on GitHub (Nov 20, 2025):

One problem I see with this proposal is that the SVG must embeddable in external pages (not just the native NetBox UI), so some external Javascript would be needed to override the hyperlink on the rack unit element. I'll open this for anyone who would like to take a stab at this.

@jeremystretch commented on GitHub (Nov 20, 2025): One problem I see with this proposal is that the SVG must embeddable in external pages (not just the native NetBox UI), so some external Javascript would be needed to override the hyperlink on the rack unit element. I'll open this for anyone who would like to take a stab at this.

adam commented

2025-12-29 21:50:27 +01:00

@Guibi1 commented on GitHub (Nov 25, 2025):

Hi! Can you assign me this issue?
I'm planning on changing the default action on click on an available rack unit from add device to assign device with an action button on the right that will allow to add a device. The assign device button would open the device selector modal, just like in the edit forms (see cable edit form).
I would also think that the svg should come in two flavors: the current one and the new one that would be exclusive to the netbox ui, which would fix the issue of the embedding of the svg.
How does that sound?

@Guibi1 commented on GitHub (Nov 25, 2025): Hi! Can you assign me this issue? I'm planning on changing the default action on click on an available rack unit from `add device` to `assign device` with an action button on the right that will allow to add a device. The `assign device` button would open the device selector modal, just like in the edit forms (see cable edit form). I would also think that the svg should come in two flavors: the current one and the new one that would be exclusive to the netbox ui, which would fix the issue of the embedding of the svg. How does that sound?

adam commented

2025-12-29 21:50:27 +01:00

@jeremystretch commented on GitHub (Nov 25, 2025):

I'm planning on changing the default action on click on an available rack unit from add device to assign device with an action button on the right that will allow to add a device.

An individual unit within an rack elevation SVG image must be a single link (to ensure clean hover behavior), so to allow multiple actions that link will need to present a secondary element. We're limited in what we can do with the SVG with regard to dynamic actions.

I would also think that the svg should come in two flavors: the current one and the new one that would be exclusive to the netbox ui, which would fix the issue of the embedding of the svg.

I personally would be strongly opposed to maintaining the logic to render two different SVG images. That would simply not be worth the relatively little value being delivered by this FR.

@jeremystretch commented on GitHub (Nov 25, 2025): > I'm planning on changing the default action on click on an available rack unit from add device to assign device with an action button on the right that will allow to add a device. An individual unit within an rack elevation SVG image must be a single link (to ensure clean hover behavior), so to allow multiple actions that link will need to present a secondary element. We're limited in what we can do with the SVG with regard to dynamic actions. > I would also think that the svg should come in two flavors: the current one and the new one that would be exclusive to the netbox ui, which would fix the issue of the embedding of the svg. I personally would be strongly opposed to maintaining the logic to render two different SVG images. That would simply not be worth the relatively little value being delivered by this FR.

adam commented

2025-12-29 21:50:28 +01:00

@Guibi1 commented on GitHub (Nov 26, 2025):

After a long brainstorming session with xkilian, we came up with the following solution:
add the Assign button on the right, outside the rack unit, just like the reservation marker (see gray squares on the image). This button would link to the rack detail page with an additional URL search parameter (/dcim/racks/:pk?position=4).
The page would look for this URL search parameter on load and then open the device selector modal if needed.

This solution keeps the SVG embeddable while avoiding the need to create a new SVG or a new page to assign a device to a rack.

@Guibi1 commented on GitHub (Nov 26, 2025): After a long brainstorming session with xkilian, we came up with the following solution: add the Assign button on the right, outside the rack unit, just like the reservation marker (see gray squares on the image). This button would link to the rack detail page with an additional URL search parameter (/dcim/racks/:pk?position=4). The page would look for this URL search parameter on load and then open the device selector modal if needed. This solution keeps the SVG embeddable while avoiding the need to create a new SVG or a new page to assign a device to a rack. <img width="1729" height="1084" alt="Image" src="https://github.com/user-attachments/assets/15f22f4a-2cf8-4114-99f6-fd79a2d8d62a" />

adam commented

2025-12-29 21:50:28 +01:00

@xkilian commented on GitHub (Nov 27, 2025):

Another visual alternative is to split empty Us into a left and right portion: Mouse-over on the left hand and it would show Add, mouse-over on the right hand and it would show Assign. Instead of simply show add for the whole U:

@xkilian commented on GitHub (Nov 27, 2025): Another visual alternative is to split empty Us into a left and right portion: Mouse-over on the left hand and it would show Add, mouse-over on the right hand and it would show Assign. Instead of simply show add for the whole U: <img width="816" height="122" alt="Image" src="https://github.com/user-attachments/assets/c9281fff-4441-4655-8e8e-0f80b4f60ec7" />

adam commented

2025-12-29 21:50:28 +01:00

@Guibi1 commented on GitHub (Dec 11, 2025):

I have a working POC that looks like this. The blue link is the one currently being hovered.
When clicked, the assign device link redirects to the rack page, where the modal automatically opens.

@Guibi1 commented on GitHub (Dec 11, 2025): I have a working POC that looks like this. The blue link is the one currently being hovered. When clicked, the `assign device` link redirects to the rack page, where the modal automatically opens. <img width="318" height="95" alt="Image" src="https://github.com/user-attachments/assets/cef8a0a9-85ef-4185-8677-867fabe56b3e" /> <img width="903" height="682" alt="Image" src="https://github.com/user-attachments/assets/d21a41ec-87b2-4c82-adfd-9e3cfb3740ac" />

Sign in to join this conversation.

Branches Tags

main

update-changelog-comments-docs

feature-removal-issue-type

20911-dropdown

20239-plugin-menu-classes-mutable-state

21097-graphql-id-lookups

feature

fix_module_substitution

20923-dcim-templates

20044-elevation-stuck-lightmode

feature-ip-prefix-link

v4.5-beta1-release

20068-import-moduletype-attrs

20766-fix-german-translation-code-literals

20378-del-script

7604-filter-modifiers-v3

circuit-swap

12318-case-insensitive-uniqueness

20637-improve-device-q-filter

20660-script-load

19724-graphql

20614-update-ruff

14884-script

02496-max-page

19720-macaddress-interface-generic-relation

19408-circuit-terminations-export-templates

20203-openapi-check

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/netbox#11834