ui: Simplify normalization of topology

This change updates the OpenDC frontend to use the normalizr library for
normalizing the user topology.

17 files changed, 71 insertions, 72 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
                 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
index 62761583..fd55582f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
@@ -15,7 +15,7 @@ const ScenarioListContainer = ({ portfolioId }) => {
         .map((res) => res.data)
     const topologies = useTopologies(project?.topologyIds ?? [])
         .filter((res) => res.data)
-        .map((res) => res.data)
+        .map((res) => ({ _id: res.data._id, name: res.data.name }))
     const traces = useTraces().data ?? []
     const schedulers = useSchedulers().data ?? []
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
index 78db166c..55eab23a 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
@@ -16,7 +16,7 @@ const TopologyListContainer = () => {
     const { data: currentProject } = useProject(currentProjectId)
     const topologies = useTopologies(currentProject?.topologyIds ?? [])
         .filter((res) => res.data)
-        .map((res) => res.data)
+        .map((res) => ({ _id: res.data._id, name: res.data.name }))
     const currentTopologyId = useActiveTopology()?._id
     const [isVisible, setVisible] = useState(false)
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
index cb7ec8f9..7553c2fe 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
@@ -5,7 +5,7 @@ import MachineSidebarComponent from '../../../../../components/app/sidebars/topo
 const MachineSidebarContainer = (props) => {
     const machineId = useSelector(
         (state) =>
-            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[
+            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
                 state.interactionLevel.position - 1
             ]
     )
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js
deleted file mode 100644
index acb16a21..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { deleteUnit } from '../../../../../redux/actions/topology/machine'
-import UnitComponent from '../../../../../components/app/sidebars/topology/machine/UnitComponent'
-
-const UnitContainer = ({ unitId, unitType }) => {
-    const dispatch = useDispatch()
-    const unit = useSelector((state) => state.objects[unitType][unitId])
-    const onDelete = () => dispatch(deleteUnit(unitType, unitId))
-
-    return <UnitComponent index={unitId} unit={unit} unitType={unitType} onDelete={onDelete} />
-}
-
-export default UnitContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js
index c5c9444d..cdd7e268 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js
@@ -1,17 +1,34 @@
+import PropTypes from 'prop-types'
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import UnitListComponent from '../../../../../components/app/sidebars/topology/machine/UnitListComponent'
+import { deleteUnit } from '../../../../../redux/actions/topology/machine'
 
-const UnitListContainer = (props) => {
-    const unitIds = useSelector(
-        (state) =>
+const unitMapping = {
+    cpu: 'cpus',
+    gpu: 'gpus',
+    memory: 'memories',
+    storage: 'storages',
+}
+
+const UnitListContainer = ({ unitType, ...props }) => {
+    const dispatch = useDispatch()
+    const units = useSelector((state) => {
+        const machine =
             state.objects.machine[
-                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[
+                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
                     state.interactionLevel.position - 1
                 ]
-            ][props.unitType + 'Ids']
-    )
-    return <UnitListComponent {...props} unitIds={unitIds} />
+            ]
+        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+    })
+    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
+
+    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
+}
+
+UnitListContainer.propTypes = {
+    unitType: PropTypes.string.isRequired,
 }
 
 export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
deleted file mode 100644
index 2134e411..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent'
-
-const EmptySlotContainer = (props) => {
-    const dispatch = useDispatch()
-    const onAdd = () => dispatch(addMachine(props.position))
-    return <EmptySlotComponent {...props} onAdd={onAdd} />
-}
-
-export default EmptySlotContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
deleted file mode 100644
index 7d8e32c1..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent'
-
-const MachineContainer = (props) => {
-    const machine = useSelector((state) => state.objects.machine[props.machineId])
-    const dispatch = useDispatch()
-    return (
-        <MachineComponent {...props} onClick={() => dispatch(goFromRackToMachine(props.position))} machine={machine} />
-    )
-}
-
-export default MachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
index b45300fc..2118d915 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
@@ -1,12 +1,29 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
+import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
+import { addMachine } from '../../../../../redux/actions/topology/rack'
 
 const MachineListContainer = (props) => {
-    const machineIds = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const machinesNull = useMemo(() => {
+        const res = Array(rack.capacity).fill(null)
+        for (const machine of machines) {
+            res[machine.position - 1] = machine
+        }
+        return res
+    }, [rack, machines])
+    const dispatch = useDispatch()
+
+    return (
+        <MachineListComponent
+            {...props}
+            machines={machinesNull}
+            onAdd={(index) => dispatch(addMachine(index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
     )
-    return <MachineListComponent {...props} machineIds={machineIds} />
 }
 
 export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
index eaa1e78e..2c39cf9f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -7,7 +7,7 @@ import { editRackName } from '../../../../../redux/actions/topology/rack'
 const RackNameContainer = () => {
     const [isVisible, setVisible] = useState(false)
     const rackName = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
+        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].name
     )
     const dispatch = useDispatch()
     const callback = (name) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
index b8fc3bfb..34777125 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'
 import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
 
 const RackSidebarContainer = (props) => {
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rackId)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
     return <RackSidebarComponent {...props} rackId={rackId} />
 }