Allow modifying the assigned component for InventoryItems in the UI

[kkthxbye-code]

NetBox version

v3.3.9

Feature type

Change to existing functionality

Proposed functionality

Currently it is possible to change the assigned component of an InventoryItem via. the API. It is however not possible to change the associated InventoryItem via. the UI. This means that the only way to create the association is by going to the component details view and clicking "Add Inventory Item". It is not possible to change the relationship afterwards and it is not possible to remove the relationship either.

A component field should be added to InventoryItem form to allow changing the associated component. The challenge is that the component field is a generic foreign key to any of the component types, so we need to figure out a slick way to present this to the user. We do it the following way for IP assignment currently:

However as there are currently 7 types of device components that support associating an InventoryItem, this might be a little much in the UI.

Use case

Changing the associated component might be useful adding the inventoryitem after the component has been added to the device. There might also be times where a component should be removed but the inventory item should stay. Similarly it might be useful to change the associated component, if an SFP is moved to another port for example.

Lastly it will allow the user to do in the UI what is already possible in the API.

Database changes

None

External dependencies

None

[kkthxbye-code]

I looked a little at this, and it doesn't seem like we have a good pattern for these cases (generic relations).

This is what we currently do for IP assignment:

netbox/netbox/templates/ipam/ipaddress_edit.html

Lines 32 to 56 in 860805b

	<div class="field-group my-5">
	<div class="row mb-2">
	<h5 class="offset-sm-3">Interface Assignment</h5>
	</div>
	<div class="row mb-2">
	<div class="offset-sm-3">
	<ul class="nav nav-pills" role="tablist">
	<li role="presentation" class="nav-item">
	<button role="tab" type="button" id="device_tab" data-bs-toggle="tab" aria-controls="device" data-bs-target="#device" class="nav-link {% if not form.initial.vminterface and not form.initial.fhrpgroup %}active{% endif %}">
	Device
	</button>
	</li>
	<li role="presentation" class="nav-item">
	<button role="tab" type="button" id="vm_tab" data-bs-toggle="tab" aria-controls="vm" data-bs-target="#vm" class="nav-link {% if form.initial.vminterface %}active{% endif %}">
	Virtual Machine
	</button>
	</li>
	<li role="presentation" class="nav-item">
	<button role="tab" type="button" id="fhrpgroup_tab" data-bs-toggle="tab" aria-controls="fhrpgroup" data-bs-target="#fhrpgroup" class="nav-link {% if form.initial.fhrpgroup %}active{% endif %}">
	FHRP Group
	</button>
	</li>
	</ul>
	</div>
	</div>

netbox/netbox/ipam/forms/models.py

Lines 414 to 434 in 860805b

	# Initialize helper selectors
	instance = kwargs.get('instance')
	initial = kwargs.get('initial', {}).copy()
	if instance:
	if type(instance.assigned_object) is Interface:
	initial['interface'] = instance.assigned_object
	elif type(instance.assigned_object) is VMInterface:
	initial['vminterface'] = instance.assigned_object
	elif type(instance.assigned_object) is FHRPGroup:
	initial['fhrpgroup'] = instance.assigned_object
	if instance.nat_inside:
	nat_inside_parent = instance.nat_inside.assigned_object
	if type(nat_inside_parent) is Interface:
	initial['nat_site'] = nat_inside_parent.device.site.pk
	if nat_inside_parent.device.rack:
	initial['nat_rack'] = nat_inside_parent.device.rack.pk
	initial['nat_device'] = nat_inside_parent.device.pk
	elif type(nat_inside_parent) is VMInterface:
	if cluster := nat_inside_parent.virtual_machine.cluster:
	initial['nat_cluster'] = cluster.pk
	initial['nat_virtual_machine'] = nat_inside_parent.virtual_machine.pk

netbox/netbox/ipam/forms/models.py

Lines 451 to 462 in 860805b

	# Handle object assignment
	selected_objects = [
	field for field in ('interface', 'vminterface', 'fhrpgroup') if self.cleaned_data[field]
	]
	if len(selected_objects) > 1:
	raise forms.ValidationError({
	selected_objects[1]: "An IP address can only be assigned to a single object."
	})
	elif selected_objects:
	self.instance.assigned_object = self.cleaned_data[selected_objects[0]]
	else:
	self.instance.assigned_object = None

You have any ideas here @jeremystretch - I can try to replicate this functionality for the inventoryitem -> component relationship, but it doesn't seem very clean. However I'm not sure how much we're using/will be using generic relationships in the future, so it might not be worth it to spend a bunch of time on a generic solution.