diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/map')
9 files changed, 25 insertions, 24 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js index 5d19b3ad..d8735cf1 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js @@ -1,8 +1,8 @@ -import React, { useRef, useState } from 'react' +import React, { useRef, useState, useContext } from 'react' import { HotKeys } from 'react-hotkeys' import { Stage } from 'react-konva' import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants' -import { Provider, useStore } from 'react-redux' +import { ReactReduxContext } from 'react-redux' import useResizeObserver from 'use-resize-observer' import { mapContainer } from './MapStage.module.scss' import MapLayer from './layers/MapLayer' @@ -12,7 +12,7 @@ import ScaleIndicator from './controls/ScaleIndicator' import Toolbar from './controls/Toolbar' function MapStage() { - const store = useStore() + const reduxContext = useContext(ReactReduxContext) const { ref, width = 100, height = 100 } = useResizeObserver() const stageRef = useRef(null) const [[x, y], setPos] = useState([0, 0]) @@ -68,11 +68,11 @@ function MapStage() { x={x} y={y} > - <Provider store={store}> + <ReactReduxContext.Provider value={reduxContext}> <MapLayer /> <RoomHoverLayer /> <ObjectHoverLayer /> - </Provider> + </ReactReduxContext.Provider> </Stage> <ScaleIndicator scale={scale} /> <Toolbar onZoom={onZoomButton} onExport={onExport} /> diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js index c35cbde7..be1f3e45 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js @@ -6,18 +6,18 @@ import RackFillBar from './elements/RackFillBar' function RackSpaceFillContainer({ tileId, ...props }) { const fillFraction = useSelector((state) => { let energyConsumptionTotal = 0 - const rack = state.objects.rack[state.objects.tile[tileId].rack] + const rack = state.topology.racks[state.topology.tiles[tileId].rack] const machineIds = rack.machines machineIds.forEach((machineId) => { if (machineId !== null) { - const machine = state.objects.machine[machineId] - machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW)) - machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW)) + const machine = state.topology.machines[machineId] + machine.cpus.forEach((id) => (energyConsumptionTotal += state.topology.cpus[id].energyConsumptionW)) + machine.gpus.forEach((id) => (energyConsumptionTotal += state.topology.gpus[id].energyConsumptionW)) machine.memories.forEach( - (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW) + (id) => (energyConsumptionTotal += state.topology.memories[id].energyConsumptionW) ) machine.storages.forEach( - (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW) + (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW) ) } }) diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js index a6766f33..0c15d54b 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js @@ -26,7 +26,7 @@ import { useSelector } from 'react-redux' import RackFillBar from './elements/RackFillBar' function RackSpaceFillContainer({ tileId, ...props }) { - 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 <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} /> } diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js index 93ba9c93..65189891 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js @@ -31,7 +31,7 @@ function RoomContainer({ roomId, ...props }) { return { interactionLevel: state.interactionLevel, currentRoomInConstruction: state.construction.currentRoomInConstruction, - room: state.objects.room[roomId], + room: state.topology.rooms[roomId], } }) const dispatch = useDispatch() 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 149e26a1..411a5ca7 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 @@ -28,7 +28,7 @@ import TileGroup from './groups/TileGroup' function TileContainer({ tileId, ...props }) { const interactionLevel = useSelector((state) => state.interactionLevel) - const tile = useSelector((state) => state.objects.tile[tileId]) + const tile = useSelector((state) => state.topology.tiles[tileId]) const dispatch = useDispatch() const onClick = (tile) => { diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js index eaebabd5..cc0d46b3 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js @@ -22,11 +22,10 @@ import React from 'react' import { useSelector } from 'react-redux' -import { useActiveTopology } from '../../../data/topology' import TopologyGroup from './groups/TopologyGroup' function TopologyContainer() { - const topology = useActiveTopology() + const topology = useSelector((state) => state.topology.root) const interactionLevel = useSelector((state) => state.interactionLevel) return <TopologyGroup topology={topology} interactionLevel={interactionLevel} /> diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js index 77f553dd..143f70c2 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js @@ -26,7 +26,9 @@ import { useSelector } from 'react-redux' import WallGroup from './groups/WallGroup' function WallContainer({ roomId, ...props }) { - const tiles = useSelector((state) => state.objects.room[roomId].tiles.map((tileId) => state.objects.tile[tileId])) + const tiles = useSelector((state) => { + return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId]) + }) return <WallGroup {...props} tiles={tiles} /> } diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js index 47d9c992..1f00de36 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js @@ -34,8 +34,8 @@ function ObjectHoverLayer() { return false } - const currentRoom = state.objects.room[state.interactionLevel.roomId] - const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId]) + const currentRoom = state.topology.rooms[state.interactionLevel.roomId] + const tiles = currentRoom.tiles.map((tileId) => state.topology.tiles[tileId]) const tile = findTileWithPosition(tiles, x, y) return !(tile === null || tile.rack) 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 59f83b2b..5e351691 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 @@ -35,17 +35,17 @@ function RoomHoverLayer() { const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y)) const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') const isValid = useSelector((state) => (x, y) => { - const newRoom = { ...state.objects.room[state.construction.currentRoomInConstruction] } - const oldRooms = Object.keys(state.objects.room) - .map((id) => ({ ...state.objects.room[id] })) + const newRoom = { ...state.topology.rooms[state.construction.currentRoomInConstruction] } + const oldRooms = Object.keys(state.topology.rooms) + .map((id) => ({ ...state.topology.rooms[id] })) .filter( (room) => - state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 && + state.topology.root.rooms.indexOf(room._id) !== -1 && room._id !== state.construction.currentRoomInConstruction ) ;[...oldRooms, newRoom].forEach((room) => { - room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId]) + room.tiles = room.tiles.map((tileId) => state.topology.tiles[tileId]) }) if (newRoom.tiles.length === 0) { return findPositionInRooms(oldRooms, x, y) === -1 |