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.

6 files changed, 171 insertions, 0 deletions

diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
new file mode 100644
index 00000000..bc563dab
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -0,0 +1,23 @@
+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>
+);
+
+export default ExperimentMetadataComponent;
diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
new file mode 100644
index 00000000..3e4cf810
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -0,0 +1,40 @@
+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%"
+      />
+      <span
+        className="btn btn-secondary"
+        style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
+        title="75-100%"
+      />
+    </div>
+  </div>
+);
+
+export default LoadMetricComponent;
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
new file mode 100644
index 00000000..08dbb29a
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -0,0 +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";
+
+const SimulationSidebarComponent = () => {
+  return (
+    <Sidebar isRight={false}>
+      <div className="simulation-sidebar-container flex-column">
+        <ExperimentMetadataContainer />
+        <LoadMetricContainer />
+        <div className="trace-container">
+          <TraceContainer />
+        </div>
+      </div>
+    </Sidebar>
+  );
+};
+
+export default SimulationSidebarComponent;
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
new file mode 100644
index 00000000..82af97fa
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
@@ -0,0 +1,8 @@
+.simulation-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.trace-container
+  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
new file mode 100644
index 00000000..bd917cc9
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
@@ -0,0 +1,58 @@
+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;
+
+  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" }}>
+        <span
+          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>
+  );
+};
+
+export default TaskComponent;
diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
new file mode 100644
index 00000000..2b6559b4
--- /dev/null
+++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
@@ -0,0 +1,20 @@
+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>
+);
+
+export default TraceComponent;