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
---
 .../topologies/sidebar/machine/MachineSidebar.js   |  8 +-
 .../sidebar/rack/MachineListComponent.js           | 91 ++++++++++++----------
 2 files changed, 56 insertions(+), 43 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')

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/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


From 42caec326fe5b6f4a0a2fe73e4cf2ba26ecba23d Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 26 Mar 2023 22:09:05 +0100
Subject: bug(web): Do not allow selection of empty unit

This change fixes #138 which reports that when adding a unit to a
machine, if the user does not select a unit and presses add, the UI will
crash. We now disable the add button until the user has selected a unit.
---
 .../src/components/topologies/sidebar/machine/UnitAddComponent.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')

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