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

9 files changed, 99 insertions, 118 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js b/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
index ff6b1fa3..8381eeef 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/interaction-level.js
@@ -3,6 +3,13 @@ export const GO_FROM_ROOM_TO_RACK = 'GO_FROM_ROOM_TO_RACK'
 export const GO_FROM_RACK_TO_MACHINE = 'GO_FROM_RACK_TO_MACHINE'
 export const GO_DOWN_ONE_INTERACTION_LEVEL = 'GO_DOWN_ONE_INTERACTION_LEVEL'
 
+export function goToRoom(roomId) {
+    return {
+        type: GO_FROM_BUILDING_TO_ROOM,
+        roomId,
+    }
+}
+
 export function goFromBuildingToRoom(roomId) {
     return (dispatch, getState) => {
         const { interactionLevel } = getState()
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/objects.js b/opendc-web/opendc-web-ui/src/redux/actions/objects.js
deleted file mode 100644
index 7b648b18..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/objects.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const ADD_TO_STORE = 'ADD_TO_STORE'
-export const ADD_PROP_TO_STORE_OBJECT = 'ADD_PROP_TO_STORE_OBJECT'
-export const ADD_ID_TO_STORE_OBJECT_LIST_PROP = 'ADD_ID_TO_STORE_OBJECT_LIST_PROP'
-export const REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP = 'REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP'
-
-export function addToStore(objectType, object) {
-    return {
-        type: ADD_TO_STORE,
-        objectType,
-        object,
-    }
-}
-
-export function addPropToStoreObject(objectType, objectId, propObject) {
-    return {
-        type: ADD_PROP_TO_STORE_OBJECT,
-        objectType,
-        objectId,
-        propObject,
-    }
-}
-
-export function addIdToStoreObjectListProp(objectType, objectId, propName, id) {
-    return {
-        type: ADD_ID_TO_STORE_OBJECT_LIST_PROP,
-        objectType,
-        objectId,
-        propName,
-        id,
-    }
-}
-
-export function removeIdFromStoreObjectListProp(objectType, objectId, propName, id) {
-    return {
-        type: REMOVE_ID_FROM_STORE_OBJECT_LIST_PROP,
-        objectType,
-        objectId,
-        propName,
-        id,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
deleted file mode 100644
index 0ef7795f..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export const ADD_PREFAB = 'ADD_PREFAB'
-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, tileId) {
-    return {
-        type: ADD_PREFAB,
-        name,
-        tileId,
-    }
-}
-
-export function deletePrefab(id) {
-    return {
-        type: DELETE_PREFAB,
-        id,
-    }
-}
-
-export function deletePrefabSucceeded(id) {
-    return {
-        type: DELETE_PREFAB_SUCCEEDED,
-        id,
-    }
-}
-
-export function openPrefabSucceeded(id) {
-    return {
-        type: OPEN_PREFAB_SUCCEEDED,
-        id,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/projects.js b/opendc-web/opendc-web-ui/src/redux/actions/projects.js
deleted file mode 100644
index 4fe6f6a8..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/projects.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const OPEN_PROJECT_SUCCEEDED = 'OPEN_PROJECT_SUCCEEDED'
-
-export function openProjectSucceeded(id) {
-    return {
-        type: OPEN_PROJECT_SUCCEEDED,
-        id,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
index 529e8663..fc697cc2 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
@@ -1,6 +1,14 @@
+export const OPEN_TOPOLOGY = 'OPEN_TOPOLOGY'
 export const ADD_TOPOLOGY = 'ADD_TOPOLOGY'
 export const STORE_TOPOLOGY = 'STORE_TOPOLOGY'
 
+export function openTopology(id) {
+    return {
+        type: OPEN_TOPOLOGY,
+        id,
+    }
+}
+
 export function addTopology(projectId, name, duplicateId) {
     return {
         type: ADD_TOPOLOGY,
@@ -10,9 +18,10 @@ export function addTopology(projectId, name, duplicateId) {
     }
 }
 
-export function storeTopology(entities) {
+export function storeTopology(topology, entities) {
     return {
         type: STORE_TOPOLOGY,
+        topology,
         entities,
     }
 }
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 49425318..939c24a4 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
@@ -1,4 +1,6 @@
-export const SET_CURRENT_TOPOLOGY = 'SET_CURRENT_TOPOLOGY'
+import { uuid } from 'uuidv4'
+import { addRoom, deleteRoom } from './room'
+
 export const START_NEW_ROOM_CONSTRUCTION = 'START_NEW_ROOM_CONSTRUCTION'
 export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = 'START_NEW_ROOM_CONSTRUCTION_SUCCEEDED'
 export const FINISH_NEW_ROOM_CONSTRUCTION = 'FINISH_NEW_ROOM_CONSTRUCTION'
@@ -9,16 +11,19 @@ export const FINISH_ROOM_EDIT = 'FINISH_ROOM_EDIT'
 export const ADD_TILE = 'ADD_TILE'
 export const DELETE_TILE = 'DELETE_TILE'
 
-export function setCurrentTopology(topologyId) {
-    return {
-        type: SET_CURRENT_TOPOLOGY,
-        topologyId,
-    }
-}
-
 export function startNewRoomConstruction() {
-    return {
-        type: START_NEW_ROOM_CONSTRUCTION,
+    return (dispatch, getState) => {
+        const { topology } = getState()
+        const topologyId = topology.root._id
+        const room = {
+            _id: uuid(),
+            name: 'Room',
+            topologyId,
+            tiles: [],
+        }
+
+        dispatch(addRoom(topologyId, room))
+        dispatch(startNewRoomConstructionSucceeded(room._id))
     }
 }
 
@@ -31,8 +36,8 @@ export function startNewRoomConstructionSucceeded(roomId) {
 
 export function finishNewRoomConstruction() {
     return (dispatch, getState) => {
-        const { objects, construction } = getState()
-        if (objects.room[construction.currentRoomInConstruction].tiles.length === 0) {
+        const { topology, construction } = getState()
+        if (topology.rooms[construction.currentRoomInConstruction].tiles.length === 0) {
             dispatch(cancelNewRoomConstruction())
             return
         }
@@ -44,8 +49,11 @@ export function finishNewRoomConstruction() {
 }
 
 export function cancelNewRoomConstruction() {
-    return {
-        type: CANCEL_NEW_ROOM_CONSTRUCTION,
+    return (dispatch, getState) => {
+        const { construction } = getState()
+        const roomId = construction.currentRoomInConstruction
+        dispatch(deleteRoom(roomId))
+        dispatch(cancelNewRoomConstructionSucceeded())
     }
 }
 
@@ -70,24 +78,30 @@ export function finishRoomEdit() {
 
 export function toggleTileAtLocation(positionX, positionY) {
     return (dispatch, getState) => {
-        const { objects, construction } = getState()
+        const { topology, construction } = getState()
 
-        const tileIds = objects.room[construction.currentRoomInConstruction].tiles
+        const roomId = construction.currentRoomInConstruction
+        const tileIds = topology.rooms[roomId].tiles
         for (const tileId of tileIds) {
-            if (objects.tile[tileId].positionX === positionX && objects.tile[tileId].positionY === positionY) {
+            if (topology.tiles[tileId].positionX === positionX && topology.tiles[tileId].positionY === positionY) {
                 dispatch(deleteTile(tileId))
                 return
             }
         }
-        dispatch(addTile(positionX, positionY))
+
+        dispatch(addTile(roomId, positionX, positionY))
     }
 }
 
-export function addTile(positionX, positionY) {
+export function addTile(roomId, positionX, positionY) {
     return {
         type: ADD_TILE,
-        positionX,
-        positionY,
+        tile: {
+            _id: uuid(),
+            roomId,
+            positionX,
+            positionY,
+        },
     }
 }
 
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 170b7648..93320884 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,28 +2,27 @@ export const DELETE_MACHINE = 'DELETE_MACHINE'
 export const ADD_UNIT = 'ADD_UNIT'
 export const DELETE_UNIT = 'DELETE_UNIT'
 
-export function deleteMachine(rackId, position) {
+export function deleteMachine(machineId) {
     return {
         type: DELETE_MACHINE,
-        rackId,
-        position,
+        machineId,
     }
 }
 
-export function addUnit(machineId, unitType, id) {
+export function addUnit(machineId, unitType, unitId) {
     return {
         type: ADD_UNIT,
         machineId,
         unitType,
-        id,
+        unitId,
     }
 }
 
-export function deleteUnit(machineId, unitType, index) {
+export function deleteUnit(machineId, unitType, unitId) {
     return {
         type: DELETE_UNIT,
         machineId,
         unitType,
-        index,
+        unitId,
     }
 }
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 228e3ae9..c319d966 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
@@ -1,3 +1,5 @@
+import { uuid } from 'uuidv4'
+
 export const EDIT_RACK_NAME = 'EDIT_RACK_NAME'
 export const DELETE_RACK = 'DELETE_RACK'
 export const ADD_MACHINE = 'ADD_MACHINE'
@@ -10,9 +12,10 @@ export function editRackName(rackId, name) {
     }
 }
 
-export function deleteRack(tileId) {
+export function deleteRack(tileId, rackId) {
     return {
         type: DELETE_RACK,
+        rackId,
         tileId,
     }
 }
@@ -20,7 +23,14 @@ export function deleteRack(tileId) {
 export function addMachine(rackId, position) {
     return {
         type: ADD_MACHINE,
-        position,
-        rackId,
+        machine: {
+            _id: uuid(),
+            rackId,
+            position,
+            cpus: [],
+            gpus: [],
+            memories: [],
+            storages: [],
+        },
     }
 }
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 e584af89..bd447db5 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
@@ -1,11 +1,28 @@
+import { uuid } from 'uuidv4'
+import {
+    DEFAULT_RACK_SLOT_CAPACITY,
+    DEFAULT_RACK_POWER_CAPACITY,
+} from '../../../components/topologies/map/MapConstants'
 import { findTileWithPosition } from '../../../util/tile-calculations'
 
+export const ADD_ROOM = 'ADD_ROOM'
 export const EDIT_ROOM_NAME = 'EDIT_ROOM_NAME'
 export const DELETE_ROOM = 'DELETE_ROOM'
 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 addRoom(topologyId, room) {
+    return {
+        type: ADD_ROOM,
+        room: {
+            _id: uuid(),
+            topologyId,
+            ...room,
+        },
+    }
+}
+
 export function editRoomName(roomId, name) {
     return {
         type: EDIT_ROOM_NAME,
@@ -28,15 +45,22 @@ export function stopRackConstruction() {
 
 export function addRackToTile(positionX, positionY) {
     return (dispatch, getState) => {
-        const { objects, interactionLevel } = getState()
-        const currentRoom = objects.room[interactionLevel.roomId]
-        const tiles = currentRoom.tiles.map((tileId) => objects.tile[tileId])
+        const { topology, interactionLevel } = getState()
+        const currentRoom = topology.rooms[interactionLevel.roomId]
+        const tiles = currentRoom.tiles.map((tileId) => topology.tiles[tileId])
         const tile = findTileWithPosition(tiles, positionX, positionY)
 
         if (tile !== null) {
             dispatch({
                 type: ADD_RACK_TO_TILE,
-                tileId: tile._id,
+                rack: {
+                    _id: uuid(),
+                    name: 'Rack',
+                    tileId: tile._id,
+                    capacity: DEFAULT_RACK_SLOT_CAPACITY,
+                    powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
+                    machines: [],
+                },
             })
         }
     }