merge: Address technical debt in topology view v2 (#163)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend (v2).

* Perform Saga mutations through React Query
* Add table view for topology view
* Extract topology construction out of Sagas
* Toggle to Floor Plan on room select

22 files changed, 138 insertions, 61 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
new file mode 100644
index 00000000..9bf369e9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -0,0 +1,69 @@
+import { Button } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { useTopology } from '../../data/topology'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { deleteRoom } from '../../redux/actions/topology/room'
+import TableEmptyState from '../util/TableEmptyState'
+
+function RoomTable({ topologyId, onSelect }) {
+    const dispatch = useDispatch()
+    const { status, data: topology } = useTopology(topologyId)
+
+    const onDelete = (room) => dispatch(deleteRoom(room._id))
+
+    const columns = ['Name', 'Tiles', 'Racks']
+    const rows =
+        topology?.rooms.length > 0
+            ? topology.rooms.map((room) => {
+                  const tileCount = room.tiles.length
+                  const rackCount = room.tiles.filter((tile) => tile.rack).length
+                  return [
+                      {
+                          title: (
+                              <Button variant="link" isInline onClick={() => onSelect(room)}>
+                                  {room.name}
+                              </Button>
+                          ),
+                      },
+                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
+                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        topology?.rooms.length > 0
+            ? [
+                  {
+                      title: 'Delete room',
+                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+RoomTable.propTypes = {
+    topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
+}
+
+export default RoomTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
index c16f554c..2f27749f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -39,7 +39,7 @@ import { useSelector } from 'react-redux'
 import TopologySidebar from './sidebar/TopologySidebar'
 
 function TopologyMap() {
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+    const topologyIsLoading = useSelector((state) => !state.topology.root)
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     const [isExpanded, setExpanded] = useState(true)
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index f773dcd1..213a4868 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -33,12 +33,13 @@ import {
     GridItem,
     Skeleton,
 } from '@patternfly/react-core'
+import React from 'react'
 import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
+import RoomTable from './RoomTable'
 
-function TopologyOverview({ topologyId }) {
+function TopologyOverview({ topologyId, onSelect }) {
     const { data: topology } = useTopology(topologyId)
-
     return (
         <Grid hasGutter>
             <GridItem md={2}>
@@ -66,12 +67,21 @@ function TopologyOverview({ topologyId }) {
                     </CardBody>
                 </Card>
             </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardTitle>Rooms</CardTitle>
+                    <CardBody>
+                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
+                    </CardBody>
+                </Card>
+            </GridItem>
         </Grid>
     )
 }
 
 TopologyOverview.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default TopologyOverview
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 5d19b3ad..d8735cf1 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useContext } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { Provider, useStore } from 'react-redux'
+import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
 import { mapContainer } from './MapStage.module.scss'
 import MapLayer from './layers/MapLayer'
@@ -12,7 +12,7 @@ import ScaleIndicator from './controls/ScaleIndicator'
 import Toolbar from './controls/Toolbar'
 
 function MapStage() {
-    const store = useStore()
+    const reduxContext = useContext(ReactReduxContext)
     const { ref, width = 100, height = 100 } = useResizeObserver()
     const stageRef = useRef(null)
     const [[x, y], setPos] = useState([0, 0])
@@ -68,11 +68,11 @@ function MapStage() {
                 x={x}
                 y={y}
             >
-                <Provider store={store}>
+                <ReactReduxContext.Provider value={reduxContext}>
                     <MapLayer />
                     <RoomHoverLayer />
                     <ObjectHoverLayer />
-                </Provider>
+                </ReactReduxContext.Provider>
             </Stage>
             <ScaleIndicator scale={scale} />
             <Toolbar onZoom={onZoomButton} onExport={onExport} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
index c35cbde7..be1f3e45 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -6,18 +6,18 @@ import RackFillBar from './elements/RackFillBar'
 function RackSpaceFillContainer({ tileId, ...props }) {
     const fillFraction = useSelector((state) => {
         let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[tileId].rack]
+        const rack = state.topology.racks[state.topology.tiles[tileId].rack]
         const machineIds = rack.machines
         machineIds.forEach((machineId) => {
             if (machineId !== null) {
-                const machine = state.objects.machine[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                const machine = state.topology.machines[machineId]
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.topology.cpus[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.topology.gpus[id].energyConsumptionW))
                 machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
+                    (id) => (energyConsumptionTotal += state.topology.memories[id].energyConsumptionW)
                 )
                 machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
+                    (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW)
                 )
             }
         })
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
index a6766f33..0c15d54b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux'
 import RackFillBar from './elements/RackFillBar'
 
 function RackSpaceFillContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 93ba9c93..65189891 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -31,7 +31,7 @@ function RoomContainer({ roomId, ...props }) {
         return {
             interactionLevel: state.interactionLevel,
             currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.objects.room[roomId],
+            room: state.topology.rooms[roomId],
         }
     })
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
index 149e26a1..411a5ca7 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -28,7 +28,7 @@ import TileGroup from './groups/TileGroup'
 
 function TileContainer({ tileId, ...props }) {
     const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[tileId])
+    const tile = useSelector((state) => state.topology.tiles[tileId])
 
     const dispatch = useDispatch()
     const onClick = (tile) => {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
index eaebabd5..cc0d46b3 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
@@ -22,11 +22,10 @@
 
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { useActiveTopology } from '../../../data/topology'
 import TopologyGroup from './groups/TopologyGroup'
 
 function TopologyContainer() {
-    const topology = useActiveTopology()
+    const topology = useSelector((state) => state.topology.root)
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
index 77f553dd..143f70c2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -26,7 +26,9 @@ import { useSelector } from 'react-redux'
 import WallGroup from './groups/WallGroup'
 
 function WallContainer({ roomId, ...props }) {
-    const tiles = useSelector((state) => state.objects.room[roomId].tiles.map((tileId) => state.objects.tile[tileId]))
+    const tiles = useSelector((state) => {
+        return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId])
+    })
     return <WallGroup {...props} tiles={tiles} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
index 47d9c992..1f00de36 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -34,8 +34,8 @@ function ObjectHoverLayer() {
             return false
         }
 
-        const currentRoom = state.objects.room[state.interactionLevel.roomId]
-        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
+        const currentRoom = state.topology.rooms[state.interactionLevel.roomId]
+        const tiles = currentRoom.tiles.map((tileId) => state.topology.tiles[tileId])
         const tile = findTileWithPosition(tiles, x, y)
 
         return !(tile === null || tile.rack)
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 59f83b2b..5e351691 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -35,17 +35,17 @@ function RoomHoverLayer() {
     const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
     const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
     const isValid = useSelector((state) => (x, y) => {
-        const newRoom = { ...state.objects.room[state.construction.currentRoomInConstruction] }
-        const oldRooms = Object.keys(state.objects.room)
-            .map((id) => ({ ...state.objects.room[id] }))
+        const newRoom = { ...state.topology.rooms[state.construction.currentRoomInConstruction] }
+        const oldRooms = Object.keys(state.topology.rooms)
+            .map((id) => ({ ...state.topology.rooms[id] }))
             .filter(
                 (room) =>
-                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
+                    state.topology.root.rooms.indexOf(room._id) !== -1 &&
                     room._id !== state.construction.currentRoomInConstruction
             )
 
         ;[...oldRooms, newRoom].forEach((room) => {
-            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
+            room.tiles = room.tiles.map((tileId) => state.topology.tiles[tileId])
         })
         if (newRoom.tiles.length === 0) {
             return findPositionInRooms(oldRooms, x, y) === -1
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
index 00ce4603..a4b9457b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -20,21 +20,20 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { Button } from '@patternfly/react-core'
 import { TrashIcon } from '@patternfly/react-icons'
 import ConfirmationModal from '../../../util/modals/ConfirmationModal'
 import { deleteMachine } from '../../../../redux/actions/topology/machine'
 
-function DeleteMachine() {
+function DeleteMachine({ machineId }) {
     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(rackId, position))
+            dispatch(deleteMachine(machineId))
         }
         setVisible(false)
     }
@@ -53,4 +52,8 @@ function DeleteMachine() {
     )
 }
 
+DeleteMachine.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
 export default DeleteMachine
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 0c3dea98..9268f615 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
@@ -13,9 +13,9 @@ import {
 import { useSelector } from 'react-redux'
 
 function MachineSidebar({ tileId, position }) {
-    const machine = useSelector(({ objects }) => {
-        const rack = objects.rack[objects.tile[tileId].rack]
-        return objects.machine[rack.machines[position - 1]]
+    const machine = useSelector(({ topology }) => {
+        const rack = topology.racks[topology.tiles[tileId].rack]
+        return topology.machines[rack.machines[position - 1]]
     })
     const machineId = machine._id
     return (
@@ -30,7 +30,7 @@ function MachineSidebar({ tileId, position }) {
                 </TextList>
 
                 <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
+                <DeleteMachine machineId={machineId} />
 
                 <Title headingLevel="h2">Units</Title>
             </TextContent>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
index fc805b95..6b136120 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -27,7 +27,7 @@ import UnitAddComponent from './UnitAddComponent'
 import { addUnit } from '../../../../redux/actions/topology/machine'
 
 function UnitAddContainer({ machineId, unitType }) {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const units = useSelector((state) => Object.values(state.topology[unitType]))
     const dispatch = useDispatch()
 
     const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
index 901fa45b..6dcc414f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -26,18 +26,11 @@ import { useDispatch, useSelector } from 'react-redux'
 import UnitListComponent from './UnitListComponent'
 import { deleteUnit } from '../../../../redux/actions/topology/machine'
 
-const unitMapping = {
-    cpu: 'cpus',
-    gpu: 'gpus',
-    memory: 'memories',
-    storage: 'storages',
-}
-
 function UnitListContainer({ machineId, unitType }) {
     const dispatch = useDispatch()
     const units = useSelector((state) => {
-        const machine = state.objects.machine[machineId]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+        const machine = state.topology.machines[machineId]
+        return machine[unitType].map((id) => state.topology[unitType][id])
     })
 
     const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
index 6d10d2df..b800e9d4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -10,20 +10,20 @@ function UnitTabsComponent({ machineId }) {
     return (
         <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
             <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="cpu" />
-                <UnitListContainer machineId={machineId} unitType="cpu" />
+                <UnitAddContainer machineId={machineId} unitType="cpus" />
+                <UnitListContainer machineId={machineId} unitType="cpus" />
             </Tab>
             <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="gpu" />
-                <UnitListContainer machineId={machineId} unitType="gpu" />
+                <UnitAddContainer machineId={machineId} unitType="gpus" />
+                <UnitListContainer machineId={machineId} unitType="gpus" />
             </Tab>
             <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="memory" />
-                <UnitListContainer machineId={machineId} unitType="memory" />
+                <UnitAddContainer machineId={machineId} unitType="memories" />
+                <UnitListContainer machineId={machineId} unitType="memories" />
             </Tab>
             <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="storage" />
-                <UnitListContainer machineId={machineId} unitType="storage" />
+                <UnitAddContainer machineId={machineId} unitType="storages" />
+                <UnitListContainer machineId={machineId} unitType="storages" />
             </Tab>
         </Tabs>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
index 80c6349a..0583a7a4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 import ConfirmationModal from '../../../util/modals/ConfirmationModal'
@@ -31,9 +31,10 @@ import { deleteRack } from '../../../../redux/actions/topology/rack'
 function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.topology.tiles[tileId].rack)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRack(tileId))
+            dispatch(deleteRack(tileId, rackId))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
index 6fbff949..619bb4e2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -28,8 +28,8 @@ import { goFromRackToMachine } from '../../../../redux/actions/interaction-level
 import { addMachine } from '../../../../redux/actions/topology/rack'
 
 function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.topology.machines[id]))
     const machinesNull = useMemo(() => {
         const res = Array(rack.capacity).fill(null)
         for (const machine of machines) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
index 09d73af7..30f38cce 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -5,7 +5,7 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 3c9f152a..8f6ff135 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -17,7 +17,7 @@ import {
 import { useSelector } from 'react-redux'
 
 function RackSidebar({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
 
     return (
         <div className={sidebarContainer}>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
index e8d8b33c..fb52d826 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -27,7 +27,7 @@ import NameComponent from '../NameComponent'
 import { editRoomName } from '../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
-    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
+    const { name: roomName, _id } = useSelector((state) => state.topology.rooms[roomId])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {