refactor(ui): Encode state in topology actions

This change updates the OpenDC frontend to reduce its reliance of global
state during the execution of actions. Actions that modify the topology
now require parameters to be passed via the action constructor instead
of relying on the global interactionLevel state.

38 files changed, 163 insertions, 265 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
index c4a880b1..564f4030 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { InteractionLevel } from '../../../../shapes'
-import BuildingSidebarComponent from './building/BuildingSidebarComponent'
+import BuildingSidebar from './building/BuildingSidebar'
 import {
     Button,
     DrawerActions,
@@ -16,9 +16,9 @@ import { AngleLeftIcon } from '@patternfly/react-icons'
 import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../../redux/actions/interaction-level'
 import { backButton } from './TopologySidebar.module.scss'
-import RoomSidebarContainer from './room/RoomSidebarContainer'
-import RackSidebarContainer from './rack/RackSidebarContainer'
-import MachineSidebarContainer from './machine/MachineSidebarContainer'
+import RoomSidebar from './room/RoomSidebar'
+import RackSidebar from './rack/RackSidebar'
+import MachineSidebar from './machine/MachineSidebar'
 
 const name = {
     BUILDING: 'Building',
@@ -27,21 +27,21 @@ const name = {
     MACHINE: 'Machine',
 }
 
-const TopologySidebar = ({ interactionLevel, onClose }) => {
+function TopologySidebar({ interactionLevel, onClose }) {
     let sidebarContent
 
     switch (interactionLevel.mode) {
         case 'BUILDING':
-            sidebarContent = <BuildingSidebarComponent />
+            sidebarContent = <BuildingSidebar />
             break
         case 'ROOM':
-            sidebarContent = <RoomSidebarContainer />
+            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
             break
         case 'RACK':
-            sidebarContent = <RackSidebarContainer />
+            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
             break
         case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer />
+            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
             break
         default:
             sidebarContent = 'Missing Content'
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
index 6c2556d3..5fcd46be 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import NewRoomConstructionContainer from './NewRoomConstructionContainer'
 
-const BuildingSidebarComponent = () => {
+function BuildingSidebar() {
     return <NewRoomConstructionContainer />
 }
 
-export default BuildingSidebarComponent
+export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 656b2515..9fc85d0c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -4,7 +4,7 @@ import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@pat
 import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
 
-const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
+function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
     if (currentRoomInConstruction === '-1') {
         return (
             <Button isBlock icon={<PlusIcon />} onClick={onStart}>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
index 0836263c..5b031a6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
@@ -29,7 +29,7 @@ import {
 } from '../../../../../redux/actions/topology/building'
 import NewRoomConstructionComponent from './NewRoomConstructionComponent'
 
-const NewRoomConstructionButton = (props) => {
+function NewRoomConstructionButton(props) {
     const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
 
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
index a7bf3719..75d458b6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
@@ -21,18 +21,20 @@
  */
 
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { deleteMachine } from '../../../../../redux/actions/topology/machine'
 import { Button } from '@patternfly/react-core'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import ConfirmationModal from '../../../../modals/ConfirmationModal'
 
-const DeleteMachine = () => {
+function DeleteMachine() {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
+    const position = useSelector((state) => state.interactionLevel.position)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteMachine())
+            dispatch(deleteMachine(rackId, position))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
index d3d4a8cf..0c3dea98 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
@@ -12,8 +12,12 @@ import {
 } from '@patternfly/react-core'
 import { useSelector } from 'react-redux'
 
-const MachineSidebarComponent = ({ machineId }) => {
-    const machine = useSelector((state) => state.objects.machine[machineId])
+function MachineSidebar({ tileId, position }) {
+    const machine = useSelector(({ objects }) => {
+        const rack = objects.rack[objects.tile[tileId].rack]
+        return objects.machine[rack.machines[position - 1]]
+    })
+    const machineId = machine._id
     return (
         <div>
             <TextContent>
@@ -31,14 +35,15 @@ const MachineSidebarComponent = ({ machineId }) => {
                 <Title headingLevel="h2">Units</Title>
             </TextContent>
             <div className="pf-u-h-100">
-                <UnitTabsComponent />
+                <UnitTabsComponent machineId={machineId} />
             </div>
         </div>
     )
 }
 
-MachineSidebarComponent.propTypes = {
-    machineId: PropTypes.string,
+MachineSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+    position: PropTypes.number.isRequired,
 }
 
-export default MachineSidebarComponent
+export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index 94d9f2c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import MachineSidebarComponent from './MachineSidebarComponent'
-
-const MachineSidebarContainer = (props) => {
-    const machineId = useSelector(
-        (state) =>
-            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                state.interactionLevel.position - 1
-            ]
-    )
-    return <MachineSidebarComponent {...props} machineId={machineId} />
-}
-
-export default MachineSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
index 8a6680e6..cc226d46 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
@@ -26,16 +26,17 @@ import { useDispatch, useSelector } from 'react-redux'
 import { addUnit } from '../../../../../redux/actions/topology/machine'
 import UnitAddComponent from './UnitAddComponent'
 
-const UnitAddContainer = ({ unitType }) => {
+function UnitAddContainer({ machineId, unitType }) {
     const units = useSelector((state) => Object.values(state.objects[unitType]))
     const dispatch = useDispatch()
 
-    const onAdd = (id) => dispatch(addUnit(unitType, id))
+    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
 
     return <UnitAddComponent onAdd={onAdd} units={units} />
 }
 
 UnitAddContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
     unitType: PropTypes.string.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 9c3c08fd..16ebd708 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -21,7 +21,7 @@ import {
 } from '@patternfly/react-core'
 import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
 
-const UnitInfo = ({ unit, unitType }) => {
+function UnitInfo({ unit, unitType }) {
     if (unitType === 'cpu' || unitType === 'gpu') {
         return (
             <DescriptionList>
@@ -64,7 +64,7 @@ UnitInfo.propTypes = {
     unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
 }
 
-const UnitListComponent = ({ unitType, units, onDelete }) => {
+function UnitListComponent({ unitType, units, onDelete }) {
     if (units.length === 0) {
         return (
             <EmptyState>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
index 2d994f97..f76684a5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
@@ -33,23 +33,20 @@ const unitMapping = {
     storage: 'storages',
 }
 
-const UnitListContainer = ({ unitType, ...props }) => {
+function UnitListContainer({ machineId, unitType }) {
     const dispatch = useDispatch()
     const units = useSelector((state) => {
-        const machine =
-            state.objects.machine[
-                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                    state.interactionLevel.position - 1
-                ]
-            ]
+        const machine = state.objects.machine[machineId]
         return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
     })
-    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
 
-    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+
+    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
 }
 
 UnitListContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
     unitType: PropTypes.string.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 723ed2e2..6d10d2df 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,31 +1,36 @@
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
 import UnitAddContainer from './UnitAddContainer'
 import UnitListContainer from './UnitListContainer'
 
-const UnitTabsComponent = () => {
+function UnitTabsComponent({ machineId }) {
     const [activeTab, setActiveTab] = useState('cpu-units')
 
     return (
         <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
             <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer unitType="cpu" />
-                <UnitListContainer unitType="cpu" />
+                <UnitAddContainer machineId={machineId} unitType="cpu" />
+                <UnitListContainer machineId={machineId} unitType="cpu" />
             </Tab>
             <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer unitType="gpu" />
-                <UnitListContainer unitType="gpu" />
+                <UnitAddContainer machineId={machineId} unitType="gpu" />
+                <UnitListContainer machineId={machineId} unitType="gpu" />
             </Tab>
             <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer unitType="memory" />
-                <UnitListContainer unitType="memory" />
+                <UnitAddContainer machineId={machineId} unitType="memory" />
+                <UnitListContainer machineId={machineId} unitType="memory" />
             </Tab>
             <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer unitType="storage" />
-                <UnitListContainer unitType="storage" />
+                <UnitAddContainer machineId={machineId} unitType="storage" />
+                <UnitListContainer machineId={machineId} unitType="storage" />
             </Tab>
         </Tabs>
     )
 }
 
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
 export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
index d3d9aaf5..3af46861 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
@@ -20,14 +20,25 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { addPrefab } from '../../../../../redux/actions/prefabs'
-import AddPrefabComponent from './AddPrefabComponent'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
 
-const AddPrefabContainer = (props) => {
+function AddPrefab({ tileId }) {
     const dispatch = useDispatch()
-    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
+    const onClick = () => dispatch(addPrefab('name', tileId))
+    return (
+        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
+            Save this rack to a prefab
+        </Button>
+    )
 }
 
-export default AddPrefabContainer
+AddPrefab.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
deleted file mode 100644
index c8543134..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { SaveIcon } from '@patternfly/react-icons'
-import { Button } from '@patternfly/react-core'
-
-const AddPrefabComponent = ({ onClick }) => (
-    <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
-        Save this rack to a prefab
-    </Button>
-)
-
-AddPrefabComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
index 47959f03..f0dc7b6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
@@ -27,12 +28,12 @@ import { deleteRack } from '../../../../../redux/actions/topology/rack'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 
-const DeleteRackContainer = () => {
+function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRack())
+            dispatch(deleteRack(tileId))
         }
         setVisible(false)
     }
@@ -51,4 +52,8 @@ const DeleteRackContainer = () => {
     )
 }
 
+DeleteRackContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 1617b3bf..97141711 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -19,7 +19,7 @@ UnitIcon.propTypes = {
     type: PropTypes.string,
 }
 
-const MachineComponent = ({ machine, onClick }) => {
+function MachineComponent({ machine, onClick }) {
     const hasNoUnits =
         machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
index 54e6db0a..3ed0ffd0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
@@ -43,7 +43,7 @@ function MachineListContainer({ tileId, ...props }) {
         <MachineListComponent
             {...props}
             machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(index))}
+            onAdd={(index) => dispatch(addMachine(rack._id, index))}
             onSelect={(index) => dispatch(goFromRackToMachine(index))}
         />
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
index 11529b55..11db6420 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
@@ -5,11 +5,11 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const rackName = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack].name)
+    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRackName(name))
+            dispatch(editRackName(_id, name))
         }
     }
     return <NameComponent name={rackName} onEdit={callback} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
index dd5117f7..3c9f152a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { machineListContainer, sidebarContainer } from './RackSidebarComponent.module.scss'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
 import RackNameContainer from './RackNameContainer'
-import AddPrefabContainer from './AddPrefabContainer'
+import AddPrefab from './AddPrefab'
 import DeleteRackContainer from './DeleteRackContainer'
 import MachineListContainer from './MachineListContainer'
 import {
@@ -16,7 +16,7 @@ import {
 } from '@patternfly/react-core'
 import { useSelector } from 'react-redux'
 
-function RackSidebarComponent({ tileId }) {
+function RackSidebar({ tileId }) {
     const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
 
     return (
@@ -39,8 +39,8 @@ function RackSidebarComponent({ tileId }) {
                     </TextListItem>
                 </TextList>
                 <Title headingLevel="h2">Actions</Title>
-                <AddPrefabContainer />
-                <DeleteRackContainer />
+                <AddPrefab tileId={tileId} />
+                <DeleteRackContainer tileId={tileId} />
 
                 <Title headingLevel="h2">Slots</Title>
             </TextContent>
@@ -51,8 +51,8 @@ function RackSidebarComponent({ tileId }) {
     )
 }
 
-RackSidebarComponent.propTypes = {
+RackSidebar.propTypes = {
     tileId: PropTypes.string.isRequired,
 }
 
-export default RackSidebarComponent
+export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
index 6f258aec..6f258aec 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
deleted file mode 100644
index 2b31413d..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackSidebarComponent from './RackSidebarComponent'
-
-const RackSidebarContainer = (props) => {
-    const tileId = useSelector((state) => state.interactionLevel.tileId)
-    return <RackSidebarComponent {...props} tileId={tileId} />
-}
-
-export default RackSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
index 284c4d53..19a782a6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
@@ -27,12 +28,12 @@ import { deleteRoom } from '../../../../../redux/actions/topology/room'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 
-const DeleteRoomContainer = () => {
+function DeleteRoomContainer({ roomId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRoom())
+            dispatch(deleteRoom(roomId))
         }
         setVisible(false)
     }
@@ -51,4 +52,8 @@ const DeleteRoomContainer = () => {
     )
 }
 
+DeleteRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
 export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
index 6db2bfb6..96c077cb 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
@@ -27,12 +28,12 @@ import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
 import { Button } from '@patternfly/react-core'
 
-const EditRoomContainer = () => {
+function EditRoomContainer({ roomId }) {
     const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
     const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
 
     const dispatch = useDispatch()
-    const onEdit = () => dispatch(startRoomEdit())
+    const onEdit = () => dispatch(startRoomEdit(roomId))
     const onFinish = () => dispatch(finishRoomEdit())
 
     return isEditing ? (
@@ -53,4 +54,8 @@ const EditRoomContainer = () => {
     )
 }
 
+EditRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
 export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 8aebe969..13432689 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop}>
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
                 Stop rack construction
             </Button>
         )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
index 38af447a..b9ab6610 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
@@ -25,7 +25,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
 import RackConstructionComponent from './RackConstructionComponent'
 
-const RackConstructionContainer = (props) => {
+function RackConstructionContainer(props) {
     const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
     const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
index d7b006a6..11909189 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
@@ -27,11 +27,11 @@ import NameComponent from '../../../../../components/app/sidebars/topology/NameC
 import { editRoomName } from '../../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
-    const roomName = useSelector((state) => state.objects.room[roomId].name)
+    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRoomName(name))
+            dispatch(editRoomName(_id, name))
         }
     }
     return <NameComponent name={roomName} onEdit={callback} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
index fac58c51..6ad489e0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
@@ -13,7 +13,7 @@ import {
     Title,
 } from '@patternfly/react-core'
 
-const RoomSidebarComponent = ({ roomId }) => {
+const RoomSidebar = ({ roomId }) => {
     return (
         <TextContent>
             <Title headingLevel="h2">Details</Title>
@@ -30,14 +30,14 @@ const RoomSidebarComponent = ({ roomId }) => {
             </TextList>
             <Title headingLevel="h2">Construction</Title>
             <RackConstructionContainer />
-            <EditRoomContainer />
-            <DeleteRoomContainer />
+            <EditRoomContainer roomId={roomId} />
+            <DeleteRoomContainer roomId={roomId} />
         </TextContent>
     )
 }
 
-RoomSidebarComponent.propTypes = {
+RoomSidebar.propTypes = {
     roomId: PropTypes.string.isRequired,
 }
 
-export default RoomSidebarComponent
+export default RoomSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
deleted file mode 100644
index 2076b00e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RoomSidebarComponent from './RoomSidebarComponent'
-
-const RoomSidebarContainer = (props) => {
-    const roomId = useSelector((state) => state.interactionLevel.roomId)
-    return <RoomSidebarComponent {...props} roomId={roomId} />
-}
-
-export default RoomSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index d79e8e7a..139c2979 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -40,8 +40,6 @@ import {
     Spinner,
     Title,
 } from '@patternfly/react-core'
-import Toolbar from '../../../../components/app/map/controls/Toolbar'
-import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator'
 import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
 import Collapse from '../../../../components/app/map/controls/Collapse'
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
index c112feed..0ef7795f 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
@@ -3,10 +3,11 @@ export const DELETE_PREFAB = 'DELETE_PREFAB'
 export const DELETE_PREFAB_SUCCEEDED = 'DELETE_PREFAB_SUCCEEDED'
 export const OPEN_PREFAB_SUCCEEDED = 'OPEN_PREFAB_SUCCEEDED'
 
-export function addPrefab(name) {
+export function addPrefab(name, tileId) {
     return {
         type: ADD_PREFAB,
         name,
+        tileId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
index f1a7d569..49425318 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js
@@ -55,13 +55,10 @@ export function cancelNewRoomConstructionSucceeded() {
     }
 }
 
-export function startRoomEdit() {
-    return (dispatch, getState) => {
-        const { interactionLevel } = getState()
-        dispatch({
-            type: START_ROOM_EDIT,
-            roomId: interactionLevel.roomId,
-        })
+export function startRoomEdit(roomId) {
+    return {
+        type: START_ROOM_EDIT,
+        roomId: roomId,
     }
 }
 
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
index 17ccce5d..170b7648 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js
@@ -2,23 +2,27 @@ export const DELETE_MACHINE = 'DELETE_MACHINE'
 export const ADD_UNIT = 'ADD_UNIT'
 export const DELETE_UNIT = 'DELETE_UNIT'
 
-export function deleteMachine() {
+export function deleteMachine(rackId, position) {
     return {
         type: DELETE_MACHINE,
+        rackId,
+        position,
     }
 }
 
-export function addUnit(unitType, id) {
+export function addUnit(machineId, unitType, id) {
     return {
         type: ADD_UNIT,
+        machineId,
         unitType,
         id,
     }
 }
 
-export function deleteUnit(unitType, index) {
+export function deleteUnit(machineId, unitType, index) {
     return {
         type: DELETE_UNIT,
+        machineId,
         unitType,
         index,
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
index b117402e..228e3ae9 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js
@@ -2,22 +2,25 @@ export const EDIT_RACK_NAME = 'EDIT_RACK_NAME'
 export const DELETE_RACK = 'DELETE_RACK'
 export const ADD_MACHINE = 'ADD_MACHINE'
 
-export function editRackName(name) {
+export function editRackName(rackId, name) {
     return {
         type: EDIT_RACK_NAME,
         name,
+        rackId,
     }
 }
 
-export function deleteRack() {
+export function deleteRack(tileId) {
     return {
         type: DELETE_RACK,
+        tileId,
     }
 }
 
-export function addMachine(position) {
+export function addMachine(rackId, position) {
     return {
         type: ADD_MACHINE,
         position,
+        rackId,
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
index 80ef7c5e..e584af89 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js
@@ -6,10 +6,11 @@ export const START_RACK_CONSTRUCTION = 'START_RACK_CONSTRUCTION'
 export const STOP_RACK_CONSTRUCTION = 'STOP_RACK_CONSTRUCTION'
 export const ADD_RACK_TO_TILE = 'ADD_RACK_TO_TILE'
 
-export function editRoomName(name) {
+export function editRoomName(roomId, name) {
     return {
         type: EDIT_ROOM_NAME,
         name,
+        roomId,
     }
 }
 
@@ -41,8 +42,9 @@ export function addRackToTile(positionX, positionY) {
     }
 }
 
-export function deleteRoom() {
+export function deleteRoom(roomId) {
     return {
         type: DELETE_ROOM,
+        roomId,
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
index 91b03bf6..f717d878 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js
@@ -4,14 +4,13 @@ import { addPrefab } from '../../api/prefabs'
 import { Rack } from '../../util/topology-schema'
 import { denormalize } from 'normalizr'
 
-export function* onAddPrefab(action) {
+export function* onAddPrefab({ name, tileId }) {
     try {
-        const interactionLevel = yield select((state) => state.interactionLevel)
         const objects = yield select((state) => state.objects)
-        const rack = objects.rack[objects.tile[interactionLevel.tileId].rack]
+        const rack = objects.rack[objects.tile[tileId].rack]
         const prefabRack = denormalize(rack, Rack, objects)
         const auth = yield getContext('auth')
-        const prefab = yield call(() => addPrefab(auth, { name: action.name, rack: prefabRack }))
+        const prefab = yield call(() => addPrefab(auth, { name, rack: prefabRack }))
         yield put(addToStore('prefab', prefab))
     } catch (error) {
         console.error(error)
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index 333c1485..f3742b78 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -37,10 +37,8 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa
     }
 }
 
-export function* onAddTopology(action) {
+export function* onAddTopology({ projectId, duplicateId, name }) {
     try {
-        const { projectId, duplicateId, name } = action
-
         let topologyToBeCreated
         if (duplicateId) {
             topologyToBeCreated = yield denormalizeTopology(duplicateId)
@@ -119,21 +117,19 @@ export function* onDeleteTile(action) {
     }
 }
 
-export function* onEditRoomName(action) {
+export function* onEditRoomName({ roomId, name }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const roomId = yield select((state) => state.interactionLevel.roomId)
-        yield put(addPropToStoreObject('room', roomId, { name: action.name }))
+        yield put(addPropToStoreObject('room', roomId, { name }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onDeleteRoom() {
+export function* onDeleteRoom({ roomId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const roomId = yield select((state) => state.interactionLevel.roomId)
         yield put(goDownOneInteractionLevel())
         yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'rooms', roomId))
         yield updateTopologyOnServer(topologyId)
@@ -142,21 +138,19 @@ export function* onDeleteRoom() {
     }
 }
 
-export function* onEditRackName(action) {
+export function* onEditRackName({ rackId, name }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-        yield put(addPropToStoreObject('rack', rackId, { name: action.name }))
+        yield put(addPropToStoreObject('rack', rackId, { name }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onDeleteRack() {
+export function* onDeleteRack({ tileId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const tileId = yield select((state) => state.interactionLevel.tileId)
         yield put(goDownOneInteractionLevel())
         yield put(addPropToStoreObject('tile', tileId, { rack: undefined }))
         yield updateTopologyOnServer(topologyId)
@@ -165,35 +159,34 @@ export function* onDeleteRack() {
     }
 }
 
-export function* onAddRackToTile(action) {
+export function* onAddRackToTile({ tileId }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
         const rack = {
             _id: uuid(),
             name: 'Rack',
-            tileId: action.tileId,
+            tileId,
             capacity: DEFAULT_RACK_SLOT_CAPACITY,
             powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
             machines: [],
         }
         yield put(addToStore('rack', rack))
-        yield put(addPropToStoreObject('tile', action.tileId, { rack: rack._id }))
+        yield put(addPropToStoreObject('tile', tileId, { rack: rack._id }))
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
         console.error(error)
     }
 }
 
-export function* onAddMachine(action) {
+export function* onAddMachine({ rackId, position }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack)
         const rack = yield select((state) => state.objects.rack[rackId])
 
         const machine = {
             _id: uuid(),
             rackId,
-            position: action.position,
+            position,
             cpus: [],
             gpus: [],
             memories: [],
@@ -209,15 +202,13 @@ export function* onAddMachine(action) {
     }
 }
 
-export function* onDeleteMachine() {
+export function* onDeleteMachine({ rackId, position }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const tileId = yield select((state) => state.interactionLevel.tileId)
-        const position = yield select((state) => state.interactionLevel.position)
-        const rack = yield select((state) => state.objects.rack[state.objects.tile[tileId].rack])
+        const rack = yield select((state) => state.objects.rack[rackId])
         yield put(goDownOneInteractionLevel())
         yield put(
-            addPropToStoreObject('rack', rack._id, { machines: rack.machines.filter((_, idx) => idx !== position - 1) })
+            addPropToStoreObject('rack', rackId, { machines: rack.machines.filter((_, idx) => idx !== position - 1) })
         )
         yield updateTopologyOnServer(topologyId)
     } catch (error) {
@@ -232,23 +223,19 @@ const unitMapping = {
     storage: 'storages',
 }
 
-export function* onAddUnit(action) {
+export function* onAddUnit({ machineId, unitType, id }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const tileId = yield select((state) => state.interactionLevel.tileId)
-        const position = yield select((state) => state.interactionLevel.position)
-        const machine = yield select(
-            (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]]
-        )
+        const machine = yield select((state) => state.objects.machine[machineId])
 
-        if (machine[unitMapping[action.unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) {
+        if (machine[unitMapping[unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) {
             return
         }
 
-        const units = [...machine[unitMapping[action.unitType]], action.id]
+        const units = [...machine[unitMapping[unitType]], id]
         yield put(
             addPropToStoreObject('machine', machine._id, {
-                [unitMapping[action.unitType]]: units,
+                [unitMapping[unitType]]: units,
             })
         )
         yield updateTopologyOnServer(topologyId)
@@ -257,20 +244,16 @@ export function* onAddUnit(action) {
     }
 }
 
-export function* onDeleteUnit(action) {
+export function* onDeleteUnit({ machineId, unitType, index }) {
     try {
         const topologyId = yield select((state) => state.currentTopologyId)
-        const tileId = yield select((state) => state.interactionLevel.tileId)
-        const position = yield select((state) => state.interactionLevel.position)
-        const machine = yield select(
-            (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]]
-        )
-        const unitIds = machine[unitMapping[action.unitType]].slice()
-        unitIds.splice(action.index, 1)
+        const machine = yield select((state) => state.objects.machine[machineId])
+        const unitIds = machine[unitMapping[unitType]].slice()
+        unitIds.splice(index, 1)
 
         yield put(
             addPropToStoreObject('machine', machine._id, {
-                [unitMapping[action.unitType]]: unitIds,
+                [unitMapping[unitType]]: unitIds,
             })
         )
         yield updateTopologyOnServer(topologyId)
diff --git a/opendc-web/opendc-web-ui/src/util/sidebar-space.js b/opendc-web/opendc-web-ui/src/util/sidebar-space.js
deleted file mode 100644
index 005c40f3..00000000
--- a/opendc-web/opendc-web-ui/src/util/sidebar-space.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isCollapsible = (router) =>
-    router.asPath.indexOf('portfolios') === -1 && router.asPath.indexOf('scenarios') === -1
diff --git a/opendc-web/opendc-web-ui/src/util/state-utils.js b/opendc-web/opendc-web-ui/src/util/state-utils.js
deleted file mode 100644
index e5b695c3..00000000
--- a/opendc-web/opendc-web-ui/src/util/state-utils.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const getState = (dispatch) =>
-    new Promise((resolve) => {
-        dispatch((dispatch, getState) => {
-            resolve(getState())
-        })
-    })
diff --git a/opendc-web/opendc-web-ui/src/util/tile-calculations.js b/opendc-web/opendc-web-ui/src/util/tile-calculations.js
index 764ae6ac..374ca48c 100644
--- a/opendc-web/opendc-web-ui/src/util/tile-calculations.js
+++ b/opendc-web/opendc-web-ui/src/util/tile-calculations.js
@@ -18,8 +18,8 @@ function getWallSegments(tiles) {
                 }
 
                 let doInsert = true
-                for (let tileIndex in tiles) {
-                    if (tiles[tileIndex].positionX === x + dX && tiles[tileIndex].positionY === y + dY) {
+                for (const tile of tiles) {
+                    if (tile.positionX === x + dX && tile.positionY === y + dY) {
                         doInsert = false
                         break
                     }