From 751a9ef3a12c952fe179f256d854d0c4aa37e28e Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Wed, 4 Oct 2017 22:49:07 +0200
Subject: Apply prettier to codebase

---
 .../app/sidebars/topology/NameComponent.js         |  14 +--
 .../sidebars/topology/TopologySidebarComponent.js  |  42 ++++---
 .../topology/building/BuildingSidebarComponent.js  |  25 +++--
 .../building/NewRoomConstructionComponent.js       |  44 ++++----
 .../topology/machine/BackToRackComponent.js        |  10 +-
 .../topology/machine/DeleteMachineComponent.js     |  10 +-
 .../topology/machine/MachineNameComponent.js       |   4 +-
 .../topology/machine/MachineSidebarComponent.js    |  27 ++---
 .../sidebars/topology/machine/UnitAddComponent.js  |  67 ++++++-----
 .../app/sidebars/topology/machine/UnitComponent.js | 124 ++++++++++++---------
 .../sidebars/topology/machine/UnitListComponent.js |  37 +++---
 .../sidebars/topology/machine/UnitTabsComponent.js | 103 +++++++++--------
 .../sidebars/topology/rack/BackToRoomComponent.js  |  10 +-
 .../sidebars/topology/rack/DeleteRackComponent.js  |  10 +-
 .../sidebars/topology/rack/EmptySlotComponent.js   |  29 +++--
 .../app/sidebars/topology/rack/MachineComponent.js | 119 +++++++++++---------
 .../sidebars/topology/rack/MachineListComponent.js |  30 +++--
 .../sidebars/topology/rack/RackNameComponent.js    |   4 +-
 .../sidebars/topology/rack/RackSidebarComponent.js |  43 +++----
 .../topology/room/BackToBuildingComponent.js       |  10 +-
 .../sidebars/topology/room/DeleteRoomComponent.js  |  10 +-
 .../topology/room/RackConstructionComponent.js     |  32 +++---
 .../sidebars/topology/room/RoomNameComponent.js    |   4 +-
 .../sidebars/topology/room/RoomSidebarComponent.js |  41 +++----
 .../sidebars/topology/room/RoomTypeComponent.js    |   8 +-
 25 files changed, 463 insertions(+), 394 deletions(-)

(limited to 'src/components/app/sidebars/topology')

diff --git a/src/components/app/sidebars/topology/NameComponent.js b/src/components/app/sidebars/topology/NameComponent.js
index d663f4ae..805538b3 100644
--- a/src/components/app/sidebars/topology/NameComponent.js
+++ b/src/components/app/sidebars/topology/NameComponent.js
@@ -1,13 +1,13 @@
 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>
+const NameComponent = ({ name, onEdit }) => (
+  <h2>
+    {name}
+    <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
+      <FontAwesome name="pencil" />
+    </button>
+  </h2>
 );
 
 export default NameComponent;
diff --git a/src/components/app/sidebars/topology/TopologySidebarComponent.js b/src/components/app/sidebars/topology/TopologySidebarComponent.js
index ff4260a9..81e510a1 100644
--- a/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -5,31 +5,27 @@ import RackSidebarContainer from "../../../../containers/app/sidebars/topology/r
 import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer";
 import Sidebar from "../Sidebar";
 
-const TopologySidebarComponent = ({interactionLevel}) => {
-    let sidebarContent;
+const TopologySidebarComponent = ({ interactionLevel }) => {
+  let sidebarContent;
 
-    switch (interactionLevel.mode) {
-        case "BUILDING":
-            sidebarContent = <BuildingSidebarContainer/>;
-            break;
-        case "ROOM":
-            sidebarContent = <RoomSidebarContainer/>;
-            break;
-        case "RACK":
-            sidebarContent = <RackSidebarContainer/>;
-            break;
-        case "MACHINE":
-            sidebarContent = <MachineSidebarContainer/>;
-            break;
-        default:
-            sidebarContent = "Missing Content";
-    }
+  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;
diff --git a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index 2bf81a48..f16c19f0 100644
--- a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,19 +1,20 @@
 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!
-                </div> :
-                <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!
         </div>
-    );
+      ) : (
+        <NewRoomConstructionContainer />
+      )}
+    </div>
+  );
 };
 
 export default BuildingSidebarComponent;
diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index d89b0ac0..a559c8dd 100644
--- a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,27 +1,31 @@
 import React from "react";
 
-const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => {
-    if (currentRoomInConstruction === -1) {
-        return (
-            <div className="btn btn-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-2"/>
-                Construct a new room
-            </div>
-        );
-    }
+const NewRoomConstructionComponent = ({
+  onStart,
+  onFinish,
+  onCancel,
+  currentRoomInConstruction
+}) => {
+  if (currentRoomInConstruction === -1) {
     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 className="btn btn-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>
+  );
 };
 
 export default NewRoomConstructionComponent;
diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 19e33904..7f56aca0 100644
--- a/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,10 +1,10 @@
 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>
+const BackToRackComponent = ({ onClick }) => (
+  <div className="btn btn-secondary btn-block" onClick={onClick}>
+    <span className="fa fa-angle-left mr-2" />
+    Back to rack
+  </div>
 );
 
 export default BackToRackComponent;
diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index 7ba08352..8da39b30 100644
--- a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -1,10 +1,10 @@
 import React from "react";
 
-const DeleteMachineComponent = ({onClick}) => (
-    <div className="btn btn-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
-        Delete this machine
-    </div>
+const DeleteMachineComponent = ({ onClick }) => (
+  <div className="btn btn-danger btn-block" onClick={onClick}>
+    <span className="fa fa-trash mr-2" />
+    Delete this machine
+  </div>
 );
 
 export default DeleteMachineComponent;
diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 321e350d..0ad8b79c 100644
--- a/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,7 @@
 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/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index cf4db80e..5ccaf25c 100644
--- a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -6,21 +6,22 @@ import DeleteMachineContainer from "../../../../../containers/app/sidebars/topol
 import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer";
 import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer";
 
-const MachineSidebarComponent = ({inSimulation, machineId}) => {
-    return (
+const MachineSidebarComponent = ({ inSimulation, machineId }) => {
+  return (
+    <div>
+      <MachineNameContainer />
+      <BackToRackContainer />
+      {inSimulation ? (
         <div>
-            <MachineNameContainer/>
-            <BackToRackContainer/>
-            {inSimulation ?
-                <div>
-                    <LoadBarContainer objectType="machine" objectId={machineId}/>
-                    <LoadChartContainer objectType="machine" objectId={machineId}/>
-                </div> :
-                <DeleteMachineContainer/>
-            }
-            <UnitTabsContainer/>
+          <LoadBarContainer objectType="machine" objectId={machineId} />
+          <LoadChartContainer objectType="machine" objectId={machineId} />
         </div>
-    );
+      ) : (
+        <DeleteMachineContainer />
+      )}
+      <UnitTabsContainer />
+    </div>
+  );
 };
 
 export default MachineSidebarComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index f16700df..d0082a72 100644
--- a/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -2,37 +2,44 @@ 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-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-primary"
+            onClick={() =>
+              this.props.onAdd(parseInt(this.unitSelect.value, 10))}
+          >
+            <span className="fa fa-plus mr-2" />
+            Add
+          </button>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default UnitAddComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js
index a0435eab..10a310e8 100644
--- a/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -2,61 +2,79 @@ 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%"}}>
-                    {
-                        this.props.unit.manufacturer
-                        + " " + this.props.unit.family
-                        + " " + this.props.unit.model
-                        + " " + this.props.unit.generation
-                    }
-                </span>
-                <span>
-                    <a
-                        tabIndex="0"
-                        className="unit-info-popover btn btn-outline-info mr-1"
-                        role="button"
-                        data-toggle="popover"
-                        data-trigger="focus"
-                        title="Unit information"
-                        data-content={unitInfo}
-                        data-html="true"
-                    >
-                        <span className="fa fa-info-circle"/>
-                    </a>
-                    {this.props.inSimulation ?
-                        undefined :
-                        <span className="btn btn-outline-danger" onClick={this.props.onDelete}>
-                            <span className="fa fa-trash"/>
-                        </span>
-                    }
-                </span>
-            </li>
-        );
+  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}
+        </span>
+        <span>
+          <a
+            tabIndex="0"
+            className="unit-info-popover btn btn-outline-info mr-1"
+            role="button"
+            data-toggle="popover"
+            data-trigger="focus"
+            title="Unit information"
+            data-content={unitInfo}
+            data-html="true"
+          >
+            <span className="fa fa-info-circle" />
+          </a>
+          {this.props.inSimulation ? (
+            undefined
+          ) : (
+            <span
+              className="btn btn-outline-danger"
+              onClick={this.props.onDelete}
+            >
+              <span className="fa fa-trash" />
+            </span>
+          )}
+        </span>
+      </li>
+    );
+  }
 }
 
 export default UnitComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 683f6023..38df806b 100644
--- a/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,20 +1,29 @@
 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> :
-                    <span><strong>No units...</strong> Add some with the menu above!</span>
-                }
-            </div>
-        }
-    </ul>
+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>
+        ) : (
+          <span>
+            <strong>No units...</strong> Add some with the menu above!
+          </span>
+        )}
+      </div>
+    )}
+  </ul>
 );
 
 export default UnitListComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 2113d6d8..0683c796 100644
--- a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -2,53 +2,64 @@ 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>
+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>
+  </div>
 );
 
 export default UnitTabsComponent;
diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index 267001c6..6bcf4088 100644
--- a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,10 +1,10 @@
 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>
+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>
 );
 
 export default BackToRoomComponent;
diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index b268bd72..f0bad0ed 100644
--- a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -1,10 +1,10 @@
 import React from "react";
 
-const DeleteRackComponent = ({onClick}) => (
-    <div className="btn btn-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
-        Delete this rack
-    </div>
+const DeleteRackComponent = ({ onClick }) => (
+  <div className="btn btn-danger btn-block" onClick={onClick}>
+    <span className="fa fa-trash mr-2" />
+    Delete this rack
+  </div>
 );
 
 export default DeleteRackComponent;
diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index 08665072..d86f9fee 100644
--- a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,20 +1,19 @@
 import React from "react";
 
-const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
-    <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>
+const EmptySlotComponent = ({ position, onAdd, inSimulation }) => (
+  <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>
 );
 
 export default EmptySlotComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js
index 0ba4503d..2521f4a2 100644
--- a/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,65 +1,78 @@
 import React from "react";
 import Shapes from "../../../../../shapes";
-import {convertLoadToSimulationColor} from "../../../../../util/simulation-load";
+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>
+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>
 );
 
-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;
+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;
 
-    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>
-    );
+  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>
+  );
 };
 
 MachineComponent.propTypes = {
-    machine: Shapes.Machine
+  machine: Shapes.Machine
 };
 
 export default MachineComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js
index fcb90d66..d5521557 100644
--- a/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -3,18 +3,24 @@ import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/
 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>
-    );
+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>
+  );
 };
 
 export default MachineListComponent;
diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js
index ee8d194b..5e095823 100644
--- a/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ b/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -1,8 +1,8 @@
 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/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index f563a52f..f832b9b9 100644
--- a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -7,27 +7,28 @@ import MachineListContainer from "../../../../../containers/app/sidebars/topolog
 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>
-    );
+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>
+  );
 };
 
 export default RackSidebarComponent;
diff --git a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 81384ba5..0409dbdd 100644
--- a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,10 +1,10 @@
 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>
+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>
 );
 
 export default BackToBuildingComponent;
diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 3f41eac0..5df484b5 100644
--- a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,10 +1,10 @@
 import React from "react";
 
-const DeleteRoomComponent = ({onClick}) => (
-    <div className="btn btn-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
-        Delete this room
-    </div>
+const DeleteRoomComponent = ({ onClick }) => (
+  <div className="btn btn-danger btn-block" onClick={onClick}>
+    <span className="fa fa-trash mr-2" />
+    Delete this room
+  </div>
 );
 
 export default DeleteRoomComponent;
diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 9bfe28ce..0982e403 100644
--- a/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,21 +1,25 @@
 import React from "react";
 
-const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => {
-    if (inRackConstructionMode) {
-        return (
-            <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2"/>
-                Stop rack construction
-            </div>
-        );
-    }
-
+const RackConstructionComponent = ({
+  inRackConstructionMode,
+  onStart,
+  onStop
+}) => {
+  if (inRackConstructionMode) {
     return (
-        <div className="btn btn-primary btn-block" onClick={onStart}>
-            <span className="fa fa-plus mr-2"/>
-            Start rack construction
-        </div>
+      <div className="btn btn-primary btn-block" onClick={onStop}>
+        <span className="fa fa-times mr-2" />
+        Stop rack construction
+      </div>
     );
+  }
+
+  return (
+    <div className="btn btn-primary btn-block" onClick={onStart}>
+      <span className="fa fa-plus mr-2" />
+      Start rack construction
+    </div>
+  );
 };
 
 export default RackConstructionComponent;
diff --git a/src/components/app/sidebars/topology/room/RoomNameComponent.js b/src/components/app/sidebars/topology/room/RoomNameComponent.js
index 4d3e41cc..11b88edd 100644
--- a/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ b/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -1,8 +1,8 @@
 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/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index 53857408..727c3f43 100644
--- a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -7,29 +7,30 @@ import RackConstructionContainer from "../../../../../containers/app/sidebars/to
 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/>;
-    }
+const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => {
+  let allowedObjects;
+  if (!inSimulation && roomType === "SERVER") {
+    allowedObjects = <RackConstructionContainer />;
+  }
 
-    return (
+  return (
+    <div>
+      <RoomNameContainer />
+      <RoomTypeContainer />
+      <BackToBuildingContainer />
+      {inSimulation ? (
         <div>
-            <RoomNameContainer/>
-            <RoomTypeContainer/>
-            <BackToBuildingContainer/>
-            {inSimulation ?
-                <div>
-                    <LoadBarContainer objectType="room" objectId={roomId}/>
-                    <LoadChartContainer objectType="room" objectId={roomId}/>
-                </div> :
-                <div>
-                    {allowedObjects}
-                    <DeleteRoomContainer/>
-                </div>
-            }
+          <LoadBarContainer objectType="room" objectId={roomId} />
+          <LoadChartContainer objectType="room" objectId={roomId} />
         </div>
-    );
+      ) : (
+        <div>
+          {allowedObjects}
+          <DeleteRoomContainer />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default RoomSidebarComponent;
diff --git a/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/src/components/app/sidebars/topology/room/RoomTypeComponent.js
index d42eefb6..46d91c2c 100644
--- a/src/components/app/sidebars/topology/room/RoomTypeComponent.js
+++ b/src/components/app/sidebars/topology/room/RoomTypeComponent.js
@@ -1,10 +1,8 @@
 import React from "react";
-import {ROOM_TYPE_TO_NAME_MAP} from "../../../../../util/room-types";
+import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types";
 
-const RoomTypeComponent = ({roomType}) => (
-    <p className="lead">
-        {ROOM_TYPE_TO_NAME_MAP[roomType]}
-    </p>
+const RoomTypeComponent = ({ roomType }) => (
+  <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p>
 );
 
 export default RoomTypeComponent;
-- 
cgit v1.2.3