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.

3 files changed, 116 insertions, 0 deletions

diff --git a/frontend/src/components/experiments/ExperimentListComponent.js b/frontend/src/components/experiments/ExperimentListComponent.js
new file mode 100644
index 00000000..2f7106e5
--- /dev/null
+++ b/frontend/src/components/experiments/ExperimentListComponent.js
@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+import React from "react";
+import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
+
+const ExperimentListComponent = ({ experimentIds, loading }) => {
+  let alert;
+
+  if (loading) {
+    alert = (
+      <div className="alert alert-success">
+        <span className="fa fa-refresh fa-spin mr-2" />
+        <strong>Loading Experiments...</strong>
+      </div>
+    );
+  } else if (experimentIds.length === 0 && !loading) {
+    alert = (
+      <div className="alert alert-info">
+        <span className="fa fa-question-circle mr-2" />
+        <strong>No experiments here yet...</strong> Add some with the button
+        below!
+      </div>
+    );
+  }
+
+  return (
+    <div className="vertically-expanding-container">
+      {alert ? (
+        alert
+      ) : (
+        <table className="table table-striped">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Path</th>
+              <th>Trace</th>
+              <th>Scheduler</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {experimentIds.map(experimentId => (
+              <ExperimentRowContainer
+                experimentId={experimentId}
+                key={experimentId}
+              />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+ExperimentListComponent.propTypes = {
+  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  loading: PropTypes.bool
+};
+
+export default ExperimentListComponent;
diff --git a/frontend/src/components/experiments/ExperimentRowComponent.js b/frontend/src/components/experiments/ExperimentRowComponent.js
new file mode 100644
index 00000000..e71c6a00
--- /dev/null
+++ b/frontend/src/components/experiments/ExperimentRowComponent.js
@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Link } from "react-router-dom";
+import Shapes from "../../shapes/index";
+
+const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => (
+  <tr>
+    <td className="pt-3">{experiment.name}</td>
+    <td className="pt-3">
+      {experiment.path.name
+        ? experiment.path.name
+        : "Path " + experiment.path.id}
+    </td>
+    <td className="pt-3">{experiment.trace.name}</td>
+    <td className="pt-3">{experiment.scheduler.name}</td>
+    <td className="text-right">
+      <Link
+        to={"/simulations/" + simulationId + "/experiments/" + experiment.id}
+        className="btn btn-outline-primary btn-sm mr-2"
+        title="Open this experiment"
+      >
+        <span className="fa fa-play" />
+      </Link>
+      <div
+        className="btn btn-outline-danger btn-sm"
+        title="Delete this experiment"
+        onClick={() => onDelete(experiment.id)}
+      >
+        <span className="fa fa-trash" />
+      </div>
+    </td>
+  </tr>
+);
+
+ExperimentRowComponent.propTypes = {
+  experiment: Shapes.Experiment.isRequired,
+  simulationId: PropTypes.number.isRequired
+};
+
+export default ExperimentRowComponent;
diff --git a/frontend/src/components/experiments/NewExperimentButtonComponent.js b/frontend/src/components/experiments/NewExperimentButtonComponent.js
new file mode 100644
index 00000000..651172e3
--- /dev/null
+++ b/frontend/src/components/experiments/NewExperimentButtonComponent.js
@@ -0,0 +1,17 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+const NewExperimentButtonComponent = ({ onClick }) => (
+  <div className="bottom-btn-container">
+    <div className="btn btn-primary float-right" onClick={onClick}>
+      <span className="fa fa-plus mr-2" />
+      New Experiment
+    </div>
+  </div>
+);
+
+NewExperimentButtonComponent.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+
+export default NewExperimentButtonComponent;