Show experiment and trace data on left-hand sidebar

7 files changed, 132 insertions, 15 deletions

diff --git a/src/components/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
new file mode 100644
index 00000000..26383d6a
--- /dev/null
+++ b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => (
+    <div>
+        <h2>{experimentName}</h2>
+        <p><strong>Path:</strong> {pathName}</p>
+        <p><strong>Trace:</strong> {traceName}</p>
+        <p><strong>Scheduler:</strong> {schedulerName}</p>
+    </div>
+);
+
+export default ExperimentMetadataComponent;
diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.js b/src/components/sidebars/simulation/SimulationSidebarComponent.js
new file mode 100644
index 00000000..7da064c4
--- /dev/null
+++ b/src/components/sidebars/simulation/SimulationSidebarComponent.js
@@ -0,0 +1,21 @@
+import React from "react";
+import ExperimentMetadataContainer from "../../../containers/sidebars/simulation/ExperimentMetadataContainer";
+import TraceContainer from "../../../containers/sidebars/simulation/TraceContainer";
+import Sidebar from "../Sidebar";
+import "./SimulationSidebarComponent.css";
+
+const SimulationSidebarComponent = () => {
+    return (
+        <Sidebar isRight={false}>
+            <div className="simulation-sidebar-container flex-column">
+                <ExperimentMetadataContainer/>
+                <hr/>
+                <div className="trace-container">
+                    <TraceContainer/>
+                </div>
+            </div>
+        </Sidebar>
+    );
+};
+
+export default SimulationSidebarComponent;
diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.sass b/src/components/sidebars/simulation/SimulationSidebarComponent.sass
new file mode 100644
index 00000000..82af97fa
--- /dev/null
+++ b/src/components/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/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js
new file mode 100644
index 00000000..9a26e720
--- /dev/null
+++ b/src/components/sidebars/simulation/TaskComponent.js
@@ -0,0 +1,31 @@
+import React from "react";
+import {convertSecondsToFormattedTime} from "../../../util/date-time";
+
+const TaskComponent = ({task, flopsLeft}) => {
+    let stateInfo;
+
+    if (flopsLeft === task.totalFlopCount) {
+        stateInfo = <p><span className="fa fa-hourglass-half"/>Waiting</p>;
+    } else if (flopsLeft > 0) {
+        stateInfo = (
+            <p>
+                <span className="fa fa-refresh"/>
+                Running ({task.totalFlopCount - flopsLeft} / {task.totalFlopCount} FLOPS)
+            </p>
+        );
+    } else {
+        stateInfo = <p><span className="fa fa-check"/>Completed</p>;
+    }
+
+    return (
+        <li className="list-group-item flex-column align-items-start">
+            <div className="d-flex w-100 justify-content-between">
+                <h5 className="mb-1">{task.totalFlopCount} FLOPS</h5>
+                <small>Starts: {convertSecondsToFormattedTime(task.startTick)}</small>
+            </div>
+            {stateInfo}
+        </li>
+    );
+};
+
+export default TaskComponent;
diff --git a/src/components/sidebars/simulation/TraceComponent.js b/src/components/sidebars/simulation/TraceComponent.js
new file mode 100644
index 00000000..498fe5bf
--- /dev/null
+++ b/src/components/sidebars/simulation/TraceComponent.js
@@ -0,0 +1,17 @@
+import React from "react";
+import TaskContainer from "../../../containers/sidebars/simulation/TaskContainer";
+
+const TraceComponent = ({jobs}) => (
+    <div>
+        <h3>Trace</h3>
+        {jobs.map(job => (
+            <ul className="list-group" key={job.id}>
+                {job.taskIds.map(taskId => (
+                    <TaskContainer taskId={taskId} key={taskId}/>
+                ))}
+            </ul>
+        ))}
+    </div>
+);
+
+export default TraceComponent;
diff --git a/src/components/timeline/Timeline.js b/src/components/timeline/Timeline.js
deleted file mode 100644
index a2a858eb..00000000
--- a/src/components/timeline/Timeline.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer";
-import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer";
-import "./Timeline.css";
-
-const Timeline = ({currentTick, lastSimulatedTick}) => (
-    <div className="timeline-bar">
-        <div className="timeline-container">
-            <TimelineLabelsContainer/>
-            <TimelineControlsContainer/>
-        </div>
-    </div>
-);
-
-export default Timeline;
diff --git a/src/components/timeline/TimelineComponent.js b/src/components/timeline/TimelineComponent.js
new file mode 100644
index 00000000..b400a378
--- /dev/null
+++ b/src/components/timeline/TimelineComponent.js
@@ -0,0 +1,43 @@
+import React from "react";
+import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer";
+import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer";
+import "./Timeline.css";
+
+class TimelineComponent extends React.Component {
+    componentDidMount() {
+        this.interval = setInterval(() => {
+            if (!this.props.isPlaying) {
+                return;
+            }
+
+            if (this.props.currentTick < this.props.lastSimulatedTick) {
+                for (let i in this.props.sections.reverse()) {
+                    if (this.props.currentTick + 1 >= this.props.sections[i].startTick) {
+                        if (this.props.currentDatacenterId !== this.props.sections[i].datacenterId) {
+                            this.props.setCurrentDatacenter(this.props.sections[i].datacenterId);
+                        }
+                        break;
+                    }
+                }
+                this.props.incrementTick();
+            }
+        }, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    render() {
+        return (
+            <div className="timeline-bar">
+                <div className="timeline-container">
+                    <TimelineLabelsContainer/>
+                    <TimelineControlsContainer/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default TimelineComponent;