summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/topologies
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2022-04-04 17:00:31 +0200
committerGitHub <noreply@github.com>2022-04-04 17:00:31 +0200
commit38769373c7e89783d33849283586bfa0b62e8251 (patch)
tree4fda128ee6b30018c1aa14c584cc53ade80e67f7 /opendc-web/opendc-web-ui/src/components/topologies
parent6021aa4278bebb34bf5603ead4b5daeabcdc4c19 (diff)
parent527ae2230f5c2dd22f496f45d5d8e3bd4acdb854 (diff)
merge: Migrate to Quarkus-based web API
This pull request changes the web API to a Quarkus-based version. Currently, the OpenDC web API is written in Python (using Flask). Although Python is a powerful language to develop web services, having another language next to Kotlin/Java and JavaScript introduces some challenges. For instance, the web API and UI lack integration with our Gradle-based build pipeline and require additional steps from the developer to start working with. Furthermore, deploying OpenDC requires having Python installed in addition to the JVM. By converting the web API into a Quarkus application, we can enjoy further integration with our Gradle-based build pipeline and simplify the development/deployment process of OpenDC, by requiring only the JVM and Node to work with OpenDC. ## Implementation Notes :hammer_and_pick: * Move build dependencies into version catalog * Design unified communication protocol * Add Quarkus API implementation * Add new web client implementation * Update runner to use new web client * Fix compatibility with React.js UI * Remove Python build steps from CI pipeline * Update Docker deployment for new web API * Remove obsolete database configuration ## External Dependencies :four_leaf_clover: * Quarkus ## Breaking API Changes :warning: * The new web API only supports SQL-based databases for storing user-data, as opposed to MongoDB currently. We intend to use H2 for development and Postgres for production.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies')
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js9
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js15
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js1
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js4
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js6
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js4
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js7
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js2
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js4
-rw-r--r--opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js4
14 files changed, 34 insertions, 30 deletions
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} />