From 3d1c02e50ee619598bcd7fad4368be8b4a039e84 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 7 Mar 2022 18:19:21 +0100
Subject: 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.
---
 .../opendc-web-ui/src/components/topologies/RoomTable.js  |  9 +++++----
 .../src/components/topologies/TopologyOverview.js         | 15 ++++++++++-----
 .../src/components/topologies/map/TileContainer.js        |  2 +-
 .../components/topologies/map/elements/ImageComponent.js  |  1 +
 .../src/components/topologies/map/groups/RackGroup.js     |  4 ++--
 .../src/components/topologies/map/groups/RoomGroup.js     |  6 +++---
 .../components/topologies/map/layers/RoomHoverLayer.js    |  4 ++--
 .../topologies/sidebar/machine/MachineSidebar.js          |  2 +-
 .../topologies/sidebar/machine/UnitAddComponent.js        |  2 +-
 .../topologies/sidebar/machine/UnitListContainer.js       |  2 +-
 .../src/components/topologies/sidebar/rack/AddPrefab.js   |  7 ++-----
 .../topologies/sidebar/rack/MachineListContainer.js       |  2 +-
 .../topologies/sidebar/rack/RackNameContainer.js          |  4 ++--
 .../src/components/topologies/sidebar/room/RoomName.js    |  4 ++--
 14 files changed, 34 insertions(+), 30 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 9bf369e9..49e5f095 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -7,11 +7,11 @@ import { Table, TableBody, TableHeader } from '@patternfly/react-table'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
-function RoomTable({ topologyId, onSelect }) {
+function RoomTable({ projectId, topologyId, onSelect }) {
     const dispatch = useDispatch()
-    const { status, data: topology } = useTopology(topologyId)
+    const { status, data: topology } = useTopology(projectId, topologyId)
 
-    const onDelete = (room) => dispatch(deleteRoom(room._id))
+    const onDelete = (room) => dispatch(deleteRoom(room.id))
 
     const columns = ['Name', 'Tiles', 'Racks']
     const rows =
@@ -62,7 +62,8 @@ function RoomTable({ topologyId, onSelect }) {
 }
 
 RoomTable.propTypes = {
-    topologyId: PropTypes.string,
+    projectId: PropTypes.number,
+    topologyId: PropTypes.number,
     onSelect: PropTypes.func,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index 213a4868..f8ee4990 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -38,8 +38,8 @@ import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import RoomTable from './RoomTable'
 
-function TopologyOverview({ topologyId, onSelect }) {
-    const { data: topology } = useTopology(topologyId)
+function TopologyOverview({ projectId, topologyNumber, onSelect }) {
+    const { data: topology } = useTopology(projectId, topologyNumber)
     return (
         <Grid hasGutter>
             <GridItem md={2}>
@@ -57,7 +57,7 @@ function TopologyOverview({ topologyId, onSelect }) {
                                 <DescriptionListTerm>Last edited</DescriptionListTerm>
                                 <DescriptionListDescription>
                                     {topology ? (
-                                        parseAndFormatDateTime(topology.datetimeLastEdited)
+                                        parseAndFormatDateTime(topology.updatedAt)
                                     ) : (
                                         <Skeleton screenreaderText="Loading topology" />
                                     )}
@@ -71,7 +71,11 @@ function TopologyOverview({ topologyId, onSelect }) {
                 <Card>
                     <CardTitle>Rooms</CardTitle>
                     <CardBody>
-                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
+                        <RoomTable
+                            projectId={projectId}
+                            topologyId={topologyNumber}
+                            onSelect={(room) => onSelect('room', room)}
+                        />
                     </CardBody>
                 </Card>
             </GridItem>
@@ -80,7 +84,8 @@ function TopologyOverview({ topologyId, onSelect }) {
 }
 
 TopologyOverview.propTypes = {
-    topologyId: PropTypes.string,
+    projectId: PropTypes.number,
+    topologyNumber: PropTypes.number,
     onSelect: PropTypes.func,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
index 411a5ca7..21be3c79 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -33,7 +33,7 @@ function TileContainer({ tileId, ...props }) {
     const dispatch = useDispatch()
     const onClick = (tile) => {
         if (tile.rack) {
-            dispatch(goFromRoomToRack(tile._id))
+            dispatch(goFromRoomToRack(tile.id))
         }
     }
     return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
index 7d304b6b..fdae53f2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
@@ -21,6 +21,7 @@ function ImageComponent({ src, x, y, width, height, opacity }) {
         }
     }, [src])
 
+    // eslint-disable-next-line jsx-a11y/alt-text
     return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
index 46030135..dad2d62d 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
@@ -11,8 +11,8 @@ function RackGroup({ tile }) {
         <Group>
             <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
             <Group>
-                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
-                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY} />
             </Group>
         </Group>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
index a42e7bb7..3f8b3089 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
@@ -7,7 +7,7 @@ import TileContainer from '../TileContainer'
 import WallContainer from '../WallContainer'
 
 function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick }) {
-    if (currentRoomInConstruction === room._id) {
+    if (currentRoomInConstruction === room.id) {
         return (
             <Group onClick={onClick}>
                 {room.tiles.map((tileId) => (
@@ -22,7 +22,7 @@ function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick
             {(() => {
                 if (
                     (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
-                    interactionLevel.roomId === room._id
+                    interactionLevel.roomId === room.id
                 ) {
                     return [
                         room.tiles
@@ -37,7 +37,7 @@ function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick
                     return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
                 }
             })()}
-            <WallContainer roomId={room._id} />
+            <WallContainer roomId={room.id} />
         </Group>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 5e351691..727f4e25 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -40,8 +40,8 @@ function RoomHoverLayer() {
             .map((id) => ({ ...state.topology.rooms[id] }))
             .filter(
                 (room) =>
-                    state.topology.root.rooms.indexOf(room._id) !== -1 &&
-                    room._id !== state.construction.currentRoomInConstruction
+                    state.topology.root.rooms.indexOf(room.id) !== -1 &&
+                    room.id !== state.construction.currentRoomInConstruction
             )
 
         ;[...oldRooms, newRoom].forEach((room) => {
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} />
-- 
cgit v1.2.3