feat(ui): Extract topology construction out of Sagas

This change updates the OpenDC frontend to perform the construction of
the topology directly in the reducers instead of performing the
mutations in Redux Sagas as side effects. This allows us to nicely map
actions to mutations in the reducers.

5 files changed, 23 insertions, 27 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
index 00ce4603..a4b9457b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -20,21 +20,20 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { Button } from '@patternfly/react-core'
 import { TrashIcon } from '@patternfly/react-icons'
 import ConfirmationModal from '../../../util/modals/ConfirmationModal'
 import { deleteMachine } from '../../../../redux/actions/topology/machine'
 
-function DeleteMachine() {
+function DeleteMachine({ machineId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-    const position = useSelector((state) => state.interactionLevel.position)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteMachine(rackId, position))
+            dispatch(deleteMachine(machineId))
         }
         setVisible(false)
     }
@@ -53,4 +52,8 @@ function DeleteMachine() {
     )
 }
 
+DeleteMachine.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
 export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
index 0c3dea98..9268f615 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -13,9 +13,9 @@ import {
 import { useSelector } from 'react-redux'
 
 function MachineSidebar({ tileId, position }) {
-    const machine = useSelector(({ objects }) => {
-        const rack = objects.rack[objects.tile[tileId].rack]
-        return objects.machine[rack.machines[position - 1]]
+    const machine = useSelector(({ topology }) => {
+        const rack = topology.racks[topology.tiles[tileId].rack]
+        return topology.machines[rack.machines[position - 1]]
     })
     const machineId = machine._id
     return (
@@ -30,7 +30,7 @@ function MachineSidebar({ tileId, position }) {
                 </TextList>
 
                 <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
+                <DeleteMachine machineId={machineId} />
 
                 <Title headingLevel="h2">Units</Title>
             </TextContent>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
index fc805b95..6b136120 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -27,7 +27,7 @@ import UnitAddComponent from './UnitAddComponent'
 import { addUnit } from '../../../../redux/actions/topology/machine'
 
 function UnitAddContainer({ machineId, unitType }) {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const units = useSelector((state) => Object.values(state.topology[unitType]))
     const dispatch = useDispatch()
 
     const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
index 901fa45b..6dcc414f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -26,18 +26,11 @@ import { useDispatch, useSelector } from 'react-redux'
 import UnitListComponent from './UnitListComponent'
 import { deleteUnit } from '../../../../redux/actions/topology/machine'
 
-const unitMapping = {
-    cpu: 'cpus',
-    gpu: 'gpus',
-    memory: 'memories',
-    storage: 'storages',
-}
-
 function UnitListContainer({ machineId, unitType }) {
     const dispatch = useDispatch()
     const units = useSelector((state) => {
-        const machine = state.objects.machine[machineId]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+        const machine = state.topology.machines[machineId]
+        return machine[unitType].map((id) => state.topology[unitType][id])
     })
 
     const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
index 6d10d2df..b800e9d4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -10,20 +10,20 @@ function UnitTabsComponent({ machineId }) {
     return (
         <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
             <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="cpu" />
-                <UnitListContainer machineId={machineId} unitType="cpu" />
+                <UnitAddContainer machineId={machineId} unitType="cpus" />
+                <UnitListContainer machineId={machineId} unitType="cpus" />
             </Tab>
             <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="gpu" />
-                <UnitListContainer machineId={machineId} unitType="gpu" />
+                <UnitAddContainer machineId={machineId} unitType="gpus" />
+                <UnitListContainer machineId={machineId} unitType="gpus" />
             </Tab>
             <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="memory" />
-                <UnitListContainer machineId={machineId} unitType="memory" />
+                <UnitAddContainer machineId={machineId} unitType="memories" />
+                <UnitListContainer machineId={machineId} unitType="memories" />
             </Tab>
             <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="storage" />
-                <UnitListContainer machineId={machineId} unitType="storage" />
+                <UnitAddContainer machineId={machineId} unitType="storages" />
+                <UnitListContainer machineId={machineId} unitType="storages" />
             </Tab>
         </Tabs>
     )