diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies')
11 files changed, 111 insertions, 87 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 49e5f095..7f7b4171 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js @@ -1,63 +1,67 @@ -import { Button } from '@patternfly/react-core' +import { Button, Bullseye } from '@patternfly/react-core' import PropTypes from 'prop-types' import React from 'react' import { useDispatch } from 'react-redux' import { useTopology } from '../../data/topology' -import { Table, TableBody, TableHeader } from '@patternfly/react-table' +import { Tr, Th, Thead, TableComposable, Td, ActionsColumn, Tbody } from '@patternfly/react-table' import { deleteRoom } from '../../redux/actions/topology/room' import TableEmptyState from '../util/TableEmptyState' function RoomTable({ projectId, topologyId, onSelect }) { const dispatch = useDispatch() const { status, data: topology } = useTopology(projectId, topologyId) - const onDelete = (room) => dispatch(deleteRoom(room.id)) - - const columns = ['Name', 'Tiles', 'Racks'] - const rows = - topology?.rooms.length > 0 - ? topology.rooms.map((room) => { - const tileCount = room.tiles.length - const rackCount = room.tiles.filter((tile) => tile.rack).length - return [ - { - title: ( - <Button variant="link" isInline onClick={() => onSelect(room)}> - {room.name} - </Button> - ), - }, - tileCount === 1 ? '1 tile' : `${tileCount} tiles`, - rackCount === 1 ? '1 rack' : `${rackCount} racks`, - ] - }) - : [ - { - heightAuto: true, - cells: [ - { - props: { colSpan: 3 }, - title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />, - }, - ], - }, - ] - - const actions = - topology?.rooms.length > 0 - ? [ - { - title: 'Delete room', - onClick: (_, rowId) => onDelete(topology.rooms[rowId]), - }, - ] - : [] + const actions = (room) => [ + { + title: 'Delete room', + onClick: () => onDelete(room), + }, + ] return ( - <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}> - <TableHeader /> - <TableBody /> - </Table> + <TableComposable aria-label="Room list" variant="compact"> + <Thead> + <Tr> + <Th>Name</Th> + <Th>Tiles</Th> + <Th>Racks</Th> + </Tr> + </Thead> + <Tbody> + {topology?.rooms.map((room) => { + const tileCount = room.tiles.length + const rackCount = room.tiles.filter((tile) => tile.rack).length + return ( + <Tr key={room.id}> + <Td dataLabel="Name"> + <Button variant="link" isInline onClick={() => onSelect(room)}> + {room.name} + </Button> + </Td> + <Td dataLabel="Tiles">{tileCount === 1 ? '1 tile' : `${tileCount} tiles`}</Td> + <Td dataLabel="Racks">{rackCount === 1 ? '1 rack' : `${rackCount} racks`}</Td> + <Td isActionCell> + <ActionsColumn items={actions(room)} /> + </Td> + </Tr> + ) + })} + {topology?.rooms.length === 0 && ( + <Tr> + <Td colSpan={4}> + <Bullseye> + <TableEmptyState + status={status} + loadingTitle="Loading Rooms" + emptyTitle="No rooms" + emptyText="There are currently no rooms in this topology. Open the Floor Plan to create a room" + /> + </Bullseye> + </Td> + </Tr> + )} + </Tbody> + </TableComposable> ) } diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js index 47235c7e..ff583750 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js @@ -55,9 +55,9 @@ function TopologyMap() { </EmptyState> </Bullseye> ) : ( - <Drawer isExpanded={isExpanded} className="full-height"> + <Drawer isExpanded={isExpanded}> <DrawerContent panelContent={panelContent}> - <DrawerContentBody> + <DrawerContentBody style={{ position: 'relative' }}> <MapStage hotkeysRef={hotkeysRef} /> <Collapse onClick={() => setExpanded(true)} /> </DrawerContentBody> 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 7b96f548..8bf529b2 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 @@ -15,7 +15,7 @@ import Toolbar from './controls/Toolbar' function MapStage({ hotkeysRef }) { const reduxContext = useContext(ReactReduxContext) const stageRef = useRef(null) - const { width = 100, height = 100 } = useResizeObserver({ ref: stageRef.current?.attrs?.container }) + const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container }) const [[x, y], setPos] = useState([0, 0]) const [scale, setScale] = useState(1) diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss index d879b4c8..47c3dde2 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss @@ -24,8 +24,6 @@ background-color: var(--pf-global--Color--light-200); position: relative; display: flex; - justify-content: center; - align-items: center; width: 100%; height: 100%; } 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 be1f3e45..a1ca7426 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 @@ -3,24 +3,26 @@ import PropTypes from 'prop-types' import { useSelector } from 'react-redux' import RackFillBar from './elements/RackFillBar' -function RackSpaceFillContainer({ tileId, ...props }) { +function RackSpaceFillContainer({ rackId, ...props }) { const fillFraction = useSelector((state) => { + const rack = state.topology.racks[rackId] + if (!rack) { + return 0 + } + + const { machines, cpus, gpus, memories, storages } = state.topology let energyConsumptionTotal = 0 - const rack = state.topology.racks[state.topology.tiles[tileId].rack] - const machineIds = rack.machines - machineIds.forEach((machineId) => { - if (machineId !== null) { - 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.topology.memories[id].energyConsumptionW) - ) - machine.storages.forEach( - (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW) - ) + + for (const machineId of rack.machines) { + if (!machineId) { + continue } - }) + const machine = machines[machineId] + machine.cpus.forEach((id) => (energyConsumptionTotal += cpus[id].energyConsumptionW)) + machine.gpus.forEach((id) => (energyConsumptionTotal += gpus[id].energyConsumptionW)) + machine.memories.forEach((id) => (energyConsumptionTotal += memories[id].energyConsumptionW)) + machine.storages.forEach((id) => (energyConsumptionTotal += storages[id].energyConsumptionW)) + } return Math.min(1, energyConsumptionTotal / rack.powerCapacityW) }) @@ -28,7 +30,7 @@ function RackSpaceFillContainer({ tileId, ...props }) { } RackSpaceFillContainer.propTypes = { - tileId: PropTypes.string.isRequired, + rackId: PropTypes.string.isRequired, } export default RackSpaceFillContainer 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 0c15d54b..2039a9d3 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 @@ -25,13 +25,18 @@ import PropTypes from 'prop-types' import { useSelector } from 'react-redux' import RackFillBar from './elements/RackFillBar' -function RackSpaceFillContainer({ tileId, ...props }) { - const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack]) +function RackSpaceFillContainer({ rackId, ...props }) { + const rack = useSelector((state) => state.topology.racks[rackId]) + + if (!rack) { + return null + } + return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} /> } RackSpaceFillContainer.propTypes = { - tileId: PropTypes.string.isRequired, + rackId: PropTypes.string.isRequired, } export default RackSpaceFillContainer 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 65189891..76785bea 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 @@ -27,15 +27,24 @@ import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level' import RoomGroup from './groups/RoomGroup' function RoomContainer({ roomId, ...props }) { - const state = useSelector((state) => { - return { - interactionLevel: state.interactionLevel, - currentRoomInConstruction: state.construction.currentRoomInConstruction, - room: state.topology.rooms[roomId], - } - }) + const interactionLevel = useSelector((state) => state.interactionLevel) + const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction) + const room = useSelector((state) => state.topology.rooms[roomId]) const dispatch = useDispatch() - return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} /> + + if (!room) { + return null + } + + return ( + <RoomGroup + {...props} + interactionLevel={interactionLevel} + currentRoomInConstruction={currentRoomInConstruction} + room={room} + onClick={() => dispatch(goFromBuildingToRoom(roomId))} + /> + ) } RoomContainer.propTypes = { 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 21be3c79..0788b894 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,9 +28,13 @@ import TileGroup from './groups/TileGroup' function TileContainer({ tileId, ...props }) { const interactionLevel = useSelector((state) => state.interactionLevel) + const dispatch = useDispatch() const tile = useSelector((state) => state.topology.tiles[tileId]) - const dispatch = useDispatch() + if (!tile) { + return null + } + const onClick = (tile) => { if (tile.rack) { dispatch(goFromRoomToRack(tile.id)) 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 143f70c2..106d8d3d 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 @@ -27,7 +27,7 @@ import WallGroup from './groups/WallGroup' function WallContainer({ roomId, ...props }) { const tiles = useSelector((state) => { - return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId]) + 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/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js index dad2d62d..ed942661 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 rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} /> + <RackEnergyFillContainer rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} /> </Group> </Group> ) diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss index 6f258aec..f4c8829f 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss @@ -1,12 +1,14 @@ .sidebarContainer { display: flex; - height: 100%; - max-height: 100%; flex-direction: column; + + height: 100%; } .machineListContainer { - flex: 1; - overflow-y: scroll; + overflow-y: auto; + + flex: 1 0 300px; + margin-top: 10px; } |