First attempt at experiment list UI

2 files changed, 27 insertions, 9 deletions

diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js
index c3e3db8d..001b0e32 100644
--- a/src/components/experiments/ExperimentListComponent.js
+++ b/src/components/experiments/ExperimentListComponent.js
@@ -1,6 +1,8 @@
+import PropTypes from "prop-types";
 import React from "react";
+import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
 
-const ExperimentListContainer = ({experiments}) => (
+const ExperimentListComponent = ({experimentIds}) => (
     <table className="table">
         <thead>
         <tr>
@@ -11,16 +13,15 @@ const ExperimentListContainer = ({experiments}) => (
         </tr>
         </thead>
         <tbody>
-        {experiments.map(experiment => (
-            <tr>
-                <td>{experiment.name}</td>
-                <td>{experiment.path.name}</td>
-                <td>{experiment.trace.name}</td>
-                <td>{experiment.scheduler.name}</td>
-            </tr>
+        {experimentIds.map(experimentId => (
+            <ExperimentRowContainer experimentId={experimentId}/>
         ))}
         </tbody>
     </table>
 );
 
-export default ExperimentListContainer;
+ExperimentListComponent.propTypes = {
+    experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+};
+
+export default ExperimentListComponent;
diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js
new file mode 100644
index 00000000..79ce3eea
--- /dev/null
+++ b/src/components/experiments/ExperimentRowComponent.js
@@ -0,0 +1,17 @@
+import React from "react";
+import Shapes from "../../shapes/index";
+
+const ExperimentRowComponent = ({experiment}) => (
+    <tr>
+        <td>{experiment.name}</td>
+        <td>{experiment.path.name}</td>
+        <td>{experiment.trace.name}</td>
+        <td>{experiment.scheduler.name}</td>
+    </tr>
+);
+
+ExperimentRowComponent.propTypes = {
+    experiment: Shapes.Experiment
+};
+
+export default ExperimentRowComponent;