summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2023-03-26 22:05:43 +0100
committerFabian Mastenbroek <mail.fabianm@gmail.com>2023-03-27 20:31:32 +0100
commit760cb3632d9c7352ae866667657785297502ce08 (patch)
tree9fb9f43a78a5bf738903f3a01f0160d74ee29b9b /opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack
parentefe1cebb4c1d8f07c0f1afb8bf08732d9fe20125 (diff)
bug(web): Fix access to machines on lower shelves
This change addresses #137 which reports that machines on shelves lower than the top shelve cannot be accessed and doing so will cause the UI to disappear and an error message to be generated. The issue was caused by using the incorrect logic for selecting the machine at a certain rack position. Fixes #137
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.js91
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>
)
}