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/rack | |
| 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/rack')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js | 91 |
1 files changed, 49 insertions, 42 deletions
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> ) } |