Skip to content
Snippets Groups Projects
Commit 3c0ebdda authored by Sandro Weber's avatar Sandro Weber
Browse files

some more sim details layout

parent 675ac310
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/experiment-list/experiment-list-element.js
+ 1
− 1
View file @ 3c0ebdda
......@@ -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
+ 9
− 9
View file @ 3c0ebdda
.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
+ 78
− 17
View file @ 3c0ebdda
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 >
);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment