From 760cb3632d9c7352ae866667657785297502ce08 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 26 Mar 2023 22:05:43 +0100
Subject: 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
---
 .../sidebar/rack/MachineListComponent.js           | 91 ++++++++++++----------
 1 file changed, 49 insertions(+), 42 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js')

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>
     )
 }
-- 
cgit v1.2.3