Implement experiment list and add

1 files changed, 27 insertions, 17 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,