merge: Integrate v2.1 progress into public repository

This pull request integrates the changes planned for the v2.1 release of
OpenDC into the public Github repository in order to sync the progress
of both repositories.

66 files changed, 2921 insertions, 0 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
new file mode 100644
index 00000000..9bf369e9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -0,0 +1,69 @@
+import { Button } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { useTopology } from '../../data/topology'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { deleteRoom } from '../../redux/actions/topology/room'
+import TableEmptyState from '../util/TableEmptyState'
+
+function RoomTable({ topologyId, onSelect }) {
+    const dispatch = useDispatch()
+    const { status, data: topology } = useTopology(topologyId)
+
+    const onDelete = (room) => dispatch(deleteRoom(room._id))
+
+    const columns = ['Name', 'Tiles', 'Racks']
+    const rows =
+        topology?.rooms.length > 0
+            ? topology.rooms.map((room) => {
+                  const tileCount = room.tiles.length
+                  const rackCount = room.tiles.filter((tile) => tile.rack).length
+                  return [
+                      {
+                          title: (
+                              <Button variant="link" isInline onClick={() => onSelect(room)}>
+                                  {room.name}
+                              </Button>
+                          ),
+                      },
+                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
+                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        topology?.rooms.length > 0
+            ? [
+                  {
+                      title: 'Delete room',
+                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+RoomTable.propTypes = {
+    topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
+}
+
+export default RoomTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
new file mode 100644
index 00000000..2f27749f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useState } from 'react'
+import {
+    Bullseye,
+    Drawer,
+    DrawerContent,
+    DrawerContentBody,
+    EmptyState,
+    EmptyStateIcon,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { configure, HotKeys } from 'react-hotkeys'
+import { KeymapConfiguration } from '../../hotkeys'
+import MapStage from './map/MapStage'
+import Collapse from './map/controls/Collapse'
+import { useSelector } from 'react-redux'
+import TopologySidebar from './sidebar/TopologySidebar'
+
+function TopologyMap() {
+    const topologyIsLoading = useSelector((state) => !state.topology.root)
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    const [isExpanded, setExpanded] = useState(true)
+    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
+
+    // Make sure that holding down a key will generate repeated events
+    configure({
+        ignoreRepeatedEventsWhenKeyHeldDown: false,
+    })
+
+    return 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>
+    )
+}
+
+export default TopologyMap
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
new file mode 100644
index 00000000..213a4868
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -0,0 +1,87 @@
+/*
+ * 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 {
+    Card,
+    CardBody,
+    CardTitle,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Grid,
+    GridItem,
+    Skeleton,
+} from '@patternfly/react-core'
+import React from 'react'
+import { useTopology } from '../../data/topology'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import RoomTable from './RoomTable'
+
+function TopologyOverview({ topologyId, onSelect }) {
+    const { data: topology } = useTopology(topologyId)
+    return (
+        <Grid hasGutter>
+            <GridItem md={2}>
+                <Card>
+                    <CardTitle>Details</CardTitle>
+                    <CardBody>
+                        <DescriptionList>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Name</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {topology?.name ?? <Skeleton screenreaderText="Loading topology" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Last edited</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {topology ? (
+                                        parseAndFormatDateTime(topology.datetimeLastEdited)
+                                    ) : (
+                                        <Skeleton screenreaderText="Loading topology" />
+                                    )}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardTitle>Rooms</CardTitle>
+                    <CardBody>
+                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+TopologyOverview.propTypes = {
+    topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
+}
+
+export default TopologyOverview
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
new file mode 100644
index 00000000..ccf637e5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
+import GrayLayer from './elements/GrayLayer'
+
+function GrayContainer() {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+    return <GrayLayer onClick={onClick} />
+}
+
+export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
new file mode 100644
index 00000000..4c3b2757
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
@@ -0,0 +1,25 @@
+export const MAP_SIZE = 50
+export const TILE_SIZE_IN_PIXELS = 100
+export const TILE_SIZE_IN_METERS = 0.5
+export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
+
+export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
+export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
+
+export const GRID_LINE_WIDTH_IN_PIXELS = 2
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
+export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10
+
+export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3
+export const RACK_FILL_ICON_OPACITY = 0.8
+
+export const MAP_MOVE_PIXELS_PER_EVENT = 20
+export const MAP_SCALE_PER_EVENT = 1.1
+export const MAP_MIN_SCALE = 0.5
+export const MAP_MAX_SCALE = 1.5
+
+export const MAX_NUM_UNITS_PER_MACHINE = 6
+export const DEFAULT_RACK_SLOT_CAPACITY = 42
+export const DEFAULT_RACK_POWER_CAPACITY = 10000
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
new file mode 100644
index 00000000..d8735cf1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -0,0 +1,83 @@
+import React, { useRef, useState, useContext } from 'react'
+import { HotKeys } from 'react-hotkeys'
+import { Stage } from 'react-konva'
+import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
+import { ReactReduxContext } from 'react-redux'
+import useResizeObserver from 'use-resize-observer'
+import { mapContainer } from './MapStage.module.scss'
+import MapLayer from './layers/MapLayer'
+import RoomHoverLayer from './layers/RoomHoverLayer'
+import ObjectHoverLayer from './layers/ObjectHoverLayer'
+import ScaleIndicator from './controls/ScaleIndicator'
+import Toolbar from './controls/Toolbar'
+
+function MapStage() {
+    const reduxContext = useContext(ReactReduxContext)
+    const { ref, width = 100, height = 100 } = useResizeObserver()
+    const stageRef = useRef(null)
+    const [[x, y], setPos] = useState([0, 0])
+    const [scale, setScale] = useState(1)
+
+    const clampScale = (target) => Math.min(Math.max(target, MAP_MIN_SCALE), MAP_MAX_SCALE)
+    const moveWithDelta = (deltaX, deltaY) => setPos(([x, y]) => [x + deltaX, y + deltaY])
+
+    const onZoom = (e) => {
+        e.evt.preventDefault()
+
+        const stage = stageRef.current.getStage()
+        const oldScale = scale
+
+        const pointer = stage.getPointerPosition()
+        const mousePointTo = {
+            x: (pointer.x - x) / oldScale,
+            y: (pointer.y - y) / oldScale,
+        }
+
+        const newScale = clampScale(e.evt.deltaY > 0 ? oldScale * MAP_SCALE_PER_EVENT : oldScale / MAP_SCALE_PER_EVENT)
+
+        setScale(newScale)
+        setPos([pointer.x - mousePointTo.x * newScale, pointer.y - mousePointTo.y * newScale])
+    }
+    const onZoomButton = (zoomIn) =>
+        setScale((scale) => clampScale(zoomIn ? scale * MAP_SCALE_PER_EVENT : scale / MAP_SCALE_PER_EVENT))
+    const onDragEnd = (e) => setPos([e.target.x(), e.target.y()])
+    const onExport = () => {
+        const download = document.createElement('a')
+        download.href = stageRef.current.getStage().toDataURL()
+        download.download = 'opendc-canvas-export-' + Date.now() + '.png'
+        download.click()
+    }
+
+    const handlers = {
+        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
+    }
+
+    return (
+        <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
+            <Stage
+                ref={stageRef}
+                onWheel={onZoom}
+                onDragEnd={onDragEnd}
+                draggable
+                width={width}
+                height={height}
+                scale={{ x: scale, y: scale }}
+                x={x}
+                y={y}
+            >
+                <ReactReduxContext.Provider value={reduxContext}>
+                    <MapLayer />
+                    <RoomHoverLayer />
+                    <ObjectHoverLayer />
+                </ReactReduxContext.Provider>
+            </Stage>
+            <ScaleIndicator scale={scale} />
+            <Toolbar onZoom={onZoomButton} onExport={onExport} />
+        </HotKeys>
+    )
+}
+
+export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
new file mode 100644
index 00000000..d879b4c8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
@@ -0,0 +1,31 @@
+/*!
+ * 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.
+ */
+
+.mapContainer {
+    background-color: var(--pf-global--Color--light-200);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
new file mode 100644
index 00000000..14449a91
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Tile } from '../../../shapes'
+import RackGroup from './groups/RackGroup'
+
+function RackContainer({ tile }) {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    return <RackGroup interactionLevel={interactionLevel} tile={tile} />
+}
+
+RackContainer.propTypes = {
+    tile: Tile,
+}
+
+export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
new file mode 100644
index 00000000..be1f3e45
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const fillFraction = useSelector((state) => {
+        let energyConsumptionTotal = 0
+        const rack = state.topology.racks[state.topology.tiles[tileId].rack]
+        const machineIds = rack.machines
+        machineIds.forEach((machineId) => {
+            if (machineId !== null) {
+                const machine = state.topology.machines[machineId]
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.topology.cpus[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.topology.gpus[id].energyConsumptionW))
+                machine.memories.forEach(
+                    (id) => (energyConsumptionTotal += state.topology.memories[id].energyConsumptionW)
+                )
+                machine.storages.forEach(
+                    (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW)
+                )
+            }
+        })
+
+        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
+    })
+    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
new file mode 100644
index 00000000..0c15d54b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
new file mode 100644
index 00000000..65189891
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
+import RoomGroup from './groups/RoomGroup'
+
+function RoomContainer({ roomId, ...props }) {
+    const state = useSelector((state) => {
+        return {
+            interactionLevel: state.interactionLevel,
+            currentRoomInConstruction: state.construction.currentRoomInConstruction,
+            room: state.topology.rooms[roomId],
+        }
+    })
+    const dispatch = useDispatch()
+    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+}
+
+RoomContainer.propTypes = {
+    roomId: PropTypes.string,
+}
+
+export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
new file mode 100644
index 00000000..411a5ca7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
+import TileGroup from './groups/TileGroup'
+
+function TileContainer({ tileId, ...props }) {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const tile = useSelector((state) => state.topology.tiles[tileId])
+
+    const dispatch = useDispatch()
+    const onClick = (tile) => {
+        if (tile.rack) {
+            dispatch(goFromRoomToRack(tile._id))
+        }
+    }
+    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
+}
+
+TileContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
new file mode 100644
index 00000000..cc0d46b3
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import TopologyGroup from './groups/TopologyGroup'
+
+function TopologyContainer() {
+    const topology = useSelector((state) => state.topology.root)
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
+}
+
+export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
new file mode 100644
index 00000000..143f70c2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import WallGroup from './groups/WallGroup'
+
+function WallContainer({ roomId, ...props }) {
+    const tiles = useSelector((state) => {
+        return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId])
+    })
+    return <WallGroup {...props} tiles={tiles} />
+}
+
+WallContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
new file mode 100644
index 00000000..f54b7c84
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
@@ -0,0 +1,42 @@
+/*
+ * 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 { ChevronLeftIcon } from '@patternfly/react-icons'
+import { collapseContainer } from './Collapse.module.scss'
+import { Button } from '@patternfly/react-core'
+
+function Collapse({ onClick }) {
+    return (
+        <div className={collapseContainer}>
+            <Button variant="tertiary" onClick={onClick}>
+                <ChevronLeftIcon />
+            </Button>
+        </div>
+    )
+}
+
+Collapse.propTypes = {
+    onClick: PropTypes.func,
+}
+
+export default Collapse
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
new file mode 100644
index 00000000..0c1fac94
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
@@ -0,0 +1,55 @@
+/*!
+ * 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.
+ */
+
+.collapseContainer {
+    position: absolute;
+    right: var(--pf-global--spacer--xs);
+    top: 0;
+    bottom: 10%;
+    margin: auto 0;
+    height: 50px;
+
+    button:global(.pf-m-tertiary) {
+        height: 100%;
+        padding: 2px;
+
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
new file mode 100644
index 00000000..58d2ccc9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+import { scaleIndicator } from './ScaleIndicator.module.scss'
+
+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,
+}
+
+export default ScaleIndicator
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
@@ -0,0 +1,10 @@
+.scaleIndicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 50;
+
+    border: solid 2px #212529;
+    border-top: none;
+    border-left: none;
+}
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/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
new file mode 100644
index 00000000..0d505acc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
@@ -0,0 +1,29 @@
+.toolBar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+}
+
+.control {
+    &:global(.pf-m-tertiary) {
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
new file mode 100644
index 00000000..93037b51
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Rect } from 'react-konva'
+import { BACKDROP_COLOR } from '../../../../util/colors'
+import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
+
+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/topologies/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
new file mode 100644
index 00000000..08c687f6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
+import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
+
+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,
+}
+
+export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
new file mode 100644
index 00000000..20c2c6d1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+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,
+    y: PropTypes.number.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    scale: PropTypes.number,
+    onClick: PropTypes.func.isRequired,
+}
+
+export default HoverTile
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
new file mode 100644
index 00000000..7d304b6b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import { Image } from 'react-konva'
+
+const imageCaches = {}
+
+function ImageComponent({ src, x, y, width, height, opacity }) {
+    const [image, setImage] = useState(null)
+
+    useEffect(() => {
+        if (imageCaches[src]) {
+            setImage(imageCaches[src])
+            return
+        }
+
+        const image = new window.Image()
+        image.src = src
+        image.onload = () => {
+            setImage(image)
+            imageCaches[src] = image
+        }
+    }, [src])
+
+    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
+}
+
+ImageComponent.propTypes = {
+    src: PropTypes.string.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    opacity: PropTypes.number.isRequired,
+}
+
+export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
new file mode 100644
index 00000000..aa284944
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Rect } from 'react-konva'
+import {
+    RACK_ENERGY_BAR_BACKGROUND_COLOR,
+    RACK_ENERGY_BAR_FILL_COLOR,
+    RACK_SPACE_BAR_BACKGROUND_COLOR,
+    RACK_SPACE_BAR_FILL_COLOR,
+} from '../../../../util/colors'
+import {
+    OBJECT_BORDER_WIDTH_IN_PIXELS,
+    OBJECT_MARGIN_IN_PIXELS,
+    RACK_FILL_ICON_OPACITY,
+    RACK_FILL_ICON_WIDTH,
+    TILE_SIZE_IN_PIXELS,
+} from '../MapConstants'
+import ImageComponent from './ImageComponent'
+
+function RackFillBar({ positionX, positionY, type, fillFraction }) {
+    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
+    const x =
+        positionX * TILE_SIZE_IN_PIXELS +
+        OBJECT_MARGIN_IN_PIXELS +
+        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
+    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
+    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
+    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
+
+    const fractionHeight = fillFraction * fullHeight
+    const fractionY =
+        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
+
+    return (
+        <Group>
+            <Rect
+                x={x}
+                y={startY}
+                width={width}
+                height={fullHeight}
+                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
+            />
+            <Rect
+                x={x}
+                y={fractionY}
+                width={width}
+                height={fractionHeight}
+                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
+            />
+            <ImageComponent
+                src={'/img/topology/rack-' + type + '-icon.png'}
+                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                width={RACK_FILL_ICON_WIDTH}
+                height={RACK_FILL_ICON_WIDTH}
+                opacity={RACK_FILL_ICON_OPACITY}
+            />
+        </Group>
+    )
+}
+
+RackFillBar.propTypes = {
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    type: PropTypes.string.isRequired,
+    fillFraction: PropTypes.number.isRequired,
+}
+
+export default RackFillBar
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/topologies/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..186c2b3a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Line } from 'react-konva'
+import { TILE_PLUS_COLOR } from '../../../../util/colors'
+import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function TilePlusIcon({ x, y, scale = 1 }) {
+    const linePoints = [
+        [
+            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            y + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            y + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+        ],
+        [
+            x + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            x + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+        ],
+    ]
+    return (
+        <Group>
+            {linePoints.map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+}
+
+TilePlusIcon.propTypes = {
+    x: PropTypes.number,
+    y: PropTypes.number,
+    scale: PropTypes.number,
+}
+
+export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
new file mode 100644
index 00000000..4f18813e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Line } from 'react-konva'
+import { WallSegment as WallSegmentShape } from '../../../../shapes'
+import { WALL_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
+
+function WallSegment({ wallSegment }) {
+    let points
+    if (wallSegment.isHorizontal) {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+        ]
+    } else {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+        ]
+    }
+
+    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
+}
+
+WallSegment.propTypes = {
+    wallSegment: WallSegmentShape,
+}
+
+export default WallSegment
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
new file mode 100644
index 00000000..d66a18de
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Group, Line } from 'react-konva'
+import { GRID_COLOR } from '../../../../util/colors'
+import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+    index * TILE_SIZE_IN_PIXELS,
+])
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
+    index * TILE_SIZE_IN_PIXELS,
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+])
+
+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/topologies/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
new file mode 100644
index 00000000..46030135
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
+import TileObject from '../elements/TileObject'
+import RackSpaceFillContainer from '../RackSpaceFillContainer'
+import RackEnergyFillContainer from '../RackEnergyFillContainer'
+
+function RackGroup({ tile }) {
+    return (
+        <Group>
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
+            <Group>
+                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+            </Group>
+        </Group>
+    )
+}
+
+RackGroup.propTypes = {
+    tile: Tile,
+}
+
+export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
new file mode 100644
index 00000000..a42e7bb7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { InteractionLevel, Room } from '../../../../shapes'
+import GrayContainer from '../GrayContainer'
+import TileContainer from '../TileContainer'
+import WallContainer from '../WallContainer'
+
+function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick }) {
+    if (currentRoomInConstruction === room._id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tiles.map((tileId) => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
+                ))}
+            </Group>
+        )
+    }
+
+    return (
+        <Group onClick={onClick}>
+            {(() => {
+                if (
+                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
+                    interactionLevel.roomId === room._id
+                ) {
+                    return [
+                        room.tiles
+                            .filter((tileId) => tileId !== interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                        <GrayContainer key={-1} />,
+                        room.tiles
+                            .filter((tileId) => tileId === interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                    ]
+                } else {
+                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
+                }
+            })()}
+            <WallContainer roomId={room._id} />
+        </Group>
+    )
+}
+
+RoomGroup.propTypes = {
+    room: Room,
+    interactionLevel: InteractionLevel,
+    currentRoomInConstruction: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
new file mode 100644
index 00000000..f2084017
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
+import RoomTile from '../elements/RoomTile'
+import RackContainer from '../RackContainer'
+
+function TileGroup({ tile, newTile, onClick }) {
+    let tileObject
+    if (tile.rack) {
+        tileObject = <RackContainer tile={tile} />
+    } else {
+        tileObject = null
+    }
+
+    let color = ROOM_DEFAULT_COLOR
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR
+    }
+
+    return (
+        <Group onClick={() => onClick(tile)}>
+            <RoomTile tile={tile} color={color} />
+            {tileObject}
+        </Group>
+    )
+}
+
+TileGroup.propTypes = {
+    tile: Tile,
+    newTile: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
new file mode 100644
index 00000000..011dcf34
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Group } from 'react-konva'
+import { InteractionLevel, Topology } from '../../../../shapes'
+import RoomContainer from '../RoomContainer'
+import GrayContainer from '../GrayContainer'
+
+function TopologyGroup({ topology, interactionLevel }) {
+    if (!topology) {
+        return <Group />
+    }
+
+    if (interactionLevel.mode === 'BUILDING') {
+        return (
+            <Group>
+                {topology.rooms.map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            </Group>
+        )
+    }
+
+    return (
+        <Group>
+            {topology.rooms
+                .filter((roomId) => roomId !== interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
+            {topology.rooms
+                .filter((roomId) => roomId === interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+        </Group>
+    )
+}
+
+TopologyGroup.propTypes = {
+    topology: Topology,
+    interactionLevel: InteractionLevel,
+}
+
+export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
new file mode 100644
index 00000000..6cbd1cd0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { deriveWallLocations } from '../../../../util/tile-calculations'
+import WallSegment from '../elements/WallSegment'
+
+function WallGroup({ tiles }) {
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment} />
+            ))}
+        </Group>
+    )
+}
+
+WallGroup.propTypes = {
+    tiles: PropTypes.arrayOf(Tile).isRequired,
+}
+
+export default WallGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..2b1060c0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types'
+import React, { useMemo, useState } from 'react'
+import { Layer } from 'react-konva/lib/ReactKonva'
+import HoverTile from '../elements/HoverTile'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+import { useEffectRef } from '../../../../util/effect-ref'
+
+function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
+    const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
+
+    const layerRef = useEffectRef((layer) => {
+        if (!layer) {
+            return
+        }
+
+        const stage = layer.getStage()
+
+        // Transform used to convert mouse coordinates to world coordinates
+        const transform = stage.getAbsoluteTransform().copy()
+        transform.invert()
+
+        stage.on('mousemove.hover', () => {
+            const { x, y } = transform.point(stage.getPointerPosition())
+            setPos([x, y])
+        })
+        return () => stage.off('mousemove.hover')
+    })
+
+    const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
+    const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
+    const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
+
+    if (!isEnabled) {
+        return <Layer />
+    }
+
+    const x = gridX * TILE_SIZE_IN_PIXELS
+    const y = gridY * TILE_SIZE_IN_PIXELS
+
+    return (
+        <Layer opacity={0.6} ref={layerRef}>
+            <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
+            {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
+        </Layer>
+    )
+}
+
+HoverLayerComponent.propTypes = {
+    isEnabled: PropTypes.bool.isRequired,
+    isValid: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
+    children: PropTypes.node,
+}
+
+export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
new file mode 100644
index 00000000..c902532b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { Group, Layer } from 'react-konva'
+import Backdrop from '../elements/Backdrop'
+import TopologyContainer from '../TopologyContainer'
+import GridGroup from '../groups/GridGroup'
+
+function MapLayer() {
+    return (
+        <Layer>
+            <Group>
+                <Backdrop />
+                <TopologyContainer />
+                <GridGroup />
+            </Group>
+        </Layer>
+    )
+}
+
+export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
new file mode 100644
index 00000000..1f00de36
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addRackToTile } from '../../../../redux/actions/topology/room'
+import { findTileWithPosition } from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
+import TilePlusIcon from '../elements/TilePlusIcon'
+
+function ObjectHoverLayer() {
+    const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
+    const isValid = useSelector((state) => (x, y) => {
+        if (state.interactionLevel.mode !== 'ROOM') {
+            return false
+        }
+
+        const currentRoom = state.topology.rooms[state.interactionLevel.roomId]
+        const tiles = currentRoom.tiles.map((tileId) => state.topology.tiles[tileId])
+        const tile = findTileWithPosition(tiles, x, y)
+
+        return !(tile === null || tile.rack)
+    })
+
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(addRackToTile(x, y))
+    return (
+        <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid}>
+            <TilePlusIcon />
+        </HoverLayerComponent>
+    )
+}
+
+export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
new file mode 100644
index 00000000..5e351691
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
+import {
+    deriveValidNextTilePositions,
+    findPositionInPositions,
+    findPositionInRooms,
+} from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
+
+function RoomHoverLayer() {
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
+    const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isValid = useSelector((state) => (x, y) => {
+        const newRoom = { ...state.topology.rooms[state.construction.currentRoomInConstruction] }
+        const oldRooms = Object.keys(state.topology.rooms)
+            .map((id) => ({ ...state.topology.rooms[id] }))
+            .filter(
+                (room) =>
+                    state.topology.root.rooms.indexOf(room._id) !== -1 &&
+                    room._id !== state.construction.currentRoomInConstruction
+            )
+
+        ;[...oldRooms, newRoom].forEach((room) => {
+            room.tiles = room.tiles.map((tileId) => state.topology.tiles[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 <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
+}
+
+export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
new file mode 100644
index 00000000..ececd07b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Button, TextInput } from '@patternfly/react-core'
+import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
+
+function NameComponent({ name, onEdit }) {
+    const [isEditing, setEditing] = useState(false)
+    const nameInput = useRef(null)
+
+    const onCancel = () => {
+        nameInput.current.value = name
+        setEditing(false)
+    }
+
+    const onSubmit = (event) => {
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+        if (name) {
+            onEdit(name)
+        }
+
+        setEditing(false)
+    }
+
+    return (
+        <form
+            className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
+            onSubmit={onSubmit}
+        >
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
+                    {name}
+                </div>
+                <div className="pf-c-inline-edit__action pf-m-enable-editable">
+                    <Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
+                        <PencilAltIcon />
+                    </Button>
+                </div>
+            </div>
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__input">
+                    <TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
+                </div>
+                <div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
+                    <div className="pf-c-inline-edit__action pf-m-valid">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
+                            <CheckIcon />
+                        </Button>
+                    </div>
+                    <div className="pf-c-inline-edit__action">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
+                            <TimesIcon />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    )
+}
+
+NameComponent.propTypes = {
+    name: PropTypes.string,
+    onEdit: PropTypes.func,
+}
+
+export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
new file mode 100644
index 00000000..5d9340b2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InteractionLevel } from '../../../shapes'
+import BuildingSidebar from './building/BuildingSidebar'
+import {
+    Button,
+    DrawerActions,
+    DrawerCloseButton,
+    DrawerHead,
+    DrawerPanelBody,
+    DrawerPanelContent,
+    Flex,
+    Title,
+} from '@patternfly/react-core'
+import { AngleLeftIcon } from '@patternfly/react-icons'
+import { useDispatch } from 'react-redux'
+import { 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',
+    ROOM: 'Room',
+    RACK: 'Rack',
+    MACHINE: 'Machine',
+}
+
+function TopologySidebar({ interactionLevel, onClose }) {
+    let sidebarContent
+
+    switch (interactionLevel.mode) {
+        case 'BUILDING':
+            sidebarContent = <BuildingSidebar />
+            break
+        case 'ROOM':
+            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
+            break
+        case 'RACK':
+            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
+            break
+        case 'MACHINE':
+            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
+            break
+        default:
+            sidebarContent = 'Missing Content'
+    }
+
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+
+    return (
+        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
+            <DrawerHead>
+                <Flex>
+                    <Button
+                        variant="tertiary"
+                        isSmall
+                        className={backButton}
+                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
+                    >
+                        <AngleLeftIcon />
+                    </Button>
+                    <Title className="pf-u-align-self-center" headingLevel="h1">
+                        {name[interactionLevel.mode]}
+                    </Title>
+                </Flex>
+                <DrawerActions>
+                    <DrawerCloseButton onClose={onClose} />
+                </DrawerActions>
+            </DrawerHead>
+            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
+        </DrawerPanelContent>
+    )
+}
+
+TopologySidebar.propTypes = {
+    interactionLevel: InteractionLevel,
+    onClose: PropTypes.func,
+}
+
+export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
new file mode 100644
index 00000000..45dc98da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
@@ -0,0 +1,37 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.backButton {
+    &:global(.pf-c-button) {
+        align-self: center;
+        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+        color: var(--pf-global--Color--400);
+
+        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+
+        &:hover,
+        &:focus {
+            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
new file mode 100644
index 00000000..5fcd46be
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import NewRoomConstructionContainer from './NewRoomConstructionContainer'
+
+function BuildingSidebar() {
+    return <NewRoomConstructionContainer />
+}
+
+export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..9fc85d0c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+
+function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
+    if (currentRoomInConstruction === '-1') {
+        return (
+            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
+                Construct a new room
+            </Button>
+        )
+    }
+    return (
+        <Toolbar
+            inset={{
+                default: 'insetNone',
+            }}
+        >
+            <ToolbarContent>
+                <ToolbarGroup>
+                    <ToolbarItem>
+                        <Button icon={<CheckIcon />} onClick={onFinish}>
+                            Finalize new room
+                        </Button>
+                    </ToolbarItem>
+                    <ToolbarItem widths={{ default: '100%' }}>
+                        <Button isBlock variant="secondary" onClick={onCancel}>
+                            Cancel
+                        </Button>
+                    </ToolbarItem>
+                </ToolbarGroup>
+            </ToolbarContent>
+        </Toolbar>
+    )
+}
+
+NewRoomConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onFinish: PropTypes.func,
+    onCancel: PropTypes.func,
+    currentRoomInConstruction: PropTypes.string,
+}
+
+export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..c149b224
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+    cancelNewRoomConstruction,
+    finishNewRoomConstruction,
+    startNewRoomConstruction,
+} from '../../../../redux/actions/topology/building'
+import NewRoomConstructionComponent from './NewRoomConstructionComponent'
+
+function NewRoomConstructionButton() {
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const dispatch = useDispatch()
+
+    return (
+        <NewRoomConstructionComponent
+            onStart={() => dispatch(startNewRoomConstruction())}
+            onFinish={() => dispatch(finishNewRoomConstruction())}
+            onCancel={() => dispatch(cancelNewRoomConstruction())}
+            currentRoomInConstruction={currentRoomInConstruction}
+        />
+    )
+}
+
+export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
new file mode 100644
index 00000000..a4b9457b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -0,0 +1,59 @@
+/*
+ * 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, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { Button } from '@patternfly/react-core'
+import { TrashIcon } from '@patternfly/react-icons'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteMachine } from '../../../../redux/actions/topology/machine'
+
+function DeleteMachine({ machineId }) {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine(machineId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this machine
+            </Button>
+            <ConfirmationModal
+                title="Delete this machine"
+                message="Are you sure you want to delete this machine?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteMachine.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
+export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
new file mode 100644
index 00000000..9268f615
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import UnitTabsComponent from './UnitTabsComponent'
+import DeleteMachine from './DeleteMachine'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function MachineSidebar({ tileId, position }) {
+    const machine = useSelector(({ topology }) => {
+        const rack = topology.racks[topology.tiles[tileId].rack]
+        return topology.machines[rack.machines[position - 1]]
+    })
+    const machineId = machine._id
+    return (
+        <div>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        Machine at position {machine.position}
+                    </TextListItem>
+                </TextList>
+
+                <Title headingLevel="h2">Actions</Title>
+                <DeleteMachine machineId={machineId} />
+
+                <Title headingLevel="h2">Units</Title>
+            </TextContent>
+            <div className="pf-u-h-100">
+                <UnitTabsComponent machineId={machineId} />
+            </div>
+        </div>
+    )
+}
+
+MachineSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+    position: PropTypes.number.isRequired,
+}
+
+export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
new file mode 100644
index 00000000..88591208
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+
+function UnitAddComponent({ units, onAdd }) {
+    const [isOpen, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <InputGroup>
+            <Select
+                variant={SelectVariant.single}
+                placeholderText="Select a unit"
+                aria-label="Select Unit"
+                onToggle={() => setOpen(!isOpen)}
+                isOpen={isOpen}
+                onSelect={(_, selection) => {
+                    setSelected(selection)
+                    setOpen(false)
+                }}
+                selections={selected}
+            >
+                {units.map((unit) => (
+                    <SelectOption value={unit._id} key={unit._id}>
+                        {unit.name}
+                    </SelectOption>
+                ))}
+            </Select>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+                Add
+            </Button>
+        </InputGroup>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
new file mode 100644
index 00000000..6b136120
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitAddComponent from './UnitAddComponent'
+import { addUnit } from '../../../../redux/actions/topology/machine'
+
+function UnitAddContainer({ machineId, unitType }) {
+    const units = useSelector((state) => Object.values(state.topology[unitType]))
+    const dispatch = useDispatch()
+
+    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
+
+    return <UnitAddComponent onAdd={onAdd} units={units} />
+}
+
+UnitAddContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
new file mode 100644
index 00000000..daa3e7a7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Popover,
+    Title,
+} from '@patternfly/react-core'
+import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../shapes'
+
+function UnitInfo({ unit, unitType }) {
+    if (unitType === 'cpu' || unitType === 'gpu') {
+        return (
+            <DescriptionList>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+                </DescriptionListGroup>
+            </DescriptionList>
+        )
+    }
+
+    return (
+        <DescriptionList>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Speed</DescriptionListTerm>
+                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Capacity</DescriptionListTerm>
+                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+            </DescriptionListGroup>
+        </DescriptionList>
+    )
+}
+
+UnitInfo.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
+}
+
+function UnitListComponent({ unitType, units, onDelete }) {
+    if (units.length === 0) {
+        return (
+            <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h5" size="lg">
+                    No units found
+                </Title>
+                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <DataList aria-label="Machine Units" isCompact>
+            {units.map((unit, index) => (
+                <DataListItem key={index}>
+                    <DataListItemRow>
+                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
+                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                            <Popover
+                                headerContent="Unit Information"
+                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
+                            >
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <InfoIcon />
+                                </Button>
+                            </Popover>
+                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
+                                <TrashIcon />
+                            </Button>
+                        </DataListAction>
+                    </DataListItemRow>
+                </DataListItem>
+            ))}
+        </DataList>
+    )
+}
+
+UnitListComponent.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
+    onDelete: PropTypes.func,
+}
+
+export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
new file mode 100644
index 00000000..6dcc414f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitListComponent from './UnitListComponent'
+import { deleteUnit } from '../../../../redux/actions/topology/machine'
+
+function UnitListContainer({ machineId, unitType }) {
+    const dispatch = useDispatch()
+    const units = useSelector((state) => {
+        const machine = state.topology.machines[machineId]
+        return machine[unitType].map((id) => state.topology[unitType][id])
+    })
+
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+
+    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
+}
+
+UnitListContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..b800e9d4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
+import UnitAddContainer from './UnitAddContainer'
+import UnitListContainer from './UnitListContainer'
+
+function UnitTabsComponent({ machineId }) {
+    const [activeTab, setActiveTab] = useState('cpu-units')
+
+    return (
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="cpus" />
+                <UnitListContainer machineId={machineId} unitType="cpus" />
+            </Tab>
+            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="gpus" />
+                <UnitListContainer machineId={machineId} unitType="gpus" />
+            </Tab>
+            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="memories" />
+                <UnitListContainer machineId={machineId} unitType="memories" />
+            </Tab>
+            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="storages" />
+                <UnitListContainer machineId={machineId} unitType="storages" />
+            </Tab>
+        </Tabs>
+    )
+}
+
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
+export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
new file mode 100644
index 00000000..e944c2e8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
+import { addPrefab } from '../../../../api/prefabs'
+
+function AddPrefab({ tileId }) {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(addPrefab('name', tileId))
+    return (
+        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
+            Save this rack to a prefab
+        </Button>
+    )
+}
+
+AddPrefab.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..0583a7a4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -0,0 +1,60 @@
+/*
+ * 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, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+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()
+    const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.topology.tiles[tileId].rack)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack(tileId, rackId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRackContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
new file mode 100644
index 00000000..921622d6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Image from 'next/image'
+import { Flex, Label } from '@patternfly/react-core'
+import { Machine } from '../../../../shapes'
+
+const UnitIcon = ({ id, type }) => (
+    <Image
+        src={'/img/topology/' + id + '-icon.png'}
+        alt={'Machine contains ' + type + ' units'}
+        layout="intrinsic"
+        height={24}
+        width={24}
+    />
+)
+
+UnitIcon.propTypes = {
+    id: PropTypes.string,
+    type: PropTypes.string,
+}
+
+function MachineComponent({ machine, onClick }) {
+    const hasNoUnits =
+        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
+
+    return (
+        <Flex onClick={() => onClick()}>
+            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+            {hasNoUnits ? (
+                <Label variant="outline" color="orange">
+                    Machine with no units
+                </Label>
+            ) : undefined}
+        </Flex>
+    )
+}
+
+MachineComponent.propTypes = {
+    machine: Machine.isRequired,
+    onClick: PropTypes.func,
+}
+
+export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
new file mode 100644
index 00000000..de7a2140
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import MachineComponent from './MachineComponent'
+import {
+    Badge,
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+} from '@patternfly/react-core'
+import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
+import { Machine } from '../../../../shapes'
+
+function MachineListComponent({ machines = [], onSelect, onAdd }) {
+    return (
+        <DataList aria-label="Rack Units">
+            {machines.map((machine, index) =>
+                machine ? (
+                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="primary content">
+                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <AngleRightIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                ) : (
+                    <DataListItem key={index}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="add" className="text-secondary">
+                                        Empty Slot
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
+                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
+                                    <PlusIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                )
+            )}
+        </DataList>
+    )
+}
+
+MachineListComponent.propTypes = {
+    machines: PropTypes.arrayOf(Machine),
+    onSelect: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
new file mode 100644
index 00000000..619bb4e2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import MachineListComponent from './MachineListComponent'
+import { goFromRackToMachine } from '../../../../redux/actions/interaction-level'
+import { addMachine } from '../../../../redux/actions/topology/rack'
+
+function MachineListContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.topology.machines[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(rack._id, index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
+    )
+}
+
+MachineListContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
new file mode 100644
index 00000000..30f38cce
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRackName } from '../../../../redux/actions/topology/rack'
+
+const RackNameContainer = ({ tileId }) => {
+    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(_id, name))
+        }
+    }
+    return <NameComponent name={rackName} onEdit={callback} />
+}
+
+RackNameContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
new file mode 100644
index 00000000..8f6ff135
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import RackNameContainer from './RackNameContainer'
+import AddPrefab from './AddPrefab'
+import DeleteRackContainer from './DeleteRackContainer'
+import MachineListContainer from './MachineListContainer'
+import {
+    Skeleton,
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function RackSidebar({ tileId }) {
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+
+    return (
+        <div className={sidebarContainer}>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem
+                        component={TextListItemVariants.dt}
+                        className="pf-u-display-inline-flex pf-u-align-items-center"
+                    >
+                        Name
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        <RackNameContainer tileId={tileId} />
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
+                    </TextListItem>
+                </TextList>
+                <Title headingLevel="h2">Actions</Title>
+                <AddPrefab tileId={tileId} />
+                <DeleteRackContainer tileId={tileId} />
+
+                <Title headingLevel="h2">Slots</Title>
+            </TextContent>
+            <div className={machineListContainer}>
+                <MachineListContainer tileId={tileId} />
+            </div>
+        </div>
+    )
+}
+
+RackSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
new file mode 100644
index 00000000..6f258aec
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
@@ -0,0 +1,12 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 10px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..29b8f78a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
@@ -0,0 +1,59 @@
+/*
+ * 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, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+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'
+
+function DeleteRoomContainer({ roomId }) {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom(roomId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
new file mode 100644
index 00000000..7a278cd6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { 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'
+
+function EditRoomContainer({ roomId }) {
+    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(startRoomEdit(roomId))
+    const onFinish = () => dispatch(finishRoomEdit())
+
+    return isEditing ? (
+        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
+            Finish editing room
+        </Button>
+    ) : (
+        <Button
+            variant="tertiary"
+            icon={<PencilAltIcon />}
+            isBlock
+            disabled={isInRackConstructionMode}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+            className="pf-u-mb-sm"
+        >
+            Edit the tiles of this room
+        </Button>
+    )
+}
+
+EditRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
new file mode 100644
index 00000000..a384d5d5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button } from '@patternfly/react-core'
+import { PlusIcon, TimesIcon } from '@patternfly/react-icons'
+
+const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
+    if (inRackConstructionMode) {
+        return (
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
+                Stop rack construction
+            </Button>
+        )
+    }
+
+    return (
+        <Button
+            icon={<PlusIcon />}
+            isBlock
+            isDisabled={isEditingRoom}
+            onClick={() => (isEditingRoom ? undefined : onStart())}
+            className="pf-u-mb-sm"
+        >
+            Start rack construction
+        </Button>
+    )
+}
+
+RackConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onStop: PropTypes.func,
+    inRackConstructionMode: PropTypes.bool,
+    isEditingRoom: PropTypes.bool,
+}
+
+export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
new file mode 100644
index 00000000..e04287a5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { startRackConstruction, stopRackConstruction } from '../../../../redux/actions/topology/room'
+import RackConstructionComponent from './RackConstructionComponent'
+
+function RackConstructionContainer(props) {
+    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+
+    const dispatch = useDispatch()
+    const onStart = () => dispatch(startRackConstruction())
+    const onStop = () => dispatch(stopRackConstruction())
+    return (
+        <RackConstructionComponent
+            {...props}
+            inRackConstructionMode={isRackConstructionMode}
+            isEditingRoom={isEditingRoom}
+            onStart={onStart}
+            onStop={onStop}
+        />
+    )
+}
+
+export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
new file mode 100644
index 00000000..fb52d826
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRoomName } from '../../../../redux/actions/topology/room'
+
+function RoomName({ roomId }) {
+    const { name: roomName, _id } = useSelector((state) => state.topology.rooms[roomId])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(_id, name))
+        }
+    }
+    return <NameComponent name={roomName} onEdit={callback} />
+}
+
+RoomName.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomName
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
new file mode 100644
index 00000000..6ad489e0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import RoomName from './RoomName'
+import RackConstructionContainer from './RackConstructionContainer'
+import EditRoomContainer from './EditRoomContainer'
+import DeleteRoomContainer from './DeleteRoomContainer'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+
+const RoomSidebar = ({ roomId }) => {
+    return (
+        <TextContent>
+            <Title headingLevel="h2">Details</Title>
+            <TextList component={TextListVariants.dl}>
+                <TextListItem
+                    component={TextListItemVariants.dt}
+                    className="pf-u-display-inline-flex pf-u-align-items-center"
+                >
+                    Name
+                </TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>
+                    <RoomName roomId={roomId} />
+                </TextListItem>
+            </TextList>
+            <Title headingLevel="h2">Construction</Title>
+            <RackConstructionContainer />
+            <EditRoomContainer roomId={roomId} />
+            <DeleteRoomContainer roomId={roomId} />
+        </TextContent>
+    )
+}
+
+RoomSidebar.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomSidebar