From a1d95b3685cffb6a9344d0d1e5505dd391193f16 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 15 Sep 2017 12:53:26 +0200
Subject: Implement experiment list and add

---
 src/api/routes/jobs.js                             |  6 +-
 src/api/routes/tasks.js                            |  5 --
 .../experiments/ExperimentListComponent.js         | 44 ++++++++-----
 .../experiments/ExperimentRowComponent.js          |  2 +-
 .../experiments/NewExperimentButtonComponent.js    | 17 +++++
 src/components/modals/TextInputModal.js            |  2 +-
 .../NewExperimentModalComponent.js                 | 18 +++---
 src/components/simulations/FilterButton.js         |  7 +--
 src/components/simulations/FilterButton.sass       | 18 ------
 src/components/simulations/FilterPanel.js          | 10 ++-
 src/components/simulations/FilterPanel.sass        | 23 ++-----
 src/components/simulations/NewSimulationButton.js  | 16 -----
 .../simulations/NewSimulationButton.sass           | 31 ----------
 .../simulations/NewSimulationButtonComponent.js    | 17 +++++
 src/components/simulations/NoSimulationsAlert.js   | 11 ----
 src/components/simulations/NoSimulationsAlert.sass | 10 ---
 .../simulations/SimulationActionButtons.js         |  4 +-
 src/components/simulations/SimulationAuth.js       | 24 --------
 src/components/simulations/SimulationAuthList.js   | 40 +++++++-----
 src/components/simulations/SimulationAuthList.sass | 72 ++--------------------
 src/components/simulations/SimulationAuthRow.js    | 24 ++++++++
 .../experiments/ExperimentListContainer.js         |  6 +-
 .../experiments/NewExperimentButtonContainer.js    | 16 +++++
 .../simulations/NewSimulationButtonContainer.js    | 16 +++++
 .../simulations/VisibleSimulationAuthList.js       | 10 +--
 src/index.sass                                     | 10 +++
 src/pages/Experiments.js                           |  2 +
 src/pages/Simulations.js                           |  4 +-
 src/reducers/objects.js                            |  5 ++
 src/sagas/experiments.js                           | 32 ++++------
 src/sagas/index.js                                 |  6 +-
 src/sagas/objects.js                               | 18 +++---
 src/sagas/profile.js                               |  2 +-
 src/sagas/simulations.js                           | 15 ++++-
 src/sagas/topology.js                              | 32 +++++-----
 src/sagas/users.js                                 |  4 +-
 src/shapes/index.js                                |  2 +-
 37 files changed, 256 insertions(+), 325 deletions(-)
 delete mode 100644 src/api/routes/tasks.js
 create mode 100644 src/components/experiments/NewExperimentButtonComponent.js
 delete mode 100644 src/components/simulations/FilterButton.sass
 delete mode 100644 src/components/simulations/NewSimulationButton.js
 delete mode 100644 src/components/simulations/NewSimulationButton.sass
 create mode 100644 src/components/simulations/NewSimulationButtonComponent.js
 delete mode 100644 src/components/simulations/NoSimulationsAlert.js
 delete mode 100644 src/components/simulations/NoSimulationsAlert.sass
 delete mode 100644 src/components/simulations/SimulationAuth.js
 create mode 100644 src/components/simulations/SimulationAuthRow.js
 create mode 100644 src/containers/experiments/NewExperimentButtonContainer.js
 create mode 100644 src/containers/simulations/NewSimulationButtonContainer.js

(limited to 'src')

diff --git a/src/api/routes/jobs.js b/src/api/routes/jobs.js
index 90947a51..e96c12ba 100644
--- a/src/api/routes/jobs.js
+++ b/src/api/routes/jobs.js
@@ -1,8 +1,4 @@
-import {getAll, getById} from "./util";
-
-export function getAllJobs() {
-    return getAll("/jobs");
-}
+import {getById} from "./util";
 
 export function getTasksOfJob(jobId) {
     return getById("/jobs/{jobId}/tasks", {jobId});
diff --git a/src/api/routes/tasks.js b/src/api/routes/tasks.js
deleted file mode 100644
index 69736af8..00000000
--- a/src/api/routes/tasks.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import {getAll} from "./util";
-
-export function getAllTasks() {
-    return getAll("/tasks");
-}
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;
diff --git a/src/components/modals/TextInputModal.js b/src/components/modals/TextInputModal.js
index e4a55372..132df9fe 100644
--- a/src/components/modals/TextInputModal.js
+++ b/src/components/modals/TextInputModal.js
@@ -38,7 +38,7 @@ class TextInputModal extends React.Component {
                     this.onSubmit();
                 }}>
                     <div className="form-group">
-                        <label className="form-control-label">{this.props.label}:</label>
+                        <label className="form-control-label">{this.props.label}</label>
                         <input type="text" className="form-control"
                                ref={textInput => this.textInput = textInput}/>
                     </div>
diff --git a/src/components/modals/custom-components/NewExperimentModalComponent.js b/src/components/modals/custom-components/NewExperimentModalComponent.js
index 9efccc8a..d56d2316 100644
--- a/src/components/modals/custom-components/NewExperimentModalComponent.js
+++ b/src/components/modals/custom-components/NewExperimentModalComponent.js
@@ -20,8 +20,12 @@ class NewExperimentModalComponent extends React.Component {
     }
 
     onSubmit() {
-        this.props.callback(this.textInput.value, this.pathSelect.value, this.traceSelect.value,
-            this.schedulerSelect.value);
+        this.props.callback(
+            this.textInput.value,
+            parseInt(this.pathSelect.value, 10),
+            parseInt(this.traceSelect.value, 10),
+            this.schedulerSelect.value
+        );
         this.reset();
     }
 
@@ -41,23 +45,23 @@ class NewExperimentModalComponent extends React.Component {
                     this.onSubmit();
                 }}>
                     <div className="form-group">
-                        <label className="form-control-label">Name:</label>
+                        <label className="form-control-label">Name</label>
                         <input type="text" className="form-control"
                                ref={textInput => this.textInput = textInput}/>
                     </div>
                     <div className="form-group">
-                        <label className="form-control-label">Path:</label>
+                        <label className="form-control-label">Path</label>
                         <select className="form-control"
                                 ref={pathSelect => this.pathSelect = pathSelect}>
                             {this.props.paths.map(path => (
                                 <option value={path.id} key={path.id}>
-                                    {path.name}
+                                    {path.name ? path.name : "Path " + path.id}
                                 </option>
                             ))}
                         </select>
                     </div>
                     <div className="form-group">
-                        <label className="form-control-label">Trace:</label>
+                        <label className="form-control-label">Trace</label>
                         <select className="form-control"
                                 ref={traceSelect => this.traceSelect = traceSelect}>
                             {this.props.traces.map(trace => (
@@ -68,7 +72,7 @@ class NewExperimentModalComponent extends React.Component {
                         </select>
                     </div>
                     <div className="form-group">
-                        <label className="form-control-label">Scheduler:</label>
+                        <label className="form-control-label">Scheduler</label>
                         <select className="form-control"
                                 ref={schedulerSelect => this.schedulerSelect = schedulerSelect}>
                             {this.props.schedulers.map(scheduler => (
diff --git a/src/components/simulations/FilterButton.js b/src/components/simulations/FilterButton.js
index 2105d281..f95c35fa 100644
--- a/src/components/simulations/FilterButton.js
+++ b/src/components/simulations/FilterButton.js
@@ -1,17 +1,16 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import "./FilterButton.css";
 
 const FilterButton = ({active, children, onClick}) => (
-    <div className={classNames("simulation-filter-button", {"active": active})}
-         onClick={() => {
+    <button className={classNames("btn btn-secondary", {"active": active})}
+            onClick={() => {
              if (!active) {
                  onClick();
              }
          }}>
         {children}
-    </div>
+    </button>
 );
 
 FilterButton.propTypes = {
diff --git a/src/components/simulations/FilterButton.sass b/src/components/simulations/FilterButton.sass
deleted file mode 100644
index 698bc9a4..00000000
--- a/src/components/simulations/FilterButton.sass
+++ /dev/null
@@ -1,18 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.simulation-filter-button
-  display: inline-block
-  width: 33.3%
-  padding: 10px $global-padding
-
-  font-size: 12pt
-
-  +clickable
-  +transition(background, $transition-length)
-
-.simulation-filter-button:hover
-  background: #0c60bf
-
-.simulation-filter-button:active, .simulation-filter-button.active
-  background: #073d7d
diff --git a/src/components/simulations/FilterPanel.js b/src/components/simulations/FilterPanel.js
index 811da005..504e24e4 100644
--- a/src/components/simulations/FilterPanel.js
+++ b/src/components/simulations/FilterPanel.js
@@ -3,12 +3,10 @@ import FilterLink from "../../containers/simulations/FilterLink";
 import "./FilterPanel.css";
 
 const FilterPanel = () => (
-    <div className="filter-menu">
-        <div className="simulation-filters">
-            <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
-            <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
-            <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-        </div>
+    <div className="btn-group filter-panel mb-2">
+        <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
+        <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
+        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
     </div>
 );
 
diff --git a/src/components/simulations/FilterPanel.sass b/src/components/simulations/FilterPanel.sass
index 70401dcb..e10e4746 100644
--- a/src/components/simulations/FilterPanel.sass
+++ b/src/components/simulations/FilterPanel.sass
@@ -1,20 +1,5 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
+.filter-panel
+  display: flex
 
-.filter-menu
-  display: block
-
-  background: #0761b1
-  color: #eee
-
-  text-align: center
-
-  +border-radius(25px)
-  overflow: hidden
-
-  margin-bottom: 20px
-
-  .simulation-filters
-    display: block
-    overflow: hidden
-    margin: 0 -1px
+  button
+    flex: 1 !important
diff --git a/src/components/simulations/NewSimulationButton.js b/src/components/simulations/NewSimulationButton.js
deleted file mode 100644
index 468f7678..00000000
--- a/src/components/simulations/NewSimulationButton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import './NewSimulationButton.css';
-
-const NewSimulationButton = ({onClick}) => (
-    <div className="new-simulation-btn" onClick={onClick}>
-        <span className="fa fa-plus"/>
-        New Simulation
-    </div>
-);
-
-NewSimulationButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
-};
-
-export default NewSimulationButton;
diff --git a/src/components/simulations/NewSimulationButton.sass b/src/components/simulations/NewSimulationButton.sass
deleted file mode 100644
index 9bf82c49..00000000
--- a/src/components/simulations/NewSimulationButton.sass
+++ /dev/null
@@ -1,31 +0,0 @@
-@import ../../style-globals/_mixins.sass
-@import ../../style-globals/_variables.sass
-
-.new-simulation-btn
-  $button-height: 35px
-
-  display: inline-block
-  position: absolute
-  bottom: $navbar-height + 40px
-  right: 40px
-  padding: 0 10px
-  height: $button-height
-  line-height: $button-height
-  font-size: 14pt
-
-  background: #679436
-  color: #eee
-  border: 1px solid #507830
-
-  +border-radius($standard-border-radius)
-  +clickable
-  +transition(all, $transition-length)
-
-  span
-    margin-right: 10px
-
-.new-simulation-btn:hover
-  background: #73ac45
-
-.new-simulation-btn:active
-  background: #5c8835
diff --git a/src/components/simulations/NewSimulationButtonComponent.js b/src/components/simulations/NewSimulationButtonComponent.js
new file mode 100644
index 00000000..74036c1b
--- /dev/null
+++ b/src/components/simulations/NewSimulationButtonComponent.js
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const NewSimulationButtonComponent = ({onClick}) => (
+    <div className="bottom-btn-container">
+        <div className="btn btn-primary float-right" onClick={onClick}>
+            <span className="fa fa-plus mr-2"/>
+            New Simulation
+        </div>
+    </div>
+);
+
+NewSimulationButtonComponent.propTypes = {
+    onClick: PropTypes.func.isRequired,
+};
+
+export default NewSimulationButtonComponent;
diff --git a/src/components/simulations/NoSimulationsAlert.js b/src/components/simulations/NoSimulationsAlert.js
deleted file mode 100644
index d688ae56..00000000
--- a/src/components/simulations/NoSimulationsAlert.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import "./NoSimulationsAlert.css";
-
-const NoSimulationsAlert = () => (
-    <div className="no-simulations-alert alert alert-info">
-        <span className="info-icon fa fa-2x fa-question-circle"/>
-        <strong>No simulations here yet...</strong> Add some with the 'New Simulation' button!
-    </div>
-);
-
-export default NoSimulationsAlert;
diff --git a/src/components/simulations/NoSimulationsAlert.sass b/src/components/simulations/NoSimulationsAlert.sass
deleted file mode 100644
index 10e89e51..00000000
--- a/src/components/simulations/NoSimulationsAlert.sass
+++ /dev/null
@@ -1,10 +0,0 @@
-.no-simulations-alert
-  position: relative
-  padding-left: 50px
-
-  .info-icon
-    position: absolute
-    top: 11px
-    left: 15px
-    bottom: 10px
-    font-size: 20pt
diff --git a/src/components/simulations/SimulationActionButtons.js b/src/components/simulations/SimulationActionButtons.js
index 29872fcb..1cb80c94 100644
--- a/src/components/simulations/SimulationActionButtons.js
+++ b/src/components/simulations/SimulationActionButtons.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {Link} from "react-router-dom";
 
 const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
-    <div className="simulation-icons">
+    <td className="simulation-icons">
         <Link to={"/simulations/" + simulationId} className="open" title="Open this simulation">
             <span className="fa fa-play"/>
         </Link>
@@ -14,7 +14,7 @@ const SimulationActionButtons = ({simulationId, onViewUsers, onDelete}) => (
         <div className="delete" title="Delete this simulation" onClick={() => onDelete(simulationId)}>
             <span className="fa fa-trash"/>
         </div>
-    </div>
+    </td>
 );
 
 SimulationActionButtons.propTypes = {
diff --git a/src/components/simulations/SimulationAuth.js b/src/components/simulations/SimulationAuth.js
deleted file mode 100644
index 9b887991..00000000
--- a/src/components/simulations/SimulationAuth.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import SimulationActions from "../../containers/simulations/SimulationActions";
-import Shapes from "../../shapes/index";
-import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
-import {parseAndFormatDateTime} from "../../util/date-time";
-
-const SimulationAuth = ({simulationAuth}) => (
-    <div className="simulation-row">
-        <div>{simulationAuth.simulation.name}</div>
-        <div>{parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}</div>
-        <div>
-            <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel])}/>
-            {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
-        </div>
-        <SimulationActions simulationId={simulationAuth.simulation.id}/>
-    </div>
-);
-
-SimulationAuth.propTypes = {
-    simulationAuth: Shapes.Authorization.isRequired,
-};
-
-export default SimulationAuth;
diff --git a/src/components/simulations/SimulationAuthList.js b/src/components/simulations/SimulationAuthList.js
index 7653f178..fd5173a8 100644
--- a/src/components/simulations/SimulationAuthList.js
+++ b/src/components/simulations/SimulationAuthList.js
@@ -1,27 +1,33 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Shapes from "../../shapes/index";
-import NoSimulationsAlert from "./NoSimulationsAlert";
-import SimulationAuth from "./SimulationAuth";
 import "./SimulationAuthList.css";
+import SimulationAuthRow from "./SimulationAuthRow";
 
 const SimulationAuthList = ({authorizations}) => {
-    if (authorizations.length === 0) {
-        return <NoSimulationsAlert/>;
-    }
-
     return (
-        <div className="simulation-list">
-            <div className="list-head">
-                <div>Simulation name</div>
-                <div>Last edited</div>
-                <div>Access rights</div>
-            </div>
-            <div className="list-body">
-                {authorizations.map(authorization => (
-                    <SimulationAuth simulationAuth={authorization} key={authorization.simulation.id}/>
-                ))}
-            </div>
+        <div className="vertically-expanding-container">
+            {authorizations.length === 0 ?
+                <div className="alert alert-info">
+                    <span className="info-icon fa fa-question-circle mr-2"/>
+                    <strong>No simulations here yet...</strong> Add some with the 'New Simulation' button!
+                </div> :
+                <table className="table">
+                    <thead>
+                    <tr>
+                        <th>Simulation name</th>
+                        <th>Last edited</th>
+                        <th>Access rights</th>
+                        <th/>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {authorizations.map(authorization => (
+                        <SimulationAuthRow simulationAuth={authorization} key={authorization.simulation.id}/>
+                    ))}
+                    </tbody>
+                </table>
+            }
         </div>
     );
 };
diff --git a/src/components/simulations/SimulationAuthList.sass b/src/components/simulations/SimulationAuthList.sass
index cb1fe4cc..b09c7869 100644
--- a/src/components/simulations/SimulationAuthList.sass
+++ b/src/components/simulations/SimulationAuthList.sass
@@ -1,70 +1,15 @@
 @import ../../style-globals/_mixins.sass
 @import ../../style-globals/_variables.sass
 
-.simulation-list
-  display: block
-  font-size: 12pt
-  border: 0
-
-  .list-head, .list-body .simulation-row
-    display: block
-    position: relative
-
-  .list-head div, .list-body .simulation-row div
-    padding: 0 10px
-    display: inline-block
-
-  .list-head
-    font-weight: bold
-
-    // Address default margin between inline-blocks
-    div
-      margin-right: -4px
-
-.simulation-row
-  background: #f8f8f8
-  border: 1px solid #b6b6b6
-  height: 40px
-  line-height: 40px
-  clear: both
-
-.simulation-row:not(:first-of-type)
-  margin-top: -1px
-
-// Sizing of table columns
-.simulation-row, .simulation-list .list-head
-  div:first-of-type
-    width: 40%
-
-  div:nth-of-type(2)
-    width: 20%
-
-  div:nth-of-type(3)
-    width: 20%
-
-  div:last-of-type
-    width: 20%
-
-    span
-      margin-right: 10px
-
-.simulation-row > div:not(:first-of-type)
-  padding-left: 0 !important
-
-.simulation-list .list-head > div:not(:first-of-type)
-  padding-left: 5px !important
-
 .simulation-icons
   text-align: right
-  padding-right: 0 !important
 
-.simulation-row .simulation-icons div, .simulation-row .simulation-icons a
+.simulation-icons div, .simulation-icons a
   display: inline-block
-  position: relative
-  top: 4px
-  width: 30px
-  height: 30px
+  width: 35px
+  height: 35px
   margin-right: 5px
+  padding: 5px
   font-size: 12pt
   color: white
   +border-radius(100%)
@@ -73,17 +18,13 @@
 
   span
     position: relative
-    top: -4px
-    left: -1px
+    left: -6px
 
   background-color: $blue-dark
 
   &.open
     $icon-color: #0a00bf
 
-    span
-      left: 1px
-
     &:hover
       background: lighten($icon-color, 10%)
 
@@ -91,11 +32,10 @@
       background: darken($icon-color, 10%)
 
   &.users
-    font-size: 10pt
     $icon-color: #17bf55
 
     span
-      left: -2px
+      left: -3px
 
     &:hover
       background: $icon-color
diff --git a/src/components/simulations/SimulationAuthRow.js b/src/components/simulations/SimulationAuthRow.js
new file mode 100644
index 00000000..26e01570
--- /dev/null
+++ b/src/components/simulations/SimulationAuthRow.js
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import React from 'react';
+import SimulationActions from "../../containers/simulations/SimulationActions";
+import Shapes from "../../shapes/index";
+import {AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP} from "../../util/authorizations";
+import {parseAndFormatDateTime} from "../../util/date-time";
+
+const SimulationAuthRow = ({simulationAuth}) => (
+    <tr>
+        <td>{simulationAuth.simulation.name}</td>
+        <td>{parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}</td>
+        <td>
+            <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel], "mr-2")}/>
+            {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
+        </td>
+        <SimulationActions simulationId={simulationAuth.simulation.id}/>
+    </tr>
+);
+
+SimulationAuthRow.propTypes = {
+    simulationAuth: Shapes.Authorization.isRequired,
+};
+
+export default SimulationAuthRow;
diff --git a/src/containers/experiments/ExperimentListContainer.js b/src/containers/experiments/ExperimentListContainer.js
index 38e5a9f6..0c6818fa 100644
--- a/src/containers/experiments/ExperimentListContainer.js
+++ b/src/containers/experiments/ExperimentListContainer.js
@@ -2,7 +2,7 @@ import {connect} from "react-redux";
 import ExperimentListComponent from "../../components/experiments/ExperimentListComponent";
 
 const mapStateToProps = state => {
-    if (!state.currentSimulationId) {
+    if (state.currentSimulationId === -1 || !("experimentIds" in state.objects.simulation[state.currentSimulationId])) {
         return {
             experimentIds: [],
         };
@@ -14,10 +14,6 @@ const mapStateToProps = state => {
             experimentIds,
         };
     }
-
-    return {
-        experimentIds: [],
-    };
 };
 
 const ExperimentListContainer = connect(
diff --git a/src/containers/experiments/NewExperimentButtonContainer.js b/src/containers/experiments/NewExperimentButtonContainer.js
new file mode 100644
index 00000000..1abbb7b7
--- /dev/null
+++ b/src/containers/experiments/NewExperimentButtonContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {openNewExperimentModal} from "../../actions/modals/experiments";
+import NewExperimentButtonComponent from "../../components/experiments/NewExperimentButtonComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(openNewExperimentModal())
+    };
+};
+
+const NewExperimentButtonContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(NewExperimentButtonComponent);
+
+export default NewExperimentButtonContainer;
diff --git a/src/containers/simulations/NewSimulationButtonContainer.js b/src/containers/simulations/NewSimulationButtonContainer.js
new file mode 100644
index 00000000..722f8e44
--- /dev/null
+++ b/src/containers/simulations/NewSimulationButtonContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {openNewSimulationModal} from "../../actions/modals/simulations";
+import NewSimulationButtonComponent from "../../components/simulations/NewSimulationButtonComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(openNewSimulationModal())
+    };
+};
+
+const NewSimulationButtonContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(NewSimulationButtonComponent);
+
+export default NewSimulationButtonContainer;
diff --git a/src/containers/simulations/VisibleSimulationAuthList.js b/src/containers/simulations/VisibleSimulationAuthList.js
index 578ae303..324608c6 100644
--- a/src/containers/simulations/VisibleSimulationAuthList.js
+++ b/src/containers/simulations/VisibleSimulationAuthList.js
@@ -1,6 +1,5 @@
 import {connect} from "react-redux";
 import SimulationList from "../../components/simulations/SimulationAuthList";
-import {denormalize} from "../../store/denormalizer";
 
 const getVisibleSimulationAuths = (simulationAuths, filter) => {
     switch (filter) {
@@ -16,9 +15,12 @@ const getVisibleSimulationAuths = (simulationAuths, filter) => {
 };
 
 const mapStateToProps = state => {
-    const denormalizedAuthorizations = state.simulationList.authorizationsOfCurrentUser.map(authorizationIds =>
-        denormalize(state, "authorization", authorizationIds)
-    );
+    const denormalizedAuthorizations = state.simulationList.authorizationsOfCurrentUser.map(authorizationIds => {
+        const authorization = state.objects.authorization[authorizationIds];
+        authorization.user = state.objects.user[authorization.userId];
+        authorization.simulation = state.objects.simulation[authorization.simulationId];
+        return authorization;
+    });
 
     return {
         authorizations: getVisibleSimulationAuths(denormalizedAuthorizations, state.simulationList.authVisibilityFilter)
diff --git a/src/index.sass b/src/index.sass
index 54a426f9..09be977d 100644
--- a/src/index.sass
+++ b/src/index.sass
@@ -18,6 +18,16 @@ html, body, #root
 
 .text-page-container
   padding-top: 80px
+  display: flex
+  flex-flow: column
+
+.vertically-expanding-container
+  flex: 1 1 auto
+  overflow-y: auto
+
+.bottom-btn-container
+  flex: 0 1 auto
+  padding: 20px 0
 
 .btn, .list-group-item-action
   +clickable
diff --git a/src/pages/Experiments.js b/src/pages/Experiments.js
index d1d19d9f..71b9cfc9 100644
--- a/src/pages/Experiments.js
+++ b/src/pages/Experiments.js
@@ -5,6 +5,7 @@ import {fetchExperimentsOfSimulation} from "../actions/experiments";
 import {openSimulationSucceeded} from "../actions/simulations";
 import AppNavbar from "../components/navigation/AppNavbar";
 import ExperimentListContainer from "../containers/experiments/ExperimentListContainer";
+import NewExperimentButtonContainer from "../containers/experiments/NewExperimentButtonContainer";
 import NewExperimentModal from "../containers/modals/NewExperimentModal";
 
 class ExperimentsComponent extends React.Component {
@@ -23,6 +24,7 @@ class ExperimentsComponent extends React.Component {
                 <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
                 <div className="container text-page-container full-height">
                     <ExperimentListContainer/>
+                    <NewExperimentButtonContainer/>
                 </div>
                 <NewExperimentModal/>
             </div>
diff --git a/src/pages/Simulations.js b/src/pages/Simulations.js
index 33e04a9d..d06fe43d 100644
--- a/src/pages/Simulations.js
+++ b/src/pages/Simulations.js
@@ -4,8 +4,8 @@ import {openNewSimulationModal} from "../actions/modals/simulations";
 import {fetchAuthorizationsOfCurrentUser} from "../actions/users";
 import AppNavbar from "../components/navigation/AppNavbar";
 import SimulationFilterPanel from "../components/simulations/FilterPanel";
-import NewSimulationButton from "../components/simulations/NewSimulationButton";
 import NewSimulationModal from "../containers/modals/NewSimulationModal";
+import NewSimulationButtonContainer from "../containers/simulations/NewSimulationButtonContainer";
 import VisibleSimulationList from "../containers/simulations/VisibleSimulationAuthList";
 
 class SimulationsContainer extends React.Component {
@@ -20,7 +20,7 @@ class SimulationsContainer extends React.Component {
                 <div className="container text-page-container full-height">
                     <SimulationFilterPanel/>
                     <VisibleSimulationList/>
-                    <NewSimulationButton onClick={() => {this.props.openNewSimulationModal()}}/>
+                    <NewSimulationButtonContainer/>
                 </div>
                 <NewSimulationModal/>
             </div>
diff --git a/src/reducers/objects.js b/src/reducers/objects.js
index b75e9ae6..df148dee 100644
--- a/src/reducers/objects.js
+++ b/src/reducers/objects.js
@@ -24,6 +24,11 @@ export const objects = combineReducers({
     datacenter: object("datacenter"),
     section: object("section"),
     path: object("path"),
+    task: object("task"),
+    job: object("job"),
+    trace: object("trace"),
+    scheduler: object("scheduler"),
+    experiment: object("experiment"),
 });
 
 function object(type) {
diff --git a/src/sagas/experiments.js b/src/sagas/experiments.js
index 0ac919f4..2c5395e8 100644
--- a/src/sagas/experiments.js
+++ b/src/sagas/experiments.js
@@ -2,13 +2,7 @@ import {call, put, select} from "redux-saga/effects";
 import {addPropToStoreObject, addToStore} from "../actions/objects";
 import {deleteExperiment} from "../api/routes/experiments";
 import {addExperiment, getExperimentsOfSimulation} from "../api/routes/simulations";
-import {
-    fetchAndStoreAllJobs,
-    fetchAndStoreAllSchedulers,
-    fetchAndStoreAllTasks,
-    fetchAndStoreAllTraces,
-    fetchAndStorePathsOfSimulation
-} from "./objects";
+import {fetchAndStoreAllSchedulers, fetchAndStoreAllTraces, fetchAndStorePathsOfSimulation} from "./objects";
 
 export function* onFetchExperimentsOfSimulation() {
     try {
@@ -22,21 +16,18 @@ export function* onFetchExperimentsOfSimulation() {
         yield put(addPropToStoreObject("simulation", currentSimulationId,
             {experimentIds: experiments.map(experiment => experiment.id)}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
 function* fetchExperimentSpecifications() {
     try {
         const currentSimulationId = yield select(state => state.currentSimulationId);
-
         yield fetchAndStorePathsOfSimulation(currentSimulationId);
-        yield fetchAndStoreAllTasks();
-        yield fetchAndStoreAllJobs();
         yield fetchAndStoreAllTraces();
         yield fetchAndStoreAllSchedulers();
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -44,17 +35,20 @@ export function* onAddExperiment(action) {
     try {
         const currentSimulationId = yield select(state => state.currentSimulationId);
 
-        const experiment = yield call(addExperiment, currentSimulationId, Object.assign({}, action.experiment, {
-            id: -1,
-            simulationId: currentSimulationId
-        }));
+        const experiment = yield call(addExperiment,
+            currentSimulationId,
+            Object.assign({}, action.experiment, {
+                id: -1,
+                simulationId: currentSimulationId
+            })
+        );
         yield put(addToStore("experiment", experiment));
 
-        const experimentIds = yield select(state => state.objects.simulation[currentSimulationId]);
+        const experimentIds = (yield select(state => state.objects.simulation[currentSimulationId])).experimentIds;
         yield put(addPropToStoreObject("simulation", currentSimulationId,
             {experimentIds: experimentIds.concat([experiment.id])}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -68,6 +62,6 @@ export function* onDeleteExperiment(action) {
         yield put(addPropToStoreObject("simulation", currentSimulationId,
             {experimentIds: experimentIds.filter(id => id !== action.id)}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
diff --git a/src/sagas/index.js b/src/sagas/index.js
index e86ef8a1..30ca2f89 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -1,7 +1,7 @@
 import {takeEvery} from "redux-saga/effects";
 import {LOG_IN} from "../actions/auth";
 import {ADD_EXPERIMENT, DELETE_EXPERIMENT, FETCH_EXPERIMENTS_OF_SIMULATION} from "../actions/experiments";
-import {ADD_SIMULATION, DELETE_SIMULATION} from "../actions/simulations";
+import {ADD_SIMULATION, DELETE_SIMULATION, OPEN_SIMULATION_SUCCEEDED} from "../actions/simulations";
 import {
     ADD_TILE,
     CANCEL_NEW_ROOM_CONSTRUCTION,
@@ -15,7 +15,7 @@ import {ADD_RACK_TO_TILE, DELETE_ROOM, EDIT_ROOM_NAME} from "../actions/topology
 import {DELETE_CURRENT_USER, FETCH_AUTHORIZATIONS_OF_CURRENT_USER} from "../actions/users";
 import {onAddExperiment, onDeleteExperiment, onFetchExperimentsOfSimulation} from "./experiments";
 import {onDeleteCurrentUser} from "./profile";
-import {onSimulationAdd, onSimulationDelete} from "./simulations";
+import {onOpenSimulationSucceeded, onSimulationAdd, onSimulationDelete} from "./simulations";
 import {
     onAddMachine,
     onAddRackToTile,
@@ -43,6 +43,8 @@ export default function* rootSaga() {
 
     yield takeEvery(DELETE_CURRENT_USER, onDeleteCurrentUser);
 
+    yield takeEvery(OPEN_SIMULATION_SUCCEEDED, onOpenSimulationSucceeded);
+
     yield takeEvery(FETCH_LATEST_DATACENTER, onFetchLatestDatacenter);
     yield takeEvery(START_NEW_ROOM_CONSTRUCTION, onStartNewRoomConstruction);
     yield takeEvery(CANCEL_NEW_ROOM_CONSTRUCTION, onCancelNewRoomConstruction);
diff --git a/src/sagas/objects.js b/src/sagas/objects.js
index 375781be..0a0154cc 100644
--- a/src/sagas/objects.js
+++ b/src/sagas/objects.js
@@ -1,7 +1,6 @@
 import {call, put, select} from "redux-saga/effects";
 import {addToStore} from "../actions/objects";
 import {getDatacenter, getRoomsOfDatacenter} from "../api/routes/datacenters";
-import {getAllJobs} from "../api/routes/jobs";
 import {getPath, getSectionsOfPath} from "../api/routes/paths";
 import {getTilesOfRoom} from "../api/routes/rooms";
 import {getAllSchedulers} from "../api/routes/schedulers";
@@ -20,7 +19,6 @@ import {
     getPSU,
     getStorage
 } from "../api/routes/specifications";
-import {getAllTasks} from "../api/routes/tasks";
 import {getMachinesOfRackByTile, getRackByTile} from "../api/routes/tiles";
 import {getAllTraces} from "../api/routes/traces";
 import {getUser} from "../api/routes/users";
@@ -132,11 +130,11 @@ export const fetchAndStorePathsOfSimulation = (simulationId) =>
 export const fetchAndStoreAllTraces = () =>
     fetchAndStoreObjects("trace", call(getAllTraces));
 
-export const fetchAndStoreAllJobs = () =>
-    fetchAndStoreObjects("job", call(getAllJobs));
-
-export const fetchAndStoreAllTasks = () =>
-    fetchAndStoreObjects("task", call(getAllTasks));
-
-export const fetchAndStoreAllSchedulers = () =>
-    fetchAndStoreObjects("scheduler", call(getAllSchedulers));
+export const fetchAndStoreAllSchedulers = function* () {
+    const objects = yield call(getAllSchedulers);
+    for (let index in objects) {
+        objects[index].id = objects[index].name;
+        yield put(addToStore("scheduler", objects[index]));
+    }
+    return objects;
+};
diff --git a/src/sagas/profile.js b/src/sagas/profile.js
index 6a72e7c2..5eacbc73 100644
--- a/src/sagas/profile.js
+++ b/src/sagas/profile.js
@@ -7,6 +7,6 @@ export function* onDeleteCurrentUser(action) {
         yield call(deleteUser, action.userId);
         yield put(deleteCurrentUserSucceeded());
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
diff --git a/src/sagas/simulations.js b/src/sagas/simulations.js
index b699002e..57eb6bad 100644
--- a/src/sagas/simulations.js
+++ b/src/sagas/simulations.js
@@ -1,7 +1,16 @@
 import {call, put} from "redux-saga/effects";
 import {addToStore} from "../actions/objects";
 import {addSimulationSucceeded, deleteSimulationSucceeded} from "../actions/simulations";
-import {addSimulation, deleteSimulation} from "../api/routes/simulations";
+import {addSimulation, deleteSimulation, getSimulation} from "../api/routes/simulations";
+
+export function* onOpenSimulationSucceeded(action) {
+    try {
+        const simulation = yield call(getSimulation, action.id);
+        yield put(addToStore("simulation", simulation));
+    } catch (error) {
+        console.error(error);
+    }
+}
 
 export function* onSimulationAdd(action) {
     try {
@@ -16,7 +25,7 @@ export function* onSimulationAdd(action) {
         yield put(addToStore("authorization", authorization));
         yield put(addSimulationSucceeded([authorization.userId, authorization.simulationId]));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -25,6 +34,6 @@ export function* onSimulationDelete(action) {
         yield call(deleteSimulation, action.id);
         yield put(deleteSimulationSucceeded(action.id));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index d1e42d70..763d4569 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -57,7 +57,7 @@ export function* onFetchLatestDatacenter(action) {
         yield fetchDatacenter(latestSection.datacenterId);
         yield put(fetchLatestDatacenterSucceeded(latestSection.datacenterId));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -71,7 +71,7 @@ function* fetchDatacenter(datacenterId) {
             yield fetchRoom(rooms[index].id);
         }
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -82,7 +82,7 @@ function* fetchAllUnitSpecifications() {
         yield fetchAndStoreAllMemories();
         yield fetchAndStoreAllStorages();
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -155,7 +155,7 @@ export function* onStartNewRoomConstruction() {
         yield put(addIdToStoreObjectListProp("datacenter", datacenterId, "roomIds", room.id));
         yield put(startNewRoomConstructionSucceeded(room.id));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -167,7 +167,7 @@ export function* onCancelNewRoomConstruction() {
         yield put(removeIdFromStoreObjectListProp("datacenter", datacenterId, "roomIds", roomId));
         yield put(cancelNewRoomConstructionSucceeded());
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -182,7 +182,7 @@ export function* onAddTile(action) {
         yield put(addToStore("tile", tile));
         yield put(addIdToStoreObjectListProp("room", roomId, "tileIds", tile.id));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -192,7 +192,7 @@ export function* onDeleteTile(action) {
         yield call(deleteTile, action.tileId);
         yield put(removeIdFromStoreObjectListProp("room", roomId, "tileIds", action.tileId));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -204,7 +204,7 @@ export function* onEditRoomName(action) {
         yield call(updateRoom, room);
         yield put(addPropToStoreObject("room", roomId, {name: action.name}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -216,7 +216,7 @@ export function* onDeleteRoom() {
         yield put(goDownOneInteractionLevel());
         yield put(removeIdFromStoreObjectListProp("datacenter", datacenterId, "roomIds", roomId));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -229,7 +229,7 @@ export function* onEditRackName(action) {
         yield call(updateRackOnTile, tileId, rack);
         yield put(addPropToStoreObject("rack", rackId, {name: action.name}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -241,7 +241,7 @@ export function* onDeleteRack() {
         yield put(addPropToStoreObject("tile", tileId, {objectType: undefined}));
         yield put(addPropToStoreObject("tile", tileId, {objectId: undefined}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -258,7 +258,7 @@ export function* onAddRackToTile(action) {
         yield put(addPropToStoreObject("tile", action.tileId, {objectId: rack.id}));
         yield put(addPropToStoreObject("tile", action.tileId, {objectType: "RACK"}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -284,7 +284,7 @@ export function* onAddMachine(action) {
         machineIds[machine.position - 1] = machine.id;
         yield put(addPropToStoreObject("rack", rackId, {machineIds}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -299,7 +299,7 @@ export function* onDeleteMachine() {
         yield put(goDownOneInteractionLevel());
         yield put(addPropToStoreObject("rack", rack.id, {machineIds}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -322,7 +322,7 @@ export function* onAddUnit(action) {
 
         yield put(addPropToStoreObject("machine", machine.id, {[action.unitType + "Ids"]: units}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -339,6 +339,6 @@ export function* onDeleteUnit(action) {
         yield call(updateMachineInRackOnTile, tileId, position, updatedMachine);
         yield put(addPropToStoreObject("machine", machine.id, {[action.unitType + "Ids"]: unitIds}));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
diff --git a/src/sagas/users.js b/src/sagas/users.js
index 5f9bffa1..f1ee9823 100644
--- a/src/sagas/users.js
+++ b/src/sagas/users.js
@@ -20,7 +20,7 @@ export function* onFetchLoggedInUser(action) {
 
         yield put(logInSucceeded(Object.assign({userId}, action.payload)));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
 
@@ -41,6 +41,6 @@ export function* onFetchAuthorizationsOfCurrentUser(action) {
 
         yield put(fetchAuthorizationsOfCurrentUserSucceeded(authorizationIds));
     } catch (error) {
-        console.log(error);
+        console.error(error);
     }
 }
diff --git a/src/shapes/index.js b/src/shapes/index.js
index cfe0ff54..c84e66e0 100644
--- a/src/shapes/index.js
+++ b/src/shapes/index.js
@@ -131,7 +131,7 @@ Shapes.Section = PropTypes.shape({
 Shapes.Path = PropTypes.shape({
     id: PropTypes.number.isRequired,
     simulationId: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     datetimeCreated: PropTypes.string.isRequired,
     sections: PropTypes.arrayOf(Shapes.Section),
 });
-- 
cgit v1.2.3