more event based handling of experiment list

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

@@ -15,13 +15,12 @@ const SHORT_DESCRIPTION_LENGTH = 200;
 export default class ExperimentListElement extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {availableServers: []};
+    this.state = {availableServers: [], experimentStarting: false};
 
     this.canLaunchExperiment = (this.props.experiment.private && this.props.experiment.owned) ||
     !this.props.experiment.private;
 
     this.wrapperRef = React.createRef();
-    this.handleClickOutside = this.handleClickOutside.bind(this);
   }
 
   async componentDidMount() {
@@ -33,25 +32,43 @@ export default class ExperimentListElement extends React.Component {
       thumbnail: URL.createObjectURL(thumbnail)
     });
 
+    this.handleClickOutside = this.handleClickOutside.bind(this);
     document.addEventListener('mousedown', this.handleClickOutside);
 
-    this.onUpdateServerAvailability = (availableServers) => {
-      this.setState({availableServers: availableServers});
-    };
+    this.onUpdateServerAvailability = this.onUpdateServerAvailability.bind(this);
     ExperimentServerService.instance.addListener(
       ExperimentServerService.EVENTS.UPDATE_SERVER_AVAILABILITY,
       this.onUpdateServerAvailability
     );
+
+    this.onStartExperiment = this.onStartExperiment.bind(this);
+    ExperimentExecutionService.instance.addListener(
+      ExperimentExecutionService.EVENTS.START_EXPERIMENT,
+      this.onStartExperiment
+    );
   }
 
   componentWillUnmount() {
     document.removeEventListener('mousedown', this.handleClickOutside);
-    this.onUpdateServerAvailability && ExperimentServerService.instance.removeListener(
+
+    ExperimentServerService.instance.removeListener(
       ExperimentServerService.EVENTS.UPDATE_SERVER_AVAILABILITY,
       this.onUpdateServerAvailability
     );
+    ExperimentServerService.instance.removeListener(
+      ExperimentExecutionService.EVENTS.START_EXPERIMENT,
+      this.onStartExperiment
+    );
   }
 
+  onUpdateServerAvailability(availableServers) {
+    this.setState({availableServers: availableServers});
+  };
+
+  onStartExperiment(experiment) {
+    this.setState({experimentStarting: experiment === this.props.experiment});
+  };
+
   handleClickOutside(event) {
     if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
       this.setState({selected: false});
@@ -154,8 +171,7 @@ export default class ExperimentListElement extends React.Component {
                   ExperimentExecutionService.instance.startNewExperiment(exp, false);
                 }}
                 //TODO: adjust disabled state to be reactive
-                disabled={ExperimentExecutionService.instance.startingExperiment === exp
-                  || pageState.deletingExperiment}
+                disabled={this.state.experimentStarting /*|| pageState.deletingExperiment*/}
                 className='btn btn-default' >
                   <i className='fa fa-plus'></i> Launch
                 </button>

src/services/experiments/execution/experiment-execution-service.js

@@ -45,9 +45,9 @@ class ExperimentExecutionService extends HttpService {
     NrpAnalyticsService.instance.eventTrack('Start', { category: 'Experiment' });
     NrpAnalyticsService.instance.tickDurationEvent('Server-initialization');
 
-    this.startingExperiment = experiment;
+    //this.startingExperiment = experiment;
+    ExperimentExecutionService.instance.emit(ExperimentExecutionService.EVENTS.START_EXPERIMENT, experiment);
 
-    console.info(ExperimentServerService.instance.getServerAvailability(true));
     let fatalErrorOccurred = false,
       serversToTry = experiment.devServer
         ? [experiment.devServer]
@@ -155,6 +155,8 @@ class ExperimentExecutionService extends HttpService {
         .then((simulation) => {
           ExperimentServerService.instance.initConfigFiles(serverURL, simulation.simulationID)
             .then(() => {
+              //this.startingExperiment = undefined;
+              ExperimentExecutionService.instance.emit(ExperimentExecutionService.EVENTS.START_EXPERIMENT, undefined);
               resolve(
                 'esv-private/experiment-view/' +
                   server +
@@ -165,7 +167,6 @@ class ExperimentExecutionService extends HttpService {
                   '/' +
                   simulation.simulationID
               );
-              this.startingExperiment = undefined;
             })
             .catch((err) => {
               reject(err);
@@ -178,4 +179,8 @@ class ExperimentExecutionService extends HttpService {
   };
 }
 
+ExperimentExecutionService.EVENTS = Object.freeze({
+  START_EXPERIMENT: 'START_EXPERIMENT'
+});
+
 export default ExperimentExecutionService;

src/services/experiments/execution/experiment-server-service.js

@@ -18,7 +18,7 @@ const SINGLETON_ENFORCER = Symbol();
 
 let rosConnections = new Map();
 const SLURM_MONITOR_POLL_INTERVAL = 5000;
-const SERVER_AVAILABILITY_POLL_INTERVAL = 5000;
+const SERVER_AVAILABILITY_POLL_INTERVAL = 3000;
 let clusterAvailability = { free: 'N/A', total: 'N/A' };
 
 /**
@@ -51,7 +51,7 @@ class ExperimentServerService extends HttpService {
       .pipe(map(({ free, nodes }) => ({ free, total: nodes[3] })))
       .pipe(multicast(new Subject())).refCount();
 
-    this.listOfAvailableServers = [];
+    this.availableServers = [];
 
     this.startUpdates();
     window.onbeforeunload = () => {
@@ -67,13 +67,6 @@ class ExperimentServerService extends HttpService {
     return _instance;
   }
 
-  /**
-   * Get available servers.
-   */
-  get availableServers() {
-    return this.listOfAvailableServers;
-  }
-
   /**
    * Start polling updates.
    */
@@ -82,6 +75,7 @@ class ExperimentServerService extends HttpService {
       availability => (clusterAvailability = availability)
     );
 
+    this.getServerAvailability(true);
     this.timerPollServerAvailability = setInterval(
       () => {
         this.getServerAvailability(true);
@@ -107,16 +101,16 @@ class ExperimentServerService extends HttpService {
   }
 
   getServerAvailability(forceUpdate = false) {
-    if (!this.listOfAvailableServers || forceUpdate) {
+    if (!this.availableServers || forceUpdate) {
       let update = async () => {
         let response = await this.httpRequestGET(availableServersURL);
-        this.listOfAvailableServers = await response.json();
+        this.availableServers = await response.json();
       };
       update();
-      this.emit(ExperimentServerService.EVENTS.UPDATE_SERVER_AVAILABILITY, this.listOfAvailableServers);
+      this.emit(ExperimentServerService.EVENTS.UPDATE_SERVER_AVAILABILITY, this.availableServers);
     }
 
-    return this.listOfAvailableServers;
+    return this.availableServers;
   }
 
   /**
@@ -162,8 +156,9 @@ class ExperimentServerService extends HttpService {
     return new Promise((resolve, reject) => {
       let verifySimulation = () => {
         setTimeout(() => {
-          this.httpRequestGET(serverURL + '/simulation').then(function(simulations) {
+          this.httpRequestGET(serverURL + '/simulation').then(async (reponse) => {
             let continueVerify = true;
+            let simulations = await reponse.json();
 
             if (simulations.length > 0) {
               let last = simulations.length - 1;

src/services/experiments/storage/experiment-storage-service.js

@@ -35,7 +35,6 @@ class ExperimentStorageService extends HttpService {
    * @return experiments - the list of template experiments
    */
   async getExperiments(forceUpdate = false) {
-    console.info('getExperiments');
     if (!this.experiments || forceUpdate) {
       let response = await this.httpRequestGET(storageExperimentsURL);
       this.experiments = await response.json();

src/services/http-service.js

@@ -42,7 +42,6 @@ export class HttpService extends EventEmitter {
     // Add authorization header
     options.headers.Authorization = `Bearer ${AuthenticationService.instance.getStoredToken()}`;
     if (data) {
-      console.info(options);
       options.body = data;
     }