some more sim details layout

src/components/experiment-list/experiment-list-element.js

@@ -243,7 +243,7 @@ export default class ExperimentListElement extends React.Component {
               </div>
             </div>
           }
-          {/*this.state.selected && exp.joinableServers.length > 0*/ true ?
+          {this.state.selected /*&& exp.joinableServers.length > 0*/ ?
             <SimulationDetails simulations={exp.joinableServers} />
             : null
           }

src/components/experiment-list/simulation-details.css

-.monospace-text {
-    font-family: monospace;
+.simulations-details-wrapper {}
+
+.table-header {
+  font-weight: bold;
 }
 
-.table tbody tr td:nth-of-type(4) {
-    font-family: Courier, monospace;
+.table-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 }
 
-.table-wrapper {
-  margin: 0 auto;
-  padding: 10px;
-  max-width: 800px;
-  width: 100%;
+.table-column-last {
+  grid-area: 1 / -2 / 2 / -1;
 }
\ No newline at end of file

src/components/experiment-list/simulation-details.js

 import React from 'react';
 
 import timeDDHHMMSS from '../../utility/time-filter.js';
+import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants.js';
 
-export default class SimulationDetails extends React.Component {
-  render() {
-    return (
-      <div className='experiment-list-wrapper'>
-        <div className="table-wrapper"
-          /*uib-collapse="!config.canLaunchExperiments ||
-            (pageState.selected != exp.id)||(!pageState.showJoin && !running) || !exp.joinableServers.length"*/>
-          <table className="table">
+import './simulation-details.css';
+
+/*<div className="table-wrapper"
+          uib-collapse="!config.canLaunchExperiments ||
+            (pageState.selected != exp.id)||(!pageState.showJoin && !running) || !exp.joinableServers.length">
+            <table className="table">
             <thead>
               <tr>
                 <th>Server</th>
@@ -28,23 +27,23 @@ export default class SimulationDetails extends React.Component {
                     <td className="monospace-text">{timeDDHHMMSS(simulation.uptime)}</td>
                     <td>{simulation.runningSimulation.state}</td>
                     <td>
-                      {/* Join button enabled provided simulation state is consistent*/}
-                      <button /*analytics-on analytics-event="Join" analytics-category="Experiment"*/
+                      {// Join button enabled provided simulation state is consistent}
+                      <button analytics-on analytics-event="Join" analytics-category="Experiment"
                         ng-click="(simulation.runningSimulation.state === STATE.CREATED) ||
                       simulation.stopping || joinExperiment(simulation, exp);"
                         type="button" className="btn btn-default"
                         ng-disabled="(simulation.runningSimulation.state === STATE.CREATED) ||
                       simulation.stopping">
                         Join »</button>
-                      {/* Stop button enabled provided simulation state is consistent*/}
-                      <button /*analytics-on analytics-event="Stop" analytics-category="Experiment"*/
+                      {// Stop button enabled provided simulation state is consistent}
+                      <button analytics-on analytics-event="Stop" analytics-category="Experiment"
                         ng-click="stopSimulation(simulation, exp);"
                         type="button" className="btn btn-default"
                         ng-if="canStopSimulation(simulation)"
                         ng-disabled="simulation.stopping">
                         <i className="fa fa-spinner fa-spin" ng-if="simulation.stopping"></i> Stop
                       </button>
-                      {/*No edit rights: stop button disabled */}
+                      {//No edit rights: stop button disabled }
                       <button type="button" className="btn btn-default disabled enable-tooltip"
                         title="Sorry, you don't have sufficient rights to stop the simulation."
                         ng-if="!canStopSimulation(simulation)"> Stop
@@ -60,14 +59,14 @@ export default class SimulationDetails extends React.Component {
                 <td></td>
                 <td></td>
                 <td>
-                  {/* Stop all button enabled provided simulation state is consistent*/}
-                  <button /*analytics-on analytics-event="Stop All" analytics-category="Experiment"*/
+                  {// Stop all button enabled provided simulation state is consistent}
+                  <button analytics-on analytics-event="Stop All" analytics-category="Experiment"
                     ng-click="stopAllthis.props.simulationsations(exp)"
                     type="button" className="btn btn-default" ng-if="canStopAllSimulations(exp)"
                     ng-disabled="!canStopAllSimulations(exp)">
                     <i className="fa fa-spinner fa-spin" ng-if=""></i> Stop All
                   </button>
-                  {/* No edit rights: stop all button disabled */}
+                  {// No edit rights: stop all button disabled }
                   <button type="button" className="btn btn-default disabled enable-tooltip"
                     title="Sorry, you don't have sufficient rights to stop the this.props.simulationsations."
                     ng-if="!canStopAllSimulations(exp)"> Stop All
@@ -77,7 +76,69 @@ export default class SimulationDetails extends React.Component {
             </tbody>
           </table>
         </div>
-      </div>
+        */
+
+export default class SimulationDetails extends React.Component {
+  isJoinDisabled(simulation) {
+    return simulation.runningSimulation.state === EXPERIMENT_STATE.CREATED ||
+      simulation.stopping;
+  }
+
+  isStopDisabled() {
+
+  }
+
+  render() {
+    console.info(this.props.simulations);
+    return (
+      <div className='simulations-details-wrapper'>
+        <div className='table-row'>
+          <div className='table-header'>Server</div>
+          <div className='table-header'>Creator</div>
+          <div className='table-header'>Uptime</div>
+          <div className='table-header'>Status</div>
+          <div className='table-header'>Actions</div>
+        </div>
+
+        {this.props.simulations.map(simulation => {
+          return (
+            <div key={simulation.runningSimulation.simulationID} className='table-row'>
+              <div>{simulation.server}</div>
+              <div>{simulation.runningSimulation.owner}</div>
+              <div>{timeDDHHMMSS(simulation.uptime)}</div>
+              <div>{simulation.runningSimulation.state}</div>
+              <div>
+                {/* Join button enabled provided simulation state is consistent */}
+                <button analytics-on analytics-event="Join" analytics-category="Experiment"
+                  ng-click="(simulation.runningSimulation.state === STATE.CREATED) ||
+                    simulation.stopping || joinExperiment(simulation, exp);"
+                  type="button" className="btn btn-default"
+                  disabled={this.isJoinDisabled(simulation)}>
+                  Join »
+                </button>
+                {/* Stop button enabled provided simulation state is consistent */}
+                <button analytics-on analytics-event="Stop" analytics-category="Experiment"
+                  ng-click="stopSimulation(simulation, exp);"
+                  type="button" className="btn btn-default"
+                  ng-if="canStopSimulation(simulation)"
+                  ng-disabled="simulation.stopping">
+                  <i className="fa fa-spinner fa-spin" ng-if="simulation.stopping"></i> Stop
+                </button>
+                {/* No edit rights: stop button disabled */}
+                <button type="button" className="btn btn-default disabled enable-tooltip"
+                  title="Sorry, you don't have sufficient rights to stop the simulation."
+                  ng-if="!canStopSimulation(simulation)"> Stop
+                </button>
+              </div>
+            </div>
+          );
+        })
+        }
+
+        <div className='table-row'>
+          <button className='table-column-last'>Stop All</button>
+        </div>
+      </div >
     );
   }
 }