Prepare frontend repository for monorepo

This change prepares the frontend Git repository for the monorepo
residing at https://github.com/atlarge-research.com/opendc. To
accomodate for this, we move all files into a frontend subdirectory.

9 files changed, 198 insertions, 0 deletions

diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
new file mode 100644
index 00000000..6bcf4088
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -0,0 +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>
+);
+
+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
new file mode 100644
index 00000000..d8aa7634
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteRackComponent = ({ onClick }) => (
+  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+    <span className="fa fa-trash mr-2" />
+    Delete this rack
+  </div>
+);
+
+export default DeleteRackComponent;
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
new file mode 100644
index 00000000..d86f9fee
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -0,0 +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>
+);
+
+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
new file mode 100644
index 00000000..2521f4a2
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -0,0 +1,78 @@
+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>
+);
+
+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>
+  );
+};
+
+MachineComponent.propTypes = {
+  machine: Shapes.Machine
+};
+
+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
new file mode 100644
index 00000000..d5521557
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -0,0 +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";
+
+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/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+  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
new file mode 100644
index 00000000..5e095823
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -0,0 +1,8 @@
+import React from "react";
+import NameComponent from "../NameComponent";
+
+const RackNameComponent = ({ rackName, onEdit }) => (
+  <NameComponent name={rackName} onEdit={onEdit} />
+);
+
+export default RackNameComponent;
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
new file mode 100644
index 00000000..f832b9b9
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -0,0 +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";
+
+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/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..822804bc
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,11 @@
+.rack-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.rack-sidebar-header-container
+  flex: 0
+
+.machine-list-container
+  flex: 1
+  overflow-y: scroll