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

4 files changed, 7 insertions, 6 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
index 80c6349a..0583a7a4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 import ConfirmationModal from '../../../util/modals/ConfirmationModal'
@@ -31,9 +31,10 @@ import { deleteRack } from '../../../../redux/actions/topology/rack'
 function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.topology.tiles[tileId].rack)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRack(tileId))
+            dispatch(deleteRack(tileId, rackId))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
index 6fbff949..619bb4e2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -28,8 +28,8 @@ import { goFromRackToMachine } from '../../../../redux/actions/interaction-level
 import { addMachine } from '../../../../redux/actions/topology/rack'
 
 function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.topology.machines[id]))
     const machinesNull = useMemo(() => {
         const res = Array(rack.capacity).fill(null)
         for (const machine of machines) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
index 09d73af7..30f38cce 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -5,7 +5,7 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 3c9f152a..8f6ff135 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -17,7 +17,7 @@ import {
 import { useSelector } from 'react-redux'
 
 function RackSidebar({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
 
     return (
         <div className={sidebarContainer}>