feat: filter out used networks in network selector WD-34762

[omarelkashef]

Done

• Filter out used networks from network selector

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @Kxiru or @edlerd for access.
   • With a local copy of this branch, build and run as described in the docs.
2. Perform the following QA steps:
   • Go to Instance
   • Create or edit instance
   • Go to Configuration -> Devices -> Networks
   • Attach or edit network
   • Ensure any network already attached to the instance does not show in the network selector unless dns.mode = "none" on the network or you are currently editing that network.
     NOTE: it is possible now to create a profile attached to a network twice. This will cause an error when starting an instance with that profile. This can be fixed in another PR.

[webteam-app]

Demo

Jenkins

demos.haus

[edlerd]

We need to be more careful here. Some of those inherited devices can be overridden by other profiles or by instance networks. Maybe better to use the getInheritedNetworks helper. Which we actually already call in NetworkDevicePanel, so perhaps we can pass those into this function instead of calculating them afresh.

[edlerd]

Suggested change

	const isEditing = panelParams.panel === panels.editNetworkDevice;
	const isEditingNetwork = (network: LxdNetwork) => {
	return isEditing && device?.network === network.name;
	};
	const canAttachNetworkAgain = (network: LxdNetwork) => {
	return (
	parentFormik.values.entityType === "profile" ||
	!existingNetworks.includes(network.name) ||
	network.config["dns.mode"] === "none"
	);
	};
	const managedNetworks = networks.filter((network) => network.managed);
	const managedNetworks = networks.filter(
	(network) =>
	network.managed &&
	(isEditingNetwork(network) || canAttachNetworkAgain(network)),
	);
	const isAvailable = (network: LxdNetwork) => {
	if (network.managed) {
	return false;
	}
	const isSelectedNetwork = isEditing && device?.network === network.name;
	const isUnused = !existingNetworks.includes(network.name);
	const allowsDuplicateAttachment = network.config["dns.mode"] === "none";
	return isSelectedNetwork || isUnused || allowsDuplicateAttachment;
	};
	const networkOptions = networks.filter(isAvailable);

Suggesting to slightly restructure the filter logic here. Wdyt?