Implement experiment list and add

3 files changed, 45 insertions, 18 deletions

diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js
index 001b0e32..473a7651 100644
--- a/src/components/experiments/ExperimentListComponent.js
+++ b/src/components/experiments/ExperimentListComponent.js
@@ -2,23 +2,33 @@ import PropTypes from "prop-types";
 import React from "react";
 import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
 
-const ExperimentListComponent = ({experimentIds}) => (
-    <table className="table">
-        <thead>
-        <tr>
-            <th>Name</th>
-            <th>Path</th>
-            <th>Trace</th>
-            <th>Scheduler</th>
-        </tr>
-        </thead>
-        <tbody>
-        {experimentIds.map(experimentId => (
-            <ExperimentRowContainer experimentId={experimentId}/>
-        ))}
-        </tbody>
-    </table>
-);
+const ExperimentListComponent = ({experimentIds}) => {
+    return (
+        <div className="vertically-expanding-container">
+            {experimentIds.length === 0 ?
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2"/>
+                    <strong>No experiments here yet...</strong> Add some with the button below!
+                </div> :
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Path</th>
+                        <th>Trace</th>
+                        <th>Scheduler</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {experimentIds.map(experimentId => (
+                        <ExperimentRowContainer experimentId={experimentId} key={experimentId}/>
+                    ))}
+                    </tbody>
+                </table>
+            }
+        </div>
+    );
+};
 
 ExperimentListComponent.propTypes = {
     experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
diff --git a/src/components/experiments/ExperimentRowComponent.js b/src/components/experiments/ExperimentRowComponent.js
index 79ce3eea..fbb0aac7 100644
--- a/src/components/experiments/ExperimentRowComponent.js
+++ b/src/components/experiments/ExperimentRowComponent.js
@@ -4,7 +4,7 @@ import Shapes from "../../shapes/index";
 const ExperimentRowComponent = ({experiment}) => (
     <tr>
         <td>{experiment.name}</td>
-        <td>{experiment.path.name}</td>
+        <td>{experiment.path.name ? experiment.path.name : "Path " + experiment.path.id}</td>
         <td>{experiment.trace.name}</td>
         <td>{experiment.scheduler.name}</td>
     </tr>
diff --git a/src/components/experiments/NewExperimentButtonComponent.js b/src/components/experiments/NewExperimentButtonComponent.js
new file mode 100644
index 00000000..559a7218
--- /dev/null
+++ b/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;