ui: Simplify data fetching in frontend

This pull request aims to simplify the data fetching logic in the OpenDC frontend.
Previously, the frontend used Redux extensively to sync the server state with the 
client state, which introduced a lot of unnecessary complexity. 

With this pull request, we move most of the data fetching logic out of Redux and 
instead use React Query to perform the logic for fetching and caching API requests. 

* Move all server data except topologies outside Redux
* Use React Query for fetching server data
* (De)normalize topology using Normalizr
* Remove current ids state from Redux 
* Combine fetching of project relations

7 files changed, 19 insertions, 14 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
index 00d3152f..d22317a5 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
@@ -5,17 +5,17 @@ import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 const RackSpaceFillContainer = (props) => {
     const state = useSelector((state) => {
         let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[props.tileId].rackId]
-        const machineIds = rack.machineIds
+        const rack = state.objects.rack[state.objects.tile[props.tileId].rack]
+        const machineIds = rack.machines
         machineIds.forEach((machineId) => {
             if (machineId !== null) {
                 const machine = state.objects.machine[machineId]
-                machine.cpuIds.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpuIds.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
-                machine.memoryIds.forEach(
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                machine.memories.forEach(
                     (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
                 )
-                machine.storageIds.forEach(
+                machine.storages.forEach(
                     (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
                 )
             }
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
index dc5119fd..8d6f61e0 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
@@ -4,7 +4,7 @@ import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 
 const RackSpaceFillContainer = (props) => {
     const state = useSelector((state) => {
-        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rackId].machineIds
+        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rack].machines
         return {
             type: 'space',
             fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
index 52d48317..0a9e1503 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
@@ -15,4 +16,8 @@ const RoomContainer = (props) => {
     return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
 }
 
+RoomContainer.propTypes = {
+    roomId: PropTypes.string,
+}
+
 export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
index f97e89a1..50a2abfd 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
@@ -9,7 +9,7 @@ const TileContainer = (props) => {
 
     const dispatch = useDispatch()
     const onClick = (tile) => {
-        if (tile.rackId) {
+        if (tile.rack) {
             dispatch(goFromRoomToRack(tile._id))
         }
     }
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
index 2a469860..67f36396 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
@@ -4,7 +4,7 @@ import WallGroup from '../../../components/app/map/groups/WallGroup'
 
 const WallContainer = (props) => {
     const tiles = useSelector((state) =>
-        state.objects.room[props.roomId].tileIds.map((tileId) => state.objects.tile[tileId])
+        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
     )
     return <WallGroup {...props} tiles={tiles} />
 }
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
index 8e934a01..e9a64545 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -16,10 +16,10 @@ const ObjectHoverLayer = (props) => {
                 }
 
                 const currentRoom = state.objects.room[state.interactionLevel.roomId]
-                const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId])
+                const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
                 const tile = findTileWithPosition(tiles, x, y)
 
-                return !(tile === null || tile.rackId)
+                return !(tile === null || tile.rack)
             },
         }
     })
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
index 1bfadb6d..4070c766 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
@@ -23,14 +23,14 @@ const RoomHoverLayer = (props) => {
                     .map((id) => Object.assign({}, state.objects.room[id]))
                     .filter(
                         (room) =>
-                            state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 &&
+                            state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
                             room._id !== state.construction.currentRoomInConstruction
                     )
 
                 ;[...oldRooms, newRoom].forEach((room) => {
-                    room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])
+                    room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
                 })
-                if (newRoom.tileIds.length === 0) {
+                if (newRoom.tiles.length === 0) {
                     return findPositionInRooms(oldRooms, x, y) === -1
                 }