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.

2 files changed, 28 insertions, 46 deletions

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)