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

11 files changed, 348 insertions, 78 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
index 5bac7fea..d0aac5ae 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/construction-mode.js
@@ -4,7 +4,6 @@ import {
     CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED,
     FINISH_NEW_ROOM_CONSTRUCTION,
     FINISH_ROOM_EDIT,
-    SET_CURRENT_TOPOLOGY,
     START_NEW_ROOM_CONSTRUCTION_SUCCEEDED,
     START_ROOM_EDIT,
 } from '../actions/topology/building'
@@ -19,7 +18,6 @@ export function currentRoomInConstruction(state = '-1', action) {
         case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED:
         case FINISH_NEW_ROOM_CONSTRUCTION:
         case FINISH_ROOM_EDIT:
-        case SET_CURRENT_TOPOLOGY:
         case DELETE_ROOM:
             return '-1'
         default:
@@ -32,7 +30,6 @@ export function inRackConstructionMode(state = false, action) {
         case START_RACK_CONSTRUCTION:
             return true
         case STOP_RACK_CONSTRUCTION:
-        case SET_CURRENT_TOPOLOGY:
         case GO_DOWN_ONE_INTERACTION_LEVEL:
             return false
         default:
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js b/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js
deleted file mode 100644
index c0baf567..00000000
--- a/opendc-web/opendc-web-ui/src/redux/reducers/current-ids.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building'
-
-export function currentTopologyId(state = '-1', action) {
-    switch (action.type) {
-        case SET_CURRENT_TOPOLOGY:
-            return action.topologyId
-        default:
-            return state
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/index.js b/opendc-web/opendc-web-ui/src/redux/reducers/index.js
index 2f1359d6..7ffb1211 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/index.js
@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux'
 import { construction } from './construction-mode'
-import { currentTopologyId } from './current-ids'
 import { interactionLevel } from './interaction-level'
-import { objects } from './objects'
+import topology from './topology'
 
 const rootReducer = combineReducers({
-    objects,
+    topology,
     construction,
-    currentTopologyId,
     interactionLevel,
 })
 
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
index 9f23949f..b30c68b9 100644
--- a/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/interaction-level.js
@@ -4,14 +4,12 @@ import {
     GO_FROM_RACK_TO_MACHINE,
     GO_FROM_ROOM_TO_RACK,
 } from '../actions/interaction-level'
-import { SET_CURRENT_TOPOLOGY } from '../actions/topology/building'
+import { DELETE_MACHINE } from '../actions/topology/machine'
+import { DELETE_RACK } from '../actions/topology/rack'
+import { DELETE_ROOM } from '../actions/topology/room'
 
 export function interactionLevel(state = { mode: 'BUILDING' }, action) {
     switch (action.type) {
-        case SET_CURRENT_TOPOLOGY:
-            return {
-                mode: 'BUILDING',
-            }
         case GO_FROM_BUILDING_TO_ROOM:
             return {
                 mode: 'ROOM',
@@ -49,6 +47,21 @@ export function interactionLevel(state = { mode: 'BUILDING' }, action) {
             } else {
                 return state
             }
+        case DELETE_MACHINE:
+            return {
+                mode: 'RACK',
+                roomId: state.roomId,
+                tileId: state.tileId,
+            }
+        case DELETE_RACK:
+            return {
+                mode: 'ROOM',
+                roomId: state.roomId,
+            }
+        case DELETE_ROOM:
+            return {
+                mode: 'BUILDING',
+            }
         default:
             return state
     }
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js b/opendc-web/opendc-web-ui/src/redux/reducers/objects.js
deleted file mode 100644
index 11f6d353..00000000
--- a/opendc-web/opendc-web-ui/src/redux/reducers/objects.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { combineReducers } from 'redux'
-import {
-    ADD_ID_TO_STORE_OBJECT_LIST_PROP,
-    ADD_PROP_TO_STORE_OBJECT,
-    ADD_TO_STORE,
-    REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP,
-} from '../actions/objects'
-import { CPU_UNITS, GPU_UNITS, MEMORY_UNITS, STORAGE_UNITS } from '../../util/unit-specifications'
-import { STORE_TOPOLOGY } from '../actions/topologies'
-
-export const objects = combineReducers({
-    cpu: object('cpu', CPU_UNITS),
-    gpu: object('gpu', GPU_UNITS),
-    memory: object('memory', MEMORY_UNITS),
-    storage: object('storage', STORAGE_UNITS),
-    machine: object('machine'),
-    rack: object('rack'),
-    tile: object('tile'),
-    room: object('room'),
-    topology: object('topology'),
-    prefab: object('prefab'),
-})
-
-function object(type, defaultState = {}) {
-    return objectWithId(type, (object) => object._id, defaultState)
-}
-
-function objectWithId(type, getId, defaultState = {}) {
-    return (state = defaultState, action) => {
-        if (action.type === STORE_TOPOLOGY) {
-            return { ...state, ...action.entities[type] }
-        } else if (action.objectType !== type) {
-            return state
-        }
-
-        if (action.type === ADD_TO_STORE) {
-            return { ...state, [getId(action.object)]: action.object }
-        } else if (action.type === ADD_PROP_TO_STORE_OBJECT) {
-            return { ...state, [action.objectId]: { ...state[action.objectId], ...action.propObject } }
-        } else if (action.type === ADD_ID_TO_STORE_OBJECT_LIST_PROP) {
-            return Object.assign({}, state, {
-                [action.objectId]: Object.assign({}, state[action.objectId], {
-                    [action.propName]: [...state[action.objectId][action.propName], action.id],
-                }),
-            })
-        } else if (action.type === REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP) {
-            return Object.assign({}, state, {
-                [action.objectId]: Object.assign({}, state[action.objectId], {
-                    [action.propName]: state[action.objectId][action.propName].filter((id) => id !== action.id),
-                }),
-            })
-        }
-
-        return state
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/index.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/index.js
new file mode 100644
index 00000000..b1c7d29e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/index.js
@@ -0,0 +1,44 @@
+/*
+ * 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 { CPU_UNITS, GPU_UNITS, MEMORY_UNITS, STORAGE_UNITS } from '../../../util/unit-specifications'
+import machine from './machine'
+import rack from './rack'
+import room from './room'
+import tile from './tile'
+import topology from './topology'
+
+function objects(state = {}, action) {
+    return {
+        cpus: CPU_UNITS,
+        gpus: GPU_UNITS,
+        memories: MEMORY_UNITS,
+        storages: STORAGE_UNITS,
+        machines: machine(state.machines, action, state),
+        racks: rack(state.racks, action, state),
+        tiles: tile(state.tiles, action, state),
+        rooms: room(state.rooms, action, state),
+        root: topology(state.root, action, state),
+    }
+}
+
+export default objects
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js
new file mode 100644
index 00000000..41773014
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/machine.js
@@ -0,0 +1,47 @@
+import produce from 'immer'
+import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { DELETE_MACHINE, ADD_UNIT, DELETE_UNIT } from '../../actions/topology/machine'
+import { ADD_MACHINE, DELETE_RACK } from '../../actions/topology/rack'
+
+function machine(state = {}, action, { racks }) {
+    switch (action.type) {
+        case STORE_TOPOLOGY:
+            return action.entities.machines || {}
+        case ADD_MACHINE:
+            return produce(state, (draft) => {
+                const { machine } = action
+                draft[machine._id] = machine
+            })
+        case DELETE_MACHINE:
+            return produce(state, (draft) => {
+                const { machineId } = action
+                delete draft[machineId]
+            })
+        case ADD_UNIT:
+            return produce(state, (draft) => {
+                const { machineId, unitType, unitId } = action
+                draft[machineId][unitType].push(unitId)
+            })
+        case DELETE_UNIT:
+            return produce(state, (draft) => {
+                const { machineId, unitType, unitId } = action
+                const units = draft[machineId][unitType]
+                const index = units.indexOf(unitId)
+                units.splice(index, 1)
+            })
+        case DELETE_RACK:
+            return produce(state, (draft) => {
+                const { rackId } = action
+                const rack = racks[rackId]
+
+                for (const id of rack.machines) {
+                    const machine = draft[id]
+                    machine.rackId = undefined
+                }
+            })
+        default:
+            return state
+    }
+}
+
+export default machine
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js
new file mode 100644
index 00000000..9cc37124
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/rack.js
@@ -0,0 +1,66 @@
+/*
+ * 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 produce from 'immer'
+import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { DELETE_MACHINE } from '../../actions/topology/machine'
+import { DELETE_RACK, EDIT_RACK_NAME, ADD_MACHINE } from '../../actions/topology/rack'
+import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
+
+function rack(state = {}, action, { machines }) {
+    switch (action.type) {
+        case STORE_TOPOLOGY:
+            return action.entities.racks || {}
+        case ADD_RACK_TO_TILE:
+            return produce(state, (draft) => {
+                const { rack } = action
+                draft[rack._id] = rack
+            })
+        case EDIT_RACK_NAME:
+            return produce(state, (draft) => {
+                const { rackId, name } = action
+                draft[rackId].name = name
+            })
+        case DELETE_RACK:
+            return produce(state, (draft) => {
+                const { rackId } = action
+                delete draft[rackId]
+            })
+        case ADD_MACHINE:
+            return produce(state, (draft) => {
+                const { machine } = action
+                draft[machine.rackId].machines.push(machine._id)
+            })
+        case DELETE_MACHINE:
+            return produce(state, (draft) => {
+                const { machineId } = action
+                const machine = machines[machineId]
+                const rack = draft[machine.rackId]
+                const index = rack.machines.indexOf(machineId)
+                rack.machines.splice(index, 1)
+            })
+        default:
+            return state
+    }
+}
+
+export default rack
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js
new file mode 100644
index 00000000..b61c9d82
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/room.js
@@ -0,0 +1,65 @@
+/*
+ * 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 produce from 'immer'
+import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { ADD_TILE, DELETE_TILE } from '../../actions/topology/building'
+import { DELETE_ROOM, EDIT_ROOM_NAME, ADD_ROOM } from '../../actions/topology/room'
+
+function room(state = {}, action, { tiles }) {
+    switch (action.type) {
+        case STORE_TOPOLOGY:
+            return action.entities.rooms || {}
+        case ADD_ROOM:
+            return produce(state, (draft) => {
+                const { room } = action
+                draft[room._id] = room
+            })
+        case DELETE_ROOM:
+            return produce(state, (draft) => {
+                const { roomId } = action
+                delete draft[roomId]
+            })
+        case EDIT_ROOM_NAME:
+            return produce(state, (draft) => {
+                const { roomId, name } = action
+                draft[roomId].name = name
+            })
+        case ADD_TILE:
+            return produce(state, (draft) => {
+                const { tile } = action
+                draft[tile.roomId].tiles.push(tile._id)
+            })
+        case DELETE_TILE:
+            return produce(state, (draft) => {
+                const { tileId } = action
+                const tile = tiles[tileId]
+                const room = draft[tile.roomId]
+                const index = room.tiles.indexOf(tileId)
+                room.tiles.splice(index, 1)
+            })
+        default:
+            return state
+    }
+}
+
+export default room
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js
new file mode 100644
index 00000000..e0c5dd33
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/tile.js
@@ -0,0 +1,59 @@
+/*
+ * 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 produce from 'immer'
+import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { ADD_TILE, DELETE_TILE } from '../../actions/topology/building'
+import { DELETE_RACK } from '../../actions/topology/rack'
+import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
+
+function tile(state = {}, action, { racks }) {
+    switch (action.type) {
+        case STORE_TOPOLOGY:
+            return action.entities.tiles || {}
+        case ADD_TILE:
+            return produce(state, (draft) => {
+                const { tile } = action
+                draft[tile._id] = tile
+            })
+        case DELETE_TILE:
+            return produce(state, (draft) => {
+                const { tileId } = action
+                delete draft[tileId]
+            })
+        case ADD_RACK_TO_TILE:
+            return produce(state, (draft) => {
+                const { rack } = action
+                draft[rack.tileId].rack = rack._id
+            })
+        case DELETE_RACK:
+            return produce(state, (draft) => {
+                const { rackId } = action
+                const rack = racks[rackId]
+                draft[rack.tileId].rack = undefined
+            })
+        default:
+            return state
+    }
+}
+
+export default tile
diff --git a/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js b/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js
new file mode 100644
index 00000000..da0e6988
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/reducers/topology/topology.js
@@ -0,0 +1,47 @@
+/*
+ * 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 produce from 'immer'
+import { STORE_TOPOLOGY } from '../../actions/topologies'
+import { ADD_ROOM, DELETE_ROOM } from '../../actions/topology/room'
+
+function topology(state = undefined, action) {
+    switch (action.type) {
+        case STORE_TOPOLOGY:
+            return action.topology
+        case ADD_ROOM:
+            return produce(state, (draft) => {
+                const { room } = action
+                draft.rooms.push(room._id)
+            })
+        case DELETE_ROOM:
+            return produce(state, (draft) => {
+                const { roomId } = action
+                const index = draft.rooms.indexOf(roomId)
+                draft.rooms.splice(index, 1)
+            })
+        default:
+            return state
+    }
+}
+
+export default topology