Merge branch 'master' onto working copy

54 files changed, 298 insertions, 466 deletions

diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js
index 03daa692..7efea9b0 100644
--- a/frontend/src/components/app/map/LoadingScreen.js
+++ b/frontend/src/components/app/map/LoadingScreen.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 
 const LoadingScreen = () => (
     <div className="display-4">
-        <FontAwesome name="refresh" className="mr-4" spin/>
+        <FontAwesome name="refresh" className="mr-4" spin />
         Loading your project...
     </div>
 )
diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js
index 286920e2..0a970701 100644
--- a/frontend/src/components/app/map/MapConstants.js
+++ b/frontend/src/components/app/map/MapConstants.js
@@ -5,8 +5,7 @@ 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 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
diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index f1c2b211..cecb34de 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -43,19 +43,12 @@ class MapStageComponent extends React.Component {
     }
 
     updateDimensions() {
-        this.props.setMapDimensions(
-            jQuery(window).width(),
-            jQuery(window).height() - NAVBAR_HEIGHT,
-        )
+        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT)
     }
 
     updateScale(e) {
         e.preventDefault()
-        this.props.zoomInOnPosition(
-            e.deltaY < 0,
-            this.state.mouseX,
-            this.state.mouseY,
-        )
+        this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
     }
 
     updateMousePosition() {
@@ -83,21 +76,14 @@ class MapStageComponent extends React.Component {
     }
 
     moveWithDelta(deltaX, deltaY) {
-        this.props.setMapPositionWithBoundsCheck(
-            this.props.mapPosition.x + deltaX,
-            this.props.mapPosition.y + deltaY,
-        )
+        this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY)
     }
 
     render() {
         return (
-            <Shortcuts
-                name="MAP"
-                handler={this.handleShortcuts.bind(this)}
-                targetNodeSelector="body"
-            >
+            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
                 <Stage
-                    ref={stage => {
+                    ref={(stage) => {
                         this.stage = stage
                     }}
                     width={this.props.mapDimensions.width}
@@ -105,15 +91,9 @@ class MapStageComponent extends React.Component {
                     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}
-                        />
+                        <MapLayer />
+                        <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
+                        <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
             </Shortcuts>
diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
index d166bcc8..8487f47b 100644
--- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
@@ -6,7 +6,7 @@ const ExportCanvasComponent = () => (
         title="Export Canvas to PNG Image"
         onClick={() => window['exportCanvasToImage']()}
     >
-        <span className="fa fa-camera"/>
+        <span className="fa fa-camera" />
     </button>
 )
 
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index daaf8ec6..54709482 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -3,10 +3,7 @@ import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import './ScaleIndicatorComponent.css'
 
 const ScaleIndicatorComponent = ({ scale }) => (
-    <div
-        className="scale-indicator"
-        style={{ width: TILE_SIZE_IN_PIXELS * scale }}
-    >
+    <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
         {TILE_SIZE_IN_METERS}m
     </div>
 )
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e3bb1dbb..e0e4d554 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -5,8 +5,8 @@ import './ToolPanelComponent.css'
 
 const ToolPanelComponent = () => (
     <div className="tool-panel">
-        <ZoomControlContainer/>
-        <ExportCanvasComponent/>
+        <ZoomControlContainer />
+        <ExportCanvasComponent />
     </div>
 )
 
diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js
index bd6527a6..65944bea 100644
--- a/frontend/src/components/app/map/controls/ZoomControlComponent.js
+++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js
@@ -3,21 +3,21 @@ import React from 'react'
 const ZoomControlComponent = ({ zoomInOnCenter }) => {
     return (
         <span>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom in"
-          onClick={() => zoomInOnCenter(true)}
-      >
-        <span className="fa fa-plus"/>
-      </button>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom out"
-          onClick={() => zoomInOnCenter(false)}
-      >
-        <span className="fa fa-minus"/>
-      </button>
-    </span>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom in"
+                onClick={() => zoomInOnCenter(true)}
+            >
+                <span className="fa fa-plus" />
+            </button>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom out"
+                onClick={() => zoomInOnCenter(false)}
+            >
+                <span className="fa fa-minus" />
+            </button>
+        </span>
     )
 }
 
diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js
index 556d6a7b..8ccfe584 100644
--- a/frontend/src/components/app/map/elements/Backdrop.js
+++ b/frontend/src/components/app/map/elements/Backdrop.js
@@ -3,14 +3,6 @@ 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}
-    />
-)
+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/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js
index 6e56e059..8c573a6f 100644
--- a/frontend/src/components/app/map/elements/RackFillBar.js
+++ b/frontend/src/components/app/map/elements/RackFillBar.js
@@ -21,27 +21,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
     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
+        (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
+        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
 
     return (
         <Group>
@@ -50,22 +37,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
                 y={startY}
                 width={width}
                 height={fullHeight}
-                fill={
-                    type === 'space'
-                        ? RACK_SPACE_BAR_BACKGROUND_COLOR
-                        : RACK_ENERGY_BAR_BACKGROUND_COLOR
-                }
+                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
-                }
+                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
             />
             <ImageComponent
                 src={'/img/topology/rack-' + type + '-icon.png'}
diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js
index dd6e0beb..be3a00a8 100644
--- a/frontend/src/components/app/map/elements/TilePlusIcon.js
+++ b/frontend/src/components/app/map/elements/TilePlusIcon.js
@@ -10,16 +10,12 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
             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,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
         ],
         [
             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,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
         ],
     ]
diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js
index d1ba6157..8aa2aebf 100644
--- a/frontend/src/components/app/map/elements/WallSegment.js
+++ b/frontend/src/components/app/map/elements/WallSegment.js
@@ -22,14 +22,7 @@ const WallSegment = ({ wallSegment }) => {
         ]
     }
 
-    return (
-        <Line
-            points={points}
-            lineCap="round"
-            stroke={WALL_COLOR}
-            strokeWidth={WALL_WIDTH_IN_PIXELS}
-        />
-    )
+    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
 }
 
 WallSegment.propTypes = {
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
index 10554834..ebc00244 100644
--- a/frontend/src/components/app/map/groups/GridGroup.js
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -4,13 +4,13 @@ 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 => [
+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 => [
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     index * TILE_SIZE_IN_PIXELS,
     0,
     index * TILE_SIZE_IN_PIXELS,
@@ -19,9 +19,7 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
 
 const GridGroup = () => (
     <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(
-            VERTICAL_POINT_PAIRS,
-        ).map((points, index) => (
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
                 key={index}
                 points={points}
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 5d4ee5e2..eb6dc24a 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -9,22 +9,10 @@ import TileObject from '../elements/TileObject'
 const RackGroup = ({ tile }) => {
     return (
         <Group>
-            <TileObject
-                positionX={tile.positionX}
-                positionY={tile.positionY}
-                color={RACK_BACKGROUND_COLOR}
-            />
+            <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}
-                />
+                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
             </Group>
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
index 4e3c7410..1fd54687 100644
--- a/frontend/src/components/app/map/groups/RoomGroup.js
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -5,17 +5,12 @@ import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
 import Shapes from '../../../../shapes/index'
 
-const RoomGroup = ({
-                       room,
-                       interactionLevel,
-                       currentRoomInConstruction,
-                       onClick,
-                   }) => {
+const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
         return (
             <Group onClick={onClick}>
-                {room.tileIds.map(tileId => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                {room.tileIds.map((tileId) => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
                 ))}
             </Group>
         )
@@ -25,26 +20,23 @@ const RoomGroup = ({
         <Group onClick={onClick}>
             {(() => {
                 if (
-                    (interactionLevel.mode === 'RACK' ||
-                        interactionLevel.mode === 'MACHINE') &&
+                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
                     interactionLevel.roomId === room._id
                 ) {
                     return [
                         room.tileIds
-                            .filter(tileId => tileId !== interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
-                        <GrayContainer key={-1}/>,
+                            .filter((tileId) => tileId !== interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                        <GrayContainer key={-1} />,
                         room.tileIds
-                            .filter(tileId => tileId === interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                            .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.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
                 }
             })()}
-            <WallContainer roomId={room._id}/>
+            <WallContainer roomId={room._id} />
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index e984f05b..1e106823 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -9,7 +9,7 @@ import RoomTile from '../elements/RoomTile'
 const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
     let tileObject
     if (tile.rackId) {
-        tileObject = <RackContainer tile={tile}/>
+        tileObject = <RackContainer tile={tile} />
     } else {
         tileObject = null
     }
@@ -21,7 +21,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 
     return (
         <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color}/>
+            <RoomTile tile={tile} color={color} />
             {tileObject}
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/TopologyGroup.js b/frontend/src/components/app/map/groups/TopologyGroup.js
index a40a1d41..6096fc8b 100644
--- a/frontend/src/components/app/map/groups/TopologyGroup.js
+++ b/frontend/src/components/app/map/groups/TopologyGroup.js
@@ -6,14 +6,14 @@ import Shapes from '../../../../shapes/index'
 
 const TopologyGroup = ({ topology, interactionLevel }) => {
     if (!topology) {
-        return <Group/>
+        return <Group />
     }
 
     if (interactionLevel.mode === 'BUILDING') {
         return (
             <Group>
-                {topology.roomIds.map(roomId => (
-                    <RoomContainer key={roomId} roomId={roomId}/>
+                {topology.roomIds.map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
                 ))}
             </Group>
         )
@@ -22,12 +22,16 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
     return (
         <Group>
             {topology.roomIds
-                .filter(roomId => roomId !== interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
+                .filter((roomId) => roomId !== interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
             {topology.roomIds
-                .filter(roomId => roomId === interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+                .filter((roomId) => roomId === interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
index 81c72d94..7b0f5ca0 100644
--- a/frontend/src/components/app/map/groups/WallGroup.js
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -9,7 +9,7 @@ const WallGroup = ({ tiles }) => {
     return (
         <Group>
             {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
+                <WallSegment key={index} wallSegment={wallSegment} />
             ))}
         </Group>
     )
diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
index 25c9c412..bead87de 100644
--- a/frontend/src/components/app/map/layers/HoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -26,18 +26,13 @@ class HoverLayerComponent extends React.Component {
         }
 
         const positionX = Math.floor(
-            (this.props.mouseX - this.props.mapPosition.x) /
-            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+            (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),
+            (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
         )
 
-        if (
-            positionX !== this.state.positionX ||
-            positionY !== this.state.positionY
-        ) {
+        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
             this.setState({
                 positionX,
                 positionY,
@@ -48,15 +43,11 @@ class HoverLayerComponent extends React.Component {
 
     render() {
         if (!this.props.isEnabled()) {
-            return <Layer/>
+            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 = 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
 
         return (
             <Layer opacity={0.6}>
@@ -66,16 +57,15 @@ class HoverLayerComponent extends React.Component {
                     scale={this.props.mapScale}
                     isValid={this.state.validity}
                     onClick={() =>
-                        this.state.validity
-                            ? this.props.onClick(this.state.positionX, this.state.positionY)
-                            : undefined}
+                        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,
-                    })
+                          pixelX,
+                          pixelY,
+                          scale: this.props.mapScale,
+                      })
                     : undefined}
             </Layer>
         )
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
index 940057f9..8ee14c9c 100644
--- a/frontend/src/components/app/map/layers/MapLayerComponent.js
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -6,15 +6,10 @@ import GridGroup from '../groups/GridGroup'
 
 const MapLayerComponent = ({ mapPosition, mapScale }) => (
     <Layer>
-        <Group
-            x={mapPosition.x}
-            y={mapPosition.y}
-            scaleX={mapScale}
-            scaleY={mapScale}
-        >
-            <Backdrop/>
-            <TopologyContainer/>
-            <GridGroup/>
+        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+            <Backdrop />
+            <TopologyContainer />
+            <GridGroup />
         </Group>
     </Layer>
 )
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
index 31689635..661fc255 100644
--- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 import TilePlusIcon from '../elements/TilePlusIcon'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const ObjectHoverLayerComponent = props => (
+const ObjectHoverLayerComponent = (props) => (
     <HoverLayerComponent {...props}>
         <TilePlusIcon {...props} />
     </HoverLayerComponent>
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
index d3d5e9b2..887e2891 100644
--- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />
+const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} />
 
 export default RoomHoverLayerComponent
diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js
new file mode 100644
index 00000000..35dba603
--- /dev/null
+++ b/frontend/src/components/app/results/PortfolioResultsComponent.js
@@ -0,0 +1,89 @@
+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 Shapes from '../../../shapes/index'
+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[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: Shapes.Portfolio,
+    scenarios: PropTypes.arrayOf(Shapes.Scenario),
+}
+
+export default PortfolioResultsComponent
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index a47a67c0..e1760d5e 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -10,7 +10,7 @@ class Sidebar extends React.Component {
     }
 
     static defaultProps = {
-        collapsible: true
+        collapsible: true,
     }
 
     state = {
@@ -25,17 +25,10 @@ class Sidebar extends React.Component {
                 })}
                 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'}
-                    />
+                {(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'}
-                    />
+                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
                 )}
             </div>
         )
@@ -48,7 +41,7 @@ class Sidebar extends React.Component {
                 className={classNames('sidebar p-3 h-100', {
                     'sidebar-right': this.props.isRight,
                 })}
-                onWheel={e => e.stopPropagation()}
+                onWheel={(e) => e.stopPropagation()}
             >
                 {this.props.children}
                 {this.props.collapsible && collapseButton}
diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass
index 02e8940d..b8e15716 100644
--- a/frontend/src/components/app/sidebars/Sidebar.sass
+++ b/frontend/src/components/app/sidebars/Sidebar.sass
@@ -27,7 +27,7 @@
     position: absolute
     top: 0
     left: 0
-    width: 350px
+    width: $side-bar-width
 
     z-index: 100
     background: white
diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
deleted file mode 100644
index ae52891a..00000000
--- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/server'
-import SvgSaver from 'svgsaver'
-import { VictoryAxis, VictoryChart, VictoryLabel, VictoryLine, VictoryScatter } from 'victory'
-import { convertSecondsToFormattedTime } from '../../../../util/date-time'
-
-const LoadChartComponent = ({ data, currentTick }) => {
-    const onExport = () => {
-        const div = document.createElement('div')
-        div.innerHTML = ReactDOM.renderToString(
-            <VictoryChartComponent
-                data={data}
-                currentTick={currentTick}
-                showCurrentTick={false}
-            />,
-        )
-        div.firstChild.style =
-            'font-family: Roboto, Arial, sans-serif; font-size: 10pt;'
-        const svgSaver = new SvgSaver()
-        svgSaver.asSvg(
-            div.firstChild,
-            'opendc-chart-export-' + Date.now() + '.svg',
-        )
-    }
-
-    return (
-        <div className="mt-1" style={{ position: 'relative' }}>
-            <strong>Load over time</strong>
-            <VictoryChartComponent
-                data={data}
-                currentTick={currentTick}
-                showCurrentTick={true}
-            />
-            <ExportChartComponent onExport={onExport}/>
-        </div>
-    )
-}
-
-const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
-    <VictoryChart
-        height={250}
-        padding={{ top: 10, bottom: 50, left: 50, right: 50 }}
-    >
-        <VictoryAxis
-            tickFormat={tick => convertSecondsToFormattedTime(tick)}
-            fixLabelOverlap={true}
-            label="Simulated Time"
-        />
-        <VictoryAxis dependentAxis label="Load"/>
-        <VictoryLine data={data}/>
-        <VictoryScatter data={data}/>
-        {showCurrentTick ? (
-            <VictoryLine
-                labelComponent={
-                    <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/>
-                }
-                data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
-                labels={point =>
-                    point.y === 1
-                        ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick)
-                        : ''}
-                style={{
-                    data: { stroke: '#00A6D6', strokeWidth: 4 },
-                    labels: { fill: '#00A6D6' },
-                }}
-            />
-        ) : (
-            undefined
-        )}
-    </VictoryChart>
-)
-
-const ExportChartComponent = ({ onExport }) => (
-    <button
-        className="btn btn-success btn-circle btn-sm"
-        title="Export Chart to PNG Image"
-        onClick={onExport}
-        style={{ position: 'absolute', top: 0, right: 0 }}
-    >
-        <span className="fa fa-camera"/>
-    </button>
-)
-
-export default LoadChartComponent
diff --git a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
index a31f11cf..b000b9e2 100644
--- a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -24,8 +24,11 @@ class PortfolioListComponent extends React.Component {
             <div className="pb-3">
                 <h2>
                     Portfolios
-                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewPortfolio.bind(this)}>
-                        <FontAwesome name="plus"/>
+                    <button
+                        className="btn btn-outline-primary float-right"
+                        onClick={this.props.onNewPortfolio.bind(this)}
+                    >
+                        <FontAwesome name="plus" />
                     </button>
                 </h2>
 
@@ -33,10 +36,14 @@ class PortfolioListComponent extends React.Component {
                     <div key={portfolio._id}>
                         <div className="row mb-1">
                             <div
-                                className={'col-8 align-self-center ' + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')}>
+                                className={
+                                    'col-7 align-self-center ' +
+                                    (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')
+                                }
+                            >
                                 {portfolio.name}
                             </div>
-                            <div className="col-4 text-right">
+                            <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}`}
@@ -48,7 +55,7 @@ class PortfolioListComponent extends React.Component {
                                 />
                             </div>
                         </div>
-                        <ScenarioListContainer portfolioId={portfolio._id}/>
+                        <ScenarioListContainer portfolioId={portfolio._id} />
                     </div>
                 ))}
             </div>
diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
index b21b012b..4789315e 100644
--- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -3,11 +3,13 @@ import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
 import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
 
-const ProjectSidebarComponent = ({collapsible}) => (
-        <Sidebar isRight={false} collapsible={collapsible}>
-            <TopologyListContainer/>
-            <PortfolioListContainer/>
-        </Sidebar>
-    )
+const ProjectSidebarComponent = ({ collapsible }) => (
+    <Sidebar isRight={false} collapsible={collapsible}>
+        <div className="h-100 overflow-auto container-fluid">
+            <TopologyListContainer />
+            <PortfolioListContainer />
+        </div>
+    </Sidebar>
+)
 
 export default ProjectSidebarComponent
diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
index 9d2e261e..e775a663 100644
--- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -24,25 +24,33 @@ class ScenarioListComponent extends React.Component {
             <>
                 {this.props.scenarios.map((scenario, idx) => (
                     <div key={scenario._id} className="row mb-1">
-                        <div className={'col-8 pl-5 align-self-center ' + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')}>
+                        <div
+                            className={
+                                'col-7 pl-5 align-self-center ' +
+                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
+                            }
+                        >
                             {scenario.name}
                         </div>
-                        <div className="col-4 text-right">
+                        <div className="col-5 text-right">
                             <Link
-                                className="btn btn-outline-primary mr-1 fa fa-play"
+                                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)}
                             />
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => idx !== 0 ? this.onDelete(scenario._id) : undefined}
+                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
                             />
                         </div>
                     </div>
                 ))}
                 <div className="pl-4 mb-2">
-                    <div className="btn btn-outline-primary" onClick={() => this.props.onNewScenario(this.props.portfolioId)}>
-                        <FontAwesome name="plus" className="mr-1"/>
+                    <div
+                        className="btn btn-outline-primary"
+                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                    >
+                        <FontAwesome name="plus" className="mr-1" />
                         New scenario
                     </div>
                 </div>
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
index b8b41200..2f42f7e4 100644
--- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -26,23 +26,28 @@ class TopologyListComponent extends React.Component {
                 <h2>
                     Topologies
                     <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
-                        <FontAwesome name="plus"/>
+                        <FontAwesome name="plus" />
                     </button>
                 </h2>
 
                 {this.props.topologies.map((topology, idx) => (
                     <div key={topology._id} className="row mb-1">
-                        <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}>
+                        <div
+                            className={
+                                'col-7 align-self-center ' +
+                                (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')
+                            }
+                        >
                             {topology.name}
                         </div>
-                        <div className="col-4 text-right">
+                        <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}
+                                onClick={() => (idx !== 0 ? this.onDelete(topology._id) : undefined)}
                             />
                         </div>
                     </div>
diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js
index 1f3051d5..5fb0dc55 100644
--- a/frontend/src/components/app/sidebars/topology/NameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/NameComponent.js
@@ -5,7 +5,7 @@ const NameComponent = ({ name, onEdit }) => (
     <h2>
         {name}
         <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil"/>
+            <FontAwesome name="pencil" />
         </button>
     </h2>
 )
diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
index b1def94b..f5eee36b 100644
--- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -10,16 +10,16 @@ const TopologySidebarComponent = ({ interactionLevel }) => {
 
     switch (interactionLevel.mode) {
         case 'BUILDING':
-            sidebarContent = <BuildingSidebarContainer/>
+            sidebarContent = <BuildingSidebarContainer />
             break
         case 'ROOM':
-            sidebarContent = <RoomSidebarContainer/>
+            sidebarContent = <RoomSidebarContainer />
             break
         case 'RACK':
-            sidebarContent = <RackSidebarContainer/>
+            sidebarContent = <RackSidebarContainer />
             break
         case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer/>
+            sidebarContent = <MachineSidebarContainer />
             break
         default:
             sidebarContent = 'Missing Content'
diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index 4cc87798..eea62f84 100644
--- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,12 +1,11 @@
 import React from 'react'
-import NewRoomConstructionContainer
-    from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
+import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
 
 const BuildingSidebarComponent = () => {
     return (
         <div>
             <h2>Building</h2>
-            <NewRoomConstructionContainer/>
+            <NewRoomConstructionContainer />
         </div>
     )
 }
diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 75b00c54..fd552c1e 100644
--- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,15 +1,10 @@
 import React from 'react'
 
-const NewRoomConstructionComponent = ({
-                                          onStart,
-                                          onFinish,
-                                          onCancel,
-                                          currentRoomInConstruction,
-                                      }) => {
+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"/>
+                <span className="fa fa-plus mr-2" />
                 Construct a new room
             </div>
         )
@@ -17,11 +12,11 @@ const NewRoomConstructionComponent = ({
     return (
         <div>
             <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-2"/>
+                <span className="fa fa-check mr-2" />
                 Finalize new room
             </div>
             <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-2"/>
+                <span className="fa fa-times mr-2" />
                 Cancel construction
             </div>
         </div>
diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index d7ce24bc..70d522b2 100644
--- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToRackComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to rack
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index b9aa6251..37820316 100644
--- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteMachineComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this machine
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 70be6968..992383c4 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,5 @@
 import React from 'react'
 
-const MachineNameComponent = ({ position }) => (
-    <h2>Machine at slot {position}</h2>
-)
+const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2>
 
 export default MachineNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index d78c20eb..02e7b8d4 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -7,10 +7,10 @@ import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/m
 const MachineSidebarComponent = ({ machineId }) => {
     return (
         <div>
-            <MachineNameContainer/>
-            <BackToRackContainer/>
-            <DeleteMachineContainer/>
-            <UnitTabsContainer/>
+            <MachineNameContainer />
+            <BackToRackContainer />
+            <DeleteMachineContainer />
+            <UnitTabsContainer />
         </div>
     )
 }
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 98238de7..d5ecbce3 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -11,11 +11,8 @@ class UnitAddComponent extends React.Component {
         return (
             <div className="form-inline">
                 <div className="form-group w-100">
-                    <select
-                        className="form-control w-75 mr-1"
-                        ref={unitSelect => (this.unitSelect = unitSelect)}
-                    >
-                        {this.props.units.map(unit => (
+                    <select className="form-control w-75 mr-1" ref={(unitSelect) => (this.unitSelect = unitSelect)}>
+                        {this.props.units.map((unit) => (
                             <option value={unit._id} key={unit._id}>
                                 {unit.name}
                             </option>
@@ -24,11 +21,9 @@ class UnitAddComponent extends React.Component {
                     <button
                         type="submit"
                         className="btn btn-outline-primary"
-                        onClick={() =>
-                            this.props.onAdd(this.unitSelect.value)
-                        }
+                        onClick={() => this.props.onAdd(this.unitSelect.value)}
                     >
-                        <span className="fa fa-plus mr-2"/>
+                        <span className="fa fa-plus mr-2" />
                         Add
                     </button>
                 </div>
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index 3953347a..4816ca23 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -21,10 +21,7 @@ class UnitComponent extends React.Component {
                 '<strong>Energy Cons.:</strong> <code>' +
                 this.props.unit.energyConsumptionW +
                 ' W</code>'
-        } else if (
-            this.props.unitType === 'memory' ||
-            this.props.unitType === 'storage'
-        ) {
+        } else if (this.props.unitType === 'memory' || this.props.unitType === 'storage') {
             unitInfo =
                 '<strong>Speed:</strong> <code>' +
                 this.props.unit.speedMbPerS +
@@ -39,9 +36,7 @@ class UnitComponent extends React.Component {
 
         return (
             <li className="d-flex list-group-item justify-content-between align-items-center">
-                <span style={{ maxWidth: '60%' }}>
-                    {this.props.unit.name}
-                </span>
+                <span style={{ maxWidth: '60%' }}>{this.props.unit.name}</span>
                 <span>
                     <span
                         tabIndex="0"
@@ -53,10 +48,7 @@ class UnitComponent extends React.Component {
                         data-content={unitInfo}
                         data-html="true"
                     />
-                    <span
-                        className="btn btn-outline-danger fa fa-trash"
-                        onClick={this.props.onDelete}
-                    />
+                    <span className="btn btn-outline-danger fa fa-trash" onClick={this.props.onDelete} />
                 </span>
             </li>
         )
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
index fcd3e03b..2ade0f6a 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -5,12 +5,7 @@ const UnitListComponent = ({ unitType, unitIds }) => (
     <ul className="list-group mt-1">
         {unitIds.length !== 0 ? (
             unitIds.map((unitId, index) => (
-                <UnitContainer
-                    unitType={unitType}
-                    unitId={unitId}
-                    index={index}
-                    key={index}
-                />
+                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} />
             ))
         ) : (
             <div className="alert alert-info">
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index c774036f..15c89ed5 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -6,12 +6,7 @@ const UnitTabsComponent = () => (
     <div>
         <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
             <li className="nav-item">
-                <a
-                    className="nav-link active"
-                    data-toggle="tab"
-                    href="#cpu-units"
-                    role="tab"
-                >
+                <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">
                     CPU
                 </a>
             </li>
@@ -21,42 +16,32 @@ const UnitTabsComponent = () => (
                 </a>
             </li>
             <li className="nav-item">
-                <a
-                    className="nav-link"
-                    data-toggle="tab"
-                    href="#memory-units"
-                    role="tab"
-                >
+                <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">
                     Memory
                 </a>
             </li>
             <li className="nav-item">
-                <a
-                    className="nav-link"
-                    data-toggle="tab"
-                    href="#storage-units"
-                    role="tab"
-                >
+                <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">
                     Storage
                 </a>
             </li>
         </ul>
         <div className="tab-content">
             <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                <UnitAddContainer unitType="cpu"/>
-                <UnitListContainer unitType="cpu"/>
+                <UnitAddContainer unitType="cpu" />
+                <UnitListContainer unitType="cpu" />
             </div>
             <div className="tab-pane" id="gpu-units" role="tabpanel">
-                <UnitAddContainer unitType="gpu"/>
-                <UnitListContainer unitType="gpu"/>
+                <UnitAddContainer unitType="gpu" />
+                <UnitListContainer unitType="gpu" />
             </div>
             <div className="tab-pane" id="memory-units" role="tabpanel">
-                <UnitAddContainer unitType="memory"/>
-                <UnitListContainer unitType="memory"/>
+                <UnitAddContainer unitType="memory" />
+                <UnitListContainer unitType="memory" />
             </div>
             <div className="tab-pane" id="storage-units" role="tabpanel">
-                <UnitAddContainer unitType="storage"/>
-                <UnitListContainer unitType="storage"/>
+                <UnitAddContainer unitType="storage" />
+                <UnitListContainer unitType="storage" />
             </div>
         </div>
     </div>
diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index 345674d1..c14775bf 100644
--- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToRoomComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to room
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index b1672764..23b0daac 100644
--- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteRackComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this rack
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index 03b44aa6..d7e30f1d 100644
--- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -2,11 +2,9 @@ import React from 'react'
 
 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>
+        <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"/>
+            <span className="fa fa-plus mr-2" />
             Add machine
         </button>
     </li>
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
index cec3c912..caa3dc04 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -12,17 +12,9 @@ const UnitIcon = ({ id, type }) => (
     </div>
 )
 
-const MachineComponent = ({
-                              position,
-                              machine,
-                              onClick,
-                          }) => {
+const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
-        machine.cpuIds.length +
-        machine.gpuIds.length +
-        machine.memoryIds.length +
-        machine.storageIds.length ===
-        0
+        machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
 
     return (
         <li
@@ -32,33 +24,13 @@ const MachineComponent = ({
         >
             <span className="badge badge-default badge-info mr-1">{position}</span>
             <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.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
-                )}
+                    <span className="badge badge-default badge-warning">Machine with no units</span>
+                ) : undefined}
             </div>
         </li>
     )
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index a381771c..aa7a4f8f 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -8,15 +8,9 @@ const MachineListComponent = ({ machineIds }) => {
         <ul className="list-group machine-list">
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index + 1}/>
+                    return <EmptySlotContainer key={index} position={index + 1} />
                 } else {
-                    return (
-                        <MachineContainer
-                            key={index}
-                            position={index + 1}
-                            machineId={machineId}
-                        />
-                    )
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId} />
                 }
             })}
         </ul>
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
index 1888b69d..b701909a 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import NameComponent from '../NameComponent'
 
-const RackNameComponent = ({ rackName, onEdit }) => (
-    <NameComponent name={rackName} onEdit={onEdit}/>
-)
+const RackNameComponent = ({ rackName, onEdit }) => <NameComponent name={rackName} onEdit={onEdit} />
 
 export default RackNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index 23e8e743..c04e46d8 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -9,12 +9,12 @@ const RackSidebarComponent = () => {
     return (
         <div className="rack-sidebar-container flex-column">
             <div className="rack-sidebar-header-container">
-                <RackNameContainer/>
-                <BackToRoomContainer/>
-                <DeleteRackContainer/>
+                <RackNameContainer />
+                <BackToRoomContainer />
+                <DeleteRackContainer />
             </div>
             <div className="machine-list-container mt-2">
-                <MachineListContainer/>
+                <MachineListContainer />
             </div>
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 7bd8c2f8..64c0a1f6 100644
--- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToBuildingComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to building
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 2be752b5..78417359 100644
--- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteRoomComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this room
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
index 672a191f..857a646f 100644
--- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
@@ -1,15 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-const EditRoomComponent = ({
-                               onEdit,
-                               onFinish,
-                               isEditing,
-                               isInRackConstructionMode,
-                           }) =>
+const EditRoomComponent = ({ onEdit, onFinish, isEditing, isInRackConstructionMode }) =>
     isEditing ? (
         <div className="btn btn-info btn-block" onClick={onFinish}>
-            <span className="fa fa-check mr-2"/>
+            <span className="fa fa-check mr-2" />
             Finish editing room
         </div>
     ) : (
@@ -19,7 +14,7 @@ const EditRoomComponent = ({
             })}
             onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
         >
-            <span className="fa fa-pencil mr-2"/>
+            <span className="fa fa-pencil mr-2" />
             Edit the tiles of this room
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 42b7357b..44566f61 100644
--- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,16 +1,11 @@
 import classNames from 'classnames'
 import React from 'react'
 
-const RackConstructionComponent = ({
-                                       onStart,
-                                       onStop,
-                                       inRackConstructionMode,
-                                       isEditingRoom,
-                                   }) => {
+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"/>
+                <span className="fa fa-times mr-2" />
                 Stop rack construction
             </div>
         )
@@ -23,7 +18,7 @@ const RackConstructionComponent = ({
             })}
             onClick={() => (isEditingRoom ? undefined : onStart())}
         >
-            <span className="fa fa-plus mr-2"/>
+            <span className="fa fa-plus mr-2" />
             Start rack construction
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
index 409d2eef..d637828e 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import NameComponent from '../NameComponent'
 
-const RoomNameComponent = ({ roomName, onEdit }) => (
-    <NameComponent name={roomName} onEdit={onEdit}/>
-)
+const RoomNameComponent = ({ roomName, onEdit }) => <NameComponent name={roomName} onEdit={onEdit} />
 
 export default RoomNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index a23ac381..1bc6533e 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -8,11 +8,11 @@ import RoomNameContainer from '../../../../../containers/app/sidebars/topology/r
 const RoomSidebarComponent = () => {
     return (
         <div>
-            <RoomNameContainer/>
-            <BackToBuildingContainer/>
-            <RackConstructionContainer/>
-            <EditRoomContainer/>
-            <DeleteRoomContainer/>
+            <RoomNameContainer />
+            <BackToBuildingContainer />
+            <RackConstructionContainer />
+            <EditRoomContainer />
+            <DeleteRoomContainer />
         </div>
     )
 }