refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.

7 files changed, 10 insertions, 13 deletions

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 9268f615..6f89e10b 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
@@ -17,7 +17,7 @@ function MachineSidebar({ tileId, position }) {
         const rack = topology.racks[topology.tiles[tileId].rack]
         return topology.machines[rack.machines[position - 1]]
     })
-    const machineId = machine._id
+    const machineId = machine.id
     return (
         <div>
             <TextContent>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
index 88591208..4507b409 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -22,7 +22,7 @@ function UnitAddComponent({ units, onAdd }) {
                 selections={selected}
             >
                 {units.map((unit) => (
-                    <SelectOption value={unit._id} key={unit._id}>
+                    <SelectOption value={unit.id} key={unit.id}>
                         {unit.name}
                     </SelectOption>
                 ))}
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 6dcc414f..25e750c4 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
@@ -33,7 +33,7 @@ function UnitListContainer({ machineId, unitType }) {
         return machine[unitType].map((id) => state.topology[unitType][id])
     })
 
-    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit.id))
 
     return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
index e944c2e8..6a0c3ff3 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
@@ -22,14 +22,11 @@
 
 import PropTypes from 'prop-types'
 import React from 'react'
-import { useDispatch } from 'react-redux'
 import { Button } from '@patternfly/react-core'
 import { SaveIcon } from '@patternfly/react-icons'
-import { addPrefab } from '../../../../api/prefabs'
 
-function AddPrefab({ tileId }) {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(addPrefab('name', tileId))
+function AddPrefab() {
+    const onClick = () => {} // TODO
     return (
         <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
             Save this rack to a prefab
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 619bb4e2..e1914730 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
@@ -43,7 +43,7 @@ function MachineListContainer({ tileId, ...props }) {
         <MachineListComponent
             {...props}
             machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(rack._id, index))}
+            onAdd={(index) => dispatch(addMachine(rack.id, index))}
             onSelect={(index) => dispatch(goFromRackToMachine(index))}
         />
     )
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 30f38cce..c3422318 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,11 +5,11 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const { name: rackName, id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRackName(_id, name))
+            dispatch(editRackName(id, name))
         }
     }
     return <NameComponent name={rackName} onEdit={callback} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
index fb52d826..72d45bea 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -27,11 +27,11 @@ import NameComponent from '../NameComponent'
 import { editRoomName } from '../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
-    const { name: roomName, _id } = useSelector((state) => state.topology.rooms[roomId])
+    const { name: roomName, id } = useSelector((state) => state.topology.rooms[roomId])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRoomName(_id, name))
+            dispatch(editRoomName(id, name))
         }
     }
     return <NameComponent name={roomName} onEdit={callback} />