feat(ui): Extract topology construction out of Sagas

This change updates the OpenDC frontend to perform the construction of
the topology directly in the reducers instead of performing the
mutations in Redux Sagas as side effects. This allows us to nicely map
actions to mutations in the reducers.

9 files changed, 25 insertions, 24 deletions

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