From 54d07120191eb81de91a49cdebf619cfecce2666 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 19 Jul 2021 14:45:25 +0200 Subject: refactor(ui): Encode state in topology actions This change updates the OpenDC frontend to reduce its reliance of global state during the execution of actions. Actions that modify the topology now require parameters to be passed via the action constructor instead of relying on the global interactionLevel state. --- .../app/sidebars/topology/TopologySidebar.js | 18 +++--- .../sidebars/topology/building/BuildingSidebar.js | 8 +++ .../topology/building/BuildingSidebarComponent.js | 8 --- .../building/NewRoomConstructionComponent.js | 2 +- .../building/NewRoomConstructionContainer.js | 2 +- .../app/sidebars/topology/machine/DeleteMachine.js | 8 ++- .../sidebars/topology/machine/MachineSidebar.js | 49 ++++++++++++++++ .../topology/machine/MachineSidebarComponent.js | 44 -------------- .../topology/machine/MachineSidebarContainer.js | 37 ------------ .../sidebars/topology/machine/UnitAddContainer.js | 5 +- .../sidebars/topology/machine/UnitListComponent.js | 4 +- .../sidebars/topology/machine/UnitListContainer.js | 15 ++--- .../sidebars/topology/machine/UnitTabsComponent.js | 23 +++++--- .../app/sidebars/topology/rack/AddPrefab.js | 44 ++++++++++++++ .../sidebars/topology/rack/AddPrefabComponent.js | 16 ------ .../sidebars/topology/rack/AddPrefabContainer.js | 33 ----------- .../sidebars/topology/rack/DeleteRackContainer.js | 9 ++- .../app/sidebars/topology/rack/MachineComponent.js | 2 +- .../sidebars/topology/rack/MachineListContainer.js | 2 +- .../sidebars/topology/rack/RackNameContainer.js | 4 +- .../app/sidebars/topology/rack/RackSidebar.js | 58 +++++++++++++++++++ .../sidebars/topology/rack/RackSidebar.module.scss | 12 ++++ .../sidebars/topology/rack/RackSidebarComponent.js | 58 ------------------- .../topology/rack/RackSidebarComponent.module.scss | 12 ---- .../sidebars/topology/rack/RackSidebarContainer.js | 32 ----------- .../sidebars/topology/room/DeleteRoomContainer.js | 9 ++- .../sidebars/topology/room/EditRoomContainer.js | 9 ++- .../topology/room/RackConstructionComponent.js | 2 +- .../topology/room/RackConstructionContainer.js | 2 +- .../app/sidebars/topology/room/RoomName.js | 4 +- .../app/sidebars/topology/room/RoomSidebar.js | 43 ++++++++++++++ .../sidebars/topology/room/RoomSidebarComponent.js | 43 -------------- .../sidebars/topology/room/RoomSidebarContainer.js | 32 ----------- .../projects/[project]/topologies/[topology].js | 2 - .../opendc-web-ui/src/redux/actions/prefabs.js | 3 +- .../src/redux/actions/topology/building.js | 11 ++-- .../src/redux/actions/topology/machine.js | 10 +++- .../src/redux/actions/topology/rack.js | 9 ++- .../src/redux/actions/topology/room.js | 6 +- .../opendc-web-ui/src/redux/sagas/prefabs.js | 7 +-- .../opendc-web-ui/src/redux/sagas/topology.js | 67 ++++++++-------------- opendc-web/opendc-web-ui/src/util/sidebar-space.js | 2 - opendc-web/opendc-web-ui/src/util/state-utils.js | 6 -- .../opendc-web-ui/src/util/tile-calculations.js | 4 +- 44 files changed, 337 insertions(+), 439 deletions(-) create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js delete mode 100644 opendc-web/opendc-web-ui/src/util/sidebar-space.js delete mode 100644 opendc-web/opendc-web-ui/src/util/state-utils.js (limited to 'opendc-web') diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js index c4a880b1..564f4030 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types' import React from 'react' import { InteractionLevel } from '../../../../shapes' -import BuildingSidebarComponent from './building/BuildingSidebarComponent' +import BuildingSidebar from './building/BuildingSidebar' import { Button, DrawerActions, @@ -16,9 +16,9 @@ import { AngleLeftIcon } from '@patternfly/react-icons' import { useDispatch } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../redux/actions/interaction-level' import { backButton } from './TopologySidebar.module.scss' -import RoomSidebarContainer from './room/RoomSidebarContainer' -import RackSidebarContainer from './rack/RackSidebarContainer' -import MachineSidebarContainer from './machine/MachineSidebarContainer' +import RoomSidebar from './room/RoomSidebar' +import RackSidebar from './rack/RackSidebar' +import MachineSidebar from './machine/MachineSidebar' const name = { BUILDING: 'Building', @@ -27,21 +27,21 @@ const name = { MACHINE: 'Machine', } -const TopologySidebar = ({ interactionLevel, onClose }) => { +function TopologySidebar({ interactionLevel, onClose }) { let sidebarContent switch (interactionLevel.mode) { case 'BUILDING': - sidebarContent = + sidebarContent = break case 'ROOM': - sidebarContent = + sidebarContent = break case 'RACK': - sidebarContent = + sidebarContent = break case 'MACHINE': - sidebarContent = + sidebarContent = break default: sidebarContent = 'Missing Content' diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js new file mode 100644 index 00000000..5fcd46be --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js @@ -0,0 +1,8 @@ +import React from 'react' +import NewRoomConstructionContainer from './NewRoomConstructionContainer' + +function BuildingSidebar() { + return +} + +export default BuildingSidebar diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js deleted file mode 100644 index 6c2556d3..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import NewRoomConstructionContainer from './NewRoomConstructionContainer' - -const BuildingSidebarComponent = () => { - return -} - -export default BuildingSidebarComponent diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js index 656b2515..9fc85d0c 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js @@ -4,7 +4,7 @@ import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@pat import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon' import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon' -const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => { +function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) { if (currentRoomInConstruction === '-1') { return ( + ) +} + +AddPrefab.propTypes = { + tileId: PropTypes.string.isRequired, +} + +export default AddPrefab diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js deleted file mode 100644 index c8543134..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js +++ /dev/null @@ -1,16 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { SaveIcon } from '@patternfly/react-icons' -import { Button } from '@patternfly/react-core' - -const AddPrefabComponent = ({ onClick }) => ( - -) - -AddPrefabComponent.propTypes = { - onClick: PropTypes.func, -} - -export default AddPrefabComponent diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js deleted file mode 100644 index d3d9aaf5..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import React from 'react' -import { useDispatch } from 'react-redux' -import { addPrefab } from '../../../../../redux/actions/prefabs' -import AddPrefabComponent from './AddPrefabComponent' - -const AddPrefabContainer = (props) => { - const dispatch = useDispatch() - return dispatch(addPrefab('name'))} /> -} - -export default AddPrefabContainer diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js index 47959f03..f0dc7b6b 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js @@ -20,6 +20,7 @@ * SOFTWARE. */ +import PropTypes from 'prop-types' import React, { useState } from 'react' import { useDispatch } from 'react-redux' import ConfirmationModal from '../../../../../components/modals/ConfirmationModal' @@ -27,12 +28,12 @@ import { deleteRack } from '../../../../../redux/actions/topology/rack' import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon' import { Button } from '@patternfly/react-core' -const DeleteRackContainer = () => { +function DeleteRackContainer({ tileId }) { const dispatch = useDispatch() const [isVisible, setVisible] = useState(false) const callback = (isConfirmed) => { if (isConfirmed) { - dispatch(deleteRack()) + dispatch(deleteRack(tileId)) } setVisible(false) } @@ -51,4 +52,8 @@ const DeleteRackContainer = () => { ) } +DeleteRackContainer.propTypes = { + tileId: PropTypes.string.isRequired, +} + export default DeleteRackContainer diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js index 1617b3bf..97141711 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js @@ -19,7 +19,7 @@ UnitIcon.propTypes = { type: PropTypes.string, } -const MachineComponent = ({ machine, onClick }) => { +function MachineComponent({ machine, onClick }) { const hasNoUnits = machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0 diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js index 54e6db0a..3ed0ffd0 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js @@ -43,7 +43,7 @@ function MachineListContainer({ tileId, ...props }) { dispatch(addMachine(index))} + onAdd={(index) => dispatch(addMachine(rack._id, index))} onSelect={(index) => dispatch(goFromRackToMachine(index))} /> ) diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js index 11529b55..11db6420 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js @@ -5,11 +5,11 @@ import NameComponent from '../NameComponent' import { editRackName } from '../../../../../redux/actions/topology/rack' const RackNameContainer = ({ tileId }) => { - const rackName = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack].name) + const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack]) const dispatch = useDispatch() const callback = (name) => { if (name) { - dispatch(editRackName(name)) + dispatch(editRackName(_id, name)) } } return diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js new file mode 100644 index 00000000..3c9f152a --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js @@ -0,0 +1,58 @@ +import PropTypes from 'prop-types' +import React from 'react' +import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss' +import RackNameContainer from './RackNameContainer' +import AddPrefab from './AddPrefab' +import DeleteRackContainer from './DeleteRackContainer' +import MachineListContainer from './MachineListContainer' +import { + Skeleton, + TextContent, + TextList, + TextListItem, + TextListItemVariants, + TextListVariants, + Title, +} from '@patternfly/react-core' +import { useSelector } from 'react-redux' + +function RackSidebar({ tileId }) { + const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack]) + + return ( +
+ + Details + + + Name + + + + + Capacity + + {rack?.capacity ?? } + + + Actions + + + + Slots + +
+ +
+
+ ) +} + +RackSidebar.propTypes = { + tileId: PropTypes.string.isRequired, +} + +export default RackSidebar diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss new file mode 100644 index 00000000..6f258aec --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss @@ -0,0 +1,12 @@ +.sidebarContainer { + display: flex; + height: 100%; + max-height: 100%; + flex-direction: column; +} + +.machineListContainer { + flex: 1; + overflow-y: scroll; + margin-top: 10px; +} diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js deleted file mode 100644 index dd5117f7..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js +++ /dev/null @@ -1,58 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { machineListContainer, sidebarContainer } from './RackSidebarComponent.module.scss' -import RackNameContainer from './RackNameContainer' -import AddPrefabContainer from './AddPrefabContainer' -import DeleteRackContainer from './DeleteRackContainer' -import MachineListContainer from './MachineListContainer' -import { - Skeleton, - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, - Title, -} from '@patternfly/react-core' -import { useSelector } from 'react-redux' - -function RackSidebarComponent({ tileId }) { - const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack]) - - return ( -
- - Details - - - Name - - - - - Capacity - - {rack?.capacity ?? } - - - Actions - - - - Slots - -
- -
-
- ) -} - -RackSidebarComponent.propTypes = { - tileId: PropTypes.string.isRequired, -} - -export default RackSidebarComponent diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss deleted file mode 100644 index 6f258aec..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.sidebarContainer { - display: flex; - height: 100%; - max-height: 100%; - flex-direction: column; -} - -.machineListContainer { - flex: 1; - overflow-y: scroll; - margin-top: 10px; -} diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js deleted file mode 100644 index 2b31413d..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import React from 'react' -import { useSelector } from 'react-redux' -import RackSidebarComponent from './RackSidebarComponent' - -const RackSidebarContainer = (props) => { - const tileId = useSelector((state) => state.interactionLevel.tileId) - return -} - -export default RackSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js index 284c4d53..19a782a6 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js @@ -20,6 +20,7 @@ * SOFTWARE. */ +import PropTypes from 'prop-types' import React, { useState } from 'react' import { useDispatch } from 'react-redux' import ConfirmationModal from '../../../../../components/modals/ConfirmationModal' @@ -27,12 +28,12 @@ import { deleteRoom } from '../../../../../redux/actions/topology/room' import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon' import { Button } from '@patternfly/react-core' -const DeleteRoomContainer = () => { +function DeleteRoomContainer({ roomId }) { const dispatch = useDispatch() const [isVisible, setVisible] = useState(false) const callback = (isConfirmed) => { if (isConfirmed) { - dispatch(deleteRoom()) + dispatch(deleteRoom(roomId)) } setVisible(false) } @@ -51,4 +52,8 @@ const DeleteRoomContainer = () => { ) } +DeleteRoomContainer.propTypes = { + roomId: PropTypes.string.isRequired, +} + export default DeleteRoomContainer diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js index 6db2bfb6..96c077cb 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js @@ -20,6 +20,7 @@ * SOFTWARE. */ +import PropTypes from 'prop-types' import React from 'react' import { useDispatch, useSelector } from 'react-redux' import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building' @@ -27,12 +28,12 @@ import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon' import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon' import { Button } from '@patternfly/react-core' -const EditRoomContainer = () => { +function EditRoomContainer({ roomId }) { const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode) const dispatch = useDispatch() - const onEdit = () => dispatch(startRoomEdit()) + const onEdit = () => dispatch(startRoomEdit(roomId)) const onFinish = () => dispatch(finishRoomEdit()) return isEditing ? ( @@ -53,4 +54,8 @@ const EditRoomContainer = () => { ) } +EditRoomContainer.propTypes = { + roomId: PropTypes.string.isRequired, +} + export default EditRoomContainer diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js index 8aebe969..13432689 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js @@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon' const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => { if (inRackConstructionMode) { return ( - ) diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js index 38af447a..b9ab6610 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js @@ -25,7 +25,7 @@ import { useDispatch, useSelector } from 'react-redux' import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room' import RackConstructionComponent from './RackConstructionComponent' -const RackConstructionContainer = (props) => { +function RackConstructionContainer(props) { const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode) const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js index d7b006a6..11909189 100644 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js @@ -27,11 +27,11 @@ import NameComponent from '../../../../../components/app/sidebars/topology/NameC import { editRoomName } from '../../../../../redux/actions/topology/room' function RoomName({ roomId }) { - const roomName = useSelector((state) => state.objects.room[roomId].name) + const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId]) const dispatch = useDispatch() const callback = (name) => { if (name) { - dispatch(editRoomName(name)) + dispatch(editRoomName(_id, name)) } } return diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js new file mode 100644 index 00000000..6ad489e0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js @@ -0,0 +1,43 @@ +import PropTypes from 'prop-types' +import React from 'react' +import RoomName from './RoomName' +import RackConstructionContainer from './RackConstructionContainer' +import EditRoomContainer from './EditRoomContainer' +import DeleteRoomContainer from './DeleteRoomContainer' +import { + TextContent, + TextList, + TextListItem, + TextListItemVariants, + TextListVariants, + Title, +} from '@patternfly/react-core' + +const RoomSidebar = ({ roomId }) => { + return ( + + Details + + + Name + + + + + + Construction + + + + + ) +} + +RoomSidebar.propTypes = { + roomId: PropTypes.string.isRequired, +} + +export default RoomSidebar diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js deleted file mode 100644 index fac58c51..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js +++ /dev/null @@ -1,43 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import RoomName from './RoomName' -import RackConstructionContainer from './RackConstructionContainer' -import EditRoomContainer from './EditRoomContainer' -import DeleteRoomContainer from './DeleteRoomContainer' -import { - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, - Title, -} from '@patternfly/react-core' - -const RoomSidebarComponent = ({ roomId }) => { - return ( - - Details - - - Name - - - - - - Construction - - - - - ) -} - -RoomSidebarComponent.propTypes = { - roomId: PropTypes.string.isRequired, -} - -export default RoomSidebarComponent diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js deleted file mode 100644 index 2076b00e..00000000 --- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import React from 'react' -import { useSelector } from 'react-redux' -import RoomSidebarComponent from './RoomSidebarComponent' - -const RoomSidebarContainer = (props) => { - const roomId = useSelector((state) => state.interactionLevel.roomId) - return -} - -export default RoomSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index d79e8e7a..139c2979 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -40,8 +40,6 @@ import { Spinner, Title, } from '@patternfly/react-core' -import Toolbar from '../../../../components/app/map/controls/Toolbar' -import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator' import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar' import Collapse from '../../../../components/app/map/controls/Collapse' diff --git a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js index c112feed..0ef7795f 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/prefabs.js @@ -3,10 +3,11 @@ export const DELETE_PREFAB = 'DELETE_PREFAB' export const DELETE_PREFAB_SUCCEEDED = 'DELETE_PREFAB_SUCCEEDED' export const OPEN_PREFAB_SUCCEEDED = 'OPEN_PREFAB_SUCCEEDED' -export function addPrefab(name) { +export function addPrefab(name, tileId) { return { type: ADD_PREFAB, name, + tileId, } } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js index f1a7d569..49425318 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/building.js @@ -55,13 +55,10 @@ export function cancelNewRoomConstructionSucceeded() { } } -export function startRoomEdit() { - return (dispatch, getState) => { - const { interactionLevel } = getState() - dispatch({ - type: START_ROOM_EDIT, - roomId: interactionLevel.roomId, - }) +export function startRoomEdit(roomId) { + return { + type: START_ROOM_EDIT, + roomId: roomId, } } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js index 17ccce5d..170b7648 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/machine.js @@ -2,23 +2,27 @@ export const DELETE_MACHINE = 'DELETE_MACHINE' export const ADD_UNIT = 'ADD_UNIT' export const DELETE_UNIT = 'DELETE_UNIT' -export function deleteMachine() { +export function deleteMachine(rackId, position) { return { type: DELETE_MACHINE, + rackId, + position, } } -export function addUnit(unitType, id) { +export function addUnit(machineId, unitType, id) { return { type: ADD_UNIT, + machineId, unitType, id, } } -export function deleteUnit(unitType, index) { +export function deleteUnit(machineId, unitType, index) { return { type: DELETE_UNIT, + machineId, unitType, index, } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js index b117402e..228e3ae9 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/rack.js @@ -2,22 +2,25 @@ export const EDIT_RACK_NAME = 'EDIT_RACK_NAME' export const DELETE_RACK = 'DELETE_RACK' export const ADD_MACHINE = 'ADD_MACHINE' -export function editRackName(name) { +export function editRackName(rackId, name) { return { type: EDIT_RACK_NAME, name, + rackId, } } -export function deleteRack() { +export function deleteRack(tileId) { return { type: DELETE_RACK, + tileId, } } -export function addMachine(position) { +export function addMachine(rackId, position) { return { type: ADD_MACHINE, position, + rackId, } } diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js index 80ef7c5e..e584af89 100644 --- a/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js +++ b/opendc-web/opendc-web-ui/src/redux/actions/topology/room.js @@ -6,10 +6,11 @@ export const START_RACK_CONSTRUCTION = 'START_RACK_CONSTRUCTION' export const STOP_RACK_CONSTRUCTION = 'STOP_RACK_CONSTRUCTION' export const ADD_RACK_TO_TILE = 'ADD_RACK_TO_TILE' -export function editRoomName(name) { +export function editRoomName(roomId, name) { return { type: EDIT_ROOM_NAME, name, + roomId, } } @@ -41,8 +42,9 @@ export function addRackToTile(positionX, positionY) { } } -export function deleteRoom() { +export function deleteRoom(roomId) { return { type: DELETE_ROOM, + roomId, } } diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js index 91b03bf6..f717d878 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/prefabs.js @@ -4,14 +4,13 @@ import { addPrefab } from '../../api/prefabs' import { Rack } from '../../util/topology-schema' import { denormalize } from 'normalizr' -export function* onAddPrefab(action) { +export function* onAddPrefab({ name, tileId }) { try { - const interactionLevel = yield select((state) => state.interactionLevel) const objects = yield select((state) => state.objects) - const rack = objects.rack[objects.tile[interactionLevel.tileId].rack] + const rack = objects.rack[objects.tile[tileId].rack] const prefabRack = denormalize(rack, Rack, objects) const auth = yield getContext('auth') - const prefab = yield call(() => addPrefab(auth, { name: action.name, rack: prefabRack })) + const prefab = yield call(() => addPrefab(auth, { name, rack: prefabRack })) yield put(addToStore('prefab', prefab)) } catch (error) { console.error(error) diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js index 333c1485..f3742b78 100644 --- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js +++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js @@ -37,10 +37,8 @@ export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = fa } } -export function* onAddTopology(action) { +export function* onAddTopology({ projectId, duplicateId, name }) { try { - const { projectId, duplicateId, name } = action - let topologyToBeCreated if (duplicateId) { topologyToBeCreated = yield denormalizeTopology(duplicateId) @@ -119,21 +117,19 @@ export function* onDeleteTile(action) { } } -export function* onEditRoomName(action) { +export function* onEditRoomName({ roomId, name }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const roomId = yield select((state) => state.interactionLevel.roomId) - yield put(addPropToStoreObject('room', roomId, { name: action.name })) + yield put(addPropToStoreObject('room', roomId, { name })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) } } -export function* onDeleteRoom() { +export function* onDeleteRoom({ roomId }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const roomId = yield select((state) => state.interactionLevel.roomId) yield put(goDownOneInteractionLevel()) yield put(removeIdFromStoreObjectListProp('topology', topologyId, 'rooms', roomId)) yield updateTopologyOnServer(topologyId) @@ -142,21 +138,19 @@ export function* onDeleteRoom() { } } -export function* onEditRackName(action) { +export function* onEditRackName({ rackId, name }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack) - yield put(addPropToStoreObject('rack', rackId, { name: action.name })) + yield put(addPropToStoreObject('rack', rackId, { name })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) } } -export function* onDeleteRack() { +export function* onDeleteRack({ tileId }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const tileId = yield select((state) => state.interactionLevel.tileId) yield put(goDownOneInteractionLevel()) yield put(addPropToStoreObject('tile', tileId, { rack: undefined })) yield updateTopologyOnServer(topologyId) @@ -165,35 +159,34 @@ export function* onDeleteRack() { } } -export function* onAddRackToTile(action) { +export function* onAddRackToTile({ tileId }) { try { const topologyId = yield select((state) => state.currentTopologyId) const rack = { _id: uuid(), name: 'Rack', - tileId: action.tileId, + tileId, capacity: DEFAULT_RACK_SLOT_CAPACITY, powerCapacityW: DEFAULT_RACK_POWER_CAPACITY, machines: [], } yield put(addToStore('rack', rack)) - yield put(addPropToStoreObject('tile', action.tileId, { rack: rack._id })) + yield put(addPropToStoreObject('tile', tileId, { rack: rack._id })) yield updateTopologyOnServer(topologyId) } catch (error) { console.error(error) } } -export function* onAddMachine(action) { +export function* onAddMachine({ rackId, position }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const rackId = yield select((state) => state.objects.tile[state.interactionLevel.tileId].rack) const rack = yield select((state) => state.objects.rack[rackId]) const machine = { _id: uuid(), rackId, - position: action.position, + position, cpus: [], gpus: [], memories: [], @@ -209,15 +202,13 @@ export function* onAddMachine(action) { } } -export function* onDeleteMachine() { +export function* onDeleteMachine({ rackId, position }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const tileId = yield select((state) => state.interactionLevel.tileId) - const position = yield select((state) => state.interactionLevel.position) - const rack = yield select((state) => state.objects.rack[state.objects.tile[tileId].rack]) + const rack = yield select((state) => state.objects.rack[rackId]) yield put(goDownOneInteractionLevel()) yield put( - addPropToStoreObject('rack', rack._id, { machines: rack.machines.filter((_, idx) => idx !== position - 1) }) + addPropToStoreObject('rack', rackId, { machines: rack.machines.filter((_, idx) => idx !== position - 1) }) ) yield updateTopologyOnServer(topologyId) } catch (error) { @@ -232,23 +223,19 @@ const unitMapping = { storage: 'storages', } -export function* onAddUnit(action) { +export function* onAddUnit({ machineId, unitType, id }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const tileId = yield select((state) => state.interactionLevel.tileId) - const position = yield select((state) => state.interactionLevel.position) - const machine = yield select( - (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]] - ) + const machine = yield select((state) => state.objects.machine[machineId]) - if (machine[unitMapping[action.unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) { + if (machine[unitMapping[unitType]].length >= MAX_NUM_UNITS_PER_MACHINE) { return } - const units = [...machine[unitMapping[action.unitType]], action.id] + const units = [...machine[unitMapping[unitType]], id] yield put( addPropToStoreObject('machine', machine._id, { - [unitMapping[action.unitType]]: units, + [unitMapping[unitType]]: units, }) ) yield updateTopologyOnServer(topologyId) @@ -257,20 +244,16 @@ export function* onAddUnit(action) { } } -export function* onDeleteUnit(action) { +export function* onDeleteUnit({ machineId, unitType, index }) { try { const topologyId = yield select((state) => state.currentTopologyId) - const tileId = yield select((state) => state.interactionLevel.tileId) - const position = yield select((state) => state.interactionLevel.position) - const machine = yield select( - (state) => state.objects.machine[state.objects.rack[state.objects.tile[tileId].rack].machines[position - 1]] - ) - const unitIds = machine[unitMapping[action.unitType]].slice() - unitIds.splice(action.index, 1) + const machine = yield select((state) => state.objects.machine[machineId]) + const unitIds = machine[unitMapping[unitType]].slice() + unitIds.splice(index, 1) yield put( addPropToStoreObject('machine', machine._id, { - [unitMapping[action.unitType]]: unitIds, + [unitMapping[unitType]]: unitIds, }) ) yield updateTopologyOnServer(topologyId) diff --git a/opendc-web/opendc-web-ui/src/util/sidebar-space.js b/opendc-web/opendc-web-ui/src/util/sidebar-space.js deleted file mode 100644 index 005c40f3..00000000 --- a/opendc-web/opendc-web-ui/src/util/sidebar-space.js +++ /dev/null @@ -1,2 +0,0 @@ -export const isCollapsible = (router) => - router.asPath.indexOf('portfolios') === -1 && router.asPath.indexOf('scenarios') === -1 diff --git a/opendc-web/opendc-web-ui/src/util/state-utils.js b/opendc-web/opendc-web-ui/src/util/state-utils.js deleted file mode 100644 index e5b695c3..00000000 --- a/opendc-web/opendc-web-ui/src/util/state-utils.js +++ /dev/null @@ -1,6 +0,0 @@ -export const getState = (dispatch) => - new Promise((resolve) => { - dispatch((dispatch, getState) => { - resolve(getState()) - }) - }) diff --git a/opendc-web/opendc-web-ui/src/util/tile-calculations.js b/opendc-web/opendc-web-ui/src/util/tile-calculations.js index 764ae6ac..374ca48c 100644 --- a/opendc-web/opendc-web-ui/src/util/tile-calculations.js +++ b/opendc-web/opendc-web-ui/src/util/tile-calculations.js @@ -18,8 +18,8 @@ function getWallSegments(tiles) { } let doInsert = true - for (let tileIndex in tiles) { - if (tiles[tileIndex].positionX === x + dX && tiles[tileIndex].positionY === y + dY) { + for (const tile of tiles) { + if (tile.positionX === x + dX && tile.positionY === y + dY) { doInsert = false break } -- cgit v1.2.3