Skip to content

More fixes #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
breyr merged 3 commits into from
Apr 1, 2025
Merged

More fixes #83

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5d6bb9
Enhance context menu and link creation modal to display available por…
breyr Mar 31, 2025
18c3b2b
Refactor CreateLinkModal to manage occupied ports for second device a…
breyr Mar 31, 2025
23d1376
Merge branch 'dev' into more-fixes
breyr Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 50 additions & 28 deletions frontend/src/components/reactflow/overlayui/CreateLinkModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,24 @@ interface CreateLinkModalProps {

export default function CreateLinkModal({ deviceData, currentDevicePorts, labDevices, onClose }: CreateLinkModalProps) {
const { user } = useAuth();
const { getEdges, getNodes } = useReactFlow<Node<{ deviceData?: Device; }>, Edge>();
const { getEdges } = useReactFlow<Node<{ deviceData?: Device; }>, Edge>();
const { createLink } = useLinkOperations();
const [selectedFirstDevice, setSelectedFirstDevice] = useState<string>(deviceData?.name ?? "");
const [selectedFirstDevicePort, setSelectedFirstDevicePort] = useState<string>("");
const [selectedSecondDevice, setSelectedSecondDevice] = useState<string>("");
const [selectedSecondDevicePort, setSelectedSecondDevicePort] = useState<string>("");
const [availablePorts, setAvailablePorts] = useState<string[]>([]);
const [filteredLabDevices] = useState<Device[]>(labDevices);
const [firstDeviceOccupiedPorts, setFirstDeviceOccupiedPorts] = useState<string[]>([]);
const [secondDeviceOccupiedPorts, setSecondDeviceOccupiedPorts] = useState<string[]>([]);
const [secondDeviceOccupiedPorts, setSecondDeviceOccupiedPorts] = useState<Record<string, string[]>>({});

useEscapeKey(onClose);

// get a list of the current nodes in the topology to create a link
const nodes = getNodes();
const currentNodesInTopology = new Set(nodes.map(n => n.data?.deviceData?.name));

// get occupied ports when selectedFirstDevice changes
useEffect(() => {
const edges = getEdges();
const ports = edges.filter((edge: Edge) => edge.source === selectedFirstDevice || edge.target === selectedFirstDevice).map((edge: Edge) => edge.id.split('-').filter((port: string) => port !== 'edge'));
setFirstDeviceOccupiedPorts(ports.flat());
}, [selectedFirstDevice, getEdges]);

// get occupied ports when selectedSecondDevice changes
useEffect(() => {
const edges = getEdges();
const ports = edges.filter((edge: Edge) => edge.source === selectedSecondDevice || edge.target === selectedSecondDevice).map((edge: Edge) => edge.id.split('-').filter((port: string) => port !== 'edge'));
setSecondDeviceOccupiedPorts(ports.flat());
}, [selectedSecondDevice, getEdges]);

useEffect(() => {
if (deviceData?.name) {
setSelectedFirstDevice(deviceData.name);
Expand Down Expand Up @@ -89,6 +76,31 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
});
}

useEffect(() => {
const edges = getEdges();
if (selectedSecondDevice) {
const ports = edges
.filter((edge: Edge) => edge.source === selectedSecondDevice || edge.target === selectedSecondDevice)
.map((edge: Edge) => edge.id.split('-').filter((port: string) => port !== 'edge'));
setSecondDeviceOccupiedPorts((prev) => ({
...prev,
[selectedSecondDevice]: ports.flat(),
}));
} else {
// Initialize occupied ports for all devices on mount
const allOccupiedPorts = labDevices.reduce((acc, device) => {
const devicePorts = edges
.filter((edge: Edge) => edge.source === device.name || edge.target === device.name)
.map((edge: Edge) => edge.id.split('-').filter((port: string) => port !== 'edge'))
.flat();
acc[device.name] = devicePorts;
return acc;
}, {} as Record<string, string[]>);

setSecondDeviceOccupiedPorts(allOccupiedPorts);
}
}, [selectedSecondDevice, getEdges, labDevices]);

return (
<section className="bg-zinc-950 bg-opacity-50 w-full h-full fixed top-0 left-0 flex items-center justify-center z-50">
<div className="bg-[#ffffff] w-2/5 p-6 rounded-lg shadow-lg">
Expand All @@ -115,7 +127,7 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
const hasAvailablePorts = generatedPorts.some(port => !firstDeviceOccupiedPorts.includes(port));
return (
<option key={device.id} value={device.name} disabled={!hasAvailablePorts || device.name === selectedSecondDevice}>
{device.name} {!hasAvailablePorts ? '(no available ports)' : ''}
{device.name} {!hasAvailablePorts && device.name !== deviceData?.name ? '(no available ports)' : ''}
</option>
);
})}
Expand All @@ -127,9 +139,10 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
value={selectedFirstDevicePort}
onChange={(e) => setSelectedFirstDevicePort(e.target.value)}
className="block w-full mt-1 rounded-md bg-[#ffffff] focus:outline-none"

>
<option value="">Select a Port</option>
{(deviceData ? currentDevicePorts : filteredLabDevices.map(device => device.ports.split(',').flatMap(portDef => generatePorts(portDef)))).flat().map((port, index) => (
{(deviceData ? currentDevicePorts : labDevices.map(device => device.ports.split(',').flatMap(portDef => generatePorts(portDef)))).flat().map((port, index) => (
<option key={index} value={port} disabled={firstDeviceOccupiedPorts.includes(port)}>
{port} {firstDeviceOccupiedPorts.includes(port) ? '(in use)' : ''}
</option>
Expand All @@ -144,13 +157,18 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
className="block w-full mt-1 rounded-md bg-[#ffffff] focus:outline-none"
>
<option value="">Select a Device</option>
{filteredLabDevices.filter((device) => (device.userId == null || device.userId == user?.id) && currentNodesInTopology.has(device.name)).map((device) => {
{labDevices.filter((d) => d.name !== deviceData?.name).map((device) => {
const portsArray = device.ports.split(',');
const generatedPorts = portsArray.flatMap(portDef => generatePorts(portDef));
const hasAvailablePorts = generatedPorts.some(port => !secondDeviceOccupiedPorts.includes(port));
const occupiedPorts = secondDeviceOccupiedPorts[device.name] || [];
const hasAvailablePorts = generatedPorts.some(port => !occupiedPorts.includes(port));
return (
<option key={device.id} value={device.name} disabled={!hasAvailablePorts || device.name === selectedFirstDevice}>
{device.name} {!hasAvailablePorts ? '(no available ports)' : ''}
<option
key={device.id}
value={device.name}
disabled={!hasAvailablePorts || device.name === selectedFirstDevice}
>
{device.name} {!hasAvailablePorts && device.name !== deviceData?.name ? '(no available ports)' : ''}
</option>
);
})}
Expand All @@ -161,14 +179,18 @@ export default function CreateLinkModal({ deviceData, currentDevicePorts, labDev
<select
value={selectedSecondDevicePort}
onChange={(e) => setSelectedSecondDevicePort(e.target.value)}
className="block w-full mt-1 rounded-md bg-[#ffffff] focus:outline-none"
className={`block w-full mt-1 rounded-md bg-[#ffffff] focus:outline-none ${!selectedSecondDevice ? 'text-gray-300' : ''}`}
disabled={!selectedSecondDevice}
>
<option value="">Select Port</option>
{availablePorts.map((port, idx) => (
<option key={idx} value={port} disabled={secondDeviceOccupiedPorts.includes(port)}>
{port} {secondDeviceOccupiedPorts.includes(port) ? '(in use)' : ''}
</option>
))}
<option value="">Select a Port</option>
{availablePorts.map((port, idx) => {
const occupiedPorts = secondDeviceOccupiedPorts[selectedSecondDevice] || [];
return (
<option key={idx} value={port} disabled={occupiedPorts.includes(port)}>
{port} {occupiedPorts.includes(port) ? '(in use)' : ''}
</option>
);
})}
</select>
</div>
</div>
Expand Down