From 0ffde21b0337c606e2d0ece5bd5434a930a87dcd Mon Sep 17 00:00:00 2001
From: vincent van beek <vincent@vlogic.nl>
Date: Thu, 26 Mar 2026 14:02:54 +0100
Subject: Use Quarkus Quinoa for serving web UI (#391)

* refactor(web): Migrate to Quarkus 3

This commit updates the OpenDC web server to use Quarkus 3, which
changes annotations to use the Jakarta namespace for annotations.

* refactor(web): Configure runtime variables for web UI

This commit updates the web UI to propagate runtime variables via the
next-runtime-env package. Before, we would need to replace the variables
in the generated sources by Next.js, next-runtime-env works by loading a
JavaScript file when opening the OpenDC web UI which contains the
configuration of the web app.

* refactor(web): Migrate to Quarkus Quinoa

This commit updates the OpenDC web server to make use of Quarkus Quinoa
for serving the web UI. This allows us to deprecate the complex Quarkus
extension for serving the web UI.

* refactor(web): Move web UI into Quarkus web app

This commit moves the web UI into the Quarkus web server module to
ensure we follow Quarkus Quinoa's conventions.

* refactor(web): Merge Quarkus extension into single module

This commit merges the existing Quarkus extensions into a single module
to prevent build complexity.

* refactor(web): Migrate web proto to Java

This commit migrates the web protocol to Java and removes the dependency
on Jandex Gradle.

* refactor(web): Migrate to Quarkus 3

This commit updates the OpenDC web server to use Quarkus 3, which
changes annotations to use the Jakarta namespace for annotations.

* enable DB schema migration on DEV server

* webui is not needed anymore

* remove MAINTAINERS is depricated

* fix quarkus.quinoa properties

* revert properties change, install npm in docker image to allow building the frontend

* pin postgres version, this is a best practice. Fix some properties the old ones are depricated. Added properties for local testing

* fix build error

* :opendc-web:opendc-web-proto:spotlessApply

* fix database schema

---------

Co-authored-by: Fabian Mastenbroek <mail.fabianm@gmail.com>
---
 .../main/webui/components/topologies/RoomTable.js  |  74 ++++++++++++++
 .../webui/components/topologies/TopologyMap.js     |  69 +++++++++++++
 .../components/topologies/TopologyOverview.js      |  92 +++++++++++++++++
 .../components/topologies/map/GrayContainer.js     |  34 +++++++
 .../components/topologies/map/MapConstants.js      |  25 +++++
 .../webui/components/topologies/map/MapStage.js    |  83 +++++++++++++++
 .../components/topologies/map/MapStage.module.css  |  29 ++++++
 .../components/topologies/map/RackContainer.js     |  37 +++++++
 .../topologies/map/RackEnergyFillContainer.js      |  36 +++++++
 .../topologies/map/RackSpaceFillContainer.js       |  42 ++++++++
 .../components/topologies/map/RoomContainer.js     |  54 ++++++++++
 .../components/topologies/map/TileContainer.js     |  50 +++++++++
 .../components/topologies/map/TopologyContainer.js |  34 +++++++
 .../components/topologies/map/WallContainer.js     |  39 +++++++
 .../components/topologies/map/controls/Collapse.js |  42 ++++++++
 .../topologies/map/controls/Collapse.module.css    |  55 ++++++++++
 .../topologies/map/controls/ScaleIndicator.js      |  18 ++++
 .../map/controls/ScaleIndicator.module.css         |  10 ++
 .../components/topologies/map/controls/Toolbar.js  |  33 ++++++
 .../topologies/map/controls/Toolbar.module.css     |  27 +++++
 .../components/topologies/map/elements/Backdrop.js |  10 ++
 .../topologies/map/elements/GrayLayer.js           |  24 +++++
 .../topologies/map/elements/HoverTile.js           |  30 ++++++
 .../topologies/map/elements/ImageComponent.js      |  37 +++++++
 .../topologies/map/elements/RackFillBar.js         |  68 +++++++++++++
 .../components/topologies/map/elements/RoomTile.js |  24 +++++
 .../topologies/map/elements/TileObject.js          |  27 +++++
 .../topologies/map/elements/TilePlusIcon.js        |  44 ++++++++
 .../topologies/map/elements/WallSegment.js         |  32 ++++++
 .../components/topologies/map/groups/GridGroup.js  |  36 +++++++
 .../components/topologies/map/groups/RackGroup.js  |  25 +++++
 .../components/topologies/map/groups/RoomGroup.js  |  52 ++++++++++
 .../components/topologies/map/groups/TileGroup.js  |  36 +++++++
 .../topologies/map/groups/TopologyGroup.js         |  44 ++++++++
 .../components/topologies/map/groups/WallGroup.js  |  22 ++++
 .../topologies/map/layers/HoverLayerComponent.js   |  55 ++++++++++
 .../components/topologies/map/layers/MapLayer.js   |  41 ++++++++
 .../topologies/map/layers/ObjectHoverLayer.js      |  51 ++++++++++
 .../topologies/map/layers/RoomHoverLayer.js        |  59 +++++++++++
 .../components/topologies/sidebar/NameComponent.js |  69 +++++++++++++
 .../topologies/sidebar/TopologySidebar.js          |  83 +++++++++++++++
 .../topologies/sidebar/TopologySidebar.module.css  |  35 +++++++
 .../topologies/sidebar/building/BuildingSidebar.js |   8 ++
 .../building/NewRoomConstructionComponent.js       |  46 +++++++++
 .../building/NewRoomConstructionContainer.js       |  46 +++++++++
 .../topologies/sidebar/machine/DeleteMachine.js    |  59 +++++++++++
 .../topologies/sidebar/machine/MachineSidebar.js   |  55 ++++++++++
 .../topologies/sidebar/machine/UnitAddComponent.js |  42 ++++++++
 .../topologies/sidebar/machine/UnitAddContainer.js |  44 ++++++++
 .../sidebar/machine/UnitListComponent.js           | 113 +++++++++++++++++++++
 .../sidebar/machine/UnitListContainer.js           |  47 +++++++++
 .../sidebar/machine/UnitTabsComponent.js           |  36 +++++++
 .../topologies/sidebar/machine/UnitType.js         |  25 +++++
 .../topologies/sidebar/rack/AddPrefab.js           |  41 ++++++++
 .../topologies/sidebar/rack/DeleteRackContainer.js |  60 +++++++++++
 .../topologies/sidebar/rack/MachineComponent.js    |  40 ++++++++
 .../sidebar/rack/MachineListComponent.js           |  80 +++++++++++++++
 .../sidebar/rack/MachineListContainer.js           |  56 ++++++++++
 .../topologies/sidebar/rack/RackNameContainer.js   |  22 ++++
 .../topologies/sidebar/rack/RackSidebar.js         |  58 +++++++++++
 .../topologies/sidebar/rack/RackSidebar.module.css |  14 +++
 .../topologies/sidebar/room/DeleteRoomContainer.js |  59 +++++++++++
 .../topologies/sidebar/room/EditRoomContainer.js   |  61 +++++++++++
 .../sidebar/room/RackConstructionComponent.js      |  35 +++++++
 .../sidebar/room/RackConstructionContainer.js      |  46 +++++++++
 .../components/topologies/sidebar/room/RoomName.js |  44 ++++++++
 .../topologies/sidebar/room/RoomSidebar.js         |  43 ++++++++
 67 files changed, 2967 insertions(+)
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/RoomTable.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyMap.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyOverview.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/GrayContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapConstants.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackEnergyFillContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackSpaceFillContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RoomContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TileContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TopologyContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/WallContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Collapse.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Collapse.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/Backdrop.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/GrayLayer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/HoverTile.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/ImageComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/RackFillBar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/RoomTile.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/TileObject.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/TilePlusIcon.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/WallSegment.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/GridGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/RackGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/RoomGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/TileGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/TopologyGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/WallGroup.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/HoverLayerComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/MapLayer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/ObjectHoverLayer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/RoomHoverLayer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/NameComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/TopologySidebar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/TopologySidebar.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/BuildingSidebar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/DeleteMachine.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/MachineSidebar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitTabsComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitType.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/DeleteRackContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineListComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineListContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackNameContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.module.css
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/DeleteRoomContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/EditRoomContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RoomName.js
 create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RoomSidebar.js

(limited to 'opendc-web/opendc-web-server/src/main/webui/components/topologies')

diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/RoomTable.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/RoomTable.js
new file mode 100644
index 00000000..7f7b4171
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/RoomTable.js
@@ -0,0 +1,74 @@
+import { Button, Bullseye } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { useTopology } from '../../data/topology'
+import { Tr, Th, Thead, TableComposable, Td, ActionsColumn, Tbody } from '@patternfly/react-table'
+import { deleteRoom } from '../../redux/actions/topology/room'
+import TableEmptyState from '../util/TableEmptyState'
+
+function RoomTable({ projectId, topologyId, onSelect }) {
+    const dispatch = useDispatch()
+    const { status, data: topology } = useTopology(projectId, topologyId)
+    const onDelete = (room) => dispatch(deleteRoom(room.id))
+    const actions = (room) => [
+        {
+            title: 'Delete room',
+            onClick: () => onDelete(room),
+        },
+    ]
+
+    return (
+        <TableComposable aria-label="Room list" variant="compact">
+            <Thead>
+                <Tr>
+                    <Th>Name</Th>
+                    <Th>Tiles</Th>
+                    <Th>Racks</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                {topology?.rooms.map((room) => {
+                    const tileCount = room.tiles.length
+                    const rackCount = room.tiles.filter((tile) => tile.rack).length
+                    return (
+                        <Tr key={room.id}>
+                            <Td dataLabel="Name">
+                                <Button variant="link" isInline onClick={() => onSelect(room)}>
+                                    {room.name}
+                                </Button>
+                            </Td>
+                            <Td dataLabel="Tiles">{tileCount === 1 ? '1 tile' : `${tileCount} tiles`}</Td>
+                            <Td dataLabel="Racks">{rackCount === 1 ? '1 rack' : `${rackCount} racks`}</Td>
+                            <Td isActionCell>
+                                <ActionsColumn items={actions(room)} />
+                            </Td>
+                        </Tr>
+                    )
+                })}
+                {topology?.rooms.length === 0 && (
+                    <Tr>
+                        <Td colSpan={4}>
+                            <Bullseye>
+                                <TableEmptyState
+                                    status={status}
+                                    loadingTitle="Loading Rooms"
+                                    emptyTitle="No rooms"
+                                    emptyText="There are currently no rooms in this topology. Open the Floor Plan to create a room"
+                                />
+                            </Bullseye>
+                        </Td>
+                    </Tr>
+                )}
+            </Tbody>
+        </TableComposable>
+    )
+}
+
+RoomTable.propTypes = {
+    projectId: PropTypes.number,
+    topologyId: PropTypes.number,
+    onSelect: PropTypes.func,
+}
+
+export default RoomTable
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyMap.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyMap.js
new file mode 100644
index 00000000..ff583750
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyMap.js
@@ -0,0 +1,69 @@
+/*
+ * 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, useRef } from 'react'
+import {
+    Bullseye,
+    Drawer,
+    DrawerContent,
+    DrawerContentBody,
+    EmptyState,
+    EmptyStateIcon,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+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)} />
+
+    const hotkeysRef = useRef()
+
+    return topologyIsLoading ? (
+        <Bullseye>
+            <EmptyState>
+                <EmptyStateIcon variant="container" component={Spinner} />
+                <Title size="lg" headingLevel="h4">
+                    Loading Topology
+                </Title>
+            </EmptyState>
+        </Bullseye>
+    ) : (
+        <Drawer isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+                <DrawerContentBody style={{ position: 'relative' }}>
+                    <MapStage hotkeysRef={hotkeysRef} />
+                    <Collapse onClick={() => setExpanded(true)} />
+                </DrawerContentBody>
+            </DrawerContent>
+        </Drawer>
+    )
+}
+
+export default TopologyMap
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyOverview.js
new file mode 100644
index 00000000..f8ee4990
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/TopologyOverview.js
@@ -0,0 +1,92 @@
+/*
+ * 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({ projectId, topologyNumber, onSelect }) {
+    const { data: topology } = useTopology(projectId, topologyNumber)
+    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.updatedAt)
+                                    ) : (
+                                        <Skeleton screenreaderText="Loading topology" />
+                                    )}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardTitle>Rooms</CardTitle>
+                    <CardBody>
+                        <RoomTable
+                            projectId={projectId}
+                            topologyId={topologyNumber}
+                            onSelect={(room) => onSelect('room', room)}
+                        />
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+TopologyOverview.propTypes = {
+    projectId: PropTypes.number,
+    topologyNumber: PropTypes.number,
+    onSelect: PropTypes.func,
+}
+
+export default TopologyOverview
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/GrayContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/GrayContainer.js
new file mode 100644
index 00000000..ccf637e5
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/MapConstants.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapConstants.js
new file mode 100644
index 00000000..4c3b2757
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/MapStage.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.js
new file mode 100644
index 00000000..e2b626ec
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.js
@@ -0,0 +1,83 @@
+import React, { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { Stage } from 'react-konva'
+import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
+import useResizeObserver from 'use-resize-observer'
+import { mapContainer } from './MapStage.module.css'
+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({ hotkeysRef }) {
+    const stageRef = useRef(null)
+    const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
+    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()
+    }
+
+    useHotkeys('left, a', () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0), { element: hotkeysRef.current })
+    useHotkeys('right, d', () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0), { element: hotkeysRef.current })
+    useHotkeys('up, w', () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT), { element: hotkeysRef.current })
+    useHotkeys('down, s', () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT), { element: hotkeysRef.current })
+
+    return (
+        <>
+            <Stage
+                className={mapContainer}
+                ref={stageRef}
+                onWheel={onZoom}
+                onDragEnd={onDragEnd}
+                draggable
+                width={width}
+                height={height}
+                scale={{ x: scale, y: scale }}
+                x={x}
+                y={y}
+            >
+                <MapLayer />
+                <RoomHoverLayer />
+                <ObjectHoverLayer />
+            </Stage>
+            <ScaleIndicator scale={scale} />
+            <Toolbar onZoom={onZoomButton} onExport={onExport} />
+        </>
+    )
+}
+
+MapStage.propTypes = {
+    hotkeysRef: PropTypes.object.isRequired,
+}
+
+export default MapStage
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.module.css
new file mode 100644
index 00000000..47c3dde2
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/MapStage.module.css
@@ -0,0 +1,29 @@
+/*!
+ * 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;
+    width: 100%;
+    height: 100%;
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackContainer.js
new file mode 100644
index 00000000..14449a91
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackEnergyFillContainer.js
new file mode 100644
index 00000000..a1ca7426
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackEnergyFillContainer.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ rackId, ...props }) {
+    const fillFraction = useSelector((state) => {
+        const rack = state.topology.racks[rackId]
+        if (!rack) {
+            return 0
+        }
+
+        const { machines, cpus, gpus, memories, storages } = state.topology
+        let energyConsumptionTotal = 0
+
+        for (const machineId of rack.machines) {
+            if (!machineId) {
+                continue
+            }
+            const machine = machines[machineId]
+            machine.cpus.forEach((id) => (energyConsumptionTotal += cpus[id].energyConsumptionW))
+            machine.gpus.forEach((id) => (energyConsumptionTotal += gpus[id].energyConsumptionW))
+            machine.memories.forEach((id) => (energyConsumptionTotal += memories[id].energyConsumptionW))
+            machine.storages.forEach((id) => (energyConsumptionTotal += storages[id].energyConsumptionW))
+        }
+
+        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
+    })
+    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    rackId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackSpaceFillContainer.js
new file mode 100644
index 00000000..2039a9d3
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RackSpaceFillContainer.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 React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ rackId, ...props }) {
+    const rack = useSelector((state) => state.topology.racks[rackId])
+
+    if (!rack) {
+        return null
+    }
+
+    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    rackId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RoomContainer.js
new file mode 100644
index 00000000..76785bea
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/RoomContainer.js
@@ -0,0 +1,54 @@
+/*
+ * 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 interactionLevel = useSelector((state) => state.interactionLevel)
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const room = useSelector((state) => state.topology.rooms[roomId])
+    const dispatch = useDispatch()
+
+    if (!room) {
+        return null
+    }
+
+    return (
+        <RoomGroup
+            {...props}
+            interactionLevel={interactionLevel}
+            currentRoomInConstruction={currentRoomInConstruction}
+            room={room}
+            onClick={() => dispatch(goFromBuildingToRoom(roomId))}
+        />
+    )
+}
+
+RoomContainer.propTypes = {
+    roomId: PropTypes.string,
+}
+
+export default RoomContainer
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TileContainer.js
new file mode 100644
index 00000000..0788b894
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TileContainer.js
@@ -0,0 +1,50 @@
+/*
+ * 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 dispatch = useDispatch()
+    const tile = useSelector((state) => state.topology.tiles[tileId])
+
+    if (!tile) {
+        return null
+    }
+
+    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-server/src/main/webui/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/TopologyContainer.js
new file mode 100644
index 00000000..cc0d46b3
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/WallContainer.js
new file mode 100644
index 00000000..106d8d3d
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Collapse.js
new file mode 100644
index 00000000..931ded94
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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.css'
+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-server/src/main/webui/components/topologies/map/controls/Collapse.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Collapse.module.css
new file mode 100644
index 00000000..70fd465f
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Collapse.module.css
@@ -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;
+}
+
+.collapseContainer > 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);
+}
+
+.collapseContainer > button:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
+
+.collapseContainer > button:global(.pf-m-tertiary):after {
+    display: none;
+}
+
+.collapseContainer > button:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.js
new file mode 100644
index 00000000..3ec893fb
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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.css'
+
+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-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.module.css
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/ScaleIndicator.module.css
@@ -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-server/src/main/webui/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.js
new file mode 100644
index 00000000..00aaf3e1
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { control, toolBar } from './Toolbar.module.css'
+import { Button } from '@patternfly/react-core'
+import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-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}
+            >
+                <CameraIcon />
+            </Button>
+        </div>
+    )
+}
+
+Toolbar.propTypes = {
+    onZoom: PropTypes.func,
+    onExport: PropTypes.func,
+}
+
+export default Toolbar
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.module.css
new file mode 100644
index 00000000..007389da
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/controls/Toolbar.module.css
@@ -0,0 +1,27 @@
+.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);
+}
+
+.control:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) {
+    background-color: var(--pf-global--BackgroundColor--100);
+}
+
+.control:global(.pf-m-tertiary):after {
+    display: none;
+}
+
+.control:global(.pf-m-tertiary):hover {
+    border: none;
+    box-shadow: var(--pf-global--BoxShadow--md);
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/Backdrop.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/Backdrop.js
new file mode 100644
index 00000000..93037b51
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/GrayLayer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/GrayLayer.js
new file mode 100644
index 00000000..08c687f6
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/HoverTile.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/HoverTile.js
new file mode 100644
index 00000000..20c2c6d1
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/ImageComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/ImageComponent.js
new file mode 100644
index 00000000..fdae53f2
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/ImageComponent.js
@@ -0,0 +1,37 @@
+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])
+
+    // eslint-disable-next-line jsx-a11y/alt-text
+    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-server/src/main/webui/components/topologies/map/elements/RackFillBar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/RackFillBar.js
new file mode 100644
index 00000000..aa284944
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/RoomTile.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/RoomTile.js
new file mode 100644
index 00000000..e7329dc0
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/TileObject.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/TileObject.js
new file mode 100644
index 00000000..3211f187
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..186c2b3a
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/elements/WallSegment.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/elements/WallSegment.js
new file mode 100644
index 00000000..4f18813e
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/groups/GridGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/GridGroup.js
new file mode 100644
index 00000000..d66a18de
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/groups/RackGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/RackGroup.js
new file mode 100644
index 00000000..ed942661
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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 rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer rackId={tile.rack} positionX={tile.positionX} positionY={tile.positionY} />
+            </Group>
+        </Group>
+    )
+}
+
+RackGroup.propTypes = {
+    tile: Tile,
+}
+
+export default RackGroup
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/RoomGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/RoomGroup.js
new file mode 100644
index 00000000..3f8b3089
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/groups/TileGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/TileGroup.js
new file mode 100644
index 00000000..f2084017
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/groups/TopologyGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/TopologyGroup.js
new file mode 100644
index 00000000..011dcf34
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/groups/WallGroup.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/groups/WallGroup.js
new file mode 100644
index 00000000..6cbd1cd0
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..d7e0c56a
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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()
+
+        stage.on('mousemove.hover', () => {
+            // Transform used to convert mouse coordinates to world coordinates
+            const transform = stage.getAbsoluteTransform().copy()
+            transform.invert()
+
+            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.2} 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-server/src/main/webui/components/topologies/map/layers/MapLayer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/MapLayer.js
new file mode 100644
index 00000000..c902532b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/ObjectHoverLayer.js
new file mode 100644
index 00000000..5e741a3b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/ObjectHoverLayer.js
@@ -0,0 +1,51 @@
+/*
+ * 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'
+
+export default 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>
+    )
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/RoomHoverLayer.js
new file mode 100644
index 00000000..b9cfcaf4
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/map/layers/RoomHoverLayer.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 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'
+
+export default 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} />
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/NameComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/NameComponent.js
new file mode 100644
index 00000000..ececd07b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/TopologySidebar.js
new file mode 100644
index 00000000..5aaa7834
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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.css'
+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-server/src/main/webui/components/topologies/sidebar/TopologySidebar.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/TopologySidebar.module.css
new file mode 100644
index 00000000..3853c625
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/TopologySidebar.module.css
@@ -0,0 +1,35 @@
+/*!
+ * 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);
+}
+
+.backButton:hover,
+.backButton:global(.pf-c-button):focus {
+    --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/BuildingSidebar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/BuildingSidebar.js
new file mode 100644
index 00000000..5fcd46be
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..9fc85d0c
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..c149b224
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/DeleteMachine.js
new file mode 100644
index 00000000..a4b9457b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/MachineSidebar.js
new file mode 100644
index 00000000..8a4c33dc
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/MachineSidebar.js
@@ -0,0 +1,55 @@
+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]
+
+        for (const machineId of rack.machines) {
+            const machine = topology.machines[machineId]
+            if (machine.position === position) {
+                return machine
+            }
+        }
+    })
+    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-server/src/main/webui/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddComponent.js
new file mode 100644
index 00000000..18cba23a
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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)} isDisabled={!selected}>
+                Add
+            </Button>
+        </InputGroup>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default UnitAddComponent
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddContainer.js
new file mode 100644
index 00000000..a0054ef6
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitAddContainer.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 UnitAddComponent from './UnitAddComponent'
+import { addUnit } from '../../../../redux/actions/topology/machine'
+import UnitType from './UnitType'
+
+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: UnitType.isRequired,
+}
+
+export default UnitAddContainer
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListComponent.js
new file mode 100644
index 00000000..75ab0ad7
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListComponent.js
@@ -0,0 +1,113 @@
+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'
+import UnitType from './UnitType'
+
+function UnitInfo({ unit, unitType }) {
+    if (unitType === 'cpus' || unitType === 'gpus') {
+        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: UnitType.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: UnitType.isRequired,
+    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
+    onDelete: PropTypes.func,
+}
+
+export default UnitListComponent
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListContainer.js
new file mode 100644
index 00000000..bcd4bdcc
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitListContainer.js
@@ -0,0 +1,47 @@
+/*
+ * 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'
+import UnitType from './UnitType'
+
+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: UnitType.isRequired,
+}
+
+export default UnitListContainer
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..4032d607
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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('cpuModel-units')
+
+    return (
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpuModel-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-server/src/main/webui/components/topologies/sidebar/machine/UnitType.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitType.js
new file mode 100644
index 00000000..b6d7bf8b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/machine/UnitType.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2022 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'
+
+export default PropTypes.oneOf(['cpus', 'gpus', 'memories', 'storages'])
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js
new file mode 100644
index 00000000..6a0c3ff3
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.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 PropTypes from 'prop-types'
+import React from 'react'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
+
+function AddPrefab() {
+    const onClick = () => {} // TODO
+    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-server/src/main/webui/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..0583a7a4
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineComponent.js
new file mode 100644
index 00000000..b0a96a9f
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineComponent.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Flex, Label } from '@patternfly/react-core'
+import { Machine } from '../../../../shapes'
+
+const UnitIcon = ({ id, type }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img src={'/img/topology/' + id + '-icon.png'} alt={'Machine contains ' + type + ' units'} 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="cpuModel" 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-server/src/main/webui/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineListComponent.js
new file mode 100644
index 00000000..02c97730
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineListComponent.js
@@ -0,0 +1,80 @@
+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>{index + 1}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>{index + 1}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>
+                    )
+                )
+                .reverse()}
+        </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-server/src/main/webui/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/MachineListContainer.js
new file mode 100644
index 00000000..e1914730
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackNameContainer.js
new file mode 100644
index 00000000..c3422318
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.js
new file mode 100644
index 00000000..cb7d3b68
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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.css'
+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-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.module.css b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.module.css
new file mode 100644
index 00000000..f4c8829f
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/RackSidebar.module.css
@@ -0,0 +1,14 @@
+.sidebarContainer {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+}
+
+.machineListContainer {
+    overflow-y: auto;
+
+    flex: 1 0 300px;
+
+    margin-top: 10px;
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/DeleteRoomContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..29b8f78a
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/room/EditRoomContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/EditRoomContainer.js
new file mode 100644
index 00000000..7a278cd6
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js
new file mode 100644
index 00000000..a384d5d5
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js
new file mode 100644
index 00000000..e04287a5
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RoomName.js
new file mode 100644
index 00000000..72d45bea
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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-server/src/main/webui/components/topologies/sidebar/room/RoomSidebar.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RoomSidebar.js
new file mode 100644
index 00000000..6ad489e0
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/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
-- 
cgit v1.2.3