From 6d5a2eebb609da67239ea37d12d6b2d3bbfef76e Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:41:53 +0100
Subject: ui: Do not clutter component tree with Redux connects

This change refactors the frontend to use hooks for obtaining state
within the Redux store as opposed to using Higher-Order Components
(HOCs). This eliminates a lot of clutter in the components.
---
 .../src/components/app/map/MapStageComponent.js    | 28 +++++++---------------
 1 file changed, 8 insertions(+), 20 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 2cd0ed6e..60bf3104 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
+import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
-import { Shortcuts } from 'react-shortcuts'
 import MapLayer from '../../../containers/app/map/layers/MapLayer'
 import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer'
 import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
@@ -55,23 +55,11 @@ class MapStageComponent extends React.Component {
         this.setState({ mouseX: mousePos.x, mouseY: mousePos.y })
     }
 
-    handleShortcuts(action) {
-        switch (action) {
-            case 'MOVE_LEFT':
-                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_RIGHT':
-                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0)
-                break
-            case 'MOVE_UP':
-                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            case 'MOVE_DOWN':
-                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT)
-                break
-            default:
-                break
-        }
+    handlers = {
+        MOVE_LEFT: () => this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
     }
 
     moveWithDelta(deltaX, deltaY) {
@@ -80,7 +68,7 @@ class MapStageComponent extends React.Component {
 
     render() {
         return (
-            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
+            <HotKeys handlers={this.handlers}>
                 <Stage
                     ref={(stage) => {
                         this.stage = stage
@@ -95,7 +83,7 @@ class MapStageComponent extends React.Component {
                         <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
-            </Shortcuts>
+            </HotKeys>
         )
     }
 }
-- 
cgit v1.2.3


From 00c8d0086631a249f7d9dcee022e013bbc683616 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:42:43 +0100
Subject: ui: Do not prevent default on mouse scroll

This change removes the prevent default from the mouse scroll since
Chrome does not allow it anymore.
---
 opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 60bf3104..7ca10792 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -46,7 +46,6 @@ class MapStageComponent extends React.Component {
     }
 
     updateScale(e) {
-        e.preventDefault()
         this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
     }
 
-- 
cgit v1.2.3


From 6e6f14db8986f5de6491b51117de0e1b0438b341 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 29 Oct 2020 00:53:52 +0100
Subject: ui: Adapt home components to Reactstrap

---
 .../src/components/home/ContactSection.js          | 44 +++++++++++-----------
 .../src/components/home/ContentSection.js          | 13 ++++---
 .../src/components/home/IntroSection.js            | 21 ++++++-----
 .../src/components/home/ScreenshotSection.js       | 13 +------
 .../src/components/home/StakeholderSection.js      | 18 ++++++---
 .../src/components/home/TechnologiesSection.js     | 21 ++++++-----
 6 files changed, 66 insertions(+), 64 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index d5c6e55f..d25a1bc4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,42 +1,44 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import './ContactSection.sass'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
+import './ContactSection.sass'
+
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact">
-        <div className="row justify-content-center">
-            <div className="col-4">
+    <ContentSection name="contact" title="Contact" className="contact-section">
+        <Row className="justify-content-center">
+            <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
                     <FontAwesome name="github" size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
-            </div>
-            <div className="col-4">
+            </Col>
+            <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
                     <FontAwesome name="envelope" size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" />
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center">
                 A project by the &nbsp;
                 <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
                     <strong>@Large Research Group</strong>
                 </a>
                 .
-            </div>
-        </div>
-        <div className="row">
-            <div className="col text-center disclaimer mt-5 small">
+            </Col>
+        </Row>
+        <Row>
+            <Col className="text-center disclaimer mt-5 small">
                 <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
@@ -47,8 +49,8 @@ const ContactSection = () => (
                     <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a>
                 </strong>
                 ). Sorry for the inconvenience.
-            </div>
-        </div>
+            </Col>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 9d4832d9..3a8960d9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -1,15 +1,16 @@
+import React from 'react'
 import classNames from 'classnames'
+import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import React from 'react'
 import './ContentSection.sass'
 
-const ContentSection = ({ name, title, children }) => (
-    <div id={name} className={classNames(name + '-section', 'content-section')}>
-        <div className="container">
+const ContentSection = ({ name, title, children, className }) => (
+    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+        <Container>
             <h1>{title}</h1>
             {children}
-        </div>
-    </div>
+        </Container>
+    </section>
 )
 
 ContentSection.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index a799272a..bc6ee83b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,18 +1,19 @@
 import React from 'react'
+import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = () => (
     <section id="intro" className="intro-section">
-        <div className="container pt-5 pb-3">
-            <div className="row justify-content-center">
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+        <Container className="pt-5 pb-3">
+            <Row className="justify-content-center">
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>The datacenter (DC) industry...</h4>
                     <ul>
                         <li>Is worth over $15 bn, and growing</li>
                         <li>Has many hard-to-grasp concepts</li>
                         <li>Needs to become accessible to many</li>
                     </ul>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <img
                         src="img/datacenter-drawing.png"
                         className="col-12 img-fluid"
@@ -23,17 +24,17 @@ const IntroSection = () => (
                             Image source
                         </a>
                     </p>
-                </div>
-                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                </Col>
+                <Col xl="4" lg="4" md="4" sm="8">
                     <h4>OpenDC provides...</h4>
                     <ul>
                         <li>Collaborative online DC modeling</li>
                         <li>Diverse and effective DC simulation</li>
                         <li>Exploratory DC performance feedback</li>
                     </ul>
-                </div>
-            </div>
-        </div>
+                </Col>
+            </Row>
+        </Container>
     </section>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 263590d5..33aab17f 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -7,20 +6,12 @@ import './ScreenshotSection.sass'
 const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
         <Row>
-            <Col
-                xl="5"
-                lg="5"
-                md="5"
-                sm="!2"
-                className={classNames('text-left my-auto', {
-                    'order-1': !imageIsRight,
-                })}
-            >
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
                 <img src={imageUrl} className="col-12 screenshot" alt={caption} />
-                <Row className="text-muted justify-content-center">{caption}</Row>
+                <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
     </ContentSection>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index e5ed9683..1624b4d2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -1,29 +1,35 @@
 import React from 'react'
+import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const Stakeholder = ({ name, title, subtitle }) => (
-    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
-        <img
+    <Col xl="4" lg="4" md="4" sm="6">
+        <Col
+            tag="img"
+            xl="3"
+            lg="3"
+            md="4"
+            sm="4"
             src={'img/stakeholders/' + name + '.png'}
-            className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
+            className="img-fluid"
             alt={title}
         />
         <div className="text-center mt-2">
             <h4>{title}</h4>
             <p>{subtitle}</p>
         </div>
-    </div>
+    </Col>
 )
 
 const StakeholderSection = () => (
     <ContentSection name="stakeholders" title="Stakeholders">
-        <div className="row justify-content-center">
+        <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
             <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
             <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" />
             <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" />
-        </div>
+        </Row>
     </ContentSection>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index c6013c71..efd77edf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,39 +1,40 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
+import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TechnologiesSection = () => (
     <ContentSection name="technologies" title="Technologies">
-        <ul className="list-group text-left">
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
+        <ListGroup className="list-group text-left">
+            <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="window-maximize" className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
+            </ListGroupItem>
+            <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="television" className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
+            </ListGroupItem>
+            <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="database" className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
-            </li>
-            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+            </ListGroupItem>
+            <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
                     <FontAwesome name="cogs" className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
-            </li>
-        </ul>
+            </ListGroupItem>
+        </ListGroup>
     </ContentSection>
 )
 
-- 
cgit v1.2.3


From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 11 May 2021 15:40:11 +0200
Subject: ui: Move component styling into CSS modules

This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.

These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
---
 .../app/map/controls/ScaleIndicatorComponent.js    |  4 +-
 .../controls/ScaleIndicatorComponent.module.scss   | 10 +++
 .../app/map/controls/ScaleIndicatorComponent.sass  |  9 ---
 .../app/map/controls/ToolPanelComponent.js         |  4 +-
 .../map/controls/ToolPanelComponent.module.scss    |  6 ++
 .../app/map/controls/ToolPanelComponent.sass       |  5 --
 .../src/components/app/sidebars/Sidebar.js         | 78 ++++++++++------------
 .../components/app/sidebars/Sidebar.module.scss    | 57 ++++++++++++++++
 .../src/components/app/sidebars/Sidebar.sass       | 50 --------------
 .../sidebars/topology/rack/MachineListComponent.js |  4 +-
 .../topology/rack/MachineListComponent.module.scss |  3 +
 .../topology/rack/MachineListComponent.sass        |  2 -
 .../sidebars/topology/rack/RackSidebarComponent.js |  8 +--
 .../topology/rack/RackSidebarComponent.module.scss | 14 ++++
 .../topology/rack/RackSidebarComponent.sass        | 11 ---
 .../src/components/home/ContactSection.js          |  6 +-
 .../src/components/home/ContactSection.module.scss | 20 ++++++
 .../src/components/home/ContactSection.sass        | 15 -----
 .../src/components/home/ContentSection.js          |  4 +-
 .../src/components/home/ContentSection.module.scss | 11 +++
 .../src/components/home/ContentSection.sass        |  9 ---
 .../src/components/home/IntroSection.js            |  4 +-
 .../src/components/home/JumbotronHeader.js         |  8 +--
 .../components/home/JumbotronHeader.module.scss    | 31 +++++++++
 .../src/components/home/JumbotronHeader.sass       | 24 -------
 .../src/components/home/ModelingSection.js         |  3 +-
 .../src/components/home/ScreenshotSection.js       |  8 +--
 .../components/home/ScreenshotSection.module.scss  |  5 ++
 .../src/components/home/ScreenshotSection.sass     |  4 --
 .../src/components/home/SimulationSection.js       |  4 +-
 .../src/components/home/StakeholderSection.js      |  4 +-
 .../src/components/home/TeamSection.js             |  4 +-
 .../src/components/home/TechnologiesSection.js     |  4 +-
 .../components/navigation/AppNavbarComponent.js    |  2 +-
 .../src/components/navigation/HomeNavbar.js        |  2 +-
 .../src/components/navigation/Navbar.js            |  8 +--
 .../src/components/navigation/Navbar.module.scss   | 36 ++++++++++
 .../src/components/navigation/Navbar.sass          | 30 ---------
 .../src/components/not-found/BlinkingCursor.js     |  4 +-
 .../not-found/BlinkingCursor.module.scss           | 13 ++++
 .../src/components/not-found/BlinkingCursor.sass   | 35 ----------
 .../src/components/not-found/CodeBlock.js          |  4 +-
 .../src/components/not-found/CodeBlock.module.scss |  4 ++
 .../src/components/not-found/CodeBlock.sass        |  3 -
 .../src/components/not-found/TerminalWindow.js     | 14 ++--
 .../not-found/TerminalWindow.module.scss           | 61 +++++++++++++++++
 .../src/components/not-found/TerminalWindow.sass   | 70 -------------------
 .../src/components/projects/FilterPanel.js         |  4 +-
 .../components/projects/FilterPanel.module.scss    |  7 ++
 .../src/components/projects/FilterPanel.sass       |  5 --
 50 files changed, 367 insertions(+), 368 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
index 7cbb45c0..13226602 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import './ScaleIndicatorComponent.sass'
+import { scaleIndicator } from './ScaleIndicatorComponent.module.scss'
 
 const ScaleIndicatorComponent = ({ scale }) => (
-    <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
+    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
         {TILE_SIZE_IN_METERS}m
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
@@ -0,0 +1,10 @@
+.scaleIndicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 50;
+
+    border: solid 2px #212529;
+    border-top: none;
+    border-left: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass
deleted file mode 100644
index 03a72c99..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.scale-indicator
-    position: absolute
-    right: 10px
-    bottom: 10px
-    z-index: 50
-
-    border: solid 2px #212529
-    border-top: none
-    border-left: none
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
index f372734d..d2f70953 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
 import ExportCanvasComponent from './ExportCanvasComponent'
-import './ToolPanelComponent.sass'
+import { toolPanel } from './ToolPanelComponent.module.scss'
 
 const ToolPanelComponent = () => (
-    <div className="tool-panel">
+    <div className={toolPanel}>
         <ZoomControlContainer />
         <ExportCanvasComponent />
     </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
new file mode 100644
index 00000000..970b1ce2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
@@ -0,0 +1,6 @@
+.toolPanel {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    z-index: 50;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass
deleted file mode 100644
index 8b27d24a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.tool-panel
-    position: absolute
-    left: 10px
-    bottom: 10px
-    z-index: 50
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index f7368f54..64e95014 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -1,53 +1,45 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import React from 'react'
-import './Sidebar.sass'
+import React, { useState } from 'react'
+import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
 
-class Sidebar extends React.Component {
-    static propTypes = {
-        isRight: PropTypes.bool.isRequired,
-        collapsible: PropTypes.bool,
-    }
+function Sidebar({ isRight, collapsible = true, children }) {
+    const [isCollapsed, setCollapsed] = useState(false)
 
-    static defaultProps = {
-        collapsible: true,
-    }
+    const button = (
+        <div
+            className={classNames(collapseButton, {
+                [collapseButtonRight]: isRight,
+            })}
+            onClick={() => setCollapsed(!isCollapsed)}
+        >
+            {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
+                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+            ) : (
+                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+            )}
+        </div>
+    )
 
-    state = {
-        collapsed: false,
+    if (isCollapsed) {
+        return button
     }
+    return (
+        <div
+            className={classNames(`${sidebar} p-3 h-100`, {
+                [sidebarRight]: isRight,
+            })}
+            onWheel={(e) => e.stopPropagation()}
+        >
+            {children}
+            {collapsible && button}
+        </div>
+    )
+}
 
-    render() {
-        const collapseButton = (
-            <div
-                className={classNames('sidebar-collapse-button', {
-                    'sidebar-collapse-button-right': this.props.isRight,
-                })}
-                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
-            >
-                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? (
-                    <span className="fa fa-angle-left" title={this.props.isRight ? 'Expand' : 'Collapse'} />
-                ) : (
-                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
-                )}
-            </div>
-        )
-
-        if (this.state.collapsed) {
-            return collapseButton
-        }
-        return (
-            <div
-                className={classNames('sidebar p-3 h-100', {
-                    'sidebar-right': this.props.isRight,
-                })}
-                onWheel={(e) => e.stopPropagation()}
-            >
-                {this.props.children}
-                {this.props.collapsible && collapseButton}
-            </div>
-        )
-    }
+Sidebar.propTypes = {
+    isRight: PropTypes.bool.isRequired,
+    collapsible: PropTypes.bool,
 }
 
 export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
new file mode 100644
index 00000000..d6be4d9b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
@@ -0,0 +1,57 @@
+@import '../../../style-globals/_variables.scss';
+@import '../../../style-globals/_mixins.scss';
+
+.collapseButton {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    padding: 5px 7px;
+
+    background: white;
+    border: solid 1px $gray-semi-light;
+    z-index: 99;
+
+    @include clickable;
+    border-radius: 5px;
+    transition: background 200ms;
+
+    &.collapseButtonRight {
+        left: auto;
+        right: 5px;
+        top: 5px;
+    }
+
+    &:hover {
+        background: #eeeeee;
+    }
+}
+
+.sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $side-bar-width;
+
+    z-index: 100;
+    background: white;
+
+    border-right: $gray-semi-dark 1px solid;
+
+    .collapseButton {
+        left: auto;
+        right: -25px;
+    }
+}
+
+.sidebarRight {
+    left: auto;
+    right: 0;
+
+    border-left: $gray-semi-dark 1px solid;
+    border-right: none;
+
+    .collapseButtonRight {
+        left: -25px;
+        right: auto;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
deleted file mode 100644
index b8e15716..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.sass
+++ /dev/null
@@ -1,50 +0,0 @@
-@import ../../../style-globals/_variables.sass
-@import ../../../style-globals/_mixins.sass
-
-.sidebar-collapse-button
-    position: absolute
-    left: 5px
-    top: 5px
-    padding: 5px 7px
-
-    background: white
-    border: solid 1px $gray-semi-light
-    z-index: 99
-
-    +clickable
-    +border-radius(5px)
-    +transition(background, 200ms)
-
-    &.sidebar-collapse-button-right
-        left: auto
-        right: 5px
-        top: 5px
-
-    &:hover
-        background: #eeeeee
-
-.sidebar
-    position: absolute
-    top: 0
-    left: 0
-    width: $side-bar-width
-
-    z-index: 100
-    background: white
-
-    border-right: $gray-semi-dark 1px solid
-
-    .sidebar-collapse-button
-        left: auto
-        right: -25px
-
-.sidebar-right
-    left: auto
-    right: 0
-
-    border-left: $gray-semi-dark 1px solid
-    border-right: none
-
-    .sidebar-collapse-button-right
-        left: -25px
-        right: auto
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index 12be26bd..1c07d237 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
-import './MachineListComponent.sass'
+import { machineList } from './MachineListComponent.module.scss'
 
 const MachineListComponent = ({ machineIds }) => {
     return (
-        <ul className="list-group machine-list">
+        <ul className={`list-group ${machineList}`}>
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
                     return <EmptySlotContainer key={index} position={index + 1} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
new file mode 100644
index 00000000..f075aac9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
@@ -0,0 +1,3 @@
+.machineList li {
+    min-height: 64px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
deleted file mode 100644
index 11b82c93..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.machine-list li
-    min-height: 64px
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index ca41bf57..74313bf7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -3,19 +3,19 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology
 import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
 import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
 import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import './RackSidebarComponent.sass'
+import { sidebarContainer, sidebarHeaderContainer, machineListContainer } from './RackSidebarComponent.module.scss'
 import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
 
 const RackSidebarComponent = () => {
     return (
-        <div className="rack-sidebar-container flex-column">
-            <div className="rack-sidebar-header-container">
+        <div className={`${sidebarContainer} flex-column`}>
+            <div className={sidebarHeaderContainer}>
                 <RackNameContainer />
                 <BackToRoomContainer />
                 <AddPrefabContainer />
                 <DeleteRackContainer />
             </div>
-            <div className="machine-list-container mt-2">
+            <div className={`${machineListContainer} mt-2`}>
                 <MachineListContainer />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
new file mode 100644
index 00000000..8ce3836a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
@@ -0,0 +1,14 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+}
+
+.sidebarHeaderContainer {
+    flex: 0;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
deleted file mode 100644
index 29fec02a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.rack-sidebar-container
-    display: flex
-    height: 100%
-    max-height: 100%
-
-.rack-sidebar-header-container
-    flex: 0
-
-.machine-list-container
-    flex: 1
-    overflow-y: scroll
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index d25a1bc4..25daaccf 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -3,10 +3,10 @@ import FontAwesome from 'react-fontawesome'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-import './ContactSection.sass'
+import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
-    <ContentSection name="contact" title="Contact" className="contact-section">
+    <ContentSection name="contact" title="Contact" className={contactSection}>
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
@@ -25,7 +25,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" />
+                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
             </Col>
         </Row>
         <Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
new file mode 100644
index 00000000..9ab4fcb1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
@@ -0,0 +1,20 @@
+.contactSection {
+    background-color: #444;
+    color: #ddd;
+
+    a {
+        color: #ddd;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    .tudelftIcon {
+        height: 100px;
+    }
+
+    .disclaimer {
+        color: #cccccc;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
deleted file mode 100644
index 997f8d98..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-.contact-section
-    background-color: #444
-    color: #ddd
-
-    a
-        color: #ddd
-
-    a:hover
-        color: #fff
-
-    .tudelft-icon
-        height: 100px
-
-    .disclaimer
-        color: #cccccc
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 3a8960d9..3e9ad50a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -2,10 +2,10 @@ import React from 'react'
 import classNames from 'classnames'
 import { Container } from 'reactstrap'
 import PropTypes from 'prop-types'
-import './ContentSection.sass'
+import { contentSection } from './ContentSection.module.scss'
 
 const ContentSection = ({ name, title, children, className }) => (
-    <section id={name} className={classNames(className, name + '-section', 'content-section')}>
+    <section id={name} className={classNames(className, contentSection)}>
         <Container>
             <h1>{title}</h1>
             {children}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
new file mode 100644
index 00000000..3d150c93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
@@ -0,0 +1,11 @@
+@import '../../style-globals/_variables.scss';
+
+.contentSection {
+    padding-top: 50px;
+    padding-bottom: 50px;
+    text-align: center;
+
+    h1 {
+        margin-bottom: 30px;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass b/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
deleted file mode 100644
index a4c8bd66..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@import ../../style-globals/_variables.sass
-
-.content-section
-    padding-top: 50px
-    padding-bottom: 150px
-    text-align: center
-
-    h1
-        margin-bottom: 30px
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index bc6ee83b..7b467889 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Container, Row, Col } from 'reactstrap'
 
-const IntroSection = () => (
-    <section id="intro" className="intro-section">
+const IntroSection = ({ className }) => (
+    <section id="intro" className={className}>
         <Container className="pt-5 pb-3">
             <Row className="justify-content-center">
                 <Col xl="4" lg="4" md="4" sm="8">
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 6a9ea00c..0d3217f9 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Container, Jumbotron, Button } from 'reactstrap'
-import './JumbotronHeader.sass'
+import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
 
 const JumbotronHeader = () => (
-    <section className="jumbotron-header">
+    <section className={jumbotronHeader}>
         <Container>
-            <Jumbotron className="text-center">
+            <Jumbotron className={jumbotron}>
                 <h1>
-                    Open<span className="dc">DC</span>
+                    Open<span className={dc}>DC</span>
                 </h1>
                 <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
                 <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
new file mode 100644
index 00000000..567b3e73
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
@@ -0,0 +1,31 @@
+.jumbotronHeader {
+    background: #00a6d6;
+}
+
+.jumbotron {
+    background-color: inherit;
+    margin-bottom: 0;
+    text-align: center;
+
+    padding-top: 120px;
+    padding-bottom: 120px;
+
+    img {
+        max-width: 110px;
+    }
+
+    h1 {
+        color: #fff;
+        font-size: 4.5em;
+
+        .dc {
+            color: #fff;
+            font-weight: bold;
+        }
+    }
+
+    :global(.lead) {
+        color: #fff;
+        font-size: 1.4em;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
deleted file mode 100644
index 1b6a89fd..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.sass
+++ /dev/null
@@ -1,24 +0,0 @@
-.jumbotron-header
-    background: #00A6D6
-
-.jumbotron
-    background-color: inherit
-    margin-bottom: 0
-
-    padding-top: 120px
-    padding-bottom: 120px
-
-    img
-        max-width: 110px
-
-    h1
-        color: #fff
-        font-size: 4.5em
-
-        .dc
-            color: #fff
-            font-weight: bold
-
-    .lead
-        color: #fff
-        font-size: 1.4em
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
index 643dca65..af36aa45 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import ScreenshotSection from './ScreenshotSection'
 
-const ModelingSection = () => (
+const ModelingSection = ({ className }) => (
     <ScreenshotSection
         name="modeling"
         title="Datacenter Modeling"
         imageUrl="/img/screenshot-construction.png"
         caption="Building a datacenter in OpenDC"
         imageIsRight={true}
+        className={className}
     >
         <h3>Collaboratively...</h3>
         <ul>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 33aab17f..4f634b28 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,16 +1,16 @@
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-import './ScreenshotSection.sass'
+import { screenshot } from './ScreenshotSection.module.scss'
 
-const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
-    <ContentSection name={name} title={title}>
+const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
+    <ContentSection name={name} title={title} className={className}>
         <Row>
             <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
-                <img src={imageUrl} className="col-12 screenshot" alt={caption} />
+                <img src={imageUrl} className={`col-12 ${screenshot}`} alt={caption} />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
new file mode 100644
index 00000000..7e22de32
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
@@ -0,0 +1,5 @@
+.screenshot {
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: 5px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
deleted file mode 100644
index 6b1a6ec4..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-.screenshot
-    padding-left: 0
-    padding-right: 0
-    margin-bottom: 5px
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 8e98717a..44ce905b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const SimulationSection = () => {
+const SimulationSection = ({ className }) => {
     return (
-        <ContentSection name="project" title="Datecenter Simulation">
+        <ContentSection name="project" title="Datecenter Simulation" className={className}>
             <Row>
                 <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1">
                     <h3>Working with OpenDC:</h3>
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index 1624b4d2..9a4892ed 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -21,8 +21,8 @@ const Stakeholder = ({ name, title, subtitle }) => (
     </Col>
 )
 
-const StakeholderSection = () => (
-    <ContentSection name="stakeholders" title="Stakeholders">
+const StakeholderSection = ({ className }) => (
+    <ContentSection name="stakeholders" title="Stakeholders" className={className}>
         <Row className="justify-content-center">
             <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
             <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 1ee1cbf5..4e8a3906 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -41,8 +41,8 @@ const TeamMember = ({ photoId, name }) => (
     </Col>
 )
 
-const TeamSection = () => (
-    <ContentSection name="team" title="OpenDC Team">
+const TeamSection = ({ className }) => (
+    <ContentSection name="team" title="OpenDC Team" className={className}>
         <Row className="justify-content-center">
             <TeamLead photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
             <TeamLead photoId="fmastenbroek" name="Fabian Mastenbroek" description="Technology Lead" />
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index efd77edf..6fdf4e5c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -3,8 +3,8 @@ import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
 
-const TechnologiesSection = () => (
-    <ContentSection name="technologies" title="Technologies">
+const TechnologiesSection = ({ className }) => (
+    <ContentSection name="technologies" title="Technologies" className={className}>
         <ListGroup className="list-group text-left">
             <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index c5de3d0b..8c28c542 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
index 08d222ea..46d01a25 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
-import './Navbar.sass'
+import {} from './Navbar.module.scss'
 
 const ScrollNavItem = ({ id, name }) => (
     <NavItem>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 55f98900..bf18f1c4 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -14,7 +14,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.sass'
+import { login, navbar, opendcBrand } from './Navbar.module.scss'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -59,7 +59,7 @@ export const LoggedInSection = () => {
             ) : (
                 <NavItem route="login">
                     <GitHubLink />
-                    <Login visible={true} />
+                    <Login visible={true} className={login} />
                 </NavItem>
             )}
         </Nav>
@@ -71,10 +71,10 @@ const Navbar = ({ fullWidth, children }) => {
     const toggle = () => setIsOpen(!isOpen)
 
     return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar">
+        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className="opendc-brand">
+                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
new file mode 100644
index 00000000..2ea59a0f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
@@ -0,0 +1,36 @@
+@import '../../style-globals/_mixins.scss';
+@import '../../style-globals/_variables.scss';
+
+.navbar {
+    border-top: $blue 3px solid;
+    border-bottom: $gray-semi-dark 1px solid;
+    color: $gray-very-dark;
+    background: #fafafb;
+}
+
+.opendcBrand {
+    display: inline-block;
+    color: $gray-very-dark;
+
+    transition: background $transition-length;
+
+    img {
+        position: relative;
+        bottom: 3px;
+        display: inline-block;
+        width: 30px;
+    }
+}
+
+.login {
+    height: 40px;
+    background: $blue;
+    border: none;
+    padding-top: 10px;
+
+    @include clickable;
+
+    &:hover {
+        background: $blue-dark;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
deleted file mode 100644
index c9d2aad2..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.sass
+++ /dev/null
@@ -1,30 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.navbar
-    border-top: $blue 3px solid
-    border-bottom: $gray-semi-dark 1px solid
-    color: $gray-very-dark
-    background: #fafafb
-
-.opendc-brand
-    display: inline-block
-    color: $gray-very-dark
-
-    +transition(background, $transition-length)
-
-    img
-        position: relative
-        bottom: 3px
-        display: inline-block
-        width: 30px
-
-.login
-    height: 40px
-    background: $blue
-    border: none
-    padding-top: 10px
-    +clickable
-
-    &:hover
-        background: $blue-dark
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
index dbdba212..03a4894b 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import './BlinkingCursor.sass'
+import { blinkingCursor } from './BlinkingCursor.module.scss'
 
-const BlinkingCursor = () => <span className="blinking-cursor">_</span>
+const BlinkingCursor = () => <span className={blinkingCursor}>_</span>
 
 export default BlinkingCursor
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
new file mode 100644
index 00000000..aba0c604
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
@@ -0,0 +1,13 @@
+.blinkingCursor {
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    from,
+    to {
+        color: #eeeeee;
+    }
+    50% {
+        color: #333333;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass
deleted file mode 100644
index ad91df85..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.blinking-cursor
-    -webkit-animation: 1s blink step-end infinite
-    -moz-animation: 1s blink step-end infinite
-    -o-animation: 1s blink step-end infinite
-    animation: 1s blink step-end infinite
-
-@keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-moz-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-webkit-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-ms-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
-
-@-o-keyframes blink
-    from, to
-        color: #eeeeee
-    50%
-        color: #333333
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
index bcc522c9..6ded4350 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './CodeBlock.sass'
+import { codeBlock } from './CodeBlock.module.scss'
 
 const CodeBlock = () => {
     const textBlock =
@@ -22,7 +22,7 @@ const CodeBlock = () => {
         }
     }
 
-    return <div className="code-block" dangerouslySetInnerHTML={{ __html: textBlock }} />
+    return <div className={codeBlock} dangerouslySetInnerHTML={{ __html: textBlock }} />
 }
 
 export default CodeBlock
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
new file mode 100644
index 00000000..8af3ee6d
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
@@ -0,0 +1,4 @@
+.codeBlock {
+    white-space: pre-wrap;
+    margin-top: 60px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass
deleted file mode 100644
index e452f917..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-.code-block
-    white-space: pre-wrap
-    margin-top: 60px
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
index a25e558a..b38fc183 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
-import './TerminalWindow.sass'
+import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
 
 const TerminalWindow = () => (
-    <div className="terminal-window">
-        <div className="terminal-header">Terminal -- bash</div>
-        <div className="terminal-body">
-            <div className="segfault">
+    <div className={terminalWindow}>
+        <div className={terminalHeader}>Terminal -- bash</div>
+        <div className={terminalBody}>
+            <div className={segfault}>
                 $ status
                 <br />
                 opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
@@ -19,11 +19,11 @@ const TerminalWindow = () => (
                 <br />
             </div>
             <CodeBlock />
-            <div className="sub-title">
+            <div className={subTitle}>
                 Got lost?
                 <BlinkingCursor />
             </div>
-            <Link to="/" className="home-btn">
+            <Link to="/" className={homeBtn}>
                 <span className="fa fa-home" /> GET ME BACK TO OPENDC
             </Link>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
new file mode 100644
index 00000000..614852d3
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
@@ -0,0 +1,61 @@
+.terminalWindow {
+    display: block;
+    align-self: center;
+
+    margin: auto;
+
+    user-select: none;
+    cursor: default;
+
+    overflow: hidden;
+
+    box-shadow: 5px 5px 20px #444444;
+}
+
+.terminalHeader {
+    font-family: monospace;
+    background: #cccccc;
+    color: #444444;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 10px;
+
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+}
+
+.terminalBody {
+    font-family: monospace;
+    text-align: center;
+    background-color: #333333;
+    color: #eeeeee;
+    padding: 10px;
+
+    height: 100%;
+}
+
+.segfault {
+    text-align: left;
+}
+
+.subTitle {
+    margin-top: 20px;
+}
+
+.homeBtn {
+    margin-top: 10px;
+    padding: 5px;
+    display: inline-block;
+    border: 1px solid #eeeeee;
+    color: #eeeeee;
+    text-decoration: none;
+    cursor: pointer;
+
+    transition: all 200ms;
+
+    &:hover,
+    &:active {
+        background: #eeeeee;
+        color: #333333;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass
deleted file mode 100644
index 7f05335a..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.sass
+++ /dev/null
@@ -1,70 +0,0 @@
-.terminal-window
-    width: 600px
-    height: 400px
-    display: block
-
-    position: absolute
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-
-    margin: auto
-
-    -webkit-user-select: none
-    -moz-user-select: none
-    -ms-user-select: none
-    user-select: none
-    cursor: default
-
-    overflow: hidden
-
-    box-shadow: 5px 5px 20px #444444
-
-.terminal-header
-    font-family: monospace
-    background: #cccccc
-    color: #444444
-    height: 30px
-    line-height: 30px
-    padding-left: 10px
-
-    border-top-left-radius: 7px
-    border-top-right-radius: 7px
-
-.terminal-body
-    font-family: monospace
-    text-align: center
-    background-color: #333333
-    color: #eeeeee
-    padding: 10px
-
-    height: 100%
-
-.segfault
-    text-align: left
-
-.sub-title
-    margin-top: 20px
-
-.home-btn
-    margin-top: 10px
-    padding: 5px
-    display: inline-block
-    border: 1px solid #eeeeee
-    color: #eeeeee
-    text-decoration: none
-    cursor: pointer
-
-    -webkit-transition: all 200ms
-    -moz-transition: all 200ms
-    -o-transition: all 200ms
-    transition: all 200ms
-
-.home-btn:hover
-    background: #eeeeee
-    color: #333333
-
-.home-btn:active
-    background: #333333
-    color: #eeeeee
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 2b9795d0..89b483fb 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.sass'
+import { filterPanel } from './FilterPanel.module.scss'
 
 const FilterPanel = () => (
-    <div className="btn-group filter-panel mb-2">
+    <div className={`btn-group ${filterPanel} mb-2`}>
         <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
         <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
         <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
new file mode 100644
index 00000000..79cdf81a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+
+    button {
+        flex: 1 !important;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
deleted file mode 100644
index f71cf6c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.filter-panel
-    display: flex
-
-    button
-        flex: 1 !important
-- 
cgit v1.2.3


From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../src/components/app/map/MapStageComponent.js    | 118 ++++++++++-----------
 .../app/sidebars/project/PortfolioListComponent.js |  13 +--
 .../app/sidebars/project/ScenarioListComponent.js  |  13 ++-
 .../src/components/modals/ConfirmationModal.js     |  48 ++++-----
 .../components/navigation/AppNavbarComponent.js    |  20 ++--
 .../src/components/navigation/LogoutButton.js      |   3 +-
 .../src/components/navigation/Navbar.js            |  47 +++++---
 .../src/components/not-found/TerminalWindow.js     |   8 +-
 .../components/projects/ProjectActionButtons.js    |   8 +-
 9 files changed, 142 insertions(+), 136 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 7ca10792..dd32927f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
 import MapLayer from '../../../containers/app/map/layers/MapLayer'
@@ -6,85 +6,75 @@ import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLaye
 import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
 import { NAVBAR_HEIGHT } from '../../navigation/Navbar'
 import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants'
-import { Provider } from 'react-redux'
-import { store } from '../../../store/configure-store'
+import { Provider, useStore } from 'react-redux'
 
-class MapStageComponent extends React.Component {
-    state = {
-        mouseX: 0,
-        mouseY: 0,
+function MapStageComponent({
+    mapDimensions,
+    mapPosition,
+    setMapDimensions,
+    setMapPositionWithBoundsCheck,
+    zoomInOnPosition,
+}) {
+    const [pos, setPos] = useState([0, 0])
+    const stage = useRef(null)
+    const [x, y] = pos
+    const handlers = {
+        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
     }
 
-    constructor(props) {
-        super(props)
+    const moveWithDelta = (deltaX, deltaY) =>
+        setMapPositionWithBoundsCheck(mapPosition.x + deltaX, mapPosition.y + deltaY)
+    const updateMousePosition = () => {
+        if (!stage.current) {
+            return
+        }
 
-        this.updateDimensions = this.updateDimensions.bind(this)
-        this.updateScale = this.updateScale.bind(this)
+        const mousePos = stage.current.getStage().getPointerPosition()
+        setPos([mousePos.x, mousePos.y])
     }
+    const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
+    const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
 
-    componentDidMount() {
-        this.updateDimensions()
+    useEffect(() => {
+        updateDimensions()
 
-        window.addEventListener('resize', this.updateDimensions)
-        window.addEventListener('wheel', this.updateScale)
+        window.addEventListener('resize', updateDimensions)
+        window.addEventListener('wheel', updateScale)
 
         window['exportCanvasToImage'] = () => {
             const download = document.createElement('a')
-            download.href = this.stage.getStage().toDataURL()
+            download.href = stage.current.getStage().toDataURL()
             download.download = 'opendc-canvas-export-' + Date.now() + '.png'
             download.click()
         }
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.updateDimensions)
-        window.removeEventListener('wheel', this.updateScale)
-    }
-
-    updateDimensions() {
-        this.props.setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
-    }
-
-    updateScale(e) {
-        this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
-    }
-
-    updateMousePosition() {
-        const mousePos = this.stage.getStage().getPointerPosition()
-        this.setState({ mouseX: mousePos.x, mouseY: mousePos.y })
-    }
 
-    handlers = {
-        MOVE_LEFT: () => this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_RIGHT: () => this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_UP: () => this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
-        MOVE_DOWN: () => this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
-    }
+        return () => {
+            window.removeEventListener('resize', updateDimensions)
+            window.removeEventListener('wheel', updateScale)
+        }
+    }, [])
 
-    moveWithDelta(deltaX, deltaY) {
-        this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY)
-    }
+    const store = useStore()
 
-    render() {
-        return (
-            <HotKeys handlers={this.handlers}>
-                <Stage
-                    ref={(stage) => {
-                        this.stage = stage
-                    }}
-                    width={this.props.mapDimensions.width}
-                    height={this.props.mapDimensions.height}
-                    onMouseMove={this.updateMousePosition.bind(this)}
-                >
-                    <Provider store={store}>
-                        <MapLayer />
-                        <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
-                        <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
-                    </Provider>
-                </Stage>
-            </HotKeys>
-        )
-    }
+    return (
+        <HotKeys handlers={handlers} allowChanges={true}>
+            <Stage
+                ref={stage}
+                width={mapDimensions.width}
+                height={mapDimensions.height}
+                onMouseMove={updateMousePosition}
+            >
+                <Provider store={store}>
+                    <MapLayer />
+                    <RoomHoverLayer mouseX={x} mouseY={y} />
+                    <ObjectHoverLayer mouseX={x} mouseY={y} />
+                </Provider>
+            </Stage>
+        </HotKeys>
+    )
 }
 
 export default MapStageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index b000b9e2..b714a7d2 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 
@@ -44,11 +44,12 @@ class PortfolioListComponent extends React.Component {
                                 {portfolio.name}
                             </div>
                             <div className="col-5 text-right">
-                                <Link
-                                    className="btn btn-outline-primary mr-1 fa fa-play"
-                                    to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}
-                                    onClick={() => this.props.onChoosePortfolio(portfolio._id)}
-                                />
+                                <Link href={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}>
+                                    <a
+                                        className="btn btn-outline-primary mr-1 fa fa-play"
+                                        onClick={() => this.props.onChoosePortfolio(portfolio._id)}
+                                    />
+                                </Link>
                                 <span
                                     className="btn btn-outline-danger fa fa-trash"
                                     onClick={() => this.onDelete(portfolio._id)}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index e775a663..4efa99ef 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
 class ScenarioListComponent extends React.Component {
@@ -34,10 +34,13 @@ class ScenarioListComponent extends React.Component {
                         </div>
                         <div className="col-5 text-right">
                             <Link
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                            >
+                                <a
+                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
+                                />
+                            </Link>
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
                                 onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
diff --git a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
index 589047dc..5a95810a 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
@@ -2,36 +2,26 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Modal from './Modal'
 
-class ConfirmationModal extends React.Component {
-    static propTypes = {
-        title: PropTypes.string.isRequired,
-        message: PropTypes.string.isRequired,
-        show: PropTypes.bool.isRequired,
-        callback: PropTypes.func.isRequired,
-    }
-
-    onConfirm() {
-        this.props.callback(true)
-    }
-
-    onCancel() {
-        this.props.callback(false)
-    }
+function ConfirmationModal({ title, message, show, callback }) {
+    return (
+        <Modal
+            title={title}
+            show={show}
+            onSubmit={() => callback(true)}
+            onCancel={() => callback(false)}
+            submitButtonType="danger"
+            submitButtonText="Confirm"
+        >
+            {message}
+        </Modal>
+    )
+}
 
-    render() {
-        return (
-            <Modal
-                title={this.props.title}
-                show={this.props.show}
-                onSubmit={this.onConfirm.bind(this)}
-                onCancel={this.onCancel.bind(this)}
-                submitButtonType="danger"
-                submitButtonText="Confirm"
-            >
-                {this.props.message}
-            </Modal>
-        )
-    }
+ConfirmationModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    show: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
 }
 
 export default ConfirmationModal
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index 8c28c542..7b1eaae2 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import {} from './Navbar.module.scss'
@@ -8,16 +8,20 @@ import {} from './Navbar.module.scss'
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
-            <NavLink tag={Link} title="My Projects" to="/projects">
-                <FontAwesome name="list" className="mr-2" />
-                My Projects
-            </NavLink>
+            <Link href="/projects">
+                <NavLink title="My Projects">
+                    <FontAwesome name="list" className="mr-2" />
+                    My Projects
+                </NavLink>
+            </Link>
         </NavItem>
         {project ? (
             <NavItem>
-                <NavLink tag={Link} title="Current Project" to={`/projects/${project._id}`}>
-                    <span>{project.name}</span>
-                </NavLink>
+                <Link href={`/projects/${project._id}`}>
+                    <NavLink title="Current Project">
+                        <span>{project.name}</span>
+                    </NavLink>
+                </Link>
             </NavItem>
         ) : undefined}
     </Navbar>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
index 78b02b44..0c0feeb1 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router-dom'
 import { NavLink } from 'reactstrap'
 
 const LogoutButton = ({ onLogout }) => (
-    <NavLink tag={Link} className="logout" title="Sign out" to="#" onClick={onLogout}>
+    <NavLink className="logout" title="Sign out" onClick={onLogout}>
         <FontAwesome name="power-off" size="lg" />
     </NavLink>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index bf18f1c4..90f55665 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import {
     Navbar as RNavbar,
     NavItem as RNavItem,
@@ -15,6 +16,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
+import { useAuth } from '../../auth/hook'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -24,32 +26,45 @@ const GitHubLink = () => (
         className="ml-2 mr-3 text-dark"
         style={{ position: 'relative', top: 7 }}
     >
-        <span className="fa fa-github fa-2x" />
+        <span aria-hidden className="fa fa-github fa-2x" />
     </a>
 )
 
 export const NavItem = ({ route, children }) => {
-    const location = useLocation()
-    return <RNavItem active={location.pathname === route}>{children}</RNavItem>
+    const router = useRouter()
+    const handleClick = (e) => {
+        e.preventDefault()
+        router.push(route)
+    }
+    return (
+        <RNavItem onClick={handleClick} active={router.asPath === route}>
+            {children}
+        </RNavItem>
+    )
 }
 
 export const LoggedInSection = () => {
-    const location = useLocation()
+    const router = useRouter()
+    const isLoggedIn = useAuth()
     return (
         <Nav navbar className="auth-links">
-            {userIsLoggedIn() ? (
+            {isLoggedIn ? (
                 [
-                    location.pathname === '/' ? (
+                    router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
-                            <NavLink tag={Link} title="My Projects" to="/projects">
-                                My Projects
-                            </NavLink>
+                            <Link href="/projects">
+                                <NavLink title="My Projects" to="/projects">
+                                    My Projects
+                                </NavLink>
+                            </Link>
                         </NavItem>
                     ) : (
                         <NavItem route="/profile" key="profile">
-                            <NavLink tag={Link} title="My Profile" to="/profile">
-                                <ProfileName />
-                            </NavLink>
+                            <Link href="/profile">
+                                <NavLink title="My Profile">
+                                    <ProfileName />
+                                </NavLink>
+                            </Link>
                         </NavItem>
                     ),
                     <NavItem route="logout" key="logout">
@@ -57,10 +72,10 @@ export const LoggedInSection = () => {
                     </NavItem>,
                 ]
             ) : (
-                <NavItem route="login">
+                <RNavItem>
                     <GitHubLink />
                     <Login visible={true} className={login} />
-                </NavItem>
+                </RNavItem>
             )}
         </Nav>
     )
@@ -74,7 +89,7 @@ const Navbar = ({ fullWidth, children }) => {
         <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
-                <NavbarBrand tag={Link} to="/" title="OpenDC" className={opendcBrand}>
+                <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
                     <img src="/img/logo.png" alt="OpenDC" />
                 </NavbarBrand>
 
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
index b38fc183..28fd81e9 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
 import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
@@ -23,8 +23,10 @@ const TerminalWindow = () => (
                 Got lost?
                 <BlinkingCursor />
             </div>
-            <Link to="/" className={homeBtn}>
-                <span className="fa fa-home" /> GET ME BACK TO OPENDC
+            <Link href="/">
+                <a className={homeBtn}>
+                    <span className="fa fa-home" /> GET ME BACK TO OPENDC
+                </a>
             </Link>
         </div>
     </div>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 1c76cc7f..48cce019 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
-        <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
-            <span className="fa fa-play" />
+        <Link href={`/projects/${projectId}`}>
+            <a className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
+                <span className="fa fa-play" />
+            </a>
         </Link>
         <div
             className="btn btn-outline-success btn-sm disabled mr-2"
-- 
cgit v1.2.3


From 24147cba0f5723be3525e8f40d1954144841629b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 13:00:00 +0200
Subject: ui: Address technical dept in frontend

---
 .../src/components/app/map/MapStageComponent.js    |   2 +-
 .../components/app/map/elements/ImageComponent.js  |  54 ++++-------
 .../src/components/app/map/elements/RoomTile.js    |   4 +-
 .../src/components/app/map/elements/WallSegment.js |   4 +-
 .../src/components/app/map/groups/RackGroup.js     |   4 +-
 .../src/components/app/map/groups/RoomGroup.js     |   4 +-
 .../src/components/app/map/groups/TileGroup.js     |   4 +-
 .../src/components/app/map/groups/TopologyGroup.js |   6 +-
 .../src/components/app/map/groups/WallGroup.js     |   4 +-
 .../app/map/layers/HoverLayerComponent.js          | 104 +++++++++-----------
 .../app/results/PortfolioResultsComponent.js       |   6 +-
 .../app/sidebars/project/PortfolioListComponent.js | 106 ++++++++++-----------
 .../app/sidebars/project/ScenarioListComponent.js  | 105 ++++++++++----------
 .../app/sidebars/project/TopologyListComponent.js  |  91 ++++++++----------
 .../sidebars/topology/machine/UnitAddComponent.js  |  56 +++++------
 .../app/sidebars/topology/rack/MachineComponent.js |   4 +-
 .../src/components/modals/TextInputModal.js        |  75 ++++++---------
 .../custom-components/NewScenarioModalComponent.js |   8 +-
 .../custom-components/NewTopologyModalComponent.js |   4 +-
 .../src/components/navigation/Navbar.js            |   5 +-
 .../src/components/projects/ProjectAuthList.js     |   4 +-
 .../src/components/projects/ProjectAuthRow.js      |   4 +-
 22 files changed, 303 insertions(+), 355 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index dd32927f..7c97f3e4 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
 import MapLayer from '../../../containers/app/map/layers/MapLayer'
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
index 2b5c569f..7d304b6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
@@ -1,48 +1,36 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Image } from 'react-konva'
 
-class ImageComponent extends React.Component {
-    static imageCaches = {}
-    static 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,
-    }
+const imageCaches = {}
 
-    state = {
-        image: null,
-    }
+function ImageComponent({ src, x, y, width, height, opacity }) {
+    const [image, setImage] = useState(null)
 
-    componentDidMount() {
-        if (ImageComponent.imageCaches[this.props.src]) {
-            this.setState({ image: ImageComponent.imageCaches[this.props.src] })
+    useEffect(() => {
+        if (imageCaches[src]) {
+            setImage(imageCaches[src])
             return
         }
 
         const image = new window.Image()
-        image.src = this.props.src
+        image.src = src
         image.onload = () => {
-            this.setState({ image })
-            ImageComponent.imageCaches[this.props.src] = image
+            setImage(image)
+            imageCaches[src] = image
         }
-    }
+    }, [src])
 
-    render() {
-        return (
-            <Image
-                image={this.state.image}
-                x={this.props.x}
-                y={this.props.y}
-                width={this.props.width}
-                height={this.props.height}
-                opacity={this.props.opacity}
-            />
-        )
-    }
+    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
+}
+
+ImageComponent.propTypes = {
+    src: PropTypes.string.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    opacity: PropTypes.number.isRequired,
 }
 
 export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
index 43bf918e..b2cc1273 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Rect } from 'react-konva'
-import Shapes from '../../../../shapes/index'
+import { Tile } from '../../../../shapes'
 import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const RoomTile = ({ tile, color }) => (
@@ -14,7 +14,7 @@ const RoomTile = ({ tile, color }) => (
 )
 
 RoomTile.propTypes = {
-    tile: Shapes.Tile,
+    tile: Tile,
 }
 
 export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
index 8aa2aebf..ad6412c3 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Line } from 'react-konva'
-import Shapes from '../../../../shapes/index'
+import { WallSegment as WallSegmentShape } from '../../../../shapes'
 import { WALL_COLOR } from '../../../../util/colors'
 import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
 
@@ -26,7 +26,7 @@ const WallSegment = ({ wallSegment }) => {
 }
 
 WallSegment.propTypes = {
-    wallSegment: Shapes.WallSegment,
+    wallSegment: WallSegmentShape,
 }
 
 export default WallSegment
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
index eb6dc24a..40e28f01 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Group } from 'react-konva'
 import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer'
 import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer'
-import Shapes from '../../../../shapes/index'
+import { Tile } from '../../../../shapes'
 import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
 import TileObject from '../elements/TileObject'
 
@@ -19,7 +19,7 @@ const RackGroup = ({ tile }) => {
 }
 
 RackGroup.propTypes = {
-    tile: Shapes.Tile,
+    tile: Tile,
 }
 
 export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
index 1fd54687..d7c207ca 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
@@ -3,7 +3,7 @@ import { Group } from 'react-konva'
 import GrayContainer from '../../../../containers/app/map/GrayContainer'
 import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
-import Shapes from '../../../../shapes/index'
+import { Room } from '../../../../shapes'
 
 const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
@@ -42,7 +42,7 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick
 }
 
 RoomGroup.propTypes = {
-    room: Shapes.Room,
+    room: Room,
 }
 
 export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
index 1e106823..ff6ec7ec 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
 import RackContainer from '../../../../containers/app/map/RackContainer'
-import Shapes from '../../../../shapes/index'
+import { Tile } from '../../../../shapes'
 import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
 import RoomTile from '../elements/RoomTile'
 
@@ -28,7 +28,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 }
 
 TileGroup.propTypes = {
-    tile: Shapes.Tile,
+    tile: Tile,
     newTile: PropTypes.bool,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
index 6096fc8b..57107768 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Group } from 'react-konva'
 import GrayContainer from '../../../../containers/app/map/GrayContainer'
 import RoomContainer from '../../../../containers/app/map/RoomContainer'
-import Shapes from '../../../../shapes/index'
+import { InteractionLevel, Topology } from '../../../../shapes'
 
 const TopologyGroup = ({ topology, interactionLevel }) => {
     if (!topology) {
@@ -37,8 +37,8 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
 }
 
 TopologyGroup.propTypes = {
-    topology: Shapes.Topology,
-    interactionLevel: Shapes.InteractionLevel,
+    topology: Topology,
+    interactionLevel: InteractionLevel,
 }
 
 export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
index 7b0f5ca0..855d444f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
-import Shapes from '../../../../shapes/index'
+import { Tile } from '../../../../shapes/index'
 import { deriveWallLocations } from '../../../../util/tile-calculations'
 import WallSegment from '../elements/WallSegment'
 
@@ -16,7 +16,7 @@ const WallGroup = ({ tiles }) => {
 }
 
 WallGroup.propTypes = {
-    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+    tiles: PropTypes.arrayOf(Tile).isRequired,
 }
 
 export default WallGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
index bead87de..08d31dac 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
@@ -1,75 +1,63 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Layer } from 'react-konva'
 import HoverTile from '../elements/HoverTile'
 import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
-class HoverLayerComponent extends React.Component {
-    static propTypes = {
-        mouseX: PropTypes.number.isRequired,
-        mouseY: PropTypes.number.isRequired,
-        mapPosition: PropTypes.object.isRequired,
-        mapScale: PropTypes.number.isRequired,
-        isEnabled: PropTypes.func.isRequired,
-        onClick: PropTypes.func.isRequired,
-    }
-
-    state = {
-        positionX: -1,
-        positionY: -1,
-        validity: false,
-    }
+function HoverLayerComponent({ mouseX, mouseY, mapPosition, mapScale, isEnabled, isValid, onClick, children }) {
+    const [pos, setPos] = useState([-1, -1])
+    const [x, y] = pos
+    const [valid, setValid] = useState(false)
 
-    componentDidUpdate() {
-        if (!this.props.isEnabled()) {
+    useEffect(() => {
+        if (!isEnabled()) {
             return
         }
 
-        const positionX = Math.floor(
-            (this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
-        )
-        const positionY = Math.floor(
-            (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
-        )
+        const positionX = Math.floor((mouseX - mapPosition.x) / (mapScale * TILE_SIZE_IN_PIXELS))
+        const positionY = Math.floor((mouseY - mapPosition.y) / (mapScale * TILE_SIZE_IN_PIXELS))
 
-        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
-            this.setState({
-                positionX,
-                positionY,
-                validity: this.props.isValid(positionX, positionY),
-            })
+        if (positionX !== x || positionY !== y) {
+            setPos([positionX, positionY])
+            setValid(isValid(positionX, positionY))
         }
-    }
+    }, [mouseX, mouseY, mapPosition, mapScale])
 
-    render() {
-        if (!this.props.isEnabled()) {
-            return <Layer />
-        }
+    if (!isEnabled()) {
+        return <Layer />
+    }
 
-        const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x
-        const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y
+    const pixelX = mapScale * x * TILE_SIZE_IN_PIXELS + mapPosition.x
+    const pixelY = mapScale * y * TILE_SIZE_IN_PIXELS + mapPosition.y
+
+    return (
+        <Layer opacity={0.6}>
+            <HoverTile
+                pixelX={pixelX}
+                pixelY={pixelY}
+                scale={mapScale}
+                isValid={valid}
+                onClick={() => (valid ? onClick(x, y) : undefined)}
+            />
+            {children
+                ? React.cloneElement(children, {
+                      pixelX,
+                      pixelY,
+                      scale: mapScale,
+                  })
+                : undefined}
+        </Layer>
+    )
+}
 
-        return (
-            <Layer opacity={0.6}>
-                <HoverTile
-                    pixelX={pixelX}
-                    pixelY={pixelY}
-                    scale={this.props.mapScale}
-                    isValid={this.state.validity}
-                    onClick={() =>
-                        this.state.validity ? this.props.onClick(this.state.positionX, this.state.positionY) : undefined
-                    }
-                />
-                {this.props.children
-                    ? React.cloneElement(this.props.children, {
-                          pixelX,
-                          pixelY,
-                          scale: this.props.mapScale,
-                      })
-                    : undefined}
-            </Layer>
-        )
-    }
+HoverLayerComponent.propTypes = {
+    mouseX: PropTypes.number.isRequired,
+    mouseY: PropTypes.number.isRequired,
+    mapPosition: PropTypes.object.isRequired,
+    mapScale: PropTypes.number.isRequired,
+    isEnabled: PropTypes.func.isRequired,
+    isValid: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
index 759acd57..983a5c1d 100644
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
 import { AVAILABLE_METRICS, METRIC_NAMES_SHORT, METRIC_UNITS } from '../../../util/available-metrics'
 import { mean, std } from 'mathjs'
-import Shapes from '../../../shapes/index'
+import { Portfolio, Scenario } from '../../../shapes'
 import approx from 'approximate-number'
 
 const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
@@ -86,8 +86,8 @@ const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
 }
 
 PortfolioResultsComponent.propTypes = {
-    portfolio: Shapes.Portfolio,
-    scenarios: PropTypes.arrayOf(Shapes.Scenario),
+    portfolio: Portfolio,
+    scenarios: PropTypes.arrayOf(Scenario),
 }
 
 export default PortfolioResultsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index b714a7d2..d002b473 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -1,67 +1,65 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 
-class PortfolioListComponent extends React.Component {
-    static propTypes = {
-        portfolios: PropTypes.arrayOf(Shapes.Portfolio),
-        currentProjectId: PropTypes.string.isRequired,
-        currentPortfolioId: PropTypes.string,
-        onNewPortfolio: PropTypes.func.isRequired,
-        onChoosePortfolio: PropTypes.func.isRequired,
-        onDeletePortfolio: PropTypes.func.isRequired,
-    }
+function PortfolioListComponent({
+    portfolios,
+    currentProjectId,
+    currentPortfolioId,
+    onNewPortfolio,
+    onChoosePortfolio,
+    onDeletePortfolio,
+}) {
+    return (
+        <div className="pb-3">
+            <h2>
+                Portfolios
+                <button className="btn btn-outline-primary float-right" onClick={(e) => onNewPortfolio(e)}>
+                    <FontAwesome name="plus" />
+                </button>
+            </h2>
 
-    onDelete(id) {
-        this.props.onDeletePortfolio(id)
-    }
-
-    render() {
-        return (
-            <div className="pb-3">
-                <h2>
-                    Portfolios
-                    <button
-                        className="btn btn-outline-primary float-right"
-                        onClick={this.props.onNewPortfolio.bind(this)}
-                    >
-                        <FontAwesome name="plus" />
-                    </button>
-                </h2>
-
-                {this.props.portfolios.map((portfolio, idx) => (
-                    <div key={portfolio._id}>
-                        <div className="row mb-1">
-                            <div
-                                className={
-                                    'col-7 align-self-center ' +
-                                    (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')
-                                }
-                            >
-                                {portfolio.name}
-                            </div>
-                            <div className="col-5 text-right">
-                                <Link href={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}>
-                                    <a
-                                        className="btn btn-outline-primary mr-1 fa fa-play"
-                                        onClick={() => this.props.onChoosePortfolio(portfolio._id)}
-                                    />
-                                </Link>
-                                <span
-                                    className="btn btn-outline-danger fa fa-trash"
-                                    onClick={() => this.onDelete(portfolio._id)}
+            {portfolios.map((portfolio, idx) => (
+                <div key={portfolio._id}>
+                    <div className="row mb-1">
+                        <div
+                            className={
+                                'col-7 align-self-center ' +
+                                (portfolio._id === currentPortfolioId ? 'font-weight-bold' : '')
+                            }
+                        >
+                            {portfolio.name}
+                        </div>
+                        <div className="col-5 text-right">
+                            <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
+                                <a
+                                    className="btn btn-outline-primary mr-1 fa fa-play"
+                                    onClick={() => onChoosePortfolio(portfolio._id)}
                                 />
-                            </div>
+                            </Link>
+                            <span
+                                className="btn btn-outline-danger fa fa-trash"
+                                onClick={() => onDeletePortfolio(portfolio._id)}
+                            />
                         </div>
-                        <ScenarioListContainer portfolioId={portfolio._id} />
                     </div>
-                ))}
-            </div>
-        )
-    }
+                    <ScenarioListContainer portfolioId={portfolio._id} />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+PortfolioListComponent.propTypes = {
+    portfolios: PropTypes.arrayOf(Portfolio),
+    currentProjectId: PropTypes.string.isRequired,
+    currentPortfolioId: PropTypes.string,
+    onNewPortfolio: PropTypes.func.isRequired,
+    onChoosePortfolio: PropTypes.func.isRequired,
+    onDeletePortfolio: PropTypes.func.isRequired,
 }
 
 export default PortfolioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 4efa99ef..26543d12 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,65 +1,64 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
-class ScenarioListComponent extends React.Component {
-    static propTypes = {
-        scenarios: PropTypes.arrayOf(Shapes.Scenario),
-        portfolioId: PropTypes.string,
-        currentProjectId: PropTypes.string.isRequired,
-        currentScenarioId: PropTypes.string,
-        onNewScenario: PropTypes.func.isRequired,
-        onChooseScenario: PropTypes.func.isRequired,
-        onDeleteScenario: PropTypes.func.isRequired,
-    }
-
-    onDelete(id) {
-        this.props.onDeleteScenario(id)
-    }
-
-    render() {
-        return (
-            <>
-                {this.props.scenarios.map((scenario, idx) => (
-                    <div key={scenario._id} className="row mb-1">
-                        <div
-                            className={
-                                'col-7 pl-5 align-self-center ' +
-                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
-                            }
-                        >
-                            {scenario.name}
-                        </div>
-                        <div className="col-5 text-right">
-                            <Link
-                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                            >
-                                <a
-                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                                />
-                            </Link>
-                            <span
-                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
-                            />
-                        </div>
-                    </div>
-                ))}
-                <div className="pl-4 mb-2">
+function ScenarioListComponent({
+    scenarios,
+    portfolioId,
+    currentProjectId,
+    currentScenarioId,
+    onNewScenario,
+    onChooseScenario,
+    onDeleteScenario,
+}) {
+    return (
+        <>
+            {scenarios.map((scenario, idx) => (
+                <div key={scenario._id} className="row mb-1">
                     <div
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                        className={
+                            'col-7 pl-5 align-self-center ' +
+                            (scenario._id === currentScenarioId ? 'font-weight-bold' : '')
+                        }
                     >
-                        <FontAwesome name="plus" className="mr-1" />
-                        New scenario
+                        {scenario.name}
                     </div>
+                    <div className="col-5 text-right">
+                        <Link
+                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                        >
+                            <a
+                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
+                            />
+                        </Link>
+                        <span
+                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
+                        />
+                    </div>
+                </div>
+            ))}
+            <div className="pl-4 mb-2">
+                <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}>
+                    <FontAwesome name="plus" className="mr-1" />
+                    New scenario
                 </div>
-            </>
-        )
-    }
+            </div>
+        </>
+    )
+}
+
+ScenarioListComponent.propTypes = {
+    scenarios: PropTypes.arrayOf(Scenario),
+    portfolioId: PropTypes.string,
+    currentProjectId: PropTypes.string.isRequired,
+    currentScenarioId: PropTypes.string,
+    onNewScenario: PropTypes.func.isRequired,
+    onChooseScenario: PropTypes.func.isRequired,
+    onDeleteScenario: PropTypes.func.isRequired,
 }
 
 export default ScenarioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
index 2f42f7e4..a7d78c4a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
@@ -1,60 +1,49 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../../../shapes'
+import { Topology } from '../../../../shapes'
 import FontAwesome from 'react-fontawesome'
 
-class TopologyListComponent extends React.Component {
-    static propTypes = {
-        topologies: PropTypes.arrayOf(Shapes.Topology),
-        currentTopologyId: PropTypes.string,
-        onChooseTopology: PropTypes.func.isRequired,
-        onNewTopology: PropTypes.func.isRequired,
-        onDeleteTopology: PropTypes.func.isRequired,
-    }
+function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
+    return (
+        <div className="pb-3">
+            <h2>
+                Topologies
+                <button className="btn btn-outline-primary float-right" onClick={onNewTopology}>
+                    <FontAwesome name="plus" />
+                </button>
+            </h2>
 
-    onChoose(id) {
-        this.props.onChooseTopology(id)
-    }
-
-    onDelete(id) {
-        this.props.onDeleteTopology(id)
-    }
-
-    render() {
-        return (
-            <div className="pb-3">
-                <h2>
-                    Topologies
-                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
-                        <FontAwesome name="plus" />
-                    </button>
-                </h2>
-
-                {this.props.topologies.map((topology, idx) => (
-                    <div key={topology._id} className="row mb-1">
-                        <div
-                            className={
-                                'col-7 align-self-center ' +
-                                (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')
-                            }
-                        >
-                            {topology.name}
-                        </div>
-                        <div className="col-5 text-right">
-                            <span
-                                className="btn btn-outline-primary mr-1 fa fa-play"
-                                onClick={() => this.onChoose(topology._id)}
-                            />
-                            <span
-                                className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => (idx !== 0 ? this.onDelete(topology._id) : undefined)}
-                            />
-                        </div>
+            {topologies.map((topology, idx) => (
+                <div key={topology._id} className="row mb-1">
+                    <div
+                        className={
+                            'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '')
+                        }
+                    >
+                        {topology.name}
                     </div>
-                ))}
-            </div>
-        )
-    }
+                    <div className="col-5 text-right">
+                        <span
+                            className="btn btn-outline-primary mr-1 fa fa-play"
+                            onClick={() => onChooseTopology(topology._id)}
+                        />
+                        <span
+                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                            onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}
+
+TopologyListComponent.propTypes = {
+    topologies: PropTypes.arrayOf(Topology),
+    currentTopologyId: PropTypes.string,
+    onChooseTopology: PropTypes.func.isRequired,
+    onNewTopology: PropTypes.func.isRequired,
+    onDeleteTopology: PropTypes.func.isRequired,
 }
 
 export default TopologyListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 4e9dbc7e..f80fccc8 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,35 +1,35 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
 
-class UnitAddComponent extends React.Component {
-    static propTypes = {
-        units: PropTypes.array.isRequired,
-        onAdd: PropTypes.func.isRequired,
-    }
+function UnitAddComponent({ units, onAdd }) {
+    const unitSelect = useRef(null)
 
-    render() {
-        return (
-            <div className="form-inline">
-                <div className="form-group w-100">
-                    <select className="form-control w-70 mr-1" ref={(unitSelect) => (this.unitSelect = unitSelect)}>
-                        {this.props.units.map((unit) => (
-                            <option value={unit._id} key={unit._id}>
-                                {unit.name}
-                            </option>
-                        ))}
-                    </select>
-                    <button
-                        type="submit"
-                        className="btn btn-outline-primary"
-                        onClick={() => this.props.onAdd(this.unitSelect.value)}
-                    >
-                        <span className="fa fa-plus mr-2" />
-                        Add
-                    </button>
-                </div>
+    return (
+        <div className="form-inline">
+            <div className="form-group w-100">
+                <select className="form-control w-70 mr-1" ref={unitSelect}>
+                    {units.map((unit) => (
+                        <option value={unit._id} key={unit._id}>
+                            {unit.name}
+                        </option>
+                    ))}
+                </select>
+                <button
+                    type="submit"
+                    className="btn btn-outline-primary"
+                    onClick={() => onAdd(unitSelect.current.value)}
+                >
+                    <span className="fa fa-plus mr-2" />
+                    Add
+                </button>
             </div>
-        )
-    }
+        </div>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
 }
 
 export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index caa3dc04..4db0e7fe 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Shapes from '../../../../../shapes'
+import { Machine } from '../../../../../shapes'
 
 const UnitIcon = ({ id, type }) => (
     <div>
@@ -37,7 +37,7 @@ const MachineComponent = ({ position, machine, onClick }) => {
 }
 
 MachineComponent.propTypes = {
-    machine: Shapes.Machine,
+    machine: Machine,
 }
 
 export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
index d0918c7e..6758fdc0 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
@@ -1,54 +1,41 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef } from 'react'
 import Modal from './Modal'
 
-class TextInputModal extends React.Component {
-    static propTypes = {
-        title: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired,
-        show: PropTypes.bool.isRequired,
-        callback: PropTypes.func.isRequired,
-        initialValue: PropTypes.string,
+function TextInputModal({ title, label, show, callback, initialValue }) {
+    const textInput = useRef(null)
+    const onSubmit = () => {
+        callback(textInput.current.value)
+        textInput.current.value = ''
     }
-
-    componentDidUpdate() {
-        if (this.props.initialValue && this.textInput) {
-            this.textInput.value = this.props.initialValue
-        }
-    }
-
-    onSubmit() {
-        this.props.callback(this.textInput.value)
-        this.textInput.value = ''
-    }
-
-    onCancel() {
-        this.props.callback(undefined)
-        this.textInput.value = ''
+    const onCancel = () => {
+        callback(undefined)
+        textInput.current.value = ''
     }
 
-    render() {
-        return (
-            <Modal
-                title={this.props.title}
-                show={this.props.show}
-                onSubmit={this.onSubmit.bind(this)}
-                onCancel={this.onCancel.bind(this)}
+    return (
+        <Modal title={title} show={show} onSubmit={onSubmit} onCancel={onCancel}>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    onSubmit()
+                }}
             >
-                <form
-                    onSubmit={(e) => {
-                        e.preventDefault()
-                        this.onSubmit()
-                    }}
-                >
-                    <div className="form-group">
-                        <label className="form-control-label">{this.props.label}</label>
-                        <input type="text" className="form-control" ref={(textInput) => (this.textInput = textInput)} />
-                    </div>
-                </form>
-            </Modal>
-        )
-    }
+                <div className="form-group">
+                    <label className="form-control-label">{label}</label>
+                    <input type="text" className="form-control" ref={textInput} defaultValue={initialValue} />
+                </div>
+            </form>
+        </Modal>
+    )
+}
+
+TextInputModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    show: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+    initialValue: PropTypes.string,
 }
 
 export default TextInputModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
index 01a5719c..782812ac 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 import { Form, FormGroup, Input, Label } from 'reactstrap'
-import Shapes from '../../../shapes'
+import { Scheduler, Topology, Trace } from '../../../shapes'
 import Modal from '../Modal'
 
 const NewScenarioModalComponent = ({
@@ -135,9 +135,9 @@ NewScenarioModalComponent.propTypes = {
     show: PropTypes.bool.isRequired,
     currentPortfolioId: PropTypes.string.isRequired,
     currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string),
-    traces: PropTypes.arrayOf(Shapes.Trace),
-    topologies: PropTypes.arrayOf(Shapes.Topology),
-    schedulers: PropTypes.arrayOf(Shapes.Scheduler),
+    traces: PropTypes.arrayOf(Trace),
+    topologies: PropTypes.arrayOf(Topology),
+    schedulers: PropTypes.arrayOf(Scheduler),
     callback: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
index 9fee8831..f06fe797 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { Form, FormGroup, Input, Label } from 'reactstrap'
 import React, { useRef } from 'react'
-import Shapes from '../../../shapes'
+import { Topology } from '../../../shapes'
 import Modal from '../Modal'
 
 const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
@@ -62,7 +62,7 @@ const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology
 
 NewTopologyModalComponent.propTypes = {
     show: PropTypes.bool.isRequired,
-    topologies: PropTypes.arrayOf(Shapes.Topology),
+    topologies: PropTypes.arrayOf(Topology),
     onCreateTopology: PropTypes.func.isRequired,
     onDuplicateTopology: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 90f55665..025d33a1 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -11,12 +11,11 @@ import {
     Nav,
     Container,
 } from 'reactstrap'
-import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useAuth } from '../../auth/hook'
+import { useIsLoggedIn } from '../../auth/hook'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -45,7 +44,7 @@ export const NavItem = ({ route, children }) => {
 
 export const LoggedInSection = () => {
     const router = useRouter()
-    const isLoggedIn = useAuth()
+    const isLoggedIn = useIsLoggedIn()
     return (
         <Nav navbar className="auth-links">
             {isLoggedIn ? (
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
index 8eb4f93b..15147e08 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../shapes/index'
+import { Authorization } from '../../shapes'
 import ProjectAuthRow from './ProjectAuthRow'
 
 const ProjectAuthList = ({ authorizations }) => {
@@ -33,7 +33,7 @@ const ProjectAuthList = ({ authorizations }) => {
 }
 
 ProjectAuthList.propTypes = {
-    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+    authorizations: PropTypes.arrayOf(Authorization).isRequired,
 }
 
 export default ProjectAuthList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
index 3f904061..1c1d5cd8 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import ProjectActions from '../../containers/projects/ProjectActions'
-import Shapes from '../../shapes/index'
+import { Authorization } from '../../shapes/index'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
 
@@ -18,7 +18,7 @@ const ProjectAuthRow = ({ projectAuth }) => (
 )
 
 ProjectAuthRow.propTypes = {
-    projectAuth: Shapes.Authorization.isRequired,
+    projectAuth: Authorization.isRequired,
 }
 
 export default ProjectAuthRow
-- 
cgit v1.2.3


From 1891a6f3963d3ddeae0ea093f9a7e3608a97b4d7 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 16:35:01 +0200
Subject: ui: Simplify projects page

This change simplifies the logic and components of the projects page and
reduces its dependency on Redux for simple operations.
---
 .../src/components/projects/FilterButton.js        | 24 -------------
 .../src/components/projects/FilterPanel.js         | 29 ++++++++++++----
 .../projects/NewProjectButtonComponent.js          | 17 ----------
 .../components/projects/ProjectActionButtons.js    | 19 +++++++----
 .../src/components/projects/ProjectAuthList.js     | 39 ----------------------
 .../src/components/projects/ProjectAuthRow.js      | 24 -------------
 .../src/components/projects/ProjectList.js         | 39 ++++++++++++++++++++++
 .../src/components/projects/ProjectRow.js          | 24 +++++++++++++
 8 files changed, 97 insertions(+), 118 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
deleted file mode 100644
index 664f9b46..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const FilterButton = ({ active, children, onClick }) => (
-    <button
-        className={classNames('btn btn-secondary', { active: active })}
-        onClick={() => {
-            if (!active) {
-                onClick()
-            }
-        }}
-    >
-        {children}
-    </button>
-)
-
-FilterButton.propTypes = {
-    active: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default FilterButton
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 89b483fb..5129c013 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,13 +1,28 @@
 import React from 'react'
-import FilterLink from '../../containers/projects/FilterLink'
+import PropTypes from 'prop-types'
+import { Button, ButtonGroup } from 'reactstrap'
 import { filterPanel } from './FilterPanel.module.scss'
 
-const FilterPanel = () => (
-    <div className={`btn-group ${filterPanel} mb-2`}>
-        <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
-        <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
-        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-    </div>
+export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
+
+const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
+    <ButtonGroup className={`${filterPanel} mb-2`}>
+        {Object.keys(FILTERS).map((filter) => (
+            <Button
+                color="secondary"
+                key={filter}
+                onClick={() => activeFilter === filter || onSelect(filter)}
+                active={activeFilter === filter}
+            >
+                {FILTERS[filter]}
+            </Button>
+        ))}
+    </ButtonGroup>
 )
 
+FilterPanel.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    activeFilter: PropTypes.string,
+}
+
 export default FilterPanel
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
deleted file mode 100644
index 312671c6..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const NewProjectButtonComponent = ({ onClick }) => (
-    <div className="bottom-btn-container">
-        <div className="btn btn-primary float-right" onClick={onClick}>
-            <span className="fa fa-plus mr-2" />
-            New Project
-        </div>
-    </div>
-)
-
-NewProjectButtonComponent.propTypes = {
-    onClick: PropTypes.func.isRequired,
-}
-
-export default NewProjectButtonComponent
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 48cce019..96970fd9 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -1,24 +1,29 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
+import { Button } from 'reactstrap'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
         <Link href={`/projects/${projectId}`}>
-            <a className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
+            <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
                 <span className="fa fa-play" />
-            </a>
+            </Button>
         </Link>
-        <div
-            className="btn btn-outline-success btn-sm disabled mr-2"
+        <Button
+            color="success"
+            outline
+            size="sm"
+            disabled
+            className="mr-2"
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
             <span className="fa fa-users" />
-        </div>
-        <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
+        </Button>
+        <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
             <span className="fa fa-trash" />
-        </div>
+        </Button>
     </td>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
deleted file mode 100644
index 15147e08..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Authorization } from '../../shapes'
-import ProjectAuthRow from './ProjectAuthRow'
-
-const ProjectAuthList = ({ authorizations }) => {
-    return (
-        <div className="vertically-expanding-container">
-            {authorizations.length === 0 ? (
-                <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2" />
-                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
-                </div>
-            ) : (
-                <table className="table table-striped">
-                    <thead>
-                        <tr>
-                            <th>Project name</th>
-                            <th>Last edited</th>
-                            <th>Access rights</th>
-                            <th />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {authorizations.map((authorization) => (
-                            <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
-                        ))}
-                    </tbody>
-                </table>
-            )}
-        </div>
-    )
-}
-
-ProjectAuthList.propTypes = {
-    authorizations: PropTypes.arrayOf(Authorization).isRequired,
-}
-
-export default ProjectAuthList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
deleted file mode 100644
index 1c1d5cd8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-import ProjectActions from '../../containers/projects/ProjectActions'
-import { Authorization } from '../../shapes/index'
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
-import { parseAndFormatDateTime } from '../../util/date-time'
-
-const ProjectAuthRow = ({ projectAuth }) => (
-    <tr>
-        <td className="pt-3">{projectAuth.project.name}</td>
-        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
-        <td className="pt-3">
-            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
-            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
-        </td>
-        <ProjectActions projectId={projectAuth.project._id} />
-    </tr>
-)
-
-ProjectAuthRow.propTypes = {
-    projectAuth: Authorization.isRequired,
-}
-
-export default ProjectAuthRow
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
new file mode 100644
index 00000000..90d42326
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Authorization } from '../../shapes'
+import ProjectRow from './ProjectRow'
+
+const ProjectList = ({ authorizations }) => {
+    return (
+        <div className="vertically-expanding-container">
+            {authorizations.length === 0 ? (
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
+                </div>
+            ) : (
+                <table className="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Project name</th>
+                            <th>Last edited</th>
+                            <th>Access rights</th>
+                            <th />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {authorizations.map((authorization) => (
+                            <ProjectRow projectAuth={authorization} key={authorization.project._id} />
+                        ))}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    )
+}
+
+ProjectList.propTypes = {
+    authorizations: PropTypes.arrayOf(Authorization).isRequired,
+}
+
+export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
new file mode 100644
index 00000000..bc63c805
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+import ProjectActions from '../../containers/projects/ProjectActions'
+import { Authorization } from '../../shapes/index'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { parseAndFormatDateTime } from '../../util/date-time'
+
+const ProjectRow = ({ projectAuth }) => (
+    <tr>
+        <td className="pt-3">{projectAuth.project.name}</td>
+        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
+        <td className="pt-3">
+            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
+            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
+        </td>
+        <ProjectActions projectId={projectAuth.project._id} />
+    </tr>
+)
+
+ProjectRow.propTypes = {
+    projectAuth: Authorization.isRequired,
+}
+
+export default ProjectRow
-- 
cgit v1.2.3


From 1edbae1a0224e30bafb98638f419e1f967a9286f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 17:42:53 +0200
Subject: ui: Move modal state outside of Redux

This change updates the frontend so that the modal state is not stored
inside Redux but instead is stored using the useState hook. This
simplifies the design of the modal components.
---
 .../app/sidebars/project/PortfolioListComponent.js | 38 +++++++++++---------
 .../sidebars/project/ProjectSidebarComponent.js    |  5 +--
 .../app/sidebars/project/ScenarioListComponent.js  | 40 +++++++++++++---------
 .../app/sidebars/project/TopologyListComponent.js  | 38 ++++++++++++--------
 .../topology/machine/DeleteMachineComponent.js     | 10 ------
 .../topology/machine/MachineNameComponent.js       |  5 ---
 .../sidebars/topology/rack/DeleteRackComponent.js  | 10 ------
 .../sidebars/topology/rack/RackNameComponent.js    |  6 ----
 .../sidebars/topology/room/EditRoomComponent.js    | 22 ------------
 .../sidebars/topology/room/RoomNameComponent.js    |  6 ----
 10 files changed, 72 insertions(+), 108 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index d002b473..ae965939 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -4,6 +4,8 @@ import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function PortfolioListComponent({
     portfolios,
@@ -17,35 +19,39 @@ function PortfolioListComponent({
         <div className="pb-3">
             <h2>
                 Portfolios
-                <button className="btn btn-outline-primary float-right" onClick={(e) => onNewPortfolio(e)}>
+                <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
                     <FontAwesome name="plus" />
-                </button>
+                </Button>
             </h2>
 
             {portfolios.map((portfolio, idx) => (
                 <div key={portfolio._id}>
-                    <div className="row mb-1">
-                        <div
-                            className={
-                                'col-7 align-self-center ' +
-                                (portfolio._id === currentPortfolioId ? 'font-weight-bold' : '')
-                            }
+                    <Row className="row mb-1">
+                        <Col
+                            xs="7"
+                            className={classNames('align-self-center', {
+                                'font-weight-bold': portfolio._id === currentPortfolioId,
+                            })}
                         >
                             {portfolio.name}
-                        </div>
-                        <div className="col-5 text-right">
+                        </Col>
+                        <Col xs="5" className="text-right">
                             <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
-                                <a
-                                    className="btn btn-outline-primary mr-1 fa fa-play"
+                                <Button
+                                    color="primary"
+                                    outline
+                                    className="mr-1 fa fa-play"
                                     onClick={() => onChoosePortfolio(portfolio._id)}
                                 />
                             </Link>
-                            <span
-                                className="btn btn-outline-danger fa fa-trash"
+                            <Button
+                                color="danger"
+                                outline
+                                className="fa fa-trash"
                                 onClick={() => onDeletePortfolio(portfolio._id)}
                             />
-                        </div>
-                    </div>
+                        </Col>
+                    </Row>
                     <ScenarioListContainer portfolioId={portfolio._id} />
                 </div>
             ))}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
index 4789315e..7dd13663 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -2,13 +2,14 @@ import React from 'react'
 import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
 import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
+import { Container } from 'reactstrap'
 
 const ProjectSidebarComponent = ({ collapsible }) => (
     <Sidebar isRight={false} collapsible={collapsible}>
-        <div className="h-100 overflow-auto container-fluid">
+        <Container fluid className="h-100 overflow-auto">
             <TopologyListContainer />
             <PortfolioListContainer />
-        </div>
+        </Container>
     </Sidebar>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 26543d12..168b8e02 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -3,6 +3,8 @@ import React from 'react'
 import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function ScenarioListComponent({
     scenarios,
@@ -16,36 +18,42 @@ function ScenarioListComponent({
     return (
         <>
             {scenarios.map((scenario, idx) => (
-                <div key={scenario._id} className="row mb-1">
-                    <div
-                        className={
-                            'col-7 pl-5 align-self-center ' +
-                            (scenario._id === currentScenarioId ? 'font-weight-bold' : '')
-                        }
+                <Row key={scenario._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('pl-5 align-self-center', {
+                            'font-weight-bold': scenario._id === currentScenarioId,
+                        })}
                     >
                         {scenario.name}
-                    </div>
-                    <div className="col-5 text-right">
+                    </Col>
+                    <Col xs="5" className="text-right">
                         <Link
                             href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
                         >
-                            <a
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                            <Button
+                                color="primary"
+                                outline
+                                disabled
+                                className="mr-1 fa fa-play"
                                 onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
                             />
                         </Link>
-                        <span
-                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                        <Button
+                            color="danger"
+                            outline
+                            className="fa fa-trash"
+                            disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
                         />
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             ))}
             <div className="pl-4 mb-2">
-                <div className="btn btn-outline-primary" onClick={() => onNewScenario(this.props.portfolioId)}>
+                <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
                     <FontAwesome name="plus" className="mr-1" />
                     New scenario
-                </div>
+                </Button>
             </div>
         </>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
index a7d78c4a..d5627abc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
@@ -2,37 +2,45 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
 import FontAwesome from 'react-fontawesome'
+import { Button, Col, Row } from 'reactstrap'
+import classNames from 'classnames'
 
 function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
     return (
         <div className="pb-3">
             <h2>
                 Topologies
-                <button className="btn btn-outline-primary float-right" onClick={onNewTopology}>
+                <Button color="primary" outline className="float-right" onClick={onNewTopology}>
                     <FontAwesome name="plus" />
-                </button>
+                </Button>
             </h2>
 
             {topologies.map((topology, idx) => (
-                <div key={topology._id} className="row mb-1">
-                    <div
-                        className={
-                            'col-7 align-self-center ' + (topology._id === currentTopologyId ? 'font-weight-bold' : '')
-                        }
+                <Row key={topology._id} className="mb-1">
+                    <Col
+                        xs="7"
+                        className={classNames('align-self-center', {
+                            'font-weight-bold': topology._id === currentTopologyId,
+                        })}
                     >
                         {topology.name}
-                    </div>
-                    <div className="col-5 text-right">
-                        <span
-                            className="btn btn-outline-primary mr-1 fa fa-play"
+                    </Col>
+                    <Col xs="5" className="text-right">
+                        <Button
+                            color="primary"
+                            outline
+                            className="mr-1 fa fa-play"
                             onClick={() => onChooseTopology(topology._id)}
                         />
-                        <span
-                            className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+                        <Button
+                            color="danger"
+                            outline
+                            className="fa fa-trash"
+                            disable={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
                         />
-                    </div>
-                </div>
+                    </Col>
+                </Row>
             ))}
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
deleted file mode 100644
index 37820316..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-const DeleteMachineComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
-        Delete this machine
-    </div>
-)
-
-export default DeleteMachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
deleted file mode 100644
index 992383c4..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react'
-
-const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2>
-
-export default MachineNameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
deleted file mode 100644
index 23b0daac..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-const DeleteRackComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
-        Delete this rack
-    </div>
-)
-
-export default DeleteRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
deleted file mode 100644
index b701909a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import NameComponent from '../NameComponent'
-
-const RackNameComponent = ({ rackName, onEdit }) => <NameComponent name={rackName} onEdit={onEdit} />
-
-export default RackNameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
deleted file mode 100644
index 857a646f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-const EditRoomComponent = ({ onEdit, onFinish, isEditing, isInRackConstructionMode }) =>
-    isEditing ? (
-        <div className="btn btn-info btn-block" onClick={onFinish}>
-            <span className="fa fa-check mr-2" />
-            Finish editing room
-        </div>
-    ) : (
-        <div
-            className={classNames('btn btn-outline-info btn-block', {
-                disabled: isInRackConstructionMode,
-            })}
-            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-        >
-            <span className="fa fa-pencil mr-2" />
-            Edit the tiles of this room
-        </div>
-    )
-
-export default EditRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js
deleted file mode 100644
index d637828e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import NameComponent from '../NameComponent'
-
-const RoomNameComponent = ({ roomName, onEdit }) => <NameComponent name={roomName} onEdit={onEdit} />
-
-export default RoomNameComponent
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js   | 2 +-
 .../opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss     | 4 ++--
 .../opendc-web-ui/src/components/home/ContentSection.module.scss      | 2 +-
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js          | 2 +-
 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss | 4 ++--
 opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js        | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
index 855d444f..c73a95a7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes/index'
+import { Tile } from '../../../../shapes'
 import { deriveWallLocations } from '../../../../util/tile-calculations'
 import WallSegment from '../elements/WallSegment'
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
index d6be4d9b..19c6a97f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
@@ -1,5 +1,5 @@
-@import '../../../style-globals/_variables.scss';
-@import '../../../style-globals/_mixins.scss';
+@import 'src/style/_variables.scss';
+@import 'src/style/_mixins.scss';
 
 .collapseButton {
     position: absolute;
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
index 3d150c93..d27a0ce0 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
@@ -1,4 +1,4 @@
-@import '../../style-globals/_variables.scss';
+@import 'src/style/_variables.scss';
 
 .contentSection {
     padding-top: 50px;
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 025d33a1..f16a3feb 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -15,7 +15,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useIsLoggedIn } from '../../auth/hook'
+import { useIsLoggedIn } from '../../auth'
 
 export const NAVBAR_HEIGHT = 60
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
index 2ea59a0f..8b9e4c97 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
@@ -1,5 +1,5 @@
-@import '../../style-globals/_mixins.scss';
-@import '../../style-globals/_variables.scss';
+@import 'src/style/_mixins.scss';
+@import 'src/style/_variables.scss';
 
 .navbar {
     border-top: $blue 3px solid;
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
index bc63c805..a0aac098 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import ProjectActions from '../../containers/projects/ProjectActions'
-import { Authorization } from '../../shapes/index'
+import { Authorization } from '../../shapes'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
 
-- 
cgit v1.2.3


From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 23:18:02 +0200
Subject: ui: Migrate to Auth0 as Identity Provider

This change updates the frontend codebase to move away from the Google
login and instead use Auth0 as generic Identity Provider. This allows
users to login with other accounts as well.

Since Auth0 has a free tier, users can experiment themselves with OpenDC
locally without having to pay for the login functionality. The code has
been written so that we should be able to migrate away from Auth0 once
it is not a suitable Identity Provider for OpenDC anymore.
---
 .../src/components/navigation/Navbar.js            | 16 +++++------
 .../src/components/projects/ProjectList.js         | 12 ++++-----
 .../src/components/projects/ProjectRow.js          | 31 +++++++++++++---------
 3 files changed, 31 insertions(+), 28 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index f16a3feb..5c9ea1b8 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -15,7 +15,7 @@ import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useIsLoggedIn } from '../../auth'
+import { useAuth } from '../../auth'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -44,10 +44,10 @@ export const NavItem = ({ route, children }) => {
 
 export const LoggedInSection = () => {
     const router = useRouter()
-    const isLoggedIn = useIsLoggedIn()
+    const { isAuthenticated } = useAuth()
     return (
         <Nav navbar className="auth-links">
-            {isLoggedIn ? (
+            {isAuthenticated ? (
                 [
                     router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
@@ -58,12 +58,10 @@ export const LoggedInSection = () => {
                             </Link>
                         </NavItem>
                     ) : (
-                        <NavItem route="/profile" key="profile">
-                            <Link href="/profile">
-                                <NavLink title="My Profile">
-                                    <ProfileName />
-                                </NavLink>
-                            </Link>
+                        <NavItem key="profile">
+                            <NavLink title="My Profile">
+                                <ProfileName />
+                            </NavLink>
                         </NavItem>
                     ),
                     <NavItem route="logout" key="logout">
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index 90d42326..cb17b835 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Authorization } from '../../shapes'
+import { Project } from '../../shapes'
 import ProjectRow from './ProjectRow'
 
-const ProjectList = ({ authorizations }) => {
+const ProjectList = ({ projects }) => {
     return (
         <div className="vertically-expanding-container">
-            {authorizations.length === 0 ? (
+            {projects.length === 0 ? (
                 <div className="alert alert-info">
                     <span className="info-icon fa fa-question-circle mr-2" />
                     <strong>No projects here yet...</strong> Add some with the 'New Project' button!
@@ -22,8 +22,8 @@ const ProjectList = ({ authorizations }) => {
                         </tr>
                     </thead>
                     <tbody>
-                        {authorizations.map((authorization) => (
-                            <ProjectRow projectAuth={authorization} key={authorization.project._id} />
+                        {projects.map((project) => (
+                            <ProjectRow project={project} key={project._id} />
                         ))}
                     </tbody>
                 </table>
@@ -33,7 +33,7 @@ const ProjectList = ({ authorizations }) => {
 }
 
 ProjectList.propTypes = {
-    authorizations: PropTypes.arrayOf(Authorization).isRequired,
+    projects: PropTypes.arrayOf(Project).isRequired,
 }
 
 export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
index a0aac098..9a95b777 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -1,24 +1,29 @@
 import classNames from 'classnames'
 import React from 'react'
 import ProjectActions from '../../containers/projects/ProjectActions'
-import { Authorization } from '../../shapes'
+import { Project } from '../../shapes'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
+import { useAuth } from '../../auth'
 
-const ProjectRow = ({ projectAuth }) => (
-    <tr>
-        <td className="pt-3">{projectAuth.project.name}</td>
-        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
-        <td className="pt-3">
-            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
-            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
-        </td>
-        <ProjectActions projectId={projectAuth.project._id} />
-    </tr>
-)
+const ProjectRow = ({ project }) => {
+    const { user } = useAuth()
+    const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+    return (
+        <tr>
+            <td className="pt-3">{project.name}</td>
+            <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
+            <td className="pt-3">
+                <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[level], 'mr-2')} />
+                {AUTH_DESCRIPTION_MAP[level]}
+            </td>
+            <ProjectActions projectId={project._id} />
+        </tr>
+    )
+}
 
 ProjectRow.propTypes = {
-    projectAuth: Authorization.isRequired,
+    project: Project.isRequired,
 }
 
 export default ProjectRow
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../src/components/app/map/LoadingScreen.js        |  5 +-
 .../app/map/controls/ExportCanvasComponent.js      |  4 +-
 .../app/map/controls/ZoomControlComponent.js       |  6 ++-
 .../src/components/app/sidebars/Sidebar.js         |  6 ++-
 .../app/sidebars/project/PortfolioListComponent.js | 20 ++++----
 .../app/sidebars/project/ScenarioListComponent.js  | 16 +++---
 .../app/sidebars/project/TopologyListComponent.js  | 21 ++++----
 .../app/sidebars/topology/NameComponent.js         |  5 +-
 .../building/NewRoomConstructionComponent.js       | 17 ++++---
 .../topology/machine/BackToRackComponent.js        |  4 +-
 .../sidebars/topology/machine/UnitAddComponent.js  | 25 +++++----
 .../app/sidebars/topology/machine/UnitComponent.js | 10 +++-
 .../sidebars/topology/machine/UnitTabsComponent.js | 28 ++++++----
 .../sidebars/topology/rack/AddPrefabComponent.js   |  9 ++--
 .../sidebars/topology/rack/BackToRoomComponent.js  |  9 ++--
 .../sidebars/topology/rack/EmptySlotComponent.js   | 17 ++++---
 .../app/sidebars/topology/rack/MachineComponent.js | 26 ++++++----
 .../topology/room/BackToBuildingComponent.js       |  4 +-
 .../sidebars/topology/room/DeleteRoomComponent.js  |  9 ++--
 .../topology/room/RackConstructionComponent.js     | 23 +++++----
 .../src/components/home/ContactSection.js          | 21 +++++---
 .../src/components/home/IntroSection.js            | 10 ++--
 .../src/components/home/JumbotronHeader.js         |  9 +++-
 .../src/components/home/ScreenshotSection.js       | 12 ++++-
 .../src/components/home/SimulationSection.js       | 17 +++++--
 .../src/components/home/TeamSection.js             | 59 +++++++++++-----------
 .../src/components/home/TechnologiesSection.js     | 11 ++--
 .../components/navigation/AppNavbarComponent.js    |  5 +-
 .../src/components/navigation/LogoutButton.js      |  5 +-
 .../src/components/navigation/Navbar.js            |  9 +++-
 .../src/components/not-found/TerminalWindow.js     |  4 +-
 .../components/projects/ProjectActionButtons.js    |  8 +--
 .../src/components/projects/ProjectList.js         |  4 +-
 .../src/components/projects/ProjectRow.js          |  4 +-
 34 files changed, 273 insertions(+), 169 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js b/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
index 7efea9b0..ddb94990 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 
 const LoadingScreen = () => (
     <div className="display-4">
-        <FontAwesome name="refresh" className="mr-4" spin />
+        <FontAwesomeIcon icon={faSpinner} spin className="mr-4" />
         Loading your project...
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
index 8487f47b..9e8cb36a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
@@ -1,4 +1,6 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCamera } from '@fortawesome/free-solid-svg-icons'
 
 const ExportCanvasComponent = () => (
     <button
@@ -6,7 +8,7 @@ const ExportCanvasComponent = () => (
         title="Export Canvas to PNG Image"
         onClick={() => window['exportCanvasToImage']()}
     >
-        <span className="fa fa-camera" />
+        <FontAwesomeIcon icon={faCamera} />
     </button>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
index 65944bea..6bae792c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
@@ -1,4 +1,6 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
 
 const ZoomControlComponent = ({ zoomInOnCenter }) => {
     return (
@@ -8,14 +10,14 @@ const ZoomControlComponent = ({ zoomInOnCenter }) => {
                 title="Zoom in"
                 onClick={() => zoomInOnCenter(true)}
             >
-                <span className="fa fa-plus" />
+                <FontAwesomeIcon icon={faPlus} />
             </button>
             <button
                 className="btn btn-default btn-circle btn-sm mr-1"
                 title="Zoom out"
                 onClick={() => zoomInOnCenter(false)}
             >
-                <span className="fa fa-minus" />
+                <FontAwesomeIcon icon={faMinus} />
             </button>
         </span>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index 64e95014..ccaa4144 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 
 function Sidebar({ isRight, collapsible = true, children }) {
     const [isCollapsed, setCollapsed] = useState(false)
@@ -14,9 +16,9 @@ function Sidebar({ isRight, collapsible = true, children }) {
             onClick={() => setCollapsed(!isCollapsed)}
         >
             {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
-                <span className="fa fa-angle-left" title={isRight ? 'Expand' : 'Collapse'} />
+                <FontAwesomeIcon icon={faAngleLeft} title={isRight ? 'Expand' : 'Collapse'} />
             ) : (
-                <span className="fa fa-angle-right" title={isRight ? 'Collapse' : 'Expand'} />
+                <FontAwesomeIcon icon={faAngleRight} title={isRight ? 'Collapse' : 'Expand'} />
             )}
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index ae965939..9dd36d5e 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -2,10 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Portfolio } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function PortfolioListComponent({
     portfolios,
@@ -20,7 +21,7 @@ function PortfolioListComponent({
             <h2>
                 Portfolios
                 <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -40,16 +41,15 @@ function PortfolioListComponent({
                                 <Button
                                     color="primary"
                                     outline
-                                    className="mr-1 fa fa-play"
+                                    className="mr-1"
                                     onClick={() => onChoosePortfolio(portfolio._id)}
-                                />
+                                >
+                                    <FontAwesomeIcon icon={faPlay} />
+                                </Button>
                             </Link>
-                            <Button
-                                color="danger"
-                                outline
-                                className="fa fa-trash"
-                                onClick={() => onDeletePortfolio(portfolio._id)}
-                            />
+                            <Button color="danger" outline onClick={() => onDeletePortfolio(portfolio._id)}>
+                                <FontAwesomeIcon icon={faTrash} />
+                            </Button>
                         </Col>
                     </Row>
                     <ScenarioListContainer portfolioId={portfolio._id} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 168b8e02..131a00b5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -2,9 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Scenario } from '../../../../shapes'
 import Link from 'next/link'
-import FontAwesome from 'react-fontawesome'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function ScenarioListComponent({
     scenarios,
@@ -35,23 +36,26 @@ function ScenarioListComponent({
                                 color="primary"
                                 outline
                                 disabled
-                                className="mr-1 fa fa-play"
+                                className="mr-1"
                                 onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                            >
+                                <FontAwesomeIcon icon={faPlay} />
+                            </Button>
                         </Link>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
                             disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
-                        />
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
                     </Col>
                 </Row>
             ))}
             <div className="pl-4 mb-2">
                 <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
-                    <FontAwesome name="plus" className="mr-1" />
+                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
                     New scenario
                 </Button>
             </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
index d5627abc..ac58669b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Topology } from '../../../../shapes'
-import FontAwesome from 'react-fontawesome'
 import { Button, Col, Row } from 'reactstrap'
 import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
     return (
@@ -11,7 +12,7 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
             <h2>
                 Topologies
                 <Button color="primary" outline className="float-right" onClick={onNewTopology}>
-                    <FontAwesome name="plus" />
+                    <FontAwesomeIcon icon={faPlus} />
                 </Button>
             </h2>
 
@@ -26,19 +27,17 @@ function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology
                         {topology.name}
                     </Col>
                     <Col xs="5" className="text-right">
-                        <Button
-                            color="primary"
-                            outline
-                            className="mr-1 fa fa-play"
-                            onClick={() => onChooseTopology(topology._id)}
-                        />
+                        <Button color="primary" outline className="mr-1" onClick={() => onChooseTopology(topology._id)}>
+                            <FontAwesomeIcon icon={faPlay} />
+                        </Button>
                         <Button
                             color="danger"
                             outline
-                            className="fa fa-trash"
-                            disable={idx === 0}
+                            disabled={idx === 0}
                             onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
-                        />
+                        >
+                            <FontAwesomeIcon icon={faTrash} />
+                        </Button>
                     </Col>
                 </Row>
             ))}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
index 5fb0dc55..b4cbc78f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
 
 const NameComponent = ({ name, onEdit }) => (
     <h2>
         {name}
         <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil" />
+            <FontAwesomeIcon icon={faPencilAlt} />
         </button>
     </h2>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index fd552c1e..b1461743 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,24 +1,27 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
     if (currentRoomInConstruction === '-1') {
         return (
             <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-2" />
+                <FontAwesomeIcon icon={faPlus} className="mr-2" />
                 Construct a new room
             </div>
         )
     }
     return (
         <div>
-            <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-2" />
+            <Button color="primary" block onClick={onFinish}>
+                <FontAwesomeIcon icon={faCheck} className="mr-2" />
                 Finalize new room
-            </div>
-            <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-2" />
+            </Button>
+            <Button color="default" block onClick={onCancel}>
+                <FontAwesomeIcon icon={faTimes} className="mr-2" />
                 Cancel construction
-            </div>
+            </Button>
         </div>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 70d522b2..eac99643 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,8 +1,10 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
 
 const BackToRackComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to rack
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index f80fccc8..532add37 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,29 +1,28 @@
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
+import { Button, Form, FormGroup, Input } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 function UnitAddComponent({ units, onAdd }) {
     const unitSelect = useRef(null)
 
     return (
-        <div className="form-inline">
-            <div className="form-group w-100">
-                <select className="form-control w-70 mr-1" ref={unitSelect}>
+        <Form inline>
+            <FormGroup className="w-100">
+                <Input type="select" className="w-70 mr-1" innerRef={unitSelect}>
                     {units.map((unit) => (
                         <option value={unit._id} key={unit._id}>
                             {unit.name}
                         </option>
                     ))}
-                </select>
-                <button
-                    type="submit"
-                    className="btn btn-outline-primary"
-                    onClick={() => onAdd(unitSelect.current.value)}
-                >
-                    <span className="fa fa-plus mr-2" />
+                </Input>
+                <Button color="primary" outline onClick={() => onAdd(unitSelect.current.value)}>
+                    <FontAwesomeIcon icon={faPlus} className="mr-2" />
                     Add
-                </button>
-            </div>
-        </div>
+                </Button>
+            </FormGroup>
+        </Form>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index de55e506..aa473f91 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 function UnitComponent({ index, unitType, unit, onDelete }) {
     let unitInfo
@@ -37,13 +39,17 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
         <li className="d-flex list-group-item justify-content-between align-items-center">
             <span style={{ maxWidth: '60%' }}>{unit.name}</span>
             <span>
-                <Button outline={true} color="info" className="mr-1 fa fa-info-circle" id={`unit-${index}`} />
+                <Button outline={true} color="info" className="mr-1" id={`unit-${index}`}>
+                    <FontAwesomeIcon icon={faInfoCircle} />
+                </Button>
                 <UncontrolledPopover trigger="focus" placement="left" target={`unit-${index}`}>
                     <PopoverHeader>Unit Information</PopoverHeader>
                     <PopoverBody>{unitInfo}</PopoverBody>
                 </UncontrolledPopover>
 
-                <span className="btn btn-outline-danger fa fa-trash" onClick={onDelete} />
+                <Button outline color="danger" onClick={onDelete}>
+                    <FontAwesomeIcon icon={faTrash} />
+                </Button>
             </span>
         </li>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 6599fefd..ebb5f479 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'
+import { Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
 import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
 import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
 
@@ -10,7 +10,7 @@ const UnitTabsComponent = () => {
     }
 
     return (
-        <div>
+        <div className="mt-2">
             <Nav tabs>
                 <NavItem>
                     <NavLink
@@ -55,20 +55,28 @@ const UnitTabsComponent = () => {
             </Nav>
             <TabContent activeTab={activeTab}>
                 <TabPane tabId="cpu-units">
-                    <UnitAddContainer unitType="cpu" />
-                    <UnitListContainer unitType="cpu" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="cpu" />
+                        <UnitListContainer unitType="cpu" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="gpu-units">
-                    <UnitAddContainer unitType="gpu" />
-                    <UnitListContainer unitType="gpu" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="gpu" />
+                        <UnitListContainer unitType="gpu" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="memory-units">
-                    <UnitAddContainer unitType="memory" />
-                    <UnitListContainer unitType="memory" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="memory" />
+                        <UnitListContainer unitType="memory" />
+                    </div>
                 </TabPane>
                 <TabPane tabId="storage-units">
-                    <UnitAddContainer unitType="storage" />
-                    <UnitListContainer unitType="storage" />
+                    <div className="py-2">
+                        <UnitAddContainer unitType="storage" />
+                        <UnitListContainer unitType="storage" />
+                    </div>
                 </TabPane>
             </TabContent>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
index 75418f9d..d0218f38 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSave } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const AddPrefabComponent = ({ onClick }) => (
-    <div className="btn btn-primary btn-block" onClick={onClick}>
-        <span className="fa fa-floppy-o mr-2" />
+    <Button color="primary" block onClick={onClick}>
+        <FontAwesomeIcon icon={faSave} className="mr-2" />
         Save this rack to a prefab
-    </div>
+    </Button>
 )
 
 export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index c14775bf..f6a6f79b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const BackToRoomComponent = ({ onClick }) => (
-    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+    <Button color="secondary" block className="mb-2" onClick={onClick}>
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to room
-    </div>
+    </Button>
 )
 
 export default BackToRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d7e30f1d..d6fa9dc9 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,13 +1,18 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { ListGroupItem, Badge, Button } from 'reactstrap'
 
 const EmptySlotComponent = ({ position, onAdd }) => (
-    <li className="list-group-item d-flex justify-content-between align-items-center">
-        <span className="badge badge-default badge-info mr-1 disabled">{position}</span>
-        <button className="btn btn-outline-primary" onClick={onAdd}>
-            <span className="fa fa-plus mr-2" />
+    <ListGroupItem className="d-flex justify-content-between align-items-center">
+        <Badge color="info" className="mr-1">
+            {position}
+        </Badge>
+        <Button color="primary" outline onClick={onAdd}>
+            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Add machine
-        </button>
-    </li>
+        </Button>
+    </ListGroupItem>
 )
 
 export default EmptySlotComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 4db0e7fe..36b15c71 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,13 +1,16 @@
 import React from 'react'
+import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
+import { Badge, ListGroupItem } from 'reactstrap'
 
 const UnitIcon = ({ id, type }) => (
-    <div>
-        <img
+    <div className="ml-1">
+        <Image
             src={'/img/topology/' + id + '-icon.png'}
             alt={'Machine contains ' + type + ' units'}
-            className="img-fluid ml-1"
-            style={{ maxHeight: '35px' }}
+            layout="intrinsic"
+            height={35}
+            width={35}
         />
     </div>
 )
@@ -17,22 +20,23 @@ const MachineComponent = ({ position, machine, onClick }) => {
         machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
 
     return (
-        <li
-            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+        <ListGroupItem
+            action
+            className="d-flex justify-content-between align-items-center"
             onClick={onClick}
             style={{ backgroundColor: 'white' }}
         >
-            <span className="badge badge-default badge-info mr-1">{position}</span>
+            <Badge color="info" className="mr-1">
+                {position}
+            </Badge>
             <div className="d-inline-flex">
                 {machine.cpuIds.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
                 {machine.gpuIds.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
                 {machine.memoryIds.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
                 {machine.storageIds.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-                {hasNoUnits ? (
-                    <span className="badge badge-default badge-warning">Machine with no units</span>
-                ) : undefined}
+                {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
             </div>
-        </li>
+        </ListGroupItem>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 64c0a1f6..696b345b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,8 +1,10 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
 
 const BackToBuildingComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2" />
+        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
         Back to building
     </div>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 78417359..242f7a2b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,10 +1,13 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const DeleteRoomComponent = ({ onClick }) => (
-    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2" />
+    <Button color="danger" outline block onClick={onClick}>
+        <FontAwesomeIcon icon={faTrash} className="mr-2" />
         Delete this room
-    </div>
+    </Button>
 )
 
 export default DeleteRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 44566f61..19d6b309 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,26 +1,29 @@
-import classNames from 'classnames'
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { Button } from 'reactstrap'
 
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2" />
+            <Button color="primary" block onClick={onStop}>
+                <FontAwesomeIcon icon={faTimes} className="mr-2" />
                 Stop rack construction
-            </div>
+            </Button>
         )
     }
 
     return (
-        <div
-            className={classNames('btn btn-outline-primary btn-block', {
-                disabled: isEditingRoom,
-            })}
+        <Button
+            color="primary"
+            outline
+            block
+            disabled={isEditingRoom}
             onClick={() => (isEditingRoom ? undefined : onStart())}
         >
-            <span className="fa fa-plus mr-2" />
+            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Start rack construction
-        </div>
+        </Button>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
index 25daaccf..60a7e6a3 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
@@ -1,8 +1,10 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { contactSection, tudelftIcon } from './ContactSection.module.scss'
 
 const ContactSection = () => (
@@ -10,14 +12,14 @@ const ContactSection = () => (
         <Row className="justify-content-center">
             <Col md="4">
                 <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" />
                     <div className="w-100" />
                     atlarge-research/opendc
                 </a>
             </Col>
             <Col md="4">
                 <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesome name="envelope" size="3x" className="mb-2" />
+                    <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" />
                     <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
@@ -25,7 +27,14 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center">
-                <img src="img/tudelft-icon.png" className={`img-fluid ${tudelftIcon}`} height="100" alt="TU Delft" />
+                <Image
+                    src="/img/tudelft-icon.png"
+                    className={tudelftIcon}
+                    layout="intrinsic"
+                    width={162}
+                    height={100}
+                    alt="TU Delft"
+                />
             </Col>
         </Row>
         <Row>
@@ -39,7 +48,7 @@ const ContactSection = () => (
         </Row>
         <Row>
             <Col className="text-center disclaimer mt-5 small">
-                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
+                <FontAwesomeIcon icon={faExclamationTriangle} size="2x" className="mr-2" />
                 <br />
                 <strong>Disclaimer: </strong>
                 OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index 7b467889..67e8cd8b 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Row, Col } from 'reactstrap'
 
 const IntroSection = ({ className }) => (
@@ -14,9 +15,12 @@ const IntroSection = ({ className }) => (
                     </ul>
                 </Col>
                 <Col xl="4" lg="4" md="4" sm="8">
-                    <img
-                        src="img/datacenter-drawing.png"
-                        className="col-12 img-fluid"
+                    <Image
+                        src="/img/datacenter-drawing.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={350}
+                        height={197}
                         alt="Schematic top-down view of a datacenter"
                     />
                     <p className="col-12 figure-caption text-center">
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
index 0d3217f9..98aa0af2 100644
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
@@ -1,6 +1,9 @@
 import React from 'react'
+import Image from 'next/image'
 import { Container, Jumbotron, Button } from 'reactstrap'
 import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 
 const JumbotronHeader = () => (
     <section className={jumbotronHeader}>
@@ -10,7 +13,9 @@ const JumbotronHeader = () => (
                     Open<span className={dc}>DC</span>
                 </h1>
                 <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
-                <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" />
+                <div className="mt-5">
+                    <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" />
+                </div>
                 <p className="lead mt-5">
                     <Button
                         tag="a"
@@ -18,7 +23,7 @@ const JumbotronHeader = () => (
                         href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf"
                         color="warning"
                     >
-                        Read about <strong>OpenDC 2.0</strong> <i className="fa fa-external-link" />
+                        Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} />
                     </Button>
                 </p>
             </Jumbotron>
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 4f634b28..9673b7b7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 import { screenshot } from './ScreenshotSection.module.scss'
@@ -6,11 +7,18 @@ import { screenshot } from './ScreenshotSection.module.scss'
 const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title} className={className}>
         <Row>
-            <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}>
+            <Col xl="5" lg="5" md="5" sm="12" className={`text-left my-auto ${!imageIsRight ? 'order-1' : ''}`}>
                 {children}
             </Col>
             <Col xl="7" lg="7" md="7" sm="12">
-                <img src={imageUrl} className={`col-12 ${screenshot}`} alt={caption} />
+                <Image
+                    src={imageUrl}
+                    className={`col-12 ${screenshot}`}
+                    layout="intrinsic"
+                    width={635}
+                    height={419}
+                    alt={caption}
+                />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </Col>
         </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index 44ce905b..c154cc26 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Col, Row } from 'reactstrap'
 import ContentSection from './ContentSection'
 
@@ -18,9 +19,12 @@ const SimulationSection = ({ className }) => {
                     </ul>
                 </Col>
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img
+                    <Image
                         src="/img/screenshot-simulation.png"
-                        className="col-12 screenshot"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={419}
                         alt="Running an experiment in OpenDC"
                     />
                     <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row>
@@ -39,7 +43,14 @@ const SimulationSection = ({ className }) => {
                 </Col>
 
                 <Col xl="7" lg="7" md="7" sm="12">
-                    <img src="/img/opendc-architecture.png" className="col-12 screenshot" alt="OpenDC's Architecture" />
+                    <Image
+                        src="/img/opendc-architecture.png"
+                        className="col-12"
+                        layout="intrinsic"
+                        width={635}
+                        height={232}
+                        alt="OpenDC's Architecture"
+                    />
                     <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
                 </Col>
             </Row>
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index 4e8a3906..bbbe241e 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,43 +1,44 @@
 import React from 'react'
+import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
 
 const TeamLead = ({ photoId, name, description }) => (
     <Col xl="3" lg="3" md="4" sm="6" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h4>{name}</h4>
-            <div className="team-member-description">{description}</div>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" col="5" className="my-2 mx-auto" alt={name}>
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={182}
+                    height={182}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h4>{name}</h4>
+                <div className="team-member-description">{description}</div>
+            </Col>
+        </Row>
     </Col>
 )
 
 const TeamMember = ({ photoId, name }) => (
     <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
-        <Col
-            tag="img"
-            src={'img/portraits/' + photoId + '.png'}
-            xl="10"
-            lg="10"
-            md="10"
-            sm="8"
-            col="5"
-            className="mb-2 mt-2"
-            alt={name}
-        />
-        <Col>
-            <h5>{name}</h5>
-        </Col>
+        <Row>
+            <Col xl="10" lg="10" md="10" sm="8" xs="5" className="my-2 mx-auto">
+                <Image
+                    src={'/img/portraits/' + photoId + '.png'}
+                    layout="intrinsic"
+                    width={100}
+                    height={100}
+                    alt={name}
+                />
+            </Col>
+            <Col>
+                <h5>{name}</h5>
+            </Col>
+        </Row>
     </Col>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index 6fdf4e5c..efedebb7 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,35 +1,36 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons'
 
 const TechnologiesSection = ({ className }) => (
     <ContentSection name="technologies" title="Technologies" className={className}>
         <ListGroup className="list-group text-left">
             <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="window-maximize" className="mr-2" />
+                    <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
                     <strong className="">Browser</strong>
                 </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
             </ListGroupItem>
             <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="television" className="mr-2" />
+                    <FontAwesomeIcon icon={faTv} className="mr-2" />
                     <strong>Server</strong>
                 </span>
                 <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
             </ListGroupItem>
             <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="database" className="mr-2" />
+                    <FontAwesomeIcon icon={faDatabase} className="mr-2" />
                     <strong>Database</strong>
                 </span>
                 <span className="text-right">MongoDB</span>
             </ListGroupItem>
             <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
                 <span style={{ minWidth: 100 }}>
-                    <FontAwesome name="cogs" className="mr-2" />
+                    <FontAwesomeIcon icon={faCogs} className="mr-2" />
                     <strong>Simulator</strong>
                 </span>
                 <span className="text-right">Kotlin</span>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index 7b1eaae2..28207968 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,16 +1,17 @@
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import Link from 'next/link'
 import { NavLink } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
 import {} from './Navbar.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faList } from '@fortawesome/free-solid-svg-icons'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
             <Link href="/projects">
                 <NavLink title="My Projects">
-                    <FontAwesome name="list" className="mr-2" />
+                    <FontAwesomeIcon icon={faList} className="mr-2" />
                     My Projects
                 </NavLink>
             </Link>
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
index 0c0feeb1..4ab577e0 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import FontAwesome from 'react-fontawesome'
 import { NavLink } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 
 const LogoutButton = ({ onLogout }) => (
     <NavLink className="logout" title="Sign out" onClick={onLogout}>
-        <FontAwesome name="power-off" size="lg" />
+        <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
     </NavLink>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 5c9ea1b8..690a7bdf 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
 import {
     Navbar as RNavbar,
     NavItem as RNavItem,
@@ -16,6 +17,8 @@ import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
 import { login, navbar, opendcBrand } from './Navbar.module.scss'
 import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 
 export const NAVBAR_HEIGHT = 60
 
@@ -25,7 +28,7 @@ const GitHubLink = () => (
         className="ml-2 mr-3 text-dark"
         style={{ position: 'relative', top: 7 }}
     >
-        <span aria-hidden className="fa fa-github fa-2x" />
+        <FontAwesomeIcon icon={faGithub} size="2x" />
     </a>
 )
 
@@ -87,7 +90,9 @@ const Navbar = ({ fullWidth, children }) => {
             <Container fluid={fullWidth}>
                 <NavbarToggler onClick={toggle} />
                 <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
-                    <img src="/img/logo.png" alt="OpenDC" />
+                    <div className="mb-n1">
+                        <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
+                    </div>
                 </NavbarBrand>
 
                 <Collapse isOpen={isOpen} navbar>
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
index 28fd81e9..e6200b10 100644
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
@@ -3,6 +3,8 @@ import Link from 'next/link'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
 import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
 
 const TerminalWindow = () => (
     <div className={terminalWindow}>
@@ -25,7 +27,7 @@ const TerminalWindow = () => (
             </div>
             <Link href="/">
                 <a className={homeBtn}>
-                    <span className="fa fa-home" /> GET ME BACK TO OPENDC
+                    <FontAwesomeIcon icon={faHome} /> GET ME BACK TO OPENDC
                 </a>
             </Link>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 96970fd9..0725e42b 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -2,12 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
 import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
         <Link href={`/projects/${projectId}`}>
             <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
-                <span className="fa fa-play" />
+                <FontAwesomeIcon icon={faPlay} />
             </Button>
         </Link>
         <Button
@@ -19,10 +21,10 @@ const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
-            <span className="fa fa-users" />
+            <FontAwesomeIcon icon={faUsers} />
         </Button>
         <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
-            <span className="fa fa-trash" />
+            <FontAwesomeIcon icon={faTrash} />
         </Button>
     </td>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index cb17b835..dc3f85ec 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -2,13 +2,15 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Project } from '../../shapes'
 import ProjectRow from './ProjectRow'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectList = ({ projects }) => {
     return (
         <div className="vertically-expanding-container">
             {projects.length === 0 ? (
                 <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
                     <strong>No projects here yet...</strong> Add some with the 'New Project' button!
                 </div>
             ) : (
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
index 9a95b777..91368de8 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -1,10 +1,10 @@
-import classNames from 'classnames'
 import React from 'react'
 import ProjectActions from '../../containers/projects/ProjectActions'
 import { Project } from '../../shapes'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const ProjectRow = ({ project }) => {
     const { user } = useAuth()
@@ -14,7 +14,7 @@ const ProjectRow = ({ project }) => {
             <td className="pt-3">{project.name}</td>
             <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
             <td className="pt-3">
-                <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[level], 'mr-2')} />
+                <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" />
                 {AUTH_DESCRIPTION_MAP[level]}
             </td>
             <ProjectActions projectId={project._id} />
-- 
cgit v1.2.3


From 0e52785dfc5e99f48718530976083cfbd1507651 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 5 Jul 2021 15:36:23 +0200
Subject: ui: Fix linting errors

---
 .../src/components/app/map/MapStageComponent.js    | 22 +++++++++++++++++++---
 .../app/map/controls/ScaleIndicatorComponent.js    |  5 +++++
 .../app/map/controls/ZoomControlComponent.js       |  5 +++++
 .../src/components/app/map/elements/GrayLayer.js   |  5 +++++
 .../src/components/app/map/elements/HoverTile.js   |  1 +
 .../src/components/app/map/elements/RoomTile.js    |  2 ++
 .../src/components/app/map/groups/RoomGroup.js     |  6 +++++-
 .../src/components/app/map/groups/TileGroup.js     |  3 ++-
 .../app/map/layers/HoverLayerComponent.js          |  3 ++-
 .../components/app/map/layers/MapLayerComponent.js |  9 +++++++++
 .../src/components/app/sidebars/Sidebar.js         |  1 +
 .../app/sidebars/project/PortfolioListComponent.js |  2 +-
 .../sidebars/project/ProjectSidebarComponent.js    |  5 +++++
 .../app/sidebars/project/ScenarioListComponent.js  |  1 +
 .../app/sidebars/topology/NameComponent.js         |  6 ++++++
 .../sidebars/topology/TopologySidebarComponent.js  |  5 +++++
 .../building/NewRoomConstructionComponent.js       |  8 ++++++++
 .../topology/machine/BackToRackComponent.js        |  5 +++++
 .../topology/machine/MachineSidebarComponent.js    |  5 +++++
 .../app/sidebars/topology/machine/UnitComponent.js |  9 +++++++++
 .../sidebars/topology/machine/UnitListComponent.js |  6 ++++++
 .../sidebars/topology/rack/AddPrefabComponent.js   |  5 +++++
 .../sidebars/topology/rack/BackToRoomComponent.js  |  5 +++++
 .../sidebars/topology/rack/EmptySlotComponent.js   |  6 ++++++
 .../app/sidebars/topology/rack/MachineComponent.js |  8 ++++++++
 .../sidebars/topology/rack/MachineListComponent.js |  5 +++++
 .../topology/room/BackToBuildingComponent.js       |  5 +++++
 .../sidebars/topology/room/DeleteRoomComponent.js  |  5 +++++
 .../topology/room/RackConstructionComponent.js     |  8 ++++++++
 .../src/components/home/ContentSection.js          |  5 ++++-
 .../src/components/home/IntroSection.js            |  5 +++++
 .../src/components/home/ModelingSection.js         |  5 +++++
 .../src/components/home/ScreenshotSection.js       | 11 +++++++++++
 .../src/components/home/SimulationSection.js       |  9 +++++++--
 .../src/components/home/StakeholderSection.js      | 11 +++++++++++
 .../src/components/home/TeamSection.js             | 16 ++++++++++++++++
 .../src/components/home/TechnologiesSection.js     |  5 +++++
 .../opendc-web-ui/src/components/modals/Modal.js   |  1 +
 .../components/navigation/AppNavbarComponent.js    | 18 ++++++++++++------
 .../src/components/navigation/HomeNavbar.js        | 19 ++++++-------------
 .../src/components/navigation/Navbar.js            | 17 ++++++++++++++---
 .../components/projects/ProjectActionButtons.js    |  2 +-
 .../src/components/projects/ProjectList.js         |  2 +-
 43 files changed, 253 insertions(+), 34 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 7c97f3e4..07b2d8f0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
@@ -35,10 +36,11 @@ function MapStageComponent({
         const mousePos = stage.current.getStage().getPointerPosition()
         setPos([mousePos.x, mousePos.y])
     }
-    const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
-    const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
 
     useEffect(() => {
+        const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
+        const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
+
         updateDimensions()
 
         window.addEventListener('resize', updateDimensions)
@@ -55,7 +57,7 @@ function MapStageComponent({
             window.removeEventListener('resize', updateDimensions)
             window.removeEventListener('wheel', updateScale)
         }
-    }, [])
+    }, [x, y, setMapDimensions, zoomInOnPosition])
 
     const store = useStore()
 
@@ -77,4 +79,18 @@ function MapStageComponent({
     )
 }
 
+MapStageComponent.propTypes = {
+    mapDimensions: PropTypes.shape({
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+    }).isRequired,
+    mapPosition: PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+    }).isRequired,
+    setMapDimensions: PropTypes.func,
+    setMapPositionWithBoundsCheck: PropTypes.func,
+    zoomInOnPosition: PropTypes.func,
+}
+
 export default MapStageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
index 13226602..ef633764 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import { scaleIndicator } from './ScaleIndicatorComponent.module.scss'
@@ -8,4 +9,8 @@ const ScaleIndicatorComponent = ({ scale }) => (
     </div>
 )
 
+ScaleIndicatorComponent.propTypes = {
+    scale: PropTypes.number.isRequired,
+}
+
 export default ScaleIndicatorComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
index 6bae792c..6c3c6cb7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
@@ -23,4 +24,8 @@ const ZoomControlComponent = ({ zoomInOnCenter }) => {
     )
 }
 
+ZoomControlComponent.propTypes = {
+    zoomInOnCenter: PropTypes.func.isRequired,
+}
+
 export default ZoomControlComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
index c54a34ad..35af4d96 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Rect } from 'react-konva'
 import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
@@ -14,4 +15,8 @@ const GrayLayer = ({ onClick }) => (
     />
 )
 
+GrayLayer.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
index 912229c4..11bba0e1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
@@ -21,6 +21,7 @@ HoverTile.propTypes = {
     pixelX: PropTypes.number.isRequired,
     pixelY: PropTypes.number.isRequired,
     isValid: PropTypes.bool.isRequired,
+    scale: PropTypes.number.isRequired,
     onClick: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
index b2cc1273..ed718601 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Rect } from 'react-konva'
 import { Tile } from '../../../../shapes'
@@ -15,6 +16,7 @@ const RoomTile = ({ tile, color }) => (
 
 RoomTile.propTypes = {
     tile: Tile,
+    color: PropTypes.string,
 }
 
 export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
index d7c207ca..e67d54fc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
@@ -1,9 +1,10 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
 import GrayContainer from '../../../../containers/app/map/GrayContainer'
 import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
-import { Room } from '../../../../shapes'
+import { InteractionLevel, Room } from '../../../../shapes'
 
 const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
@@ -43,6 +44,9 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick
 
 RoomGroup.propTypes = {
     room: Room,
+    interactionLevel: InteractionLevel,
+    currentRoomInConstruction: PropTypes.string,
+    onClick: PropTypes.func,
 }
 
 export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
index ff6ec7ec..2a108b93 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
@@ -6,7 +6,7 @@ import { Tile } from '../../../../shapes'
 import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
 import RoomTile from '../elements/RoomTile'
 
-const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
+const TileGroup = ({ tile, newTile, onClick }) => {
     let tileObject
     if (tile.rackId) {
         tileObject = <RackContainer tile={tile} />
@@ -30,6 +30,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 TileGroup.propTypes = {
     tile: Tile,
     newTile: PropTypes.bool,
+    onClick: PropTypes.func,
 }
 
 export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
index 08d31dac..a88a8b34 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
@@ -21,7 +21,7 @@ function HoverLayerComponent({ mouseX, mouseY, mapPosition, mapScale, isEnabled,
             setPos([positionX, positionY])
             setValid(isValid(positionX, positionY))
         }
-    }, [mouseX, mouseY, mapPosition, mapScale])
+    }, [isEnabled, isValid, x, y, mouseX, mouseY, mapPosition, mapScale])
 
     if (!isEnabled()) {
         return <Layer />
@@ -58,6 +58,7 @@ HoverLayerComponent.propTypes = {
     isEnabled: PropTypes.func.isRequired,
     isValid: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
+    children: PropTypes.node,
 }
 
 export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
index 8ee14c9c..96e6867c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Group, Layer } from 'react-konva'
 import TopologyContainer from '../../../../containers/app/map/TopologyContainer'
@@ -14,4 +15,12 @@ const MapLayerComponent = ({ mapPosition, mapScale }) => (
     </Layer>
 )
 
+MapLayerComponent.propTypes = {
+    mapPosition: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number,
+    }),
+    mapScale: PropTypes.number,
+}
+
 export default MapLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
index ccaa4144..56fa799f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -42,6 +42,7 @@ function Sidebar({ isRight, collapsible = true, children }) {
 Sidebar.propTypes = {
     isRight: PropTypes.bool.isRequired,
     collapsible: PropTypes.bool,
+    children: PropTypes.node,
 }
 
 export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index 9dd36d5e..ce271819 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -37,7 +37,7 @@ function PortfolioListComponent({
                             {portfolio.name}
                         </Col>
                         <Col xs="5" className="text-right">
-                            <Link href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
+                            <Link passHref href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
                                 <Button
                                     color="primary"
                                     outline
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
index 7dd13663..10d22e5b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
@@ -13,4 +14,8 @@ const ProjectSidebarComponent = ({ collapsible }) => (
     </Sidebar>
 )
 
+ProjectSidebarComponent.propTypes = {
+    collapsible: PropTypes.bool,
+}
+
 export default ProjectSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index 131a00b5..f990dfcb 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -30,6 +30,7 @@ function ScenarioListComponent({
                     </Col>
                     <Col xs="5" className="text-right">
                         <Link
+                            passHref
                             href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
                         >
                             <Button
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
index b4cbc78f..b8c88003 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
@@ -11,4 +12,9 @@ const NameComponent = ({ name, onEdit }) => (
     </h2>
 )
 
+NameComponent.propTypes = {
+    name: PropTypes.string,
+    onEdit: PropTypes.func,
+}
+
 export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
index f5eee36b..450df6cd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -4,6 +4,7 @@ import MachineSidebarContainer from '../../../../containers/app/sidebars/topolog
 import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer'
 import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer'
 import Sidebar from '../Sidebar'
+import { InteractionLevel } from '../../../../shapes'
 
 const TopologySidebarComponent = ({ interactionLevel }) => {
     let sidebarContent
@@ -28,4 +29,8 @@ const TopologySidebarComponent = ({ interactionLevel }) => {
     return <Sidebar isRight={true}>{sidebarContent}</Sidebar>
 }
 
+TopologySidebarComponent.propTypes = {
+    interactionLevel: InteractionLevel,
+}
+
 export default TopologySidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index b1461743..e8c81735 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -26,4 +27,11 @@ const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoom
     )
 }
 
+NewRoomConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onFinish: PropTypes.func,
+    onCancel: PropTypes.func,
+    currentRoomInConstruction: PropTypes.string,
+}
+
 export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index eac99643..829bf265 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -9,4 +10,8 @@ const BackToRackComponent = ({ onClick }) => (
     </div>
 )
 
+BackToRackComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index 7c78cf9e..88a99e0f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer'
 import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer'
@@ -15,4 +16,8 @@ const MachineSidebarComponent = ({ machineId }) => {
     )
 }
 
+MachineSidebarComponent.propTypes = {
+    machineId: PropTypes.string,
+}
+
 export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index aa473f91..03b92459 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,7 +1,9 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
 
 function UnitComponent({ index, unitType, unit, onDelete }) {
     let unitInfo
@@ -55,4 +57,11 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
     )
 }
 
+UnitComponent.propTypes = {
+    index: PropTypes.number,
+    unitType: PropTypes.string,
+    unit: PropTypes.oneOf([ProcessingUnit, StorageUnit]),
+    onDelete: PropTypes.func,
+}
+
 export default UnitComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 2ade0f6a..b7da74a1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
 
@@ -17,4 +18,9 @@ const UnitListComponent = ({ unitType, unitIds }) => (
     </ul>
 )
 
+UnitListComponent.propTypes = {
+    unitType: PropTypes.string,
+    unitIds: PropTypes.array,
+}
+
 export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
index d0218f38..a330c302 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSave } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const AddPrefabComponent = ({ onClick }) => (
     </Button>
 )
 
+AddPrefabComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index f6a6f79b..e0eb5979 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const BackToRoomComponent = ({ onClick }) => (
     </Button>
 )
 
+BackToRoomComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d6fa9dc9..63b319e0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -15,4 +16,9 @@ const EmptySlotComponent = ({ position, onAdd }) => (
     </ListGroupItem>
 )
 
+EmptySlotComponent.propTypes = {
+    position: PropTypes.number,
+    onAdd: PropTypes.func,
+}
+
 export default EmptySlotComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 36b15c71..f91202ba 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
@@ -15,6 +16,11 @@ const UnitIcon = ({ id, type }) => (
     </div>
 )
 
+UnitIcon.propTypes = {
+    id: PropTypes.string,
+    type: PropTypes.string,
+}
+
 const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
         machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
@@ -42,6 +48,8 @@ const MachineComponent = ({ position, machine, onClick }) => {
 
 MachineComponent.propTypes = {
     machine: Machine,
+    position: PropTypes.number,
+    onClick: PropTypes.func,
 }
 
 export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index 1c07d237..d0958c28 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
@@ -17,4 +18,8 @@ const MachineListComponent = ({ machineIds }) => {
     )
 }
 
+MachineListComponent.propTypes = {
+    machineIds: PropTypes.array,
+}
+
 export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 696b345b..043cc713 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
@@ -9,4 +10,8 @@ const BackToBuildingComponent = ({ onClick }) => (
     </div>
 )
 
+BackToBuildingComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default BackToBuildingComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 242f7a2b..d81bad0f 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash } from '@fortawesome/free-solid-svg-icons'
@@ -10,4 +11,8 @@ const DeleteRoomComponent = ({ onClick }) => (
     </Button>
 )
 
+DeleteRoomComponent.propTypes = {
+    onClick: PropTypes.func,
+}
+
 export default DeleteRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 19d6b309..0a27910c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -27,4 +28,11 @@ const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, is
     )
 }
 
+RackConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onStop: PropTypes.func,
+    inRackConstructionMode: PropTypes.bool,
+    isEditingRoom: PropTypes.bool,
+}
+
 export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
index 3e9ad50a..abaa565c 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
@@ -1,7 +1,7 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import classNames from 'classnames'
 import { Container } from 'reactstrap'
-import PropTypes from 'prop-types'
 import { contentSection } from './ContentSection.module.scss'
 
 const ContentSection = ({ name, title, children, className }) => (
@@ -15,6 +15,9 @@ const ContentSection = ({ name, title, children, className }) => (
 
 ContentSection.propTypes = {
     name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
 }
 
 export default ContentSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
index 67e8cd8b..f9000d32 100644
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Container, Row, Col } from 'reactstrap'
@@ -42,4 +43,8 @@ const IntroSection = ({ className }) => (
     </section>
 )
 
+IntroSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default IntroSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
index af36aa45..8959663a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import ScreenshotSection from './ScreenshotSection'
 
@@ -20,4 +21,8 @@ const ModelingSection = ({ className }) => (
     </ScreenshotSection>
 )
 
+ModelingSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default ModelingSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
index 9673b7b7..58fe1710 100644
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
@@ -25,4 +26,14 @@ const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsR
     </ContentSection>
 )
 
+ScreenshotSection.propTypes = {
+    className: PropTypes.string,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    imageUrl: PropTypes.string,
+    caption: PropTypes.string,
+    imageIsRight: PropTypes.bool,
+    children: PropTypes.node,
+}
+
 export default ScreenshotSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
index c154cc26..46ce6a35 100644
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Col, Row } from 'reactstrap'
@@ -32,7 +33,7 @@ const SimulationSection = ({ className }) => {
             </Row>
             <Row className="mt-5">
                 <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto">
-                    <h3>OpenDC's Simulator:</h3>
+                    <h3>OpenDC&apos;s Simulator:</h3>
                     <ul>
                         <li>Includes a detailed operational model of modern datacenters</li>
                         <li>
@@ -51,11 +52,15 @@ const SimulationSection = ({ className }) => {
                         height={232}
                         alt="OpenDC's Architecture"
                     />
-                    <Row className="text-muted justify-content-center">OpenDC's Architecture</Row>
+                    <Row className="text-muted justify-content-center">OpenDC&apos;s Architecture</Row>
                 </Col>
             </Row>
         </ContentSection>
     )
 }
 
+SimulationSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default SimulationSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
index 9a4892ed..aa689ba4 100644
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Row, Col } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -21,6 +22,12 @@ const Stakeholder = ({ name, title, subtitle }) => (
     </Col>
 )
 
+Stakeholder.propTypes = {
+    name: PropTypes.string,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+}
+
 const StakeholderSection = ({ className }) => (
     <ContentSection name="stakeholders" title="Stakeholders" className={className}>
         <Row className="justify-content-center">
@@ -33,4 +40,8 @@ const StakeholderSection = ({ className }) => (
     </ContentSection>
 )
 
+StakeholderSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default StakeholderSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
index bbbe241e..dd057a93 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Row, Col } from 'reactstrap'
@@ -23,6 +24,12 @@ const TeamLead = ({ photoId, name, description }) => (
     </Col>
 )
 
+TeamLead.propTypes = {
+    photoId: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string,
+}
+
 const TeamMember = ({ photoId, name }) => (
     <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
         <Row>
@@ -42,6 +49,11 @@ const TeamMember = ({ photoId, name }) => (
     </Col>
 )
 
+TeamMember.propTypes = {
+    photoId: PropTypes.string,
+    name: PropTypes.string,
+}
+
 const TeamSection = ({ className }) => (
     <ContentSection name="team" title="OpenDC Team" className={className}>
         <Row className="justify-content-center">
@@ -63,4 +75,8 @@ const TeamSection = ({ className }) => (
     </ContentSection>
 )
 
+TeamSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default TeamSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
index efedebb7..e5131c2a 100644
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import { ListGroup, ListGroupItem } from 'reactstrap'
 import ContentSection from './ContentSection'
@@ -39,4 +40,8 @@ const TechnologiesSection = ({ className }) => (
     </ContentSection>
 )
 
+TechnologiesSection.propTypes = {
+    className: PropTypes.string,
+}
+
 export default TechnologiesSection
diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
index 21b7f119..8ab3924c 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
@@ -42,6 +42,7 @@ Modal.propTypes = {
     onCancel: PropTypes.func.isRequired,
     submitButtonType: PropTypes.string,
     submitButtonText: PropTypes.string,
+    children: PropTypes.node,
 }
 
 Modal.defaultProps = {
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
index 28207968..8aaaf847 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
@@ -1,15 +1,16 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 import Link from 'next/link'
-import { NavLink } from 'reactstrap'
+import { NavLink, NavItem as RNavItem } from 'reactstrap'
 import Navbar, { NavItem } from './Navbar'
-import {} from './Navbar.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faList } from '@fortawesome/free-solid-svg-icons'
+import { Project } from '../../shapes'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
-            <Link href="/projects">
+            <Link href="/projects" passHref>
                 <NavLink title="My Projects">
                     <FontAwesomeIcon icon={faList} className="mr-2" />
                     My Projects
@@ -17,15 +18,20 @@ const AppNavbarComponent = ({ project, fullWidth }) => (
             </Link>
         </NavItem>
         {project ? (
-            <NavItem>
-                <Link href={`/projects/${project._id}`}>
+            <RNavItem>
+                <Link href={`/projects/${project._id}`} passHref>
                     <NavLink title="Current Project">
                         <span>{project.name}</span>
                     </NavLink>
                 </Link>
-            </NavItem>
+            </RNavItem>
         ) : undefined}
     </Navbar>
 )
 
+AppNavbarComponent.propTypes = {
+    project: Project,
+    fullWidth: PropTypes.bool,
+}
+
 export default AppNavbarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
index 46d01a25..57cb7a53 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
@@ -1,22 +1,15 @@
 import React from 'react'
 import { NavItem, NavLink } from 'reactstrap'
 import Navbar from './Navbar'
-import {} from './Navbar.module.scss'
-
-const ScrollNavItem = ({ id, name }) => (
-    <NavItem>
-        <NavLink href={id}>{name}</NavLink>
-    </NavItem>
-)
 
 const HomeNavbar = () => (
     <Navbar fullWidth={false}>
-        <ScrollNavItem id="#stakeholders" name="Stakeholders" />
-        <ScrollNavItem id="#modeling" name="Modeling" />
-        <ScrollNavItem id="#project" name="Project" />
-        <ScrollNavItem id="#technologies" name="Technologies" />
-        <ScrollNavItem id="#team" name="Team" />
-        <ScrollNavItem id="#contact" name="Contact" />
+        <NavLink href="#stakeholders">Stakeholders</NavLink>
+        <NavLink href="#modeling">Modeling</NavLink>
+        <NavLink href="#project">Project</NavLink>
+        <NavLink href="#technologies">Technologies</NavLink>
+        <NavLink href="#team">Team</NavLink>
+        <NavLink href="#contact">Contact</NavLink>
     </Navbar>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
index 690a7bdf..dc74bb8f 100644
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -45,6 +46,11 @@ export const NavItem = ({ route, children }) => {
     )
 }
 
+NavItem.propTypes = {
+    route: PropTypes.string.isRequired,
+    children: PropTypes.node,
+}
+
 export const LoggedInSection = () => {
     const router = useRouter()
     const { isAuthenticated } = useAuth()
@@ -54,18 +60,18 @@ export const LoggedInSection = () => {
                 [
                     router.asPath === '/' ? (
                         <NavItem route="/projects" key="projects">
-                            <Link href="/projects">
+                            <Link href="/projects" passHref>
                                 <NavLink title="My Projects" to="/projects">
                                     My Projects
                                 </NavLink>
                             </Link>
                         </NavItem>
                     ) : (
-                        <NavItem key="profile">
+                        <RNavItem key="profile">
                             <NavLink title="My Profile">
                                 <ProfileName />
                             </NavLink>
-                        </NavItem>
+                        </RNavItem>
                     ),
                     <NavItem route="logout" key="logout">
                         <Logout />
@@ -106,4 +112,9 @@ const Navbar = ({ fullWidth, children }) => {
     )
 }
 
+Navbar.propTypes = {
+    fullWidth: PropTypes.bool,
+    children: PropTypes.node,
+}
+
 export default Navbar
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 0725e42b..4adf3205 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -7,7 +7,7 @@ import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
-        <Link href={`/projects/${projectId}`}>
+        <Link href={`/projects/${projectId}`} passHref>
             <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
                 <FontAwesomeIcon icon={faPlay} />
             </Button>
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index dc3f85ec..46ef4691 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -11,7 +11,7 @@ const ProjectList = ({ projects }) => {
             {projects.length === 0 ? (
                 <div className="alert alert-info">
                     <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
-                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
+                    <strong>No projects here yet...</strong> Add some with the &lsquo;New Project&rsquo; button!
                 </div>
             ) : (
                 <table className="table table-striped">
-- 
cgit v1.2.3


From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 11:46:57 +0200
Subject: ui: Split App container into separate components

This change splits the App container into separate pages, as a starting
point for removing much of the unnecessary state from Redux.
---
 .../opendc-web-ui/src/components/app/map/MapStageComponent.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index 07b2d8f0..a8e156ec 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
@@ -37,10 +38,12 @@ function MapStageComponent({
         setPos([mousePos.x, mousePos.y])
     }
 
-    useEffect(() => {
-        const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
-        const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
+    const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
+    const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
 
+    // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => {
         updateDimensions()
 
         window.addEventListener('resize', updateDimensions)
@@ -57,7 +60,7 @@ function MapStageComponent({
             window.removeEventListener('resize', updateDimensions)
             window.removeEventListener('wheel', updateScale)
         }
-    }, [x, y, setMapDimensions, zoomInOnPosition])
+    }, [])
 
     const store = useStore()
 
-- 
cgit v1.2.3


From aa788a3ad18badfac8beaabdaffc88b9e52f9306 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 15:07:11 +0200
Subject: ui: Remove current ids state from Redux

This change removes the current active identifiers from the Redux state.
Instead, we use the router query to track the active project, portfolio
and topology.
---
 .../app/sidebars/project/PortfolioListComponent.js |  2 +-
 .../app/sidebars/project/ScenarioListComponent.js  | 38 ++--------------------
 2 files changed, 4 insertions(+), 36 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index ce271819..b948b747 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -61,7 +61,7 @@ function PortfolioListComponent({
 
 PortfolioListComponent.propTypes = {
     portfolios: PropTypes.arrayOf(Portfolio),
-    currentProjectId: PropTypes.string.isRequired,
+    currentProjectId: PropTypes.string,
     currentPortfolioId: PropTypes.string,
     onNewPortfolio: PropTypes.func.isRequired,
     onChoosePortfolio: PropTypes.func.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index f990dfcb..e81d2b78 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,48 +1,19 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Scenario } from '../../../../shapes'
-import Link from 'next/link'
 import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 
-function ScenarioListComponent({
-    scenarios,
-    portfolioId,
-    currentProjectId,
-    currentScenarioId,
-    onNewScenario,
-    onChooseScenario,
-    onDeleteScenario,
-}) {
+function ScenarioListComponent({ scenarios, portfolioId, onNewScenario, onDeleteScenario }) {
     return (
         <>
             {scenarios.map((scenario, idx) => (
                 <Row key={scenario._id} className="mb-1">
-                    <Col
-                        xs="7"
-                        className={classNames('pl-5 align-self-center', {
-                            'font-weight-bold': scenario._id === currentScenarioId,
-                        })}
-                    >
+                    <Col xs="7" className="pl-5 align-self-center">
                         {scenario.name}
                     </Col>
                     <Col xs="5" className="text-right">
-                        <Link
-                            passHref
-                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                        >
-                            <Button
-                                color="primary"
-                                outline
-                                disabled
-                                className="mr-1"
-                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
-                            >
-                                <FontAwesomeIcon icon={faPlay} />
-                            </Button>
-                        </Link>
                         <Button
                             color="danger"
                             outline
@@ -67,10 +38,7 @@ function ScenarioListComponent({
 ScenarioListComponent.propTypes = {
     scenarios: PropTypes.arrayOf(Scenario),
     portfolioId: PropTypes.string,
-    currentProjectId: PropTypes.string.isRequired,
-    currentScenarioId: PropTypes.string,
     onNewScenario: PropTypes.func.isRequired,
-    onChooseScenario: PropTypes.func.isRequired,
     onDeleteScenario: PropTypes.func.isRequired,
 }
 
-- 
cgit v1.2.3


From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 16:27:49 +0200
Subject: ui: Migrate project APIs to React Query

This change updates the OpenDC frontend to use React Query for fetching
and mutating project data. Previously, this state was tracked and
synchronized via Redux. Migrating to React Query greatly simplifies the
state synchronization logic necessary in the frontend.
---
 .../src/components/app/sidebars/project/PortfolioListComponent.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index b948b747..d61ff24e 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -25,7 +25,7 @@ function PortfolioListComponent({
                 </Button>
             </h2>
 
-            {portfolios.map((portfolio, idx) => (
+            {portfolios.map((portfolio) => (
                 <div key={portfolio._id}>
                     <Row className="row mb-1">
                         <Col
-- 
cgit v1.2.3


From 02a2f0f89cb1f39a5f8856bca1971a4e1b12374f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 20:13:30 +0200
Subject: ui: Use React Query defaults to reduce duplication

---
 opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
index a8e156ec..c3177fe1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
@@ -42,7 +41,6 @@ function MapStageComponent({
     const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
 
     // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => {
         updateDimensions()
 
@@ -60,7 +58,7 @@ function MapStageComponent({
             window.removeEventListener('resize', updateDimensions)
             window.removeEventListener('wheel', updateScale)
         }
-    }, [])
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
     const store = useStore()
 
-- 
cgit v1.2.3


From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 8 Jul 2021 13:15:28 +0200
Subject: ui: Simplify normalization of topology

This change updates the OpenDC frontend to use the normalizr library for
normalizing the user topology.
---
 .../src/components/app/map/groups/RoomGroup.js     |  8 ++++----
 .../src/components/app/map/groups/TileGroup.js     |  2 +-
 .../src/components/app/map/groups/TopologyGroup.js |  6 +++---
 .../app/sidebars/topology/machine/UnitComponent.js |  2 +-
 .../sidebars/topology/machine/UnitListComponent.js | 22 +++++++++++++++-------
 .../app/sidebars/topology/rack/MachineComponent.js | 10 +++++-----
 .../sidebars/topology/rack/MachineListComponent.js | 19 +++++++++++--------
 7 files changed, 40 insertions(+), 29 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
index e67d54fc..42d20ff1 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
@@ -10,7 +10,7 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick
     if (currentRoomInConstruction === room._id) {
         return (
             <Group onClick={onClick}>
-                {room.tileIds.map((tileId) => (
+                {room.tiles.map((tileId) => (
                     <TileContainer key={tileId} tileId={tileId} newTile={true} />
                 ))}
             </Group>
@@ -25,16 +25,16 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick
                     interactionLevel.roomId === room._id
                 ) {
                     return [
-                        room.tileIds
+                        room.tiles
                             .filter((tileId) => tileId !== interactionLevel.tileId)
                             .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
                         <GrayContainer key={-1} />,
-                        room.tileIds
+                        room.tiles
                             .filter((tileId) => tileId === interactionLevel.tileId)
                             .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
                     ]
                 } else {
-                    return room.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
+                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
                 }
             })()}
             <WallContainer roomId={room._id} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
index 2a108b93..ce5e4a6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
@@ -8,7 +8,7 @@ import RoomTile from '../elements/RoomTile'
 
 const TileGroup = ({ tile, newTile, onClick }) => {
     let tileObject
-    if (tile.rackId) {
+    if (tile.rack) {
         tileObject = <RackContainer tile={tile} />
     } else {
         tileObject = null
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
index 57107768..d4c6db7d 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
@@ -12,7 +12,7 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
     if (interactionLevel.mode === 'BUILDING') {
         return (
             <Group>
-                {topology.roomIds.map((roomId) => (
+                {topology.rooms.map((roomId) => (
                     <RoomContainer key={roomId} roomId={roomId} />
                 ))}
             </Group>
@@ -21,13 +21,13 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
 
     return (
         <Group>
-            {topology.roomIds
+            {topology.rooms
                 .filter((roomId) => roomId !== interactionLevel.roomId)
                 .map((roomId) => (
                     <RoomContainer key={roomId} roomId={roomId} />
                 ))}
             {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
-            {topology.roomIds
+            {topology.rooms
                 .filter((roomId) => roomId === interactionLevel.roomId)
                 .map((roomId) => (
                     <RoomContainer key={roomId} roomId={roomId} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index 03b92459..46c639bd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -60,7 +60,7 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
 UnitComponent.propTypes = {
     index: PropTypes.number,
     unitType: PropTypes.string,
-    unit: PropTypes.oneOf([ProcessingUnit, StorageUnit]),
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]),
     onDelete: PropTypes.func,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index b7da74a1..54c1a6cc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,12 +1,19 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
+import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
+import UnitComponent from './UnitComponent'
 
-const UnitListComponent = ({ unitType, unitIds }) => (
+const UnitListComponent = ({ unitType, units, onDelete }) => (
     <ul className="list-group mt-1">
-        {unitIds.length !== 0 ? (
-            unitIds.map((unitId, index) => (
-                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} />
+        {units.length !== 0 ? (
+            units.map((unit, index) => (
+                <UnitComponent
+                    unitType={unitType}
+                    unit={unit}
+                    onDelete={() => onDelete(unit, unitType)}
+                    index={index}
+                    key={index}
+                />
             ))
         ) : (
             <div className="alert alert-info">
@@ -19,8 +26,9 @@ const UnitListComponent = ({ unitType, unitIds }) => (
 )
 
 UnitListComponent.propTypes = {
-    unitType: PropTypes.string,
-    unitIds: PropTypes.array,
+    unitType: PropTypes.string.isRequired,
+    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
+    onDelete: PropTypes.func,
 }
 
 export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index f91202ba..b71918da 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -23,7 +23,7 @@ UnitIcon.propTypes = {
 
 const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
-        machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
+        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
     return (
         <ListGroupItem
@@ -36,10 +36,10 @@ const MachineComponent = ({ position, machine, onClick }) => {
                 {position}
             </Badge>
             <div className="d-inline-flex">
-                {machine.cpuIds.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-                {machine.gpuIds.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-                {machine.memoryIds.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-                {machine.storageIds.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+                {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+                {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+                {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+                {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
                 {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
             </div>
         </ListGroupItem>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index d0958c28..e024a417 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,17 +1,18 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
-import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
 import { machineList } from './MachineListComponent.module.scss'
+import MachineComponent from './MachineComponent'
+import { Machine } from '../../../../../shapes'
+import EmptySlotComponent from './EmptySlotComponent'
 
-const MachineListComponent = ({ machineIds }) => {
+const MachineListComponent = ({ machines = [], onSelect, onAdd }) => {
     return (
         <ul className={`list-group ${machineList}`}>
-            {machineIds.map((machineId, index) => {
-                if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index + 1} />
+            {machines.map((machine, index) => {
+                if (machine === null) {
+                    return <EmptySlotComponent key={index} onAdd={() => onAdd(index + 1)} />
                 } else {
-                    return <MachineContainer key={index} position={index + 1} machineId={machineId} />
+                    return <MachineComponent key={index} onClick={() => onSelect(index + 1)} machine={machine} />
                 }
             })}
         </ul>
@@ -19,7 +20,9 @@ const MachineListComponent = ({ machineIds }) => {
 }
 
 MachineListComponent.propTypes = {
-    machineIds: PropTypes.array,
+    machines: PropTypes.arrayOf(Machine),
+    onSelect: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
 }
 
 export default MachineListComponent
-- 
cgit v1.2.3


From 829be3c973f5ca837431c3ca10909412b675e668 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 15 Jul 2021 15:10:04 +0200
Subject: refactor(ui): Extract OpenDC landing page from web interface

This change extracts the landing page from the web interface in order to
separate the development of the two. This allows the landing page to be
developed independently of the actual OpenDC web application.
---
 .../src/components/home/ContactSection.js          | 66 -----------------
 .../src/components/home/ContactSection.module.scss | 20 ------
 .../src/components/home/ContentSection.js          | 23 ------
 .../src/components/home/ContentSection.module.scss | 11 ---
 .../src/components/home/IntroSection.js            | 50 -------------
 .../src/components/home/JumbotronHeader.js         | 34 ---------
 .../components/home/JumbotronHeader.module.scss    | 31 --------
 .../src/components/home/ModelingSection.js         | 28 --------
 .../src/components/home/ScreenshotSection.js       | 39 ----------
 .../components/home/ScreenshotSection.module.scss  |  5 --
 .../src/components/home/SimulationSection.js       | 66 -----------------
 .../src/components/home/StakeholderSection.js      | 47 -------------
 .../src/components/home/TeamSection.js             | 82 ----------------------
 .../src/components/home/TechnologiesSection.js     | 47 -------------
 .../src/components/navigation/HomeNavbar.js        | 16 -----
 15 files changed, 565 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/IntroSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/TeamSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
deleted file mode 100644
index 60a7e6a3..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { contactSection, tudelftIcon } from './ContactSection.module.scss'
-
-const ContactSection = () => (
-    <ContentSection name="contact" title="Contact" className={contactSection}>
-        <Row className="justify-content-center">
-            <Col md="4">
-                <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesomeIcon icon={faGithub} size="3x" className="mb-2" />
-                    <div className="w-100" />
-                    atlarge-research/opendc
-                </a>
-            </Col>
-            <Col md="4">
-                <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesomeIcon icon={faEnvelope} size="3x" className="mb-2" />
-                    <div className="w-100" />
-                    opendc@atlarge-research.com
-                </a>
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center">
-                <Image
-                    src="/img/tudelft-icon.png"
-                    className={tudelftIcon}
-                    layout="intrinsic"
-                    width={162}
-                    height={100}
-                    alt="TU Delft"
-                />
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center">
-                A project by the &nbsp;
-                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
-                    <strong>@Large Research Group</strong>
-                </a>
-                .
-            </Col>
-        </Row>
-        <Row>
-            <Col className="text-center disclaimer mt-5 small">
-                <FontAwesomeIcon icon={faExclamationTriangle} size="2x" className="mr-2" />
-                <br />
-                <strong>Disclaimer: </strong>
-                OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
-                <br />
-                The OpenDC authors should in no way be liable in the event this happens (see our{' '}
-                <strong>
-                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a>
-                </strong>
-                ). Sorry for the inconvenience.
-            </Col>
-        </Row>
-    </ContentSection>
-)
-
-export default ContactSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
deleted file mode 100644
index 9ab4fcb1..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.contactSection {
-    background-color: #444;
-    color: #ddd;
-
-    a {
-        color: #ddd;
-
-        &:hover {
-            color: #fff;
-        }
-    }
-
-    .tudelftIcon {
-        height: 100px;
-    }
-
-    .disclaimer {
-        color: #cccccc;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
deleted file mode 100644
index abaa565c..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import classNames from 'classnames'
-import { Container } from 'reactstrap'
-import { contentSection } from './ContentSection.module.scss'
-
-const ContentSection = ({ name, title, children, className }) => (
-    <section id={name} className={classNames(className, contentSection)}>
-        <Container>
-            <h1>{title}</h1>
-            {children}
-        </Container>
-    </section>
-)
-
-ContentSection.propTypes = {
-    name: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    className: PropTypes.string,
-}
-
-export default ContentSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
deleted file mode 100644
index d27a0ce0..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'src/style/_variables.scss';
-
-.contentSection {
-    padding-top: 50px;
-    padding-bottom: 50px;
-    text-align: center;
-
-    h1 {
-        margin-bottom: 30px;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
deleted file mode 100644
index f9000d32..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Container, Row, Col } from 'reactstrap'
-
-const IntroSection = ({ className }) => (
-    <section id="intro" className={className}>
-        <Container className="pt-5 pb-3">
-            <Row className="justify-content-center">
-                <Col xl="4" lg="4" md="4" sm="8">
-                    <h4>The datacenter (DC) industry...</h4>
-                    <ul>
-                        <li>Is worth over $15 bn, and growing</li>
-                        <li>Has many hard-to-grasp concepts</li>
-                        <li>Needs to become accessible to many</li>
-                    </ul>
-                </Col>
-                <Col xl="4" lg="4" md="4" sm="8">
-                    <Image
-                        src="/img/datacenter-drawing.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={350}
-                        height={197}
-                        alt="Schematic top-down view of a datacenter"
-                    />
-                    <p className="col-12 figure-caption text-center">
-                        <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
-                            Image source
-                        </a>
-                    </p>
-                </Col>
-                <Col xl="4" lg="4" md="4" sm="8">
-                    <h4>OpenDC provides...</h4>
-                    <ul>
-                        <li>Collaborative online DC modeling</li>
-                        <li>Diverse and effective DC simulation</li>
-                        <li>Exploratory DC performance feedback</li>
-                    </ul>
-                </Col>
-            </Row>
-        </Container>
-    </section>
-)
-
-IntroSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default IntroSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
deleted file mode 100644
index 98aa0af2..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { Container, Jumbotron, Button } from 'reactstrap'
-import { jumbotronHeader, jumbotron, dc } from './JumbotronHeader.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
-
-const JumbotronHeader = () => (
-    <section className={jumbotronHeader}>
-        <Container>
-            <Jumbotron className={jumbotron}>
-                <h1>
-                    Open<span className={dc}>DC</span>
-                </h1>
-                <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
-                <div className="mt-5">
-                    <Image src="/img/logo.png" layout="intrinsic" height={110} width={110} alt="OpenDC" />
-                </div>
-                <p className="lead mt-5">
-                    <Button
-                        tag="a"
-                        target="_blank"
-                        href="https://atlarge-research.com/pdfs/ccgrid21-opendc-paper.pdf"
-                        color="warning"
-                    >
-                        Read about <strong>OpenDC 2.0</strong> <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    </Button>
-                </p>
-            </Jumbotron>
-        </Container>
-    </section>
-)
-
-export default JumbotronHeader
diff --git a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss b/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
deleted file mode 100644
index 567b3e73..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/JumbotronHeader.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.jumbotronHeader {
-    background: #00a6d6;
-}
-
-.jumbotron {
-    background-color: inherit;
-    margin-bottom: 0;
-    text-align: center;
-
-    padding-top: 120px;
-    padding-bottom: 120px;
-
-    img {
-        max-width: 110px;
-    }
-
-    h1 {
-        color: #fff;
-        font-size: 4.5em;
-
-        .dc {
-            color: #fff;
-            font-weight: bold;
-        }
-    }
-
-    :global(.lead) {
-        color: #fff;
-        font-size: 1.4em;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js b/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
deleted file mode 100644
index 8959663a..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ModelingSection.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import ScreenshotSection from './ScreenshotSection'
-
-const ModelingSection = ({ className }) => (
-    <ScreenshotSection
-        name="modeling"
-        title="Datacenter Modeling"
-        imageUrl="/img/screenshot-construction.png"
-        caption="Building a datacenter in OpenDC"
-        imageIsRight={true}
-        className={className}
-    >
-        <h3>Collaboratively...</h3>
-        <ul>
-            <li>Model DC layout, and room locations and types</li>
-            <li>Place racks in rooms and nodes in racks</li>
-            <li>Add real-world CPU, GPU, memory, storage and network units to each node</li>
-            <li>Select from diverse scheduling policies</li>
-        </ul>
-    </ScreenshotSection>
-)
-
-ModelingSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default ModelingSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
deleted file mode 100644
index 58fe1710..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { screenshot } from './ScreenshotSection.module.scss'
-
-const ScreenshotSection = ({ className, name, title, imageUrl, caption, imageIsRight, children }) => (
-    <ContentSection name={name} title={title} className={className}>
-        <Row>
-            <Col xl="5" lg="5" md="5" sm="12" className={`text-left my-auto ${!imageIsRight ? 'order-1' : ''}`}>
-                {children}
-            </Col>
-            <Col xl="7" lg="7" md="7" sm="12">
-                <Image
-                    src={imageUrl}
-                    className={`col-12 ${screenshot}`}
-                    layout="intrinsic"
-                    width={635}
-                    height={419}
-                    alt={caption}
-                />
-                <div className="row text-muted justify-content-center">{caption}</div>
-            </Col>
-        </Row>
-    </ContentSection>
-)
-
-ScreenshotSection.propTypes = {
-    className: PropTypes.string,
-    name: PropTypes.string,
-    title: PropTypes.string,
-    imageUrl: PropTypes.string,
-    caption: PropTypes.string,
-    imageIsRight: PropTypes.bool,
-    children: PropTypes.node,
-}
-
-export default ScreenshotSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
deleted file mode 100644
index 7e22de32..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.screenshot {
-    padding-left: 0;
-    padding-right: 0;
-    margin-bottom: 5px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js b/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
deleted file mode 100644
index 46ce6a35..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/SimulationSection.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Col, Row } from 'reactstrap'
-import ContentSection from './ContentSection'
-
-const SimulationSection = ({ className }) => {
-    return (
-        <ContentSection name="project" title="Datecenter Simulation" className={className}>
-            <Row>
-                <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto order-1">
-                    <h3>Working with OpenDC:</h3>
-                    <ul>
-                        <li>Seamlessly switch between construction and simulation modes</li>
-                        <li>
-                            Choose one of several predefined workloads (Business Critical, Workflows, Machine Learning,
-                            Serverless, etc.)
-                        </li>
-                        <li>Compare datacenter topologies using automated plots and visual summaries</li>
-                    </ul>
-                </Col>
-                <Col xl="7" lg="7" md="7" sm="12">
-                    <Image
-                        src="/img/screenshot-simulation.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={635}
-                        height={419}
-                        alt="Running an experiment in OpenDC"
-                    />
-                    <Row className="text-muted justify-content-center">Running an experiment in OpenDC</Row>
-                </Col>
-            </Row>
-            <Row className="mt-5">
-                <Col xl="5" lg="5" md="5" sm="2" className="text-left my-auto">
-                    <h3>OpenDC&apos;s Simulator:</h3>
-                    <ul>
-                        <li>Includes a detailed operational model of modern datacenters</li>
-                        <li>
-                            Support for emerging datacenter technologies around <em>cloud computing</em>,{' '}
-                            <em>serverless computing</em>, <em>big data</em>, and <em>machine learning</em>
-                        </li>
-                    </ul>
-                </Col>
-
-                <Col xl="7" lg="7" md="7" sm="12">
-                    <Image
-                        src="/img/opendc-architecture.png"
-                        className="col-12"
-                        layout="intrinsic"
-                        width={635}
-                        height={232}
-                        alt="OpenDC's Architecture"
-                    />
-                    <Row className="text-muted justify-content-center">OpenDC&apos;s Architecture</Row>
-                </Col>
-            </Row>
-        </ContentSection>
-    )
-}
-
-SimulationSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default SimulationSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
deleted file mode 100644
index aa689ba4..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-
-const Stakeholder = ({ name, title, subtitle }) => (
-    <Col xl="4" lg="4" md="4" sm="6">
-        <Col
-            tag="img"
-            xl="3"
-            lg="3"
-            md="4"
-            sm="4"
-            src={'img/stakeholders/' + name + '.png'}
-            className="img-fluid"
-            alt={title}
-        />
-        <div className="text-center mt-2">
-            <h4>{title}</h4>
-            <p>{subtitle}</p>
-        </div>
-    </Col>
-)
-
-Stakeholder.propTypes = {
-    name: PropTypes.string,
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-}
-
-const StakeholderSection = ({ className }) => (
-    <ContentSection name="stakeholders" title="Stakeholders" className={className}>
-        <Row className="justify-content-center">
-            <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
-            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
-            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
-            <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" />
-            <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" />
-        </Row>
-    </ContentSection>
-)
-
-StakeholderSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default StakeholderSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js b/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
deleted file mode 100644
index dd057a93..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/TeamSection.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Row, Col } from 'reactstrap'
-import ContentSection from './ContentSection'
-
-const TeamLead = ({ photoId, name, description }) => (
-    <Col xl="3" lg="3" md="4" sm="6" className="justify-content-center">
-        <Row>
-            <Col xl="10" lg="10" md="10" sm="8" col="5" className="my-2 mx-auto" alt={name}>
-                <Image
-                    src={'/img/portraits/' + photoId + '.png'}
-                    layout="intrinsic"
-                    width={182}
-                    height={182}
-                    alt={name}
-                />
-            </Col>
-            <Col>
-                <h4>{name}</h4>
-                <div className="team-member-description">{description}</div>
-            </Col>
-        </Row>
-    </Col>
-)
-
-TeamLead.propTypes = {
-    photoId: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-}
-
-const TeamMember = ({ photoId, name }) => (
-    <Col xl="2" lg="2" md="3" sm="4" className="justify-content-center">
-        <Row>
-            <Col xl="10" lg="10" md="10" sm="8" xs="5" className="my-2 mx-auto">
-                <Image
-                    src={'/img/portraits/' + photoId + '.png'}
-                    layout="intrinsic"
-                    width={100}
-                    height={100}
-                    alt={name}
-                />
-            </Col>
-            <Col>
-                <h5>{name}</h5>
-            </Col>
-        </Row>
-    </Col>
-)
-
-TeamMember.propTypes = {
-    photoId: PropTypes.string,
-    name: PropTypes.string,
-}
-
-const TeamSection = ({ className }) => (
-    <ContentSection name="team" title="OpenDC Team" className={className}>
-        <Row className="justify-content-center">
-            <TeamLead photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
-            <TeamLead photoId="fmastenbroek" name="Fabian Mastenbroek" description="Technology Lead" />
-            <TeamLead photoId="gandreadis" name="Georgios Andreadis" description="Former Technology Lead (2018-2020)" />
-            <TeamLead photoId="vvanbeek" name="Vincent van Beek" description="Former Technology Lead (2017-2018)" />
-        </Row>
-        <Row className="justify-content-center mt-5">
-            <TeamMember photoId="loverweel" name="Leon Overweel" />
-            <TeamMember photoId="lfdversluis" name="Laurens Versluis" />
-            <TeamMember photoId="evaneyk" name="Erwin van Eyk" />
-            <TeamMember photoId="sjounaid" name="Soufiane Jounaid" />
-            <TeamMember photoId="wlai" name="Wenchen Lai" />
-            <TeamMember photoId="hhe" name="Hongyu He" />
-            <TeamMember photoId="jburley" name="Jacob Burley" />
-            <TeamMember photoId="jbosch" name="Jaro Bosch" />
-        </Row>
-    </ContentSection>
-)
-
-TeamSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default TeamSection
diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
deleted file mode 100644
index e5131c2a..00000000
--- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { ListGroup, ListGroupItem } from 'reactstrap'
-import ContentSection from './ContentSection'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faWindowMaximize, faTv, faDatabase, faCogs } from '@fortawesome/free-solid-svg-icons'
-
-const TechnologiesSection = ({ className }) => (
-    <ContentSection name="technologies" title="Technologies" className={className}>
-        <ListGroup className="list-group text-left">
-            <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faWindowMaximize} className="mr-2" />
-                    <strong className="">Browser</strong>
-                </span>
-                <span className="text-right">JavaScript, React, Redux, Konva</span>
-            </ListGroupItem>
-            <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faTv} className="mr-2" />
-                    <strong>Server</strong>
-                </span>
-                <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
-            </ListGroupItem>
-            <ListGroupItem color="success" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faDatabase} className="mr-2" />
-                    <strong>Database</strong>
-                </span>
-                <span className="text-right">MongoDB</span>
-            </ListGroupItem>
-            <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center">
-                <span style={{ minWidth: 100 }}>
-                    <FontAwesomeIcon icon={faCogs} className="mr-2" />
-                    <strong>Simulator</strong>
-                </span>
-                <span className="text-right">Kotlin</span>
-            </ListGroupItem>
-        </ListGroup>
-    </ContentSection>
-)
-
-TechnologiesSection.propTypes = {
-    className: PropTypes.string,
-}
-
-export default TechnologiesSection
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
deleted file mode 100644
index 57cb7a53..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { NavItem, NavLink } from 'reactstrap'
-import Navbar from './Navbar'
-
-const HomeNavbar = () => (
-    <Navbar fullWidth={false}>
-        <NavLink href="#stakeholders">Stakeholders</NavLink>
-        <NavLink href="#modeling">Modeling</NavLink>
-        <NavLink href="#project">Project</NavLink>
-        <NavLink href="#technologies">Technologies</NavLink>
-        <NavLink href="#team">Team</NavLink>
-        <NavLink href="#contact">Contact</NavLink>
-    </Navbar>
-)
-
-export default HomeNavbar
-- 
cgit v1.2.3


From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Jul 2021 22:23:40 +0200
Subject: feat(ui): Migrate to PatternFly 4 design framework

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

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

See https://www.patternfly.org/v4/ for more information about
PatternFly.
---
 .../opendc-web-ui/src/components/AppHeader.js      |  44 ++++++
 .../opendc-web-ui/src/components/AppHeaderTools.js | 133 +++++++++++++++++
 opendc-web/opendc-web-ui/src/components/AppLogo.js |  46 ++++++
 .../src/components/AppLogo.module.scss             |  33 +++++
 .../opendc-web-ui/src/components/AppNavigation.js  |  75 ++++++++++
 opendc-web/opendc-web-ui/src/components/AppPage.js |  41 ++++++
 .../src/components/app/map/GrayContainer.js        |  34 +++++
 .../src/components/app/map/LoadingScreen.js        |  12 --
 .../src/components/app/map/MapConstants.js         |   4 +-
 .../src/components/app/map/MapStage.js             |  66 +++++++++
 .../src/components/app/map/MapStage.module.scss    |  31 ++++
 .../src/components/app/map/MapStageComponent.js    |  97 -------------
 .../src/components/app/map/RackContainer.js        |  37 +++++
 .../components/app/map/RackEnergyFillContainer.js  |  37 +++++
 .../components/app/map/RackSpaceFillContainer.js   |  43 ++++++
 .../src/components/app/map/RoomContainer.js        |  45 ++++++
 .../src/components/app/map/TileContainer.js        |  46 ++++++
 .../src/components/app/map/TopologyContainer.js    |  35 +++++
 .../src/components/app/map/WallContainer.js        |  39 +++++
 .../src/components/app/map/controls/Collapse.js    |  42 ++++++
 .../app/map/controls/Collapse.module.scss          |  55 +++++++
 .../app/map/controls/ExportCanvasComponent.js      |  15 --
 .../components/app/map/controls/ScaleIndicator.js  |  16 +++
 .../app/map/controls/ScaleIndicator.module.scss    |  10 ++
 .../app/map/controls/ScaleIndicatorComponent.js    |  16 ---
 .../controls/ScaleIndicatorComponent.module.scss   |  10 --
 .../app/map/controls/ToolPanelComponent.js         |  13 --
 .../map/controls/ToolPanelComponent.module.scss    |   6 -
 .../src/components/app/map/controls/Toolbar.js     |  28 ++++
 .../app/map/controls/Toolbar.module.scss           |  29 ++++
 .../app/map/controls/ZoomControlComponent.js       |  31 ----
 .../src/components/app/map/groups/RackGroup.js     |   4 +-
 .../src/components/app/map/groups/RoomGroup.js     |   6 +-
 .../src/components/app/map/groups/TileGroup.js     |   2 +-
 .../src/components/app/map/groups/TopologyGroup.js |   4 +-
 .../src/components/app/map/layers/MapLayer.js      |  33 +++++
 .../components/app/map/layers/MapLayerComponent.js |   2 +-
 .../components/app/map/layers/ObjectHoverLayer.js  |  54 +++++++
 .../components/app/map/layers/RoomHoverLayer.js    |  67 +++++++++
 .../components/app/results/PortfolioResultInfo.js  |  40 ++++++
 .../src/components/app/results/PortfolioResults.js | 134 +++++++++++++++++
 .../app/results/PortfolioResultsComponent.js       |  93 ------------
 .../src/components/app/sidebars/Sidebar.js         |  48 -------
 .../components/app/sidebars/Sidebar.module.scss    |  57 --------
 .../app/sidebars/project/PortfolioListComponent.js |  71 ---------
 .../sidebars/project/ProjectSidebarComponent.js    |  21 ---
 .../app/sidebars/project/ScenarioListComponent.js  |  45 ------
 .../app/sidebars/project/TopologyListComponent.js  |  56 --------
 .../app/sidebars/topology/NameComponent.js         |  73 ++++++++--
 .../app/sidebars/topology/TopologySidebar.js       |  83 +++++++++++
 .../sidebars/topology/TopologySidebar.module.scss  |  37 +++++
 .../sidebars/topology/TopologySidebarComponent.js  |  36 -----
 .../topology/building/BuildingSidebarComponent.js  |   9 +-
 .../building/NewRoomConstructionComponent.js       |  41 +++---
 .../building/NewRoomConstructionContainer.js       |  46 ++++++
 .../topology/machine/BackToRackComponent.js        |  17 ---
 .../app/sidebars/topology/machine/DeleteMachine.js |  54 +++++++
 .../topology/machine/MachineSidebarComponent.js    |  39 +++--
 .../topology/machine/MachineSidebarContainer.js    |  37 +++++
 .../sidebars/topology/machine/UnitAddComponent.js  |  48 ++++---
 .../sidebars/topology/machine/UnitAddContainer.js  |  42 ++++++
 .../app/sidebars/topology/machine/UnitComponent.js |  67 ---------
 .../sidebars/topology/machine/UnitListComponent.js | 122 +++++++++++++---
 .../sidebars/topology/machine/UnitListContainer.js |  56 ++++++++
 .../sidebars/topology/machine/UnitTabsComponent.js |  97 +++----------
 .../sidebars/topology/rack/AddPrefabComponent.js   |   8 +-
 .../sidebars/topology/rack/AddPrefabContainer.js   |  33 +++++
 .../sidebars/topology/rack/BackToRoomComponent.js  |  18 ---
 .../sidebars/topology/rack/DeleteRackContainer.js  |  54 +++++++
 .../sidebars/topology/rack/EmptySlotComponent.js   |  24 ----
 .../app/sidebars/topology/rack/MachineComponent.js |  51 +++----
 .../sidebars/topology/rack/MachineListComponent.js |  69 +++++++--
 .../topology/rack/MachineListComponent.module.scss |   3 -
 .../sidebars/topology/rack/MachineListContainer.js |  56 ++++++++
 .../sidebars/topology/rack/RackNameContainer.js    |  22 +++
 .../sidebars/topology/rack/RackSidebarComponent.js |  61 ++++++--
 .../topology/rack/RackSidebarComponent.module.scss |   6 +-
 .../sidebars/topology/rack/RackSidebarContainer.js |  32 +++++
 .../topology/room/BackToBuildingComponent.js       |  17 ---
 .../sidebars/topology/room/DeleteRoomComponent.js  |  18 ---
 .../sidebars/topology/room/DeleteRoomContainer.js  |  54 +++++++
 .../sidebars/topology/room/EditRoomContainer.js    |  56 ++++++++
 .../topology/room/RackConstructionComponent.js     |  18 ++-
 .../topology/room/RackConstructionContainer.js     |  46 ++++++
 .../app/sidebars/topology/room/RoomName.js         |  44 ++++++
 .../sidebars/topology/room/RoomSidebarComponent.js |  43 ++++--
 .../sidebars/topology/room/RoomSidebarContainer.js |  32 +++++
 .../src/components/modals/ConfirmationModal.js     |   6 +-
 .../opendc-web-ui/src/components/modals/Modal.js   |  48 +++----
 .../src/components/modals/TextInputModal.js        |  65 ++++++---
 .../modals/custom-components/NewPortfolioModal.js  | 139 ++++++++++++++++++
 .../NewPortfolioModalComponent.js                  |  78 ----------
 .../modals/custom-components/NewScenarioModal.js   | 159 +++++++++++++++++++++
 .../custom-components/NewScenarioModalComponent.js | 144 -------------------
 .../modals/custom-components/NewTopologyModal.js   |  81 +++++++++++
 .../custom-components/NewTopologyModalComponent.js |  71 ---------
 .../components/navigation/AppNavbarComponent.js    |  37 -----
 .../src/components/navigation/LogoutButton.js      |  17 ---
 .../src/components/navigation/Navbar.js            | 120 ----------------
 .../src/components/navigation/Navbar.module.scss   |  36 -----
 .../src/components/not-found/BlinkingCursor.js     |   6 -
 .../not-found/BlinkingCursor.module.scss           |  13 --
 .../src/components/not-found/CodeBlock.js          |  28 ----
 .../src/components/not-found/CodeBlock.module.scss |   4 -
 .../src/components/not-found/TerminalWindow.js     |  37 -----
 .../not-found/TerminalWindow.module.scss           |  61 --------
 .../src/components/projects/FilterPanel.js         |  18 ++-
 .../src/components/projects/NewPortfolio.js        |  53 +++++++
 .../src/components/projects/NewProject.js          |  39 +++++
 .../src/components/projects/NewProject.module.scss |  26 ++++
 .../src/components/projects/NewScenario.js         |  64 +++++++++
 .../src/components/projects/NewTopology.js         |  58 ++++++++
 .../src/components/projects/PortfolioTable.js      |  97 +++++++++++++
 .../components/projects/ProjectActionButtons.js    |  38 -----
 .../src/components/projects/ProjectList.js         |  41 ------
 .../src/components/projects/ProjectRow.js          |  29 ----
 .../src/components/projects/ProjectTable.js        |  76 ++++++++++
 .../src/components/projects/ScenarioState.js       |  62 ++++++++
 .../src/components/projects/ScenarioTable.js       | 108 ++++++++++++++
 .../src/components/projects/TopologyTable.js       |  95 ++++++++++++
 .../src/components/util/BreadcrumbLink.js          |  37 +++++
 .../src/components/util/NavItemLink.js             |  37 +++++
 .../src/components/util/TableEmptyState.js         | 103 +++++++++++++
 123 files changed, 3834 insertions(+), 1872 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppHeader.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppLogo.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppLogo.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppNavigation.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/AppPage.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModalComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewProject.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
new file mode 100644
index 00000000..b33212c4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.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 { PageHeader } from '@patternfly/react-core'
+import React from 'react'
+import Image from 'next/image'
+import AppHeaderTools from './AppHeaderTools'
+import { AppNavigation } from './AppNavigation'
+import AppLogo from './AppLogo'
+
+export function AppHeader() {
+    const logo = <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
+
+    return (
+        <PageHeader
+            logo={logo}
+            logoProps={{ href: '/' }}
+            logoComponent={AppLogo}
+            headerTools={<AppHeaderTools />}
+            topNav={<AppNavigation />}
+        />
+    )
+}
+
+AppHeader.propTypes = {}
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js b/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
new file mode 100644
index 00000000..02e5d265
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppHeaderTools.js
@@ -0,0 +1,133 @@
+/*
+ * 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 {
+    Avatar,
+    Button,
+    ButtonVariant,
+    Dropdown,
+    DropdownGroup,
+    DropdownItem,
+    DropdownToggle,
+    KebabToggle,
+    PageHeaderTools,
+    PageHeaderToolsGroup,
+    PageHeaderToolsItem,
+    Skeleton,
+} from '@patternfly/react-core'
+import { useState } from 'react'
+import { useAuth } from '../auth'
+import { GithubIcon, HelpIcon } from '@patternfly/react-icons'
+
+function AppHeaderTools() {
+    const auth = useAuth()
+
+    const [isKebabDropdownOpen, setKebabDropdownOpen] = useState(false)
+    const kebabDropdownItems = [
+        <DropdownItem
+            key={0}
+            component={
+                <a href="https://opendc.org" target="_blank" rel="noreferrer">
+                    <HelpIcon /> Help
+                </a>
+            }
+        />,
+    ]
+
+    const [isDropdownOpen, setDropdownOpen] = useState(false)
+    const userDropdownItems = [
+        <DropdownGroup key="group 2">
+            <DropdownItem key="group 2 logout" onClick={() => auth.logout({ returnTo: window.location.origin })}>
+                Logout
+            </DropdownItem>
+        </DropdownGroup>,
+    ]
+
+    return (
+        <PageHeaderTools>
+            <PageHeaderToolsGroup visibility={{ default: 'hidden', lg: 'visible' }}>
+                <PageHeaderToolsItem>
+                    <Button
+                        component="a"
+                        href="https://github.com/atlarge-research/opendc"
+                        target="_blank"
+                        aria-label="Source code"
+                        variant={ButtonVariant.plain}
+                    >
+                        <GithubIcon />
+                    </Button>
+                </PageHeaderToolsItem>
+                <PageHeaderToolsItem>
+                    <Button
+                        component="a"
+                        href="https://opendc.org/"
+                        target="_blank"
+                        aria-label="Help actions"
+                        variant={ButtonVariant.plain}
+                    >
+                        <HelpIcon />
+                    </Button>
+                </PageHeaderToolsItem>
+            </PageHeaderToolsGroup>
+            <PageHeaderToolsGroup>
+                <PageHeaderToolsItem visibility={{ lg: 'hidden' }}>
+                    <Dropdown
+                        isPlain
+                        position="right"
+                        toggle={<KebabToggle onToggle={() => setKebabDropdownOpen(!isKebabDropdownOpen)} />}
+                        isOpen={isKebabDropdownOpen}
+                        dropdownItems={kebabDropdownItems}
+                    />
+                </PageHeaderToolsItem>
+                <PageHeaderToolsItem visibility={{ default: 'hidden', md: 'visible' }}>
+                    <Dropdown
+                        isPlain
+                        position="right"
+                        isOpen={isDropdownOpen}
+                        toggle={
+                            <DropdownToggle onToggle={() => setDropdownOpen(!isDropdownOpen)}>
+                                {auth?.user?.name ?? (
+                                    <Skeleton
+                                        fontSize="xs"
+                                        width="150px"
+                                        className="pf-u-display-inline-flex"
+                                        screenreaderText="Loading username"
+                                    />
+                                )}
+                            </DropdownToggle>
+                        }
+                        dropdownItems={userDropdownItems}
+                    />
+                </PageHeaderToolsItem>
+            </PageHeaderToolsGroup>
+            {auth?.user?.picture ? (
+                <Avatar src={auth.user.picture} alt="Avatar image" />
+            ) : (
+                <Skeleton className="pf-c-avatar" shape="circle" width="2.25rem" screenreaderText="Loading avatar" />
+            )}
+        </PageHeaderTools>
+    )
+}
+
+AppHeaderTools.propTypes = {}
+
+export default AppHeaderTools
diff --git a/opendc-web/opendc-web-ui/src/components/AppLogo.js b/opendc-web/opendc-web-ui/src/components/AppLogo.js
new file mode 100644
index 00000000..92663295
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppLogo.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import { appLogo } from './AppLogo.module.scss'
+
+function AppLogo({ href, children, className, ...props }) {
+    return (
+        <>
+            <Link href={href}>
+                <a {...props} className={`${className ?? ''} ${appLogo}`}>
+                    {children}
+                    <span>OpenDC</span>
+                </a>
+            </Link>
+        </>
+    )
+}
+
+AppLogo.propTypes = {
+    href: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+}
+
+export default AppLogo
diff --git a/opendc-web/opendc-web-ui/src/components/AppLogo.module.scss b/opendc-web/opendc-web-ui/src/components/AppLogo.module.scss
new file mode 100644
index 00000000..3d228cb6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppLogo.module.scss
@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+.appLogo {
+    span {
+        margin-left: 4px;
+        color: #fff;
+    }
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/AppNavigation.js b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
new file mode 100644
index 00000000..b3f11f34
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
@@ -0,0 +1,75 @@
+/*
+ * 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 { Dropdown, DropdownItem, DropdownToggle, Nav, NavItem, NavList } from '@patternfly/react-core'
+import { useRouter } from 'next/router'
+import NavItemLink from './util/NavItemLink'
+import { useProject } from '../data/project'
+
+export function AppNavigation() {
+    const { pathname, query } = useRouter()
+    const { project: projectId } = query
+    const { data: project } = useProject(projectId)
+
+    const nextTopologyId = project?.topologyIds?.[0]
+    const nextPortfolioId = project?.portfolioIds?.[0]
+
+    return (
+        <Nav variant="horizontal">
+            <NavList>
+                <NavItem
+                    id="projects"
+                    to="/projects"
+                    itemId={0}
+                    component={NavItemLink}
+                    isActive={pathname === '/projects' || pathname === '/projects/[project]'}
+                >
+                    Projects
+                </NavItem>
+                {pathname.startsWith('/projects/[project]') && (
+                    <>
+                        <NavItem
+                            id="topologies"
+                            to={nextTopologyId ? `/projects/${projectId}/topologies/${nextTopologyId}` : '/projects'}
+                            itemId={1}
+                            component={NavItemLink}
+                            isActive={pathname === '/projects/[project]/topologies/[topology]'}
+                        >
+                            Topologies
+                        </NavItem>
+                        <NavItem
+                            id="portfolios"
+                            to={nextPortfolioId ? `/projects/${projectId}/portfolios/${nextPortfolioId}` : '/projects'}
+                            itemId={2}
+                            component={NavItemLink}
+                            isActive={pathname === '/projects/[project]/portfolios/[portfolio]'}
+                        >
+                            Portfolios
+                        </NavItem>
+                    </>
+                )}
+            </NavList>
+        </Nav>
+    )
+}
+
+AppNavigation.propTypes = {}
diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js
new file mode 100644
index 00000000..7cf9cc15
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/AppPage.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 { AppHeader } from './AppHeader'
+import { AppNavigation } from './AppNavigation'
+import React, { useState } from 'react'
+import { Page } from '@patternfly/react-core'
+
+export function AppPage({ children, breadcrumb, tertiaryNav }) {
+    return (
+        <Page breadcrumb={breadcrumb} tertiaryNav={tertiaryNav} header={<AppHeader />}>
+            {children}
+        </Page>
+    )
+}
+
+AppPage.propTypes = {
+    breadcrumb: PropTypes.node,
+    tertiaryNav: PropTypes.node,
+    children: PropTypes.node,
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
new file mode 100644
index 00000000..4791940f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/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 '../../../components/app/map/elements/GrayLayer'
+
+const GrayContainer = () => {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+    return <GrayLayer onClick={onClick} />
+}
+
+export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js b/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
deleted file mode 100644
index ddb94990..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/LoadingScreen.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-
-const LoadingScreen = () => (
-    <div className="display-4">
-        <FontAwesomeIcon icon={faSpinner} spin className="mr-4" />
-        Loading your project...
-    </div>
-)
-
-export default LoadingScreen
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
index d6ea1f84..45799f70 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
@@ -8,8 +8,8 @@ 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 / 8
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12
+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 SIDEBAR_WIDTH = 350
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
new file mode 100644
index 00000000..73accf3f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { HotKeys } from 'react-hotkeys'
+import { Stage } from 'react-konva'
+import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants'
+import { Provider, useDispatch, useStore } from 'react-redux'
+import useResizeObserver from 'use-resize-observer'
+import { mapContainer } from './MapStage.module.scss'
+import { useMapPosition } from '../../../data/map'
+import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map'
+import MapLayer from './layers/MapLayer'
+import RoomHoverLayer from './layers/RoomHoverLayer'
+import ObjectHoverLayer from './layers/ObjectHoverLayer'
+
+function MapStage() {
+    const store = useStore()
+    const dispatch = useDispatch()
+
+    const stage = useRef(null)
+    const [pos, setPos] = useState([0, 0])
+    const [x, y] = pos
+    const handlers = {
+        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
+    }
+    const mapPosition = useMapPosition()
+    const { ref, width = 100, height = 100 } = useResizeObserver()
+
+    const moveWithDelta = (deltaX, deltaY) =>
+        dispatch(setMapPositionWithBoundsCheck(mapPosition.x + deltaX, mapPosition.y + deltaY))
+    const updateMousePosition = () => {
+        if (!stage.current) {
+            return
+        }
+
+        const mousePos = stage.current.getStage().getPointerPosition()
+        setPos([mousePos.x, mousePos.y])
+    }
+    const updateScale = ({ evt }) => dispatch(zoomInOnPosition(evt.deltaY < 0, x, y))
+
+    useEffect(() => {
+        window['exportCanvasToImage'] = () => {
+            const download = document.createElement('a')
+            download.href = stage.current.getStage().toDataURL()
+            download.download = 'opendc-canvas-export-' + Date.now() + '.png'
+            download.click()
+        }
+    }, [stage])
+
+    useEffect(() => dispatch(setMapDimensions(width, height)), [width, height]) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
+            <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale}>
+                <Provider store={store}>
+                    <MapLayer />
+                    <RoomHoverLayer mouseX={x} mouseY={y} />
+                    <ObjectHoverLayer mouseX={x} mouseY={y} />
+                </Provider>
+            </Stage>
+        </HotKeys>
+    )
+}
+
+export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
new file mode 100644
index 00000000..d879b4c8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
@@ -0,0 +1,31 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.mapContainer {
+    background-color: var(--pf-global--Color--light-200);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
deleted file mode 100644
index c3177fe1..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect, useRef, useState } from 'react'
-import { HotKeys } from 'react-hotkeys'
-import { Stage } from 'react-konva'
-import MapLayer from '../../../containers/app/map/layers/MapLayer'
-import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer'
-import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
-import { NAVBAR_HEIGHT } from '../../navigation/Navbar'
-import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants'
-import { Provider, useStore } from 'react-redux'
-
-function MapStageComponent({
-    mapDimensions,
-    mapPosition,
-    setMapDimensions,
-    setMapPositionWithBoundsCheck,
-    zoomInOnPosition,
-}) {
-    const [pos, setPos] = useState([0, 0])
-    const stage = useRef(null)
-    const [x, y] = pos
-    const handlers = {
-        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
-        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
-    }
-
-    const moveWithDelta = (deltaX, deltaY) =>
-        setMapPositionWithBoundsCheck(mapPosition.x + deltaX, mapPosition.y + deltaY)
-    const updateMousePosition = () => {
-        if (!stage.current) {
-            return
-        }
-
-        const mousePos = stage.current.getStage().getPointerPosition()
-        setPos([mousePos.x, mousePos.y])
-    }
-
-    const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT)
-    const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y)
-
-    // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands
-    useEffect(() => {
-        updateDimensions()
-
-        window.addEventListener('resize', updateDimensions)
-        window.addEventListener('wheel', updateScale)
-
-        window['exportCanvasToImage'] = () => {
-            const download = document.createElement('a')
-            download.href = stage.current.getStage().toDataURL()
-            download.download = 'opendc-canvas-export-' + Date.now() + '.png'
-            download.click()
-        }
-
-        return () => {
-            window.removeEventListener('resize', updateDimensions)
-            window.removeEventListener('wheel', updateScale)
-        }
-    }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-    const store = useStore()
-
-    return (
-        <HotKeys handlers={handlers} allowChanges={true}>
-            <Stage
-                ref={stage}
-                width={mapDimensions.width}
-                height={mapDimensions.height}
-                onMouseMove={updateMousePosition}
-            >
-                <Provider store={store}>
-                    <MapLayer />
-                    <RoomHoverLayer mouseX={x} mouseY={y} />
-                    <ObjectHoverLayer mouseX={x} mouseY={y} />
-                </Provider>
-            </Stage>
-        </HotKeys>
-    )
-}
-
-MapStageComponent.propTypes = {
-    mapDimensions: PropTypes.shape({
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-    }).isRequired,
-    mapPosition: PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-    }).isRequired,
-    setMapDimensions: PropTypes.func,
-    setMapPositionWithBoundsCheck: PropTypes.func,
-    zoomInOnPosition: PropTypes.func,
-}
-
-export default MapStageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
new file mode 100644
index 00000000..3c75d3a7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/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 RackGroup from '../../../components/app/map/groups/RackGroup'
+import { Tile } from '../../../shapes'
+
+const RackContainer = ({ tile }) => {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    return <RackGroup interactionLevel={interactionLevel} tile={tile} />
+}
+
+RackContainer.propTypes = {
+    tile: Tile,
+}
+
+export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
new file mode 100644
index 00000000..838aea5a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from '../../../components/app/map/elements/RackFillBar'
+
+const RackSpaceFillContainer = (props) => {
+    const state = useSelector((state) => {
+        let energyConsumptionTotal = 0
+        const rack = state.objects.rack[state.objects.tile[props.tileId].rack]
+        const machineIds = rack.machines
+        machineIds.forEach((machineId) => {
+            if (machineId !== null) {
+                const machine = state.objects.machine[machineId]
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                machine.memories.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
+                )
+                machine.storages.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
+                )
+            }
+        })
+
+        return {
+            type: 'energy',
+            fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW),
+        }
+    })
+    return <RackFillBar {...props} {...state} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
new file mode 100644
index 00000000..6791120e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from '../../../components/app/map/elements/RackFillBar'
+
+const RackSpaceFillContainer = (props) => {
+    const state = useSelector((state) => {
+        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rack].machines
+        return {
+            type: 'space',
+            fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
+        }
+    })
+    return <RackFillBar {...props} {...state} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
new file mode 100644
index 00000000..26fbcd7a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
+import RoomGroup from '../../../components/app/map/groups/RoomGroup'
+
+const RoomContainer = (props) => {
+    const state = useSelector((state) => {
+        return {
+            interactionLevel: state.interactionLevel,
+            currentRoomInConstruction: state.construction.currentRoomInConstruction,
+            room: state.objects.room[props.roomId],
+        }
+    })
+    const dispatch = useDispatch()
+    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
+}
+
+RoomContainer.propTypes = {
+    roomId: PropTypes.string,
+}
+
+export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
new file mode 100644
index 00000000..bfcbf735
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
+import TileGroup from '../../../components/app/map/groups/TileGroup'
+
+const TileContainer = (props) => {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const tile = useSelector((state) => state.objects.tile[props.tileId])
+
+    const dispatch = useDispatch()
+    const onClick = (tile) => {
+        if (tile.rack) {
+            dispatch(goFromRoomToRack(tile._id))
+        }
+    }
+    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
+}
+
+TileContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
new file mode 100644
index 00000000..78e75d0f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
@@ -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.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
+import { useActiveTopology } from '../../../data/topology'
+
+const TopologyContainer = () => {
+    const topology = useActiveTopology()
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
+}
+
+export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
new file mode 100644
index 00000000..51dffe4b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/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 '../../../components/app/map/groups/WallGroup'
+
+const WallContainer = (props) => {
+    const tiles = useSelector((state) =>
+        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
+    )
+    return <WallGroup {...props} tiles={tiles} />
+}
+
+WallContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
new file mode 100644
index 00000000..f54b7c84
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import { ChevronLeftIcon } from '@patternfly/react-icons'
+import { collapseContainer } from './Collapse.module.scss'
+import { Button } from '@patternfly/react-core'
+
+function Collapse({ onClick }) {
+    return (
+        <div className={collapseContainer}>
+            <Button variant="tertiary" onClick={onClick}>
+                <ChevronLeftIcon />
+            </Button>
+        </div>
+    )
+}
+
+Collapse.propTypes = {
+    onClick: PropTypes.func,
+}
+
+export default Collapse
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
new file mode 100644
index 00000000..0c1fac94
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.collapseContainer {
+    position: absolute;
+    right: var(--pf-global--spacer--xs);
+    top: 0;
+    bottom: 10%;
+    margin: auto 0;
+    height: 50px;
+
+    button:global(.pf-m-tertiary) {
+        height: 100%;
+        padding: 2px;
+
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
deleted file mode 100644
index 9e8cb36a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ExportCanvasComponent.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCamera } from '@fortawesome/free-solid-svg-icons'
-
-const ExportCanvasComponent = () => (
-    <button
-        className="btn btn-success btn-circle btn-sm"
-        title="Export Canvas to PNG Image"
-        onClick={() => window['exportCanvasToImage']()}
-    >
-        <FontAwesomeIcon icon={faCamera} />
-    </button>
-)
-
-export default ExportCanvasComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
new file mode 100644
index 00000000..11c2f2d3
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+import { scaleIndicator } from './ScaleIndicator.module.scss'
+
+const ScaleIndicator = ({ scale }) => (
+    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
+        {TILE_SIZE_IN_METERS}m
+    </div>
+)
+
+ScaleIndicator.propTypes = {
+    scale: PropTypes.number.isRequired,
+}
+
+export default ScaleIndicator
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
@@ -0,0 +1,10 @@
+.scaleIndicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 50;
+
+    border: solid 2px #212529;
+    border-top: none;
+    border-left: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
deleted file mode 100644
index ef633764..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicatorComponent.module.scss'
-
-const ScaleIndicatorComponent = ({ scale }) => (
-    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
-        {TILE_SIZE_IN_METERS}m
-    </div>
-)
-
-ScaleIndicatorComponent.propTypes = {
-    scale: PropTypes.number.isRequired,
-}
-
-export default ScaleIndicatorComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
deleted file mode 100644
index f19e0ff2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicatorComponent.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.scaleIndicator {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    z-index: 50;
-
-    border: solid 2px #212529;
-    border-top: none;
-    border-left: none;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
deleted file mode 100644
index d2f70953..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
-import ExportCanvasComponent from './ExportCanvasComponent'
-import { toolPanel } from './ToolPanelComponent.module.scss'
-
-const ToolPanelComponent = () => (
-    <div className={toolPanel}>
-        <ZoomControlContainer />
-        <ExportCanvasComponent />
-    </div>
-)
-
-export default ToolPanelComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
deleted file mode 100644
index 970b1ce2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ToolPanelComponent.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.toolPanel {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    z-index: 50;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
new file mode 100644
index 00000000..4c60bfb2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { control, toolBar } from './Toolbar.module.scss'
+import { Button } from '@patternfly/react-core'
+import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCamera } from '@fortawesome/free-solid-svg-icons'
+
+const Toolbar = ({ onZoom, onExport }) => (
+    <div className={toolBar}>
+        <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
+            <SearchPlusIcon />
+        </Button>
+        <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
+            <SearchMinusIcon />
+        </Button>
+        <Button variant="tertiary" title="Export Canvas to PNG Image" onClick={() => onExport()} className={control}>
+            <FontAwesomeIcon icon={faCamera} />
+        </Button>
+    </div>
+)
+
+Toolbar.propTypes = {
+    onZoom: PropTypes.func,
+    onExport: PropTypes.func,
+}
+
+export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
new file mode 100644
index 00000000..0d505acc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
@@ -0,0 +1,29 @@
+.toolBar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+}
+
+.control {
+    &:global(.pf-m-tertiary) {
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
deleted file mode 100644
index 6c3c6cb7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ZoomControlComponent.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
-
-const ZoomControlComponent = ({ zoomInOnCenter }) => {
-    return (
-        <span>
-            <button
-                className="btn btn-default btn-circle btn-sm mr-1"
-                title="Zoom in"
-                onClick={() => zoomInOnCenter(true)}
-            >
-                <FontAwesomeIcon icon={faPlus} />
-            </button>
-            <button
-                className="btn btn-default btn-circle btn-sm mr-1"
-                title="Zoom out"
-                onClick={() => zoomInOnCenter(false)}
-            >
-                <FontAwesomeIcon icon={faMinus} />
-            </button>
-        </span>
-    )
-}
-
-ZoomControlComponent.propTypes = {
-    zoomInOnCenter: PropTypes.func.isRequired,
-}
-
-export default ZoomControlComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
index 40e28f01..9c4abc4a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Group } from 'react-konva'
-import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer'
-import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer'
 import { Tile } from '../../../../shapes'
 import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
 import TileObject from '../elements/TileObject'
+import RackSpaceFillContainer from '../RackSpaceFillContainer'
+import RackEnergyFillContainer from '../RackEnergyFillContainer'
 
 const RackGroup = ({ tile }) => {
     return (
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
index 42d20ff1..a14f3676 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
-import GrayContainer from '../../../../containers/app/map/GrayContainer'
-import TileContainer from '../../../../containers/app/map/TileContainer'
-import WallContainer from '../../../../containers/app/map/WallContainer'
 import { InteractionLevel, Room } from '../../../../shapes'
+import GrayContainer from '../GrayContainer'
+import TileContainer from '../TileContainer'
+import WallContainer from '../WallContainer'
 
 const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
index ce5e4a6b..cd36c7e5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Group } from 'react-konva'
-import RackContainer from '../../../../containers/app/map/RackContainer'
 import { Tile } from '../../../../shapes'
 import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
 import RoomTile from '../elements/RoomTile'
+import RackContainer from '../RackContainer'
 
 const TileGroup = ({ tile, newTile, onClick }) => {
     let tileObject
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
index d4c6db7d..d3bcb279 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Group } from 'react-konva'
-import GrayContainer from '../../../../containers/app/map/GrayContainer'
-import RoomContainer from '../../../../containers/app/map/RoomContainer'
 import { InteractionLevel, Topology } from '../../../../shapes'
+import RoomContainer from '../RoomContainer'
+import GrayContainer from '../GrayContainer'
 
 const TopologyGroup = ({ topology, interactionLevel }) => {
     if (!topology) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
new file mode 100644
index 00000000..badb9f68
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
@@ -0,0 +1,33 @@
+/*
+ * 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 MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
+import { useMapPosition, useMapScale } from '../../../../data/map'
+
+const MapLayer = (props) => {
+    const position = useMapPosition()
+    const scale = useMapScale()
+    return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
+}
+
+export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
index 96e6867c..efe5b4e5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Group, Layer } from 'react-konva'
-import TopologyContainer from '../../../../containers/app/map/TopologyContainer'
 import Backdrop from '../elements/Backdrop'
 import GridGroup from '../groups/GridGroup'
+import TopologyContainer from '../TopologyContainer'
 
 const MapLayerComponent = ({ mapPosition, mapScale }) => (
     <Layer>
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
new file mode 100644
index 00000000..9a087bd5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.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 React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addRackToTile } from '../../../../redux/actions/topology/room'
+import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
+import { findTileWithPosition } from '../../../../util/tile-calculations'
+
+const ObjectHoverLayer = (props) => {
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.inRackConstructionMode,
+            isValid: (x, y) => {
+                if (state.interactionLevel.mode !== 'ROOM') {
+                    return false
+                }
+
+                const currentRoom = state.objects.room[state.interactionLevel.roomId]
+                const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
+                const tile = findTileWithPosition(tiles, x, y)
+
+                return !(tile === null || tile.rack)
+            },
+        }
+    })
+
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(addRackToTile(x, y))
+    return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} />
+}
+
+export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
new file mode 100644
index 00000000..87240813
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
@@ -0,0 +1,67 @@
+/*
+ * 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 RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
+import {
+    deriveValidNextTilePositions,
+    findPositionInPositions,
+    findPositionInRooms,
+} from '../../../../util/tile-calculations'
+
+const RoomHoverLayer = (props) => {
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
+
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
+            isValid: (x, y) => {
+                const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
+                const oldRooms = Object.keys(state.objects.room)
+                    .map((id) => Object.assign({}, state.objects.room[id]))
+                    .filter(
+                        (room) =>
+                            state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
+                            room._id !== state.construction.currentRoomInConstruction
+                    )
+
+                ;[...oldRooms, newRoom].forEach((room) => {
+                    room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
+                })
+                if (newRoom.tiles.length === 0) {
+                    return findPositionInRooms(oldRooms, x, y) === -1
+                }
+
+                const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
+                return findPositionInPositions(validNextPositions, x, y) !== -1
+            },
+        }
+    })
+    return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} />
+}
+
+export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
new file mode 100644
index 00000000..09348e60
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
@@ -0,0 +1,40 @@
+/*
+ * 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 { Tooltip } from '@patternfly/react-core'
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
+import { METRIC_DESCRIPTIONS } from '../../../util/available-metrics'
+
+function PortfolioResultInfo({ metric }) {
+    return (
+        <Tooltip position="top" content={<div>{METRIC_DESCRIPTIONS[metric]}</div>}>
+            <OutlinedQuestionCircleIcon title="Metric information" />
+        </Tooltip>
+    )
+}
+
+PortfolioResultInfo.propTypes = {
+    metric: PropTypes.string.isRequired,
+}
+
+export default PortfolioResultInfo
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
new file mode 100644
index 00000000..6a96c70c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
@@ -0,0 +1,134 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
+import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_NAMES_SHORT, METRIC_UNITS } from '../../../util/available-metrics'
+import { mean, std } from 'mathjs'
+import approx from 'approximate-number'
+import {
+    Bullseye,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Grid,
+    GridItem,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
+import { usePortfolioScenarios } from '../../../data/project'
+import NewScenario from '../../projects/NewScenario'
+import PortfolioResultInfo from './PortfolioResultInfo'
+
+const PortfolioResults = ({ portfolioId }) => {
+    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
+
+    if (status === 'loading') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={Spinner} />
+                    <Title size="lg" headingLevel="h4">
+                        Loading Results
+                    </Title>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (status === 'error') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={ErrorCircleOIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        Unable to connect
+                    </Title>
+                    <EmptyStateBody>
+                        There was an error retrieving data. Check your connection and try again.
+                    </EmptyStateBody>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (scenarios.length === 0) {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={CubesIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        No results
+                    </Title>
+                    <EmptyStateBody>
+                        No results are currently available for this portfolio. Run a scenario to obtain simulation
+                        results.
+                    </EmptyStateBody>
+                    <NewScenario portfolioId={portfolioId} />
+                </EmptyState>
+            </Bullseye>
+        )
+    }
+
+    const dataPerMetric = {}
+
+    AVAILABLE_METRICS.forEach((metric) => {
+        dataPerMetric[metric] = scenarios
+            .filter((scenario) => scenario.results)
+            .map((scenario) => ({
+                name: scenario.name,
+                value: mean(scenario.results[metric]),
+                errorX: std(scenario.results[metric]),
+            }))
+    })
+
+    return (
+        <Grid hasGutter>
+            {AVAILABLE_METRICS.map((metric) => (
+                <GridItem xl={6} lg={12} key={metric}>
+                    <Card>
+                        <CardHeader>
+                            <CardActions>
+                                <PortfolioResultInfo metric={metric} />
+                            </CardActions>
+                            <CardTitle>{METRIC_NAMES[metric]}</CardTitle>
+                        </CardHeader>
+                        <CardBody>
+                            <ResponsiveContainer aspect={16 / 9} width="100%">
+                                <ComposedChart
+                                    data={dataPerMetric[metric]}
+                                    margin={{ left: 35, bottom: 15 }}
+                                    layout="vertical"
+                                >
+                                    <CartesianGrid strokeDasharray="3 3" />
+                                    <XAxis
+                                        tickFormatter={(tick) => approx(tick)}
+                                        label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
+                                        type="number"
+                                    />
+                                    <YAxis dataKey="name" type="category" />
+                                    <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
+                                    <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
+                                        <ErrorBar
+                                            dataKey="errorX"
+                                            width={10}
+                                            strokeWidth={3}
+                                            stroke="#FF6600"
+                                            direction="x"
+                                        />
+                                    </Scatter>
+                                </ComposedChart>
+                            </ResponsiveContainer>
+                        </CardBody>
+                    </Card>
+                </GridItem>
+            ))}
+        </Grid>
+    )
+}
+
+PortfolioResults.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default PortfolioResults
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
deleted file mode 100644
index 983a5c1d..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultsComponent.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
-import { AVAILABLE_METRICS, METRIC_NAMES_SHORT, METRIC_UNITS } from '../../../util/available-metrics'
-import { mean, std } from 'mathjs'
-import { Portfolio, Scenario } from '../../../shapes'
-import approx from 'approximate-number'
-
-const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
-    if (!portfolio) {
-        return <div>Loading...</div>
-    }
-
-    const nonFinishedScenarios = scenarios.filter((s) => s.simulation.state !== 'FINISHED')
-
-    if (nonFinishedScenarios.length > 0) {
-        if (nonFinishedScenarios.every((s) => s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')) {
-            return (
-                <div>
-                    <h1>Simulation running...</h1>
-                    <p>{nonFinishedScenarios.length} of the scenarios are still being simulated</p>
-                </div>
-            )
-        }
-        if (nonFinishedScenarios.some((s) => s.simulation.state === 'FAILED')) {
-            return (
-                <div>
-                    <h1>Simulation failed.</h1>
-                    <p>
-                        Try again by creating a new scenario. Please contact the OpenDC team for support, if issues
-                        persist.
-                    </p>
-                </div>
-            )
-        }
-    }
-
-    const dataPerMetric = {}
-
-    AVAILABLE_METRICS.forEach((metric) => {
-        dataPerMetric[metric] = scenarios.map((scenario) => ({
-            name: scenario.name,
-            value: mean(scenario.results[metric]),
-            errorX: std(scenario.results[metric]),
-        }))
-    })
-
-    return (
-        <div className="full-height" style={{ overflowY: 'scroll', overflowX: 'hidden' }}>
-            <h2>Portfolio: {portfolio.name}</h2>
-            <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p>
-            <div className="row">
-                {AVAILABLE_METRICS.map((metric) => (
-                    <div className="col-6 mb-2" key={metric}>
-                        <h4>{METRIC_NAMES_SHORT[metric]}</h4>
-                        <ResponsiveContainer aspect={16 / 9} width="100%">
-                            <ComposedChart
-                                data={dataPerMetric[metric]}
-                                margin={{ left: 35, bottom: 15 }}
-                                layout="vertical"
-                            >
-                                <CartesianGrid strokeDasharray="3 3" />
-                                <XAxis
-                                    tickFormatter={(tick) => approx(tick)}
-                                    label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
-                                    type="number"
-                                />
-                                <YAxis dataKey="name" type="category" />
-                                <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
-                                <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
-                                    <ErrorBar
-                                        dataKey="errorX"
-                                        width={10}
-                                        strokeWidth={3}
-                                        stroke="#FF6600"
-                                        direction="x"
-                                    />
-                                </Scatter>
-                            </ComposedChart>
-                        </ResponsiveContainer>
-                    </div>
-                ))}
-            </div>
-        </div>
-    )
-}
-
-PortfolioResultsComponent.propTypes = {
-    portfolio: Portfolio,
-    scenarios: PropTypes.arrayOf(Scenario),
-}
-
-export default PortfolioResultsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
deleted file mode 100644
index 56fa799f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import React, { useState } from 'react'
-import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-
-function Sidebar({ isRight, collapsible = true, children }) {
-    const [isCollapsed, setCollapsed] = useState(false)
-
-    const button = (
-        <div
-            className={classNames(collapseButton, {
-                [collapseButtonRight]: isRight,
-            })}
-            onClick={() => setCollapsed(!isCollapsed)}
-        >
-            {(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
-                <FontAwesomeIcon icon={faAngleLeft} title={isRight ? 'Expand' : 'Collapse'} />
-            ) : (
-                <FontAwesomeIcon icon={faAngleRight} title={isRight ? 'Collapse' : 'Expand'} />
-            )}
-        </div>
-    )
-
-    if (isCollapsed) {
-        return button
-    }
-    return (
-        <div
-            className={classNames(`${sidebar} p-3 h-100`, {
-                [sidebarRight]: isRight,
-            })}
-            onWheel={(e) => e.stopPropagation()}
-        >
-            {children}
-            {collapsible && button}
-        </div>
-    )
-}
-
-Sidebar.propTypes = {
-    isRight: PropTypes.bool.isRequired,
-    collapsible: PropTypes.bool,
-    children: PropTypes.node,
-}
-
-export default Sidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
deleted file mode 100644
index 19c6a97f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import 'src/style/_variables.scss';
-@import 'src/style/_mixins.scss';
-
-.collapseButton {
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    padding: 5px 7px;
-
-    background: white;
-    border: solid 1px $gray-semi-light;
-    z-index: 99;
-
-    @include clickable;
-    border-radius: 5px;
-    transition: background 200ms;
-
-    &.collapseButtonRight {
-        left: auto;
-        right: 5px;
-        top: 5px;
-    }
-
-    &:hover {
-        background: #eeeeee;
-    }
-}
-
-.sidebar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $side-bar-width;
-
-    z-index: 100;
-    background: white;
-
-    border-right: $gray-semi-dark 1px solid;
-
-    .collapseButton {
-        left: auto;
-        right: -25px;
-    }
-}
-
-.sidebarRight {
-    left: auto;
-    right: 0;
-
-    border-left: $gray-semi-dark 1px solid;
-    border-right: none;
-
-    .collapseButtonRight {
-        left: -25px;
-        right: auto;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
deleted file mode 100644
index d61ff24e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Portfolio } from '../../../../shapes'
-import Link from 'next/link'
-import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
-import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function PortfolioListComponent({
-    portfolios,
-    currentProjectId,
-    currentPortfolioId,
-    onNewPortfolio,
-    onChoosePortfolio,
-    onDeletePortfolio,
-}) {
-    return (
-        <div className="pb-3">
-            <h2>
-                Portfolios
-                <Button color="primary" outline className="float-right" onClick={(e) => onNewPortfolio(e)}>
-                    <FontAwesomeIcon icon={faPlus} />
-                </Button>
-            </h2>
-
-            {portfolios.map((portfolio) => (
-                <div key={portfolio._id}>
-                    <Row className="row mb-1">
-                        <Col
-                            xs="7"
-                            className={classNames('align-self-center', {
-                                'font-weight-bold': portfolio._id === currentPortfolioId,
-                            })}
-                        >
-                            {portfolio.name}
-                        </Col>
-                        <Col xs="5" className="text-right">
-                            <Link passHref href={`/projects/${currentProjectId}/portfolios/${portfolio._id}`}>
-                                <Button
-                                    color="primary"
-                                    outline
-                                    className="mr-1"
-                                    onClick={() => onChoosePortfolio(portfolio._id)}
-                                >
-                                    <FontAwesomeIcon icon={faPlay} />
-                                </Button>
-                            </Link>
-                            <Button color="danger" outline onClick={() => onDeletePortfolio(portfolio._id)}>
-                                <FontAwesomeIcon icon={faTrash} />
-                            </Button>
-                        </Col>
-                    </Row>
-                    <ScenarioListContainer portfolioId={portfolio._id} />
-                </div>
-            ))}
-        </div>
-    )
-}
-
-PortfolioListComponent.propTypes = {
-    portfolios: PropTypes.arrayOf(Portfolio),
-    currentProjectId: PropTypes.string,
-    currentPortfolioId: PropTypes.string,
-    onNewPortfolio: PropTypes.func.isRequired,
-    onChoosePortfolio: PropTypes.func.isRequired,
-    onDeletePortfolio: PropTypes.func.isRequired,
-}
-
-export default PortfolioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
deleted file mode 100644
index 10d22e5b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Sidebar from '../Sidebar'
-import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
-import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
-import { Container } from 'reactstrap'
-
-const ProjectSidebarComponent = ({ collapsible }) => (
-    <Sidebar isRight={false} collapsible={collapsible}>
-        <Container fluid className="h-100 overflow-auto">
-            <TopologyListContainer />
-            <PortfolioListContainer />
-        </Container>
-    </Sidebar>
-)
-
-ProjectSidebarComponent.propTypes = {
-    collapsible: PropTypes.bool,
-}
-
-export default ProjectSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
deleted file mode 100644
index e81d2b78..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Scenario } from '../../../../shapes'
-import { Button, Col, Row } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function ScenarioListComponent({ scenarios, portfolioId, onNewScenario, onDeleteScenario }) {
-    return (
-        <>
-            {scenarios.map((scenario, idx) => (
-                <Row key={scenario._id} className="mb-1">
-                    <Col xs="7" className="pl-5 align-self-center">
-                        {scenario.name}
-                    </Col>
-                    <Col xs="5" className="text-right">
-                        <Button
-                            color="danger"
-                            outline
-                            disabled={idx === 0}
-                            onClick={() => (idx !== 0 ? onDeleteScenario(scenario._id) : undefined)}
-                        >
-                            <FontAwesomeIcon icon={faTrash} />
-                        </Button>
-                    </Col>
-                </Row>
-            ))}
-            <div className="pl-4 mb-2">
-                <Button color="primary" outline onClick={() => onNewScenario(portfolioId)}>
-                    <FontAwesomeIcon icon={faPlus} className="mr-1" />
-                    New scenario
-                </Button>
-            </div>
-        </>
-    )
-}
-
-ScenarioListComponent.propTypes = {
-    scenarios: PropTypes.arrayOf(Scenario),
-    portfolioId: PropTypes.string,
-    onNewScenario: PropTypes.func.isRequired,
-    onDeleteScenario: PropTypes.func.isRequired,
-}
-
-export default ScenarioListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
deleted file mode 100644
index ac58669b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/TopologyListComponent.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Topology } from '../../../../shapes'
-import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-function TopologyListComponent({ topologies, currentTopologyId, onChooseTopology, onNewTopology, onDeleteTopology }) {
-    return (
-        <div className="pb-3">
-            <h2>
-                Topologies
-                <Button color="primary" outline className="float-right" onClick={onNewTopology}>
-                    <FontAwesomeIcon icon={faPlus} />
-                </Button>
-            </h2>
-
-            {topologies.map((topology, idx) => (
-                <Row key={topology._id} className="mb-1">
-                    <Col
-                        xs="7"
-                        className={classNames('align-self-center', {
-                            'font-weight-bold': topology._id === currentTopologyId,
-                        })}
-                    >
-                        {topology.name}
-                    </Col>
-                    <Col xs="5" className="text-right">
-                        <Button color="primary" outline className="mr-1" onClick={() => onChooseTopology(topology._id)}>
-                            <FontAwesomeIcon icon={faPlay} />
-                        </Button>
-                        <Button
-                            color="danger"
-                            outline
-                            disabled={idx === 0}
-                            onClick={() => (idx !== 0 ? onDeleteTopology(topology._id) : undefined)}
-                        >
-                            <FontAwesomeIcon icon={faTrash} />
-                        </Button>
-                    </Col>
-                </Row>
-            ))}
-        </div>
-    )
-}
-
-TopologyListComponent.propTypes = {
-    topologies: PropTypes.arrayOf(Topology),
-    currentTopologyId: PropTypes.string,
-    onChooseTopology: PropTypes.func.isRequired,
-    onNewTopology: PropTypes.func.isRequired,
-    onDeleteTopology: PropTypes.func.isRequired,
-}
-
-export default TopologyListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
index b8c88003..ececd07b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
@@ -1,16 +1,65 @@
 import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
-
-const NameComponent = ({ name, onEdit }) => (
-    <h2>
-        {name}
-        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesomeIcon icon={faPencilAlt} />
-        </button>
-    </h2>
-)
+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,
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
new file mode 100644
index 00000000..c4a880b1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InteractionLevel } from '../../../../shapes'
+import BuildingSidebarComponent from './building/BuildingSidebarComponent'
+import {
+    Button,
+    DrawerActions,
+    DrawerCloseButton,
+    DrawerHead,
+    DrawerPanelBody,
+    DrawerPanelContent,
+    Flex,
+    Title,
+} from '@patternfly/react-core'
+import { AngleLeftIcon } from '@patternfly/react-icons'
+import { useDispatch } from 'react-redux'
+import { goDownOneInteractionLevel } from '../../../../redux/actions/interaction-level'
+import { backButton } from './TopologySidebar.module.scss'
+import RoomSidebarContainer from './room/RoomSidebarContainer'
+import RackSidebarContainer from './rack/RackSidebarContainer'
+import MachineSidebarContainer from './machine/MachineSidebarContainer'
+
+const name = {
+    BUILDING: 'Building',
+    ROOM: 'Room',
+    RACK: 'Rack',
+    MACHINE: 'Machine',
+}
+
+const TopologySidebar = ({ interactionLevel, onClose }) => {
+    let sidebarContent
+
+    switch (interactionLevel.mode) {
+        case 'BUILDING':
+            sidebarContent = <BuildingSidebarComponent />
+            break
+        case 'ROOM':
+            sidebarContent = <RoomSidebarContainer />
+            break
+        case 'RACK':
+            sidebarContent = <RackSidebarContainer />
+            break
+        case 'MACHINE':
+            sidebarContent = <MachineSidebarContainer />
+            break
+        default:
+            sidebarContent = 'Missing Content'
+    }
+
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+
+    return (
+        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
+            <DrawerHead>
+                <Flex>
+                    <Button
+                        variant="tertiary"
+                        isSmall
+                        className={backButton}
+                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
+                    >
+                        <AngleLeftIcon />
+                    </Button>
+                    <Title className="pf-u-align-self-center" headingLevel="h1">
+                        {name[interactionLevel.mode]}
+                    </Title>
+                </Flex>
+                <DrawerActions>
+                    <DrawerCloseButton onClose={onClose} />
+                </DrawerActions>
+            </DrawerHead>
+            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
+        </DrawerPanelContent>
+    )
+}
+
+TopologySidebar.propTypes = {
+    interactionLevel: InteractionLevel,
+    onClose: PropTypes.func,
+}
+
+export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
new file mode 100644
index 00000000..45dc98da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
@@ -0,0 +1,37 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.backButton {
+    &:global(.pf-c-button) {
+        align-self: center;
+        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+        color: var(--pf-global--Color--400);
+
+        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+
+        &:hover,
+        &:focus {
+            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
deleted file mode 100644
index 450df6cd..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import BuildingSidebarContainer from '../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer'
-import MachineSidebarContainer from '../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer'
-import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer'
-import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer'
-import Sidebar from '../Sidebar'
-import { InteractionLevel } from '../../../../shapes'
-
-const TopologySidebarComponent = ({ interactionLevel }) => {
-    let sidebarContent
-
-    switch (interactionLevel.mode) {
-        case 'BUILDING':
-            sidebarContent = <BuildingSidebarContainer />
-            break
-        case 'ROOM':
-            sidebarContent = <RoomSidebarContainer />
-            break
-        case 'RACK':
-            sidebarContent = <RackSidebarContainer />
-            break
-        case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer />
-            break
-        default:
-            sidebarContent = 'Missing Content'
-    }
-
-    return <Sidebar isRight={true}>{sidebarContent}</Sidebar>
-}
-
-TopologySidebarComponent.propTypes = {
-    interactionLevel: InteractionLevel,
-}
-
-export default TopologySidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index eea62f84..6c2556d3 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,13 +1,8 @@
 import React from 'react'
-import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
+import NewRoomConstructionContainer from './NewRoomConstructionContainer'
 
 const BuildingSidebarComponent = () => {
-    return (
-        <div>
-            <h2>Building</h2>
-            <NewRoomConstructionContainer />
-        </div>
-    )
+    return <NewRoomConstructionContainer />
 }
 
 export default BuildingSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index e8c81735..656b2515 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,29 +1,38 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { Button } from 'reactstrap'
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
 
 const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
     if (currentRoomInConstruction === '-1') {
         return (
-            <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-                <FontAwesomeIcon icon={faPlus} className="mr-2" />
+            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
                 Construct a new room
-            </div>
+            </Button>
         )
     }
     return (
-        <div>
-            <Button color="primary" block onClick={onFinish}>
-                <FontAwesomeIcon icon={faCheck} className="mr-2" />
-                Finalize new room
-            </Button>
-            <Button color="default" block onClick={onCancel}>
-                <FontAwesomeIcon icon={faTimes} className="mr-2" />
-                Cancel construction
-            </Button>
-        </div>
+        <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>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..0836263c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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'
+
+const NewRoomConstructionButton = (props) => {
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+
+    const dispatch = useDispatch()
+    const actions = {
+        onStart: () => dispatch(startNewRoomConstruction()),
+        onFinish: () => dispatch(finishNewRoomConstruction()),
+        onCancel: () => dispatch(cancelNewRoomConstruction()),
+    }
+    return (
+        <NewRoomConstructionComponent {...props} {...actions} currentRoomInConstruction={currentRoomInConstruction} />
+    )
+}
+
+export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
deleted file mode 100644
index 829bf265..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
-
-const BackToRackComponent = ({ onClick }) => (
-    <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
-        Back to rack
-    </div>
-)
-
-BackToRackComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default BackToRackComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
new file mode 100644
index 00000000..a7bf3719
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.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 React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { deleteMachine } from '../../../../../redux/actions/topology/machine'
+import { Button } from '@patternfly/react-core'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import ConfirmationModal from '../../../../modals/ConfirmationModal'
+
+const DeleteMachine = () => {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this machine
+            </Button>
+            <ConfirmationModal
+                title="Delete this machine"
+                message="Are you sure you want to delete this machine?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index 88a99e0f..d3d4a8cf 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,17 +1,38 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer'
-import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer'
-import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer'
-import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer'
+import UnitTabsComponent from './UnitTabsComponent'
+import DeleteMachine from './DeleteMachine'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
 
 const MachineSidebarComponent = ({ machineId }) => {
+    const machine = useSelector((state) => state.objects.machine[machineId])
     return (
-        <div className="h-100 overflow-auto">
-            <MachineNameContainer />
-            <BackToRackContainer />
-            <DeleteMachineContainer />
-            <UnitTabsContainer />
+        <div>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        Machine at position {machine.position}
+                    </TextListItem>
+                </TextList>
+
+                <Title headingLevel="h2">Actions</Title>
+                <DeleteMachine />
+
+                <Title headingLevel="h2">Units</Title>
+            </TextContent>
+            <div className="pf-u-h-100">
+                <UnitTabsComponent />
+            </div>
         </div>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
new file mode 100644
index 00000000..94d9f2c3
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.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 MachineSidebarComponent from './MachineSidebarComponent'
+
+const MachineSidebarContainer = (props) => {
+    const machineId = useSelector(
+        (state) =>
+            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
+                state.interactionLevel.position - 1
+            ]
+    )
+    return <MachineSidebarComponent {...props} machineId={machineId} />
+}
+
+export default MachineSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 532add37..88591208 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,28 +1,36 @@
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-import { Button, Form, FormGroup, Input } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+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 unitSelect = useRef(null)
+    const [isOpen, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
 
     return (
-        <Form inline>
-            <FormGroup className="w-100">
-                <Input type="select" className="w-70 mr-1" innerRef={unitSelect}>
-                    {units.map((unit) => (
-                        <option value={unit._id} key={unit._id}>
-                            {unit.name}
-                        </option>
-                    ))}
-                </Input>
-                <Button color="primary" outline onClick={() => onAdd(unitSelect.current.value)}>
-                    <FontAwesomeIcon icon={faPlus} className="mr-2" />
-                    Add
-                </Button>
-            </FormGroup>
-        </Form>
+        <InputGroup>
+            <Select
+                variant={SelectVariant.single}
+                placeholderText="Select a unit"
+                aria-label="Select Unit"
+                onToggle={() => setOpen(!isOpen)}
+                isOpen={isOpen}
+                onSelect={(_, selection) => {
+                    setSelected(selection)
+                    setOpen(false)
+                }}
+                selections={selected}
+            >
+                {units.map((unit) => (
+                    <SelectOption value={unit._id} key={unit._id}>
+                        {unit.name}
+                    </SelectOption>
+                ))}
+            </Select>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+                Add
+            </Button>
+        </InputGroup>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
new file mode 100644
index 00000000..8a6680e6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.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 React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addUnit } from '../../../../../redux/actions/topology/machine'
+import UnitAddComponent from './UnitAddComponent'
+
+const UnitAddContainer = ({ unitType }) => {
+    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const dispatch = useDispatch()
+
+    const onAdd = (id) => dispatch(addUnit(unitType, id))
+
+    return <UnitAddComponent onAdd={onAdd} units={units} />
+}
+
+UnitAddContainer.propTypes = {
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
deleted file mode 100644
index 46c639bd..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
-
-function UnitComponent({ index, unitType, unit, onDelete }) {
-    let unitInfo
-    if (unitType === 'cpu' || unitType === 'gpu') {
-        unitInfo = (
-            <>
-                <strong>Clockrate: </strong>
-                <code>{unit.clockRateMhz}</code>
-                <br />
-                <strong>Num. Cores: </strong>
-                <code>{unit.numberOfCores}</code>
-                <br />
-                <strong>Energy Cons.: </strong>
-                <code>{unit.energyConsumptionW} W</code>
-                <br />
-            </>
-        )
-    } else if (unitType === 'memory' || unitType === 'storage') {
-        unitInfo = (
-            <>
-                <strong>Speed:</strong>
-                <code>{unit.speedMbPerS} Mb/s</code>
-                <br />
-                <strong>Size:</strong>
-                <code>{unit.sizeMb} MB</code>
-                <br />
-                <strong>Energy Cons.:</strong>
-                <code>{unit.energyConsumptionW} W</code>
-                <br />
-            </>
-        )
-    }
-
-    return (
-        <li className="d-flex list-group-item justify-content-between align-items-center">
-            <span style={{ maxWidth: '60%' }}>{unit.name}</span>
-            <span>
-                <Button outline={true} color="info" className="mr-1" id={`unit-${index}`}>
-                    <FontAwesomeIcon icon={faInfoCircle} />
-                </Button>
-                <UncontrolledPopover trigger="focus" placement="left" target={`unit-${index}`}>
-                    <PopoverHeader>Unit Information</PopoverHeader>
-                    <PopoverBody>{unitInfo}</PopoverBody>
-                </UncontrolledPopover>
-
-                <Button outline color="danger" onClick={onDelete}>
-                    <FontAwesomeIcon icon={faTrash} />
-                </Button>
-            </span>
-        </li>
-    )
-}
-
-UnitComponent.propTypes = {
-    index: PropTypes.number,
-    unitType: PropTypes.string,
-    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]),
-    onDelete: PropTypes.func,
-}
-
-export default UnitComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 54c1a6cc..9c3c08fd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,29 +1,107 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
-import UnitComponent from './UnitComponent'
+import {
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Popover,
+    Title,
+} from '@patternfly/react-core'
+import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
 
-const UnitListComponent = ({ unitType, units, onDelete }) => (
-    <ul className="list-group mt-1">
-        {units.length !== 0 ? (
-            units.map((unit, index) => (
-                <UnitComponent
-                    unitType={unitType}
-                    unit={unit}
-                    onDelete={() => onDelete(unit, unitType)}
-                    index={index}
-                    key={index}
-                />
-            ))
-        ) : (
-            <div className="alert alert-info">
-                <span>
-                    <strong>No units...</strong> Add some with the menu above!
-                </span>
-            </div>
-        )}
-    </ul>
-)
+const UnitInfo = ({ unit, unitType }) => {
+    if (unitType === 'cpu' || unitType === 'gpu') {
+        return (
+            <DescriptionList>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+                </DescriptionListGroup>
+            </DescriptionList>
+        )
+    }
+
+    return (
+        <DescriptionList>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Speed</DescriptionListTerm>
+                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Capacity</DescriptionListTerm>
+                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+            </DescriptionListGroup>
+        </DescriptionList>
+    )
+}
+
+UnitInfo.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
+}
+
+const UnitListComponent = ({ unitType, units, onDelete }) => {
+    if (units.length === 0) {
+        return (
+            <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h5" size="lg">
+                    No units found
+                </Title>
+                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <DataList aria-label="Machine Units" isCompact>
+            {units.map((unit, index) => (
+                <DataListItem key={index}>
+                    <DataListItemRow>
+                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
+                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                            <Popover
+                                headerContent="Unit Information"
+                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
+                            >
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <InfoIcon />
+                                </Button>
+                            </Popover>
+                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
+                                <TrashIcon />
+                            </Button>
+                        </DataListAction>
+                    </DataListItemRow>
+                </DataListItem>
+            ))}
+        </DataList>
+    )
+}
 
 UnitListComponent.propTypes = {
     unitType: PropTypes.string.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
new file mode 100644
index 00000000..2d994f97
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.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 from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitListComponent from './UnitListComponent'
+import { deleteUnit } from '../../../../../redux/actions/topology/machine'
+
+const unitMapping = {
+    cpu: 'cpus',
+    gpu: 'gpus',
+    memory: 'memories',
+    storage: 'storages',
+}
+
+const UnitListContainer = ({ unitType, ...props }) => {
+    const dispatch = useDispatch()
+    const units = useSelector((state) => {
+        const machine =
+            state.objects.machine[
+                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
+                    state.interactionLevel.position - 1
+                ]
+            ]
+        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+    })
+    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
+
+    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
+}
+
+UnitListContainer.propTypes = {
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index ebb5f479..723ed2e2 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,85 +1,30 @@
 import React, { useState } from 'react'
-import { Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
-import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
-import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
+import UnitAddContainer from './UnitAddContainer'
+import UnitListContainer from './UnitListContainer'
 
 const UnitTabsComponent = () => {
     const [activeTab, setActiveTab] = useState('cpu-units')
-    const toggle = (tab) => {
-        if (activeTab !== tab) setActiveTab(tab)
-    }
 
     return (
-        <div className="mt-2">
-            <Nav tabs>
-                <NavItem>
-                    <NavLink
-                        className={activeTab === 'cpu-units' ? 'active' : ''}
-                        onClick={() => {
-                            toggle('cpu-units')
-                        }}
-                    >
-                        CPU
-                    </NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink
-                        className={activeTab === 'gpu-units' ? 'active' : ''}
-                        onClick={() => {
-                            toggle('gpu-units')
-                        }}
-                    >
-                        GPU
-                    </NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink
-                        className={activeTab === 'memory-units' ? 'active' : ''}
-                        onClick={() => {
-                            toggle('memory-units')
-                        }}
-                    >
-                        Memory
-                    </NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink
-                        className={activeTab === 'storage-units' ? 'active' : ''}
-                        onClick={() => {
-                            toggle('storage-units')
-                        }}
-                    >
-                        Stor.
-                    </NavLink>
-                </NavItem>
-            </Nav>
-            <TabContent activeTab={activeTab}>
-                <TabPane tabId="cpu-units">
-                    <div className="py-2">
-                        <UnitAddContainer unitType="cpu" />
-                        <UnitListContainer unitType="cpu" />
-                    </div>
-                </TabPane>
-                <TabPane tabId="gpu-units">
-                    <div className="py-2">
-                        <UnitAddContainer unitType="gpu" />
-                        <UnitListContainer unitType="gpu" />
-                    </div>
-                </TabPane>
-                <TabPane tabId="memory-units">
-                    <div className="py-2">
-                        <UnitAddContainer unitType="memory" />
-                        <UnitListContainer unitType="memory" />
-                    </div>
-                </TabPane>
-                <TabPane tabId="storage-units">
-                    <div className="py-2">
-                        <UnitAddContainer unitType="storage" />
-                        <UnitListContainer unitType="storage" />
-                    </div>
-                </TabPane>
-            </TabContent>
-        </div>
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
+                <UnitAddContainer unitType="cpu" />
+                <UnitListContainer unitType="cpu" />
+            </Tab>
+            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
+                <UnitAddContainer unitType="gpu" />
+                <UnitListContainer unitType="gpu" />
+            </Tab>
+            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
+                <UnitAddContainer unitType="memory" />
+                <UnitListContainer unitType="memory" />
+            </Tab>
+            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
+                <UnitAddContainer unitType="storage" />
+                <UnitListContainer unitType="storage" />
+            </Tab>
+        </Tabs>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
index a330c302..c8543134 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
@@ -1,12 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSave } from '@fortawesome/free-solid-svg-icons'
-import { Button } from 'reactstrap'
+import { SaveIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
 
 const AddPrefabComponent = ({ onClick }) => (
-    <Button color="primary" block onClick={onClick}>
-        <FontAwesomeIcon icon={faSave} className="mr-2" />
+    <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
         Save this rack to a prefab
     </Button>
 )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
new file mode 100644
index 00000000..d3d9aaf5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { addPrefab } from '../../../../../redux/actions/prefabs'
+import AddPrefabComponent from './AddPrefabComponent'
+
+const AddPrefabContainer = (props) => {
+    const dispatch = useDispatch()
+    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
+}
+
+export default AddPrefabContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
deleted file mode 100644
index e0eb5979..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
-import { Button } from 'reactstrap'
-
-const BackToRoomComponent = ({ onClick }) => (
-    <Button color="secondary" block className="mb-2" onClick={onClick}>
-        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
-        Back to room
-    </Button>
-)
-
-BackToRoomComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default BackToRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..47959f03
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.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 React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRack } from '../../../../../redux/actions/topology/rack'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import { Button } from '@patternfly/react-core'
+
+const DeleteRackContainer = () => {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
deleted file mode 100644
index 63b319e0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { ListGroupItem, Badge, Button } from 'reactstrap'
-
-const EmptySlotComponent = ({ position, onAdd }) => (
-    <ListGroupItem className="d-flex justify-content-between align-items-center">
-        <Badge color="info" className="mr-1">
-            {position}
-        </Badge>
-        <Button color="primary" outline onClick={onAdd}>
-            <FontAwesomeIcon icon={faPlus} className="mr-2" />
-            Add machine
-        </Button>
-    </ListGroupItem>
-)
-
-EmptySlotComponent.propTypes = {
-    position: PropTypes.number,
-    onAdd: PropTypes.func,
-}
-
-export default EmptySlotComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index b71918da..1617b3bf 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -2,18 +2,16 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Image from 'next/image'
 import { Machine } from '../../../../../shapes'
-import { Badge, ListGroupItem } from 'reactstrap'
+import { Flex, Label } from '@patternfly/react-core'
 
 const UnitIcon = ({ id, type }) => (
-    <div className="ml-1">
-        <Image
-            src={'/img/topology/' + id + '-icon.png'}
-            alt={'Machine contains ' + type + ' units'}
-            layout="intrinsic"
-            height={35}
-            width={35}
-        />
-    </div>
+    <Image
+        src={'/img/topology/' + id + '-icon.png'}
+        alt={'Machine contains ' + type + ' units'}
+        layout="intrinsic"
+        height={24}
+        width={24}
+    />
 )
 
 UnitIcon.propTypes = {
@@ -21,34 +19,27 @@ UnitIcon.propTypes = {
     type: PropTypes.string,
 }
 
-const MachineComponent = ({ position, machine, onClick }) => {
+const MachineComponent = ({ machine, onClick }) => {
     const hasNoUnits =
         machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
     return (
-        <ListGroupItem
-            action
-            className="d-flex justify-content-between align-items-center"
-            onClick={onClick}
-            style={{ backgroundColor: 'white' }}
-        >
-            <Badge color="info" className="mr-1">
-                {position}
-            </Badge>
-            <div className="d-inline-flex">
-                {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-                {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-                {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-                {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-                {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
-            </div>
-        </ListGroupItem>
+        <Flex onClick={() => onClick()}>
+            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+            {hasNoUnits ? (
+                <Label variant="outline" color="orange">
+                    Machine with no units
+                </Label>
+            ) : undefined}
+        </Flex>
     )
 }
 
 MachineComponent.propTypes = {
-    machine: Machine,
-    position: PropTypes.number,
+    machine: Machine.isRequired,
     onClick: PropTypes.func,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index e024a417..27834cf4 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,21 +1,66 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { machineList } from './MachineListComponent.module.scss'
 import MachineComponent from './MachineComponent'
 import { Machine } from '../../../../../shapes'
-import EmptySlotComponent from './EmptySlotComponent'
+import {
+    Badge,
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+} from '@patternfly/react-core'
+import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
 
-const MachineListComponent = ({ machines = [], onSelect, onAdd }) => {
+function MachineListComponent({ machines = [], onSelect, onAdd }) {
     return (
-        <ul className={`list-group ${machineList}`}>
-            {machines.map((machine, index) => {
-                if (machine === null) {
-                    return <EmptySlotComponent key={index} onAdd={() => onAdd(index + 1)} />
-                } else {
-                    return <MachineComponent key={index} onClick={() => onSelect(index + 1)} machine={machine} />
-                }
-            })}
-        </ul>
+        <DataList aria-label="Rack Units">
+            {machines.map((machine, index) =>
+                machine ? (
+                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="primary content">
+                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <AngleRightIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                ) : (
+                    <DataListItem key={index}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="add" className="text-secondary">
+                                        Empty Slot
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
+                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
+                                    <PlusIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                )
+            )}
+        </DataList>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
deleted file mode 100644
index f075aac9..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.machineList li {
-    min-height: 64px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
new file mode 100644
index 00000000..54e6db0a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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.objects.rack[state.objects.tile[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const machinesNull = useMemo(() => {
+        const res = Array(rack.capacity).fill(null)
+        for (const machine of machines) {
+            res[machine.position - 1] = machine
+        }
+        return res
+    }, [rack, machines])
+    const dispatch = useDispatch()
+
+    return (
+        <MachineListComponent
+            {...props}
+            machines={machinesNull}
+            onAdd={(index) => dispatch(addMachine(index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
+    )
+}
+
+MachineListContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
new file mode 100644
index 00000000..11529b55
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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 rackName = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack].name)
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(name))
+        }
+    }
+    return <NameComponent name={rackName} onEdit={callback} />
+}
+
+RackNameContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index 74313bf7..dd5117f7 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -1,25 +1,58 @@
+import PropTypes from 'prop-types'
 import React from 'react'
-import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer'
-import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
-import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
-import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import { sidebarContainer, sidebarHeaderContainer, machineListContainer } from './RackSidebarComponent.module.scss'
-import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
+import { machineListContainer, sidebarContainer } from './RackSidebarComponent.module.scss'
+import RackNameContainer from './RackNameContainer'
+import AddPrefabContainer from './AddPrefabContainer'
+import DeleteRackContainer from './DeleteRackContainer'
+import MachineListContainer from './MachineListContainer'
+import {
+    Skeleton,
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function RackSidebarComponent({ tileId }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
 
-const RackSidebarComponent = () => {
     return (
-        <div className={`${sidebarContainer} flex-column`}>
-            <div className={sidebarHeaderContainer}>
-                <RackNameContainer />
-                <BackToRoomContainer />
+        <div className={sidebarContainer}>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem
+                        component={TextListItemVariants.dt}
+                        className="pf-u-display-inline-flex pf-u-align-items-center"
+                    >
+                        Name
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        <RackNameContainer tileId={tileId} />
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
+                    </TextListItem>
+                </TextList>
+                <Title headingLevel="h2">Actions</Title>
                 <AddPrefabContainer />
                 <DeleteRackContainer />
-            </div>
-            <div className={`${machineListContainer} mt-2`}>
-                <MachineListContainer />
+
+                <Title headingLevel="h2">Slots</Title>
+            </TextContent>
+            <div className={machineListContainer}>
+                <MachineListContainer tileId={tileId} />
             </div>
         </div>
     )
 }
 
+RackSidebarComponent.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
 export default RackSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
index 8ce3836a..6f258aec 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
@@ -2,13 +2,11 @@
     display: flex;
     height: 100%;
     max-height: 100%;
-}
-
-.sidebarHeaderContainer {
-    flex: 0;
+    flex-direction: column;
 }
 
 .machineListContainer {
     flex: 1;
     overflow-y: scroll;
+    margin-top: 10px;
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
new file mode 100644
index 00000000..2b31413d
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import RackSidebarComponent from './RackSidebarComponent'
+
+const RackSidebarContainer = (props) => {
+    const tileId = useSelector((state) => state.interactionLevel.tileId)
+    return <RackSidebarComponent {...props} tileId={tileId} />
+}
+
+export default RackSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
deleted file mode 100644
index 043cc713..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons'
-
-const BackToBuildingComponent = ({ onClick }) => (
-    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
-        Back to building
-    </div>
-)
-
-BackToBuildingComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default BackToBuildingComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
deleted file mode 100644
index d81bad0f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-import { Button } from 'reactstrap'
-
-const DeleteRoomComponent = ({ onClick }) => (
-    <Button color="danger" outline block onClick={onClick}>
-        <FontAwesomeIcon icon={faTrash} className="mr-2" />
-        Delete this room
-    </Button>
-)
-
-DeleteRoomComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default DeleteRoomComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..284c4d53
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.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 React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
+import { deleteRoom } from '../../../../../redux/actions/topology/room'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import { Button } from '@patternfly/react-core'
+
+const DeleteRoomContainer = () => {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom())
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
new file mode 100644
index 00000000..6db2bfb6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.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 React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
+import { Button } from '@patternfly/react-core'
+
+const EditRoomContainer = () => {
+    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(startRoomEdit())
+    const onFinish = () => dispatch(finishRoomEdit())
+
+    return isEditing ? (
+        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
+            Finish editing room
+        </Button>
+    ) : (
+        <Button
+            variant="tertiary"
+            icon={<PencilAltIcon />}
+            isBlock
+            disabled={isInRackConstructionMode}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+            className="pf-u-mb-sm"
+        >
+            Edit the tiles of this room
+        </Button>
+    )
+}
+
+export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 0a27910c..8aebe969 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
-import { Button } from 'reactstrap'
+import { Button } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'
 
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <Button color="primary" block onClick={onStop}>
-                <FontAwesomeIcon icon={faTimes} className="mr-2" />
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop}>
                 Stop rack construction
             </Button>
         )
@@ -16,13 +15,12 @@ const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, is
 
     return (
         <Button
-            color="primary"
-            outline
-            block
-            disabled={isEditingRoom}
+            icon={<PlusIcon />}
+            isBlock
+            isDisabled={isEditingRoom}
             onClick={() => (isEditingRoom ? undefined : onStart())}
+            className="pf-u-mb-sm"
         >
-            <FontAwesomeIcon icon={faPlus} className="mr-2" />
             Start rack construction
         </Button>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
new file mode 100644
index 00000000..38af447a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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'
+
+const RackConstructionContainer = (props) => {
+    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+
+    const dispatch = useDispatch()
+    const onStart = () => dispatch(startRackConstruction())
+    const onStop = () => dispatch(stopRackConstruction())
+    return (
+        <RackConstructionComponent
+            {...props}
+            inRackConstructionMode={isRackConstructionMode}
+            isEditingRoom={isEditingRoom}
+            onStart={onStart}
+            onStop={onStop}
+        />
+    )
+}
+
+export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
new file mode 100644
index 00000000..d7b006a6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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 '../../../../../components/app/sidebars/topology/NameComponent'
+import { editRoomName } from '../../../../../redux/actions/topology/room'
+
+function RoomName({ roomId }) {
+    const roomName = useSelector((state) => state.objects.room[roomId].name)
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(name))
+        }
+    }
+    return <NameComponent name={roomName} onEdit={callback} />
+}
+
+RoomName.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomName
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index 1bc6533e..fac58c51 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,20 +1,43 @@
+import PropTypes from 'prop-types'
 import React from 'react'
-import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer'
-import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer'
-import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer'
-import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer'
-import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer'
+import RoomName from './RoomName'
+import RackConstructionContainer from './RackConstructionContainer'
+import EditRoomContainer from './EditRoomContainer'
+import DeleteRoomContainer from './DeleteRoomContainer'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
 
-const RoomSidebarComponent = () => {
+const RoomSidebarComponent = ({ roomId }) => {
     return (
-        <div>
-            <RoomNameContainer />
-            <BackToBuildingContainer />
+        <TextContent>
+            <Title headingLevel="h2">Details</Title>
+            <TextList component={TextListVariants.dl}>
+                <TextListItem
+                    component={TextListItemVariants.dt}
+                    className="pf-u-display-inline-flex pf-u-align-items-center"
+                >
+                    Name
+                </TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>
+                    <RoomName roomId={roomId} />
+                </TextListItem>
+            </TextList>
+            <Title headingLevel="h2">Construction</Title>
             <RackConstructionContainer />
             <EditRoomContainer />
             <DeleteRoomContainer />
-        </div>
+        </TextContent>
     )
 }
 
+RoomSidebarComponent.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
 export default RoomSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
new file mode 100644
index 00000000..2076b00e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import RoomSidebarComponent from './RoomSidebarComponent'
+
+const RoomSidebarContainer = (props) => {
+    const roomId = useSelector((state) => state.interactionLevel.roomId)
+    return <RoomSidebarComponent {...props} roomId={roomId} />
+}
+
+export default RoomSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
index 5a95810a..f6e1c98b 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
@@ -2,11 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Modal from './Modal'
 
-function ConfirmationModal({ title, message, show, callback }) {
+function ConfirmationModal({ title, message, isOpen, callback }) {
     return (
         <Modal
             title={title}
-            show={show}
+            isOpen={isOpen}
             onSubmit={() => callback(true)}
             onCancel={() => callback(false)}
             submitButtonType="danger"
@@ -20,7 +20,7 @@ function ConfirmationModal({ title, message, show, callback }) {
 ConfirmationModal.propTypes = {
     title: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
     callback: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
index 8ab3924c..d4577062 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
@@ -1,43 +1,27 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
+import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
 
-function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) {
-    const [modal, setModal] = useState(show)
-
-    useEffect(() => setModal(show), [show])
-
-    const toggle = () => setModal(!modal)
-    const cancel = () => {
-        if (onCancel() !== false) {
-            toggle()
-        }
-    }
-    const submit = () => {
-        if (onSubmit() !== false) {
-            toggle()
-        }
-    }
+function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const actions = [
+        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
+            {submitButtonText}
+        </Button>,
+        <Button variant="link" onClick={onCancel} key="cancel">
+            Cancel
+        </Button>,
+    ]
 
     return (
-        <RModal isOpen={modal} toggle={cancel}>
-            <ModalHeader toggle={cancel}>{title}</ModalHeader>
-            <ModalBody>{children}</ModalBody>
-            <ModalFooter>
-                <Button color="secondary" onClick={cancel}>
-                    Close
-                </Button>
-                <Button color={submitButtonType} onClick={submit}>
-                    {submitButtonText}
-                </Button>
-            </ModalFooter>
-        </RModal>
+        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
+            {children}
+        </PModal>
     )
 }
 
 Modal.propTypes = {
     title: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     submitButtonType: PropTypes.string,
@@ -48,7 +32,7 @@ Modal.propTypes = {
 Modal.defaultProps = {
     submitButtonType: 'primary',
     submitButtonText: 'Save',
-    show: false,
+    isOpen: false,
 }
 
 export default Modal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
index 6758fdc0..392a729e 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
@@ -1,31 +1,60 @@
 import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Modal from './Modal'
+import { Form, FormGroup, TextInput } from '@patternfly/react-core'
 
-function TextInputModal({ title, label, show, callback, initialValue }) {
+function TextInputModal({ title, label, isOpen, callback, initialValue }) {
     const textInput = useRef(null)
-    const onSubmit = () => {
-        callback(textInput.current.value)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [isValid, setValid] = useState(true)
+
+    const resetState = () => {
         textInput.current.value = ''
+        setSubmitted(false)
+        setValid(false)
+    }
+    const onSubmit = (event) => {
+        const value = textInput.current.value
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!value) {
+            setValid(false)
+            return false
+        }
+
+        callback(value)
+        resetState()
+        return true
     }
     const onCancel = () => {
         callback(undefined)
-        textInput.current.value = ''
+        resetState()
     }
 
     return (
-        <Modal title={title} show={show} onSubmit={onSubmit} onCancel={onCancel}>
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    onSubmit()
-                }}
-            >
-                <div className="form-group">
-                    <label className="form-control-label">{label}</label>
-                    <input type="text" className="form-control" ref={textInput} defaultValue={initialValue} />
-                </div>
-            </form>
+        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label={label}
+                    fieldId="text-input"
+                    isRequired
+                    validated={isSubmitted && !isValid ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput
+                        id="text-input"
+                        name="text-input"
+                        isRequired
+                        type="text"
+                        ref={textInput}
+                        defaultValue={initialValue}
+                    />
+                </FormGroup>
+            </Form>
         </Modal>
     )
 }
@@ -33,7 +62,7 @@ function TextInputModal({ title, label, show, callback, initialValue }) {
 TextInputModal.propTypes = {
     title: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
     callback: PropTypes.func.isRequired,
     initialValue: PropTypes.string,
 }
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
new file mode 100644
index 00000000..afe07597
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from '../Modal'
+import {
+    Form,
+    FormGroup,
+    FormSection,
+    NumberInput,
+    Select,
+    SelectGroup,
+    SelectOption,
+    SelectVariant,
+    TextInput,
+} from '@patternfly/react-core'
+import { METRIC_GROUPS, METRIC_NAMES } from '../../../util/available-metrics'
+
+const NewPortfolioModal = ({ isOpen, onSubmit: onSubmitUpstream, onCancel: onUpstreamCancel }) => {
+    const nameInput = useRef(null)
+    const [repeats, setRepeats] = useState(1)
+    const [isSelectOpen, setSelectOpen] = useState(false)
+    const [selectedMetrics, setSelectedMetrics] = useState([])
+
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [errors, setErrors] = useState({})
+
+    const clearState = () => {
+        setSubmitted(false)
+        setErrors({})
+        nameInput.current.value = ''
+        setRepeats(1)
+        setSelectOpen(false)
+        setSelectedMetrics([])
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        if (!name) {
+            setErrors({ name: true })
+            return false
+        } else {
+            onSubmitUpstream(name, { enabledMetrics: selectedMetrics, repeatsPerScenario: repeats })
+        }
+
+        clearState()
+        return false
+    }
+    const onCancel = () => {
+        onUpstreamCancel()
+        clearState()
+    }
+
+    const onSelect = (event, selection) => {
+        if (selectedMetrics.includes(selection)) {
+            setSelectedMetrics((metrics) => metrics.filter((item) => item !== selection))
+        } else {
+            setSelectedMetrics((metrics) => [...metrics, selection])
+        }
+    }
+
+    return (
+        <Modal title="New Portfolio" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormSection>
+                    <FormGroup
+                        label="Name"
+                        fieldId="name"
+                        isRequired
+                        validated={isSubmitted && errors.name ? 'error' : 'default'}
+                        helperTextInvalid="This field cannot be empty"
+                    >
+                        <TextInput
+                            name="name"
+                            id="name"
+                            type="text"
+                            isRequired
+                            ref={nameInput}
+                            placeholder="My Portfolio"
+                        />
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Targets" titleElement="h4">
+                    <FormGroup label="Metrics" fieldId="metrics">
+                        <Select
+                            variant={SelectVariant.typeaheadMulti}
+                            typeAheadAriaLabel="Select a metric"
+                            onToggle={() => setSelectOpen(!isSelectOpen)}
+                            onSelect={onSelect}
+                            onClear={() => setSelectedMetrics([])}
+                            selections={selectedMetrics}
+                            isOpen={isSelectOpen}
+                            placeholderText="Select a metric"
+                            menuAppendTo="parent"
+                            maxHeight="300px"
+                            chipGroupProps={{ numChips: 1 }}
+                            isGrouped
+                        >
+                            {Object.entries(METRIC_GROUPS).map(([group, metrics]) => (
+                                <SelectGroup label={group} key={group}>
+                                    {metrics.map((metric) => (
+                                        <SelectOption key={metric} value={metric}>
+                                            {METRIC_NAMES[metric]}
+                                        </SelectOption>
+                                    ))}
+                                </SelectGroup>
+                            ))}
+                        </Select>
+                    </FormGroup>
+                    <FormGroup label="Repeats per Scenario" fieldId="repeats">
+                        <NumberInput
+                            id="repeats"
+                            inputName="repeats"
+                            type="number"
+                            value={repeats}
+                            onChange={(e) => setRepeats(Number(e.target.value))}
+                            onPlus={() => setRepeats((r) => r + 1)}
+                            onMinus={() => setRepeats((r) => r - 1)}
+                            min={1}
+                        />
+                    </FormGroup>
+                </FormSection>
+            </Form>
+        </Modal>
+    )
+}
+
+NewPortfolioModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModalComponent.js
deleted file mode 100644
index 3c6b8724..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-import { Form, FormGroup, Input, Label } from 'reactstrap'
-import Modal from '../Modal'
-import { AVAILABLE_METRICS, METRIC_NAMES } from '../../../util/available-metrics'
-
-const NewPortfolioModalComponent = ({ show, callback }) => {
-    const form = useRef(null)
-    const textInput = useRef(null)
-    const repeatsInput = useRef(null)
-    const metricCheckboxes = useRef({})
-
-    const onSubmit = () => {
-        if (form.current.reportValidity()) {
-            callback(textInput.current.value, {
-                enabledMetrics: AVAILABLE_METRICS.filter((metric) => metricCheckboxes.current[metric].checked),
-                repeatsPerScenario: parseInt(repeatsInput.current.value),
-            })
-
-            return true
-        } else {
-            return false
-        }
-    }
-    const onCancel = () => callback(undefined)
-
-    return (
-        <Modal title="New Portfolio" show={show} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    this.onSubmit()
-                }}
-                innerRef={form}
-            >
-                <FormGroup>
-                    <Label for="name">Name</Label>
-                    <Input name="name" type="text" required innerRef={textInput} placeholder="My Portfolio" />
-                </FormGroup>
-                <h4>Targets</h4>
-                <h5>Metrics</h5>
-                <FormGroup>
-                    {AVAILABLE_METRICS.map((metric) => (
-                        <FormGroup check key={metric}>
-                            <Label for={metric} check>
-                                <Input
-                                    name={metric}
-                                    type="checkbox"
-                                    innerRef={(ref) => (metricCheckboxes.current[metric] = ref)}
-                                />
-                                {METRIC_NAMES[metric]}
-                            </Label>
-                        </FormGroup>
-                    ))}
-                </FormGroup>
-                <FormGroup>
-                    <Label for="repeats">Repeats per scenario</Label>
-                    <Input
-                        name="repeats"
-                        type="number"
-                        required
-                        innerRef={repeatsInput}
-                        defaultValue="1"
-                        min="1"
-                        step="1"
-                    />
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-NewPortfolioModalComponent.propTypes = {
-    show: PropTypes.bool.isRequired,
-    callback: PropTypes.func.isRequired,
-}
-
-export default NewPortfolioModalComponent
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
new file mode 100644
index 00000000..94d0d424
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Portfolio } from '../../../shapes'
+import Modal from '../Modal'
+import {
+    Checkbox,
+    Form,
+    FormGroup,
+    FormSection,
+    FormSelect,
+    FormSelectOption,
+    NumberInput,
+    TextInput,
+} from '@patternfly/react-core'
+import { useSchedulers, useTraces } from '../../../data/experiments'
+import { useProjectTopologies } from '../../../data/topology'
+import { usePortfolio } from '../../../data/project'
+
+const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
+    const { data: portfolio } = usePortfolio(portfolioId)
+    const { data: topologies = [] } = useProjectTopologies(portfolio?.projectId)
+    const { data: traces = [] } = useTraces()
+    const { data: schedulers = [] } = useSchedulers()
+
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [traceLoad, setTraceLoad] = useState(100)
+    const [trace, setTrace] = useState(undefined)
+    const [topology, setTopology] = useState(undefined)
+    const [scheduler, setScheduler] = useState(undefined)
+    const [failuresEnabled, setFailuresEnabled] = useState(false)
+    const [opPhenEnabled, setOpPhenEnabled] = useState(false)
+    const nameInput = useRef(null)
+
+    const resetState = () => {
+        setSubmitted(false)
+        setTraceLoad(100)
+        setTrace(undefined)
+        setTopology(undefined)
+        setScheduler(undefined)
+        setFailuresEnabled(false)
+        setOpPhenEnabled(false)
+        nameInput.current.value = ''
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        onSubmitUpstream(
+            name,
+            portfolio._id,
+            {
+                traceId: trace || traces[0]._id,
+                loadSamplingFraction: traceLoad / 100,
+            },
+            {
+                topologyId: topology || topologies[0]._id,
+            },
+            {
+                failuresEnabled,
+                performanceInterferenceEnabled: opPhenEnabled,
+                schedulerName: scheduler || schedulers[0].name,
+            }
+        )
+
+        resetState()
+        return true
+    }
+    const onCancel = () => {
+        onCancelUpstream()
+        resetState()
+    }
+
+    return (
+        <Modal title="New Scenario" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup label="Name" fieldId="name" isRequired>
+                    <TextInput
+                        id="name"
+                        name="name"
+                        type="text"
+                        isDisabled={portfolio?.scenarioIds?.length === 0}
+                        defaultValue={portfolio?.scenarioIds?.length === 0 ? 'Base scenario' : ''}
+                        ref={nameInput}
+                    />
+                </FormGroup>
+                <FormSection title="Workload">
+                    <FormGroup label="Trace" fieldId="trace" isRequired>
+                        <FormSelect id="trace" name="trace" value={trace} onChange={setTrace}>
+                            {traces.map((trace) => (
+                                <FormSelectOption value={trace._id} key={trace._id} label={trace.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+                    <FormGroup label="Load Sampling Fraction" fieldId="trace-load" isRequired>
+                        <NumberInput
+                            name="trace-load"
+                            type="number"
+                            min={0}
+                            max={100}
+                            value={traceLoad}
+                            onMinus={() => setTraceLoad((load) => load - 1)}
+                            onPlus={() => setTraceLoad((load) => load + 1)}
+                            onChange={(e) => setTraceLoad(Number(e.target.value))}
+                            unit="%"
+                        />
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Topology">
+                    <FormGroup label="Topology" fieldId="topology" isRequired>
+                        <FormSelect id="topology" name="topology" value={topology} onChange={setTopology}>
+                            {topologies.map((topology) => (
+                                <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+
+                    <FormGroup label="Scheduler" fieldId="scheduler" isRequired>
+                        <FormSelect id="scheduler" name="scheduler" value={scheduler} onChange={setScheduler}>
+                            {schedulers.map((scheduler) => (
+                                <FormSelectOption value={scheduler.name} key={scheduler.name} label={scheduler.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Operational Phenomena">
+                    <Checkbox
+                        label="Failures"
+                        id="failures"
+                        name="failures"
+                        isChecked={failuresEnabled}
+                        onChange={() => setFailuresEnabled((e) => !e)}
+                    />
+                    <Checkbox
+                        label="Performance Interference"
+                        id="perf-interference"
+                        name="perf-interference"
+                        isChecked={opPhenEnabled}
+                        onChange={() => setOpPhenEnabled((e) => !e)}
+                    />
+                </FormSection>
+            </Form>
+        </Modal>
+    )
+}
+
+NewScenarioModal.propTypes = {
+    portfolioId: PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
deleted file mode 100644
index 782812ac..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-import { Form, FormGroup, Input, Label } from 'reactstrap'
-import { Scheduler, Topology, Trace } from '../../../shapes'
-import Modal from '../Modal'
-
-const NewScenarioModalComponent = ({
-    show,
-    callback,
-    currentPortfolioId,
-    currentPortfolioScenarioIds,
-    traces,
-    topologies,
-    schedulers,
-}) => {
-    const form = useRef(null)
-    const textInput = useRef(null)
-    const traceSelect = useRef(null)
-    const traceLoadInput = useRef(null)
-    const topologySelect = useRef(null)
-    const failuresCheckbox = useRef(null)
-    const performanceInterferenceCheckbox = useRef(null)
-    const schedulerSelect = useRef(null)
-
-    const onSubmit = () => {
-        if (!form.current.reportValidity()) {
-            return false
-        }
-        callback(
-            textInput.current.value,
-            currentPortfolioId,
-            {
-                traceId: traceSelect.current.value,
-                loadSamplingFraction: parseFloat(traceLoadInput.current.value),
-            },
-            {
-                topologyId: topologySelect.current.value,
-            },
-            {
-                failuresEnabled: failuresCheckbox.current.checked,
-                performanceInterferenceEnabled: performanceInterferenceCheckbox.current.checked,
-                schedulerName: schedulerSelect.current.value,
-            }
-        )
-        return true
-    }
-    const onCancel = () => {
-        callback(undefined)
-    }
-
-    return (
-        <Modal title="New Scenario" show={show} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    onSubmit()
-                }}
-                innerRef={form}
-            >
-                <FormGroup>
-                    <Label for="name">Name</Label>
-                    <Input
-                        name="name"
-                        type="text"
-                        required
-                        disabled={currentPortfolioScenarioIds.length === 0}
-                        defaultValue={currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : ''}
-                        innerRef={textInput}
-                    />
-                </FormGroup>
-                <h4>Trace</h4>
-                <FormGroup>
-                    <Label for="trace">Trace</Label>
-                    <Input name="trace" type="select" innerRef={traceSelect}>
-                        {traces.map((trace) => (
-                            <option value={trace._id} key={trace._id}>
-                                {trace.name}
-                            </option>
-                        ))}
-                    </Input>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="trace-load">Load sampling fraction</Label>
-                    <Input
-                        name="trace-load"
-                        type="number"
-                        innerRef={traceLoadInput}
-                        required
-                        defaultValue="1"
-                        min="0"
-                        max="1"
-                        step="0.1"
-                    />
-                </FormGroup>
-                <h4>Topology</h4>
-                <div className="form-group">
-                    <Label for="topology">Topology</Label>
-                    <Input name="topology" type="select" innerRef={topologySelect}>
-                        {topologies.map((topology) => (
-                            <option value={topology._id} key={topology._id}>
-                                {topology.name}
-                            </option>
-                        ))}
-                    </Input>
-                </div>
-                <h4>Operational Phenomena</h4>
-                <FormGroup check>
-                    <Label check for="failures">
-                        <Input type="checkbox" name="failures" innerRef={failuresCheckbox} />{' '}
-                        <span className="ml-2">Enable failures</span>
-                    </Label>
-                </FormGroup>
-                <FormGroup check>
-                    <Label check for="perf-interference">
-                        <Input type="checkbox" name="perf-interference" innerRef={performanceInterferenceCheckbox} />{' '}
-                        <span className="ml-2">Enable performance interference</span>
-                    </Label>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="scheduler">Scheduler</Label>
-                    <Input name="scheduler" type="select" innerRef={schedulerSelect}>
-                        {schedulers.map((scheduler) => (
-                            <option value={scheduler.name} key={scheduler.name}>
-                                {scheduler.name}
-                            </option>
-                        ))}
-                    </Input>
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-NewScenarioModalComponent.propTypes = {
-    show: PropTypes.bool.isRequired,
-    currentPortfolioId: PropTypes.string.isRequired,
-    currentPortfolioScenarioIds: PropTypes.arrayOf(PropTypes.string),
-    traces: PropTypes.arrayOf(Trace),
-    topologies: PropTypes.arrayOf(Topology),
-    schedulers: PropTypes.arrayOf(Scheduler),
-    callback: PropTypes.func.isRequired,
-}
-
-export default NewScenarioModalComponent
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
new file mode 100644
index 00000000..49952aec
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from '../Modal'
+import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
+import { useProjectTopologies } from '../../../data/topology'
+
+const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
+    const nameInput = useRef(null)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [originTopology, setOriginTopology] = useState(-1)
+    const [errors, setErrors] = useState({})
+
+    const { data: topologies = [] } = useProjectTopologies(projectId)
+
+    const clearState = () => {
+        nameInput.current.value = ''
+        setSubmitted(false)
+        setOriginTopology(-1)
+        setErrors({})
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        if (!name) {
+            setErrors({ name: true })
+            return false
+        } else if (originTopology === -1) {
+            onSubmitUpstream(name)
+        } else {
+            onSubmitUpstream(name, originTopology)
+        }
+
+        clearState()
+        return true
+    }
+
+    const onCancel = () => {
+        onCancelUpstream()
+        clearState()
+    }
+
+    return (
+        <Modal title="New Topology" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label="Name"
+                    fieldId="name"
+                    isRequired
+                    validated={isSubmitted && errors.name ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
+                </FormGroup>
+                <FormGroup label="Topology to duplicate" fieldId="origin" isRequired>
+                    <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}>
+                        <FormSelectOption value={-1} key={-1} label="None - start from scratch" />
+                        {topologies.map((topology) => (
+                            <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
+                        ))}
+                    </FormSelect>
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewTopologyModal.propTypes = {
+    projectId: PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewTopologyModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
deleted file mode 100644
index f06fe797..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import PropTypes from 'prop-types'
-import { Form, FormGroup, Input, Label } from 'reactstrap'
-import React, { useRef } from 'react'
-import { Topology } from '../../../shapes'
-import Modal from '../Modal'
-
-const NewTopologyModalComponent = ({ show, onCreateTopology, onDuplicateTopology, onCancel, topologies }) => {
-    const form = useRef(null)
-    const textInput = useRef(null)
-    const originTopology = useRef(null)
-
-    const onCreate = () => {
-        onCreateTopology(textInput.current.value)
-    }
-
-    const onDuplicate = () => {
-        onDuplicateTopology(textInput.current.value, originTopology.current.value)
-    }
-
-    const onSubmit = () => {
-        if (!form.current.reportValidity()) {
-            return false
-        } else if (originTopology.current.selectedIndex === 0) {
-            onCreate()
-        } else {
-            onDuplicate()
-        }
-
-        return true
-    }
-
-    return (
-        <Modal title="New Topology" show={show} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    onSubmit()
-                }}
-                innerRef={form}
-            >
-                <FormGroup>
-                    <Label for="name">Name</Label>
-                    <Input name="name" type="text" required innerRef={textInput} />
-                </FormGroup>
-                <FormGroup>
-                    <Label for="origin">Topology to duplicate</Label>
-                    <Input name="origin" type="select" innerRef={originTopology}>
-                        <option value={-1} key={-1}>
-                            None - start from scratch
-                        </option>
-                        {topologies.map((topology) => (
-                            <option value={topology._id} key={topology._id}>
-                                {topology.name}
-                            </option>
-                        ))}
-                    </Input>
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-NewTopologyModalComponent.propTypes = {
-    show: PropTypes.bool.isRequired,
-    topologies: PropTypes.arrayOf(Topology),
-    onCreateTopology: PropTypes.func.isRequired,
-    onDuplicateTopology: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewTopologyModalComponent
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
deleted file mode 100644
index 8aaaf847..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Link from 'next/link'
-import { NavLink, NavItem as RNavItem } from 'reactstrap'
-import Navbar, { NavItem } from './Navbar'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faList } from '@fortawesome/free-solid-svg-icons'
-import { Project } from '../../shapes'
-
-const AppNavbarComponent = ({ project, fullWidth }) => (
-    <Navbar fullWidth={fullWidth}>
-        <NavItem route="/projects">
-            <Link href="/projects" passHref>
-                <NavLink title="My Projects">
-                    <FontAwesomeIcon icon={faList} className="mr-2" />
-                    My Projects
-                </NavLink>
-            </Link>
-        </NavItem>
-        {project ? (
-            <RNavItem>
-                <Link href={`/projects/${project._id}`} passHref>
-                    <NavLink title="Current Project">
-                        <span>{project.name}</span>
-                    </NavLink>
-                </Link>
-            </RNavItem>
-        ) : undefined}
-    </Navbar>
-)
-
-AppNavbarComponent.propTypes = {
-    project: Project,
-    fullWidth: PropTypes.bool,
-}
-
-export default AppNavbarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
deleted file mode 100644
index 4ab577e0..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { NavLink } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
-
-const LogoutButton = ({ onLogout }) => (
-    <NavLink className="logout" title="Sign out" onClick={onLogout}>
-        <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
-    </NavLink>
-)
-
-LogoutButton.propTypes = {
-    onLogout: PropTypes.func.isRequired,
-}
-
-export default LogoutButton
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
deleted file mode 100644
index dc74bb8f..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-import {
-    Navbar as RNavbar,
-    NavItem as RNavItem,
-    NavLink,
-    NavbarBrand,
-    NavbarToggler,
-    Collapse,
-    Nav,
-    Container,
-} from 'reactstrap'
-import Login from '../../containers/auth/Login'
-import Logout from '../../containers/auth/Logout'
-import ProfileName from '../../containers/auth/ProfileName'
-import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useAuth } from '../../auth'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-
-export const NAVBAR_HEIGHT = 60
-
-const GitHubLink = () => (
-    <a
-        href="https://github.com/atlarge-research/opendc"
-        className="ml-2 mr-3 text-dark"
-        style={{ position: 'relative', top: 7 }}
-    >
-        <FontAwesomeIcon icon={faGithub} size="2x" />
-    </a>
-)
-
-export const NavItem = ({ route, children }) => {
-    const router = useRouter()
-    const handleClick = (e) => {
-        e.preventDefault()
-        router.push(route)
-    }
-    return (
-        <RNavItem onClick={handleClick} active={router.asPath === route}>
-            {children}
-        </RNavItem>
-    )
-}
-
-NavItem.propTypes = {
-    route: PropTypes.string.isRequired,
-    children: PropTypes.node,
-}
-
-export const LoggedInSection = () => {
-    const router = useRouter()
-    const { isAuthenticated } = useAuth()
-    return (
-        <Nav navbar className="auth-links">
-            {isAuthenticated ? (
-                [
-                    router.asPath === '/' ? (
-                        <NavItem route="/projects" key="projects">
-                            <Link href="/projects" passHref>
-                                <NavLink title="My Projects" to="/projects">
-                                    My Projects
-                                </NavLink>
-                            </Link>
-                        </NavItem>
-                    ) : (
-                        <RNavItem key="profile">
-                            <NavLink title="My Profile">
-                                <ProfileName />
-                            </NavLink>
-                        </RNavItem>
-                    ),
-                    <NavItem route="logout" key="logout">
-                        <Logout />
-                    </NavItem>,
-                ]
-            ) : (
-                <RNavItem>
-                    <GitHubLink />
-                    <Login visible={true} className={login} />
-                </RNavItem>
-            )}
-        </Nav>
-    )
-}
-
-const Navbar = ({ fullWidth, children }) => {
-    const [isOpen, setIsOpen] = useState(false)
-    const toggle = () => setIsOpen(!isOpen)
-
-    return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
-            <Container fluid={fullWidth}>
-                <NavbarToggler onClick={toggle} />
-                <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
-                    <div className="mb-n1">
-                        <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
-                    </div>
-                </NavbarBrand>
-
-                <Collapse isOpen={isOpen} navbar>
-                    <Nav className="mr-auto" navbar>
-                        {children}
-                    </Nav>
-                    <LoggedInSection />
-                </Collapse>
-            </Container>
-        </RNavbar>
-    )
-}
-
-Navbar.propTypes = {
-    fullWidth: PropTypes.bool,
-    children: PropTypes.node,
-}
-
-export default Navbar
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
deleted file mode 100644
index 8b9e4c97..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import 'src/style/_mixins.scss';
-@import 'src/style/_variables.scss';
-
-.navbar {
-    border-top: $blue 3px solid;
-    border-bottom: $gray-semi-dark 1px solid;
-    color: $gray-very-dark;
-    background: #fafafb;
-}
-
-.opendcBrand {
-    display: inline-block;
-    color: $gray-very-dark;
-
-    transition: background $transition-length;
-
-    img {
-        position: relative;
-        bottom: 3px;
-        display: inline-block;
-        width: 30px;
-    }
-}
-
-.login {
-    height: 40px;
-    background: $blue;
-    border: none;
-    padding-top: 10px;
-
-    @include clickable;
-
-    &:hover {
-        background: $blue-dark;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
deleted file mode 100644
index 03a4894b..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { blinkingCursor } from './BlinkingCursor.module.scss'
-
-const BlinkingCursor = () => <span className={blinkingCursor}>_</span>
-
-export default BlinkingCursor
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
deleted file mode 100644
index aba0c604..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/BlinkingCursor.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.blinkingCursor {
-    animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-    from,
-    to {
-        color: #eeeeee;
-    }
-    50% {
-        color: #333333;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
deleted file mode 100644
index 6ded4350..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { codeBlock } from './CodeBlock.module.scss'
-
-const CodeBlock = () => {
-    const textBlock =
-        '    oo      oooo       oo   <br/>' +
-        '   oo      oo  oo     oo    <br/>' +
-        '  oo       oo  oo    oo     <br/>' +
-        ' oooooo    oo  oo   oooooo  <br/>' +
-        '     oo    oo  oo       oo  <br/>' +
-        '     oo     oooo        oo  <br/>'
-    const charList = textBlock.split('')
-
-    // Binary representation of the string "OpenDC!" ;)
-    const binaryString = '01001111011100000110010101101110010001000100001100100001'
-
-    let binaryIndex = 0
-    for (let i = 0; i < charList.length; i++) {
-        if (charList[i] === 'o') {
-            charList[i] = binaryString[binaryIndex]
-            binaryIndex++
-        }
-    }
-
-    return <div className={codeBlock} dangerouslySetInnerHTML={{ __html: textBlock }} />
-}
-
-export default CodeBlock
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
deleted file mode 100644
index 8af3ee6d..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/CodeBlock.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.codeBlock {
-    white-space: pre-wrap;
-    margin-top: 60px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
deleted file mode 100644
index e6200b10..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import BlinkingCursor from './BlinkingCursor'
-import CodeBlock from './CodeBlock'
-import { terminalWindow, terminalHeader, terminalBody, segfault, subTitle, homeBtn } from './TerminalWindow.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
-
-const TerminalWindow = () => (
-    <div className={terminalWindow}>
-        <div className={terminalHeader}>Terminal -- bash</div>
-        <div className={terminalBody}>
-            <div className={segfault}>
-                $ status
-                <br />
-                opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
-                <br />
-                opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4
-                <br />
-                opendc[4270]: STDERR Page does not exist
-                <br />
-            </div>
-            <CodeBlock />
-            <div className={subTitle}>
-                Got lost?
-                <BlinkingCursor />
-            </div>
-            <Link href="/">
-                <a className={homeBtn}>
-                    <FontAwesomeIcon icon={faHome} /> GET ME BACK TO OPENDC
-                </a>
-            </Link>
-        </div>
-    </div>
-)
-
-export default TerminalWindow
diff --git a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss b/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
deleted file mode 100644
index 614852d3..00000000
--- a/opendc-web/opendc-web-ui/src/components/not-found/TerminalWindow.module.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.terminalWindow {
-    display: block;
-    align-self: center;
-
-    margin: auto;
-
-    user-select: none;
-    cursor: default;
-
-    overflow: hidden;
-
-    box-shadow: 5px 5px 20px #444444;
-}
-
-.terminalHeader {
-    font-family: monospace;
-    background: #cccccc;
-    color: #444444;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 10px;
-
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-}
-
-.terminalBody {
-    font-family: monospace;
-    text-align: center;
-    background-color: #333333;
-    color: #eeeeee;
-    padding: 10px;
-
-    height: 100%;
-}
-
-.segfault {
-    text-align: left;
-}
-
-.subTitle {
-    margin-top: 20px;
-}
-
-.homeBtn {
-    margin-top: 10px;
-    padding: 5px;
-    display: inline-block;
-    border: 1px solid #eeeeee;
-    color: #eeeeee;
-    text-decoration: none;
-    cursor: pointer;
-
-    transition: all 200ms;
-
-    &:hover,
-    &:active {
-        background: #eeeeee;
-        color: #333333;
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 5129c013..285217e9 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,23 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, ButtonGroup } from 'reactstrap'
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'
 import { filterPanel } from './FilterPanel.module.scss'
 
 export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
 
 const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
-    <ButtonGroup className={`${filterPanel} mb-2`}>
+    <ToggleGroup className={`${filterPanel} mb-2`}>
         {Object.keys(FILTERS).map((filter) => (
-            <Button
-                color="secondary"
+            <ToggleGroupItem
                 key={filter}
-                onClick={() => activeFilter === filter || onSelect(filter)}
-                active={activeFilter === filter}
-            >
-                {FILTERS[filter]}
-            </Button>
+                onChange={() => activeFilter === filter || onSelect(filter)}
+                isSelected={activeFilter === filter}
+                text={FILTERS[filter]}
+            />
         ))}
-    </ButtonGroup>
+    </ToggleGroup>
 )
 
 FilterPanel.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
new file mode 100644
index 00000000..ae4cb9cd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import NewPortfolioModal from '../modals/custom-components/NewPortfolioModal'
+import { useMutation } from 'react-query'
+
+function NewPortfolio({ projectId }) {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addPortfolio } = useMutation('addPortfolio')
+
+    const onSubmit = (name, targets) => {
+        addPortfolio({ projectId, name, targets })
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Portfolio
+            </Button>
+            <NewPortfolioModal isOpen={isVisible} onSubmit={onSubmit} onCancel={() => setVisible(false)} />
+        </>
+    )
+}
+
+NewPortfolio.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default NewPortfolio
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
new file mode 100644
index 00000000..4f5d79cf
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import TextInputModal from '../../components/modals/TextInputModal'
+import { Button } from '@patternfly/react-core'
+import { useMutation } from 'react-query'
+import { PlusIcon } from '@patternfly/react-icons'
+import { buttonContainer } from './NewProject.module.scss'
+
+/**
+ * A container for creating a new project.
+ */
+const NewProject = () => {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addProject } = useMutation('addProject')
+
+    const onSubmit = (name) => {
+        if (name) {
+            addProject({ name })
+        }
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <div className={buttonContainer}>
+                <Button
+                    icon={<PlusIcon />}
+                    color="primary"
+                    className="pf-u-float-right"
+                    onClick={() => setVisible(true)}
+                >
+                    New Project
+                </Button>
+            </div>
+            <TextInputModal title="New Project" label="Project name" isOpen={isVisible} callback={onSubmit} />
+        </>
+    )
+}
+
+export default NewProject
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss b/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss
new file mode 100644
index 00000000..5a0e74fc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.module.scss
@@ -0,0 +1,26 @@
+/*!
+ * 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.
+ */
+
+.buttonContainer {
+    flex: 0 1 auto;
+    padding: 20px 0;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js b/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
new file mode 100644
index 00000000..6d4f48c1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
@@ -0,0 +1,64 @@
+/*
+ * 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 { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import NewScenarioModal from '../modals/custom-components/NewScenarioModal'
+import { useMutation } from 'react-query'
+
+function NewScenario({ portfolioId }) {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addScenario } = useMutation('addScenario')
+
+    const onSubmit = (name, portfolioId, trace, topology, operational) => {
+        addScenario({
+            portfolioId,
+            name,
+            trace,
+            topology,
+            operational,
+        })
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Scenario
+            </Button>
+            <NewScenarioModal
+                portfolioId={portfolioId}
+                isOpen={isVisible}
+                onSubmit={onSubmit}
+                onCancel={() => setVisible(false)}
+            />
+        </>
+    )
+}
+
+NewScenario.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default NewScenario
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
new file mode 100644
index 00000000..c6c4171b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -0,0 +1,58 @@
+/*
+ * 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 { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import NewTopologyModal from '../modals/custom-components/NewTopologyModal'
+import { useDispatch } from 'react-redux'
+import { addTopology } from '../../redux/actions/topologies'
+
+function NewTopology({ projectId }) {
+    const [isVisible, setVisible] = useState(false)
+    const dispatch = useDispatch()
+
+    const onSubmit = (name, duplicateId) => {
+        dispatch(addTopology(projectId, name, duplicateId))
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Topology
+            </Button>
+            <NewTopologyModal
+                projectId={projectId}
+                isOpen={isVisible}
+                onSubmit={onSubmit}
+                onCancel={() => setVisible(false)}
+            />
+        </>
+    )
+}
+
+NewTopology.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default NewTopology
diff --git a/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js b/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js
new file mode 100644
index 00000000..45e399ed
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/PortfolioTable.js
@@ -0,0 +1,97 @@
+/*
+ * 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 Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import { useProjectPortfolios } from '../../data/project'
+import { useMutation } from 'react-query'
+
+const PortfolioTable = ({ projectId }) => {
+    const { status, data: portfolios = [] } = useProjectPortfolios(projectId)
+    const { mutate: deletePortfolio } = useMutation('deletePortfolio')
+
+    const columns = ['Name', 'Scenarios', 'Metrics', 'Repeats']
+    const rows =
+        portfolios.length > 0
+            ? portfolios.map((portfolio) => [
+                  {
+                      title: (
+                          <Link href={`/projects/${portfolio.projectId}/portfolios/${portfolio._id}`}>
+                              {portfolio.name}
+                          </Link>
+                      ),
+                  },
+
+                  portfolio.scenarioIds.length === 1 ? '1 scenario' : `${portfolio.scenarioIds.length} scenarios`,
+
+                  portfolio.targets.enabledMetrics.length === 1
+                      ? '1 metric'
+                      : `${portfolio.targets.enabledMetrics.length} metrics`,
+                  portfolio.targets.repeatsPerScenario === 1
+                      ? '1 repeat'
+                      : `${portfolio.targets.repeatsPerScenario} repeats`,
+              ])
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 4 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading portfolios"
+                                      emptyTitle="No portfolios"
+                                      emptyText="You have not created any portfolio for this project yet. Click the New Portfolio button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        portfolios.length > 0
+            ? [
+                  {
+                      title: 'Delete Portfolio',
+                      onClick: (_, rowId) => deletePortfolio(portfolios[rowId]._id),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Portfolio List" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+PortfolioTable.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default PortfolioTable
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
deleted file mode 100644
index 4adf3205..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Link from 'next/link'
-import { Button } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
-
-const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
-    <td className="text-right">
-        <Link href={`/projects/${projectId}`} passHref>
-            <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
-                <FontAwesomeIcon icon={faPlay} />
-            </Button>
-        </Link>
-        <Button
-            color="success"
-            outline
-            size="sm"
-            disabled
-            className="mr-2"
-            title="View and edit collaborators (not supported currently)"
-            onClick={() => onViewUsers(projectId)}
-        >
-            <FontAwesomeIcon icon={faUsers} />
-        </Button>
-        <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
-            <FontAwesomeIcon icon={faTrash} />
-        </Button>
-    </td>
-)
-
-ProjectActionButtons.propTypes = {
-    projectId: PropTypes.string.isRequired,
-    onViewUsers: PropTypes.func,
-    onDelete: PropTypes.func,
-}
-
-export default ProjectActionButtons
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
deleted file mode 100644
index 46ef4691..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Project } from '../../shapes'
-import ProjectRow from './ProjectRow'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
-
-const ProjectList = ({ projects }) => {
-    return (
-        <div className="vertically-expanding-container">
-            {projects.length === 0 ? (
-                <div className="alert alert-info">
-                    <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
-                    <strong>No projects here yet...</strong> Add some with the &lsquo;New Project&rsquo; button!
-                </div>
-            ) : (
-                <table className="table table-striped">
-                    <thead>
-                        <tr>
-                            <th>Project name</th>
-                            <th>Last edited</th>
-                            <th>Access rights</th>
-                            <th />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {projects.map((project) => (
-                            <ProjectRow project={project} key={project._id} />
-                        ))}
-                    </tbody>
-                </table>
-            )}
-        </div>
-    )
-}
-
-ProjectList.propTypes = {
-    projects: PropTypes.arrayOf(Project).isRequired,
-}
-
-export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
deleted file mode 100644
index 91368de8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import ProjectActions from '../../containers/projects/ProjectActions'
-import { Project } from '../../shapes'
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
-import { parseAndFormatDateTime } from '../../util/date-time'
-import { useAuth } from '../../auth'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
-const ProjectRow = ({ project }) => {
-    const { user } = useAuth()
-    const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
-    return (
-        <tr>
-            <td className="pt-3">{project.name}</td>
-            <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
-            <td className="pt-3">
-                <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" />
-                {AUTH_DESCRIPTION_MAP[level]}
-            </td>
-            <ProjectActions projectId={project._id} />
-        </tr>
-    )
-}
-
-ProjectRow.propTypes = {
-    project: Project.isRequired,
-}
-
-export default ProjectRow
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
new file mode 100644
index 00000000..a7290259
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectTable.js
@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Link from 'next/link'
+import { Project, Status } from '../../shapes'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { useAuth } from '../../auth'
+import TableEmptyState from '../util/TableEmptyState'
+
+const ProjectTable = ({ status, projects, onDelete, isFiltering }) => {
+    const { user } = useAuth()
+    const columns = ['Project name', 'Last edited', 'Access Rights']
+    const rows =
+        projects.length > 0
+            ? projects.map((project) => {
+                  const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+                  const Icon = AUTH_ICON_MAP[level]
+                  return [
+                      {
+                          title: <Link href={`/projects/${project._id}`}>{project.name}</Link>,
+                      },
+                      parseAndFormatDateTime(project.datetimeLastEdited),
+                      {
+                          title: (
+                              <>
+                                  <Icon className="pf-u-mr-md" key="auth" /> {AUTH_DESCRIPTION_MAP[level]}
+                              </>
+                          ),
+                      },
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading Projects"
+                                      isFiltering={isFiltering}
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        projects.length > 0
+            ? [
+                  {
+                      title: 'Delete Project',
+                      onClick: (_, rowId) => onDelete(projects[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Project List" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+ProjectTable.propTypes = {
+    status: Status.isRequired,
+    isFiltering: PropTypes.bool,
+    projects: PropTypes.arrayOf(Project).isRequired,
+    onDelete: PropTypes.func,
+}
+
+export default ProjectTable
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js b/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
new file mode 100644
index 00000000..285345e7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
@@ -0,0 +1,62 @@
+/*
+ * 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 { ClockIcon, InfoIcon, CheckCircleIcon, ErrorCircleOIcon } from '@patternfly/react-icons'
+
+function ScenarioState({ state }) {
+    switch (state) {
+        case 'CLAIMED':
+        case 'QUEUED':
+            return (
+                <span>
+                    <ClockIcon color="blue" /> Queued
+                </span>
+            )
+        case 'RUNNING':
+            return (
+                <span>
+                    <ClockIcon color="green" /> Running
+                </span>
+            )
+        case 'FINISHED':
+            return (
+                <span>
+                    <CheckCircleIcon color="green" /> Finished
+                </span>
+            )
+        case 'FAILED':
+            return (
+                <span>
+                    <ErrorCircleOIcon color="red" /> Failed
+                </span>
+            )
+    }
+
+    return 'Unknown'
+}
+
+ScenarioState.propTypes = {
+    state: PropTypes.oneOf(['QUEUED', 'CLAIMED', 'RUNNING', 'FINISHED', 'FAILED']),
+}
+
+export default ScenarioState
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
new file mode 100644
index 00000000..9966e3ba
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
@@ -0,0 +1,108 @@
+/*
+ * 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 Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import ScenarioState from './ScenarioState'
+import { usePortfolio, usePortfolioScenarios } from '../../data/project'
+import { useProjectTopologies } from '../../data/topology'
+import { useMutation } from 'react-query'
+
+const ScenarioTable = ({ portfolioId }) => {
+    const { data: portfolio } = usePortfolio(portfolioId)
+    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
+    const { data: topologies } = useProjectTopologies(portfolio?.projectId, {
+        select: (topologies) => new Map(topologies.map((topology) => [topology._id, topology])),
+    })
+
+    const { mutate: deleteScenario } = useMutation('deleteScenario')
+
+    const columns = ['Name', 'Topology', 'Trace', 'State']
+    const rows =
+        scenarios.length > 0
+            ? scenarios.map((scenario) => {
+                  const topology = topologies?.get(scenario.topology.topologyId)
+
+                  return [
+                      scenario.name,
+                      {
+                          title: topology ? (
+                              <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
+                                  <a>{topology.name}</a>
+                              </Link>
+                          ) : (
+                              'Unknown Topology'
+                          ),
+                      },
+                      scenario.trace.traceId,
+                      { title: <ScenarioState state={scenario.simulation.state} /> },
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 4 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading Scenarios"
+                                      emptyTitle="No scenarios"
+                                      emptyText="You have not created any scenario for this portfolio yet. Click the New Scenario button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actionResolver = (_, { rowIndex }) => [
+        {
+            title: 'Delete Scenario',
+            onClick: (_, rowId) => deleteScenario(scenarios[rowId]._id),
+            isDisabled: rowIndex === 0,
+        },
+    ]
+
+    return (
+        <Table
+            aria-label="Scenario List"
+            variant="compact"
+            cells={columns}
+            rows={rows}
+            actionResolver={scenarios.length > 0 ? actionResolver : undefined}
+        >
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+ScenarioTable.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default ScenarioTable
diff --git a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
new file mode 100644
index 00000000..80099ece
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
@@ -0,0 +1,95 @@
+/*
+ * 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 Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { useMutation } from 'react-query'
+import { useProjectTopologies } from '../../data/topology'
+
+const TopologyTable = ({ projectId }) => {
+    const { status, data: topologies = [] } = useProjectTopologies(projectId)
+    const { mutate: deleteTopology } = useMutation('deleteTopology')
+
+    const columns = ['Name', 'Rooms', 'Last Edited']
+    const rows =
+        topologies.length > 0
+            ? topologies.map((topology) => [
+                  {
+                      title: (
+                          <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
+                              {topology.name}
+                          </Link>
+                      ),
+                  },
+                  topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`,
+                  parseAndFormatDateTime(topology.datetimeLastEdited),
+              ])
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading topologies"
+                                      emptyTitle="No topologies"
+                                      emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actionResolver = (_, { rowIndex }) => [
+        {
+            title: 'Delete Topology',
+            onClick: (_, rowId) => deleteTopology(topologies[rowId]._id),
+            isDisabled: rowIndex === 0,
+        },
+    ]
+
+    return (
+        <Table
+            aria-label="Topology List"
+            variant="compact"
+            cells={columns}
+            rows={rows}
+            actionResolver={topologies.length > 0 ? actionResolver : () => []}
+        >
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+TopologyTable.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default TopologyTable
diff --git a/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js b/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
new file mode 100644
index 00000000..c6ab214a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.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 PropTypes from 'prop-types'
+import Link from 'next/link'
+
+const BreadcrumbLink = ({ children, href, ...props }) => (
+    <Link href={href}>
+        <a {...props}>{children}</a>
+    </Link>
+)
+
+BreadcrumbLink.propTypes = {
+    children: PropTypes.node,
+    href: PropTypes.string.isRequired,
+}
+
+export default BreadcrumbLink
diff --git a/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js b/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
new file mode 100644
index 00000000..c0d109bd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/NavItemLink.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 Link from 'next/link'
+import PropTypes from 'prop-types'
+
+const NavItemLink = ({ children, href, ...props }) => (
+    <Link href={href}>
+        <a {...props}>{children}</a>
+    </Link>
+)
+
+NavItemLink.propTypes = {
+    children: PropTypes.node,
+    href: PropTypes.string.isRequired,
+}
+
+export default NavItemLink
diff --git a/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js b/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js
new file mode 100644
index 00000000..9d16ffbb
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/TableEmptyState.js
@@ -0,0 +1,103 @@
+/*
+ * 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 { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core'
+import { SearchIcon, CubesIcon } from '@patternfly/react-icons'
+import { Status } from '../../shapes'
+
+function TableEmptyState({
+    status,
+    isFiltering,
+    loadingTitle = 'Loading',
+    emptyTitle = 'No results found',
+    emptyText = 'No results found of this type.',
+    emptyAction = '',
+}) {
+    if (status === 'loading') {
+        return (
+            <Bullseye>
+                <EmptyState variant="xs">
+                    <EmptyStateIcon variant="container" component={Spinner} />
+                    <Title headingLevel="h4" size="md">
+                        {loadingTitle}
+                    </Title>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (status === 'error') {
+        return (
+            <EmptyState variant="xs">
+                <Title headingLevel="h4" size="md">
+                    Unable to connect
+                </Title>
+                <EmptyStateBody>
+                    There was an error retrieving data. Check your connection and try again.
+                </EmptyStateBody>
+            </EmptyState>
+        )
+    } else if (status === 'idle') {
+        return (
+            <EmptyState variant="xs">
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h4" size="md">
+                    {emptyTitle}
+                </Title>
+                <EmptyStateBody>No results available at this moment.</EmptyStateBody>
+            </EmptyState>
+        )
+    } else if (isFiltering) {
+        return (
+            <EmptyState variant="xs">
+                <EmptyStateIcon icon={SearchIcon} />
+                <Title headingLevel="h4" size="md">
+                    No results found
+                </Title>
+                <EmptyStateBody>
+                    No results match this filter criteria. Remove all filters or clear all filters to show results.
+                </EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <EmptyState variant="xs">
+            <EmptyStateIcon icon={CubesIcon} />
+            <Title headingLevel="h4" size="md">
+                {emptyTitle}
+            </Title>
+            <EmptyStateBody>{emptyText}</EmptyStateBody>
+            {emptyAction}
+        </EmptyState>
+    )
+}
+
+TableEmptyState.propTypes = {
+    status: Status.isRequired,
+    isFiltering: PropTypes.bool,
+    loadingTitle: PropTypes.string,
+    emptyTitle: PropTypes.string,
+    emptyText: PropTypes.string,
+    emptyAction: PropTypes.node,
+}
+
+export default TableEmptyState
-- 
cgit v1.2.3


From e5caf6c6122684e441d1d73e2e0507fdd36c67e0 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 16 Jul 2021 14:20:34 +0200
Subject: feat(ui): Support panning of the datacenter topology

This change enables support for panning the visualized datacenter
topology by using the mouse or holding shortcuts. Previously, this could
only be done through repeated key presses.
---
 opendc-web/opendc-web-ui/src/components/app/map/MapStage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
index 73accf3f..684ddf28 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
@@ -52,7 +52,7 @@ function MapStage() {
 
     return (
         <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
-            <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale}>
+            <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale} draggable>
                 <Provider store={store}>
                     <MapLayer />
                     <RoomHoverLayer mouseX={x} mouseY={y} />
-- 
cgit v1.2.3


From f2aeecccc096728d3df955b71e711c8d9c429427 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Fri, 16 Jul 2021 17:37:01 +0200
Subject: refactor(ui): Isolate world coordinate space

This change updates the topology view in the OpenDC frontend to isolate
the world coordinate space. This means that zooming and panning should
not affect the coordinates in world space (but only in camera space). In
turn, this allows us to remove the dependency on Redux for the camera
controls.
---
 .../src/components/app/map/MapConstants.js         |  3 -
 .../src/components/app/map/MapStage.js             | 91 +++++++++++++---------
 .../components/app/map/RackEnergyFillContainer.js  | 13 ++--
 .../components/app/map/RackSpaceFillContainer.js   | 12 +--
 .../src/components/app/map/elements/HoverTile.js   | 12 +--
 .../src/components/app/map/elements/RackFillBar.js |  2 +-
 .../components/app/map/elements/TilePlusIcon.js    | 26 +++----
 .../app/map/layers/HoverLayerComponent.js          | 67 +++++++---------
 .../src/components/app/map/layers/MapLayer.js      | 20 +++--
 .../components/app/map/layers/MapLayerComponent.js | 26 -------
 .../components/app/map/layers/ObjectHoverLayer.js  | 35 ++++-----
 .../app/map/layers/ObjectHoverLayerComponent.js    | 11 ---
 .../components/app/map/layers/RoomHoverLayer.js    | 50 ++++++------
 .../app/map/layers/RoomHoverLayerComponent.js      |  6 --
 14 files changed, 164 insertions(+), 210 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayerComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayerComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
index 45799f70..4c3b2757 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
@@ -12,9 +12,6 @@ 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 SIDEBAR_WIDTH = 350
-export const VIEWPORT_PADDING = 50
-
 export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3
 export const RACK_FILL_ICON_OPACITY = 0.8
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
index 684ddf28..5d19b3ad 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
@@ -1,64 +1,81 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
-import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants'
-import { Provider, useDispatch, useStore } from 'react-redux'
+import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
+import { Provider, useStore } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
 import { mapContainer } from './MapStage.module.scss'
-import { useMapPosition } from '../../../data/map'
-import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../redux/actions/map'
 import MapLayer from './layers/MapLayer'
 import RoomHoverLayer from './layers/RoomHoverLayer'
 import ObjectHoverLayer from './layers/ObjectHoverLayer'
+import ScaleIndicator from './controls/ScaleIndicator'
+import Toolbar from './controls/Toolbar'
 
 function MapStage() {
     const store = useStore()
-    const dispatch = useDispatch()
+    const { ref, width = 100, height = 100 } = useResizeObserver()
+    const stageRef = useRef(null)
+    const [[x, y], setPos] = useState([0, 0])
+    const [scale, setScale] = useState(1)
+
+    const clampScale = (target) => Math.min(Math.max(target, MAP_MIN_SCALE), MAP_MAX_SCALE)
+    const moveWithDelta = (deltaX, deltaY) => setPos(([x, y]) => [x + deltaX, y + deltaY])
+
+    const onZoom = (e) => {
+        e.evt.preventDefault()
+
+        const stage = stageRef.current.getStage()
+        const oldScale = scale
+
+        const pointer = stage.getPointerPosition()
+        const mousePointTo = {
+            x: (pointer.x - x) / oldScale,
+            y: (pointer.y - y) / oldScale,
+        }
+
+        const newScale = clampScale(e.evt.deltaY > 0 ? oldScale * MAP_SCALE_PER_EVENT : oldScale / MAP_SCALE_PER_EVENT)
+
+        setScale(newScale)
+        setPos([pointer.x - mousePointTo.x * newScale, pointer.y - mousePointTo.y * newScale])
+    }
+    const onZoomButton = (zoomIn) =>
+        setScale((scale) => clampScale(zoomIn ? scale * MAP_SCALE_PER_EVENT : scale / MAP_SCALE_PER_EVENT))
+    const onDragEnd = (e) => setPos([e.target.x(), e.target.y()])
+    const onExport = () => {
+        const download = document.createElement('a')
+        download.href = stageRef.current.getStage().toDataURL()
+        download.download = 'opendc-canvas-export-' + Date.now() + '.png'
+        download.click()
+    }
 
-    const stage = useRef(null)
-    const [pos, setPos] = useState([0, 0])
-    const [x, y] = pos
     const handlers = {
         MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
         MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
         MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
         MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
     }
-    const mapPosition = useMapPosition()
-    const { ref, width = 100, height = 100 } = useResizeObserver()
-
-    const moveWithDelta = (deltaX, deltaY) =>
-        dispatch(setMapPositionWithBoundsCheck(mapPosition.x + deltaX, mapPosition.y + deltaY))
-    const updateMousePosition = () => {
-        if (!stage.current) {
-            return
-        }
-
-        const mousePos = stage.current.getStage().getPointerPosition()
-        setPos([mousePos.x, mousePos.y])
-    }
-    const updateScale = ({ evt }) => dispatch(zoomInOnPosition(evt.deltaY < 0, x, y))
-
-    useEffect(() => {
-        window['exportCanvasToImage'] = () => {
-            const download = document.createElement('a')
-            download.href = stage.current.getStage().toDataURL()
-            download.download = 'opendc-canvas-export-' + Date.now() + '.png'
-            download.click()
-        }
-    }, [stage])
-
-    useEffect(() => dispatch(setMapDimensions(width, height)), [width, height]) // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
-            <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale} draggable>
+            <Stage
+                ref={stageRef}
+                onWheel={onZoom}
+                onDragEnd={onDragEnd}
+                draggable
+                width={width}
+                height={height}
+                scale={{ x: scale, y: scale }}
+                x={x}
+                y={y}
+            >
                 <Provider store={store}>
                     <MapLayer />
-                    <RoomHoverLayer mouseX={x} mouseY={y} />
-                    <ObjectHoverLayer mouseX={x} mouseY={y} />
+                    <RoomHoverLayer />
+                    <ObjectHoverLayer />
                 </Provider>
             </Stage>
+            <ScaleIndicator scale={scale} />
+            <Toolbar onZoom={onZoomButton} onExport={onExport} />
         </HotKeys>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
index 838aea5a..dbc26f14 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 
-const RackSpaceFillContainer = (props) => {
-    const state = useSelector((state) => {
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const fillFraction = useSelector((state) => {
         let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[props.tileId].rack]
+        const rack = state.objects.rack[state.objects.tile[tileId].rack]
         const machineIds = rack.machines
         machineIds.forEach((machineId) => {
             if (machineId !== null) {
@@ -22,12 +22,9 @@ const RackSpaceFillContainer = (props) => {
             }
         })
 
-        return {
-            type: 'energy',
-            fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW),
-        }
+        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
     })
-    return <RackFillBar {...props} {...state} />
+    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
 }
 
 RackSpaceFillContainer.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
index 6791120e..7ca5c930 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
@@ -25,15 +25,9 @@ import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 
-const RackSpaceFillContainer = (props) => {
-    const state = useSelector((state) => {
-        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rack].machines
-        return {
-            type: 'space',
-            fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
-        }
-    })
-    return <RackFillBar {...props} {...state} />
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
 }
 
 RackSpaceFillContainer.propTypes = {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
index 11bba0e1..0369bb79 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
@@ -4,10 +4,10 @@ import { Rect } from 'react-konva'
 import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
 import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
-const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => (
+const HoverTile = ({ x, y, isValid, scale = 1, onClick }) => (
     <Rect
-        x={pixelX}
-        y={pixelY}
+        x={x}
+        y={y}
         scaleX={scale}
         scaleY={scale}
         width={TILE_SIZE_IN_PIXELS}
@@ -18,10 +18,10 @@ const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => (
 )
 
 HoverTile.propTypes = {
-    pixelX: PropTypes.number.isRequired,
-    pixelY: PropTypes.number.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
     isValid: PropTypes.bool.isRequired,
-    scale: PropTypes.number.isRequired,
+    scale: PropTypes.number,
     onClick: PropTypes.func.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
index 8c573a6f..aa284944 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
@@ -16,7 +16,7 @@ import {
 } from '../MapConstants'
 import ImageComponent from './ImageComponent'
 
-const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
+function RackFillBar({ positionX, positionY, type, fillFraction }) {
     const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
     const x =
         positionX * TILE_SIZE_IN_PIXELS +
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
index be3a00a8..186c2b3a 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
@@ -4,19 +4,19 @@ 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'
 
-const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
+function TilePlusIcon({ x, y, scale = 1 }) {
     const linePoints = [
         [
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            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,
         ],
         [
-            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            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 (
@@ -27,7 +27,7 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
                     points={points}
                     lineCap="round"
                     stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
                     listening={false}
                 />
             ))}
@@ -36,9 +36,9 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
 }
 
 TilePlusIcon.propTypes = {
-    pixelX: PropTypes.number,
-    pixelY: PropTypes.number,
-    mapScale: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number,
+    scale: PropTypes.number,
 }
 
 export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
index a88a8b34..2b1060c0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
@@ -1,61 +1,52 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-import { Layer } from 'react-konva'
+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({ mouseX, mouseY, mapPosition, mapScale, isEnabled, isValid, onClick, children }) {
-    const [pos, setPos] = useState([-1, -1])
-    const [x, y] = pos
-    const [valid, setValid] = useState(false)
+function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
+    const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
 
-    useEffect(() => {
-        if (!isEnabled()) {
+    const layerRef = useEffectRef((layer) => {
+        if (!layer) {
             return
         }
 
-        const positionX = Math.floor((mouseX - mapPosition.x) / (mapScale * TILE_SIZE_IN_PIXELS))
-        const positionY = Math.floor((mouseY - mapPosition.y) / (mapScale * TILE_SIZE_IN_PIXELS))
+        const stage = layer.getStage()
 
-        if (positionX !== x || positionY !== y) {
-            setPos([positionX, positionY])
-            setValid(isValid(positionX, positionY))
-        }
-    }, [isEnabled, isValid, x, y, mouseX, mouseY, mapPosition, mapScale])
+        // Transform used to convert mouse coordinates to world coordinates
+        const transform = stage.getAbsoluteTransform().copy()
+        transform.invert()
+
+        stage.on('mousemove.hover', () => {
+            const { x, y } = transform.point(stage.getPointerPosition())
+            setPos([x, y])
+        })
+        return () => stage.off('mousemove.hover')
+    })
+
+    const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
+    const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
+    const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
 
-    if (!isEnabled()) {
+    if (!isEnabled) {
         return <Layer />
     }
 
-    const pixelX = mapScale * x * TILE_SIZE_IN_PIXELS + mapPosition.x
-    const pixelY = mapScale * y * TILE_SIZE_IN_PIXELS + mapPosition.y
+    const x = gridX * TILE_SIZE_IN_PIXELS
+    const y = gridY * TILE_SIZE_IN_PIXELS
 
     return (
-        <Layer opacity={0.6}>
-            <HoverTile
-                pixelX={pixelX}
-                pixelY={pixelY}
-                scale={mapScale}
-                isValid={valid}
-                onClick={() => (valid ? onClick(x, y) : undefined)}
-            />
-            {children
-                ? React.cloneElement(children, {
-                      pixelX,
-                      pixelY,
-                      scale: mapScale,
-                  })
-                : undefined}
+        <Layer opacity={0.6} ref={layerRef}>
+            <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
+            {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
         </Layer>
     )
 }
 
 HoverLayerComponent.propTypes = {
-    mouseX: PropTypes.number.isRequired,
-    mouseY: PropTypes.number.isRequired,
-    mapPosition: PropTypes.object.isRequired,
-    mapScale: PropTypes.number.isRequired,
-    isEnabled: PropTypes.func.isRequired,
+    isEnabled: PropTypes.bool.isRequired,
     isValid: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
     children: PropTypes.node,
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
index badb9f68..c902532b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
@@ -21,13 +21,21 @@
  */
 
 import React from 'react'
-import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
-import { useMapPosition, useMapScale } from '../../../../data/map'
+import { Group, Layer } from 'react-konva'
+import Backdrop from '../elements/Backdrop'
+import TopologyContainer from '../TopologyContainer'
+import GridGroup from '../groups/GridGroup'
 
-const MapLayer = (props) => {
-    const position = useMapPosition()
-    const scale = useMapScale()
-    return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
+function MapLayer() {
+    return (
+        <Layer>
+            <Group>
+                <Backdrop />
+                <TopologyContainer />
+                <GridGroup />
+            </Group>
+        </Layer>
+    )
 }
 
 export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
deleted file mode 100644
index efe5b4e5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayerComponent.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group, Layer } from 'react-konva'
-import Backdrop from '../elements/Backdrop'
-import GridGroup from '../groups/GridGroup'
-import TopologyContainer from '../TopologyContainer'
-
-const MapLayerComponent = ({ mapPosition, mapScale }) => (
-    <Layer>
-        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
-            <Backdrop />
-            <TopologyContainer />
-            <GridGroup />
-        </Group>
-    </Layer>
-)
-
-MapLayerComponent.propTypes = {
-    mapPosition: PropTypes.shape({
-        x: PropTypes.number,
-        y: PropTypes.number,
-    }),
-    mapScale: PropTypes.number,
-}
-
-export default MapLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
index 9a087bd5..47d9c992 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
@@ -23,32 +23,31 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { addRackToTile } from '../../../../redux/actions/topology/room'
-import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
 import { findTileWithPosition } from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
+import TilePlusIcon from '../elements/TilePlusIcon'
 
-const ObjectHoverLayer = (props) => {
-    const state = useSelector((state) => {
-        return {
-            mapPosition: state.map.position,
-            mapScale: state.map.scale,
-            isEnabled: () => state.construction.inRackConstructionMode,
-            isValid: (x, y) => {
-                if (state.interactionLevel.mode !== 'ROOM') {
-                    return false
-                }
+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.objects.room[state.interactionLevel.roomId]
-                const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
-                const tile = findTileWithPosition(tiles, x, y)
+        const currentRoom = state.objects.room[state.interactionLevel.roomId]
+        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
+        const tile = findTileWithPosition(tiles, x, y)
 
-                return !(tile === null || tile.rack)
-            },
-        }
+        return !(tile === null || tile.rack)
     })
 
     const dispatch = useDispatch()
     const onClick = (x, y) => dispatch(addRackToTile(x, y))
-    return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} />
+    return (
+        <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid}>
+            <TilePlusIcon />
+        </HoverLayerComponent>
+    )
 }
 
 export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayerComponent.js
deleted file mode 100644
index 661fc255..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import TilePlusIcon from '../elements/TilePlusIcon'
-import HoverLayerComponent from './HoverLayerComponent'
-
-const ObjectHoverLayerComponent = (props) => (
-    <HoverLayerComponent {...props}>
-        <TilePlusIcon {...props} />
-    </HoverLayerComponent>
-)
-
-export default ObjectHoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
index 87240813..59f83b2b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
@@ -23,45 +23,39 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
-import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
 import {
     deriveValidNextTilePositions,
     findPositionInPositions,
     findPositionInRooms,
 } from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
 
-const RoomHoverLayer = (props) => {
+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.objects.room[state.construction.currentRoomInConstruction] }
+        const oldRooms = Object.keys(state.objects.room)
+            .map((id) => ({ ...state.objects.room[id] }))
+            .filter(
+                (room) =>
+                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
+                    room._id !== state.construction.currentRoomInConstruction
+            )
 
-    const state = useSelector((state) => {
-        return {
-            mapPosition: state.map.position,
-            mapScale: state.map.scale,
-            isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
-            isValid: (x, y) => {
-                const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
-                const oldRooms = Object.keys(state.objects.room)
-                    .map((id) => Object.assign({}, state.objects.room[id]))
-                    .filter(
-                        (room) =>
-                            state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
-                            room._id !== state.construction.currentRoomInConstruction
-                    )
-
-                ;[...oldRooms, newRoom].forEach((room) => {
-                    room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
-                })
-                if (newRoom.tiles.length === 0) {
-                    return findPositionInRooms(oldRooms, x, y) === -1
-                }
-
-                const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-                return findPositionInPositions(validNextPositions, x, y) !== -1
-            },
+        ;[...oldRooms, newRoom].forEach((room) => {
+            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
+        })
+        if (newRoom.tiles.length === 0) {
+            return findPositionInRooms(oldRooms, x, y) === -1
         }
+
+        const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
+        return findPositionInPositions(validNextPositions, x, y) !== -1
     })
-    return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} />
+
+    return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
 }
 
 export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayerComponent.js
deleted file mode 100644
index 887e2891..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayerComponent.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import HoverLayerComponent from './HoverLayerComponent'
-
-const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} />
-
-export default RoomHoverLayerComponent
-- 
cgit v1.2.3


From 54d07120191eb81de91a49cdebf619cfecce2666 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 14:45:25 +0200
Subject: refactor(ui): Encode state in topology actions

This change updates the OpenDC frontend to reduce its reliance of global
state during the execution of actions. Actions that modify the topology
now require parameters to be passed via the action constructor instead
of relying on the global interactionLevel state.
---
 .../app/sidebars/topology/TopologySidebar.js       | 18 +++----
 .../sidebars/topology/building/BuildingSidebar.js  |  8 +++
 .../topology/building/BuildingSidebarComponent.js  |  8 ---
 .../building/NewRoomConstructionComponent.js       |  2 +-
 .../building/NewRoomConstructionContainer.js       |  2 +-
 .../app/sidebars/topology/machine/DeleteMachine.js |  8 +--
 .../sidebars/topology/machine/MachineSidebar.js    | 49 ++++++++++++++++++
 .../topology/machine/MachineSidebarComponent.js    | 44 ----------------
 .../topology/machine/MachineSidebarContainer.js    | 37 --------------
 .../sidebars/topology/machine/UnitAddContainer.js  |  5 +-
 .../sidebars/topology/machine/UnitListComponent.js |  4 +-
 .../sidebars/topology/machine/UnitListContainer.js | 15 +++---
 .../sidebars/topology/machine/UnitTabsComponent.js | 23 +++++----
 .../app/sidebars/topology/rack/AddPrefab.js        | 44 ++++++++++++++++
 .../sidebars/topology/rack/AddPrefabComponent.js   | 16 ------
 .../sidebars/topology/rack/AddPrefabContainer.js   | 33 ------------
 .../sidebars/topology/rack/DeleteRackContainer.js  |  9 +++-
 .../app/sidebars/topology/rack/MachineComponent.js |  2 +-
 .../sidebars/topology/rack/MachineListContainer.js |  2 +-
 .../sidebars/topology/rack/RackNameContainer.js    |  4 +-
 .../app/sidebars/topology/rack/RackSidebar.js      | 58 ++++++++++++++++++++++
 .../sidebars/topology/rack/RackSidebar.module.scss | 12 +++++
 .../sidebars/topology/rack/RackSidebarComponent.js | 58 ----------------------
 .../topology/rack/RackSidebarComponent.module.scss | 12 -----
 .../sidebars/topology/rack/RackSidebarContainer.js | 32 ------------
 .../sidebars/topology/room/DeleteRoomContainer.js  |  9 +++-
 .../sidebars/topology/room/EditRoomContainer.js    |  9 +++-
 .../topology/room/RackConstructionComponent.js     |  2 +-
 .../topology/room/RackConstructionContainer.js     |  2 +-
 .../app/sidebars/topology/room/RoomName.js         |  4 +-
 .../app/sidebars/topology/room/RoomSidebar.js      | 43 ++++++++++++++++
 .../sidebars/topology/room/RoomSidebarComponent.js | 43 ----------------
 .../sidebars/topology/room/RoomSidebarContainer.js | 32 ------------
 33 files changed, 284 insertions(+), 365 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
index c4a880b1..564f4030 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { InteractionLevel } from '../../../../shapes'
-import BuildingSidebarComponent from './building/BuildingSidebarComponent'
+import BuildingSidebar from './building/BuildingSidebar'
 import {
     Button,
     DrawerActions,
@@ -16,9 +16,9 @@ import { AngleLeftIcon } from '@patternfly/react-icons'
 import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../../redux/actions/interaction-level'
 import { backButton } from './TopologySidebar.module.scss'
-import RoomSidebarContainer from './room/RoomSidebarContainer'
-import RackSidebarContainer from './rack/RackSidebarContainer'
-import MachineSidebarContainer from './machine/MachineSidebarContainer'
+import RoomSidebar from './room/RoomSidebar'
+import RackSidebar from './rack/RackSidebar'
+import MachineSidebar from './machine/MachineSidebar'
 
 const name = {
     BUILDING: 'Building',
@@ -27,21 +27,21 @@ const name = {
     MACHINE: 'Machine',
 }
 
-const TopologySidebar = ({ interactionLevel, onClose }) => {
+function TopologySidebar({ interactionLevel, onClose }) {
     let sidebarContent
 
     switch (interactionLevel.mode) {
         case 'BUILDING':
-            sidebarContent = <BuildingSidebarComponent />
+            sidebarContent = <BuildingSidebar />
             break
         case 'ROOM':
-            sidebarContent = <RoomSidebarContainer />
+            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
             break
         case 'RACK':
-            sidebarContent = <RackSidebarContainer />
+            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
             break
         case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer />
+            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
             break
         default:
             sidebarContent = 'Missing Content'
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
new file mode 100644
index 00000000..5fcd46be
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import NewRoomConstructionContainer from './NewRoomConstructionContainer'
+
+function BuildingSidebar() {
+    return <NewRoomConstructionContainer />
+}
+
+export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
deleted file mode 100644
index 6c2556d3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import NewRoomConstructionContainer from './NewRoomConstructionContainer'
-
-const BuildingSidebarComponent = () => {
-    return <NewRoomConstructionContainer />
-}
-
-export default BuildingSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 656b2515..9fc85d0c 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -4,7 +4,7 @@ import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@pat
 import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
 
-const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
+function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
     if (currentRoomInConstruction === '-1') {
         return (
             <Button isBlock icon={<PlusIcon />} onClick={onStart}>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
index 0836263c..5b031a6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
@@ -29,7 +29,7 @@ import {
 } from '../../../../../redux/actions/topology/building'
 import NewRoomConstructionComponent from './NewRoomConstructionComponent'
 
-const NewRoomConstructionButton = (props) => {
+function NewRoomConstructionButton(props) {
     const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
 
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
index a7bf3719..75d458b6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
@@ -21,18 +21,20 @@
  */
 
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { deleteMachine } from '../../../../../redux/actions/topology/machine'
 import { Button } from '@patternfly/react-core'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import ConfirmationModal from '../../../../modals/ConfirmationModal'
 
-const DeleteMachine = () => {
+function DeleteMachine() {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
+    const position = useSelector((state) => state.interactionLevel.position)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteMachine())
+            dispatch(deleteMachine(rackId, position))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
new file mode 100644
index 00000000..0c3dea98
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import UnitTabsComponent from './UnitTabsComponent'
+import DeleteMachine from './DeleteMachine'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function MachineSidebar({ tileId, position }) {
+    const machine = useSelector(({ objects }) => {
+        const rack = objects.rack[objects.tile[tileId].rack]
+        return objects.machine[rack.machines[position - 1]]
+    })
+    const machineId = machine._id
+    return (
+        <div>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        Machine at position {machine.position}
+                    </TextListItem>
+                </TextList>
+
+                <Title headingLevel="h2">Actions</Title>
+                <DeleteMachine />
+
+                <Title headingLevel="h2">Units</Title>
+            </TextContent>
+            <div className="pf-u-h-100">
+                <UnitTabsComponent machineId={machineId} />
+            </div>
+        </div>
+    )
+}
+
+MachineSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+    position: PropTypes.number.isRequired,
+}
+
+export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
deleted file mode 100644
index d3d4a8cf..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import UnitTabsComponent from './UnitTabsComponent'
-import DeleteMachine from './DeleteMachine'
-import {
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-import { useSelector } from 'react-redux'
-
-const MachineSidebarComponent = ({ machineId }) => {
-    const machine = useSelector((state) => state.objects.machine[machineId])
-    return (
-        <div>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        Machine at position {machine.position}
-                    </TextListItem>
-                </TextList>
-
-                <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
-
-                <Title headingLevel="h2">Units</Title>
-            </TextContent>
-            <div className="pf-u-h-100">
-                <UnitTabsComponent />
-            </div>
-        </div>
-    )
-}
-
-MachineSidebarComponent.propTypes = {
-    machineId: PropTypes.string,
-}
-
-export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index 94d9f2c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import MachineSidebarComponent from './MachineSidebarComponent'
-
-const MachineSidebarContainer = (props) => {
-    const machineId = useSelector(
-        (state) =>
-            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                state.interactionLevel.position - 1
-            ]
-    )
-    return <MachineSidebarComponent {...props} machineId={machineId} />
-}
-
-export default MachineSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
index 8a6680e6..cc226d46 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
@@ -26,16 +26,17 @@ import { useDispatch, useSelector } from 'react-redux'
 import { addUnit } from '../../../../../redux/actions/topology/machine'
 import UnitAddComponent from './UnitAddComponent'
 
-const UnitAddContainer = ({ unitType }) => {
+function UnitAddContainer({ machineId, unitType }) {
     const units = useSelector((state) => Object.values(state.objects[unitType]))
     const dispatch = useDispatch()
 
-    const onAdd = (id) => dispatch(addUnit(unitType, id))
+    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
 
     return <UnitAddComponent onAdd={onAdd} units={units} />
 }
 
 UnitAddContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
     unitType: PropTypes.string.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 9c3c08fd..16ebd708 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -21,7 +21,7 @@ import {
 } from '@patternfly/react-core'
 import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
 
-const UnitInfo = ({ unit, unitType }) => {
+function UnitInfo({ unit, unitType }) {
     if (unitType === 'cpu' || unitType === 'gpu') {
         return (
             <DescriptionList>
@@ -64,7 +64,7 @@ UnitInfo.propTypes = {
     unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
 }
 
-const UnitListComponent = ({ unitType, units, onDelete }) => {
+function UnitListComponent({ unitType, units, onDelete }) {
     if (units.length === 0) {
         return (
             <EmptyState>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
index 2d994f97..f76684a5 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
@@ -33,23 +33,20 @@ const unitMapping = {
     storage: 'storages',
 }
 
-const UnitListContainer = ({ unitType, ...props }) => {
+function UnitListContainer({ machineId, unitType }) {
     const dispatch = useDispatch()
     const units = useSelector((state) => {
-        const machine =
-            state.objects.machine[
-                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                    state.interactionLevel.position - 1
-                ]
-            ]
+        const machine = state.objects.machine[machineId]
         return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
     })
-    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
 
-    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+
+    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
 }
 
 UnitListContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
     unitType: PropTypes.string.isRequired,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 723ed2e2..6d10d2df 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,31 +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'
 
-const UnitTabsComponent = () => {
+function UnitTabsComponent({ machineId }) {
     const [activeTab, setActiveTab] = useState('cpu-units')
 
     return (
         <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
             <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer unitType="cpu" />
-                <UnitListContainer unitType="cpu" />
+                <UnitAddContainer machineId={machineId} unitType="cpu" />
+                <UnitListContainer machineId={machineId} unitType="cpu" />
             </Tab>
             <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer unitType="gpu" />
-                <UnitListContainer unitType="gpu" />
+                <UnitAddContainer machineId={machineId} unitType="gpu" />
+                <UnitListContainer machineId={machineId} unitType="gpu" />
             </Tab>
             <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer unitType="memory" />
-                <UnitListContainer unitType="memory" />
+                <UnitAddContainer machineId={machineId} unitType="memory" />
+                <UnitListContainer machineId={machineId} unitType="memory" />
             </Tab>
             <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer unitType="storage" />
-                <UnitListContainer unitType="storage" />
+                <UnitAddContainer machineId={machineId} unitType="storage" />
+                <UnitListContainer machineId={machineId} unitType="storage" />
             </Tab>
         </Tabs>
     )
 }
 
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
 export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
new file mode 100644
index 00000000..3af46861
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { addPrefab } from '../../../../../redux/actions/prefabs'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
+
+function AddPrefab({ tileId }) {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(addPrefab('name', tileId))
+    return (
+        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
+            Save this rack to a prefab
+        </Button>
+    )
+}
+
+AddPrefab.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
deleted file mode 100644
index c8543134..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabComponent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { SaveIcon } from '@patternfly/react-icons'
-import { Button } from '@patternfly/react-core'
-
-const AddPrefabComponent = ({ onClick }) => (
-    <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
-        Save this rack to a prefab
-    </Button>
-)
-
-AddPrefabComponent.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default AddPrefabComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
deleted file mode 100644
index d3d9aaf5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefabContainer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../redux/actions/prefabs'
-import AddPrefabComponent from './AddPrefabComponent'
-
-const AddPrefabContainer = (props) => {
-    const dispatch = useDispatch()
-    return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} />
-}
-
-export default AddPrefabContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
index 47959f03..f0dc7b6b 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
@@ -27,12 +28,12 @@ import { deleteRack } from '../../../../../redux/actions/topology/rack'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 
-const DeleteRackContainer = () => {
+function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRack())
+            dispatch(deleteRack(tileId))
         }
         setVisible(false)
     }
@@ -51,4 +52,8 @@ const DeleteRackContainer = () => {
     )
 }
 
+DeleteRackContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
 export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index 1617b3bf..97141711 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -19,7 +19,7 @@ UnitIcon.propTypes = {
     type: PropTypes.string,
 }
 
-const MachineComponent = ({ machine, onClick }) => {
+function MachineComponent({ machine, onClick }) {
     const hasNoUnits =
         machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
index 54e6db0a..3ed0ffd0 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
@@ -43,7 +43,7 @@ function MachineListContainer({ tileId, ...props }) {
         <MachineListComponent
             {...props}
             machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(index))}
+            onAdd={(index) => dispatch(addMachine(rack._id, index))}
             onSelect={(index) => dispatch(goFromRackToMachine(index))}
         />
     )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
index 11529b55..11db6420 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
@@ -5,11 +5,11 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const rackName = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack].name)
+    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRackName(name))
+            dispatch(editRackName(_id, name))
         }
     }
     return <NameComponent name={rackName} onEdit={callback} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
new file mode 100644
index 00000000..3c9f152a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import RackNameContainer from './RackNameContainer'
+import AddPrefab from './AddPrefab'
+import DeleteRackContainer from './DeleteRackContainer'
+import MachineListContainer from './MachineListContainer'
+import {
+    Skeleton,
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function RackSidebar({ tileId }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+
+    return (
+        <div className={sidebarContainer}>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem
+                        component={TextListItemVariants.dt}
+                        className="pf-u-display-inline-flex pf-u-align-items-center"
+                    >
+                        Name
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        <RackNameContainer tileId={tileId} />
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
+                    </TextListItem>
+                </TextList>
+                <Title headingLevel="h2">Actions</Title>
+                <AddPrefab tileId={tileId} />
+                <DeleteRackContainer tileId={tileId} />
+
+                <Title headingLevel="h2">Slots</Title>
+            </TextContent>
+            <div className={machineListContainer}>
+                <MachineListContainer tileId={tileId} />
+            </div>
+        </div>
+    )
+}
+
+RackSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
new file mode 100644
index 00000000..6f258aec
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
@@ -0,0 +1,12 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 10px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
deleted file mode 100644
index dd5117f7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { machineListContainer, sidebarContainer } from './RackSidebarComponent.module.scss'
-import RackNameContainer from './RackNameContainer'
-import AddPrefabContainer from './AddPrefabContainer'
-import DeleteRackContainer from './DeleteRackContainer'
-import MachineListContainer from './MachineListContainer'
-import {
-    Skeleton,
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-import { useSelector } from 'react-redux'
-
-function RackSidebarComponent({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-
-    return (
-        <div className={sidebarContainer}>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem
-                        component={TextListItemVariants.dt}
-                        className="pf-u-display-inline-flex pf-u-align-items-center"
-                    >
-                        Name
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        <RackNameContainer tileId={tileId} />
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
-                    </TextListItem>
-                </TextList>
-                <Title headingLevel="h2">Actions</Title>
-                <AddPrefabContainer />
-                <DeleteRackContainer />
-
-                <Title headingLevel="h2">Slots</Title>
-            </TextContent>
-            <div className={machineListContainer}>
-                <MachineListContainer tileId={tileId} />
-            </div>
-        </div>
-    )
-}
-
-RackSidebarComponent.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
deleted file mode 100644
index 6f258aec..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarComponent.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.sidebarContainer {
-    display: flex;
-    height: 100%;
-    max-height: 100%;
-    flex-direction: column;
-}
-
-.machineListContainer {
-    flex: 1;
-    overflow-y: scroll;
-    margin-top: 10px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
deleted file mode 100644
index 2b31413d..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebarContainer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackSidebarComponent from './RackSidebarComponent'
-
-const RackSidebarContainer = (props) => {
-    const tileId = useSelector((state) => state.interactionLevel.tileId)
-    return <RackSidebarComponent {...props} tileId={tileId} />
-}
-
-export default RackSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
index 284c4d53..19a782a6 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
@@ -27,12 +28,12 @@ import { deleteRoom } from '../../../../../redux/actions/topology/room'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 
-const DeleteRoomContainer = () => {
+function DeleteRoomContainer({ roomId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRoom())
+            dispatch(deleteRoom(roomId))
         }
         setVisible(false)
     }
@@ -51,4 +52,8 @@ const DeleteRoomContainer = () => {
     )
 }
 
+DeleteRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
 export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
index 6db2bfb6..96c077cb 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
@@ -27,12 +28,12 @@ import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
 import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
 import { Button } from '@patternfly/react-core'
 
-const EditRoomContainer = () => {
+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())
+    const onEdit = () => dispatch(startRoomEdit(roomId))
     const onFinish = () => dispatch(finishRoomEdit())
 
     return isEditing ? (
@@ -53,4 +54,8 @@ const EditRoomContainer = () => {
     )
 }
 
+EditRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
 export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 8aebe969..13432689 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'
 const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
-            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop}>
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
                 Stop rack construction
             </Button>
         )
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
index 38af447a..b9ab6610 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
@@ -25,7 +25,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
 import RackConstructionComponent from './RackConstructionComponent'
 
-const RackConstructionContainer = (props) => {
+function RackConstructionContainer(props) {
     const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
     const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
index d7b006a6..11909189 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
@@ -27,11 +27,11 @@ import NameComponent from '../../../../../components/app/sidebars/topology/NameC
 import { editRoomName } from '../../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
-    const roomName = useSelector((state) => state.objects.room[roomId].name)
+    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-            dispatch(editRoomName(name))
+            dispatch(editRoomName(_id, name))
         }
     }
     return <NameComponent name={roomName} onEdit={callback} />
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
new file mode 100644
index 00000000..6ad489e0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/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
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
deleted file mode 100644
index fac58c51..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import RoomName from './RoomName'
-import RackConstructionContainer from './RackConstructionContainer'
-import EditRoomContainer from './EditRoomContainer'
-import DeleteRoomContainer from './DeleteRoomContainer'
-import {
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-
-const RoomSidebarComponent = ({ roomId }) => {
-    return (
-        <TextContent>
-            <Title headingLevel="h2">Details</Title>
-            <TextList component={TextListVariants.dl}>
-                <TextListItem
-                    component={TextListItemVariants.dt}
-                    className="pf-u-display-inline-flex pf-u-align-items-center"
-                >
-                    Name
-                </TextListItem>
-                <TextListItem component={TextListItemVariants.dd}>
-                    <RoomName roomId={roomId} />
-                </TextListItem>
-            </TextList>
-            <Title headingLevel="h2">Construction</Title>
-            <RackConstructionContainer />
-            <EditRoomContainer />
-            <DeleteRoomContainer />
-        </TextContent>
-    )
-}
-
-RoomSidebarComponent.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default RoomSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
deleted file mode 100644
index 2076b00e..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebarContainer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RoomSidebarComponent from './RoomSidebarComponent'
-
-const RoomSidebarContainer = (props) => {
-    const roomId = useSelector((state) => state.interactionLevel.roomId)
-    return <RoomSidebarComponent {...props} roomId={roomId} />
-}
-
-export default RoomSidebarContainer
-- 
cgit v1.2.3


From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../opendc-web-ui/src/components/AppNavigation.js  |   2 +-
 opendc-web/opendc-web-ui/src/components/AppPage.js |   3 +-
 .../src/components/app/map/GrayContainer.js        |  34 -----
 .../src/components/app/map/MapConstants.js         |  25 ----
 .../src/components/app/map/MapStage.js             |  83 -----------
 .../src/components/app/map/MapStage.module.scss    |  31 ----
 .../src/components/app/map/RackContainer.js        |  37 -----
 .../components/app/map/RackEnergyFillContainer.js  |  34 -----
 .../components/app/map/RackSpaceFillContainer.js   |  37 -----
 .../src/components/app/map/RoomContainer.js        |  45 ------
 .../src/components/app/map/TileContainer.js        |  46 ------
 .../src/components/app/map/TopologyContainer.js    |  35 -----
 .../src/components/app/map/WallContainer.js        |  39 -----
 .../src/components/app/map/controls/Collapse.js    |  42 ------
 .../app/map/controls/Collapse.module.scss          |  55 -------
 .../components/app/map/controls/ScaleIndicator.js  |  16 --
 .../app/map/controls/ScaleIndicator.module.scss    |  10 --
 .../src/components/app/map/controls/Toolbar.js     |  28 ----
 .../app/map/controls/Toolbar.module.scss           |  29 ----
 .../src/components/app/map/elements/Backdrop.js    |   8 -
 .../src/components/app/map/elements/GrayLayer.js   |  22 ---
 .../src/components/app/map/elements/HoverTile.js   |  28 ----
 .../components/app/map/elements/ImageComponent.js  |  36 -----
 .../src/components/app/map/elements/RackFillBar.js |  68 ---------
 .../src/components/app/map/elements/RoomTile.js    |  22 ---
 .../src/components/app/map/elements/TileObject.js  |  25 ----
 .../components/app/map/elements/TilePlusIcon.js    |  44 ------
 .../src/components/app/map/elements/WallSegment.js |  32 ----
 .../src/components/app/map/groups/GridGroup.js     |  34 -----
 .../src/components/app/map/groups/RackGroup.js     |  25 ----
 .../src/components/app/map/groups/RoomGroup.js     |  52 -------
 .../src/components/app/map/groups/TileGroup.js     |  36 -----
 .../src/components/app/map/groups/TopologyGroup.js |  44 ------
 .../src/components/app/map/groups/WallGroup.js     |  22 ---
 .../app/map/layers/HoverLayerComponent.js          |  55 -------
 .../src/components/app/map/layers/MapLayer.js      |  41 ------
 .../components/app/map/layers/ObjectHoverLayer.js  |  53 -------
 .../components/app/map/layers/RoomHoverLayer.js    |  61 --------
 .../components/app/results/PortfolioResultInfo.js  |  40 -----
 .../src/components/app/results/PortfolioResults.js | 134 -----------------
 .../app/sidebars/topology/NameComponent.js         |  69 ---------
 .../app/sidebars/topology/TopologySidebar.js       |  83 -----------
 .../sidebars/topology/TopologySidebar.module.scss  |  37 -----
 .../sidebars/topology/building/BuildingSidebar.js  |   8 -
 .../building/NewRoomConstructionComponent.js       |  46 ------
 .../building/NewRoomConstructionContainer.js       |  46 ------
 .../app/sidebars/topology/machine/DeleteMachine.js |  56 -------
 .../sidebars/topology/machine/MachineSidebar.js    |  49 -------
 .../sidebars/topology/machine/UnitAddComponent.js  |  42 ------
 .../sidebars/topology/machine/UnitAddContainer.js  |  43 ------
 .../sidebars/topology/machine/UnitListComponent.js | 112 --------------
 .../sidebars/topology/machine/UnitListContainer.js |  53 -------
 .../sidebars/topology/machine/UnitTabsComponent.js |  36 -----
 .../app/sidebars/topology/rack/AddPrefab.js        |  44 ------
 .../sidebars/topology/rack/DeleteRackContainer.js  |  59 --------
 .../app/sidebars/topology/rack/MachineComponent.js |  46 ------
 .../sidebars/topology/rack/MachineListComponent.js |  73 ----------
 .../sidebars/topology/rack/MachineListContainer.js |  56 -------
 .../sidebars/topology/rack/RackNameContainer.js    |  22 ---
 .../app/sidebars/topology/rack/RackSidebar.js      |  58 --------
 .../sidebars/topology/rack/RackSidebar.module.scss |  12 --
 .../sidebars/topology/room/DeleteRoomContainer.js  |  59 --------
 .../sidebars/topology/room/EditRoomContainer.js    |  61 --------
 .../topology/room/RackConstructionComponent.js     |  36 -----
 .../topology/room/RackConstructionContainer.js     |  46 ------
 .../app/sidebars/topology/room/RoomName.js         |  44 ------
 .../app/sidebars/topology/room/RoomSidebar.js      |  43 ------
 .../src/components/modals/ConfirmationModal.js     |  27 ----
 .../opendc-web-ui/src/components/modals/Modal.js   |  38 -----
 .../src/components/modals/TextInputModal.js        |  70 ---------
 .../modals/custom-components/NewPortfolioModal.js  | 139 ------------------
 .../modals/custom-components/NewScenarioModal.js   | 159 --------------------
 .../modals/custom-components/NewTopologyModal.js   |  81 -----------
 .../src/components/portfolios/NewScenario.js       |  64 ++++++++
 .../src/components/portfolios/NewScenarioModal.js  | 159 ++++++++++++++++++++
 .../src/components/portfolios/ScenarioState.js     |  62 ++++++++
 .../src/components/portfolios/ScenarioTable.js     | 108 ++++++++++++++
 .../portfolios/results/PortfolioResultInfo.js      |  40 +++++
 .../portfolios/results/PortfolioResults.js         | 134 +++++++++++++++++
 .../src/components/projects/NewPortfolio.js        |   2 +-
 .../src/components/projects/NewPortfolioModal.js   | 161 +++++++++++++++++++++
 .../src/components/projects/NewProject.js          |   2 +-
 .../src/components/projects/NewScenario.js         |  64 --------
 .../src/components/projects/NewTopology.js         |   2 +-
 .../src/components/projects/NewTopologyModal.js    | 103 +++++++++++++
 .../src/components/projects/ScenarioState.js       |  62 --------
 .../src/components/projects/ScenarioTable.js       | 108 --------------
 .../src/components/topologies/map/GrayContainer.js |  34 +++++
 .../src/components/topologies/map/MapConstants.js  |  25 ++++
 .../src/components/topologies/map/MapStage.js      |  83 +++++++++++
 .../components/topologies/map/MapStage.module.scss |  31 ++++
 .../src/components/topologies/map/RackContainer.js |  37 +++++
 .../topologies/map/RackEnergyFillContainer.js      |  34 +++++
 .../topologies/map/RackSpaceFillContainer.js       |  37 +++++
 .../src/components/topologies/map/RoomContainer.js |  45 ++++++
 .../src/components/topologies/map/TileContainer.js |  46 ++++++
 .../components/topologies/map/TopologyContainer.js |  35 +++++
 .../src/components/topologies/map/WallContainer.js |  37 +++++
 .../components/topologies/map/controls/Collapse.js |  42 ++++++
 .../topologies/map/controls/Collapse.module.scss   |  55 +++++++
 .../topologies/map/controls/ScaleIndicator.js      |  18 +++
 .../map/controls/ScaleIndicator.module.scss        |  10 ++
 .../components/topologies/map/controls/Toolbar.js  |  35 +++++
 .../topologies/map/controls/Toolbar.module.scss    |  29 ++++
 .../components/topologies/map/elements/Backdrop.js |  10 ++
 .../topologies/map/elements/GrayLayer.js           |  24 +++
 .../topologies/map/elements/HoverTile.js           |  30 ++++
 .../topologies/map/elements/ImageComponent.js      |  36 +++++
 .../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      |  53 +++++++
 .../topologies/map/layers/RoomHoverLayer.js        |  61 ++++++++
 .../components/topologies/sidebar/NameComponent.js |  69 +++++++++
 .../topologies/sidebar/TopologySidebar.js          |  83 +++++++++++
 .../topologies/sidebar/TopologySidebar.module.scss |  37 +++++
 .../topologies/sidebar/building/BuildingSidebar.js |   8 +
 .../building/NewRoomConstructionComponent.js       |  46 ++++++
 .../building/NewRoomConstructionContainer.js       |  46 ++++++
 .../topologies/sidebar/machine/DeleteMachine.js    |  56 +++++++
 .../topologies/sidebar/machine/MachineSidebar.js   |  49 +++++++
 .../topologies/sidebar/machine/UnitAddComponent.js |  42 ++++++
 .../topologies/sidebar/machine/UnitAddContainer.js |  43 ++++++
 .../sidebar/machine/UnitListComponent.js           | 112 ++++++++++++++
 .../sidebar/machine/UnitListContainer.js           |  53 +++++++
 .../sidebar/machine/UnitTabsComponent.js           |  36 +++++
 .../topologies/sidebar/rack/AddPrefab.js           |  44 ++++++
 .../topologies/sidebar/rack/DeleteRackContainer.js |  59 ++++++++
 .../topologies/sidebar/rack/MachineComponent.js    |  46 ++++++
 .../sidebar/rack/MachineListComponent.js           |  73 ++++++++++
 .../sidebar/rack/MachineListContainer.js           |  56 +++++++
 .../topologies/sidebar/rack/RackNameContainer.js   |  22 +++
 .../topologies/sidebar/rack/RackSidebar.js         |  58 ++++++++
 .../sidebar/rack/RackSidebar.module.scss           |  12 ++
 .../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 ++++++
 .../components/util/modals/ConfirmationModal.js    |  27 ++++
 .../src/components/util/modals/Modal.js            |  38 +++++
 .../src/components/util/modals/TextInputModal.js   |  70 +++++++++
 153 files changed, 3662 insertions(+), 3601 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/Modal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/AppNavigation.js b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
index b3f11f34..178c3ec0 100644
--- a/opendc-web/opendc-web-ui/src/components/AppNavigation.js
+++ b/opendc-web/opendc-web-ui/src/components/AppNavigation.js
@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 
-import { Dropdown, DropdownItem, DropdownToggle, Nav, NavItem, NavList } from '@patternfly/react-core'
+import { Nav, NavItem, NavList } from '@patternfly/react-core'
 import { useRouter } from 'next/router'
 import NavItemLink from './util/NavItemLink'
 import { useProject } from '../data/project'
diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js
index 7cf9cc15..2e0ea4cc 100644
--- a/opendc-web/opendc-web-ui/src/components/AppPage.js
+++ b/opendc-web/opendc-web-ui/src/components/AppPage.js
@@ -22,8 +22,7 @@
 
 import PropTypes from 'prop-types'
 import { AppHeader } from './AppHeader'
-import { AppNavigation } from './AppNavigation'
-import React, { useState } from 'react'
+import React from 'react'
 import { Page } from '@patternfly/react-core'
 
 export function AppPage({ children, breadcrumb, tertiaryNav }) {
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
deleted file mode 100644
index 4791940f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
-import GrayLayer from '../../../components/app/map/elements/GrayLayer'
-
-const GrayContainer = () => {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-    return <GrayLayer onClick={onClick} />
-}
-
-export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
deleted file mode 100644
index 4c3b2757..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export const MAP_SIZE = 50
-export const TILE_SIZE_IN_PIXELS = 100
-export const TILE_SIZE_IN_METERS = 0.5
-export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
-
-export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
-export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
-export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
-
-export const GRID_LINE_WIDTH_IN_PIXELS = 2
-export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
-export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10
-
-export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3
-export const RACK_FILL_ICON_OPACITY = 0.8
-
-export const MAP_MOVE_PIXELS_PER_EVENT = 20
-export const MAP_SCALE_PER_EVENT = 1.1
-export const MAP_MIN_SCALE = 0.5
-export const MAP_MAX_SCALE = 1.5
-
-export const MAX_NUM_UNITS_PER_MACHINE = 6
-export const DEFAULT_RACK_SLOT_CAPACITY = 42
-export const DEFAULT_RACK_POWER_CAPACITY = 10000
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
deleted file mode 100644
index 5d19b3ad..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { HotKeys } from 'react-hotkeys'
-import { Stage } from 'react-konva'
-import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { Provider, useStore } from 'react-redux'
-import useResizeObserver from 'use-resize-observer'
-import { mapContainer } from './MapStage.module.scss'
-import MapLayer from './layers/MapLayer'
-import RoomHoverLayer from './layers/RoomHoverLayer'
-import ObjectHoverLayer from './layers/ObjectHoverLayer'
-import ScaleIndicator from './controls/ScaleIndicator'
-import Toolbar from './controls/Toolbar'
-
-function MapStage() {
-    const store = useStore()
-    const { ref, width = 100, height = 100 } = useResizeObserver()
-    const stageRef = useRef(null)
-    const [[x, y], setPos] = useState([0, 0])
-    const [scale, setScale] = useState(1)
-
-    const clampScale = (target) => Math.min(Math.max(target, MAP_MIN_SCALE), MAP_MAX_SCALE)
-    const moveWithDelta = (deltaX, deltaY) => setPos(([x, y]) => [x + deltaX, y + deltaY])
-
-    const onZoom = (e) => {
-        e.evt.preventDefault()
-
-        const stage = stageRef.current.getStage()
-        const oldScale = scale
-
-        const pointer = stage.getPointerPosition()
-        const mousePointTo = {
-            x: (pointer.x - x) / oldScale,
-            y: (pointer.y - y) / oldScale,
-        }
-
-        const newScale = clampScale(e.evt.deltaY > 0 ? oldScale * MAP_SCALE_PER_EVENT : oldScale / MAP_SCALE_PER_EVENT)
-
-        setScale(newScale)
-        setPos([pointer.x - mousePointTo.x * newScale, pointer.y - mousePointTo.y * newScale])
-    }
-    const onZoomButton = (zoomIn) =>
-        setScale((scale) => clampScale(zoomIn ? scale * MAP_SCALE_PER_EVENT : scale / MAP_SCALE_PER_EVENT))
-    const onDragEnd = (e) => setPos([e.target.x(), e.target.y()])
-    const onExport = () => {
-        const download = document.createElement('a')
-        download.href = stageRef.current.getStage().toDataURL()
-        download.download = 'opendc-canvas-export-' + Date.now() + '.png'
-        download.click()
-    }
-
-    const handlers = {
-        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
-        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
-    }
-
-    return (
-        <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
-            <Stage
-                ref={stageRef}
-                onWheel={onZoom}
-                onDragEnd={onDragEnd}
-                draggable
-                width={width}
-                height={height}
-                scale={{ x: scale, y: scale }}
-                x={x}
-                y={y}
-            >
-                <Provider store={store}>
-                    <MapLayer />
-                    <RoomHoverLayer />
-                    <ObjectHoverLayer />
-                </Provider>
-            </Stage>
-            <ScaleIndicator scale={scale} />
-            <Toolbar onZoom={onZoomButton} onExport={onExport} />
-        </HotKeys>
-    )
-}
-
-export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
deleted file mode 100644
index d879b4c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.mapContainer {
-    background-color: var(--pf-global--Color--light-200);
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
deleted file mode 100644
index 3c75d3a7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackGroup from '../../../components/app/map/groups/RackGroup'
-import { Tile } from '../../../shapes'
-
-const RackContainer = ({ tile }) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    return <RackGroup interactionLevel={interactionLevel} tile={tile} />
-}
-
-RackContainer.propTypes = {
-    tile: Tile,
-}
-
-export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
deleted file mode 100644
index dbc26f14..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-function RackSpaceFillContainer({ tileId, ...props }) {
-    const fillFraction = useSelector((state) => {
-        let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[tileId].rack]
-        const machineIds = rack.machines
-        machineIds.forEach((machineId) => {
-            if (machineId !== null) {
-                const machine = state.objects.machine[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
-                machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
-                )
-                machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
-                )
-            }
-        })
-
-        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
-    })
-    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
-}
-
-RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
deleted file mode 100644
index 7ca5c930..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-function RackSpaceFillContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
-}
-
-RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
deleted file mode 100644
index 26fbcd7a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
-import RoomGroup from '../../../components/app/map/groups/RoomGroup'
-
-const RoomContainer = (props) => {
-    const state = useSelector((state) => {
-        return {
-            interactionLevel: state.interactionLevel,
-            currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.objects.room[props.roomId],
-        }
-    })
-    const dispatch = useDispatch()
-    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
-}
-
-RoomContainer.propTypes = {
-    roomId: PropTypes.string,
-}
-
-export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
deleted file mode 100644
index bfcbf735..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
-import TileGroup from '../../../components/app/map/groups/TileGroup'
-
-const TileContainer = (props) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[props.tileId])
-
-    const dispatch = useDispatch()
-    const onClick = (tile) => {
-        if (tile.rack) {
-            dispatch(goFromRoomToRack(tile._id))
-        }
-    }
-    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
-}
-
-TileContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
deleted file mode 100644
index 78e75d0f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
-import { useActiveTopology } from '../../../data/topology'
-
-const TopologyContainer = () => {
-    const topology = useActiveTopology()
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
-}
-
-export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
deleted file mode 100644
index 51dffe4b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import WallGroup from '../../../components/app/map/groups/WallGroup'
-
-const WallContainer = (props) => {
-    const tiles = useSelector((state) =>
-        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
-    )
-    return <WallGroup {...props} tiles={tiles} />
-}
-
-WallContainer.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
deleted file mode 100644
index f54b7c84..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { ChevronLeftIcon } from '@patternfly/react-icons'
-import { collapseContainer } from './Collapse.module.scss'
-import { Button } from '@patternfly/react-core'
-
-function Collapse({ onClick }) {
-    return (
-        <div className={collapseContainer}>
-            <Button variant="tertiary" onClick={onClick}>
-                <ChevronLeftIcon />
-            </Button>
-        </div>
-    )
-}
-
-Collapse.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default Collapse
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
deleted file mode 100644
index 0c1fac94..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.collapseContainer {
-    position: absolute;
-    right: var(--pf-global--spacer--xs);
-    top: 0;
-    bottom: 10%;
-    margin: auto 0;
-    height: 50px;
-
-    button:global(.pf-m-tertiary) {
-        height: 100%;
-        padding: 2px;
-
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
deleted file mode 100644
index 11c2f2d3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicator.module.scss'
-
-const ScaleIndicator = ({ scale }) => (
-    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
-        {TILE_SIZE_IN_METERS}m
-    </div>
-)
-
-ScaleIndicator.propTypes = {
-    scale: PropTypes.number.isRequired,
-}
-
-export default ScaleIndicator
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
deleted file mode 100644
index f19e0ff2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.scaleIndicator {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    z-index: 50;
-
-    border: solid 2px #212529;
-    border-top: none;
-    border-left: none;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
deleted file mode 100644
index 4c60bfb2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
-import { Button } from '@patternfly/react-core'
-import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCamera } from '@fortawesome/free-solid-svg-icons'
-
-const Toolbar = ({ onZoom, onExport }) => (
-    <div className={toolBar}>
-        <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
-            <SearchPlusIcon />
-        </Button>
-        <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
-            <SearchMinusIcon />
-        </Button>
-        <Button variant="tertiary" title="Export Canvas to PNG Image" onClick={() => onExport()} className={control}>
-            <FontAwesomeIcon icon={faCamera} />
-        </Button>
-    </div>
-)
-
-Toolbar.propTypes = {
-    onZoom: PropTypes.func,
-    onExport: PropTypes.func,
-}
-
-export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
deleted file mode 100644
index 0d505acc..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.toolBar {
-    position: absolute;
-    bottom: var(--pf-global--spacer--md);
-    left: var(--pf-global--spacer--xl);
-}
-
-.control {
-    &:global(.pf-m-tertiary) {
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
deleted file mode 100644
index 8ccfe584..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { Rect } from 'react-konva'
-import { BACKDROP_COLOR } from '../../../../util/colors'
-import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
-
-const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
-
-export default Backdrop
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
deleted file mode 100644
index 35af4d96..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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'
-
-const GrayLayer = ({ onClick }) => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={GRAYED_OUT_AREA_COLOR}
-        onClick={onClick}
-    />
-)
-
-GrayLayer.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
deleted file mode 100644
index 0369bb79..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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'
-
-const HoverTile = ({ x, y, isValid, scale = 1, onClick }) => (
-    <Rect
-        x={x}
-        y={y}
-        scaleX={scale}
-        scaleY={scale}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-        onClick={onClick}
-    />
-)
-
-HoverTile.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    isValid: PropTypes.bool.isRequired,
-    scale: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default HoverTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
deleted file mode 100644
index 7d304b6b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-import { Image } from 'react-konva'
-
-const imageCaches = {}
-
-function ImageComponent({ src, x, y, width, height, opacity }) {
-    const [image, setImage] = useState(null)
-
-    useEffect(() => {
-        if (imageCaches[src]) {
-            setImage(imageCaches[src])
-            return
-        }
-
-        const image = new window.Image()
-        image.src = src
-        image.onload = () => {
-            setImage(image)
-            imageCaches[src] = image
-        }
-    }, [src])
-
-    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
-}
-
-ImageComponent.propTypes = {
-    src: PropTypes.string.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    opacity: PropTypes.number.isRequired,
-}
-
-export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
deleted file mode 100644
index aa284944..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group, Rect } from 'react-konva'
-import {
-    RACK_ENERGY_BAR_BACKGROUND_COLOR,
-    RACK_ENERGY_BAR_FILL_COLOR,
-    RACK_SPACE_BAR_BACKGROUND_COLOR,
-    RACK_SPACE_BAR_FILL_COLOR,
-} from '../../../../util/colors'
-import {
-    OBJECT_BORDER_WIDTH_IN_PIXELS,
-    OBJECT_MARGIN_IN_PIXELS,
-    RACK_FILL_ICON_OPACITY,
-    RACK_FILL_ICON_WIDTH,
-    TILE_SIZE_IN_PIXELS,
-} from '../MapConstants'
-import ImageComponent from './ImageComponent'
-
-function RackFillBar({ positionX, positionY, type, fillFraction }) {
-    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
-    const x =
-        positionX * TILE_SIZE_IN_PIXELS +
-        OBJECT_MARGIN_IN_PIXELS +
-        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
-    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
-    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
-    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
-
-    const fractionHeight = fillFraction * fullHeight
-    const fractionY =
-        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
-
-    return (
-        <Group>
-            <Rect
-                x={x}
-                y={startY}
-                width={width}
-                height={fullHeight}
-                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
-            />
-            <Rect
-                x={x}
-                y={fractionY}
-                width={width}
-                height={fractionHeight}
-                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
-            />
-            <ImageComponent
-                src={'/img/topology/rack-' + type + '-icon.png'}
-                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                width={RACK_FILL_ICON_WIDTH}
-                height={RACK_FILL_ICON_WIDTH}
-                opacity={RACK_FILL_ICON_OPACITY}
-            />
-        </Group>
-    )
-}
-
-RackFillBar.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    type: PropTypes.string.isRequired,
-    fillFraction: PropTypes.number.isRequired,
-}
-
-export default RackFillBar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
deleted file mode 100644
index ed718601..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const RoomTile = ({ tile, color }) => (
-    <Rect
-        x={tile.positionX * TILE_SIZE_IN_PIXELS}
-        y={tile.positionY * TILE_SIZE_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={color}
-    />
-)
-
-RoomTile.propTypes = {
-    tile: Tile,
-    color: PropTypes.string,
-}
-
-export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
deleted file mode 100644
index 9e87cc82..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
-import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const TileObject = ({ positionX, positionY, color }) => (
-    <Rect
-        x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        fill={color}
-        stroke={OBJECT_BORDER_COLOR}
-        strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
-    />
-)
-
-TileObject.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-}
-
-export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
deleted file mode 100644
index 186c2b3a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group, Line } from 'react-konva'
-import { TILE_PLUS_COLOR } from '../../../../util/colors'
-import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-function TilePlusIcon({ x, y, scale = 1 }) {
-    const linePoints = [
-        [
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-        ],
-        [
-            x + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            x + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-        ],
-    ]
-    return (
-        <Group>
-            {linePoints.map((points, index) => (
-                <Line
-                    key={index}
-                    points={points}
-                    lineCap="round"
-                    stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
-                    listening={false}
-                />
-            ))}
-        </Group>
-    )
-}
-
-TilePlusIcon.propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    scale: PropTypes.number,
-}
-
-export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
deleted file mode 100644
index ad6412c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
+++ /dev/null
@@ -1,32 +0,0 @@
-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'
-
-const WallSegment = ({ wallSegment }) => {
-    let points
-    if (wallSegment.isHorizontal) {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-        ]
-    } else {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-        ]
-    }
-
-    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
-}
-
-WallSegment.propTypes = {
-    wallSegment: WallSegmentShape,
-}
-
-export default WallSegment
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
deleted file mode 100644
index ebc00244..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
+++ /dev/null
@@ -1,34 +0,0 @@
-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,
-])
-
-const GridGroup = () => (
-    <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
-            <Line
-                key={index}
-                points={points}
-                stroke={GRID_COLOR}
-                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
-                listening={false}
-            />
-        ))}
-    </Group>
-)
-
-export default GridGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
deleted file mode 100644
index 9c4abc4a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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'
-
-const RackGroup = ({ tile }) => {
-    return (
-        <Group>
-            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
-            <Group>
-                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
-                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
-            </Group>
-        </Group>
-    )
-}
-
-RackGroup.propTypes = {
-    tile: Tile,
-}
-
-export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
deleted file mode 100644
index a14f3676..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ /dev/null
@@ -1,52 +0,0 @@
-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'
-
-const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
-    if (currentRoomInConstruction === room._id) {
-        return (
-            <Group onClick={onClick}>
-                {room.tiles.map((tileId) => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
-                ))}
-            </Group>
-        )
-    }
-
-    return (
-        <Group onClick={onClick}>
-            {(() => {
-                if (
-                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
-                    interactionLevel.roomId === room._id
-                ) {
-                    return [
-                        room.tiles
-                            .filter((tileId) => tileId !== interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                        <GrayContainer key={-1} />,
-                        room.tiles
-                            .filter((tileId) => tileId === interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                    ]
-                } else {
-                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
-                }
-            })()}
-            <WallContainer roomId={room._id} />
-        </Group>
-    )
-}
-
-RoomGroup.propTypes = {
-    room: Room,
-    interactionLevel: InteractionLevel,
-    currentRoomInConstruction: PropTypes.string,
-    onClick: PropTypes.func,
-}
-
-export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
deleted file mode 100644
index cd36c7e5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ /dev/null
@@ -1,36 +0,0 @@
-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'
-
-const TileGroup = ({ tile, newTile, onClick }) => {
-    let tileObject
-    if (tile.rack) {
-        tileObject = <RackContainer tile={tile} />
-    } else {
-        tileObject = null
-    }
-
-    let color = ROOM_DEFAULT_COLOR
-    if (newTile) {
-        color = ROOM_IN_CONSTRUCTION_COLOR
-    }
-
-    return (
-        <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color} />
-            {tileObject}
-        </Group>
-    )
-}
-
-TileGroup.propTypes = {
-    tile: Tile,
-    newTile: PropTypes.bool,
-    onClick: PropTypes.func,
-}
-
-export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
deleted file mode 100644
index d3bcb279..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Group } from 'react-konva'
-import { InteractionLevel, Topology } from '../../../../shapes'
-import RoomContainer from '../RoomContainer'
-import GrayContainer from '../GrayContainer'
-
-const TopologyGroup = ({ topology, interactionLevel }) => {
-    if (!topology) {
-        return <Group />
-    }
-
-    if (interactionLevel.mode === 'BUILDING') {
-        return (
-            <Group>
-                {topology.rooms.map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            </Group>
-        )
-    }
-
-    return (
-        <Group>
-            {topology.rooms
-                .filter((roomId) => roomId !== interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
-            {topology.rooms
-                .filter((roomId) => roomId === interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-        </Group>
-    )
-}
-
-TopologyGroup.propTypes = {
-    topology: Topology,
-    interactionLevel: InteractionLevel,
-}
-
-export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
deleted file mode 100644
index c73a95a7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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'
-
-const WallGroup = ({ tiles }) => {
-    return (
-        <Group>
-            {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment} />
-            ))}
-        </Group>
-    )
-}
-
-WallGroup.propTypes = {
-    tiles: PropTypes.arrayOf(Tile).isRequired,
-}
-
-export default WallGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
deleted file mode 100644
index 2b1060c0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useMemo, useState } from 'react'
-import { Layer } from 'react-konva/lib/ReactKonva'
-import HoverTile from '../elements/HoverTile'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { useEffectRef } from '../../../../util/effect-ref'
-
-function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
-    const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
-
-    const layerRef = useEffectRef((layer) => {
-        if (!layer) {
-            return
-        }
-
-        const stage = layer.getStage()
-
-        // Transform used to convert mouse coordinates to world coordinates
-        const transform = stage.getAbsoluteTransform().copy()
-        transform.invert()
-
-        stage.on('mousemove.hover', () => {
-            const { x, y } = transform.point(stage.getPointerPosition())
-            setPos([x, y])
-        })
-        return () => stage.off('mousemove.hover')
-    })
-
-    const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
-    const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
-    const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
-
-    if (!isEnabled) {
-        return <Layer />
-    }
-
-    const x = gridX * TILE_SIZE_IN_PIXELS
-    const y = gridY * TILE_SIZE_IN_PIXELS
-
-    return (
-        <Layer opacity={0.6} ref={layerRef}>
-            <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
-            {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
-        </Layer>
-    )
-}
-
-HoverLayerComponent.propTypes = {
-    isEnabled: PropTypes.bool.isRequired,
-    isValid: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired,
-    children: PropTypes.node,
-}
-
-export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
deleted file mode 100644
index c902532b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { Group, Layer } from 'react-konva'
-import Backdrop from '../elements/Backdrop'
-import TopologyContainer from '../TopologyContainer'
-import GridGroup from '../groups/GridGroup'
-
-function MapLayer() {
-    return (
-        <Layer>
-            <Group>
-                <Backdrop />
-                <TopologyContainer />
-                <GridGroup />
-            </Group>
-        </Layer>
-    )
-}
-
-export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
deleted file mode 100644
index 47d9c992..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addRackToTile } from '../../../../redux/actions/topology/room'
-import { findTileWithPosition } from '../../../../util/tile-calculations'
-import HoverLayerComponent from './HoverLayerComponent'
-import TilePlusIcon from '../elements/TilePlusIcon'
-
-function ObjectHoverLayer() {
-    const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
-    const isValid = useSelector((state) => (x, y) => {
-        if (state.interactionLevel.mode !== 'ROOM') {
-            return false
-        }
-
-        const currentRoom = state.objects.room[state.interactionLevel.roomId]
-        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
-        const tile = findTileWithPosition(tiles, x, y)
-
-        return !(tile === null || tile.rack)
-    })
-
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(addRackToTile(x, y))
-    return (
-        <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid}>
-            <TilePlusIcon />
-        </HoverLayerComponent>
-    )
-}
-
-export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
deleted file mode 100644
index 59f83b2b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
-import {
-    deriveValidNextTilePositions,
-    findPositionInPositions,
-    findPositionInRooms,
-} from '../../../../util/tile-calculations'
-import HoverLayerComponent from './HoverLayerComponent'
-
-function RoomHoverLayer() {
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
-    const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-    const isValid = useSelector((state) => (x, y) => {
-        const newRoom = { ...state.objects.room[state.construction.currentRoomInConstruction] }
-        const oldRooms = Object.keys(state.objects.room)
-            .map((id) => ({ ...state.objects.room[id] }))
-            .filter(
-                (room) =>
-                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
-                    room._id !== state.construction.currentRoomInConstruction
-            )
-
-        ;[...oldRooms, newRoom].forEach((room) => {
-            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
-        })
-        if (newRoom.tiles.length === 0) {
-            return findPositionInRooms(oldRooms, x, y) === -1
-        }
-
-        const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-        return findPositionInPositions(validNextPositions, x, y) !== -1
-    })
-
-    return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
-}
-
-export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
deleted file mode 100644
index 09348e60..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResultInfo.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { Tooltip } from '@patternfly/react-core'
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
-import { METRIC_DESCRIPTIONS } from '../../../util/available-metrics'
-
-function PortfolioResultInfo({ metric }) {
-    return (
-        <Tooltip position="top" content={<div>{METRIC_DESCRIPTIONS[metric]}</div>}>
-            <OutlinedQuestionCircleIcon title="Metric information" />
-        </Tooltip>
-    )
-}
-
-PortfolioResultInfo.propTypes = {
-    metric: PropTypes.string.isRequired,
-}
-
-export default PortfolioResultInfo
diff --git a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
deleted file mode 100644
index 6a96c70c..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/results/PortfolioResults.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
-import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_NAMES_SHORT, METRIC_UNITS } from '../../../util/available-metrics'
-import { mean, std } from 'mathjs'
-import approx from 'approximate-number'
-import {
-    Bullseye,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    EmptyState,
-    EmptyStateBody,
-    EmptyStateIcon,
-    Grid,
-    GridItem,
-    Spinner,
-    Title,
-} from '@patternfly/react-core'
-import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
-import { usePortfolioScenarios } from '../../../data/project'
-import NewScenario from '../../projects/NewScenario'
-import PortfolioResultInfo from './PortfolioResultInfo'
-
-const PortfolioResults = ({ portfolioId }) => {
-    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
-
-    if (status === 'loading') {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={Spinner} />
-                    <Title size="lg" headingLevel="h4">
-                        Loading Results
-                    </Title>
-                </EmptyState>
-            </Bullseye>
-        )
-    } else if (status === 'error') {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={ErrorCircleOIcon} />
-                    <Title size="lg" headingLevel="h4">
-                        Unable to connect
-                    </Title>
-                    <EmptyStateBody>
-                        There was an error retrieving data. Check your connection and try again.
-                    </EmptyStateBody>
-                </EmptyState>
-            </Bullseye>
-        )
-    } else if (scenarios.length === 0) {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={CubesIcon} />
-                    <Title size="lg" headingLevel="h4">
-                        No results
-                    </Title>
-                    <EmptyStateBody>
-                        No results are currently available for this portfolio. Run a scenario to obtain simulation
-                        results.
-                    </EmptyStateBody>
-                    <NewScenario portfolioId={portfolioId} />
-                </EmptyState>
-            </Bullseye>
-        )
-    }
-
-    const dataPerMetric = {}
-
-    AVAILABLE_METRICS.forEach((metric) => {
-        dataPerMetric[metric] = scenarios
-            .filter((scenario) => scenario.results)
-            .map((scenario) => ({
-                name: scenario.name,
-                value: mean(scenario.results[metric]),
-                errorX: std(scenario.results[metric]),
-            }))
-    })
-
-    return (
-        <Grid hasGutter>
-            {AVAILABLE_METRICS.map((metric) => (
-                <GridItem xl={6} lg={12} key={metric}>
-                    <Card>
-                        <CardHeader>
-                            <CardActions>
-                                <PortfolioResultInfo metric={metric} />
-                            </CardActions>
-                            <CardTitle>{METRIC_NAMES[metric]}</CardTitle>
-                        </CardHeader>
-                        <CardBody>
-                            <ResponsiveContainer aspect={16 / 9} width="100%">
-                                <ComposedChart
-                                    data={dataPerMetric[metric]}
-                                    margin={{ left: 35, bottom: 15 }}
-                                    layout="vertical"
-                                >
-                                    <CartesianGrid strokeDasharray="3 3" />
-                                    <XAxis
-                                        tickFormatter={(tick) => approx(tick)}
-                                        label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
-                                        type="number"
-                                    />
-                                    <YAxis dataKey="name" type="category" />
-                                    <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
-                                    <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
-                                        <ErrorBar
-                                            dataKey="errorX"
-                                            width={10}
-                                            strokeWidth={3}
-                                            stroke="#FF6600"
-                                            direction="x"
-                                        />
-                                    </Scatter>
-                                </ComposedChart>
-                            </ResponsiveContainer>
-                        </CardBody>
-                    </Card>
-                </GridItem>
-            ))}
-        </Grid>
-    )
-}
-
-PortfolioResults.propTypes = {
-    portfolioId: PropTypes.string,
-}
-
-export default PortfolioResults
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
deleted file mode 100644
index ececd07b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/NameComponent.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import { Button, TextInput } from '@patternfly/react-core'
-import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
-
-function NameComponent({ name, onEdit }) {
-    const [isEditing, setEditing] = useState(false)
-    const nameInput = useRef(null)
-
-    const onCancel = () => {
-        nameInput.current.value = name
-        setEditing(false)
-    }
-
-    const onSubmit = (event) => {
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-        if (name) {
-            onEdit(name)
-        }
-
-        setEditing(false)
-    }
-
-    return (
-        <form
-            className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
-            onSubmit={onSubmit}
-        >
-            <div className="pf-c-inline-edit__group">
-                <div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
-                    {name}
-                </div>
-                <div className="pf-c-inline-edit__action pf-m-enable-editable">
-                    <Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
-                        <PencilAltIcon />
-                    </Button>
-                </div>
-            </div>
-            <div className="pf-c-inline-edit__group">
-                <div className="pf-c-inline-edit__input">
-                    <TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
-                </div>
-                <div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
-                    <div className="pf-c-inline-edit__action pf-m-valid">
-                        <Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
-                            <CheckIcon />
-                        </Button>
-                    </div>
-                    <div className="pf-c-inline-edit__action">
-                        <Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
-                            <TimesIcon />
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </form>
-    )
-}
-
-NameComponent.propTypes = {
-    name: PropTypes.string,
-    onEdit: PropTypes.func,
-}
-
-export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
deleted file mode 100644
index 564f4030..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { InteractionLevel } from '../../../../shapes'
-import 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 { goDownOneInteractionLevel } from '../../../../redux/actions/interaction-level'
-import { backButton } from './TopologySidebar.module.scss'
-import RoomSidebar from './room/RoomSidebar'
-import RackSidebar from './rack/RackSidebar'
-import MachineSidebar from './machine/MachineSidebar'
-
-const name = {
-    BUILDING: 'Building',
-    ROOM: 'Room',
-    RACK: 'Rack',
-    MACHINE: 'Machine',
-}
-
-function TopologySidebar({ interactionLevel, onClose }) {
-    let sidebarContent
-
-    switch (interactionLevel.mode) {
-        case 'BUILDING':
-            sidebarContent = <BuildingSidebar />
-            break
-        case 'ROOM':
-            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
-            break
-        case 'RACK':
-            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
-            break
-        case 'MACHINE':
-            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
-            break
-        default:
-            sidebarContent = 'Missing Content'
-    }
-
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-
-    return (
-        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
-            <DrawerHead>
-                <Flex>
-                    <Button
-                        variant="tertiary"
-                        isSmall
-                        className={backButton}
-                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
-                    >
-                        <AngleLeftIcon />
-                    </Button>
-                    <Title className="pf-u-align-self-center" headingLevel="h1">
-                        {name[interactionLevel.mode]}
-                    </Title>
-                </Flex>
-                <DrawerActions>
-                    <DrawerCloseButton onClose={onClose} />
-                </DrawerActions>
-            </DrawerHead>
-            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
-        </DrawerPanelContent>
-    )
-}
-
-TopologySidebar.propTypes = {
-    interactionLevel: InteractionLevel,
-    onClose: PropTypes.func,
-}
-
-export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
deleted file mode 100644
index 45dc98da..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/TopologySidebar.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.backButton {
-    &:global(.pf-c-button) {
-        align-self: center;
-        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
-        color: var(--pf-global--Color--400);
-
-        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
-        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
-
-        &:hover,
-        &:focus {
-            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
deleted file mode 100644
index 5fcd46be..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/BuildingSidebar.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import NewRoomConstructionContainer from './NewRoomConstructionContainer'
-
-function BuildingSidebar() {
-    return <NewRoomConstructionContainer />
-}
-
-export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
deleted file mode 100644
index 9fc85d0c..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
-import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
-import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
-
-function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
-    if (currentRoomInConstruction === '-1') {
-        return (
-            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
-                Construct a new room
-            </Button>
-        )
-    }
-    return (
-        <Toolbar
-            inset={{
-                default: 'insetNone',
-            }}
-        >
-            <ToolbarContent>
-                <ToolbarGroup>
-                    <ToolbarItem>
-                        <Button icon={<CheckIcon />} onClick={onFinish}>
-                            Finalize new room
-                        </Button>
-                    </ToolbarItem>
-                    <ToolbarItem widths={{ default: '100%' }}>
-                        <Button isBlock variant="secondary" onClick={onCancel}>
-                            Cancel
-                        </Button>
-                    </ToolbarItem>
-                </ToolbarGroup>
-            </ToolbarContent>
-        </Toolbar>
-    )
-}
-
-NewRoomConstructionComponent.propTypes = {
-    onStart: PropTypes.func,
-    onFinish: PropTypes.func,
-    onCancel: PropTypes.func,
-    currentRoomInConstruction: PropTypes.string,
-}
-
-export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
deleted file mode 100644
index 5b031a6b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/building/NewRoomConstructionContainer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-    cancelNewRoomConstruction,
-    finishNewRoomConstruction,
-    startNewRoomConstruction,
-} from '../../../../../redux/actions/topology/building'
-import NewRoomConstructionComponent from './NewRoomConstructionComponent'
-
-function NewRoomConstructionButton(props) {
-    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
-
-    const dispatch = useDispatch()
-    const actions = {
-        onStart: () => dispatch(startNewRoomConstruction()),
-        onFinish: () => dispatch(finishNewRoomConstruction()),
-        onCancel: () => dispatch(cancelNewRoomConstruction()),
-    }
-    return (
-        <NewRoomConstructionComponent {...props} {...actions} currentRoomInConstruction={currentRoomInConstruction} />
-    )
-}
-
-export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
deleted file mode 100644
index 75d458b6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { deleteMachine } from '../../../../../redux/actions/topology/machine'
-import { Button } from '@patternfly/react-core'
-import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
-import ConfirmationModal from '../../../../modals/ConfirmationModal'
-
-function DeleteMachine() {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-    const position = useSelector((state) => state.interactionLevel.position)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine(rackId, position))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this machine
-            </Button>
-            <ConfirmationModal
-                title="Delete this machine"
-                message="Are you sure you want to delete this machine?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
deleted file mode 100644
index 0c3dea98..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebar.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import UnitTabsComponent from './UnitTabsComponent'
-import DeleteMachine from './DeleteMachine'
-import {
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-import { useSelector } from 'react-redux'
-
-function MachineSidebar({ tileId, position }) {
-    const machine = useSelector(({ objects }) => {
-        const rack = objects.rack[objects.tile[tileId].rack]
-        return objects.machine[rack.machines[position - 1]]
-    })
-    const machineId = machine._id
-    return (
-        <div>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        Machine at position {machine.position}
-                    </TextListItem>
-                </TextList>
-
-                <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
-
-                <Title headingLevel="h2">Units</Title>
-            </TextContent>
-            <div className="pf-u-h-100">
-                <UnitTabsComponent machineId={machineId} />
-            </div>
-        </div>
-    )
-}
-
-MachineSidebar.propTypes = {
-    tileId: PropTypes.string.isRequired,
-    position: PropTypes.number.isRequired,
-}
-
-export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
deleted file mode 100644
index 88591208..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
-import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
-
-function UnitAddComponent({ units, onAdd }) {
-    const [isOpen, setOpen] = useState(false)
-    const [selected, setSelected] = useState(null)
-
-    return (
-        <InputGroup>
-            <Select
-                variant={SelectVariant.single}
-                placeholderText="Select a unit"
-                aria-label="Select Unit"
-                onToggle={() => setOpen(!isOpen)}
-                isOpen={isOpen}
-                onSelect={(_, selection) => {
-                    setSelected(selection)
-                    setOpen(false)
-                }}
-                selections={selected}
-            >
-                {units.map((unit) => (
-                    <SelectOption value={unit._id} key={unit._id}>
-                        {unit.name}
-                    </SelectOption>
-                ))}
-            </Select>
-            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
-                Add
-            </Button>
-        </InputGroup>
-    )
-}
-
-UnitAddComponent.propTypes = {
-    units: PropTypes.array.isRequired,
-    onAdd: PropTypes.func.isRequired,
-}
-
-export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
deleted file mode 100644
index cc226d46..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addUnit } from '../../../../../redux/actions/topology/machine'
-import UnitAddComponent from './UnitAddComponent'
-
-function UnitAddContainer({ machineId, unitType }) {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
-    const dispatch = useDispatch()
-
-    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
-
-    return <UnitAddComponent onAdd={onAdd} units={units} />
-}
-
-UnitAddContainer.propTypes = {
-    machineId: PropTypes.string.isRequired,
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
deleted file mode 100644
index 16ebd708..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
-import {
-    Button,
-    DataList,
-    DataListAction,
-    DataListCell,
-    DataListItem,
-    DataListItemCells,
-    DataListItemRow,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
-    EmptyState,
-    EmptyStateBody,
-    EmptyStateIcon,
-    Popover,
-    Title,
-} from '@patternfly/react-core'
-import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
-
-function UnitInfo({ unit, unitType }) {
-    if (unitType === 'cpu' || unitType === 'gpu') {
-        return (
-            <DescriptionList>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
-                </DescriptionListGroup>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
-                </DescriptionListGroup>
-                <DescriptionListGroup>
-                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
-                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
-                </DescriptionListGroup>
-            </DescriptionList>
-        )
-    }
-
-    return (
-        <DescriptionList>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Speed</DescriptionListTerm>
-                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Capacity</DescriptionListTerm>
-                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
-                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
-            </DescriptionListGroup>
-        </DescriptionList>
-    )
-}
-
-UnitInfo.propTypes = {
-    unitType: PropTypes.string.isRequired,
-    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
-}
-
-function UnitListComponent({ unitType, units, onDelete }) {
-    if (units.length === 0) {
-        return (
-            <EmptyState>
-                <EmptyStateIcon icon={CubesIcon} />
-                <Title headingLevel="h5" size="lg">
-                    No units found
-                </Title>
-                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
-            </EmptyState>
-        )
-    }
-
-    return (
-        <DataList aria-label="Machine Units" isCompact>
-            {units.map((unit, index) => (
-                <DataListItem key={index}>
-                    <DataListItemRow>
-                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
-                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
-                            <Popover
-                                headerContent="Unit Information"
-                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
-                            >
-                                <Button isSmall variant="plain" className="pf-u-p-0">
-                                    <InfoIcon />
-                                </Button>
-                            </Popover>
-                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
-                                <TrashIcon />
-                            </Button>
-                        </DataListAction>
-                    </DataListItemRow>
-                </DataListItem>
-            ))}
-        </DataList>
-    )
-}
-
-UnitListComponent.propTypes = {
-    unitType: PropTypes.string.isRequired,
-    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
-    onDelete: PropTypes.func,
-}
-
-export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
deleted file mode 100644
index f76684a5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import UnitListComponent from './UnitListComponent'
-import { deleteUnit } from '../../../../../redux/actions/topology/machine'
-
-const unitMapping = {
-    cpu: 'cpus',
-    gpu: 'gpus',
-    memory: 'memories',
-    storage: 'storages',
-}
-
-function UnitListContainer({ machineId, unitType }) {
-    const dispatch = useDispatch()
-    const units = useSelector((state) => {
-        const machine = state.objects.machine[machineId]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
-    })
-
-    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
-
-    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
-}
-
-UnitListContainer.propTypes = {
-    machineId: PropTypes.string.isRequired,
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
deleted file mode 100644
index 6d10d2df..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
-import UnitAddContainer from './UnitAddContainer'
-import UnitListContainer from './UnitListContainer'
-
-function UnitTabsComponent({ machineId }) {
-    const [activeTab, setActiveTab] = useState('cpu-units')
-
-    return (
-        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
-            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="cpu" />
-                <UnitListContainer machineId={machineId} unitType="cpu" />
-            </Tab>
-            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="gpu" />
-                <UnitListContainer machineId={machineId} unitType="gpu" />
-            </Tab>
-            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="memory" />
-                <UnitListContainer machineId={machineId} unitType="memory" />
-            </Tab>
-            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="storage" />
-                <UnitListContainer machineId={machineId} unitType="storage" />
-            </Tab>
-        </Tabs>
-    )
-}
-
-UnitTabsComponent.propTypes = {
-    machineId: PropTypes.string.isRequired,
-}
-
-export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
deleted file mode 100644
index 3af46861..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/AddPrefab.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { addPrefab } from '../../../../../redux/actions/prefabs'
-import { Button } from '@patternfly/react-core'
-import { SaveIcon } from '@patternfly/react-icons'
-
-function AddPrefab({ tileId }) {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(addPrefab('name', tileId))
-    return (
-        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
-            Save this rack to a prefab
-        </Button>
-    )
-}
-
-AddPrefab.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
deleted file mode 100644
index f0dc7b6b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/DeleteRackContainer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRack } from '../../../../../redux/actions/topology/rack'
-import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
-import { Button } from '@patternfly/react-core'
-
-function DeleteRackContainer({ tileId }) {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack(tileId))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this rack
-            </Button>
-            <ConfirmationModal
-                title="Delete this rack"
-                message="Are you sure you want to delete this rack?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-DeleteRackContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
deleted file mode 100644
index 97141711..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Image from 'next/image'
-import { Machine } from '../../../../../shapes'
-import { Flex, Label } from '@patternfly/react-core'
-
-const UnitIcon = ({ id, type }) => (
-    <Image
-        src={'/img/topology/' + id + '-icon.png'}
-        alt={'Machine contains ' + type + ' units'}
-        layout="intrinsic"
-        height={24}
-        width={24}
-    />
-)
-
-UnitIcon.propTypes = {
-    id: PropTypes.string,
-    type: PropTypes.string,
-}
-
-function MachineComponent({ machine, onClick }) {
-    const hasNoUnits =
-        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
-
-    return (
-        <Flex onClick={() => onClick()}>
-            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
-            {hasNoUnits ? (
-                <Label variant="outline" color="orange">
-                    Machine with no units
-                </Label>
-            ) : undefined}
-        </Flex>
-    )
-}
-
-MachineComponent.propTypes = {
-    machine: Machine.isRequired,
-    onClick: PropTypes.func,
-}
-
-export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
deleted file mode 100644
index 27834cf4..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import MachineComponent from './MachineComponent'
-import { Machine } from '../../../../../shapes'
-import {
-    Badge,
-    Button,
-    DataList,
-    DataListAction,
-    DataListCell,
-    DataListItem,
-    DataListItemCells,
-    DataListItemRow,
-} from '@patternfly/react-core'
-import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
-
-function MachineListComponent({ machines = [], onSelect, onAdd }) {
-    return (
-        <DataList aria-label="Rack Units">
-            {machines.map((machine, index) =>
-                machine ? (
-                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="primary content">
-                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
-                                <Button isSmall variant="plain" className="pf-u-p-0">
-                                    <AngleRightIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
-                ) : (
-                    <DataListItem key={index}>
-                        <DataListItemRow>
-                            <DataListItemCells
-                                dataListCells={[
-                                    <DataListCell isIcon key="icon">
-                                        <Badge isRead>{machines.length - index}U</Badge>
-                                    </DataListCell>,
-                                    <DataListCell key="add" className="text-secondary">
-                                        Empty Slot
-                                    </DataListCell>,
-                                ]}
-                            />
-                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
-                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
-                                    <PlusIcon />
-                                </Button>
-                            </DataListAction>
-                        </DataListItemRow>
-                    </DataListItem>
-                )
-            )}
-        </DataList>
-    )
-}
-
-MachineListComponent.propTypes = {
-    machines: PropTypes.arrayOf(Machine),
-    onSelect: PropTypes.func.isRequired,
-    onAdd: PropTypes.func.isRequired,
-}
-
-export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
deleted file mode 100644
index 3ed0ffd0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListContainer.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React, { useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import MachineListComponent from './MachineListComponent'
-import { goFromRackToMachine } from '../../../../../redux/actions/interaction-level'
-import { addMachine } from '../../../../../redux/actions/topology/rack'
-
-function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
-    const machinesNull = useMemo(() => {
-        const res = Array(rack.capacity).fill(null)
-        for (const machine of machines) {
-            res[machine.position - 1] = machine
-        }
-        return res
-    }, [rack, machines])
-    const dispatch = useDispatch()
-
-    return (
-        <MachineListComponent
-            {...props}
-            machines={machinesNull}
-            onAdd={(index) => dispatch(addMachine(rack._id, index))}
-            onSelect={(index) => dispatch(goFromRackToMachine(index))}
-        />
-    )
-}
-
-MachineListContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
deleted file mode 100644
index 11db6420..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackNameContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../NameComponent'
-import { editRackName } from '../../../../../redux/actions/topology/rack'
-
-const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(_id, name))
-        }
-    }
-    return <NameComponent name={rackName} onEdit={callback} />
-}
-
-RackNameContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
deleted file mode 100644
index 3c9f152a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
-import RackNameContainer from './RackNameContainer'
-import AddPrefab from './AddPrefab'
-import DeleteRackContainer from './DeleteRackContainer'
-import MachineListContainer from './MachineListContainer'
-import {
-    Skeleton,
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-import { useSelector } from 'react-redux'
-
-function RackSidebar({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-
-    return (
-        <div className={sidebarContainer}>
-            <TextContent>
-                <Title headingLevel="h2">Details</Title>
-                <TextList component={TextListVariants.dl}>
-                    <TextListItem
-                        component={TextListItemVariants.dt}
-                        className="pf-u-display-inline-flex pf-u-align-items-center"
-                    >
-                        Name
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        <RackNameContainer tileId={tileId} />
-                    </TextListItem>
-                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
-                    <TextListItem component={TextListItemVariants.dd}>
-                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
-                    </TextListItem>
-                </TextList>
-                <Title headingLevel="h2">Actions</Title>
-                <AddPrefab tileId={tileId} />
-                <DeleteRackContainer tileId={tileId} />
-
-                <Title headingLevel="h2">Slots</Title>
-            </TextContent>
-            <div className={machineListContainer}>
-                <MachineListContainer tileId={tileId} />
-            </div>
-        </div>
-    )
-}
-
-RackSidebar.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
deleted file mode 100644
index 6f258aec..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/RackSidebar.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.sidebarContainer {
-    display: flex;
-    height: 100%;
-    max-height: 100%;
-    flex-direction: column;
-}
-
-.machineListContainer {
-    flex: 1;
-    overflow-y: scroll;
-    margin-top: 10px;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
deleted file mode 100644
index 19a782a6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/DeleteRoomContainer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
-import ConfirmationModal from '../../../../../components/modals/ConfirmationModal'
-import { deleteRoom } from '../../../../../redux/actions/topology/room'
-import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
-import { Button } from '@patternfly/react-core'
-
-function DeleteRoomContainer({ roomId }) {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRoom(roomId))
-        }
-        setVisible(false)
-    }
-    return (
-        <>
-            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
-                Delete this room
-            </Button>
-            <ConfirmationModal
-                title="Delete this room"
-                message="Are you sure you want to delete this room?"
-                isOpen={isVisible}
-                callback={callback}
-            />
-        </>
-    )
-}
-
-DeleteRoomContainer.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
deleted file mode 100644
index 96c077cb..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/EditRoomContainer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { finishRoomEdit, startRoomEdit } from '../../../../../redux/actions/topology/building'
-import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
-import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
-import { Button } from '@patternfly/react-core'
-
-function EditRoomContainer({ roomId }) {
-    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
-
-    const dispatch = useDispatch()
-    const onEdit = () => dispatch(startRoomEdit(roomId))
-    const onFinish = () => dispatch(finishRoomEdit())
-
-    return isEditing ? (
-        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
-            Finish editing room
-        </Button>
-    ) : (
-        <Button
-            variant="tertiary"
-            icon={<PencilAltIcon />}
-            isBlock
-            disabled={isInRackConstructionMode}
-            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-            className="pf-u-mb-sm"
-        >
-            Edit the tiles of this room
-        </Button>
-    )
-}
-
-EditRoomContainer.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
deleted file mode 100644
index 13432689..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Button } from '@patternfly/react-core'
-import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
-import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'
-
-const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
-    if (inRackConstructionMode) {
-        return (
-            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
-                Stop rack construction
-            </Button>
-        )
-    }
-
-    return (
-        <Button
-            icon={<PlusIcon />}
-            isBlock
-            isDisabled={isEditingRoom}
-            onClick={() => (isEditingRoom ? undefined : onStart())}
-            className="pf-u-mb-sm"
-        >
-            Start rack construction
-        </Button>
-    )
-}
-
-RackConstructionComponent.propTypes = {
-    onStart: PropTypes.func,
-    onStop: PropTypes.func,
-    inRackConstructionMode: PropTypes.bool,
-    isEditingRoom: PropTypes.bool,
-}
-
-export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
deleted file mode 100644
index b9ab6610..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RackConstructionContainer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { startRackConstruction, stopRackConstruction } from '../../../../../redux/actions/topology/room'
-import RackConstructionComponent from './RackConstructionComponent'
-
-function RackConstructionContainer(props) {
-    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
-    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-
-    const dispatch = useDispatch()
-    const onStart = () => dispatch(startRackConstruction())
-    const onStop = () => dispatch(stopRackConstruction())
-    return (
-        <RackConstructionComponent
-            {...props}
-            inRackConstructionMode={isRackConstructionMode}
-            isEditingRoom={isEditingRoom}
-            onStart={onStart}
-            onStop={onStop}
-        />
-    )
-}
-
-export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
deleted file mode 100644
index 11909189..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomName.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NameComponent from '../../../../../components/app/sidebars/topology/NameComponent'
-import { editRoomName } from '../../../../../redux/actions/topology/room'
-
-function RoomName({ roomId }) {
-    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRoomName(_id, name))
-        }
-    }
-    return <NameComponent name={roomName} onEdit={callback} />
-}
-
-RoomName.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default RoomName
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
deleted file mode 100644
index 6ad489e0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/room/RoomSidebar.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import RoomName from './RoomName'
-import RackConstructionContainer from './RackConstructionContainer'
-import EditRoomContainer from './EditRoomContainer'
-import DeleteRoomContainer from './DeleteRoomContainer'
-import {
-    TextContent,
-    TextList,
-    TextListItem,
-    TextListItemVariants,
-    TextListVariants,
-    Title,
-} from '@patternfly/react-core'
-
-const 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
diff --git a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
deleted file mode 100644
index f6e1c98b..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/ConfirmationModal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Modal from './Modal'
-
-function ConfirmationModal({ title, message, isOpen, callback }) {
-    return (
-        <Modal
-            title={title}
-            isOpen={isOpen}
-            onSubmit={() => callback(true)}
-            onCancel={() => callback(false)}
-            submitButtonType="danger"
-            submitButtonText="Confirm"
-        >
-            {message}
-        </Modal>
-    )
-}
-
-ConfirmationModal.propTypes = {
-    title: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    callback: PropTypes.func.isRequired,
-}
-
-export default ConfirmationModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
deleted file mode 100644
index d4577062..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
-
-function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
-    const actions = [
-        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
-            {submitButtonText}
-        </Button>,
-        <Button variant="link" onClick={onCancel} key="cancel">
-            Cancel
-        </Button>,
-    ]
-
-    return (
-        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
-            {children}
-        </PModal>
-    )
-}
-
-Modal.propTypes = {
-    title: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    submitButtonType: PropTypes.string,
-    submitButtonText: PropTypes.string,
-    children: PropTypes.node,
-}
-
-Modal.defaultProps = {
-    submitButtonType: 'primary',
-    submitButtonText: 'Save',
-    isOpen: false,
-}
-
-export default Modal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
deleted file mode 100644
index 392a729e..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/TextInputModal.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import Modal from './Modal'
-import { Form, FormGroup, TextInput } from '@patternfly/react-core'
-
-function TextInputModal({ title, label, isOpen, callback, initialValue }) {
-    const textInput = useRef(null)
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [isValid, setValid] = useState(true)
-
-    const resetState = () => {
-        textInput.current.value = ''
-        setSubmitted(false)
-        setValid(false)
-    }
-    const onSubmit = (event) => {
-        const value = textInput.current.value
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        if (!value) {
-            setValid(false)
-            return false
-        }
-
-        callback(value)
-        resetState()
-        return true
-    }
-    const onCancel = () => {
-        callback(undefined)
-        resetState()
-    }
-
-    return (
-        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormGroup
-                    label={label}
-                    fieldId="text-input"
-                    isRequired
-                    validated={isSubmitted && !isValid ? 'error' : 'default'}
-                    helperTextInvalid="This field cannot be empty"
-                >
-                    <TextInput
-                        id="text-input"
-                        name="text-input"
-                        isRequired
-                        type="text"
-                        ref={textInput}
-                        defaultValue={initialValue}
-                    />
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-TextInputModal.propTypes = {
-    title: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    callback: PropTypes.func.isRequired,
-    initialValue: PropTypes.string,
-}
-
-export default TextInputModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
deleted file mode 100644
index afe07597..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewPortfolioModal.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import Modal from '../Modal'
-import {
-    Form,
-    FormGroup,
-    FormSection,
-    NumberInput,
-    Select,
-    SelectGroup,
-    SelectOption,
-    SelectVariant,
-    TextInput,
-} from '@patternfly/react-core'
-import { METRIC_GROUPS, METRIC_NAMES } from '../../../util/available-metrics'
-
-const NewPortfolioModal = ({ isOpen, onSubmit: onSubmitUpstream, onCancel: onUpstreamCancel }) => {
-    const nameInput = useRef(null)
-    const [repeats, setRepeats] = useState(1)
-    const [isSelectOpen, setSelectOpen] = useState(false)
-    const [selectedMetrics, setSelectedMetrics] = useState([])
-
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [errors, setErrors] = useState({})
-
-    const clearState = () => {
-        setSubmitted(false)
-        setErrors({})
-        nameInput.current.value = ''
-        setRepeats(1)
-        setSelectOpen(false)
-        setSelectedMetrics([])
-    }
-
-    const onSubmit = (event) => {
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-
-        if (!name) {
-            setErrors({ name: true })
-            return false
-        } else {
-            onSubmitUpstream(name, { enabledMetrics: selectedMetrics, repeatsPerScenario: repeats })
-        }
-
-        clearState()
-        return false
-    }
-    const onCancel = () => {
-        onUpstreamCancel()
-        clearState()
-    }
-
-    const onSelect = (event, selection) => {
-        if (selectedMetrics.includes(selection)) {
-            setSelectedMetrics((metrics) => metrics.filter((item) => item !== selection))
-        } else {
-            setSelectedMetrics((metrics) => [...metrics, selection])
-        }
-    }
-
-    return (
-        <Modal title="New Portfolio" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormSection>
-                    <FormGroup
-                        label="Name"
-                        fieldId="name"
-                        isRequired
-                        validated={isSubmitted && errors.name ? 'error' : 'default'}
-                        helperTextInvalid="This field cannot be empty"
-                    >
-                        <TextInput
-                            name="name"
-                            id="name"
-                            type="text"
-                            isRequired
-                            ref={nameInput}
-                            placeholder="My Portfolio"
-                        />
-                    </FormGroup>
-                </FormSection>
-                <FormSection title="Targets" titleElement="h4">
-                    <FormGroup label="Metrics" fieldId="metrics">
-                        <Select
-                            variant={SelectVariant.typeaheadMulti}
-                            typeAheadAriaLabel="Select a metric"
-                            onToggle={() => setSelectOpen(!isSelectOpen)}
-                            onSelect={onSelect}
-                            onClear={() => setSelectedMetrics([])}
-                            selections={selectedMetrics}
-                            isOpen={isSelectOpen}
-                            placeholderText="Select a metric"
-                            menuAppendTo="parent"
-                            maxHeight="300px"
-                            chipGroupProps={{ numChips: 1 }}
-                            isGrouped
-                        >
-                            {Object.entries(METRIC_GROUPS).map(([group, metrics]) => (
-                                <SelectGroup label={group} key={group}>
-                                    {metrics.map((metric) => (
-                                        <SelectOption key={metric} value={metric}>
-                                            {METRIC_NAMES[metric]}
-                                        </SelectOption>
-                                    ))}
-                                </SelectGroup>
-                            ))}
-                        </Select>
-                    </FormGroup>
-                    <FormGroup label="Repeats per Scenario" fieldId="repeats">
-                        <NumberInput
-                            id="repeats"
-                            inputName="repeats"
-                            type="number"
-                            value={repeats}
-                            onChange={(e) => setRepeats(Number(e.target.value))}
-                            onPlus={() => setRepeats((r) => r + 1)}
-                            onMinus={() => setRepeats((r) => r - 1)}
-                            min={1}
-                        />
-                    </FormGroup>
-                </FormSection>
-            </Form>
-        </Modal>
-    )
-}
-
-NewPortfolioModal.propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
deleted file mode 100644
index 94d0d424..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewScenarioModal.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import { Portfolio } from '../../../shapes'
-import Modal from '../Modal'
-import {
-    Checkbox,
-    Form,
-    FormGroup,
-    FormSection,
-    FormSelect,
-    FormSelectOption,
-    NumberInput,
-    TextInput,
-} from '@patternfly/react-core'
-import { useSchedulers, useTraces } from '../../../data/experiments'
-import { useProjectTopologies } from '../../../data/topology'
-import { usePortfolio } from '../../../data/project'
-
-const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
-    const { data: portfolio } = usePortfolio(portfolioId)
-    const { data: topologies = [] } = useProjectTopologies(portfolio?.projectId)
-    const { data: traces = [] } = useTraces()
-    const { data: schedulers = [] } = useSchedulers()
-
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [traceLoad, setTraceLoad] = useState(100)
-    const [trace, setTrace] = useState(undefined)
-    const [topology, setTopology] = useState(undefined)
-    const [scheduler, setScheduler] = useState(undefined)
-    const [failuresEnabled, setFailuresEnabled] = useState(false)
-    const [opPhenEnabled, setOpPhenEnabled] = useState(false)
-    const nameInput = useRef(null)
-
-    const resetState = () => {
-        setSubmitted(false)
-        setTraceLoad(100)
-        setTrace(undefined)
-        setTopology(undefined)
-        setScheduler(undefined)
-        setFailuresEnabled(false)
-        setOpPhenEnabled(false)
-        nameInput.current.value = ''
-    }
-
-    const onSubmit = (event) => {
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-
-        onSubmitUpstream(
-            name,
-            portfolio._id,
-            {
-                traceId: trace || traces[0]._id,
-                loadSamplingFraction: traceLoad / 100,
-            },
-            {
-                topologyId: topology || topologies[0]._id,
-            },
-            {
-                failuresEnabled,
-                performanceInterferenceEnabled: opPhenEnabled,
-                schedulerName: scheduler || schedulers[0].name,
-            }
-        )
-
-        resetState()
-        return true
-    }
-    const onCancel = () => {
-        onCancelUpstream()
-        resetState()
-    }
-
-    return (
-        <Modal title="New Scenario" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormGroup label="Name" fieldId="name" isRequired>
-                    <TextInput
-                        id="name"
-                        name="name"
-                        type="text"
-                        isDisabled={portfolio?.scenarioIds?.length === 0}
-                        defaultValue={portfolio?.scenarioIds?.length === 0 ? 'Base scenario' : ''}
-                        ref={nameInput}
-                    />
-                </FormGroup>
-                <FormSection title="Workload">
-                    <FormGroup label="Trace" fieldId="trace" isRequired>
-                        <FormSelect id="trace" name="trace" value={trace} onChange={setTrace}>
-                            {traces.map((trace) => (
-                                <FormSelectOption value={trace._id} key={trace._id} label={trace.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-                    <FormGroup label="Load Sampling Fraction" fieldId="trace-load" isRequired>
-                        <NumberInput
-                            name="trace-load"
-                            type="number"
-                            min={0}
-                            max={100}
-                            value={traceLoad}
-                            onMinus={() => setTraceLoad((load) => load - 1)}
-                            onPlus={() => setTraceLoad((load) => load + 1)}
-                            onChange={(e) => setTraceLoad(Number(e.target.value))}
-                            unit="%"
-                        />
-                    </FormGroup>
-                </FormSection>
-                <FormSection title="Topology">
-                    <FormGroup label="Topology" fieldId="topology" isRequired>
-                        <FormSelect id="topology" name="topology" value={topology} onChange={setTopology}>
-                            {topologies.map((topology) => (
-                                <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-
-                    <FormGroup label="Scheduler" fieldId="scheduler" isRequired>
-                        <FormSelect id="scheduler" name="scheduler" value={scheduler} onChange={setScheduler}>
-                            {schedulers.map((scheduler) => (
-                                <FormSelectOption value={scheduler.name} key={scheduler.name} label={scheduler.name} />
-                            ))}
-                        </FormSelect>
-                    </FormGroup>
-                </FormSection>
-                <FormSection title="Operational Phenomena">
-                    <Checkbox
-                        label="Failures"
-                        id="failures"
-                        name="failures"
-                        isChecked={failuresEnabled}
-                        onChange={() => setFailuresEnabled((e) => !e)}
-                    />
-                    <Checkbox
-                        label="Performance Interference"
-                        id="perf-interference"
-                        name="perf-interference"
-                        isChecked={opPhenEnabled}
-                        onChange={() => setOpPhenEnabled((e) => !e)}
-                    />
-                </FormSection>
-            </Form>
-        </Modal>
-    )
-}
-
-NewScenarioModal.propTypes = {
-    portfolioId: PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
deleted file mode 100644
index 49952aec..00000000
--- a/opendc-web/opendc-web-ui/src/components/modals/custom-components/NewTopologyModal.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-import Modal from '../Modal'
-import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
-import { useProjectTopologies } from '../../../data/topology'
-
-const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
-    const nameInput = useRef(null)
-    const [isSubmitted, setSubmitted] = useState(false)
-    const [originTopology, setOriginTopology] = useState(-1)
-    const [errors, setErrors] = useState({})
-
-    const { data: topologies = [] } = useProjectTopologies(projectId)
-
-    const clearState = () => {
-        nameInput.current.value = ''
-        setSubmitted(false)
-        setOriginTopology(-1)
-        setErrors({})
-    }
-
-    const onSubmit = (event) => {
-        setSubmitted(true)
-
-        if (event) {
-            event.preventDefault()
-        }
-
-        const name = nameInput.current.value
-
-        if (!name) {
-            setErrors({ name: true })
-            return false
-        } else if (originTopology === -1) {
-            onSubmitUpstream(name)
-        } else {
-            onSubmitUpstream(name, originTopology)
-        }
-
-        clearState()
-        return true
-    }
-
-    const onCancel = () => {
-        onCancelUpstream()
-        clearState()
-    }
-
-    return (
-        <Modal title="New Topology" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
-            <Form onSubmit={onSubmit}>
-                <FormGroup
-                    label="Name"
-                    fieldId="name"
-                    isRequired
-                    validated={isSubmitted && errors.name ? 'error' : 'default'}
-                    helperTextInvalid="This field cannot be empty"
-                >
-                    <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
-                </FormGroup>
-                <FormGroup label="Topology to duplicate" fieldId="origin" isRequired>
-                    <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}>
-                        <FormSelectOption value={-1} key={-1} label="None - start from scratch" />
-                        {topologies.map((topology) => (
-                            <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
-                        ))}
-                    </FormSelect>
-                </FormGroup>
-            </Form>
-        </Modal>
-    )
-}
-
-NewTopologyModal.propTypes = {
-    projectId: PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-}
-
-export default NewTopologyModal
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js
new file mode 100644
index 00000000..856282a7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenario.js
@@ -0,0 +1,64 @@
+/*
+ * 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 { PlusIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useState } from 'react'
+import { useMutation } from 'react-query'
+import NewScenarioModal from './NewScenarioModal'
+
+function NewScenario({ portfolioId }) {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addScenario } = useMutation('addScenario')
+
+    const onSubmit = (name, portfolioId, trace, topology, operational) => {
+        addScenario({
+            portfolioId,
+            name,
+            trace,
+            topology,
+            operational,
+        })
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
+                New Scenario
+            </Button>
+            <NewScenarioModal
+                portfolioId={portfolioId}
+                isOpen={isVisible}
+                onSubmit={onSubmit}
+                onCancel={() => setVisible(false)}
+            />
+        </>
+    )
+}
+
+NewScenario.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default NewScenario
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js
new file mode 100644
index 00000000..7f620c8c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/NewScenarioModal.js
@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from '../util/modals/Modal'
+import {
+    Checkbox,
+    Form,
+    FormGroup,
+    FormSection,
+    FormSelect,
+    FormSelectOption,
+    NumberInput,
+    TextInput,
+} from '@patternfly/react-core'
+import { useSchedulers, useTraces } from '../../data/experiments'
+import { useProjectTopologies } from '../../data/topology'
+import { usePortfolio } from '../../data/project'
+
+const NewScenarioModal = ({ portfolioId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
+    const { data: portfolio } = usePortfolio(portfolioId)
+    const { data: topologies = [] } = useProjectTopologies(portfolio?.projectId)
+    const { data: traces = [] } = useTraces()
+    const { data: schedulers = [] } = useSchedulers()
+
+    // eslint-disable-next-line no-unused-vars
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [traceLoad, setTraceLoad] = useState(100)
+    const [trace, setTrace] = useState(undefined)
+    const [topology, setTopology] = useState(undefined)
+    const [scheduler, setScheduler] = useState(undefined)
+    const [failuresEnabled, setFailuresEnabled] = useState(false)
+    const [opPhenEnabled, setOpPhenEnabled] = useState(false)
+    const nameInput = useRef(null)
+
+    const resetState = () => {
+        setSubmitted(false)
+        setTraceLoad(100)
+        setTrace(undefined)
+        setTopology(undefined)
+        setScheduler(undefined)
+        setFailuresEnabled(false)
+        setOpPhenEnabled(false)
+        nameInput.current.value = ''
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        onSubmitUpstream(
+            name,
+            portfolio._id,
+            {
+                traceId: trace || traces[0]._id,
+                loadSamplingFraction: traceLoad / 100,
+            },
+            {
+                topologyId: topology || topologies[0]._id,
+            },
+            {
+                failuresEnabled,
+                performanceInterferenceEnabled: opPhenEnabled,
+                schedulerName: scheduler || schedulers[0].name,
+            }
+        )
+
+        resetState()
+        return true
+    }
+    const onCancel = () => {
+        onCancelUpstream()
+        resetState()
+    }
+
+    return (
+        <Modal title="New Scenario" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup label="Name" fieldId="name" isRequired>
+                    <TextInput
+                        id="name"
+                        name="name"
+                        type="text"
+                        isDisabled={portfolio?.scenarioIds?.length === 0}
+                        defaultValue={portfolio?.scenarioIds?.length === 0 ? 'Base scenario' : ''}
+                        ref={nameInput}
+                    />
+                </FormGroup>
+                <FormSection title="Workload">
+                    <FormGroup label="Trace" fieldId="trace" isRequired>
+                        <FormSelect id="trace" name="trace" value={trace} onChange={setTrace}>
+                            {traces.map((trace) => (
+                                <FormSelectOption value={trace._id} key={trace._id} label={trace.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+                    <FormGroup label="Load Sampling Fraction" fieldId="trace-load" isRequired>
+                        <NumberInput
+                            name="trace-load"
+                            type="number"
+                            min={0}
+                            max={100}
+                            value={traceLoad}
+                            onMinus={() => setTraceLoad((load) => load - 1)}
+                            onPlus={() => setTraceLoad((load) => load + 1)}
+                            onChange={(e) => setTraceLoad(Number(e.target.value))}
+                            unit="%"
+                        />
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Topology">
+                    <FormGroup label="Topology" fieldId="topology" isRequired>
+                        <FormSelect id="topology" name="topology" value={topology} onChange={setTopology}>
+                            {topologies.map((topology) => (
+                                <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+
+                    <FormGroup label="Scheduler" fieldId="scheduler" isRequired>
+                        <FormSelect id="scheduler" name="scheduler" value={scheduler} onChange={setScheduler}>
+                            {schedulers.map((scheduler) => (
+                                <FormSelectOption value={scheduler.name} key={scheduler.name} label={scheduler.name} />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Operational Phenomena">
+                    <Checkbox
+                        label="Failures"
+                        id="failures"
+                        name="failures"
+                        isChecked={failuresEnabled}
+                        onChange={() => setFailuresEnabled((e) => !e)}
+                    />
+                    <Checkbox
+                        label="Performance Interference"
+                        id="perf-interference"
+                        name="perf-interference"
+                        isChecked={opPhenEnabled}
+                        onChange={() => setOpPhenEnabled((e) => !e)}
+                    />
+                </FormSection>
+            </Form>
+        </Modal>
+    )
+}
+
+NewScenarioModal.propTypes = {
+    portfolioId: PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js
new file mode 100644
index 00000000..66691580
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioState.js
@@ -0,0 +1,62 @@
+/*
+ * 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 { ClockIcon, CheckCircleIcon, ErrorCircleOIcon } from '@patternfly/react-icons'
+
+function ScenarioState({ state }) {
+    switch (state) {
+        case 'CLAIMED':
+        case 'QUEUED':
+            return (
+                <span>
+                    <ClockIcon color="blue" /> Queued
+                </span>
+            )
+        case 'RUNNING':
+            return (
+                <span>
+                    <ClockIcon color="green" /> Running
+                </span>
+            )
+        case 'FINISHED':
+            return (
+                <span>
+                    <CheckCircleIcon color="green" /> Finished
+                </span>
+            )
+        case 'FAILED':
+            return (
+                <span>
+                    <ErrorCircleOIcon color="red" /> Failed
+                </span>
+            )
+    }
+
+    return 'Unknown'
+}
+
+ScenarioState.propTypes = {
+    state: PropTypes.oneOf(['QUEUED', 'CLAIMED', 'RUNNING', 'FINISHED', 'FAILED']),
+}
+
+export default ScenarioState
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
new file mode 100644
index 00000000..9966e3ba
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
@@ -0,0 +1,108 @@
+/*
+ * 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 Link from 'next/link'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import React from 'react'
+import TableEmptyState from '../util/TableEmptyState'
+import ScenarioState from './ScenarioState'
+import { usePortfolio, usePortfolioScenarios } from '../../data/project'
+import { useProjectTopologies } from '../../data/topology'
+import { useMutation } from 'react-query'
+
+const ScenarioTable = ({ portfolioId }) => {
+    const { data: portfolio } = usePortfolio(portfolioId)
+    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
+    const { data: topologies } = useProjectTopologies(portfolio?.projectId, {
+        select: (topologies) => new Map(topologies.map((topology) => [topology._id, topology])),
+    })
+
+    const { mutate: deleteScenario } = useMutation('deleteScenario')
+
+    const columns = ['Name', 'Topology', 'Trace', 'State']
+    const rows =
+        scenarios.length > 0
+            ? scenarios.map((scenario) => {
+                  const topology = topologies?.get(scenario.topology.topologyId)
+
+                  return [
+                      scenario.name,
+                      {
+                          title: topology ? (
+                              <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
+                                  <a>{topology.name}</a>
+                              </Link>
+                          ) : (
+                              'Unknown Topology'
+                          ),
+                      },
+                      scenario.trace.traceId,
+                      { title: <ScenarioState state={scenario.simulation.state} /> },
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 4 },
+                              title: (
+                                  <TableEmptyState
+                                      status={status}
+                                      loadingTitle="Loading Scenarios"
+                                      emptyTitle="No scenarios"
+                                      emptyText="You have not created any scenario for this portfolio yet. Click the New Scenario button to create one."
+                                  />
+                              ),
+                          },
+                      ],
+                  },
+              ]
+
+    const actionResolver = (_, { rowIndex }) => [
+        {
+            title: 'Delete Scenario',
+            onClick: (_, rowId) => deleteScenario(scenarios[rowId]._id),
+            isDisabled: rowIndex === 0,
+        },
+    ]
+
+    return (
+        <Table
+            aria-label="Scenario List"
+            variant="compact"
+            cells={columns}
+            rows={rows}
+            actionResolver={scenarios.length > 0 ? actionResolver : undefined}
+        >
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+ScenarioTable.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default ScenarioTable
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
new file mode 100644
index 00000000..09348e60
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
@@ -0,0 +1,40 @@
+/*
+ * 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 { Tooltip } from '@patternfly/react-core'
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
+import { METRIC_DESCRIPTIONS } from '../../../util/available-metrics'
+
+function PortfolioResultInfo({ metric }) {
+    return (
+        <Tooltip position="top" content={<div>{METRIC_DESCRIPTIONS[metric]}</div>}>
+            <OutlinedQuestionCircleIcon title="Metric information" />
+        </Tooltip>
+    )
+}
+
+PortfolioResultInfo.propTypes = {
+    metric: PropTypes.string.isRequired,
+}
+
+export default PortfolioResultInfo
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
new file mode 100644
index 00000000..f1883e68
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
@@ -0,0 +1,134 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
+import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../../util/available-metrics'
+import { mean, std } from 'mathjs'
+import approx from 'approximate-number'
+import {
+    Bullseye,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Grid,
+    GridItem,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
+import { usePortfolioScenarios } from '../../../data/project'
+import PortfolioResultInfo from './PortfolioResultInfo'
+import NewScenario from '../NewScenario'
+
+const PortfolioResults = ({ portfolioId }) => {
+    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
+
+    if (status === 'loading') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={Spinner} />
+                    <Title size="lg" headingLevel="h4">
+                        Loading Results
+                    </Title>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (status === 'error') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={ErrorCircleOIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        Unable to connect
+                    </Title>
+                    <EmptyStateBody>
+                        There was an error retrieving data. Check your connection and try again.
+                    </EmptyStateBody>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (scenarios.length === 0) {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={CubesIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        No results
+                    </Title>
+                    <EmptyStateBody>
+                        No results are currently available for this portfolio. Run a scenario to obtain simulation
+                        results.
+                    </EmptyStateBody>
+                    <NewScenario portfolioId={portfolioId} />
+                </EmptyState>
+            </Bullseye>
+        )
+    }
+
+    const dataPerMetric = {}
+
+    AVAILABLE_METRICS.forEach((metric) => {
+        dataPerMetric[metric] = scenarios
+            .filter((scenario) => scenario.results)
+            .map((scenario) => ({
+                name: scenario.name,
+                value: mean(scenario.results[metric]),
+                errorX: std(scenario.results[metric]),
+            }))
+    })
+
+    return (
+        <Grid hasGutter>
+            {AVAILABLE_METRICS.map((metric) => (
+                <GridItem xl={6} lg={12} key={metric}>
+                    <Card>
+                        <CardHeader>
+                            <CardActions>
+                                <PortfolioResultInfo metric={metric} />
+                            </CardActions>
+                            <CardTitle>{METRIC_NAMES[metric]}</CardTitle>
+                        </CardHeader>
+                        <CardBody>
+                            <ResponsiveContainer aspect={16 / 9} width="100%">
+                                <ComposedChart
+                                    data={dataPerMetric[metric]}
+                                    margin={{ left: 35, bottom: 15 }}
+                                    layout="vertical"
+                                >
+                                    <CartesianGrid strokeDasharray="3 3" />
+                                    <XAxis
+                                        tickFormatter={(tick) => approx(tick)}
+                                        label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
+                                        type="number"
+                                    />
+                                    <YAxis dataKey="name" type="category" />
+                                    <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
+                                    <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
+                                        <ErrorBar
+                                            dataKey="errorX"
+                                            width={10}
+                                            strokeWidth={3}
+                                            stroke="#FF6600"
+                                            direction="x"
+                                        />
+                                    </Scatter>
+                                </ComposedChart>
+                            </ResponsiveContainer>
+                        </CardBody>
+                    </Card>
+                </GridItem>
+            ))}
+        </Grid>
+    )
+}
+
+PortfolioResults.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default PortfolioResults
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
index ae4cb9cd..87ea059d 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolio.js
@@ -24,8 +24,8 @@ import PropTypes from 'prop-types'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import NewPortfolioModal from '../modals/custom-components/NewPortfolioModal'
 import { useMutation } from 'react-query'
+import NewPortfolioModal from './NewPortfolioModal'
 
 function NewPortfolio({ projectId }) {
     const [isVisible, setVisible] = useState(false)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
new file mode 100644
index 00000000..4276d7d4
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewPortfolioModal.js
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import {
+    Form,
+    FormGroup,
+    FormSection,
+    NumberInput,
+    Select,
+    SelectGroup,
+    SelectOption,
+    SelectVariant,
+    TextInput,
+} from '@patternfly/react-core'
+import Modal from '../util/modals/Modal'
+import { METRIC_GROUPS, METRIC_NAMES } from '../../util/available-metrics'
+
+const NewPortfolioModal = ({ isOpen, onSubmit: onSubmitUpstream, onCancel: onUpstreamCancel }) => {
+    const nameInput = useRef(null)
+    const [repeats, setRepeats] = useState(1)
+    const [isSelectOpen, setSelectOpen] = useState(false)
+    const [selectedMetrics, setSelectedMetrics] = useState([])
+
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [errors, setErrors] = useState({})
+
+    const clearState = () => {
+        setSubmitted(false)
+        setErrors({})
+        nameInput.current.value = ''
+        setRepeats(1)
+        setSelectOpen(false)
+        setSelectedMetrics([])
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        if (!name) {
+            setErrors({ name: true })
+            return false
+        } else {
+            onSubmitUpstream(name, { enabledMetrics: selectedMetrics, repeatsPerScenario: repeats })
+        }
+
+        clearState()
+        return false
+    }
+    const onCancel = () => {
+        onUpstreamCancel()
+        clearState()
+    }
+
+    const onSelect = (event, selection) => {
+        if (selectedMetrics.includes(selection)) {
+            setSelectedMetrics((metrics) => metrics.filter((item) => item !== selection))
+        } else {
+            setSelectedMetrics((metrics) => [...metrics, selection])
+        }
+    }
+
+    return (
+        <Modal title="New Portfolio" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormSection>
+                    <FormGroup
+                        label="Name"
+                        fieldId="name"
+                        isRequired
+                        validated={isSubmitted && errors.name ? 'error' : 'default'}
+                        helperTextInvalid="This field cannot be empty"
+                    >
+                        <TextInput
+                            name="name"
+                            id="name"
+                            type="text"
+                            isRequired
+                            ref={nameInput}
+                            placeholder="My Portfolio"
+                        />
+                    </FormGroup>
+                </FormSection>
+                <FormSection title="Targets" titleElement="h4">
+                    <FormGroup label="Metrics" fieldId="metrics">
+                        <Select
+                            variant={SelectVariant.typeaheadMulti}
+                            typeAheadAriaLabel="Select a metric"
+                            onToggle={() => setSelectOpen(!isSelectOpen)}
+                            onSelect={onSelect}
+                            onClear={() => setSelectedMetrics([])}
+                            selections={selectedMetrics}
+                            isOpen={isSelectOpen}
+                            placeholderText="Select a metric"
+                            menuAppendTo="parent"
+                            maxHeight="300px"
+                            chipGroupProps={{ numChips: 1 }}
+                            isGrouped
+                        >
+                            {Object.entries(METRIC_GROUPS).map(([group, metrics]) => (
+                                <SelectGroup label={group} key={group}>
+                                    {metrics.map((metric) => (
+                                        <SelectOption key={metric} value={metric}>
+                                            {METRIC_NAMES[metric]}
+                                        </SelectOption>
+                                    ))}
+                                </SelectGroup>
+                            ))}
+                        </Select>
+                    </FormGroup>
+                    <FormGroup label="Repeats per Scenario" fieldId="repeats">
+                        <NumberInput
+                            id="repeats"
+                            inputName="repeats"
+                            type="number"
+                            value={repeats}
+                            onChange={(e) => setRepeats(Number(e.target.value))}
+                            onPlus={() => setRepeats((r) => r + 1)}
+                            onMinus={() => setRepeats((r) => r - 1)}
+                            min={1}
+                        />
+                    </FormGroup>
+                </FormSection>
+            </Form>
+        </Modal>
+    )
+}
+
+NewPortfolioModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
index 4f5d79cf..984264dc 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewProject.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import TextInputModal from '../../components/modals/TextInputModal'
 import { Button } from '@patternfly/react-core'
 import { useMutation } from 'react-query'
 import { PlusIcon } from '@patternfly/react-icons'
 import { buttonContainer } from './NewProject.module.scss'
+import TextInputModal from '../util/modals/TextInputModal'
 
 /**
  * A container for creating a new project.
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js b/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
deleted file mode 100644
index 6d4f48c1..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewScenario.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { PlusIcon } from '@patternfly/react-icons'
-import { Button } from '@patternfly/react-core'
-import { useState } from 'react'
-import NewScenarioModal from '../modals/custom-components/NewScenarioModal'
-import { useMutation } from 'react-query'
-
-function NewScenario({ portfolioId }) {
-    const [isVisible, setVisible] = useState(false)
-    const { mutate: addScenario } = useMutation('addScenario')
-
-    const onSubmit = (name, portfolioId, trace, topology, operational) => {
-        addScenario({
-            portfolioId,
-            name,
-            trace,
-            topology,
-            operational,
-        })
-        setVisible(false)
-    }
-
-    return (
-        <>
-            <Button icon={<PlusIcon />} isSmall onClick={() => setVisible(true)}>
-                New Scenario
-            </Button>
-            <NewScenarioModal
-                portfolioId={portfolioId}
-                isOpen={isVisible}
-                onSubmit={onSubmit}
-                onCancel={() => setVisible(false)}
-            />
-        </>
-    )
-}
-
-NewScenario.propTypes = {
-    portfolioId: PropTypes.string,
-}
-
-export default NewScenario
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
index c6c4171b..bf59e020 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopology.js
@@ -24,9 +24,9 @@ import PropTypes from 'prop-types'
 import { PlusIcon } from '@patternfly/react-icons'
 import { Button } from '@patternfly/react-core'
 import { useState } from 'react'
-import NewTopologyModal from '../modals/custom-components/NewTopologyModal'
 import { useDispatch } from 'react-redux'
 import { addTopology } from '../../redux/actions/topologies'
+import NewTopologyModal from './NewTopologyModal'
 
 function NewTopology({ projectId }) {
     const [isVisible, setVisible] = useState(false)
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
new file mode 100644
index 00000000..a495f73e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/NewTopologyModal.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Form, FormGroup, FormSelect, FormSelectOption, TextInput } from '@patternfly/react-core'
+import { useProjectTopologies } from '../../data/topology'
+import Modal from '../util/modals/Modal'
+
+const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCancel: onCancelUpstream }) => {
+    const nameInput = useRef(null)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [originTopology, setOriginTopology] = useState(-1)
+    const [errors, setErrors] = useState({})
+
+    const { data: topologies = [] } = useProjectTopologies(projectId)
+
+    const clearState = () => {
+        nameInput.current.value = ''
+        setSubmitted(false)
+        setOriginTopology(-1)
+        setErrors({})
+    }
+
+    const onSubmit = (event) => {
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+
+        if (!name) {
+            setErrors({ name: true })
+            return false
+        } else if (originTopology === -1) {
+            onSubmitUpstream(name)
+        } else {
+            onSubmitUpstream(name, originTopology)
+        }
+
+        clearState()
+        return true
+    }
+
+    const onCancel = () => {
+        onCancelUpstream()
+        clearState()
+    }
+
+    return (
+        <Modal title="New Topology" isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label="Name"
+                    fieldId="name"
+                    isRequired
+                    validated={isSubmitted && errors.name ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
+                </FormGroup>
+                <FormGroup label="Topology to duplicate" fieldId="origin" isRequired>
+                    <FormSelect id="origin" name="origin" value={originTopology} onChange={setOriginTopology}>
+                        <FormSelectOption value={-1} key={-1} label="None - start from scratch" />
+                        {topologies.map((topology) => (
+                            <FormSelectOption value={topology._id} key={topology._id} label={topology.name} />
+                        ))}
+                    </FormSelect>
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+NewTopologyModal.propTypes = {
+    projectId: PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+}
+
+export default NewTopologyModal
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js b/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
deleted file mode 100644
index 285345e7..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ScenarioState.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { ClockIcon, InfoIcon, CheckCircleIcon, ErrorCircleOIcon } from '@patternfly/react-icons'
-
-function ScenarioState({ state }) {
-    switch (state) {
-        case 'CLAIMED':
-        case 'QUEUED':
-            return (
-                <span>
-                    <ClockIcon color="blue" /> Queued
-                </span>
-            )
-        case 'RUNNING':
-            return (
-                <span>
-                    <ClockIcon color="green" /> Running
-                </span>
-            )
-        case 'FINISHED':
-            return (
-                <span>
-                    <CheckCircleIcon color="green" /> Finished
-                </span>
-            )
-        case 'FAILED':
-            return (
-                <span>
-                    <ErrorCircleOIcon color="red" /> Failed
-                </span>
-            )
-    }
-
-    return 'Unknown'
-}
-
-ScenarioState.propTypes = {
-    state: PropTypes.oneOf(['QUEUED', 'CLAIMED', 'RUNNING', 'FINISHED', 'FAILED']),
-}
-
-export default ScenarioState
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
deleted file mode 100644
index 9966e3ba..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ScenarioTable.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import Link from 'next/link'
-import { Table, TableBody, TableHeader } from '@patternfly/react-table'
-import React from 'react'
-import TableEmptyState from '../util/TableEmptyState'
-import ScenarioState from './ScenarioState'
-import { usePortfolio, usePortfolioScenarios } from '../../data/project'
-import { useProjectTopologies } from '../../data/topology'
-import { useMutation } from 'react-query'
-
-const ScenarioTable = ({ portfolioId }) => {
-    const { data: portfolio } = usePortfolio(portfolioId)
-    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
-    const { data: topologies } = useProjectTopologies(portfolio?.projectId, {
-        select: (topologies) => new Map(topologies.map((topology) => [topology._id, topology])),
-    })
-
-    const { mutate: deleteScenario } = useMutation('deleteScenario')
-
-    const columns = ['Name', 'Topology', 'Trace', 'State']
-    const rows =
-        scenarios.length > 0
-            ? scenarios.map((scenario) => {
-                  const topology = topologies?.get(scenario.topology.topologyId)
-
-                  return [
-                      scenario.name,
-                      {
-                          title: topology ? (
-                              <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
-                                  <a>{topology.name}</a>
-                              </Link>
-                          ) : (
-                              'Unknown Topology'
-                          ),
-                      },
-                      scenario.trace.traceId,
-                      { title: <ScenarioState state={scenario.simulation.state} /> },
-                  ]
-              })
-            : [
-                  {
-                      heightAuto: true,
-                      cells: [
-                          {
-                              props: { colSpan: 4 },
-                              title: (
-                                  <TableEmptyState
-                                      status={status}
-                                      loadingTitle="Loading Scenarios"
-                                      emptyTitle="No scenarios"
-                                      emptyText="You have not created any scenario for this portfolio yet. Click the New Scenario button to create one."
-                                  />
-                              ),
-                          },
-                      ],
-                  },
-              ]
-
-    const actionResolver = (_, { rowIndex }) => [
-        {
-            title: 'Delete Scenario',
-            onClick: (_, rowId) => deleteScenario(scenarios[rowId]._id),
-            isDisabled: rowIndex === 0,
-        },
-    ]
-
-    return (
-        <Table
-            aria-label="Scenario List"
-            variant="compact"
-            cells={columns}
-            rows={rows}
-            actionResolver={scenarios.length > 0 ? actionResolver : undefined}
-        >
-            <TableHeader />
-            <TableBody />
-        </Table>
-    )
-}
-
-ScenarioTable.propTypes = {
-    portfolioId: PropTypes.string,
-}
-
-export default ScenarioTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
new file mode 100644
index 00000000..ccf637e5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/GrayContainer.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
+import GrayLayer from './elements/GrayLayer'
+
+function GrayContainer() {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+    return <GrayLayer onClick={onClick} />
+}
+
+export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
new file mode 100644
index 00000000..4c3b2757
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapConstants.js
@@ -0,0 +1,25 @@
+export const MAP_SIZE = 50
+export const TILE_SIZE_IN_PIXELS = 100
+export const TILE_SIZE_IN_METERS = 0.5
+export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
+
+export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
+export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
+
+export const GRID_LINE_WIDTH_IN_PIXELS = 2
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
+export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10
+
+export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3
+export const RACK_FILL_ICON_OPACITY = 0.8
+
+export const MAP_MOVE_PIXELS_PER_EVENT = 20
+export const MAP_SCALE_PER_EVENT = 1.1
+export const MAP_MIN_SCALE = 0.5
+export const MAP_MAX_SCALE = 1.5
+
+export const MAX_NUM_UNITS_PER_MACHINE = 6
+export const DEFAULT_RACK_SLOT_CAPACITY = 42
+export const DEFAULT_RACK_POWER_CAPACITY = 10000
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
new file mode 100644
index 00000000..5d19b3ad
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -0,0 +1,83 @@
+import React, { useRef, useState } from 'react'
+import { HotKeys } from 'react-hotkeys'
+import { Stage } from 'react-konva'
+import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
+import { Provider, useStore } from 'react-redux'
+import useResizeObserver from 'use-resize-observer'
+import { mapContainer } from './MapStage.module.scss'
+import MapLayer from './layers/MapLayer'
+import RoomHoverLayer from './layers/RoomHoverLayer'
+import ObjectHoverLayer from './layers/ObjectHoverLayer'
+import ScaleIndicator from './controls/ScaleIndicator'
+import Toolbar from './controls/Toolbar'
+
+function MapStage() {
+    const store = useStore()
+    const { ref, width = 100, height = 100 } = useResizeObserver()
+    const stageRef = useRef(null)
+    const [[x, y], setPos] = useState([0, 0])
+    const [scale, setScale] = useState(1)
+
+    const clampScale = (target) => Math.min(Math.max(target, MAP_MIN_SCALE), MAP_MAX_SCALE)
+    const moveWithDelta = (deltaX, deltaY) => setPos(([x, y]) => [x + deltaX, y + deltaY])
+
+    const onZoom = (e) => {
+        e.evt.preventDefault()
+
+        const stage = stageRef.current.getStage()
+        const oldScale = scale
+
+        const pointer = stage.getPointerPosition()
+        const mousePointTo = {
+            x: (pointer.x - x) / oldScale,
+            y: (pointer.y - y) / oldScale,
+        }
+
+        const newScale = clampScale(e.evt.deltaY > 0 ? oldScale * MAP_SCALE_PER_EVENT : oldScale / MAP_SCALE_PER_EVENT)
+
+        setScale(newScale)
+        setPos([pointer.x - mousePointTo.x * newScale, pointer.y - mousePointTo.y * newScale])
+    }
+    const onZoomButton = (zoomIn) =>
+        setScale((scale) => clampScale(zoomIn ? scale * MAP_SCALE_PER_EVENT : scale / MAP_SCALE_PER_EVENT))
+    const onDragEnd = (e) => setPos([e.target.x(), e.target.y()])
+    const onExport = () => {
+        const download = document.createElement('a')
+        download.href = stageRef.current.getStage().toDataURL()
+        download.download = 'opendc-canvas-export-' + Date.now() + '.png'
+        download.click()
+    }
+
+    const handlers = {
+        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
+        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
+        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
+    }
+
+    return (
+        <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
+            <Stage
+                ref={stageRef}
+                onWheel={onZoom}
+                onDragEnd={onDragEnd}
+                draggable
+                width={width}
+                height={height}
+                scale={{ x: scale, y: scale }}
+                x={x}
+                y={y}
+            >
+                <Provider store={store}>
+                    <MapLayer />
+                    <RoomHoverLayer />
+                    <ObjectHoverLayer />
+                </Provider>
+            </Stage>
+            <ScaleIndicator scale={scale} />
+            <Toolbar onZoom={onZoomButton} onExport={onExport} />
+        </HotKeys>
+    )
+}
+
+export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
new file mode 100644
index 00000000..d879b4c8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss
@@ -0,0 +1,31 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.mapContainer {
+    background-color: var(--pf-global--Color--light-200);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
new file mode 100644
index 00000000..14449a91
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackContainer.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Tile } from '../../../shapes'
+import RackGroup from './groups/RackGroup'
+
+function RackContainer({ tile }) {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    return <RackGroup interactionLevel={interactionLevel} tile={tile} />
+}
+
+RackContainer.propTypes = {
+    tile: Tile,
+}
+
+export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
new file mode 100644
index 00000000..c35cbde7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const fillFraction = useSelector((state) => {
+        let energyConsumptionTotal = 0
+        const rack = state.objects.rack[state.objects.tile[tileId].rack]
+        const machineIds = rack.machines
+        machineIds.forEach((machineId) => {
+            if (machineId !== null) {
+                const machine = state.objects.machine[machineId]
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                machine.memories.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
+                )
+                machine.storages.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
+                )
+            }
+        })
+
+        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
+    })
+    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
new file mode 100644
index 00000000..a6766f33
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import RackFillBar from './elements/RackFillBar'
+
+function RackSpaceFillContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
+}
+
+RackSpaceFillContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
new file mode 100644
index 00000000..93ba9c93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
+import RoomGroup from './groups/RoomGroup'
+
+function RoomContainer({ roomId, ...props }) {
+    const state = useSelector((state) => {
+        return {
+            interactionLevel: state.interactionLevel,
+            currentRoomInConstruction: state.construction.currentRoomInConstruction,
+            room: state.objects.room[roomId],
+        }
+    })
+    const dispatch = useDispatch()
+    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+}
+
+RoomContainer.propTypes = {
+    roomId: PropTypes.string,
+}
+
+export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
new file mode 100644
index 00000000..149e26a1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
+import TileGroup from './groups/TileGroup'
+
+function TileContainer({ tileId, ...props }) {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const tile = useSelector((state) => state.objects.tile[tileId])
+
+    const dispatch = useDispatch()
+    const onClick = (tile) => {
+        if (tile.rack) {
+            dispatch(goFromRoomToRack(tile._id))
+        }
+    }
+    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
+}
+
+TileContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
new file mode 100644
index 00000000..eaebabd5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
@@ -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.
+ */
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useActiveTopology } from '../../../data/topology'
+import TopologyGroup from './groups/TopologyGroup'
+
+function TopologyContainer() {
+    const topology = useActiveTopology()
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
+}
+
+export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
new file mode 100644
index 00000000..77f553dd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import WallGroup from './groups/WallGroup'
+
+function WallContainer({ roomId, ...props }) {
+    const tiles = useSelector((state) => state.objects.room[roomId].tiles.map((tileId) => state.objects.tile[tileId]))
+    return <WallGroup {...props} tiles={tiles} />
+}
+
+WallContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
new file mode 100644
index 00000000..f54b7c84
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import { ChevronLeftIcon } from '@patternfly/react-icons'
+import { collapseContainer } from './Collapse.module.scss'
+import { Button } from '@patternfly/react-core'
+
+function Collapse({ onClick }) {
+    return (
+        <div className={collapseContainer}>
+            <Button variant="tertiary" onClick={onClick}>
+                <ChevronLeftIcon />
+            </Button>
+        </div>
+    )
+}
+
+Collapse.propTypes = {
+    onClick: PropTypes.func,
+}
+
+export default Collapse
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
new file mode 100644
index 00000000..0c1fac94
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss
@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.collapseContainer {
+    position: absolute;
+    right: var(--pf-global--spacer--xs);
+    top: 0;
+    bottom: 10%;
+    margin: auto 0;
+    height: 50px;
+
+    button:global(.pf-m-tertiary) {
+        height: 100%;
+        padding: 2px;
+
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
new file mode 100644
index 00000000..58d2ccc9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+import { scaleIndicator } from './ScaleIndicator.module.scss'
+
+function ScaleIndicator({ scale }) {
+    return (
+        <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
+            {TILE_SIZE_IN_METERS}m
+        </div>
+    )
+}
+
+ScaleIndicator.propTypes = {
+    scale: PropTypes.number.isRequired,
+}
+
+export default ScaleIndicator
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
new file mode 100644
index 00000000..f19e0ff2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss
@@ -0,0 +1,10 @@
+.scaleIndicator {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 50;
+
+    border: solid 2px #212529;
+    border-top: none;
+    border-left: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
new file mode 100644
index 00000000..469fd515
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { control, toolBar } from './Toolbar.module.scss'
+import { Button } from '@patternfly/react-core'
+import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCamera } from '@fortawesome/free-solid-svg-icons'
+
+function Toolbar({ onZoom, onExport }) {
+    return (
+        <div className={toolBar}>
+            <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
+                <SearchPlusIcon />
+            </Button>
+            <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
+                <SearchMinusIcon />
+            </Button>
+            <Button
+                variant="tertiary"
+                title="Export Canvas to PNG Image"
+                onClick={() => onExport()}
+                className={control}
+            >
+                <FontAwesomeIcon icon={faCamera} />
+            </Button>
+        </div>
+    )
+}
+
+Toolbar.propTypes = {
+    onZoom: PropTypes.func,
+    onExport: PropTypes.func,
+}
+
+export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
new file mode 100644
index 00000000..0d505acc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss
@@ -0,0 +1,29 @@
+.toolBar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+}
+
+.control {
+    &:global(.pf-m-tertiary) {
+        margin-right: var(--pf-global--spacer--xs);
+        margin-top: var(--pf-global--spacer--xs);
+        background-color: var(--pf-global--BackgroundColor--100);
+        border: none;
+        border-radius: var(--pf-global--BorderRadius--sm);
+        box-shadow: var(--pf-global--BoxShadow--sm);
+
+        &:not(:global(.pf-m-disabled)) {
+            background-color: var(--pf-global--BackgroundColor--100);
+        }
+
+        &:after {
+            display: none;
+        }
+
+        &:hover {
+            border: none;
+            box-shadow: var(--pf-global--BoxShadow--md);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
new file mode 100644
index 00000000..93037b51
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/Backdrop.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Rect } from 'react-konva'
+import { BACKDROP_COLOR } from '../../../../util/colors'
+import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
+
+function Backdrop() {
+    return <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
+}
+
+export default Backdrop
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
new file mode 100644
index 00000000..08c687f6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/GrayLayer.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
+import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
+
+function GrayLayer({ onClick }) {
+    return (
+        <Rect
+            x={0}
+            y={0}
+            width={MAP_SIZE_IN_PIXELS}
+            height={MAP_SIZE_IN_PIXELS}
+            fill={GRAYED_OUT_AREA_COLOR}
+            onClick={onClick}
+        />
+    )
+}
+
+GrayLayer.propTypes = {
+    onClick: PropTypes.func,
+}
+
+export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
new file mode 100644
index 00000000..20c2c6d1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/HoverTile.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function HoverTile({ x, y, isValid, scale = 1, onClick }) {
+    return (
+        <Rect
+            x={x}
+            y={y}
+            scaleX={scale}
+            scaleY={scale}
+            width={TILE_SIZE_IN_PIXELS}
+            height={TILE_SIZE_IN_PIXELS}
+            fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+            onClick={onClick}
+        />
+    )
+}
+
+HoverTile.propTypes = {
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    scale: PropTypes.number,
+    onClick: PropTypes.func.isRequired,
+}
+
+export default HoverTile
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
new file mode 100644
index 00000000..7d304b6b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import { Image } from 'react-konva'
+
+const imageCaches = {}
+
+function ImageComponent({ src, x, y, width, height, opacity }) {
+    const [image, setImage] = useState(null)
+
+    useEffect(() => {
+        if (imageCaches[src]) {
+            setImage(imageCaches[src])
+            return
+        }
+
+        const image = new window.Image()
+        image.src = src
+        image.onload = () => {
+            setImage(image)
+            imageCaches[src] = image
+        }
+    }, [src])
+
+    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
+}
+
+ImageComponent.propTypes = {
+    src: PropTypes.string.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    opacity: PropTypes.number.isRequired,
+}
+
+export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
new file mode 100644
index 00000000..aa284944
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RackFillBar.js
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Rect } from 'react-konva'
+import {
+    RACK_ENERGY_BAR_BACKGROUND_COLOR,
+    RACK_ENERGY_BAR_FILL_COLOR,
+    RACK_SPACE_BAR_BACKGROUND_COLOR,
+    RACK_SPACE_BAR_FILL_COLOR,
+} from '../../../../util/colors'
+import {
+    OBJECT_BORDER_WIDTH_IN_PIXELS,
+    OBJECT_MARGIN_IN_PIXELS,
+    RACK_FILL_ICON_OPACITY,
+    RACK_FILL_ICON_WIDTH,
+    TILE_SIZE_IN_PIXELS,
+} from '../MapConstants'
+import ImageComponent from './ImageComponent'
+
+function RackFillBar({ positionX, positionY, type, fillFraction }) {
+    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
+    const x =
+        positionX * TILE_SIZE_IN_PIXELS +
+        OBJECT_MARGIN_IN_PIXELS +
+        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
+    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
+    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
+    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
+
+    const fractionHeight = fillFraction * fullHeight
+    const fractionY =
+        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
+
+    return (
+        <Group>
+            <Rect
+                x={x}
+                y={startY}
+                width={width}
+                height={fullHeight}
+                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
+            />
+            <Rect
+                x={x}
+                y={fractionY}
+                width={width}
+                height={fractionHeight}
+                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
+            />
+            <ImageComponent
+                src={'/img/topology/rack-' + type + '-icon.png'}
+                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                width={RACK_FILL_ICON_WIDTH}
+                height={RACK_FILL_ICON_WIDTH}
+                opacity={RACK_FILL_ICON_OPACITY}
+            />
+        </Group>
+    )
+}
+
+RackFillBar.propTypes = {
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    type: PropTypes.string.isRequired,
+    fillFraction: PropTypes.number.isRequired,
+}
+
+export default RackFillBar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js
new file mode 100644
index 00000000..e7329dc0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/RoomTile.js
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function RoomTile({ tile, color }) {
+    return (
+        <Rect
+            x={tile.positionX * TILE_SIZE_IN_PIXELS}
+            y={tile.positionY * TILE_SIZE_IN_PIXELS}
+            width={TILE_SIZE_IN_PIXELS}
+            height={TILE_SIZE_IN_PIXELS}
+            fill={color}
+        />
+    )
+}
+
+RoomTile.propTypes = {
+    tile: Tile,
+    color: PropTypes.string,
+}
+
+export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js
new file mode 100644
index 00000000..3211f187
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TileObject.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
+import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function TileObject({ positionX, positionY, color }) {
+    return (
+        <Rect
+            x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+            y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+            width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+            height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+            fill={color}
+            stroke={OBJECT_BORDER_COLOR}
+            strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
+        />
+    )
+}
+
+TileObject.propTypes = {
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+}
+
+export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..186c2b3a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/TilePlusIcon.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Line } from 'react-konva'
+import { TILE_PLUS_COLOR } from '../../../../util/colors'
+import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+function TilePlusIcon({ x, y, scale = 1 }) {
+    const linePoints = [
+        [
+            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            y + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            y + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+        ],
+        [
+            x + TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            x + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+        ],
+    ]
+    return (
+        <Group>
+            {linePoints.map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+}
+
+TilePlusIcon.propTypes = {
+    x: PropTypes.number,
+    y: PropTypes.number,
+    scale: PropTypes.number,
+}
+
+export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
new file mode 100644
index 00000000..4f18813e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/WallSegment.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Line } from 'react-konva'
+import { WallSegment as WallSegmentShape } from '../../../../shapes'
+import { WALL_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
+
+function WallSegment({ wallSegment }) {
+    let points
+    if (wallSegment.isHorizontal) {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+        ]
+    } else {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+        ]
+    }
+
+    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
+}
+
+WallSegment.propTypes = {
+    wallSegment: WallSegmentShape,
+}
+
+export default WallSegment
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
new file mode 100644
index 00000000..d66a18de
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Group, Line } from 'react-konva'
+import { GRID_COLOR } from '../../../../util/colors'
+import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
+
+const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+    index * TILE_SIZE_IN_PIXELS,
+])
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
+    index * TILE_SIZE_IN_PIXELS,
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+])
+
+function GridGroup() {
+    return (
+        <Group>
+            {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    stroke={GRID_COLOR}
+                    strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+}
+
+export default GridGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
new file mode 100644
index 00000000..46030135
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RackGroup.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
+import TileObject from '../elements/TileObject'
+import RackSpaceFillContainer from '../RackSpaceFillContainer'
+import RackEnergyFillContainer from '../RackEnergyFillContainer'
+
+function RackGroup({ tile }) {
+    return (
+        <Group>
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
+            <Group>
+                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+            </Group>
+        </Group>
+    )
+}
+
+RackGroup.propTypes = {
+    tile: Tile,
+}
+
+export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
new file mode 100644
index 00000000..a42e7bb7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/RoomGroup.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { InteractionLevel, Room } from '../../../../shapes'
+import GrayContainer from '../GrayContainer'
+import TileContainer from '../TileContainer'
+import WallContainer from '../WallContainer'
+
+function RoomGroup({ room, interactionLevel, currentRoomInConstruction, onClick }) {
+    if (currentRoomInConstruction === room._id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tiles.map((tileId) => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
+                ))}
+            </Group>
+        )
+    }
+
+    return (
+        <Group onClick={onClick}>
+            {(() => {
+                if (
+                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
+                    interactionLevel.roomId === room._id
+                ) {
+                    return [
+                        room.tiles
+                            .filter((tileId) => tileId !== interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                        <GrayContainer key={-1} />,
+                        room.tiles
+                            .filter((tileId) => tileId === interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                    ]
+                } else {
+                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
+                }
+            })()}
+            <WallContainer roomId={room._id} />
+        </Group>
+    )
+}
+
+RoomGroup.propTypes = {
+    room: Room,
+    interactionLevel: InteractionLevel,
+    currentRoomInConstruction: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
new file mode 100644
index 00000000..f2084017
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TileGroup.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
+import RoomTile from '../elements/RoomTile'
+import RackContainer from '../RackContainer'
+
+function TileGroup({ tile, newTile, onClick }) {
+    let tileObject
+    if (tile.rack) {
+        tileObject = <RackContainer tile={tile} />
+    } else {
+        tileObject = null
+    }
+
+    let color = ROOM_DEFAULT_COLOR
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR
+    }
+
+    return (
+        <Group onClick={() => onClick(tile)}>
+            <RoomTile tile={tile} color={color} />
+            {tileObject}
+        </Group>
+    )
+}
+
+TileGroup.propTypes = {
+    tile: Tile,
+    newTile: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
new file mode 100644
index 00000000..011dcf34
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/TopologyGroup.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Group } from 'react-konva'
+import { InteractionLevel, Topology } from '../../../../shapes'
+import RoomContainer from '../RoomContainer'
+import GrayContainer from '../GrayContainer'
+
+function TopologyGroup({ topology, interactionLevel }) {
+    if (!topology) {
+        return <Group />
+    }
+
+    if (interactionLevel.mode === 'BUILDING') {
+        return (
+            <Group>
+                {topology.rooms.map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            </Group>
+        )
+    }
+
+    return (
+        <Group>
+            {topology.rooms
+                .filter((roomId) => roomId !== interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
+            {topology.rooms
+                .filter((roomId) => roomId === interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+        </Group>
+    )
+}
+
+TopologyGroup.propTypes = {
+    topology: Topology,
+    interactionLevel: InteractionLevel,
+}
+
+export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
new file mode 100644
index 00000000..6cbd1cd0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import { Tile } from '../../../../shapes'
+import { deriveWallLocations } from '../../../../util/tile-calculations'
+import WallSegment from '../elements/WallSegment'
+
+function WallGroup({ tiles }) {
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment} />
+            ))}
+        </Group>
+    )
+}
+
+WallGroup.propTypes = {
+    tiles: PropTypes.arrayOf(Tile).isRequired,
+}
+
+export default WallGroup
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..2b1060c0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types'
+import React, { useMemo, useState } from 'react'
+import { Layer } from 'react-konva/lib/ReactKonva'
+import HoverTile from '../elements/HoverTile'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
+import { useEffectRef } from '../../../../util/effect-ref'
+
+function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
+    const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
+
+    const layerRef = useEffectRef((layer) => {
+        if (!layer) {
+            return
+        }
+
+        const stage = layer.getStage()
+
+        // Transform used to convert mouse coordinates to world coordinates
+        const transform = stage.getAbsoluteTransform().copy()
+        transform.invert()
+
+        stage.on('mousemove.hover', () => {
+            const { x, y } = transform.point(stage.getPointerPosition())
+            setPos([x, y])
+        })
+        return () => stage.off('mousemove.hover')
+    })
+
+    const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
+    const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
+    const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
+
+    if (!isEnabled) {
+        return <Layer />
+    }
+
+    const x = gridX * TILE_SIZE_IN_PIXELS
+    const y = gridY * TILE_SIZE_IN_PIXELS
+
+    return (
+        <Layer opacity={0.6} ref={layerRef}>
+            <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
+            {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
+        </Layer>
+    )
+}
+
+HoverLayerComponent.propTypes = {
+    isEnabled: PropTypes.bool.isRequired,
+    isValid: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
+    children: PropTypes.node,
+}
+
+export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
new file mode 100644
index 00000000..c902532b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/MapLayer.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { Group, Layer } from 'react-konva'
+import Backdrop from '../elements/Backdrop'
+import TopologyContainer from '../TopologyContainer'
+import GridGroup from '../groups/GridGroup'
+
+function MapLayer() {
+    return (
+        <Layer>
+            <Group>
+                <Backdrop />
+                <TopologyContainer />
+                <GridGroup />
+            </Group>
+        </Layer>
+    )
+}
+
+export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
new file mode 100644
index 00000000..47d9c992
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { addRackToTile } from '../../../../redux/actions/topology/room'
+import { findTileWithPosition } from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
+import TilePlusIcon from '../elements/TilePlusIcon'
+
+function ObjectHoverLayer() {
+    const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
+    const isValid = useSelector((state) => (x, y) => {
+        if (state.interactionLevel.mode !== 'ROOM') {
+            return false
+        }
+
+        const currentRoom = state.objects.room[state.interactionLevel.roomId]
+        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
+        const tile = findTileWithPosition(tiles, x, y)
+
+        return !(tile === null || tile.rack)
+    })
+
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(addRackToTile(x, y))
+    return (
+        <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid}>
+            <TilePlusIcon />
+        </HoverLayerComponent>
+    )
+}
+
+export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
new file mode 100644
index 00000000..59f83b2b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
+import {
+    deriveValidNextTilePositions,
+    findPositionInPositions,
+    findPositionInRooms,
+} from '../../../../util/tile-calculations'
+import HoverLayerComponent from './HoverLayerComponent'
+
+function RoomHoverLayer() {
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
+    const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isValid = useSelector((state) => (x, y) => {
+        const newRoom = { ...state.objects.room[state.construction.currentRoomInConstruction] }
+        const oldRooms = Object.keys(state.objects.room)
+            .map((id) => ({ ...state.objects.room[id] }))
+            .filter(
+                (room) =>
+                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
+                    room._id !== state.construction.currentRoomInConstruction
+            )
+
+        ;[...oldRooms, newRoom].forEach((room) => {
+            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
+        })
+        if (newRoom.tiles.length === 0) {
+            return findPositionInRooms(oldRooms, x, y) === -1
+        }
+
+        const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
+        return findPositionInPositions(validNextPositions, x, y) !== -1
+    })
+
+    return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
+}
+
+export default RoomHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
new file mode 100644
index 00000000..ececd07b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Button, TextInput } from '@patternfly/react-core'
+import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
+
+function NameComponent({ name, onEdit }) {
+    const [isEditing, setEditing] = useState(false)
+    const nameInput = useRef(null)
+
+    const onCancel = () => {
+        nameInput.current.value = name
+        setEditing(false)
+    }
+
+    const onSubmit = (event) => {
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+        if (name) {
+            onEdit(name)
+        }
+
+        setEditing(false)
+    }
+
+    return (
+        <form
+            className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
+            onSubmit={onSubmit}
+        >
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
+                    {name}
+                </div>
+                <div className="pf-c-inline-edit__action pf-m-enable-editable">
+                    <Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
+                        <PencilAltIcon />
+                    </Button>
+                </div>
+            </div>
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__input">
+                    <TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
+                </div>
+                <div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
+                    <div className="pf-c-inline-edit__action pf-m-valid">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
+                            <CheckIcon />
+                        </Button>
+                    </div>
+                    <div className="pf-c-inline-edit__action">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
+                            <TimesIcon />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    )
+}
+
+NameComponent.propTypes = {
+    name: PropTypes.string,
+    onEdit: PropTypes.func,
+}
+
+export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
new file mode 100644
index 00000000..5d9340b2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InteractionLevel } from '../../../shapes'
+import BuildingSidebar from './building/BuildingSidebar'
+import {
+    Button,
+    DrawerActions,
+    DrawerCloseButton,
+    DrawerHead,
+    DrawerPanelBody,
+    DrawerPanelContent,
+    Flex,
+    Title,
+} from '@patternfly/react-core'
+import { AngleLeftIcon } from '@patternfly/react-icons'
+import { useDispatch } from 'react-redux'
+import { backButton } from './TopologySidebar.module.scss'
+import RoomSidebar from './room/RoomSidebar'
+import RackSidebar from './rack/RackSidebar'
+import MachineSidebar from './machine/MachineSidebar'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
+
+const name = {
+    BUILDING: 'Building',
+    ROOM: 'Room',
+    RACK: 'Rack',
+    MACHINE: 'Machine',
+}
+
+function TopologySidebar({ interactionLevel, onClose }) {
+    let sidebarContent
+
+    switch (interactionLevel.mode) {
+        case 'BUILDING':
+            sidebarContent = <BuildingSidebar />
+            break
+        case 'ROOM':
+            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
+            break
+        case 'RACK':
+            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
+            break
+        case 'MACHINE':
+            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
+            break
+        default:
+            sidebarContent = 'Missing Content'
+    }
+
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+
+    return (
+        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
+            <DrawerHead>
+                <Flex>
+                    <Button
+                        variant="tertiary"
+                        isSmall
+                        className={backButton}
+                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
+                    >
+                        <AngleLeftIcon />
+                    </Button>
+                    <Title className="pf-u-align-self-center" headingLevel="h1">
+                        {name[interactionLevel.mode]}
+                    </Title>
+                </Flex>
+                <DrawerActions>
+                    <DrawerCloseButton onClose={onClose} />
+                </DrawerActions>
+            </DrawerHead>
+            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
+        </DrawerPanelContent>
+    )
+}
+
+TopologySidebar.propTypes = {
+    interactionLevel: InteractionLevel,
+    onClose: PropTypes.func,
+}
+
+export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
new file mode 100644
index 00000000..45dc98da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
@@ -0,0 +1,37 @@
+/*!
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.backButton {
+    &:global(.pf-c-button) {
+        align-self: center;
+        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+        color: var(--pf-global--Color--400);
+
+        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+
+        &:hover,
+        &:focus {
+            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
new file mode 100644
index 00000000..5fcd46be
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import NewRoomConstructionContainer from './NewRoomConstructionContainer'
+
+function BuildingSidebar() {
+    return <NewRoomConstructionContainer />
+}
+
+export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..9fc85d0c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+
+function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
+    if (currentRoomInConstruction === '-1') {
+        return (
+            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
+                Construct a new room
+            </Button>
+        )
+    }
+    return (
+        <Toolbar
+            inset={{
+                default: 'insetNone',
+            }}
+        >
+            <ToolbarContent>
+                <ToolbarGroup>
+                    <ToolbarItem>
+                        <Button icon={<CheckIcon />} onClick={onFinish}>
+                            Finalize new room
+                        </Button>
+                    </ToolbarItem>
+                    <ToolbarItem widths={{ default: '100%' }}>
+                        <Button isBlock variant="secondary" onClick={onCancel}>
+                            Cancel
+                        </Button>
+                    </ToolbarItem>
+                </ToolbarGroup>
+            </ToolbarContent>
+        </Toolbar>
+    )
+}
+
+NewRoomConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onFinish: PropTypes.func,
+    onCancel: PropTypes.func,
+    currentRoomInConstruction: PropTypes.string,
+}
+
+export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..c149b224
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+    cancelNewRoomConstruction,
+    finishNewRoomConstruction,
+    startNewRoomConstruction,
+} from '../../../../redux/actions/topology/building'
+import NewRoomConstructionComponent from './NewRoomConstructionComponent'
+
+function NewRoomConstructionButton() {
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const dispatch = useDispatch()
+
+    return (
+        <NewRoomConstructionComponent
+            onStart={() => dispatch(startNewRoomConstruction())}
+            onFinish={() => dispatch(finishNewRoomConstruction())}
+            onCancel={() => dispatch(cancelNewRoomConstruction())}
+            currentRoomInConstruction={currentRoomInConstruction}
+        />
+    )
+}
+
+export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
new file mode 100644
index 00000000..00ce4603
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.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 React, { useState } from 'react'
+import { useDispatch, useSelector } 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() {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
+    const position = useSelector((state) => state.interactionLevel.position)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine(rackId, position))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this machine
+            </Button>
+            <ConfirmationModal
+                title="Delete this machine"
+                message="Are you sure you want to delete this machine?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
new file mode 100644
index 00000000..0c3dea98
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import UnitTabsComponent from './UnitTabsComponent'
+import DeleteMachine from './DeleteMachine'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function MachineSidebar({ tileId, position }) {
+    const machine = useSelector(({ objects }) => {
+        const rack = objects.rack[objects.tile[tileId].rack]
+        return objects.machine[rack.machines[position - 1]]
+    })
+    const machineId = machine._id
+    return (
+        <div>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        Machine at position {machine.position}
+                    </TextListItem>
+                </TextList>
+
+                <Title headingLevel="h2">Actions</Title>
+                <DeleteMachine />
+
+                <Title headingLevel="h2">Units</Title>
+            </TextContent>
+            <div className="pf-u-h-100">
+                <UnitTabsComponent machineId={machineId} />
+            </div>
+        </div>
+    )
+}
+
+MachineSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+    position: PropTypes.number.isRequired,
+}
+
+export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
new file mode 100644
index 00000000..88591208
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+
+function UnitAddComponent({ units, onAdd }) {
+    const [isOpen, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <InputGroup>
+            <Select
+                variant={SelectVariant.single}
+                placeholderText="Select a unit"
+                aria-label="Select Unit"
+                onToggle={() => setOpen(!isOpen)}
+                isOpen={isOpen}
+                onSelect={(_, selection) => {
+                    setSelected(selection)
+                    setOpen(false)
+                }}
+                selections={selected}
+            >
+                {units.map((unit) => (
+                    <SelectOption value={unit._id} key={unit._id}>
+                        {unit.name}
+                    </SelectOption>
+                ))}
+            </Select>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+                Add
+            </Button>
+        </InputGroup>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
new file mode 100644
index 00000000..fc805b95
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitAddComponent from './UnitAddComponent'
+import { addUnit } from '../../../../redux/actions/topology/machine'
+
+function UnitAddContainer({ machineId, unitType }) {
+    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const dispatch = useDispatch()
+
+    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
+
+    return <UnitAddComponent onAdd={onAdd} units={units} />
+}
+
+UnitAddContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
new file mode 100644
index 00000000..daa3e7a7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Popover,
+    Title,
+} from '@patternfly/react-core'
+import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../shapes'
+
+function UnitInfo({ unit, unitType }) {
+    if (unitType === 'cpu' || unitType === 'gpu') {
+        return (
+            <DescriptionList>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+                </DescriptionListGroup>
+            </DescriptionList>
+        )
+    }
+
+    return (
+        <DescriptionList>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Speed</DescriptionListTerm>
+                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Capacity</DescriptionListTerm>
+                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+            </DescriptionListGroup>
+        </DescriptionList>
+    )
+}
+
+UnitInfo.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
+}
+
+function UnitListComponent({ unitType, units, onDelete }) {
+    if (units.length === 0) {
+        return (
+            <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h5" size="lg">
+                    No units found
+                </Title>
+                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <DataList aria-label="Machine Units" isCompact>
+            {units.map((unit, index) => (
+                <DataListItem key={index}>
+                    <DataListItemRow>
+                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
+                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                            <Popover
+                                headerContent="Unit Information"
+                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
+                            >
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <InfoIcon />
+                                </Button>
+                            </Popover>
+                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
+                                <TrashIcon />
+                            </Button>
+                        </DataListAction>
+                    </DataListItemRow>
+                </DataListItem>
+            ))}
+        </DataList>
+    )
+}
+
+UnitListComponent.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
+    onDelete: PropTypes.func,
+}
+
+export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
new file mode 100644
index 00000000..901fa45b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitListComponent from './UnitListComponent'
+import { deleteUnit } from '../../../../redux/actions/topology/machine'
+
+const unitMapping = {
+    cpu: 'cpus',
+    gpu: 'gpus',
+    memory: 'memories',
+    storage: 'storages',
+}
+
+function UnitListContainer({ machineId, unitType }) {
+    const dispatch = useDispatch()
+    const units = useSelector((state) => {
+        const machine = state.objects.machine[machineId]
+        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+    })
+
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+
+    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
+}
+
+UnitListContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..6d10d2df
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
+import UnitAddContainer from './UnitAddContainer'
+import UnitListContainer from './UnitListContainer'
+
+function UnitTabsComponent({ machineId }) {
+    const [activeTab, setActiveTab] = useState('cpu-units')
+
+    return (
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="cpu" />
+                <UnitListContainer machineId={machineId} unitType="cpu" />
+            </Tab>
+            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="gpu" />
+                <UnitListContainer machineId={machineId} unitType="gpu" />
+            </Tab>
+            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="memory" />
+                <UnitListContainer machineId={machineId} unitType="memory" />
+            </Tab>
+            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="storage" />
+                <UnitListContainer machineId={machineId} unitType="storage" />
+            </Tab>
+        </Tabs>
+    )
+}
+
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
+export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
new file mode 100644
index 00000000..e944c2e8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
+import { addPrefab } from '../../../../api/prefabs'
+
+function AddPrefab({ tileId }) {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(addPrefab('name', tileId))
+    return (
+        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
+            Save this rack to a prefab
+        </Button>
+    )
+}
+
+AddPrefab.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..80c6349a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.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 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 callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack(tileId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRackContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
new file mode 100644
index 00000000..921622d6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Image from 'next/image'
+import { Flex, Label } from '@patternfly/react-core'
+import { Machine } from '../../../../shapes'
+
+const UnitIcon = ({ id, type }) => (
+    <Image
+        src={'/img/topology/' + id + '-icon.png'}
+        alt={'Machine contains ' + type + ' units'}
+        layout="intrinsic"
+        height={24}
+        width={24}
+    />
+)
+
+UnitIcon.propTypes = {
+    id: PropTypes.string,
+    type: PropTypes.string,
+}
+
+function MachineComponent({ machine, onClick }) {
+    const hasNoUnits =
+        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
+
+    return (
+        <Flex onClick={() => onClick()}>
+            {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+            {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+            {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+            {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+            {hasNoUnits ? (
+                <Label variant="outline" color="orange">
+                    Machine with no units
+                </Label>
+            ) : undefined}
+        </Flex>
+    )
+}
+
+MachineComponent.propTypes = {
+    machine: Machine.isRequired,
+    onClick: PropTypes.func,
+}
+
+export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
new file mode 100644
index 00000000..de7a2140
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import MachineComponent from './MachineComponent'
+import {
+    Badge,
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+} from '@patternfly/react-core'
+import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
+import { Machine } from '../../../../shapes'
+
+function MachineListComponent({ machines = [], onSelect, onAdd }) {
+    return (
+        <DataList aria-label="Rack Units">
+            {machines.map((machine, index) =>
+                machine ? (
+                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="primary content">
+                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <AngleRightIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                ) : (
+                    <DataListItem key={index}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="add" className="text-secondary">
+                                        Empty Slot
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
+                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
+                                    <PlusIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                )
+            )}
+        </DataList>
+    )
+}
+
+MachineListComponent.propTypes = {
+    machines: PropTypes.arrayOf(Machine),
+    onSelect: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
new file mode 100644
index 00000000..6fbff949
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import MachineListComponent from './MachineListComponent'
+import { goFromRackToMachine } from '../../../../redux/actions/interaction-level'
+import { addMachine } from '../../../../redux/actions/topology/rack'
+
+function MachineListContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const machinesNull = useMemo(() => {
+        const res = Array(rack.capacity).fill(null)
+        for (const machine of machines) {
+            res[machine.position - 1] = machine
+        }
+        return res
+    }, [rack, machines])
+    const dispatch = useDispatch()
+
+    return (
+        <MachineListComponent
+            {...props}
+            machines={machinesNull}
+            onAdd={(index) => dispatch(addMachine(rack._id, index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
+    )
+}
+
+MachineListContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
new file mode 100644
index 00000000..09d73af7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRackName } from '../../../../redux/actions/topology/rack'
+
+const RackNameContainer = ({ tileId }) => {
+    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(_id, name))
+        }
+    }
+    return <NameComponent name={rackName} onEdit={callback} />
+}
+
+RackNameContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
new file mode 100644
index 00000000..3c9f152a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import RackNameContainer from './RackNameContainer'
+import AddPrefab from './AddPrefab'
+import DeleteRackContainer from './DeleteRackContainer'
+import MachineListContainer from './MachineListContainer'
+import {
+    Skeleton,
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function RackSidebar({ tileId }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+
+    return (
+        <div className={sidebarContainer}>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem
+                        component={TextListItemVariants.dt}
+                        className="pf-u-display-inline-flex pf-u-align-items-center"
+                    >
+                        Name
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        <RackNameContainer tileId={tileId} />
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
+                    </TextListItem>
+                </TextList>
+                <Title headingLevel="h2">Actions</Title>
+                <AddPrefab tileId={tileId} />
+                <DeleteRackContainer tileId={tileId} />
+
+                <Title headingLevel="h2">Slots</Title>
+            </TextContent>
+            <div className={machineListContainer}>
+                <MachineListContainer tileId={tileId} />
+            </div>
+        </div>
+    )
+}
+
+RackSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
new file mode 100644
index 00000000..6f258aec
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
@@ -0,0 +1,12 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 10px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..29b8f78a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteRoom } from '../../../../redux/actions/topology/room'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import { Button } from '@patternfly/react-core'
+
+function DeleteRoomContainer({ roomId }) {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom(roomId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
new file mode 100644
index 00000000..7a278cd6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { finishRoomEdit, startRoomEdit } from '../../../../redux/actions/topology/building'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
+import { Button } from '@patternfly/react-core'
+
+function EditRoomContainer({ roomId }) {
+    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(startRoomEdit(roomId))
+    const onFinish = () => dispatch(finishRoomEdit())
+
+    return isEditing ? (
+        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
+            Finish editing room
+        </Button>
+    ) : (
+        <Button
+            variant="tertiary"
+            icon={<PencilAltIcon />}
+            isBlock
+            disabled={isInRackConstructionMode}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+            className="pf-u-mb-sm"
+        >
+            Edit the tiles of this room
+        </Button>
+    )
+}
+
+EditRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
new file mode 100644
index 00000000..a384d5d5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button } from '@patternfly/react-core'
+import { PlusIcon, TimesIcon } from '@patternfly/react-icons'
+
+const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
+    if (inRackConstructionMode) {
+        return (
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
+                Stop rack construction
+            </Button>
+        )
+    }
+
+    return (
+        <Button
+            icon={<PlusIcon />}
+            isBlock
+            isDisabled={isEditingRoom}
+            onClick={() => (isEditingRoom ? undefined : onStart())}
+            className="pf-u-mb-sm"
+        >
+            Start rack construction
+        </Button>
+    )
+}
+
+RackConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onStop: PropTypes.func,
+    inRackConstructionMode: PropTypes.bool,
+    isEditingRoom: PropTypes.bool,
+}
+
+export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
new file mode 100644
index 00000000..e04287a5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { startRackConstruction, stopRackConstruction } from '../../../../redux/actions/topology/room'
+import RackConstructionComponent from './RackConstructionComponent'
+
+function RackConstructionContainer(props) {
+    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+
+    const dispatch = useDispatch()
+    const onStart = () => dispatch(startRackConstruction())
+    const onStop = () => dispatch(stopRackConstruction())
+    return (
+        <RackConstructionComponent
+            {...props}
+            inRackConstructionMode={isRackConstructionMode}
+            isEditingRoom={isEditingRoom}
+            onStart={onStart}
+            onStop={onStop}
+        />
+    )
+}
+
+export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
new file mode 100644
index 00000000..e8d8b33c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRoomName } from '../../../../redux/actions/topology/room'
+
+function RoomName({ roomId }) {
+    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(_id, name))
+        }
+    }
+    return <NameComponent name={roomName} onEdit={callback} />
+}
+
+RoomName.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomName
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
new file mode 100644
index 00000000..6ad489e0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import RoomName from './RoomName'
+import RackConstructionContainer from './RackConstructionContainer'
+import EditRoomContainer from './EditRoomContainer'
+import DeleteRoomContainer from './DeleteRoomContainer'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+
+const RoomSidebar = ({ roomId }) => {
+    return (
+        <TextContent>
+            <Title headingLevel="h2">Details</Title>
+            <TextList component={TextListVariants.dl}>
+                <TextListItem
+                    component={TextListItemVariants.dt}
+                    className="pf-u-display-inline-flex pf-u-align-items-center"
+                >
+                    Name
+                </TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>
+                    <RoomName roomId={roomId} />
+                </TextListItem>
+            </TextList>
+            <Title headingLevel="h2">Construction</Title>
+            <RackConstructionContainer />
+            <EditRoomContainer roomId={roomId} />
+            <DeleteRoomContainer roomId={roomId} />
+        </TextContent>
+    )
+}
+
+RoomSidebar.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
new file mode 100644
index 00000000..f6e1c98b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/ConfirmationModal.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Modal from './Modal'
+
+function ConfirmationModal({ title, message, isOpen, callback }) {
+    return (
+        <Modal
+            title={title}
+            isOpen={isOpen}
+            onSubmit={() => callback(true)}
+            onCancel={() => callback(false)}
+            submitButtonType="danger"
+            submitButtonText="Confirm"
+        >
+            {message}
+        </Modal>
+    )
+}
+
+ConfirmationModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+}
+
+export default ConfirmationModal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
new file mode 100644
index 00000000..d4577062
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/Modal.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
+
+function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const actions = [
+        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
+            {submitButtonText}
+        </Button>,
+        <Button variant="link" onClick={onCancel} key="cancel">
+            Cancel
+        </Button>,
+    ]
+
+    return (
+        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
+            {children}
+        </PModal>
+    )
+}
+
+Modal.propTypes = {
+    title: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    submitButtonType: PropTypes.string,
+    submitButtonText: PropTypes.string,
+    children: PropTypes.node,
+}
+
+Modal.defaultProps = {
+    submitButtonType: 'primary',
+    submitButtonText: 'Save',
+    isOpen: false,
+}
+
+export default Modal
diff --git a/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
new file mode 100644
index 00000000..392a729e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/util/modals/TextInputModal.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import Modal from './Modal'
+import { Form, FormGroup, TextInput } from '@patternfly/react-core'
+
+function TextInputModal({ title, label, isOpen, callback, initialValue }) {
+    const textInput = useRef(null)
+    const [isSubmitted, setSubmitted] = useState(false)
+    const [isValid, setValid] = useState(true)
+
+    const resetState = () => {
+        textInput.current.value = ''
+        setSubmitted(false)
+        setValid(false)
+    }
+    const onSubmit = (event) => {
+        const value = textInput.current.value
+        setSubmitted(true)
+
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!value) {
+            setValid(false)
+            return false
+        }
+
+        callback(value)
+        resetState()
+        return true
+    }
+    const onCancel = () => {
+        callback(undefined)
+        resetState()
+    }
+
+    return (
+        <Modal title={title} isOpen={isOpen} onSubmit={onSubmit} onCancel={onCancel}>
+            <Form onSubmit={onSubmit}>
+                <FormGroup
+                    label={label}
+                    fieldId="text-input"
+                    isRequired
+                    validated={isSubmitted && !isValid ? 'error' : 'default'}
+                    helperTextInvalid="This field cannot be empty"
+                >
+                    <TextInput
+                        id="text-input"
+                        name="text-input"
+                        isRequired
+                        type="text"
+                        ref={textInput}
+                        defaultValue={initialValue}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+TextInputModal.propTypes = {
+    title: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    callback: PropTypes.func.isRequired,
+    initialValue: PropTypes.string,
+}
+
+export default TextInputModal
-- 
cgit v1.2.3


From 28d6d13844db28745bc2813e87a367131f862070 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 20:59:11 +0200
Subject: refactor(ui): Move page components in separate files

---
 .../src/components/portfolios/PortfolioOverview.js | 121 ++++++++++++++++
 .../components/portfolios/PortfolioResultInfo.js   |  40 ++++++
 .../src/components/portfolios/PortfolioResults.js  | 156 +++++++++++++++++++++
 .../portfolios/results/PortfolioResultInfo.js      |  40 ------
 .../portfolios/results/PortfolioResults.js         | 134 ------------------
 .../src/components/projects/ProjectOverview.js     |  98 +++++++++++++
 .../src/components/topologies/TopologyMap.js       |  76 ++++++++++
 .../src/components/topologies/TopologyOverview.js  |  77 ++++++++++
 8 files changed, 568 insertions(+), 174 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/PortfolioOverview.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResultInfo.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioOverview.js b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioOverview.js
new file mode 100644
index 00000000..580b0a29
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioOverview.js
@@ -0,0 +1,121 @@
+/*
+ * 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,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Chip,
+    ChipGroup,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Grid,
+    GridItem,
+    Skeleton,
+} from '@patternfly/react-core'
+import React from 'react'
+import { usePortfolio } from '../../data/project'
+import { METRIC_NAMES } from '../../util/available-metrics'
+import NewScenario from './NewScenario'
+import ScenarioTable from './ScenarioTable'
+
+function PortfolioOverview({ portfolioId }) {
+    const { data: portfolio } = usePortfolio(portfolioId)
+
+    return (
+        <Grid hasGutter>
+            <GridItem md={2}>
+                <Card>
+                    <CardTitle>Details</CardTitle>
+                    <CardBody>
+                        <DescriptionList>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Name</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Scenarios</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {portfolio?.scenarioIds.length ?? <Skeleton screenreaderText="Loading portfolio" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Metrics</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {portfolio?.targets?.enabledMetrics ? (
+                                        portfolio.targets.enabledMetrics.length > 0 ? (
+                                            <ChipGroup>
+                                                {portfolio.targets.enabledMetrics.map((metric) => (
+                                                    <Chip isReadOnly key={metric}>
+                                                        {METRIC_NAMES[metric]}
+                                                    </Chip>
+                                                ))}
+                                            </ChipGroup>
+                                        ) : (
+                                            'No metrics enabled'
+                                        )
+                                    ) : (
+                                        <Skeleton screenreaderText="Loading portfolio" />
+                                    )}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {portfolio?.targets?.repeatsPerScenario ?? (
+                                        <Skeleton screenreaderText="Loading portfolio" />
+                                    )}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={6}>
+                <Card>
+                    <CardHeader>
+                        <CardActions>
+                            <NewScenario portfolioId={portfolioId} />
+                        </CardActions>
+                        <CardTitle>Scenarios</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <ScenarioTable portfolioId={portfolioId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+PortfolioOverview.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default PortfolioOverview
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResultInfo.js
new file mode 100644
index 00000000..dbfa928f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResultInfo.js
@@ -0,0 +1,40 @@
+/*
+ * 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 { Tooltip } from '@patternfly/react-core'
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
+import { METRIC_DESCRIPTIONS } from '../../util/available-metrics'
+
+function PortfolioResultInfo({ metric }) {
+    return (
+        <Tooltip position="top" content={<div>{METRIC_DESCRIPTIONS[metric]}</div>}>
+            <OutlinedQuestionCircleIcon title="Metric information" />
+        </Tooltip>
+    )
+}
+
+PortfolioResultInfo.propTypes = {
+    metric: PropTypes.string.isRequired,
+}
+
+export default PortfolioResultInfo
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
new file mode 100644
index 00000000..00023d9e
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/PortfolioResults.js
@@ -0,0 +1,156 @@
+/*
+ * 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 { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
+import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../util/available-metrics'
+import { mean, std } from 'mathjs'
+import approx from 'approximate-number'
+import {
+    Bullseye,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Grid,
+    GridItem,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
+import { usePortfolioScenarios } from '../../data/project'
+import PortfolioResultInfo from './PortfolioResultInfo'
+import NewScenario from './NewScenario'
+
+const PortfolioResults = ({ portfolioId }) => {
+    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
+
+    if (status === 'loading') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={Spinner} />
+                    <Title size="lg" headingLevel="h4">
+                        Loading Results
+                    </Title>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (status === 'error') {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={ErrorCircleOIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        Unable to connect
+                    </Title>
+                    <EmptyStateBody>
+                        There was an error retrieving data. Check your connection and try again.
+                    </EmptyStateBody>
+                </EmptyState>
+            </Bullseye>
+        )
+    } else if (scenarios.length === 0) {
+        return (
+            <Bullseye>
+                <EmptyState>
+                    <EmptyStateIcon variant="container" component={CubesIcon} />
+                    <Title size="lg" headingLevel="h4">
+                        No results
+                    </Title>
+                    <EmptyStateBody>
+                        No results are currently available for this portfolio. Run a scenario to obtain simulation
+                        results.
+                    </EmptyStateBody>
+                    <NewScenario portfolioId={portfolioId} />
+                </EmptyState>
+            </Bullseye>
+        )
+    }
+
+    const dataPerMetric = {}
+
+    AVAILABLE_METRICS.forEach((metric) => {
+        dataPerMetric[metric] = scenarios
+            .filter((scenario) => scenario.results)
+            .map((scenario) => ({
+                name: scenario.name,
+                value: mean(scenario.results[metric]),
+                errorX: std(scenario.results[metric]),
+            }))
+    })
+
+    return (
+        <Grid hasGutter>
+            {AVAILABLE_METRICS.map((metric) => (
+                <GridItem xl={6} lg={12} key={metric}>
+                    <Card>
+                        <CardHeader>
+                            <CardActions>
+                                <PortfolioResultInfo metric={metric} />
+                            </CardActions>
+                            <CardTitle>{METRIC_NAMES[metric]}</CardTitle>
+                        </CardHeader>
+                        <CardBody>
+                            <ResponsiveContainer aspect={16 / 9} width="100%">
+                                <ComposedChart
+                                    data={dataPerMetric[metric]}
+                                    margin={{ left: 35, bottom: 15 }}
+                                    layout="vertical"
+                                >
+                                    <CartesianGrid strokeDasharray="3 3" />
+                                    <XAxis
+                                        tickFormatter={(tick) => approx(tick)}
+                                        label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
+                                        type="number"
+                                    />
+                                    <YAxis dataKey="name" type="category" />
+                                    <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
+                                    <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
+                                        <ErrorBar
+                                            dataKey="errorX"
+                                            width={10}
+                                            strokeWidth={3}
+                                            stroke="#FF6600"
+                                            direction="x"
+                                        />
+                                    </Scatter>
+                                </ComposedChart>
+                            </ResponsiveContainer>
+                        </CardBody>
+                    </Card>
+                </GridItem>
+            ))}
+        </Grid>
+    )
+}
+
+PortfolioResults.propTypes = {
+    portfolioId: PropTypes.string,
+}
+
+export default PortfolioResults
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
deleted file mode 100644
index 09348e60..00000000
--- a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResultInfo.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { Tooltip } from '@patternfly/react-core'
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'
-import { METRIC_DESCRIPTIONS } from '../../../util/available-metrics'
-
-function PortfolioResultInfo({ metric }) {
-    return (
-        <Tooltip position="top" content={<div>{METRIC_DESCRIPTIONS[metric]}</div>}>
-            <OutlinedQuestionCircleIcon title="Metric information" />
-        </Tooltip>
-    )
-}
-
-PortfolioResultInfo.propTypes = {
-    metric: PropTypes.string.isRequired,
-}
-
-export default PortfolioResultInfo
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js b/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
deleted file mode 100644
index f1883e68..00000000
--- a/opendc-web/opendc-web-ui/src/components/portfolios/results/PortfolioResults.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Bar, CartesianGrid, ComposedChart, ErrorBar, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts'
-import { AVAILABLE_METRICS, METRIC_NAMES, METRIC_UNITS } from '../../../util/available-metrics'
-import { mean, std } from 'mathjs'
-import approx from 'approximate-number'
-import {
-    Bullseye,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    EmptyState,
-    EmptyStateBody,
-    EmptyStateIcon,
-    Grid,
-    GridItem,
-    Spinner,
-    Title,
-} from '@patternfly/react-core'
-import { ErrorCircleOIcon, CubesIcon } from '@patternfly/react-icons'
-import { usePortfolioScenarios } from '../../../data/project'
-import PortfolioResultInfo from './PortfolioResultInfo'
-import NewScenario from '../NewScenario'
-
-const PortfolioResults = ({ portfolioId }) => {
-    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
-
-    if (status === 'loading') {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={Spinner} />
-                    <Title size="lg" headingLevel="h4">
-                        Loading Results
-                    </Title>
-                </EmptyState>
-            </Bullseye>
-        )
-    } else if (status === 'error') {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={ErrorCircleOIcon} />
-                    <Title size="lg" headingLevel="h4">
-                        Unable to connect
-                    </Title>
-                    <EmptyStateBody>
-                        There was an error retrieving data. Check your connection and try again.
-                    </EmptyStateBody>
-                </EmptyState>
-            </Bullseye>
-        )
-    } else if (scenarios.length === 0) {
-        return (
-            <Bullseye>
-                <EmptyState>
-                    <EmptyStateIcon variant="container" component={CubesIcon} />
-                    <Title size="lg" headingLevel="h4">
-                        No results
-                    </Title>
-                    <EmptyStateBody>
-                        No results are currently available for this portfolio. Run a scenario to obtain simulation
-                        results.
-                    </EmptyStateBody>
-                    <NewScenario portfolioId={portfolioId} />
-                </EmptyState>
-            </Bullseye>
-        )
-    }
-
-    const dataPerMetric = {}
-
-    AVAILABLE_METRICS.forEach((metric) => {
-        dataPerMetric[metric] = scenarios
-            .filter((scenario) => scenario.results)
-            .map((scenario) => ({
-                name: scenario.name,
-                value: mean(scenario.results[metric]),
-                errorX: std(scenario.results[metric]),
-            }))
-    })
-
-    return (
-        <Grid hasGutter>
-            {AVAILABLE_METRICS.map((metric) => (
-                <GridItem xl={6} lg={12} key={metric}>
-                    <Card>
-                        <CardHeader>
-                            <CardActions>
-                                <PortfolioResultInfo metric={metric} />
-                            </CardActions>
-                            <CardTitle>{METRIC_NAMES[metric]}</CardTitle>
-                        </CardHeader>
-                        <CardBody>
-                            <ResponsiveContainer aspect={16 / 9} width="100%">
-                                <ComposedChart
-                                    data={dataPerMetric[metric]}
-                                    margin={{ left: 35, bottom: 15 }}
-                                    layout="vertical"
-                                >
-                                    <CartesianGrid strokeDasharray="3 3" />
-                                    <XAxis
-                                        tickFormatter={(tick) => approx(tick)}
-                                        label={{ value: METRIC_UNITS[metric], position: 'bottom', offset: 0 }}
-                                        type="number"
-                                    />
-                                    <YAxis dataKey="name" type="category" />
-                                    <Bar dataKey="value" fill="#3399FF" isAnimationActive={false} />
-                                    <Scatter dataKey="value" opacity={0} isAnimationActive={false}>
-                                        <ErrorBar
-                                            dataKey="errorX"
-                                            width={10}
-                                            strokeWidth={3}
-                                            stroke="#FF6600"
-                                            direction="x"
-                                        />
-                                    </Scatter>
-                                </ComposedChart>
-                            </ResponsiveContainer>
-                        </CardBody>
-                    </Card>
-                </GridItem>
-            ))}
-        </Grid>
-    )
-}
-
-PortfolioResults.propTypes = {
-    portfolioId: PropTypes.string,
-}
-
-export default PortfolioResults
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js
new file mode 100644
index 00000000..65b8f5a0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectOverview.js
@@ -0,0 +1,98 @@
+/*
+ * 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,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Grid,
+    GridItem,
+    Skeleton,
+} from '@patternfly/react-core'
+import NewTopology from './NewTopology'
+import TopologyTable from './TopologyTable'
+import NewPortfolio from './NewPortfolio'
+import PortfolioTable from './PortfolioTable'
+import { useProject } from '../../data/project'
+
+function ProjectOverview({ projectId }) {
+    const { data: project } = useProject(projectId)
+
+    return (
+        <Grid hasGutter>
+            <GridItem md={2}>
+                <Card>
+                    <CardTitle>Details</CardTitle>
+                    <CardBody>
+                        <DescriptionList>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Name</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {project?.name ?? <Skeleton screenreaderText="Loading project" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardHeader>
+                        <CardActions>
+                            <NewTopology projectId={projectId} />
+                        </CardActions>
+                        <CardTitle>Topologies</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <TopologyTable projectId={projectId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardHeader>
+                        <CardActions>
+                            <NewPortfolio projectId={projectId} />
+                        </CardActions>
+                        <CardTitle>Portfolios</CardTitle>
+                    </CardHeader>
+                    <CardBody>
+                        <PortfolioTable projectId={projectId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+ProjectOverview.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default ProjectOverview
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
new file mode 100644
index 00000000..c16f554c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useState } from 'react'
+import {
+    Bullseye,
+    Drawer,
+    DrawerContent,
+    DrawerContentBody,
+    EmptyState,
+    EmptyStateIcon,
+    Spinner,
+    Title,
+} from '@patternfly/react-core'
+import { configure, HotKeys } from 'react-hotkeys'
+import { KeymapConfiguration } from '../../hotkeys'
+import MapStage from './map/MapStage'
+import Collapse from './map/controls/Collapse'
+import { useSelector } from 'react-redux'
+import TopologySidebar from './sidebar/TopologySidebar'
+
+function TopologyMap() {
+    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+
+    const [isExpanded, setExpanded] = useState(true)
+    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
+
+    // Make sure that holding down a key will generate repeated events
+    configure({
+        ignoreRepeatedEventsWhenKeyHeldDown: false,
+    })
+
+    return topologyIsLoading ? (
+        <Bullseye>
+            <EmptyState>
+                <EmptyStateIcon variant="container" component={Spinner} />
+                <Title size="lg" headingLevel="h4">
+                    Loading Topology
+                </Title>
+            </EmptyState>
+        </Bullseye>
+    ) : (
+        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
+            <Drawer isExpanded={isExpanded}>
+                <DrawerContent panelContent={panelContent}>
+                    <DrawerContentBody>
+                        <MapStage />
+                        <Collapse onClick={() => setExpanded(true)} />
+                    </DrawerContentBody>
+                </DrawerContent>
+            </Drawer>
+        </HotKeys>
+    )
+}
+
+export default TopologyMap
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
new file mode 100644
index 00000000..f773dcd1
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -0,0 +1,77 @@
+/*
+ * 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 { useTopology } from '../../data/topology'
+import { parseAndFormatDateTime } from '../../util/date-time'
+
+function TopologyOverview({ topologyId }) {
+    const { data: topology } = useTopology(topologyId)
+
+    return (
+        <Grid hasGutter>
+            <GridItem md={2}>
+                <Card>
+                    <CardTitle>Details</CardTitle>
+                    <CardBody>
+                        <DescriptionList>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Name</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {topology?.name ?? <Skeleton screenreaderText="Loading topology" />}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                            <DescriptionListGroup>
+                                <DescriptionListTerm>Last edited</DescriptionListTerm>
+                                <DescriptionListDescription>
+                                    {topology ? (
+                                        parseAndFormatDateTime(topology.datetimeLastEdited)
+                                    ) : (
+                                        <Skeleton screenreaderText="Loading topology" />
+                                    )}
+                                </DescriptionListDescription>
+                            </DescriptionListGroup>
+                        </DescriptionList>
+                    </CardBody>
+                </Card>
+            </GridItem>
+        </Grid>
+    )
+}
+
+TopologyOverview.propTypes = {
+    topologyId: PropTypes.string,
+}
+
+export default TopologyOverview
-- 
cgit v1.2.3


From 28a4259c43e6180723b15a8c36a9b36871420f8a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Jul 2021 14:59:58 +0200
Subject: feat(ui): Add table view for topology rooms

---
 .../src/components/topologies/RoomTable.js         | 70 ++++++++++++++++++++++
 .../src/components/topologies/TopologyOverview.js  | 11 +++-
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
new file mode 100644
index 00000000..8a5c401f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -0,0 +1,70 @@
+import { Button } from '@patternfly/react-core'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { useTopology } from '../../data/topology'
+import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { goToRoom } from '../../redux/actions/interaction-level'
+import { deleteRoom } from '../../redux/actions/topology/room'
+import TableEmptyState from '../util/TableEmptyState'
+
+function RoomTable({ topologyId }) {
+    const dispatch = useDispatch()
+    const { status, data: topology } = useTopology(topologyId)
+
+    const onClick = (room) => dispatch(goToRoom(room._id))
+    const onDelete = (room) => dispatch(deleteRoom(room._id))
+
+    const columns = ['Name', 'Tiles', 'Racks']
+    const rows =
+        topology?.rooms.length > 0
+            ? topology.rooms.map((room) => {
+                  const tileCount = room.tiles.length
+                  const rackCount = room.tiles.filter((tile) => tile.rack).length
+                  return [
+                      {
+                          title: (
+                              <Button variant="link" isInline onClick={() => onClick(room)}>
+                                  {room.name}
+                              </Button>
+                          ),
+                      },
+                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
+                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
+                  ]
+              })
+            : [
+                  {
+                      heightAuto: true,
+                      cells: [
+                          {
+                              props: { colSpan: 3 },
+                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
+                          },
+                      ],
+                  },
+              ]
+
+    const actions =
+        topology?.rooms.length > 0
+            ? [
+                  {
+                      title: 'Delete room',
+                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
+                  },
+              ]
+            : []
+
+    return (
+        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
+            <TableHeader />
+            <TableBody />
+        </Table>
+    )
+}
+
+RoomTable.propTypes = {
+    topologyId: PropTypes.string,
+}
+
+export default RoomTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index f773dcd1..761e7f9a 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -33,12 +33,13 @@ import {
     GridItem,
     Skeleton,
 } from '@patternfly/react-core'
+import React from 'react'
 import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
+import RoomTable from './RoomTable'
 
 function TopologyOverview({ topologyId }) {
     const { data: topology } = useTopology(topologyId)
-
     return (
         <Grid hasGutter>
             <GridItem md={2}>
@@ -66,6 +67,14 @@ function TopologyOverview({ topologyId }) {
                     </CardBody>
                 </Card>
             </GridItem>
+            <GridItem md={5}>
+                <Card>
+                    <CardTitle>Rooms</CardTitle>
+                    <CardBody>
+                        <RoomTable topologyId={topologyId} />
+                    </CardBody>
+                </Card>
+            </GridItem>
         </Grid>
     )
 }
-- 
cgit v1.2.3


From 54f424a18cc21a52ea518d40893218a07ab55989 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 15:04:22 +0200
Subject: feat(ui): Extract topology construction out of Sagas

This change updates the OpenDC frontend to perform the construction of
the topology directly in the reducers instead of performing the
mutations in Redux Sagas as side effects. This allows us to nicely map
actions to mutations in the reducers.
---
 .../src/components/topologies/TopologyMap.js             |  2 +-
 .../src/components/topologies/map/MapStage.js            | 10 +++++-----
 .../components/topologies/map/RackEnergyFillContainer.js | 12 ++++++------
 .../components/topologies/map/RackSpaceFillContainer.js  |  2 +-
 .../src/components/topologies/map/RoomContainer.js       |  2 +-
 .../src/components/topologies/map/TileContainer.js       |  2 +-
 .../src/components/topologies/map/TopologyContainer.js   |  3 +--
 .../src/components/topologies/map/WallContainer.js       |  4 +++-
 .../components/topologies/map/layers/ObjectHoverLayer.js |  4 ++--
 .../components/topologies/map/layers/RoomHoverLayer.js   | 10 +++++-----
 .../topologies/sidebar/machine/DeleteMachine.js          | 13 ++++++++-----
 .../topologies/sidebar/machine/MachineSidebar.js         |  8 ++++----
 .../topologies/sidebar/machine/UnitAddContainer.js       |  2 +-
 .../topologies/sidebar/machine/UnitListContainer.js      | 11 ++---------
 .../topologies/sidebar/machine/UnitTabsComponent.js      | 16 ++++++++--------
 .../topologies/sidebar/rack/DeleteRackContainer.js       |  5 +++--
 .../topologies/sidebar/rack/MachineListContainer.js      |  4 ++--
 .../topologies/sidebar/rack/RackNameContainer.js         |  2 +-
 .../components/topologies/sidebar/rack/RackSidebar.js    |  2 +-
 .../src/components/topologies/sidebar/room/RoomName.js   |  2 +-
 20 files changed, 57 insertions(+), 59 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
index c16f554c..2f27749f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js
@@ -39,7 +39,7 @@ import { useSelector } from 'react-redux'
 import TopologySidebar from './sidebar/TopologySidebar'
 
 function TopologyMap() {
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
+    const topologyIsLoading = useSelector((state) => !state.topology.root)
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     const [isExpanded, setExpanded] = useState(true)
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 5d19b3ad..d8735cf1 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useContext } from 'react'
 import { HotKeys } from 'react-hotkeys'
 import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { Provider, useStore } from 'react-redux'
+import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
 import { mapContainer } from './MapStage.module.scss'
 import MapLayer from './layers/MapLayer'
@@ -12,7 +12,7 @@ import ScaleIndicator from './controls/ScaleIndicator'
 import Toolbar from './controls/Toolbar'
 
 function MapStage() {
-    const store = useStore()
+    const reduxContext = useContext(ReactReduxContext)
     const { ref, width = 100, height = 100 } = useResizeObserver()
     const stageRef = useRef(null)
     const [[x, y], setPos] = useState([0, 0])
@@ -68,11 +68,11 @@ function MapStage() {
                 x={x}
                 y={y}
             >
-                <Provider store={store}>
+                <ReactReduxContext.Provider value={reduxContext}>
                     <MapLayer />
                     <RoomHoverLayer />
                     <ObjectHoverLayer />
-                </Provider>
+                </ReactReduxContext.Provider>
             </Stage>
             <ScaleIndicator scale={scale} />
             <Toolbar onZoom={onZoomButton} onExport={onExport} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
index c35cbde7..be1f3e45 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackEnergyFillContainer.js
@@ -6,18 +6,18 @@ import RackFillBar from './elements/RackFillBar'
 function RackSpaceFillContainer({ tileId, ...props }) {
     const fillFraction = useSelector((state) => {
         let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[tileId].rack]
+        const rack = state.topology.racks[state.topology.tiles[tileId].rack]
         const machineIds = rack.machines
         machineIds.forEach((machineId) => {
             if (machineId !== null) {
-                const machine = state.objects.machine[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                const machine = state.topology.machines[machineId]
+                machine.cpus.forEach((id) => (energyConsumptionTotal += state.topology.cpus[id].energyConsumptionW))
+                machine.gpus.forEach((id) => (energyConsumptionTotal += state.topology.gpus[id].energyConsumptionW))
                 machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
+                    (id) => (energyConsumptionTotal += state.topology.memories[id].energyConsumptionW)
                 )
                 machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
+                    (id) => (energyConsumptionTotal += state.topology.storages[id].energyConsumptionW)
                 )
             }
         })
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
index a6766f33..0c15d54b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RackSpaceFillContainer.js
@@ -26,7 +26,7 @@ import { useSelector } from 'react-redux'
 import RackFillBar from './elements/RackFillBar'
 
 function RackSpaceFillContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 93ba9c93..65189891 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -31,7 +31,7 @@ function RoomContainer({ roomId, ...props }) {
         return {
             interactionLevel: state.interactionLevel,
             currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.objects.room[roomId],
+            room: state.topology.rooms[roomId],
         }
     })
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
index 149e26a1..411a5ca7 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TileContainer.js
@@ -28,7 +28,7 @@ import TileGroup from './groups/TileGroup'
 
 function TileContainer({ tileId, ...props }) {
     const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[tileId])
+    const tile = useSelector((state) => state.topology.tiles[tileId])
 
     const dispatch = useDispatch()
     const onClick = (tile) => {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
index eaebabd5..cc0d46b3 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/TopologyContainer.js
@@ -22,11 +22,10 @@
 
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { useActiveTopology } from '../../../data/topology'
 import TopologyGroup from './groups/TopologyGroup'
 
 function TopologyContainer() {
-    const topology = useActiveTopology()
+    const topology = useSelector((state) => state.topology.root)
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
index 77f553dd..143f70c2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/WallContainer.js
@@ -26,7 +26,9 @@ import { useSelector } from 'react-redux'
 import WallGroup from './groups/WallGroup'
 
 function WallContainer({ roomId, ...props }) {
-    const tiles = useSelector((state) => state.objects.room[roomId].tiles.map((tileId) => state.objects.tile[tileId]))
+    const tiles = useSelector((state) => {
+        return state.topology.rooms[roomId].tiles.map((tileId) => state.topology.tiles[tileId])
+    })
     return <WallGroup {...props} tiles={tiles} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
index 47d9c992..1f00de36 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -34,8 +34,8 @@ function ObjectHoverLayer() {
             return false
         }
 
-        const currentRoom = state.objects.room[state.interactionLevel.roomId]
-        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
+        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)
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 59f83b2b..5e351691 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -35,17 +35,17 @@ function RoomHoverLayer() {
     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.objects.room[state.construction.currentRoomInConstruction] }
-        const oldRooms = Object.keys(state.objects.room)
-            .map((id) => ({ ...state.objects.room[id] }))
+        const newRoom = { ...state.topology.rooms[state.construction.currentRoomInConstruction] }
+        const oldRooms = Object.keys(state.topology.rooms)
+            .map((id) => ({ ...state.topology.rooms[id] }))
             .filter(
                 (room) =>
-                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
+                    state.topology.root.rooms.indexOf(room._id) !== -1 &&
                     room._id !== state.construction.currentRoomInConstruction
             )
 
         ;[...oldRooms, newRoom].forEach((room) => {
-            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
+            room.tiles = room.tiles.map((tileId) => state.topology.tiles[tileId])
         })
         if (newRoom.tiles.length === 0) {
             return findPositionInRooms(oldRooms, x, y) === -1
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
index 00ce4603..a4b9457b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -20,21 +20,20 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+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() {
+function DeleteMachine({ machineId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
-    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
-    const position = useSelector((state) => state.interactionLevel.position)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteMachine(rackId, position))
+            dispatch(deleteMachine(machineId))
         }
         setVisible(false)
     }
@@ -53,4 +52,8 @@ function DeleteMachine() {
     )
 }
 
+DeleteMachine.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
 export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
index 0c3dea98..9268f615 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -13,9 +13,9 @@ import {
 import { useSelector } from 'react-redux'
 
 function MachineSidebar({ tileId, position }) {
-    const machine = useSelector(({ objects }) => {
-        const rack = objects.rack[objects.tile[tileId].rack]
-        return objects.machine[rack.machines[position - 1]]
+    const machine = useSelector(({ topology }) => {
+        const rack = topology.racks[topology.tiles[tileId].rack]
+        return topology.machines[rack.machines[position - 1]]
     })
     const machineId = machine._id
     return (
@@ -30,7 +30,7 @@ function MachineSidebar({ tileId, position }) {
                 </TextList>
 
                 <Title headingLevel="h2">Actions</Title>
-                <DeleteMachine />
+                <DeleteMachine machineId={machineId} />
 
                 <Title headingLevel="h2">Units</Title>
             </TextContent>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
index fc805b95..6b136120 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -27,7 +27,7 @@ import UnitAddComponent from './UnitAddComponent'
 import { addUnit } from '../../../../redux/actions/topology/machine'
 
 function UnitAddContainer({ machineId, unitType }) {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const units = useSelector((state) => Object.values(state.topology[unitType]))
     const dispatch = useDispatch()
 
     const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
index 901fa45b..6dcc414f 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -26,18 +26,11 @@ import { useDispatch, useSelector } from 'react-redux'
 import UnitListComponent from './UnitListComponent'
 import { deleteUnit } from '../../../../redux/actions/topology/machine'
 
-const unitMapping = {
-    cpu: 'cpus',
-    gpu: 'gpus',
-    memory: 'memories',
-    storage: 'storages',
-}
-
 function UnitListContainer({ machineId, unitType }) {
     const dispatch = useDispatch()
     const units = useSelector((state) => {
-        const machine = state.objects.machine[machineId]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+        const machine = state.topology.machines[machineId]
+        return machine[unitType].map((id) => state.topology[unitType][id])
     })
 
     const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
index 6d10d2df..b800e9d4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -10,20 +10,20 @@ function UnitTabsComponent({ machineId }) {
     return (
         <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
             <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="cpu" />
-                <UnitListContainer machineId={machineId} unitType="cpu" />
+                <UnitAddContainer machineId={machineId} unitType="cpus" />
+                <UnitListContainer machineId={machineId} unitType="cpus" />
             </Tab>
             <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="gpu" />
-                <UnitListContainer machineId={machineId} unitType="gpu" />
+                <UnitAddContainer machineId={machineId} unitType="gpus" />
+                <UnitListContainer machineId={machineId} unitType="gpus" />
             </Tab>
             <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="memory" />
-                <UnitListContainer machineId={machineId} unitType="memory" />
+                <UnitAddContainer machineId={machineId} unitType="memories" />
+                <UnitListContainer machineId={machineId} unitType="memories" />
             </Tab>
             <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer machineId={machineId} unitType="storage" />
-                <UnitListContainer machineId={machineId} unitType="storage" />
+                <UnitAddContainer machineId={machineId} unitType="storages" />
+                <UnitListContainer machineId={machineId} unitType="storages" />
             </Tab>
         </Tabs>
     )
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
index 80c6349a..0583a7a4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+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'
@@ -31,9 +31,10 @@ 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))
+            dispatch(deleteRack(tileId, rackId))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
index 6fbff949..619bb4e2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -28,8 +28,8 @@ import { goFromRackToMachine } from '../../../../redux/actions/interaction-level
 import { addMachine } from '../../../../redux/actions/topology/rack'
 
 function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const 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) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
index 09d73af7..30f38cce 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -5,7 +5,7 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 3c9f152a..8f6ff135 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -17,7 +17,7 @@ import {
 import { useSelector } from 'react-redux'
 
 function RackSidebar({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
 
     return (
         <div className={sidebarContainer}>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
index e8d8b33c..fb52d826 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -27,7 +27,7 @@ import NameComponent from '../NameComponent'
 import { editRoomName } from '../../../../redux/actions/topology/room'
 
 function RoomName({ roomId }) {
-    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
+    const { name: roomName, _id } = useSelector((state) => state.topology.rooms[roomId])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
-- 
cgit v1.2.3


From 7f083b47c2e2333819823fd7835332a0f486b626 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 17:31:45 +0200
Subject: feat(ui): Toggle to Floor Plan on room select

---
 opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js    | 7 +++----
 .../opendc-web-ui/src/components/topologies/TopologyOverview.js    | 5 +++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 8a5c401f..9bf369e9 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -4,15 +4,13 @@ import React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTopology } from '../../data/topology'
 import { Table, TableBody, TableHeader } from '@patternfly/react-table'
-import { goToRoom } from '../../redux/actions/interaction-level'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
-function RoomTable({ topologyId }) {
+function RoomTable({ topologyId, onSelect }) {
     const dispatch = useDispatch()
     const { status, data: topology } = useTopology(topologyId)
 
-    const onClick = (room) => dispatch(goToRoom(room._id))
     const onDelete = (room) => dispatch(deleteRoom(room._id))
 
     const columns = ['Name', 'Tiles', 'Racks']
@@ -24,7 +22,7 @@ function RoomTable({ topologyId }) {
                   return [
                       {
                           title: (
-                              <Button variant="link" isInline onClick={() => onClick(room)}>
+                              <Button variant="link" isInline onClick={() => onSelect(room)}>
                                   {room.name}
                               </Button>
                           ),
@@ -65,6 +63,7 @@ function RoomTable({ topologyId }) {
 
 RoomTable.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default RoomTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index 761e7f9a..213a4868 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -38,7 +38,7 @@ import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import RoomTable from './RoomTable'
 
-function TopologyOverview({ topologyId }) {
+function TopologyOverview({ topologyId, onSelect }) {
     const { data: topology } = useTopology(topologyId)
     return (
         <Grid hasGutter>
@@ -71,7 +71,7 @@ function TopologyOverview({ topologyId }) {
                 <Card>
                     <CardTitle>Rooms</CardTitle>
                     <CardBody>
-                        <RoomTable topologyId={topologyId} />
+                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
                     </CardBody>
                 </Card>
             </GridItem>
@@ -81,6 +81,7 @@ function TopologyOverview({ topologyId }) {
 
 TopologyOverview.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default TopologyOverview
-- 
cgit v1.2.3


From f84dc9f8b8b4eaa7621f9ee4fc83ef38a85c431b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 17 Aug 2021 11:30:29 +0200
Subject: feat(ui): Add context selectors

This change adds context selectors for the OpenDC frontend where the
user can select different projects, portfolios or topologies from the
context selection bar.
---
 opendc-web/opendc-web-ui/src/components/AppPage.js | 12 ++--
 .../components/context/ContextSelectionSection.js  | 34 ++++++++++
 .../context/ContextSelectionSection.module.scss    | 28 ++++++++
 .../src/components/context/ContextSelector.js      | 75 ++++++++++++++++++++++
 .../components/context/ContextSelector.module.scss | 45 +++++++++++++
 .../src/components/context/PortfolioSelector.js    | 47 ++++++++++++++
 .../src/components/context/ProjectSelector.js      | 48 ++++++++++++++
 .../src/components/context/TopologySelector.js     | 52 +++++++++++++++
 8 files changed, 337 insertions(+), 4 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/context/TopologySelector.js

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js
index 2e0ea4cc..25afaf9a 100644
--- a/opendc-web/opendc-web-ui/src/components/AppPage.js
+++ b/opendc-web/opendc-web-ui/src/components/AppPage.js
@@ -23,11 +23,15 @@
 import PropTypes from 'prop-types'
 import { AppHeader } from './AppHeader'
 import React from 'react'
-import { Page } from '@patternfly/react-core'
+import { Page, PageGroup, PageBreadcrumb } from '@patternfly/react-core'
 
-export function AppPage({ children, breadcrumb, tertiaryNav }) {
+export function AppPage({ children, breadcrumb, contextSelectors }) {
     return (
-        <Page breadcrumb={breadcrumb} tertiaryNav={tertiaryNav} header={<AppHeader />}>
+        <Page header={<AppHeader />}>
+            <PageGroup>
+                {contextSelectors}
+                {breadcrumb && <PageBreadcrumb>{breadcrumb}</PageBreadcrumb>}
+            </PageGroup>
             {children}
         </Page>
     )
@@ -35,6 +39,6 @@ export function AppPage({ children, breadcrumb, tertiaryNav }) {
 
 AppPage.propTypes = {
     breadcrumb: PropTypes.node,
-    tertiaryNav: PropTypes.node,
+    contextSelectors: PropTypes.node,
     children: PropTypes.node,
 }
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js
new file mode 100644
index 00000000..5d3a6441
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.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 PropTypes from 'prop-types'
+import { contextSelectionSection } from './ContextSelectionSection.module.scss'
+
+function ContextSelectionSection({ children }) {
+    return <section className={contextSelectionSection}>{children}</section>
+}
+
+ContextSelectionSection.propTypes = {
+    children: PropTypes.node,
+}
+
+export default ContextSelectionSection
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss
new file mode 100644
index 00000000..0e902af0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss
@@ -0,0 +1,28 @@
+/*!
+ * 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.
+ */
+
+.contextSelectionSection {
+    padding-left: var(--pf-c-page__main-breadcrumb--PaddingLeft);
+    flex-shrink: 0;
+    border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
+    background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor);
+}
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
new file mode 100644
index 00000000..3712cfa0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -0,0 +1,75 @@
+/*
+ * 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 { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
+import { useMemo, useState, useReducer } from 'react'
+import { contextSelector } from './ContextSelector.module.scss'
+
+function ContextSelector({ activeItem, items, onSelect, label }) {
+    const [isOpen, toggle] = useReducer((isOpen) => !isOpen, false)
+    const [searchValue, setSearchValue] = useState('')
+
+    const filteredItems = useMemo(
+        () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
+        [items, searchValue]
+    )
+
+    return (
+        <PFContextSelector
+            menuAppendTo={global.document?.body}
+            className={contextSelector}
+            toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
+            onSearchInputChange={(value) => setSearchValue(value)}
+            searchInputValue={searchValue}
+            isOpen={isOpen}
+            onToggle={toggle}
+            onSelect={(event) => {
+                const targetId = event.target.value
+                const target = items.find((item) => item._id === targetId)
+
+                toggle()
+                onSelect(target)
+            }}
+        >
+            {filteredItems.map((item) => (
+                <ContextSelectorItem key={item._id} value={item._id}>
+                    {item.name}
+                </ContextSelectorItem>
+            ))}
+        </PFContextSelector>
+    )
+}
+
+const Item = PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+})
+
+ContextSelector.propTypes = {
+    activeItem: Item,
+    items: PropTypes.arrayOf(Item).isRequired,
+    onSelect: PropTypes.func.isRequired,
+    label: PropTypes.string,
+}
+
+export default ContextSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
new file mode 100644
index 00000000..fefba41f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.contextSelector {
+    width: auto;
+    margin-right: 20px;
+
+    --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-context-selector__toggle--PaddingRight: 0;
+    --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-context-selector__toggle--PaddingLeft: 0;
+    --pf-c-context-selector__toggle--BorderWidth: 0;
+    --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm);
+
+    & :global(.pf-c-context-selector__toggle) {
+        &:active,
+        &:focus-within,
+        &:global(.pf-m-active) {
+            --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
+        }
+    }
+
+    &:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) {
+        --pf-c-context-selector__toggle--after--BorderBottomWidth: 0;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
new file mode 100644
index 00000000..694681ac
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.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 { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { useProjectPortfolios } from '../../data/project'
+import ContextSelector from './ContextSelector'
+
+function PortfolioSelector() {
+    const router = useRouter()
+    const { project, portfolio: activePortfolioId } = router.query
+    const { data: portfolios = [] } = useProjectPortfolios(project)
+    const activePortfolio = useMemo(() => portfolios.find((portfolio) => portfolio._id === activePortfolioId), [
+        activePortfolioId,
+        portfolios,
+    ])
+
+    return (
+        <ContextSelector
+            label="Portfolio"
+            activeItem={activePortfolio}
+            items={portfolios}
+            onSelect={(portfolio) => router.push(`/projects/${portfolio.projectId}/portfolios/${portfolio._id}`)}
+        />
+    )
+}
+
+export default PortfolioSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
new file mode 100644
index 00000000..753632ab
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -0,0 +1,48 @@
+/*
+ * 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 { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { useProjects } from '../../data/project'
+import ContextSelector from './ContextSelector'
+
+function ProjectSelector({ projectId }) {
+    const router = useRouter()
+    const { data: projects = [] } = useProjects()
+    const activeProject = useMemo(() => projects.find((project) => project._id === projectId), [projectId, projects])
+
+    return (
+        <ContextSelector
+            label="Project"
+            activeItem={activeProject}
+            items={projects}
+            onSelect={(project) => router.push(`/projects/${project._id}`)}
+        />
+    )
+}
+
+ProjectSelector.propTypes = {
+    projectId: PropTypes.string,
+}
+
+export default ProjectSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
new file mode 100644
index 00000000..d5e51c6c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
@@ -0,0 +1,52 @@
+/*
+ * 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 { useRouter } from 'next/router'
+import { useMemo } from 'react'
+import { useProjectTopologies } from '../../data/topology'
+import ContextSelector from './ContextSelector'
+
+function TopologySelector({ projectId, topologyId }) {
+    const router = useRouter()
+    const { data: topologies = [] } = useProjectTopologies(projectId)
+    const activeTopology = useMemo(() => topologies.find((topology) => topology._id === topologyId), [
+        topologyId,
+        topologies,
+    ])
+
+    return (
+        <ContextSelector
+            label="Topology"
+            activeItem={activeTopology}
+            items={topologies}
+            onSelect={(topology) => router.push(`/projects/${topology.projectId}/topologies/${topology._id}`)}
+        />
+    )
+}
+
+TopologySelector.propTypes = {
+    projectId: PropTypes.string,
+    topologyId: PropTypes.string,
+}
+
+export default TopologySelector
-- 
cgit v1.2.3