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.

8 files changed, 272 insertions, 0 deletions

diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
new file mode 100644
index 00000000..7f56aca0
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -0,0 +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>
+);
+
+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
new file mode 100644
index 00000000..d8774bf9
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteMachineComponent = ({ onClick }) => (
+  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+    <span className="fa fa-trash mr-2" />
+    Delete this machine
+  </div>
+);
+
+export default DeleteMachineComponent;
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
new file mode 100644
index 00000000..0ad8b79c
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const MachineNameComponent = ({ position }) => (
+  <h2>Machine at slot {position}</h2>
+);
+
+export default MachineNameComponent;
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
new file mode 100644
index 00000000..5ccaf25c
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -0,0 +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";
+
+const MachineSidebarComponent = ({ inSimulation, machineId }) => {
+  return (
+    <div>
+      <MachineNameContainer />
+      <BackToRackContainer />
+      {inSimulation ? (
+        <div>
+          <LoadBarContainer objectType="machine" objectId={machineId} />
+          <LoadChartContainer objectType="machine" objectId={machineId} />
+        </div>
+      ) : (
+        <DeleteMachineContainer />
+      )}
+      <UnitTabsContainer />
+    </div>
+  );
+};
+
+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
new file mode 100644
index 00000000..0c903228
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+class UnitAddComponent extends React.Component {
+  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>
+    );
+  }
+}
+
+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
new file mode 100644
index 00000000..7c27043d
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -0,0 +1,78 @@
+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>";
+    }
+
+    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>
+          <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"
+          />
+          {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/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
new file mode 100644
index 00000000..38df806b
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -0,0 +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>
+);
+
+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
new file mode 100644
index 00000000..0683c796
--- /dev/null
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -0,0 +1,65 @@
+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>
+  </div>
+);
+
+export default UnitTabsComponent;