diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2023-03-30 22:58:30 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-30 22:58:30 +0100 |
| commit | 0db9d47d2b3062ca867e0a7aa33ba7205307d062 (patch) | |
| tree | 3d6fc9128dd9ff82434c8ad112a01d023791cba5 /opendc-web/opendc-web-ui/src/components/topologies/sidebar | |
| parent | 526d6cd6b48b30cf7bbe40478d57bbc67e7027cc (diff) | |
| parent | e7d5c086832a24f3c6b98258b0b8eb1fbbd3336a (diff) | |
merge: Address issues with web UI (#145)
This pull request addresses several issues that have been reported for the OpenDC web UI.
## Implementation Notes :hammer_and_pick:
* Update dependencies for web UI
* Inform user when deleted topology is still used
* Do not offset hover layer after dragging
* Fix access to machines on lower shelves
* Do not allow selection of empty unit
* Fix rack deletion
Fixes #135, #136, #137, #138, #139
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')
3 files changed, 57 insertions, 44 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js index 6f89e10b..8a4c33dc 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js @@ -15,7 +15,13 @@ import { useSelector } from 'react-redux' function MachineSidebar({ tileId, position }) { const machine = useSelector(({ topology }) => { const rack = topology.racks[topology.tiles[tileId].rack] - return topology.machines[rack.machines[position - 1]] + + for (const machineId of rack.machines) { + const machine = topology.machines[machineId] + if (machine.position === position) { + return machine + } + } }) const machineId = machine.id return ( diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js index 4507b409..18cba23a 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js @@ -27,7 +27,7 @@ function UnitAddComponent({ units, onAdd }) { </SelectOption> ))} </Select> - <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}> + <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)} isDisabled={!selected}> Add </Button> </InputGroup> diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js index de7a2140..02c97730 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js @@ -17,49 +17,56 @@ import { Machine } from '../../../../shapes' function MachineListComponent({ machines = [], onSelect, onAdd }) { return ( <DataList aria-label="Rack Units"> - {machines.map((machine, index) => - machine ? ( - <DataListItem key={index} onClick={() => onSelect(index + 1)}> - <DataListItemRow> - <DataListItemCells - dataListCells={[ - <DataListCell isIcon key="icon"> - <Badge isRead>{machines.length - index}U</Badge> - </DataListCell>, - <DataListCell key="primary content"> - <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} /> - </DataListCell>, - ]} - /> - <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto"> - <Button isSmall variant="plain" className="pf-u-p-0"> - <AngleRightIcon /> - </Button> - </DataListAction> - </DataListItemRow> - </DataListItem> - ) : ( - <DataListItem key={index}> - <DataListItemRow> - <DataListItemCells - dataListCells={[ - <DataListCell isIcon key="icon"> - <Badge isRead>{machines.length - index}U</Badge> - </DataListCell>, - <DataListCell key="add" className="text-secondary"> - Empty Slot - </DataListCell>, - ]} - /> - <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add"> - <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}> - <PlusIcon /> - </Button> - </DataListAction> - </DataListItemRow> - </DataListItem> + {machines + .map((machine, index) => + machine ? ( + <DataListItem key={index} onClick={() => onSelect(index + 1)}> + <DataListItemRow> + <DataListItemCells + dataListCells={[ + <DataListCell isIcon key="icon"> + <Badge isRead>{index + 1}U</Badge> + </DataListCell>, + <DataListCell key="primary content"> + <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} /> + </DataListCell>, + ]} + /> + <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto"> + <Button isSmall variant="plain" className="pf-u-p-0"> + <AngleRightIcon /> + </Button> + </DataListAction> + </DataListItemRow> + </DataListItem> + ) : ( + <DataListItem key={index}> + <DataListItemRow> + <DataListItemCells + dataListCells={[ + <DataListCell isIcon key="icon"> + <Badge isRead>{index + 1}U</Badge> + </DataListCell>, + <DataListCell key="add" className="text-secondary"> + Empty Slot + </DataListCell>, + ]} + /> + <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add"> + <Button + isSmall + variant="plain" + className="pf-u-p-0" + onClick={() => onAdd(index + 1)} + > + <PlusIcon /> + </Button> + </DataListAction> + </DataListItemRow> + </DataListItem> + ) ) - )} + .reverse()} </DataList> ) } |