diff --git a/src/components/experiment-list/experiment-list-element.js b/src/components/experiment-list/experiment-list-element.js
index 88624b7de25b2f4b0589c4e28ee0994a9397f78e..a2bdd6d45aae6c4df22679c31f36af1db7531b97 100644
--- a/src/components/experiment-list/experiment-list-element.js
+++ b/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
}
diff --git a/src/components/experiment-list/simulation-details.css b/src/components/experiment-list/simulation-details.css
index e4879ef821fd6af1f3f4fbe72af780dc23facd38..bda8b122b9978d7bf13e3f149e5646fe5ae6f262 100644
--- a/src/components/experiment-list/simulation-details.css
+++ b/src/components/experiment-list/simulation-details.css
@@ -1,14 +1,14 @@
-.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
diff --git a/src/components/experiment-list/simulation-details.js b/src/components/experiment-list/simulation-details.js
index 25e939a335371b1453dabf475ffa22570c54989e..6616f3c6fecc08715c12ce690f40c9e474655c0b 100644
--- a/src/components/experiment-list/simulation-details.js
+++ b/src/components/experiment-list/simulation-details.js
@@ -1,15 +1,14 @@
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 >
);
}
}