Manually generate IDs

38 files changed, 889 insertions, 899 deletions

diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index 33dbe011..7ba8639a 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -1,50 +1,50 @@
-import classNames from "classnames";
-import React from "react";
-import "./Sidebar.css";
+import classNames from 'classnames'
+import React from 'react'
+import './Sidebar.css'
 
 class Sidebar extends React.Component {
-  state = {
-    collapsed: false
-  };
+    state = {
+        collapsed: false,
+    }
 
-  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>
-    );
+    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;
+        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}
+                {collapseButton}
+            </div>
+        )
     }
-    return (
-      <div
-        className={classNames("sidebar p-3 h-100", {
-          "sidebar-right": this.props.isRight
-        })}
-        onWheel={e => e.stopPropagation()}
-      >
-        {this.props.children}
-        {collapseButton}
-      </div>
-    );
-  }
 }
 
-export default Sidebar;
+export default Sidebar
diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass
index 4d0e5f1e..02e8940d 100644
--- a/frontend/src/components/app/sidebars/Sidebar.sass
+++ b/frontend/src/components/app/sidebars/Sidebar.sass
@@ -2,49 +2,49 @@
 @import ../../../style-globals/_mixins.sass
 
 .sidebar-collapse-button
-  position: absolute
-  left: 5px
-  top: 5px
-  padding: 5px 7px
+    position: absolute
+    left: 5px
+    top: 5px
+    padding: 5px 7px
 
-  background: white
-  border: solid 1px $gray-semi-light
-  z-index: 99
+    background: white
+    border: solid 1px $gray-semi-light
+    z-index: 99
 
-  +clickable
-  +border-radius(5px)
-  +transition(background, 200ms)
+    +clickable
+    +border-radius(5px)
+    +transition(background, 200ms)
 
-  &.sidebar-collapse-button-right
-    left: auto
-    right: 5px
-    top: 5px
+    &.sidebar-collapse-button-right
+        left: auto
+        right: 5px
+        top: 5px
 
-  &:hover
-    background: #eeeeee
+    &:hover
+        background: #eeeeee
 
 .sidebar
-  position: absolute
-  top: 0
-  left: 0
-  width: 350px
+    position: absolute
+    top: 0
+    left: 0
+    width: 350px
 
-  z-index: 100
-  background: white
+    z-index: 100
+    background: white
 
-  border-right: $gray-semi-dark 1px solid
+    border-right: $gray-semi-dark 1px solid
 
-  .sidebar-collapse-button
-    left: auto
-    right: -25px
+    .sidebar-collapse-button
+        left: auto
+        right: -25px
 
 .sidebar-right
-  left: auto
-  right: 0
+    left: auto
+    right: 0
 
-  border-left: $gray-semi-dark 1px solid
-  border-right: none
+    border-left: $gray-semi-dark 1px solid
+    border-right: none
 
-  .sidebar-collapse-button-right
-    left: -25px
-    right: auto
+    .sidebar-collapse-button-right
+        left: -25px
+        right: auto
diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
index 8c9b164b..01005085 100644
--- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
@@ -1,22 +1,22 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 const LoadBarComponent = ({ percent, disabled }) => (
-  <div className="mt-1">
-    <strong>Current load</strong>
-    <div className={classNames("progress", { disabled })}>
-      <div
-        className="progress-bar"
-        role="progressbar"
-        aria-valuenow={percent}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        style={{ width: percent + "%" }}
-      >
-        {percent}%
-      </div>
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames('progress', { disabled })}>
+            <div
+                className="progress-bar"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{ width: percent + '%' }}
+            >
+                {percent}%
+            </div>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadBarComponent;
+export default LoadBarComponent
diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
index 5f0d40cb..ae52891a 100644
--- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -1,90 +1,84 @@
-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";
+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"
-    );
-  };
+    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>
-  );
-};
+    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>
-);
+    <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>
-);
+    <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;
+export default LoadChartComponent
diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
index bc563dab..54a8b5e9 100644
--- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -1,23 +1,23 @@
-import React from "react";
+import React from 'react'
 
 const ExperimentMetadataComponent = ({
-  experimentName,
-  pathName,
-  traceName,
-  schedulerName
-}) => (
-  <div>
-    <h2>{experimentName}</h2>
-    <p>
-      Path: <strong>{pathName}</strong>
-    </p>
-    <p>
-      Trace: <strong>{traceName}</strong>
-    </p>
-    <p>
-      Scheduler: <strong>{schedulerName}</strong>
-    </p>
-  </div>
-);
+                                         experimentName,
+                                         pathName,
+                                         traceName,
+                                         schedulerName,
+                                     }) => (
+    <div>
+        <h2>{experimentName}</h2>
+        <p>
+            Path: <strong>{pathName}</strong>
+        </p>
+        <p>
+            Trace: <strong>{traceName}</strong>
+        </p>
+        <p>
+            Scheduler: <strong>{schedulerName}</strong>
+        </p>
+    </div>
+)
 
-export default ExperimentMetadataComponent;
+export default ExperimentMetadataComponent
diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
index 3e4cf810..6ee6a3b9 100644
--- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -1,40 +1,35 @@
-import React from "react";
-import {
-  SIM_HIGH_COLOR,
-  SIM_LOW_COLOR,
-  SIM_MID_HIGH_COLOR,
-  SIM_MID_LOW_COLOR
-} from "../../../../util/colors";
-import { LOAD_NAME_MAP } from "../../../../util/simulation-load";
+import React from 'react'
+import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors'
+import { LOAD_NAME_MAP } from '../../../../util/simulation-load'
 
 const LoadMetricComponent = ({ loadMetric }) => (
-  <div>
     <div>
-      Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
-    </div>
-    <div className="btn-group mb-2" style={{ display: "flex" }}>
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
-        title="0-25%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
-        title="25-50%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
-        title="50-75%"
-      />
+        <div>
+            Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
+        </div>
+        <div className="btn-group mb-2" style={{ display: 'flex' }}>
       <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
-        title="75-100%"
+          className="btn btn-secondary"
+          style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
+          title="0-25%"
       />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
+                title="25-50%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
+                title="50-75%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
+                title="75-100%"
+            />
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadMetricComponent;
+export default LoadMetricComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
index 08dbb29a..6e89c40e 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -1,22 +1,22 @@
-import React from "react";
-import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer";
-import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer";
-import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer";
-import Sidebar from "../Sidebar";
-import "./SimulationSidebarComponent.css";
+import React from 'react'
+import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer'
+import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer'
+import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer'
+import Sidebar from '../Sidebar'
+import './SimulationSidebarComponent.css'
 
 const SimulationSidebarComponent = () => {
-  return (
-    <Sidebar isRight={false}>
-      <div className="simulation-sidebar-container flex-column">
-        <ExperimentMetadataContainer />
-        <LoadMetricContainer />
-        <div className="trace-container">
-          <TraceContainer />
-        </div>
-      </div>
-    </Sidebar>
-  );
-};
+    return (
+        <Sidebar isRight={false}>
+            <div className="simulation-sidebar-container flex-column">
+                <ExperimentMetadataContainer/>
+                <LoadMetricContainer/>
+                <div className="trace-container">
+                    <TraceContainer/>
+                </div>
+            </div>
+        </Sidebar>
+    )
+}
 
-export default SimulationSidebarComponent;
+export default SimulationSidebarComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
index 82af97fa..6490cf8d 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
@@ -1,8 +1,8 @@
 .simulation-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
+    display: flex
+    height: 100%
+    max-height: 100%
 
 .trace-container
-  flex: 1
-  overflow-y: scroll
+    flex: 1
+    overflow-y: scroll
diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
index bd917cc9..94617086 100644
--- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
@@ -1,58 +1,58 @@
-import approx from "approximate-number";
-import classNames from "classnames";
-import React from "react";
-import { convertSecondsToFormattedTime } from "../../../../util/date-time";
+import approx from 'approximate-number'
+import classNames from 'classnames'
+import React from 'react'
+import { convertSecondsToFormattedTime } from '../../../../util/date-time'
 
 const TaskComponent = ({ task, flopsLeft }) => {
-  let icon;
-  let progressBarContent;
-  let percent;
-  let infoTitle;
+    let icon
+    let progressBarContent
+    let percent
+    let infoTitle
 
-  if (flopsLeft === task.totalFlopCount) {
-    icon = "hourglass-half";
-    progressBarContent = "";
-    percent = 0;
-    infoTitle = "Not submitted yet";
-  } else if (flopsLeft > 0) {
-    icon = "refresh";
-    progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
-    percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
-    infoTitle =
-      progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
-  } else {
-    icon = "check";
-    progressBarContent = "Completed";
-    percent = 100;
-    infoTitle = "Completed";
-  }
+    if (flopsLeft === task.totalFlopCount) {
+        icon = 'hourglass-half'
+        progressBarContent = ''
+        percent = 0
+        infoTitle = 'Not submitted yet'
+    } else if (flopsLeft > 0) {
+        icon = 'refresh'
+        progressBarContent = approx(task.totalFlopCount - flopsLeft) + ' FLOP'
+        percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount
+        infoTitle =
+            progressBarContent + ' (' + Math.round(percent * 10) / 10 + '%)'
+    } else {
+        icon = 'check'
+        progressBarContent = 'Completed'
+        percent = 100
+        infoTitle = 'Completed'
+    }
 
-  return (
-    <li className="list-group-item flex-column align-items-start">
-      <div className="d-flex w-100 justify-content-between">
-        <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
-        <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
-      </div>
-      <div title={infoTitle} style={{ display: "flex" }}>
+    return (
+        <li className="list-group-item flex-column align-items-start">
+            <div className="d-flex w-100 justify-content-between">
+                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
+                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
+            </div>
+            <div title={infoTitle} style={{ display: 'flex' }}>
         <span
-          className={classNames("fa", "fa-" + icon)}
-          style={{ width: "20px" }}
+            className={classNames('fa', 'fa-' + icon)}
+            style={{ width: '20px' }}
         />
-        <div className="progress" style={{ flexGrow: 1 }}>
-          <div
-            className="progress-bar"
-            role="progressbar"
-            aria-valuenow={percent}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            style={{ width: percent + "%" }}
-          >
-            {progressBarContent}
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
+                <div className="progress" style={{ flexGrow: 1 }}>
+                    <div
+                        className="progress-bar"
+                        role="progressbar"
+                        aria-valuenow={percent}
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        style={{ width: percent + '%' }}
+                    >
+                        {progressBarContent}
+                    </div>
+                </div>
+            </div>
+        </li>
+    )
+}
 
-export default TaskComponent;
+export default TaskComponent
diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
index 2b6559b4..1292219b 100644
--- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
@@ -1,20 +1,20 @@
-import React from "react";
-import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer";
+import React from 'react'
+import TaskContainer from '../../../../containers/app/sidebars/simulation/TaskContainer'
 
 const TraceComponent = ({ jobs }) => (
-  <div>
-    <h3>Trace</h3>
-    {jobs.map(job => (
-      <div key={job.id}>
-        <h4>Job: {job.name}</h4>
-        <ul className="list-group">
-          {job.taskIds.map(taskId => (
-            <TaskContainer taskId={taskId} key={taskId} />
-          ))}
-        </ul>
-      </div>
-    ))}
-  </div>
-);
+    <div>
+        <h3>Trace</h3>
+        {jobs.map(job => (
+            <div key={job.id}>
+                <h4>Job: {job.name}</h4>
+                <ul className="list-group">
+                    {job.taskIds.map(taskId => (
+                        <TaskContainer taskId={taskId} key={taskId}/>
+                    ))}
+                </ul>
+            </div>
+        ))}
+    </div>
+)
 
-export default TraceComponent;
+export default TraceComponent
diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js
index 805538b3..1f3051d5 100644
--- a/frontend/src/components/app/sidebars/topology/NameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/NameComponent.js
@@ -1,13 +1,13 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
 
 const NameComponent = ({ name, onEdit }) => (
-  <h2>
-    {name}
-    <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-      <FontAwesome name="pencil" />
-    </button>
-  </h2>
-);
+    <h2>
+        {name}
+        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
+            <FontAwesome name="pencil"/>
+        </button>
+    </h2>
+)
 
-export default NameComponent;
+export default NameComponent
diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
index 81e510a1..b1def94b 100644
--- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -1,31 +1,31 @@
-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 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'
 
 const TopologySidebarComponent = ({ interactionLevel }) => {
-  let sidebarContent;
+    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";
-  }
+    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>;
-};
+    return <Sidebar isRight={true}>{sidebarContent}</Sidebar>
+}
 
-export default TopologySidebarComponent;
+export default TopologySidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index f16c19f0..00965c18 100644
--- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,20 +1,21 @@
-import React from "react";
-import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer";
+import React from 'react'
+import NewRoomConstructionContainer
+    from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
 
 const BuildingSidebarComponent = ({ inSimulation }) => {
-  return (
-    <div>
-      <h2>Building</h2>
-      {inSimulation ? (
-        <div className="alert alert-info">
-          <span className="fa fa-info-circle mr-2" />
-          <strong>Click on individual rooms</strong> to see their stats!
+    return (
+        <div>
+            <h2>Building</h2>
+            {inSimulation ? (
+                <div className="alert alert-info">
+                    <span className="fa fa-info-circle mr-2"/>
+                    <strong>Click on individual rooms</strong> to see their stats!
+                </div>
+            ) : (
+                <NewRoomConstructionContainer/>
+            )}
         </div>
-      ) : (
-        <NewRoomConstructionContainer />
-      )}
-    </div>
-  );
-};
+    )
+}
 
-export default BuildingSidebarComponent;
+export default BuildingSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 7b049642..362483bf 100644
--- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,31 +1,31 @@
-import React from "react";
+import React from 'react'
 
 const NewRoomConstructionComponent = ({
-  onStart,
-  onFinish,
-  onCancel,
-  currentRoomInConstruction
-}) => {
-  if (currentRoomInConstruction === -1) {
+                                          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"/>
+                Construct a new room
+            </div>
+        )
+    }
     return (
-      <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-        <span className="fa fa-plus 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" />
-        Finalize new room
-      </div>
-      <div className="btn btn-default btn-block" onClick={onCancel}>
-        <span className="fa fa-times mr-2" />
-        Cancel construction
-      </div>
-    </div>
-  );
-};
+        <div>
+            <div className="btn btn-primary btn-block" onClick={onFinish}>
+                <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"/>
+                Cancel construction
+            </div>
+        </div>
+    )
+}
 
-export default NewRoomConstructionComponent;
+export default NewRoomConstructionComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 7f56aca0..d7ce24bc 100644
--- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const BackToRackComponent = ({ onClick }) => (
-  <div className="btn btn-secondary btn-block" onClick={onClick}>
-    <span className="fa fa-angle-left mr-2" />
-    Back to rack
-  </div>
-);
+    <div className="btn btn-secondary btn-block" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to rack
+    </div>
+)
 
-export default BackToRackComponent;
+export default BackToRackComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index d8774bf9..b9aa6251 100644
--- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this machine
+    </div>
+)
 
-export default DeleteMachineComponent;
+export default DeleteMachineComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 0ad8b79c..70be6968 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react'
 
 const MachineNameComponent = ({ position }) => (
-  <h2>Machine at slot {position}</h2>
-);
+    <h2>Machine at slot {position}</h2>
+)
 
-export default MachineNameComponent;
+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 5ccaf25c..66c8c84f 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,27 +1,27 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-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 React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+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'
 
 const MachineSidebarComponent = ({ inSimulation, machineId }) => {
-  return (
-    <div>
-      <MachineNameContainer />
-      <BackToRackContainer />
-      {inSimulation ? (
+    return (
         <div>
-          <LoadBarContainer objectType="machine" objectId={machineId} />
-          <LoadChartContainer objectType="machine" objectId={machineId} />
+            <MachineNameContainer/>
+            <BackToRackContainer/>
+            {inSimulation ? (
+                <div>
+                    <LoadBarContainer objectType="machine" objectId={machineId}/>
+                    <LoadChartContainer objectType="machine" objectId={machineId}/>
+                </div>
+            ) : (
+                <DeleteMachineContainer/>
+            )}
+            <UnitTabsContainer/>
         </div>
-      ) : (
-        <DeleteMachineContainer />
-      )}
-      <UnitTabsContainer />
-    </div>
-  );
-};
+    )
+}
 
-export default MachineSidebarComponent;
+export default MachineSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 0c903228..57e219fd 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,46 +1,46 @@
-import PropTypes from "prop-types";
-import React from "react";
+import PropTypes from 'prop-types'
+import React from 'react'
 
 class UnitAddComponent extends React.Component {
-  static propTypes = {
-    units: PropTypes.array.isRequired,
-    onAdd: PropTypes.func.isRequired
-  };
+    static propTypes = {
+        units: PropTypes.array.isRequired,
+        onAdd: PropTypes.func.isRequired,
+    }
 
-  render() {
-    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 => (
-              <option value={unit.id} key={unit.id}>
-                {unit.manufacturer +
-                  " " +
-                  unit.family +
-                  " " +
-                  unit.model +
-                  " " +
-                  unit.generation}
-              </option>
-            ))}
-          </select>
-          <button
-            type="submit"
-            className="btn btn-outline-primary"
-            onClick={() =>
-              this.props.onAdd(parseInt(this.unitSelect.value, 10))
-            }
-          >
-            <span className="fa fa-plus mr-2" />
-            Add
-          </button>
-        </div>
-      </div>
-    );
-  }
+    render() {
+        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 => (
+                            <option value={unit.id} key={unit.id}>
+                                {unit.manufacturer +
+                                ' ' +
+                                unit.family +
+                                ' ' +
+                                unit.model +
+                                ' ' +
+                                unit.generation}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        type="submit"
+                        className="btn btn-outline-primary"
+                        onClick={() =>
+                            this.props.onAdd(parseInt(this.unitSelect.value, 10))
+                        }
+                    >
+                        <span className="fa fa-plus mr-2"/>
+                        Add
+                    </button>
+                </div>
+            </div>
+        )
+    }
 }
 
-export default UnitAddComponent;
+export default UnitAddComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index 7c27043d..93ac1cdd 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,78 +1,78 @@
-import React from "react";
-import jQuery from "../../../../../util/jquery";
+import React from 'react'
+import jQuery from '../../../../../util/jquery'
 
 class UnitComponent extends React.Component {
-  componentDidMount() {
-    jQuery(".unit-info-popover").popover({
-      trigger: "focus"
-    });
-  }
-
-  render() {
-    let unitInfo;
-    if (this.props.unitType === "cpu" || this.props.unitType === "gpu") {
-      unitInfo =
-        "<strong>Clockrate:</strong> <code>" +
-        this.props.unit.clockRateMhz +
-        " MHz</code><br/>" +
-        "<strong>Num. Cores:</strong> <code>" +
-        this.props.unit.numberOfCores +
-        "</code><br/>" +
-        "<strong>Energy Cons.:</strong> <code>" +
-        this.props.unit.energyConsumptionW +
-        " W</code>";
-    } else if (
-      this.props.unitType === "memory" ||
-      this.props.unitType === "storage"
-    ) {
-      unitInfo =
-        "<strong>Speed:</strong> <code>" +
-        this.props.unit.speedMbPerS +
-        " Mb/s</code><br/>" +
-        "<strong>Size:</strong> <code>" +
-        this.props.unit.sizeMb +
-        " MB</code><br/>" +
-        "<strong>Energy Cons.:</strong> <code> " +
-        this.props.unit.energyConsumptionW +
-        " W</code>";
+    componentDidMount() {
+        jQuery('.unit-info-popover').popover({
+            trigger: 'focus',
+        })
     }
 
-    return (
-      <li className="d-flex list-group-item justify-content-between align-items-center">
-        <span style={{ maxWidth: "60%" }}>
+    render() {
+        let unitInfo
+        if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') {
+            unitInfo =
+                '<strong>Clockrate:</strong> <code>' +
+                this.props.unit.clockRateMhz +
+                ' MHz</code><br/>' +
+                '<strong>Num. Cores:</strong> <code>' +
+                this.props.unit.numberOfCores +
+                '</code><br/>' +
+                '<strong>Energy Cons.:</strong> <code>' +
+                this.props.unit.energyConsumptionW +
+                ' W</code>'
+        } else if (
+            this.props.unitType === 'memory' ||
+            this.props.unitType === 'storage'
+        ) {
+            unitInfo =
+                '<strong>Speed:</strong> <code>' +
+                this.props.unit.speedMbPerS +
+                ' Mb/s</code><br/>' +
+                '<strong>Size:</strong> <code>' +
+                this.props.unit.sizeMb +
+                ' MB</code><br/>' +
+                '<strong>Energy Cons.:</strong> <code> ' +
+                this.props.unit.energyConsumptionW +
+                ' W</code>'
+        }
+
+        return (
+            <li className="d-flex list-group-item justify-content-between align-items-center">
+        <span style={{ maxWidth: '60%' }}>
           {this.props.unit.manufacturer +
-            " " +
-            this.props.unit.family +
-            " " +
-            this.props.unit.model +
-            " " +
-            this.props.unit.generation}
+          ' ' +
+          this.props.unit.family +
+          ' ' +
+          this.props.unit.model +
+          ' ' +
+          this.props.unit.generation}
         </span>
-        <span>
+                <span>
           <span
-            tabIndex="0"
-            className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
-            role="button"
-            data-toggle="popover"
-            data-trigger="focus"
-            title="Unit information"
-            data-content={unitInfo}
-            data-html="true"
+              tabIndex="0"
+              className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
+              role="button"
+              data-toggle="popover"
+              data-trigger="focus"
+              title="Unit information"
+              data-content={unitInfo}
+              data-html="true"
           />
-          {this.props.inSimulation ? (
-            undefined
-          ) : (
-            <span
-              className="btn btn-outline-danger"
-              onClick={this.props.onDelete}
-            >
-              <span className="fa fa-trash" />
+                    {this.props.inSimulation ? (
+                        undefined
+                    ) : (
+                        <span
+                            className="btn btn-outline-danger"
+                            onClick={this.props.onDelete}
+                        >
+              <span className="fa fa-trash"/>
             </span>
-          )}
+                    )}
         </span>
-      </li>
-    );
-  }
+            </li>
+        )
+    }
 }
 
-export default UnitComponent;
+export default UnitComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 38df806b..31d4db51 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,29 +1,29 @@
-import React from "react";
-import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer";
+import React from 'react'
+import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
 
 const UnitListComponent = ({ unitType, unitIds, inSimulation }) => (
-  <ul className="list-group mt-1">
-    {unitIds.length !== 0 ? (
-      unitIds.map((unitId, index) => (
-        <UnitContainer
-          unitType={unitType}
-          unitId={unitId}
-          index={index}
-          key={index}
-        />
-      ))
-    ) : (
-      <div className="alert alert-info">
-        {inSimulation ? (
-          <strong>No units of this type in this machine</strong>
+    <ul className="list-group mt-1">
+        {unitIds.length !== 0 ? (
+            unitIds.map((unitId, index) => (
+                <UnitContainer
+                    unitType={unitType}
+                    unitId={unitId}
+                    index={index}
+                    key={index}
+                />
+            ))
         ) : (
-          <span>
+            <div className="alert alert-info">
+                {inSimulation ? (
+                    <strong>No units of this type in this machine</strong>
+                ) : (
+                    <span>
             <strong>No units...</strong> Add some with the menu above!
           </span>
+                )}
+            </div>
         )}
-      </div>
-    )}
-  </ul>
-);
+    </ul>
+)
 
-export default UnitListComponent;
+export default UnitListComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 0683c796..df7eeb77 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,65 +1,65 @@
-import React from "react";
-import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer";
-import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer";
+import React from 'react'
+import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
+import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
 
 const UnitTabsComponent = ({ inSimulation }) => (
-  <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"
-        >
-          CPU
-        </a>
-      </li>
-      <li className="nav-item">
-        <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">
-          GPU
-        </a>
-      </li>
-      <li className="nav-item">
-        <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"
-        >
-          Storage
-        </a>
-      </li>
-    </ul>
-    <div className="tab-content">
-      <div className="tab-pane active" id="cpu-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />}
-        <UnitListContainer unitType="cpu" />
-      </div>
-      <div className="tab-pane" id="gpu-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />}
-        <UnitListContainer unitType="gpu" />
-      </div>
-      <div className="tab-pane" id="memory-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="memory" />}
-        <UnitListContainer unitType="memory" />
-      </div>
-      <div className="tab-pane" id="storage-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="storage" />}
-        <UnitListContainer unitType="storage" />
-      </div>
+    <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"
+                >
+                    CPU
+                </a>
+            </li>
+            <li className="nav-item">
+                <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">
+                    GPU
+                </a>
+            </li>
+            <li className="nav-item">
+                <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"
+                >
+                    Storage
+                </a>
+            </li>
+        </ul>
+        <div className="tab-content">
+            <div className="tab-pane active" id="cpu-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>}
+                <UnitListContainer unitType="cpu"/>
+            </div>
+            <div className="tab-pane" id="gpu-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>}
+                <UnitListContainer unitType="gpu"/>
+            </div>
+            <div className="tab-pane" id="memory-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>}
+                <UnitListContainer unitType="memory"/>
+            </div>
+            <div className="tab-pane" id="storage-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>}
+                <UnitListContainer unitType="storage"/>
+            </div>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default UnitTabsComponent;
+export default UnitTabsComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index 6bcf4088..345674d1 100644
--- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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" />
-    Back to room
-  </div>
-);
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to room
+    </div>
+)
 
-export default BackToRoomComponent;
+export default BackToRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index d8aa7634..b1672764 100644
--- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this rack
+    </div>
+)
 
-export default DeleteRackComponent;
+export default DeleteRackComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d86f9fee..f182a78c 100644
--- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,19 +1,19 @@
-import React from "react";
+import React from 'react'
 
 const EmptySlotComponent = ({ position, onAdd, inSimulation }) => (
-  <li className="list-group-item d-flex justify-content-between align-items-center">
+    <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>
-    {inSimulation ? (
-      <span className="badge badge-default badge-success">Empty Slot</span>
-    ) : (
-      <button className="btn btn-outline-primary" onClick={onAdd}>
-        <span className="fa fa-plus mr-2" />
-        Add machine
-      </button>
-    )}
-  </li>
-);
+        {inSimulation ? (
+            <span className="badge badge-default badge-success">Empty Slot</span>
+        ) : (
+            <button className="btn btn-outline-primary" onClick={onAdd}>
+                <span className="fa fa-plus mr-2"/>
+                Add machine
+            </button>
+        )}
+    </li>
+)
 
-export default EmptySlotComponent;
+export default EmptySlotComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
index 2521f4a2..0a1d1065 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,78 +1,78 @@
-import React from "react";
-import Shapes from "../../../../../shapes";
-import { convertLoadToSimulationColor } from "../../../../../util/simulation-load";
+import React from 'react'
+import Shapes from '../../../../../shapes'
+import { convertLoadToSimulationColor } from '../../../../../util/simulation-load'
 
 const UnitIcon = ({ id, type }) => (
-  <div>
-    <img
-      src={"/img/topology/" + id + "-icon.png"}
-      alt={"Machine contains " + type + " units"}
-      className="img-fluid ml-1"
-      style={{ maxHeight: "35px" }}
-    />
-  </div>
-);
+    <div>
+        <img
+            src={'/img/topology/' + id + '-icon.png'}
+            alt={'Machine contains ' + type + ' units'}
+            className="img-fluid ml-1"
+            style={{ maxHeight: '35px' }}
+        />
+    </div>
+)
 
 const MachineComponent = ({
-  position,
-  machine,
-  inSimulation,
-  machineLoad,
-  onClick
-}) => {
-  let color = "white";
-  if (inSimulation && machineLoad >= 0) {
-    color = convertLoadToSimulationColor(machineLoad);
-  }
-  const hasNoUnits =
-    machine.cpuIds.length +
-      machine.gpuIds.length +
-      machine.memoryIds.length +
-      machine.storageIds.length ===
-    0;
+                              position,
+                              machine,
+                              inSimulation,
+                              machineLoad,
+                              onClick,
+                          }) => {
+    let color = 'white'
+    if (inSimulation && machineLoad >= 0) {
+        color = convertLoadToSimulationColor(machineLoad)
+    }
+    const hasNoUnits =
+        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"
-      onClick={onClick}
-      style={{ backgroundColor: color }}
-    >
-      <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
-        )}
-        {hasNoUnits ? (
-          <span className="badge badge-default badge-warning">
+    return (
+        <li
+            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+            onClick={onClick}
+            style={{ backgroundColor: color }}
+        >
+            <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
+                )}
+                {hasNoUnits ? (
+                    <span className="badge badge-default badge-warning">
             Machine with no units
           </span>
-        ) : (
-          undefined
-        )}
-      </div>
-    </li>
-  );
-};
+                ) : (
+                    undefined
+                )}
+            </div>
+        </li>
+    )
+}
 
 MachineComponent.propTypes = {
-  machine: Shapes.Machine
-};
+    machine: Shapes.Machine,
+}
 
-export default MachineComponent;
+export default MachineComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index d5521557..a381771c 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,26 +1,26 @@
-import React from "react";
-import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer";
-import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer";
-import "./MachineListComponent.css";
+import React from 'react'
+import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
+import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
+import './MachineListComponent.css'
 
 const MachineListComponent = ({ machineIds }) => {
-  return (
-    <ul className="list-group machine-list">
-      {machineIds.map((machineId, index) => {
-        if (machineId === null) {
-          return <EmptySlotContainer key={index} position={index + 1} />;
-        } else {
-          return (
-            <MachineContainer
-              key={index}
-              position={index + 1}
-              machineId={machineId}
-            />
-          );
-        }
-      })}
-    </ul>
-  );
-};
+    return (
+        <ul className="list-group machine-list">
+            {machineIds.map((machineId, index) => {
+                if (machineId === null) {
+                    return <EmptySlotContainer key={index} position={index + 1}/>
+                } else {
+                    return (
+                        <MachineContainer
+                            key={index}
+                            position={index + 1}
+                            machineId={machineId}
+                        />
+                    )
+                }
+            })}
+        </ul>
+    )
+}
 
-export default MachineListComponent;
+export default MachineListComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
index bbcfe696..11b82c93 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
@@ -1,2 +1,2 @@
 .machine-list li
-  min-height: 64px
+    min-height: 64px
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
index 5e095823..1888b69d 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import NameComponent from "../NameComponent";
+import React from 'react'
+import NameComponent from '../NameComponent'
 
 const RackNameComponent = ({ rackName, onEdit }) => (
-  <NameComponent name={rackName} onEdit={onEdit} />
-);
+    <NameComponent name={rackName} onEdit={onEdit}/>
+)
 
-export default RackNameComponent;
+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 f832b9b9..47d99254 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -1,34 +1,34 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-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 "./RackSidebarComponent.css";
+import React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+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 './RackSidebarComponent.css'
 
 const RackSidebarComponent = ({ inSimulation, rackId }) => {
-  return (
-    <div className="rack-sidebar-container flex-column">
-      <div className="rack-sidebar-header-container">
-        <RackNameContainer />
-        <BackToRoomContainer />
-        {inSimulation ? (
-          <div>
-            <LoadBarContainer objectType="rack" objectId={rackId} />
-            <LoadChartContainer objectType="rack" objectId={rackId} />
-          </div>
-        ) : (
-          <div>
-            <DeleteRackContainer />
-          </div>
-        )}
-      </div>
-      <div className="machine-list-container mt-2">
-        <MachineListContainer />
-      </div>
-    </div>
-  );
-};
+    return (
+        <div className="rack-sidebar-container flex-column">
+            <div className="rack-sidebar-header-container">
+                <RackNameContainer/>
+                <BackToRoomContainer/>
+                {inSimulation ? (
+                    <div>
+                        <LoadBarContainer objectType="rack" objectId={rackId}/>
+                        <LoadChartContainer objectType="rack" objectId={rackId}/>
+                    </div>
+                ) : (
+                    <div>
+                        <DeleteRackContainer/>
+                    </div>
+                )}
+            </div>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
+        </div>
+    )
+}
 
-export default RackSidebarComponent;
+export default RackSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
index 822804bc..29fec02a 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
@@ -1,11 +1,11 @@
 .rack-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
+    display: flex
+    height: 100%
+    max-height: 100%
 
 .rack-sidebar-header-container
-  flex: 0
+    flex: 0
 
 .machine-list-container
-  flex: 1
-  overflow-y: scroll
+    flex: 1
+    overflow-y: scroll
diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 0409dbdd..7bd8c2f8 100644
--- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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" />
-    Back to building
-  </div>
-);
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to building
+    </div>
+)
 
-export default BackToBuildingComponent;
+export default BackToBuildingComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 3e3b3b36..2be752b5 100644
--- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const DeleteRoomComponent = ({ onClick }) => (
-  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-    <span className="fa fa-trash mr-2" />
-    Delete this room
-  </div>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this room
+    </div>
+)
 
-export default DeleteRoomComponent;
+export default DeleteRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
index c3b9f0ad..672a191f 100644
--- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
@@ -1,27 +1,27 @@
-import classNames from "classnames";
-import React from "react";
+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>
-  );
+                               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;
+export default EditRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 06b8a2aa..42b7357b 100644
--- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 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" />
-        Stop rack construction
-      </div>
-    );
-  }
+                                       onStart,
+                                       onStop,
+                                       inRackConstructionMode,
+                                       isEditingRoom,
+                                   }) => {
+    if (inRackConstructionMode) {
+        return (
+            <div className="btn btn-primary btn-block" onClick={onStop}>
+                <span className="fa fa-times mr-2"/>
+                Stop rack construction
+            </div>
+        )
+    }
 
-  return (
-    <div
-      className={classNames("btn btn-outline-primary btn-block", {
-        disabled: isEditingRoom
-      })}
-      onClick={() => (isEditingRoom ? undefined : onStart())}
-    >
-      <span className="fa fa-plus mr-2" />
-      Start rack construction
-    </div>
-  );
-};
+    return (
+        <div
+            className={classNames('btn btn-outline-primary btn-block', {
+                disabled: isEditingRoom,
+            })}
+            onClick={() => (isEditingRoom ? undefined : onStart())}
+        >
+            <span className="fa fa-plus mr-2"/>
+            Start rack construction
+        </div>
+    )
+}
 
-export default RackConstructionComponent;
+export default RackConstructionComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
index 11b88edd..409d2eef 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import NameComponent from "../NameComponent";
+import React from 'react'
+import NameComponent from '../NameComponent'
 
 const RoomNameComponent = ({ roomName, onEdit }) => (
-  <NameComponent name={roomName} onEdit={onEdit} />
-);
+    <NameComponent name={roomName} onEdit={onEdit}/>
+)
 
-export default RoomNameComponent;
+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 275f9624..d9865744 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,38 +1,38 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-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 RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer";
+import React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+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 RoomTypeContainer from '../../../../../containers/app/sidebars/topology/room/RoomTypeContainer'
 
 const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => {
-  let allowedObjects;
-  if (!inSimulation && roomType === "SERVER") {
-    allowedObjects = <RackConstructionContainer />;
-  }
+    let allowedObjects
+    if (!inSimulation && roomType === 'SERVER') {
+        allowedObjects = <RackConstructionContainer/>
+    }
 
-  return (
-    <div>
-      <RoomNameContainer />
-      <RoomTypeContainer />
-      <BackToBuildingContainer />
-      {inSimulation ? (
+    return (
         <div>
-          <LoadBarContainer objectType="room" objectId={roomId} />
-          <LoadChartContainer objectType="room" objectId={roomId} />
+            <RoomNameContainer/>
+            <RoomTypeContainer/>
+            <BackToBuildingContainer/>
+            {inSimulation ? (
+                <div>
+                    <LoadBarContainer objectType="room" objectId={roomId}/>
+                    <LoadChartContainer objectType="room" objectId={roomId}/>
+                </div>
+            ) : (
+                <div>
+                    {allowedObjects}
+                    <EditRoomContainer/>
+                    <DeleteRoomContainer/>
+                </div>
+            )}
         </div>
-      ) : (
-        <div>
-          {allowedObjects}
-          <EditRoomContainer />
-          <DeleteRoomContainer />
-        </div>
-      )}
-    </div>
-  );
-};
+    )
+}
 
-export default RoomSidebarComponent;
+export default RoomSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
index 46d91c2c..b662307c 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types";
+import React from 'react'
+import { ROOM_TYPE_TO_NAME_MAP } from '../../../../../util/room-types'
 
 const RoomTypeComponent = ({ roomType }) => (
-  <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p>
-);
+    <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p>
+)
 
-export default RoomTypeComponent;
+export default RoomTypeComponent