refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.

87 files changed, 358 insertions, 226 deletions

diff --git a/opendc-web/opendc-web-ui/src/api/topologies.js b/opendc-web/opendc-web-ui/src/api/topologies.js
index 0b8864e0..bd4e3bc4 100644
--- a/opendc-web/opendc-web-ui/src/api/topologies.js
+++ b/opendc-web/opendc-web-ui/src/api/topologies.js
@@ -35,6 +35,7 @@ export function addTopology(auth, topology) {
 }
 
 export function updateTopology(auth, topology) {
+    // eslint-disable-next-line no-unused-vars
     const { _id, ...data } = topology
     return request(auth, `topologies/${topology._id}`, 'PUT', { topology: data })
 }
diff --git a/opendc-web/opendc-web-ui/src/components/AppNavigation.js b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
index b3f11f34..178c3ec0 100644
--- a/opendc-web/opendc-web-ui/src/components/AppNavigation.js
+++ b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 
-import { Dropdown, DropdownItem, DropdownToggle, Nav, NavItem, NavList } from '@patternfly/react-core'
+import { Nav, NavItem, NavList } from '@patternfly/react-core'
 import { useRouter } from 'next/router'
 import NavItemLink from './util/NavItemLink'
 import { useProject } from '../data/project'
diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js
index 7cf9cc15..2e0ea4cc 100644
--- a/opendc-web/opendc-web-ui/src/components/AppPage.js
+++ b/opendc-web/opendc-web-ui/src/components/AppPage.js
@@ -22,8 +22,7 @@
 
 import PropTypes from 'prop-types'
 import { AppHeader } from './AppHeader'
-import { AppNavigation } from './AppNavigation'
-import React, { useState } from 'react'
+import React from 'react'
 import { Page } from '@patternfly/react-core'
 
 export function AppPage({ children, breadcrumb, tertiaryNav }) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
deleted file mode 100644
index 4c60bfb2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
-import { Button } from '@patternfly/react-core'
-import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCamera } from '@fortawesome/free-solid-svg-icons'
-
-const Toolbar = ({ onZoom, onExport }) => (
-    <div className={toolBar}>
-        <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
-            <SearchPlusIcon />
-        </Button>
-        <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
-            <SearchMinusIcon />
-        </Button>
-        <Button variant="tertiary" title="Export Canvas to PNG Image" onClick={() => onExport()} className={control}>
-            <FontAwesomeIcon icon={faCamera} />
-        </Button>
-    </div>
-)
-
-Toolbar.propTypes = {
-    onZoom: PropTypes.func,
-    onExport: PropTypes.func,
-}
-
-export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
deleted file mode 100644
index ed718601..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const RoomTile = ({ tile, color }) => (
-    <Rect
-        x={tile.positionX * TILE_SIZE_IN_PIXELS}
-        y={tile.positionY * TILE_SIZE_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={color}
-    />
-)
-
-RoomTile.propTypes = {
-    tile: Tile,
-    color: PropTypes.string,
-}
-
-export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
deleted file mode 100644
index 9e87cc82..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
-import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const TileObject = ({ positionX, positionY, color }) => (
-    <Rect
-        x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        fill={color}
-        stroke={OBJECT_BORDER_COLOR}
-        strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
-    />
-)
-
-TileObject.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-}
-
-export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js
index 6d4f48c1..856282a7 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js
@@ -24,8 +24,8 @@ import PropTypes from 'prop-types'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import NewScenarioModal from '../modals/custom-components/NewScenarioModal'
 import { useMutation } from 'react-query'
+import NewScenarioModal from './NewScenarioModal'
 
 function NewScenario({ portfolioId }) {
     const [isVisible, setVisible] = useState(false)
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js
index 94d0d424..7f620c8c 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useRef, useState } from 'react'
-import { Portfolio } from '../../../shapes'
-import Modal from '../Modal'
+import Modal from '../util/modals/Modal'
 import {
     Checkbox,
     Form,
@@ -12,9 +11,9 @@ import {
     NumberInput,
     TextInput,
 } from '@patternfly/react-core'
-import { useSchedulers, useTraces } from '../../../data/experiments'
-import { useProjectTopologies } from '../../../data/topology'
-import { usePortfolio } from '../../../data/project'
+import { useSchedulers, useTraces } from '../../data/experiments'
+import { useProjectTopologies } from '../../data/topology'
+import { usePortfolio } from '../../data/project'
 
 const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
     const { data: portfolio } = usePortfolio(portfolioId)
@@ -22,6 +21,7 @@ const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onC
     const { data: traces = [] } = useTraces()
     const { data: schedulers = [] } = useSchedulers()
 
+    // eslint-disable-next-line no-unused-vars
     const [isSubmitted, setSubmitted] = useState(false)
     const [traceLoad, setTraceLoad] = useState(100)
     const [trace, setTrace] = useState(undefined)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js
index 285345e7..66691580 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js
@@ -21,7 +21,7 @@
  */
 
 import PropTypes from 'prop-types'
-import { ClockIcon, InfoIcon, CheckCircleIcon, ErrorCircleOIcon } from '@patternfly/react-icons'
+import { ClockIcon, CheckCircleIcon, ErrorCircleOIcon } from '@patternfly/react-icons'
 
 function ScenarioState({ state }) {
     switch (state) {
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
index 9966e3ba..9966e3ba 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
index 09348e60..09348e60 100644
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
index 6a96c70c..f1883e68 100644
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
-import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_NAMES_SHORT, METRIC_UNITS } from '../../../util/available-metrics'
+import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../../util/available-metrics'
 import { mean, std } from 'mathjs'
 import approx from 'approximate-number'
 import {
@@ -21,8 +21,8 @@ import {
 } from '@patternfly/react-core'
 import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
 import { usePortfolioScenarios } from '../../../data/project'
-import NewScenario from '../../projects/NewScenario'
 import PortfolioResultInfo from './PortfolioResultInfo'
+import NewScenario from '../NewScenario'
 
 const PortfolioResults = ({ portfolioId }) => {
     const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
index ae4cb9cd..87ea059d 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
@@ -24,8 +24,8 @@ import PropTypes from 'prop-types'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import NewPortfolioModal from '../modals/custom-components/NewPortfolioModal'
 import { useMutation } from 'react-query'
+import NewPortfolioModal from './NewPortfolioModal'
 
 function NewPortfolio({ projectId }) {
     const [isVisible, setVisible] = useState(false)
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
index afe07597..4276d7d4 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
@@ -1,6 +1,27 @@
+/*
+ * 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, { useRef, useState } from 'react'
-import Modal from '../Modal'
 import {
     Form,
     FormGroup,
@@ -12,7 +33,8 @@ import {
     SelectVariant,
     TextInput,
 } from '@patternfly/react-core'
-import { METRIC_GROUPS, METRIC_NAMES } from '../../../util/available-metrics'
+import Modal from '../util/modals/Modal'
+import { METRIC_GROUPS, METRIC_NAMES } from '../../util/available-metrics'
 
 const NewPortfolioModal = ({ isOpen, onSubmit: onSubmitUpstream, onCancel: onUpstreamCancel }) => {
     const nameInput = useRef(null)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
index 4f5d79cf..984264dc 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import TextInputModal from '../../components/modals/TextInputModal'
 import { Button } from '@patternfly/react-core'
 import { useMutation } from 'react-query'
 import { PlusIcon } from '@patternfly/react-icons'
 import { buttonContainer } from './NewProject.module.scss'
+import TextInputModal from '../util/modals/TextInputModal'
 
 /**
  * A container for creating a new project.
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
index c6c4171b..bf59e020 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -24,9 +24,9 @@ import PropTypes from 'prop-types'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import NewTopologyModal from '../modals/custom-components/NewTopologyModal'
 import { useDispatch } from 'react-redux'
 import { addTopology } from '../../redux/actions/topologies'
+import NewTopologyModal from './NewTopologyModal'
 
 function NewTopology({ projectId }) {
     const [isVisible, setVisible] = useState(false)
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
index 49952aec..a495f73e 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
@@ -1,8 +1,30 @@
+/*
+ * 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, { useRef, useState } from 'react'
-import Modal from '../Modal'
 import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
-import { useProjectTopologies } from '../../../data/topology'
+import { useProjectTopologies } from '../../data/topology'
+import Modal from '../util/modals/Modal'
 
 const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
     const nameInput = useRef(null)
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
index 4791940f..ccf637e5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
@@ -23,9 +23,9 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
-import GrayLayer from '../../../components/app/map/elements/GrayLayer'
+import GrayLayer from './elements/GrayLayer'
 
-const GrayContainer = () => {
+function GrayContainer() {
     const dispatch = useDispatch()
     const onClick = () => dispatch(goDownOneInteractionLevel())
     return <GrayLayer onClick={onClick} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
index 4c3b2757..4c3b2757 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 5d19b3ad..5d19b3ad 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
index d879b4c8..d879b4c8 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
index 3c75d3a7..14449a91 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
@@ -22,10 +22,10 @@
 
 import React from 'react'
 import { useSelector } from 'react-redux'
-import RackGroup from '../../../components/app/map/groups/RackGroup'
 import { Tile } from '../../../shapes'
+import RackGroup from './groups/RackGroup'
 
-const RackContainer = ({ tile }) => {
+function RackContainer({ tile }) {
     const interactionLevel = useSelector((state) => state.interactionLevel)
     return <RackGroup interactionLevel={interactionLevel} tile={tile} />
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
index dbc26f14..c35cbde7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
+import RackFillBar from './elements/RackFillBar'
 
 function RackSpaceFillContainer({ tileId, ...props }) {
     const fillFraction = useSelector((state) => {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
index 7ca5c930..a6766f33 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -23,7 +23,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
+import RackFillBar from './elements/RackFillBar'
 
 function RackSpaceFillContainer({ tileId, ...props }) {
     const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 26fbcd7a..93ba9c93 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -24,18 +24,18 @@ 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'
+import RoomGroup from './groups/RoomGroup'
 
-const RoomContainer = (props) => {
+function RoomContainer({ roomId, ...props }) {
     const state = useSelector((state) => {
         return {
             interactionLevel: state.interactionLevel,
             currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.objects.room[props.roomId],
+            room: state.objects.room[roomId],
         }
     })
     const dispatch = useDispatch()
-    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
+    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
 }
 
 RoomContainer.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
index bfcbf735..149e26a1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -24,11 +24,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
-import TileGroup from '../../../components/app/map/groups/TileGroup'
+import TileGroup from './groups/TileGroup'
 
-const TileContainer = (props) => {
+function TileContainer({ tileId, ...props }) {
     const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[props.tileId])
+    const tile = useSelector((state) => state.objects.tile[tileId])
 
     const dispatch = useDispatch()
     const onClick = (tile) => {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
index 78e75d0f..eaebabd5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
@@ -22,10 +22,10 @@
 
 import React from 'react'
 import { useSelector } from 'react-redux'
-import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
 import { useActiveTopology } from '../../../data/topology'
+import TopologyGroup from './groups/TopologyGroup'
 
-const TopologyContainer = () => {
+function TopologyContainer() {
     const topology = useActiveTopology()
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
index 51dffe4b..77f553dd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -23,12 +23,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
-import WallGroup from '../../../components/app/map/groups/WallGroup'
+import WallGroup from './groups/WallGroup'
 
-const WallContainer = (props) => {
-    const tiles = useSelector((state) =>
-        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
-    )
+function WallContainer({ roomId, ...props }) {
+    const tiles = useSelector((state) => state.objects.room[roomId].tiles.map((tileId) => state.objects.tile[tileId]))
     return <WallGroup {...props} tiles={tiles} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
index f54b7c84..f54b7c84 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
index 0c1fac94..0c1fac94 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
index 11c2f2d3..58d2ccc9 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -3,11 +3,13 @@ import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import { scaleIndicator } from './ScaleIndicator.module.scss'
 
-const ScaleIndicator = ({ scale }) => (
-    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
-        {TILE_SIZE_IN_METERS}m
-    </div>
-)
+function ScaleIndicator({ scale }) {
+    return (
+        <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
+            {TILE_SIZE_IN_METERS}m
+        </div>
+    )
+}
 
 ScaleIndicator.propTypes = {
     scale: PropTypes.number.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
index f19e0ff2..f19e0ff2 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
new file mode 100644
index 00000000..469fd515
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { control, toolBar } from './Toolbar.module.scss'
+import { Button } from '@patternfly/react-core'
+import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCamera } from '@fortawesome/free-solid-svg-icons'
+
+function Toolbar({ onZoom, onExport }) {
+    return (
+        <div className={toolBar}>
+            <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
+                <SearchPlusIcon />
+            </Button>
+            <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
+                <SearchMinusIcon />
+            </Button>
+            <Button
+                variant="tertiary"
+                title="Export Canvas to PNG Image"
+                onClick={() => onExport()}
+                className={control}
+            >
+                <FontAwesomeIcon icon={faCamera} />
+            </Button>
+        </div>
+    )
+}
+
+Toolbar.propTypes = {
+    onZoom: PropTypes.func,
+    onExport: PropTypes.func,
+}
+
+export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
index 0d505acc..0d505acc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
index 8ccfe584..93037b51 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
@@ -3,6 +3,8 @@ import { Rect } from 'react-konva'
 import { BACKDROP_COLOR } from '../../../../util/colors'
 import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
 
-const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
+function Backdrop() {
+    return <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
+}
 
 export default Backdrop
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
index 35af4d96..08c687f6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
@@ -4,16 +4,18 @@ import { Rect } from 'react-konva'
 import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
 import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
 
-const GrayLayer = ({ onClick }) => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={GRAYED_OUT_AREA_COLOR}
-        onClick={onClick}
-    />
-)
+function GrayLayer({ onClick }) {
+    return (
+        <Rect
+            x={0}
+            y={0}
+            width={MAP_SIZE_IN_PIXELS}
+            height={MAP_SIZE_IN_PIXELS}
+            fill={GRAYED_OUT_AREA_COLOR}
+            onClick={onClick}
+        />
+    )
+}
 
 GrayLayer.propTypes = {
     onClick: PropTypes.func,
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
index 0369bb79..20c2c6d1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
@@ -4,18 +4,20 @@ import { Rect } from 'react-konva'
 import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
 import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
-const HoverTile = ({ x, y, isValid, scale = 1, onClick }) => (
-    <Rect
-        x={x}
-        y={y}
-        scaleX={scale}
-        scaleY={scale}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-        onClick={onClick}
-    />
-)
+function HoverTile({ x, y, isValid, scale = 1, onClick }) {
+    return (
+        <Rect
+            x={x}
+            y={y}
+            scaleX={scale}
+            scaleY={scale}
+            width={TILE_SIZE_IN_PIXELS}
+            height={TILE_SIZE_IN_PIXELS}
+            fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+            onClick={onClick}
+        />
+    )
+}
 
 HoverTile.propTypes = {
     x: PropTypes.number.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
index 7d304b6b..7d304b6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
index aa284944..aa284944 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js
new file mode 100644
index 00000000..e7329dc0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function RoomTile({ tile, color }) {
+    return (
+        <Rect
+            x={tile.positionX * TILE_SIZE_IN_PIXELS}
+            y={tile.positionY * TILE_SIZE_IN_PIXELS}
+            width={TILE_SIZE_IN_PIXELS}
+            height={TILE_SIZE_IN_PIXELS}
+            fill={color}
+        />
+    )
+}
+
+RoomTile.propTypes = {
+    tile: Tile,
+    color: PropTypes.string,
+}
+
+export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js
new file mode 100644
index 00000000..3211f187
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
+import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function TileObject({ positionX, positionY, color }) {
+    return (
+        <Rect
+            x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+            y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+            width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+            height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+            fill={color}
+            stroke={OBJECT_BORDER_COLOR}
+            strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
+        />
+    )
+}
+
+TileObject.propTypes = {
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+}
+
+export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
index 186c2b3a..186c2b3a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
index ad6412c3..4f18813e 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
@@ -4,7 +4,7 @@ import { WallSegment as WallSegmentShape } from '../../../../shapes'
 import { WALL_COLOR } from '../../../../util/colors'
 import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
 
-const WallSegment = ({ wallSegment }) => {
+function WallSegment({ wallSegment }) {
     let points
     if (wallSegment.isHorizontal) {
         points = [
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
index ebc00244..d66a18de 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
@@ -17,18 +17,20 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     MAP_SIZE_IN_PIXELS,
 ])
 
-const GridGroup = () => (
-    <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
-            <Line
-                key={index}
-                points={points}
-                stroke={GRID_COLOR}
-                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
-                listening={false}
-            />
-        ))}
-    </Group>
-)
+function GridGroup() {
+    return (
+        <Group>
+            {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    stroke={GRID_COLOR}
+                    strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+}
 
 export default GridGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
index 9c4abc4a..46030135 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
@@ -6,7 +6,7 @@ import TileObject from '../elements/TileObject'
 import RackSpaceFillContainer from '../RackSpaceFillContainer'
 import RackEnergyFillContainer from '../RackEnergyFillContainer'
 
-const RackGroup = ({ tile }) => {
+function RackGroup({ tile }) {
     return (
         <Group>
             <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
index a14f3676..a42e7bb7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
@@ -6,7 +6,7 @@ import GrayContainer from '../GrayContainer'
 import TileContainer from '../TileContainer'
 import WallContainer from '../WallContainer'
 
-const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
+function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick }) {
     if (currentRoomInConstruction === room._id) {
         return (
             <Group onClick={onClick}>
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
index cd36c7e5..f2084017 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
@@ -6,7 +6,7 @@ import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util
 import RoomTile from '../elements/RoomTile'
 import RackContainer from '../RackContainer'
 
-const TileGroup = ({ tile, newTile, onClick }) => {
+function TileGroup({ tile, newTile, onClick }) {
     let tileObject
     if (tile.rack) {
         tileObject = <RackContainer tile={tile} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
index d3bcb279..011dcf34 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
@@ -4,7 +4,7 @@ import { InteractionLevel, Topology } from '../../../../shapes'
 import RoomContainer from '../RoomContainer'
 import GrayContainer from '../GrayContainer'
 
-const TopologyGroup = ({ topology, interactionLevel }) => {
+function TopologyGroup({ topology, interactionLevel }) {
     if (!topology) {
         return <Group />
     }
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
index c73a95a7..6cbd1cd0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
@@ -5,7 +5,7 @@ import { Tile } from '../../../../shapes'
 import { deriveWallLocations } from '../../../../util/tile-calculations'
 import WallSegment from '../elements/WallSegment'
 
-const WallGroup = ({ tiles }) => {
+function WallGroup({ tiles }) {
     return (
         <Group>
             {deriveWallLocations(tiles).map((wallSegment, index) => (
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
index 2b1060c0..2b1060c0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
index c902532b..c902532b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
index 47d9c992..47d9c992 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 59f83b2b..59f83b2b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
index ececd07b..ececd07b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
index 564f4030..5d9340b2 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { InteractionLevel } from '../../../../shapes'
+import { InteractionLevel } from '../../../shapes'
 import BuildingSidebar from './building/BuildingSidebar'
 import {
     Button,
@@ -14,11 +14,11 @@ import {
 } 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 RoomSidebar from './room/RoomSidebar'
 import RackSidebar from './rack/RackSidebar'
 import MachineSidebar from './machine/MachineSidebar'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
 
 const name = {
     BUILDING: 'Building',
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
index 45dc98da..45dc98da 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
index 5fcd46be..5fcd46be 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
index 9fc85d0c..9fc85d0c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
index 5b031a6b..c149b224 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
@@ -26,20 +26,20 @@ import {
     cancelNewRoomConstruction,
     finishNewRoomConstruction,
     startNewRoomConstruction,
-} from '../../../../../redux/actions/topology/building'
+} from '../../../../redux/actions/topology/building'
 import NewRoomConstructionComponent from './NewRoomConstructionComponent'
 
-function NewRoomConstructionButton(props) {
+function NewRoomConstructionButton() {
     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} />
+        <NewRoomConstructionComponent
+            onStart={() => dispatch(startNewRoomConstruction())}
+            onFinish={() => dispatch(finishNewRoomConstruction())}
+            onCancel={() => dispatch(cancelNewRoomConstruction())}
+            currentRoomInConstruction={currentRoomInConstruction}
+        />
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
index 75d458b6..00ce4603 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -22,10 +22,10 @@
 
 import React, { useState } from 'react'
 import { useDispatch, useSelector } 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'
+import { TrashIcon } from '@patternfly/react-icons'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteMachine } from '../../../../redux/actions/topology/machine'
 
 function DeleteMachine() {
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
index 0c3dea98..0c3dea98 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
index 88591208..88591208 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
index cc226d46..fc805b95 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -23,8 +23,8 @@
 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'
+import { addUnit } from '../../../../redux/actions/topology/machine'
 
 function UnitAddContainer({ machineId, unitType }) {
     const units = useSelector((state) => Object.values(state.objects[unitType]))
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
index 16ebd708..daa3e7a7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
 import {
     Button,
     DataList,
@@ -20,6 +19,7 @@ import {
     Title,
 } from '@patternfly/react-core'
 import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../shapes'
 
 function UnitInfo({ unit, unitType }) {
     if (unitType === 'cpu' || unitType === 'gpu') {
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
index f76684a5..901fa45b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -24,7 +24,7 @@ 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'
+import { deleteUnit } from '../../../../redux/actions/topology/machine'
 
 const unitMapping = {
     cpu: 'cpus',
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
index 6d10d2df..6d10d2df 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
index 3af46861..e944c2e8 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
@@ -23,9 +23,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../redux/actions/prefabs'
 import { Button } from '@patternfly/react-core'
 import { SaveIcon } from '@patternfly/react-icons'
+import { addPrefab } from '../../../../api/prefabs'
 
 function AddPrefab({ tileId }) {
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
index f0dc7b6b..80c6349a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -23,10 +23,10 @@
 import PropTypes from 'prop-types'
 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'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteRack } from '../../../../redux/actions/topology/rack'
 
 function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
index 97141711..921622d6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -1,8 +1,8 @@
 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'
+import { Machine } from '../../../../shapes'
 
 const UnitIcon = ({ id, type }) => (
     <Image
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
index 27834cf4..de7a2140 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import MachineComponent from './MachineComponent'
-import { Machine } from '../../../../../shapes'
 import {
     Badge,
     Button,
@@ -13,6 +12,7 @@ import {
     DataListItemRow,
 } from '@patternfly/react-core'
 import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
+import { Machine } from '../../../../shapes'
 
 function MachineListComponent({ machines = [], onSelect, onAdd }) {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
index 3ed0ffd0..6fbff949 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -24,8 +24,8 @@ 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'
+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])
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
index 11db6420..09d73af7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -2,7 +2,7 @@ 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'
+import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
     const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 3c9f152a..3c9f152a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
index 6f258aec..6f258aec 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
index 19a782a6..29b8f78a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
@@ -23,8 +23,8 @@
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRoom } from '../../../../../redux/actions/topology/room'
+import ConfirmationModal from '../../../util/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'
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
index 96c077cb..7a278cd6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
@@ -23,7 +23,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
+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'
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
index 13432689..a384d5d5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
@@ -1,8 +1,7 @@
 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'
+import { PlusIcon, TimesIcon } from '@patternfly/react-icons'
 
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
index b9ab6610..e04287a5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
@@ -22,7 +22,7 @@
 
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
+import { startRackConstruction, stopRackConstruction } from '../../../../redux/actions/topology/room'
 import RackConstructionComponent from './RackConstructionComponent'
 
 function RackConstructionContainer(props) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
index 11909189..e8d8b33c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -23,8 +23,8 @@
 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'
+import NameComponent from '../NameComponent'
+import { editRoomName } from '../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
     const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
index 6ad489e0..6ad489e0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
diff --git a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
index f6e1c98b..f6e1c98b 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
index d4577062..d4577062 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
index 392a729e..392a729e 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index c6ded12b..8b0ed8e0 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -27,7 +27,6 @@ import Head from 'next/head'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Button,
     Card,
     CardActions,
     CardBody,
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 55bee445..53cc9c73 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -53,10 +53,10 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import ScenarioTable from '../../../../components/projects/ScenarioTable'
-import NewScenario from '../../../../components/projects/NewScenario'
 import { METRIC_NAMES } from '../../../../util/available-metrics'
-import PortfolioResults from '../../../../components/app/results/PortfolioResults'
+import NewScenario from '../../../../components/portfolios/NewScenario'
+import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
+import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 139c2979..a1d6ac7e 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -23,25 +23,37 @@
 import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { configure, HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
-import MapStage from '../../../../components/app/map/MapStage'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
+    Breadcrumb,
+    BreadcrumbItem,
     Bullseye,
+    Divider,
     Drawer,
     DrawerContent,
     DrawerContentBody,
     EmptyState,
     EmptyStateIcon,
+    PageSection,
+    PageSectionVariants,
     Spinner,
+    Tab,
+    TabContent,
+    Tabs,
+    TabTitleText,
+    Text,
+    TextContent,
     Title,
 } from '@patternfly/react-core'
-import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar'
-import Collapse from '../../../../components/app/map/controls/Collapse'
+import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
+import MapStage from '../../../../components/topologies/map/MapStage'
+import Collapse from '../../../../components/topologies/map/controls/Collapse'
+import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
 
 /**
  * Page that displays a datacenter topology.
@@ -59,10 +71,29 @@ function Topology() {
         }
     }, [projectId, topologyId, dispatch])
 
+    const [activeTab, setActiveTab] = useState('overview')
+    const overviewRef = useRef(null)
+    const floorPlanRef = useRef(null)
+
     const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     const [isExpanded, setExpanded] = useState(true)
+
+    const breadcrumb = (
+        <Breadcrumb>
+            <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
+                Projects
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
+                Project details
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}/topologies/${topologyId}`} component={BreadcrumbLink} isActive>
+                Topology
+            </BreadcrumbItem>
+        </Breadcrumb>
+    )
+
     const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
 
     // Make sure that holding down a key will generate repeated events
@@ -71,31 +102,71 @@ function Topology() {
     })
 
     return (
-        <AppPage>
+        <AppPage breadcrumb={breadcrumb}>
             <Head>
                 <title>{project?.name ?? 'Topologies'} - OpenDC</title>
             </Head>
-            {topologyIsLoading ? (
-                <Bullseye>
-                    <EmptyState>
-                        <EmptyStateIcon variant="container" component={Spinner} />
-                        <Title size="lg" headingLevel="h4">
-                            Loading Topology
-                        </Title>
-                    </EmptyState>
-                </Bullseye>
-            ) : (
-                <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-                    <Drawer isExpanded={isExpanded}>
-                        <DrawerContent panelContent={panelContent}>
-                            <DrawerContentBody>
-                                <MapStage />
-                                <Collapse onClick={() => setExpanded(true)} />
-                            </DrawerContentBody>
-                        </DrawerContent>
-                    </Drawer>
-                </HotKeys>
-            )}
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">Topology</Text>
+                </TextContent>
+            </PageSection>
+            <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top">
+                <Divider component="div" />
+                <Tabs
+                    activeKey={activeTab}
+                    onSelect={(_, tabIndex) => setActiveTab(tabIndex)}
+                    className="pf-m-page-insets"
+                >
+                    <Tab
+                        eventKey="overview"
+                        title={<TabTitleText>Overview</TabTitleText>}
+                        tabContentId="overview"
+                        tabContentRef={overviewRef}
+                    />
+                    <Tab
+                        eventKey="floor-plan"
+                        title={<TabTitleText>Floor Plan</TabTitleText>}
+                        tabContentId="floor-plan"
+                        tabContentRef={floorPlanRef}
+                    />
+                </Tabs>
+            </PageSection>
+            <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
+                <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
+                    Test
+                </TabContent>
+                <TabContent
+                    eventKey="floor-plan"
+                    id="floor-plan"
+                    ref={floorPlanRef}
+                    aria-label="Floor Plan tab"
+                    className="pf-u-h-100"
+                    hidden
+                >
+                    {topologyIsLoading ? (
+                        <Bullseye>
+                            <EmptyState>
+                                <EmptyStateIcon variant="container" component={Spinner} />
+                                <Title size="lg" headingLevel="h4">
+                                    Loading Topology
+                                </Title>
+                            </EmptyState>
+                        </Bullseye>
+                    ) : (
+                        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
+                            <Drawer isExpanded={isExpanded}>
+                                <DrawerContent panelContent={panelContent}>
+                                    <DrawerContentBody>
+                                        <MapStage />
+                                        <Collapse onClick={() => setExpanded(true)} />
+                                    </DrawerContentBody>
+                                </DrawerContent>
+                            </Drawer>
+                        </HotKeys>
+                    )}
+                </TabContent>
+            </PageSection>
         </AppPage>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index f3742b78..a5a3be32 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -15,7 +15,7 @@ import {
     DEFAULT_RACK_POWER_CAPACITY,
     DEFAULT_RACK_SLOT_CAPACITY,
     MAX_NUM_UNITS_PER_MACHINE,
-} from '../../components/app/map/MapConstants'
+} from '../../components/topologies/map/MapConstants'
 import { fetchAndStoreTopology, denormalizeTopology, updateTopologyOnServer } from './objects'
 import { uuid } from 'uuidv4'
 import { addTopology } from '../../api/topologies'
@@ -45,7 +45,7 @@ export function* onAddTopology({ projectId, duplicateId, name }) {
             topologyToBeCreated = { ...topologyToBeCreated, name }
             delete topologyToBeCreated._id
         } else {
-            topologyToBeCreated = { name: action.name, rooms: [] }
+            topologyToBeCreated = { name, rooms: [] }
         }
 
         const auth = yield getContext('auth')