merge: Address technical dept in topology view (#162)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend.

* Add support for panning of the datacenter topology
* Isolate world coordinate space (world objects do not depend on camera scale or position)
* Split transpiled modules into a separate chunk to reduce deduplication
* Encode state in topology actions to reduce global state
* Restructure components per page
* Enable more ESLint rules through `eslint:recommended` ruleset
* Move page components in separate files.

31 files changed, 0 insertions, 1420 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
deleted file mode 100644
index ececd07b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import { Button, TextInput } from '@patternfly/react-core'
-import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
-
-function NameComponent({ name, onEdit }) {
-    const [isEditing, setEditing] = useState(false)
-    const nameInput = useRef(null)
-
-    const onCancel = () => {
-        nameInput.current.value = name
-        setEditing(false)
-    }
-
-    const onSubmit = (event) => {
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-        if (name) {
-            onEdit(name)
-        }
-
-        setEditing(false)
-    }
-
-    return (
-        <form
-            className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
-            onSubmit={onSubmit}
-        >
-            <div className="pf-c-inline-edit__group">
-                <div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
-                    {name}
-                </div>
-                <div className="pf-c-inline-edit__action pf-m-enable-editable">
-                    <Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
-                        <PencilAltIcon />
-                    </Button>
-                </div>
-            </div>
-            <div className="pf-c-inline-edit__group">
-                <div className="pf-c-inline-edit__input">
-                    <TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
-                </div>
-                <div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
-                    <div className="pf-c-inline-edit__action pf-m-valid">
-                        <Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
-                            <CheckIcon />
-                        </Button>
-                    </div>
-                    <div className="pf-c-inline-edit__action">
-                        <Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
-                            <TimesIcon />
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </form>
-    )
-}
-
-NameComponent.propTypes = {
-    name: PropTypes.string,
-    onEdit: PropTypes.func,
-}
-
-export default NameComponent
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
deleted file mode 100644
index c4a880b1..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { InteractionLevel } from '../../../../shapes'
-import BuildingSidebarComponent from './building/BuildingSidebarComponent'
-import {
-    Button,
-    DrawerActions,
-    DrawerCloseButton,
-    DrawerHead,
-    DrawerPanelBody,
-    DrawerPanelContent,
-    Flex,
-    Title,
-} from '@patternfly/react-core'
-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'
-
-const name = {
-    BUILDING: 'Building',
-    ROOM: 'Room',
-    RACK: 'Rack',
-    MACHINE: 'Machine',
-}
-
-const TopologySidebar = ({ interactionLevel, onClose }) => {
-    let sidebarContent
-
-    switch (interactionLevel.mode) {
-        case 'BUILDING':
-            sidebarContent = <BuildingSidebarComponent />
-            break
-        case 'ROOM':
-            sidebarContent = <RoomSidebarContainer />
-            break
-        case 'RACK':
-            sidebarContent = <RackSidebarContainer />
-            break
-        case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer />
-            break
-        default:
-            sidebarContent = 'Missing Content'
-    }
-
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-
-    return (
-        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
-            <DrawerHead>
-                <Flex>
-                    <Button
-                        variant="tertiary"
-                        isSmall
-                        className={backButton}
-                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
-                    >
-                        <AngleLeftIcon />
-                    </Button>
-                    <Title className="pf-u-align-self-center" headingLevel="h1">
-                        {name[interactionLevel.mode]}
-                    </Title>
-                </Flex>
-                <DrawerActions>
-                    <DrawerCloseButton onClose={onClose} />
-                </DrawerActions>
-            </DrawerHead>
-            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
-        </DrawerPanelContent>
-    )
-}
-
-TopologySidebar.propTypes = {
-    interactionLevel: InteractionLevel,
-    onClose: PropTypes.func,
-}
-
-export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
deleted file mode 100644
index 45dc98da..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
+++ /dev/null
@@ -1,37 +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.
- */
-
-.backButton {
-    &:global(.pf-c-button) {
-        align-self: center;
-        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
-        color: var(--pf-global--Color--400);
-
-        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
-        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
-
-        &:hover,
-        &:focus {
-            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
-        }
-    }
-}
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 <NewRoomConstructionContainer />
-}
-
-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
deleted file mode 100644
index 656b2515..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
-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 }) => {
-    if (currentRoomInConstruction === '-1') {
-        return (
-            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
-                Construct a new room
-            </Button>
-        )
-    }
-    return (
-        <Toolbar
-            inset={{
-                default: 'insetNone',
-            }}
-        >
-            <ToolbarContent>
-                <ToolbarGroup>
-                    <ToolbarItem>
-                        <Button icon={<CheckIcon />} onClick={onFinish}>
-                            Finalize new room
-                        </Button>
-                    </ToolbarItem>
-                    <ToolbarItem widths={{ default: '100%' }}>
-                        <Button isBlock variant="secondary" onClick={onCancel}>
-                            Cancel
-                        </Button>
-                    </ToolbarItem>
-                </ToolbarGroup>
-            </ToolbarContent>
-        </Toolbar>
-    )
-}
-
-NewRoomConstructionComponent.propTypes = {
-    onStart: PropTypes.func,
-    onFinish: PropTypes.func,
-    onCancel: PropTypes.func,
-    currentRoomInConstruction: PropTypes.string,
-}
-
-export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
deleted file mode 100644
index 0836263c..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ /dev/null
@@ -1,46 +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, useSelector } from 'react-redux'
-import {
-    cancelNewRoomConstruction,
-    finishNewRoomConstruction,
-    startNewRoomConstruction,
-} from '../../../../../redux/actions/topology/building'
-import NewRoomConstructionComponent from './NewRoomConstructionComponent'
-
-const NewRoomConstructionButton = (props) => {
-    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
-
-    const dispatch = useDispatch()
-    const actions = {
-        onStart: () => dispatch(startNewRoomConstruction()),
-        onFinish: () => dispatch(finishNewRoomConstruction()),
-        onCancel: () => dispatch(cancelNewRoomConstruction()),
-    }
-    return (
-        <NewRoomConstructionComponent {...props} {...actions} currentRoomInConstruction={currentRoomInConstruction} />
-    )
-}
-
-export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
deleted file mode 100644
index a7bf3719..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ /dev/null
@@ -1,54 +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, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { deleteMachine } from '../../../../../redux/actions/topology/machine'
-import { Button } from '@patternfly/react-core'
-import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
-import ConfirmationModal from '../../../../modals/ConfirmationModal'
-
-const DeleteMachine = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this machine
-            </Button>
-            <ConfirmationModal
-                title="Delete this machine"
-                message="Are you sure you want to delete this machine?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
deleted file mode 100644
index d3d4a8cf..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import UnitTabsComponent from './UnitTabsComponent'
-import DeleteMachine from './DeleteMachine'
-import {
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-import { useSelector } from 'react-redux'
-
-const MachineSidebarComponent = ({ machineId }) => {
-    const machine = useSelector((state) => state.objects.machine[machineId])
-    return (
-        <div>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        Machine at position {machine.position}
-                    </TextListItem>
-                </TextList>
-
-                <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
-
-                <Title headingLevel="h2">Units</Title>
-            </TextContent>
-            <div className="pf-u-h-100">
-                <UnitTabsComponent />
-            </div>
-        </div>
-    )
-}
-
-MachineSidebarComponent.propTypes = {
-    machineId: PropTypes.string,
-}
-
-export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index 94d9f2c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,37 +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 MachineSidebarComponent from './MachineSidebarComponent'
-
-const MachineSidebarContainer = (props) => {
-    const machineId = useSelector(
-        (state) =>
-            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                state.interactionLevel.position - 1
-            ]
-    )
-    return <MachineSidebarComponent {...props} machineId={machineId} />
-}
-
-export default MachineSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
deleted file mode 100644
index 88591208..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
-import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
-
-function UnitAddComponent({ units, onAdd }) {
-    const [isOpen, setOpen] = useState(false)
-    const [selected, setSelected] = useState(null)
-
-    return (
-        <InputGroup>
-            <Select
-                variant={SelectVariant.single}
-                placeholderText="Select a unit"
-                aria-label="Select Unit"
-                onToggle={() => setOpen(!isOpen)}
-                isOpen={isOpen}
-                onSelect={(_, selection) => {
-                    setSelected(selection)
-                    setOpen(false)
-                }}
-                selections={selected}
-            >
-                {units.map((unit) => (
-                    <SelectOption value={unit._id} key={unit._id}>
-                        {unit.name}
-                    </SelectOption>
-                ))}
-            </Select>
-            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
-                Add
-            </Button>
-        </InputGroup>
-    )
-}
-
-UnitAddComponent.propTypes = {
-    units: PropTypes.array.isRequired,
-    onAdd: PropTypes.func.isRequired,
-}
-
-export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
deleted file mode 100644
index 8a6680e6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ /dev/null
@@ -1,42 +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 PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addUnit } from '../../../../../redux/actions/topology/machine'
-import UnitAddComponent from './UnitAddComponent'
-
-const UnitAddContainer = ({ unitType }) => {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
-    const dispatch = useDispatch()
-
-    const onAdd = (id) => dispatch(addUnit(unitType, id))
-
-    return <UnitAddComponent onAdd={onAdd} units={units} />
-}
-
-UnitAddContainer.propTypes = {
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
deleted file mode 100644
index 9c3c08fd..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
-import {
-    Button,
-    DataList,
-    DataListAction,
-    DataListCell,
-    DataListItem,
-    DataListItemCells,
-    DataListItemRow,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
-    EmptyState,
-    EmptyStateBody,
-    EmptyStateIcon,
-    Popover,
-    Title,
-} from '@patternfly/react-core'
-import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
-
-const UnitInfo = ({ unit, unitType }) => {
-    if (unitType === 'cpu' || unitType === 'gpu') {
-        return (
-            <DescriptionList>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
-                </DescriptionListGroup>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
-                </DescriptionListGroup>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
-                </DescriptionListGroup>
-            </DescriptionList>
-        )
-    }
-
-    return (
-        <DescriptionList>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Speed</DescriptionListTerm>
-                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Capacity</DescriptionListTerm>
-                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
-                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
-            </DescriptionListGroup>
-        </DescriptionList>
-    )
-}
-
-UnitInfo.propTypes = {
-    unitType: PropTypes.string.isRequired,
-    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
-}
-
-const UnitListComponent = ({ unitType, units, onDelete }) => {
-    if (units.length === 0) {
-        return (
-            <EmptyState>
-                <EmptyStateIcon icon={CubesIcon} />
-                <Title headingLevel="h5" size="lg">
-                    No units found
-                </Title>
-                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
-            </EmptyState>
-        )
-    }
-
-    return (
-        <DataList aria-label="Machine Units" isCompact>
-            {units.map((unit, index) => (
-                <DataListItem key={index}>
-                    <DataListItemRow>
-                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
-                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
-                            <Popover
-                                headerContent="Unit Information"
-                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
-                            >
-                                <Button isSmall variant="plain" className="pf-u-p-0">
-                                    <InfoIcon />
-                                </Button>
-                            </Popover>
-                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
-                                <TrashIcon />
-                            </Button>
-                        </DataListAction>
-                    </DataListItemRow>
-                </DataListItem>
-            ))}
-        </DataList>
-    )
-}
-
-UnitListComponent.propTypes = {
-    unitType: PropTypes.string.isRequired,
-    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
-    onDelete: PropTypes.func,
-}
-
-export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
deleted file mode 100644
index 2d994f97..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ /dev/null
@@ -1,56 +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 PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import UnitListComponent from './UnitListComponent'
-import { deleteUnit } from '../../../../../redux/actions/topology/machine'
-
-const unitMapping = {
-    cpu: 'cpus',
-    gpu: 'gpus',
-    memory: 'memories',
-    storage: 'storages',
-}
-
-const UnitListContainer = ({ unitType, ...props }) => {
-    const dispatch = useDispatch()
-    const units = useSelector((state) => {
-        const machine =
-            state.objects.machine[
-                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                    state.interactionLevel.position - 1
-                ]
-            ]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
-    })
-    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
-
-    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
-}
-
-UnitListContainer.propTypes = {
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
deleted file mode 100644
index 723ed2e2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useState } from 'react'
-import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
-import UnitAddContainer from './UnitAddContainer'
-import UnitListContainer from './UnitListContainer'
-
-const UnitTabsComponent = () => {
-    const [activeTab, setActiveTab] = useState('cpu-units')
-
-    return (
-        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
-            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer unitType="cpu" />
-                <UnitListContainer unitType="cpu" />
-            </Tab>
-            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer unitType="gpu" />
-                <UnitListContainer unitType="gpu" />
-            </Tab>
-            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer unitType="memory" />
-                <UnitListContainer unitType="memory" />
-            </Tab>
-            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer unitType="storage" />
-                <UnitListContainer unitType="storage" />
-            </Tab>
-        </Tabs>
-    )
-}
-
-export default UnitTabsComponent
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 }) => (
-    <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
-        Save this rack to a prefab
-    </Button>
-)
-
-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 <AddPrefabComponent {...props} onClick={() => 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
deleted file mode 100644
index 47959f03..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
+++ /dev/null
@@ -1,54 +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, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-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 = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this rack
-            </Button>
-            <ConfirmationModal
-                title="Delete this rack"
-                message="Are you sure you want to delete this rack?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-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
deleted file mode 100644
index 1617b3bf..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Machine } from '../../../../../shapes'
-import { Flex, Label } from '@patternfly/react-core'
-
-const UnitIcon = ({ id, type }) => (
-    <Image
-        src={'/img/topology/' + id + '-icon.png'}
-        alt={'Machine contains ' + type + ' units'}
-        layout="intrinsic"
-        height={24}
-        width={24}
-    />
-)
-
-UnitIcon.propTypes = {
-    id: PropTypes.string,
-    type: PropTypes.string,
-}
-
-const MachineComponent = ({ machine, onClick }) => {
-    const hasNoUnits =
-        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
-
-    return (
-        <Flex onClick={() => onClick()}>
-            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-            {hasNoUnits ? (
-                <Label variant="outline" color="orange">
-                    Machine with no units
-                </Label>
-            ) : undefined}
-        </Flex>
-    )
-}
-
-MachineComponent.propTypes = {
-    machine: Machine.isRequired,
-    onClick: PropTypes.func,
-}
-
-export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
deleted file mode 100644
index 27834cf4..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import MachineComponent from './MachineComponent'
-import { Machine } from '../../../../../shapes'
-import {
-    Badge,
-    Button,
-    DataList,
-    DataListAction,
-    DataListCell,
-    DataListItem,
-    DataListItemCells,
-    DataListItemRow,
-} from '@patternfly/react-core'
-import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
-
-function MachineListComponent({ machines = [], onSelect, onAdd }) {
-    return (
-        <DataList aria-label="Rack Units">
-            {machines.map((machine, index) =>
-                machine ? (
-                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="primary content">
-                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
-                                <Button isSmall variant="plain" className="pf-u-p-0">
-                                    <AngleRightIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
-                ) : (
-                    <DataListItem key={index}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="add" className="text-secondary">
-                                        Empty Slot
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
-                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
-                                    <PlusIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
-                )
-            )}
-        </DataList>
-    )
-}
-
-MachineListComponent.propTypes = {
-    machines: PropTypes.arrayOf(Machine),
-    onSelect: PropTypes.func.isRequired,
-    onAdd: PropTypes.func.isRequired,
-}
-
-export default MachineListComponent
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
deleted file mode 100644
index 54e6db0a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
+++ /dev/null
@@ -1,56 +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 PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import MachineListComponent from './MachineListComponent'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-
-function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
-    const machinesNull = useMemo(() => {
-        const res = Array(rack.capacity).fill(null)
-        for (const machine of machines) {
-            res[machine.position - 1] = machine
-        }
-        return res
-    }, [rack, machines])
-    const dispatch = useDispatch()
-
-    return (
-        <MachineListComponent
-            {...props}
-            machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(index))}
-            onSelect={(index) => dispatch(goFromRackToMachine(index))}
-        />
-    )
-}
-
-MachineListContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default MachineListContainer
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
deleted file mode 100644
index 11529b55..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-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 dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(name))
-        }
-    }
-    return <NameComponent name={rackName} onEdit={callback} />
-}
-
-RackNameContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackNameContainer
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 (
-        <div className={sidebarContainer}>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem
-                        component={TextListItemVariants.dt}
-                        className="pf-u-display-inline-flex pf-u-align-items-center"
-                    >
-                        Name
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        <RackNameContainer tileId={tileId} />
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
-                    </TextListItem>
-                </TextList>
-                <Title headingLevel="h2">Actions</Title>
-                <AddPrefabContainer />
-                <DeleteRackContainer />
-
-                <Title headingLevel="h2">Slots</Title>
-            </TextContent>
-            <div className={machineListContainer}>
-                <MachineListContainer tileId={tileId} />
-            </div>
-        </div>
-    )
-}
-
-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 <RackSidebarComponent {...props} tileId={tileId} />
-}
-
-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
deleted file mode 100644
index 284c4d53..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
+++ /dev/null
@@ -1,54 +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, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-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 = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRoom())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this room
-            </Button>
-            <ConfirmationModal
-                title="Delete this room"
-                message="Are you sure you want to delete this room?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-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
deleted file mode 100644
index 6db2bfb6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
+++ /dev/null
@@ -1,56 +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, useSelector } from 'react-redux'
-import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
-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 = () => {
-    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
-
-    const dispatch = useDispatch()
-    const onEdit = () => dispatch(startRoomEdit())
-    const onFinish = () => dispatch(finishRoomEdit())
-
-    return isEditing ? (
-        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
-            Finish editing room
-        </Button>
-    ) : (
-        <Button
-            variant="tertiary"
-            icon={<PencilAltIcon />}
-            isBlock
-            disabled={isInRackConstructionMode}
-            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-            className="pf-u-mb-sm"
-        >
-            Edit the tiles of this room
-        </Button>
-    )
-}
-
-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
deleted file mode 100644
index 8aebe969..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Button } from '@patternfly/react-core'
-import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
-import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'
-
-const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
-    if (inRackConstructionMode) {
-        return (
-            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop}>
-                Stop rack construction
-            </Button>
-        )
-    }
-
-    return (
-        <Button
-            icon={<PlusIcon />}
-            isBlock
-            isDisabled={isEditingRoom}
-            onClick={() => (isEditingRoom ? undefined : onStart())}
-            className="pf-u-mb-sm"
-        >
-            Start rack construction
-        </Button>
-    )
-}
-
-RackConstructionComponent.propTypes = {
-    onStart: PropTypes.func,
-    onStop: PropTypes.func,
-    inRackConstructionMode: PropTypes.bool,
-    isEditingRoom: PropTypes.bool,
-}
-
-export default RackConstructionComponent
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
deleted file mode 100644
index 38af447a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
+++ /dev/null
@@ -1,46 +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, useSelector } from 'react-redux'
-import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
-import RackConstructionComponent from './RackConstructionComponent'
-
-const RackConstructionContainer = (props) => {
-    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
-    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-
-    const dispatch = useDispatch()
-    const onStart = () => dispatch(startRackConstruction())
-    const onStop = () => dispatch(stopRackConstruction())
-    return (
-        <RackConstructionComponent
-            {...props}
-            inRackConstructionMode={isRackConstructionMode}
-            isEditingRoom={isEditingRoom}
-            onStart={onStart}
-            onStop={onStop}
-        />
-    )
-}
-
-export default RackConstructionContainer
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
deleted file mode 100644
index d7b006a6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
+++ /dev/null
@@ -1,44 +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 PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
-import { editRoomName } from '../../../../../redux/actions/topology/room'
-
-function RoomName({ roomId }) {
-    const roomName = useSelector((state) => state.objects.room[roomId].name)
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRoomName(name))
-        }
-    }
-    return <NameComponent name={roomName} onEdit={callback} />
-}
-
-RoomName.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default RoomName
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 (
-        <TextContent>
-            <Title headingLevel="h2">Details</Title>
-            <TextList component={TextListVariants.dl}>
-                <TextListItem
-                    component={TextListItemVariants.dt}
-                    className="pf-u-display-inline-flex pf-u-align-items-center"
-                >
-                    Name
-                </TextListItem>
-                <TextListItem component={TextListItemVariants.dd}>
-                    <RoomName roomId={roomId} />
-                </TextListItem>
-            </TextList>
-            <Title headingLevel="h2">Construction</Title>
-            <RackConstructionContainer />
-            <EditRoomContainer />
-            <DeleteRoomContainer />
-        </TextContent>
-    )
-}
-
-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 <RoomSidebarComponent {...props} roomId={roomId} />
-}
-
-export default RoomSidebarContainer