feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.

48 files changed, 0 insertions, 1054 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
deleted file mode 100644
index bac24c8b..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
-import GrayLayer from '../../../components/app/map/elements/GrayLayer'
-
-const GrayContainer = () => {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-    return <GrayLayer onClick={onClick} />
-}
-
-export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
deleted file mode 100644
index 91ceb35d..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map'
-import MapStageComponent from '../../../components/app/map/MapStageComponent'
-import { useMapDimensions, useMapPosition } from '../../../data/map'
-
-const MapStage = () => {
-    const position = useMapPosition()
-    const dimensions = useMapDimensions()
-    const dispatch = useDispatch()
-    const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y))
-    const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y))
-    const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height))
-
-    return (
-        <MapStageComponent
-            mapPosition={position}
-            mapDimensions={dimensions}
-            zoomInOnPosition={zoomInOnPositionA}
-            setMapPositionWithBoundsCheck={setMapPositionWithBoundsCheckA}
-            setMapDimensions={setMapDimensionsA}
-        />
-    )
-}
-
-export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js
deleted file mode 100644
index e5af5117..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackGroup from '../../../components/app/map/groups/RackGroup'
-
-const RackContainer = ({ tile }) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    return <RackGroup interactionLeve={interactionLevel} tile={tile} />
-}
-
-export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
deleted file mode 100644
index d22317a5..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-const RackSpaceFillContainer = (props) => {
-    const state = useSelector((state) => {
-        let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[props.tileId].rack]
-        const machineIds = rack.machines
-        machineIds.forEach((machineId) => {
-            if (machineId !== null) {
-                const machine = state.objects.machine[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
-                machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
-                )
-                machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
-                )
-            }
-        })
-
-        return {
-            type: 'energy',
-            fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW),
-        }
-    })
-    return <RackFillBar {...props} {...state} />
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
deleted file mode 100644
index 8d6f61e0..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-const RackSpaceFillContainer = (props) => {
-    const state = useSelector((state) => {
-        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rack].machines
-        return {
-            type: 'space',
-            fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
-        }
-    })
-    return <RackFillBar {...props} {...state} />
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
deleted file mode 100644
index 0a9e1503..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
-import RoomGroup from '../../../components/app/map/groups/RoomGroup'
-
-const RoomContainer = (props) => {
-    const state = useSelector((state) => {
-        return {
-            interactionLevel: state.interactionLevel,
-            currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.objects.room[props.roomId],
-        }
-    })
-    const dispatch = useDispatch()
-    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
-}
-
-RoomContainer.propTypes = {
-    roomId: PropTypes.string,
-}
-
-export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
deleted file mode 100644
index 50a2abfd..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
-import TileGroup from '../../../components/app/map/groups/TileGroup'
-
-const TileContainer = (props) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[props.tileId])
-
-    const dispatch = useDispatch()
-    const onClick = (tile) => {
-        if (tile.rack) {
-            dispatch(goFromRoomToRack(tile._id))
-        }
-    }
-    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
-}
-
-export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
deleted file mode 100644
index e7ab3c72..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
-import { useActiveTopology } from '../../../data/topology'
-
-const TopologyContainer = () => {
-    const topology = useActiveTopology()
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
-}
-
-export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
deleted file mode 100644
index 67f36396..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import WallGroup from '../../../components/app/map/groups/WallGroup'
-
-const WallContainer = (props) => {
-    const tiles = useSelector((state) =>
-        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
-    )
-    return <WallGroup {...props} tiles={tiles} />
-}
-
-export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
deleted file mode 100644
index a10eea22..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent'
-import { useMapScale } from '../../../../data/map'
-
-const ScaleIndicatorContainer = (props) => {
-    const scale = useMapScale()
-    return <ScaleIndicatorComponent {...props} scale={scale} />
-}
-
-export default ScaleIndicatorContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
deleted file mode 100644
index a39c6077..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { zoomInOnCenter } from '../../../../redux/actions/map'
-import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent'
-import { useMapScale } from '../../../../data/map'
-
-const ZoomControlContainer = () => {
-    const dispatch = useDispatch()
-    const scale = useMapScale()
-    return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} />
-}
-
-export default ZoomControlContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
deleted file mode 100644
index 633ebcc7..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
-import { useMapPosition, useMapScale } from '../../../../data/map'
-
-const MapLayer = (props) => {
-    const position = useMapPosition()
-    const scale = useMapScale()
-    return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
-}
-
-export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
deleted file mode 100644
index e9a64545..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addRackToTile } from '../../../../redux/actions/topology/room'
-import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
-import { findTileWithPosition } from '../../../../util/tile-calculations'
-
-const ObjectHoverLayer = (props) => {
-    const state = useSelector((state) => {
-        return {
-            mapPosition: state.map.position,
-            mapScale: state.map.scale,
-            isEnabled: () => state.construction.inRackConstructionMode,
-            isValid: (x, y) => {
-                if (state.interactionLevel.mode !== 'ROOM') {
-                    return false
-                }
-
-                const currentRoom = state.objects.room[state.interactionLevel.roomId]
-                const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
-                const tile = findTileWithPosition(tiles, x, y)
-
-                return !(tile === null || tile.rack)
-            },
-        }
-    })
-
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(addRackToTile(x, y))
-    return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} />
-}
-
-export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
deleted file mode 100644
index 4070c766..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
-import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
-import {
-    deriveValidNextTilePositions,
-    findPositionInPositions,
-    findPositionInRooms,
-} from '../../../../util/tile-calculations'
-
-const RoomHoverLayer = (props) => {
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
-
-    const state = useSelector((state) => {
-        return {
-            mapPosition: state.map.position,
-            mapScale: state.map.scale,
-            isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
-            isValid: (x, y) => {
-                const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
-                const oldRooms = Object.keys(state.objects.room)
-                    .map((id) => Object.assign({}, state.objects.room[id]))
-                    .filter(
-                        (room) =>
-                            state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
-                            room._id !== state.construction.currentRoomInConstruction
-                    )
-
-                ;[...oldRooms, newRoom].forEach((room) => {
-                    room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
-                })
-                if (newRoom.tiles.length === 0) {
-                    return findPositionInRooms(oldRooms, x, y) === -1
-                }
-
-                const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-                return findPositionInPositions(validNextPositions, x, y) !== -1
-            },
-        }
-    })
-    return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} />
-}
-
-export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
deleted file mode 100644
index a75f15ae..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent'
-import { useRouter } from 'next/router'
-import { usePortfolio, usePortfolioScenarios } from '../../../data/project'
-
-const PortfolioResultsContainer = (props) => {
-    const router = useRouter()
-    const { portfolio: currentPortfolioId } = router.query
-    const { data: portfolio } = usePortfolio(currentPortfolioId)
-    const scenarios = usePortfolioScenarios(currentPortfolioId).data ?? []
-    return <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} />
-}
-
-export default PortfolioResultsContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
deleted file mode 100644
index 60ac666c..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useState } from 'react'
-import { useRouter } from 'next/router'
-import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent'
-import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent'
-import { useProjectPortfolios } from '../../../../data/project'
-import { useMutation } from 'react-query'
-
-const PortfolioListContainer = () => {
-    const router = useRouter()
-    const { project: currentProjectId, portfolio: currentPortfolioId } = router.query
-    const portfolios = useProjectPortfolios(currentProjectId).data ?? []
-
-    const { mutate: addPortfolio } = useMutation('addPortfolio')
-    const { mutateAsync: deletePortfolio } = useMutation('deletePortfolio')
-
-    const [isVisible, setVisible] = useState(false)
-    const actions = {
-        onNewPortfolio: () => setVisible(true),
-        onChoosePortfolio: async (portfolioId) => {
-            await router.push(`/projects/${currentProjectId}/portfolios/${portfolioId}`)
-        },
-        onDeletePortfolio: async (id) => {
-            if (id) {
-                await deletePortfolio(id)
-                await router.push(`/projects/${currentProjectId}`)
-            }
-        },
-    }
-    const callback = (name, targets) => {
-        if (name) {
-            addPortfolio({ projectId: currentProjectId, name, targets })
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <PortfolioListComponent
-                currentProjectId={currentProjectId}
-                currentPortfolioId={currentPortfolioId}
-                portfolios={portfolios}
-                {...actions}
-            />
-            <NewPortfolioModalComponent callback={callback} show={isVisible} />
-        </>
-    )
-}
-
-export default PortfolioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
deleted file mode 100644
index 06c7f0f7..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent'
-import { isCollapsible } from '../../../../util/sidebar-space'
-
-const ProjectSidebarContainer = (props) => {
-    const router = useRouter()
-    return <ProjectSidebarComponent collapsible={isCollapsible(router)} {...props} />
-}
-
-export default ProjectSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
deleted file mode 100644
index 3b68df38..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
-import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent'
-import { useProjectTopologies } from '../../../../data/topology'
-import { usePortfolio, usePortfolioScenarios } from '../../../../data/project'
-import { useSchedulers, useTraces } from '../../../../data/experiments'
-import { useMutation } from 'react-query'
-
-const ScenarioListContainer = ({ portfolioId }) => {
-    const { data: portfolio } = usePortfolio(portfolioId)
-    const scenarios = usePortfolioScenarios(portfolioId).data ?? []
-    const topologies =
-        useProjectTopologies(portfolio?.projectId).data?.map((topology) => ({
-            _id: topology._id,
-            name: topology.name,
-        })) ?? []
-    const traces = useTraces().data ?? []
-    const schedulers = useSchedulers().data ?? []
-
-    const { mutate: addScenario } = useMutation('addScenario')
-    const { mutate: deleteScenario } = useMutation('deleteScenario')
-
-    const [isVisible, setVisible] = useState(false)
-
-    const onNewScenario = () => setVisible(true)
-    const onDeleteScenario = (id) => id && deleteScenario(id)
-    const callback = (name, portfolioId, trace, topology, operational) => {
-        if (name) {
-            addScenario({
-                portfolioId,
-                name,
-                trace,
-                topology,
-                operational,
-            })
-        }
-
-        setVisible(false)
-    }
-
-    return (
-        <>
-            <ScenarioListComponent
-                portfolioId={portfolioId}
-                scenarios={scenarios}
-                onNewScenario={onNewScenario}
-                onDeleteScenario={onDeleteScenario}
-            />
-            <NewScenarioModalComponent
-                show={isVisible}
-                currentPortfolioId={portfolioId}
-                currentPortfolioScenarioIds={scenarios.map((s) => s._id)}
-                traces={traces}
-                schedulers={schedulers}
-                topologies={topologies}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-ScenarioListContainer.propTypes = {
-    portfolioId: PropTypes.string,
-}
-
-export default ScenarioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
deleted file mode 100644
index a2244a30..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent'
-import { setCurrentTopology } from '../../../../redux/actions/topology/building'
-import { useRouter } from 'next/router'
-import { addTopology } from '../../../../redux/actions/topologies'
-import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent'
-import { useActiveTopology, useProjectTopologies } from '../../../../data/topology'
-import { useMutation } from 'react-query'
-
-const TopologyListContainer = () => {
-    const dispatch = useDispatch()
-    const router = useRouter()
-    const { project: currentProjectId } = router.query
-    const topologies =
-        useProjectTopologies(currentProjectId).data?.map((topology) => ({ _id: topology._id, name: topology.name })) ??
-        []
-    const currentTopologyId = useActiveTopology()?._id
-    const [isVisible, setVisible] = useState(false)
-
-    const { mutate: deleteTopology } = useMutation('deleteTopology')
-
-    const onChooseTopology = async (id) => {
-        dispatch(setCurrentTopology(id))
-        await router.push(`/projects/${currentProjectId}/topologies/${id}`)
-    }
-    const onDeleteTopology = async (id) => {
-        if (id) {
-            deleteTopology(id)
-            await router.push(`/projects/${currentProjectId}`)
-        }
-    }
-    const onCreateTopology = (name) => {
-        if (name) {
-            dispatch(addTopology(currentProjectId, name, undefined))
-        }
-        setVisible(false)
-    }
-    const onDuplicateTopology = (name, id) => {
-        if (name) {
-            dispatch(addTopology(currentProjectId, name, id))
-        }
-        setVisible(false)
-    }
-    const onCancel = () => setVisible(false)
-
-    return (
-        <>
-            <TopologyListComponent
-                topologies={topologies}
-                currentTopologyId={currentTopologyId}
-                onChooseTopology={onChooseTopology}
-                onNewTopology={() => setVisible(true)}
-                onDeleteTopology={onDeleteTopology}
-            />
-            <NewTopologyModalComponent
-                show={isVisible}
-                topologies={topologies}
-                onCreateTopology={onCreateTopology}
-                onDuplicateTopology={onDuplicateTopology}
-                onCancel={onCancel}
-            />
-        </>
-    )
-}
-
-export default TopologyListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js
deleted file mode 100644
index 42c81c65..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import TopologySidebarComponent from '../../../../components/app/sidebars/topology/TopologySidebarComponent'
-
-const TopologySidebarContainer = (props) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    return <TopologySidebarComponent {...props} interactionLevel={interactionLevel} />
-}
-
-export default TopologySidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js
deleted file mode 100644
index a0b52e56..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import BuildingSidebarComponent from '../../../../../components/app/sidebars/topology/building/BuildingSidebarComponent'
-
-const BuildingSidebarContainer = BuildingSidebarComponent
-
-export default BuildingSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
deleted file mode 100644
index 96f42a44..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-    cancelNewRoomConstruction,
-    finishNewRoomConstruction,
-    startNewRoomConstruction,
-} from '../../../../../redux/actions/topology/building'
-import StartNewRoomConstructionComponent from '../../../../../components/app/sidebars/topology/building/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 (
-        <StartNewRoomConstructionComponent
-            {...props}
-            {...actions}
-            currentRoomInConstruction={currentRoomInConstruction}
-        />
-    )
-}
-
-export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
deleted file mode 100644
index ea250767..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
-import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent'
-
-const BackToRackContainer = (props) => {
-    const dispatch = useDispatch()
-    return <BackToRackComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} />
-}
-
-export default BackToRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
deleted file mode 100644
index 54e406f4..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteMachine } from '../../../../../redux/actions/topology/machine'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-
-const DeleteMachineContainer = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faTrash} className="mr-2" />
-                Delete this machine
-            </Button>
-            <ConfirmationModal
-                title="Delete this machine"
-                message="Are you sure you want to delete this machine?"
-                show={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteMachineContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
deleted file mode 100644
index 9cbb32c5..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-
-const MachineNameContainer = () => {
-    const position = useSelector((state) => state.interactionLevel.position)
-    return <h2>Machine at slot {position}</h2>
-}
-
-export default MachineNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index 7553c2fe..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import MachineSidebarComponent from '../../../../../components/app/sidebars/topology/machine/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/containers/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
deleted file mode 100644
index 0f85aa76..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addUnit } from '../../../../../redux/actions/topology/machine'
-import UnitAddComponent from '../../../../../components/app/sidebars/topology/machine/UnitAddComponent'
-
-const UnitAddContainer = (props) => {
-    const units = useSelector((state) => Object.values(state.objects[props.unitType]))
-    const dispatch = useDispatch()
-
-    const onAdd = (id) => dispatch(addUnit(props.unitType, id))
-
-    return <UnitAddComponent {...props} onAdd={onAdd} units={units} />
-}
-
-export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js
deleted file mode 100644
index cdd7e268..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import UnitListComponent from '../../../../../components/app/sidebars/topology/machine/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/containers/app/sidebars/topology/machine/UnitTabsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js
deleted file mode 100644
index 00fe4067..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import UnitTabsComponent from '../../../../../components/app/sidebars/topology/machine/UnitTabsComponent'
-
-const UnitTabsContainer = UnitTabsComponent
-
-export default UnitTabsContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
deleted file mode 100644
index c2a0fc48..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../redux/actions/prefabs'
-import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/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/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
deleted file mode 100644
index a98728a6..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
-import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent'
-
-const BackToRoomContainer = (props) => {
-    const dispatch = useDispatch()
-    return <BackToRoomComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} />
-}
-
-export default BackToRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
deleted file mode 100644
index 4463530e..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRack } from '../../../../../redux/actions/topology/rack'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-
-const DeleteRackContainer = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faTrash} className="mr-2" />
-                Delete this rack
-            </Button>
-            <ConfirmationModal
-                title="Delete this rack"
-                message="Are you sure you want to delete this rack?"
-                show={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
deleted file mode 100644
index 2118d915..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-
-const MachineListContainer = (props) => {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[state.interactionLevel.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))}
-        />
-    )
-}
-
-export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
deleted file mode 100644
index 2c39cf9f..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
-import TextInputModal from '../../../../../components/modals/TextInputModal'
-import { editRackName } from '../../../../../redux/actions/topology/rack'
-
-const RackNameContainer = () => {
-    const [isVisible, setVisible] = useState(false)
-    const rackName = useSelector(
-        (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].name
-    )
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(name))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <NameComponent name={rackName} onEdit={() => setVisible(true)} />
-            <TextInputModal
-                title="Edit rack name"
-                label="Rack name"
-                show={isVisible}
-                initialValue={rackName}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
deleted file mode 100644
index 34777125..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent'
-
-const RackSidebarContainer = (props) => {
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-    return <RackSidebarComponent {...props} rackId={rackId} />
-}
-
-export default RackSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
deleted file mode 100644
index 9fa1e95f..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../../../redux/actions/interaction-level'
-import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent'
-
-const BackToBuildingContainer = () => {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-    return <BackToBuildingComponent onClick={onClick} />
-}
-
-export default BackToBuildingContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
deleted file mode 100644
index 0fbbb036..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import { Button } from 'reactstrap'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRoom } from '../../../../../redux/actions/topology/room'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-
-const DeleteRoomContainer = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRoom())
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button color="danger" outline block onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faTrash} className="mr-2" />
-                Delete this room
-            </Button>
-            <ConfirmationModal
-                title="Delete this room"
-                message="Are you sure you want to delete this room?"
-                show={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
deleted file mode 100644
index ec4f586b..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck, faPencilAlt } from '@fortawesome/free-solid-svg-icons'
-
-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 color="info" outline block onClick={onFinish}>
-            <FontAwesomeIcon icon={faCheck} className="mr-2" />
-            Finish editing room
-        </Button>
-    ) : (
-        <Button
-            color="info"
-            outline
-            block
-            disabled={isInRackConstructionMode}
-            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-        >
-            <FontAwesomeIcon icon={faPencilAlt} className="mr-2" />
-            Edit the tiles of this room
-        </Button>
-    )
-}
-
-export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
deleted file mode 100644
index 79584e98..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
-import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/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/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
deleted file mode 100644
index 3b35a849..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
-import TextInputModal from '../../../../../components/modals/TextInputModal'
-import { editRoomName } from '../../../../../redux/actions/topology/room'
-
-const RoomNameContainer = () => {
-    const [isVisible, setVisible] = useState(false)
-    const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name)
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRoomName(name))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <NameComponent name={roomName} onEdit={() => setVisible(true)} />
-            <TextInputModal
-                title="Edit room name"
-                label="Room name"
-                show={isVisible}
-                initialValue={roomName}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default RoomNameContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
deleted file mode 100644
index 252881a0..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RoomSidebarComponent from '../../../../../components/app/sidebars/topology/room/RoomSidebarComponent'
-
-const RoomSidebarContainer = (props) => {
-    const roomId = useSelector((state) => state.interactionLevel.roomId)
-    return <RoomSidebarComponent {...props} roomId={roomId} />
-}
-
-export default RoomSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
deleted file mode 100644
index d8083d89..00000000
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { Button } from 'reactstrap'
-import { useAuth } from '../../auth'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
-
-function Login({ visible, className }) {
-    const { loginWithRedirect } = useAuth()
-
-    if (!visible) {
-        return <span />
-    }
-
-    return (
-        <Button color="primary" onClick={() => loginWithRedirect()} className={className}>
-            <FontAwesomeIcon icon={faSignInAlt} /> Sign In
-        </Button>
-    )
-}
-
-export default Login
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
deleted file mode 100644
index 37705c5d..00000000
--- a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import LogoutButton from '../../components/navigation/LogoutButton'
-import { useAuth } from '../../auth'
-
-const Logout = (props) => {
-    const { logout } = useAuth()
-    return <LogoutButton {...props} onLogout={() => logout({ returnTo: window.location.origin })} />
-}
-
-export default Logout
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
deleted file mode 100644
index 70f5b884..00000000
--- a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-import { useAuth } from '../../auth'
-
-function ProfileName() {
-    const { isLoading, user } = useAuth()
-    return isLoading ? <span>Loading...</span> : <span>{user.name}</span>
-}
-
-export default ProfileName
diff --git a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js b/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js
deleted file mode 100644
index ff9f9fe7..00000000
--- a/opendc-web/opendc-web-ui/src/containers/navigation/AppNavbarContainer.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import AppNavbarComponent from '../../components/navigation/AppNavbarComponent'
-import { useActiveProjectId, useProject } from '../../data/project'
-
-const AppNavbarContainer = (props) => {
-    const projectId = useActiveProjectId()
-    const { data: project } = useProject(projectId)
-    return <AppNavbarComponent {...props} project={project} />
-}
-
-export default AppNavbarContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
deleted file mode 100644
index ac0edae4..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import TextInputModal from '../../components/modals/TextInputModal'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { useMutation } from 'react-query'
-
-/**
- * A container for creating a new project.
- */
-const NewProjectContainer = () => {
-    const [isVisible, setVisible] = useState(false)
-    const { mutate: addProject } = useMutation('addProject')
-    const callback = (text) => {
-        if (text) {
-            addProject({ name: text })
-        }
-        setVisible(false)
-    }
-
-    return (
-        <>
-            <div className="bottom-btn-container">
-                <Button color="primary" className="float-right" onClick={() => setVisible(true)}>
-                    <FontAwesomeIcon icon={faPlus} className="mr-2" />
-                    New Project
-                </Button>
-            </div>
-            <TextInputModal title="New Project" label="Project title" show={isVisible} callback={callback} />
-        </>
-    )
-}
-
-export default NewProjectContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
deleted file mode 100644
index 62985742..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import ProjectActionButtons from '../../components/projects/ProjectActionButtons'
-import { useMutation } from 'react-query'
-
-const ProjectActions = (props) => {
-    const { mutate: deleteProject } = useMutation('deleteProject')
-    const actions = {
-        onViewUsers: (id) => {}, // TODO implement user viewing
-        onDelete: (id) => deleteProject(id),
-    }
-    return <ProjectActionButtons {...props} {...actions} />
-}
-
-export default ProjectActions
diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
deleted file mode 100644
index b5c5dd68..00000000
--- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ProjectList from '../../components/projects/ProjectList'
-import { useAuth } from '../../auth'
-import { useProjects } from '../../data/project'
-
-const getVisibleProjects = (projects, filter, userId) => {
-    switch (filter) {
-        case 'SHOW_ALL':
-            return projects
-        case 'SHOW_OWN':
-            return projects.filter((project) =>
-                project.authorizations.some((a) => a.userId === userId && a.level === 'OWN')
-            )
-        case 'SHOW_SHARED':
-            return projects.filter((project) =>
-                project.authorizations.some((a) => a.userId === userId && a.level !== 'OWN')
-            )
-        default:
-            return projects
-    }
-}
-
-const ProjectListContainer = ({ filter }) => {
-    const { user } = useAuth()
-    const { data: projects } = useProjects()
-    return <ProjectList projects={getVisibleProjects(projects ?? [], filter, user?.sub)} />
-}
-
-ProjectListContainer.propTypes = {
-    filter: PropTypes.string.isRequired,
-}
-
-export default ProjectListContainer