Merged development into NRRPLT-7930-remote-edition-of-experiment

src/App.js

@@ -3,21 +3,25 @@ import React from 'react';
 import { HashRouter, Switch, Route } from 'react-router-dom';
 
 import EntryPage from './components/entry-page/entry-page.js';
+import ErrorDialog from './components/dialog/error-dialog.js';
 import ExperimentOverview from './components/experiment-overview/experiment-overview.js';
 
 class App extends React.Component {
   render() {
-    return (
-      <HashRouter>
-        <Switch>
-          <Route path='/experiments-overview'>
-            <ExperimentOverview />
-          </Route>
-          <Route path='/'>
-            <EntryPage />
-          </Route>
-        </Switch>
-      </HashRouter>
+    return(
+      <div>
+        <ErrorDialog />
+        <HashRouter>
+          <Switch>
+            <Route path='/experiments-overview'>
+              <ExperimentOverview />
+            </Route>
+            <Route path='/'>
+              <EntryPage />
+            </Route>
+          </Switch>
+        </HashRouter>
+      </div>
     );
   }
 }

src/components/dialog/error-dialog.css

+.modal-dialog-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 999;
+}
+
+.modal-header{
+  background-color: rgb(241, 185, 185);
+  color: rgb(138, 41, 41);
+}
+
+.details{
+  clear: left;
+}
\ No newline at end of file

src/components/dialog/error-dialog.js

+import React from 'react';
+import { Modal, Button } from 'react-bootstrap';
+
+import ErrorHandlerService from '../../services/error-handler-service.js';
+
+import './error-dialog.css';
+
+class ErrorDialog extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: undefined,
+      isErrorSourceDisplayed: false
+    };
+  }
+
+  async componentDidMount() {
+    ErrorHandlerService.instance.addListener(
+      ErrorHandlerService.EVENTS.ERROR, (error) => {
+        this.onError(error);
+      });
+  }
+
+  onError(error) {
+    this.setState({
+      error: error
+    });
+  }
+
+  handleClose() {
+    this.setState({
+      error: undefined,
+      isErrorSourceDisplayed: false
+    });
+  }
+
+  sourceDisplay() {
+    this.setState({
+      isErrorSourceDisplayed: !this.state.isErrorSourceDisplayed
+    });
+  }
+
+  render(){
+    const error = this.state.error;
+    return (
+      <div>
+        {error?
+          <div className="modal-dialog-wrapper">
+            <Modal.Dialog>
+              <Modal.Header className="modal-header">
+                <h4>{error.type}</h4>
+              </Modal.Header>
+              <Modal.Body>
+                {error.message}
+                {this.state.isErrorSourceDisplayed
+                  ? <div className="details">
+                    {!error.code && !error.data && !error.stack
+                      ? <h6>No scary details</h6>
+                      : null}
+                    {this.state.error.code
+                      ? <div><h6>Code</h6><pre>{this.state.error.code}</pre></div>
+                      : null}
+                    {this.state.error.data
+                      ? <div><h6>Data</h6><pre>{this.state.error.data}</pre></div>
+                      : null}
+                    {this.state.error.stack
+                      ? <div><h6>Stack Trace</h6><pre>{this.state.error.stack}</pre></div>
+                      : null}
+                  </div>
+                  : null
+                }
+              </Modal.Body>
+              <Modal.Footer>
+                <div>
+                  <Button variant="warning" onClick={() => this.handleClose()}>
+                    <span className="glyphicon glyphicon-remove"></span> Close
+                  </Button>
+                  <Button variant="light" onClick={() => this.sourceDisplay()}>
+                    {this.state.isErrorSourceDisplayed ? 'Hide' : 'Show'} scary details <span></span>
+                  </Button>
+                </div>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </div>
+          : null}
+      </div>
+    );
+  }
+}
+
+export default ErrorDialog;
\ No newline at end of file

src/components/experiment-list/import-experiment-buttons.js

@@ -38,7 +38,7 @@ export default class ImportExperimentButtons extends React.Component {
       .importExperimentFolder(event)
       .then(async response => {
         this.setState({
-          importFolderResponse : await response.json()
+          importFolderResponse : await response
         });
         ExperimentStorageService.instance.getExperiments(true);
       })

src/services/error-handler-service.js

+import { EventEmitter } from 'events';
+
 let _instance = null;
 const SINGLETON_ENFORCER = Symbol();
 
 /**
- * Service taking care of OIDC/FS authentication for NRP accounts
+ * Service that handles error retrieving from http and opening error dialog in App.js
+ * An Error object has 5 attributes among which 2 are required:
+ *  - type: category (network ...) | required
+ *  - message: details | required
+ *  - code: error line | optional
+ *  - data: related content | optional
+ *  - stack: call stack | optional
  */
-class ErrorHandlerService {
+class ErrorHandlerService extends EventEmitter {
   constructor(enforcer) {
+    super();
     if (enforcer !== SINGLETON_ENFORCER) {
       throw new Error('Use ' + this.constructor.name + '.instance');
     }
@@ -19,20 +28,31 @@ class ErrorHandlerService {
     return _instance;
   }
 
-  displayServerHTTPError(error) {
-    //TODO: needs proper UI implementation
-    console.error(error);
+  // HTTP request error
+  networkError(error) {
+    error.type = 'Network Error';
+    this.emit(ErrorHandlerService.EVENTS.ERROR, error);
+  }
+
+  // Handling data error
+  dataError(error){
+    error.type = 'Data Error';
+    this.emit(ErrorHandlerService.EVENTS.ERROR, error);
   }
 
-  onErrorSimulationUpdate(error) {
-    //TODO: needs proper UI implementation
-    console.error(error);
+  startSimulationError(error) {
+    error.type = 'Start Simulation Error';
+    this.emit(ErrorHandlerService.EVENTS.ERROR, error);
   }
 
-  displayError (error){
-    //TODO: needs proper implementation
-    console.error(error.type + error.message);
+  updateSimulationError(error) {
+    error.type = 'Update Simulation Error';
+    this.emit(ErrorHandlerService.EVENTS.ERROR, error);
   }
 }
 
-export default ErrorHandlerService;
+ErrorHandlerService.EVENTS = Object.freeze({
+  ERROR: 'ERROR'
+});
+
+export default ErrorHandlerService;
\ No newline at end of file

src/services/experiments/execution/__tests__/running-simulation-service.test.js

@@ -41,11 +41,11 @@ test('initializes and gets the simulation resources', async () => {
   expect(resources).toBeDefined();
 
   // failure case
-  jest.spyOn(ErrorHandlerService.instance, 'displayServerHTTPError').mockImplementation(() => { });
+  jest.spyOn(ErrorHandlerService.instance, 'networkError').mockImplementation(() => { });
   let simIDFailure = 0;
-  expect(ErrorHandlerService.instance.displayServerHTTPError).not.toHaveBeenCalled();
+  expect(ErrorHandlerService.instance.networkError).not.toHaveBeenCalled();
   resources = await RunningSimulationService.instance.initConfigFiles(serverBaseURL, simIDFailure);
-  expect(ErrorHandlerService.instance.displayServerHTTPError).toHaveBeenCalled();
+  expect(ErrorHandlerService.instance.networkError).toHaveBeenCalled();
 });
 
 test('verifies whether a simulation is ready', async () => {
@@ -139,7 +139,7 @@ test('register for ROS status information', () => {
 
 test('can retrieve the state of a simulation', async () => {
   let returnValueGET = undefined;
-  jest.spyOn(ErrorHandlerService.instance, 'displayServerHTTPError').mockImplementation();
+  jest.spyOn(ErrorHandlerService.instance, 'networkError').mockImplementation();
   jest.spyOn(RunningSimulationService.instance, 'httpRequestGET').mockImplementation(() => {
     if (RunningSimulationService.instance.httpRequestGET.mock.calls.length === 1) {
       returnValueGET = { state: EXPERIMENT_STATE.PAUSED }; // proper state msg
@@ -161,12 +161,12 @@ test('can retrieve the state of a simulation', async () => {
 
   // call 2 => rejected
   simSate = await RunningSimulationService.instance.getState('test-url', 1);
-  expect(ErrorHandlerService.instance.displayServerHTTPError).toHaveBeenCalled();
+  expect(ErrorHandlerService.instance.networkError).toHaveBeenCalled();
 });
 
 test('can set the state of a simulation', async () => {
   let returnValuePUT = undefined;
-  jest.spyOn(ErrorHandlerService.instance, 'onErrorSimulationUpdate').mockImplementation();
+  jest.spyOn(ErrorHandlerService.instance, 'updateSimuationError').mockImplementation();
   jest.spyOn(RunningSimulationService.instance, 'httpRequestPUT').mockImplementation(() => {
     if (RunningSimulationService.instance.httpRequestGET.mock.calls.length === 1) {
       returnValuePUT = {};
@@ -184,5 +184,5 @@ test('can set the state of a simulation', async () => {
 
   // call 2 => rejected
   returnValue = await RunningSimulationService.instance.updateState('test-url', 1, EXPERIMENT_STATE.PAUSED);
-  expect(ErrorHandlerService.instance.onErrorSimulationUpdate).toHaveBeenCalled();
+  expect(ErrorHandlerService.instance.updateSimulationError).toHaveBeenCalled();
 });
\ No newline at end of file

src/services/experiments/execution/__tests__/server-resources-service.test.js

@@ -67,9 +67,9 @@ test('can get a server config', async () => {
   jest.spyOn(ServerResourcesService.instance, 'httpRequestGET').mockImplementation(() => {
     return Promise.reject();
   });
-  jest.spyOn(ErrorHandlerService.instance, 'displayServerHTTPError').mockImplementation();
+  jest.spyOn(ErrorHandlerService.instance, 'networkError').mockImplementation();
   config = await ServerResourcesService.instance.getServerConfig('test-server-id');
-  expect(ErrorHandlerService.instance.displayServerHTTPError).toHaveBeenCalled();
+  expect(ErrorHandlerService.instance.networkError).toHaveBeenCalled();
 });
 
 test('should stop polling updates when window is unloaded', async () => {

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

@@ -3,6 +3,7 @@ import _ from 'lodash';
 //import NrpAnalyticsService from '../../nrp-analytics-service.js';
 import ServerResourcesService from './server-resources-service.js';
 import SimulationService from './running-simulation-service.js';
+import ErrorHandlerService from '../../error-handler-service';
 import { HttpService } from '../../http-service.js';
 import { EXPERIMENT_STATE } from '../experiment-constants.js';
 
@@ -88,9 +89,8 @@ class ExperimentExecutionService extends HttpService {
         profiler,
         progressCallback
       ).catch((failure) => {
-        if (failure.error && failure.error.data) {
-          //TODO: proper ErrorHandlerService callback
-          console.error('Failed to start simulation: ' + JSON.stringify(failure.error.data));
+        if (failure.error) {
+          ErrorHandlerService.instance.startSimulationError(failure.error);
         }
         fatalErrorOccurred = fatalErrorOccurred || failure.isFatal;
 

src/services/experiments/execution/running-simulation-service.js

@@ -44,7 +44,7 @@ class SimulationService extends HttpService {
       cachedConfigFiles = response.resources;
     }
     catch (error) {
-      ErrorHandlerService.instance.displayServerHTTPError(error);
+      ErrorHandlerService.instance.networkError(error);
     }
 
     return cachedConfigFiles;
@@ -151,7 +151,7 @@ class SimulationService extends HttpService {
       return response;
     }
     catch (error) {
-      ErrorHandlerService.instance.displayServerHTTPError(error);
+      ErrorHandlerService.instance.networkError(error);
     }
   }
 
@@ -168,7 +168,7 @@ class SimulationService extends HttpService {
       return response;
     }
     catch (error) {
-      ErrorHandlerService.instance.onErrorSimulationUpdate(error);
+      ErrorHandlerService.instance.updateSimulationError(error);
     }
   }
 }

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

@@ -79,7 +79,7 @@ class ServerResourcesService extends HttpService {
       .then(async (response) => {
         return await response.json();
       })
-      .catch(ErrorHandlerService.instance.displayServerHTTPError);
+      .catch(ErrorHandlerService.instance.networkError);
   }
 }
 

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

@@ -3,6 +3,7 @@ import { EXPERIMENT_RIGHTS } from '../experiment-constants';
 
 import endpoints from '../../proxy/data/endpoints.json';
 import config from '../../../config.json';
+import ErrorHandlerService from '../../error-handler-service.js';
 
 const storageURL = `${config.api.proxy.url}${endpoints.proxy.storage.url}`;
 const storageExperimentsURL = `${config.api.proxy.url}${endpoints.proxy.storage.experiments.url}`;
@@ -68,13 +69,18 @@ class ExperimentStorageService extends HttpService {
   // move to experiment-configuration-service?
   async getExperiments(forceUpdate = false) {
     if (!this.experiments || forceUpdate) {
-      let experimentList = await (await this.httpRequestGET(storageExperimentsURL)).json();
-      // filter out experiments with incomplete configuration (probably storage corruption)
-      experimentList = experimentList.filter(experiment => experiment.configuration.experimentFile);
-      this.sortExperiments(experimentList);
-      await this.fillExperimentDetails(experimentList);
-      this.experiments = experimentList;
-      this.emit(ExperimentStorageService.EVENTS.UPDATE_EXPERIMENTS, this.experiments);
+      try {
+        let experimentList = await (await this.httpRequestGET(storageExperimentsURL)).json();
+        // filter out experiments with incomplete configuration (probably storage corruption)
+        experimentList = experimentList.filter(experiment => experiment.configuration.experimentFile);
+        this.sortExperiments(experimentList);
+        await this.fillExperimentDetails(experimentList);
+        this.experiments = experimentList;
+        this.emit(ExperimentStorageService.EVENTS.UPDATE_EXPERIMENTS, this.experiments);
+      }
+      catch (error) {
+        ErrorHandlerService.instance.networkError(error);
+      }
     }
 
     return this.experiments;

src/services/experiments/files/import-experiment-service.js

 import { HttpService } from '../../http-service.js';
-import ErrorHandlerService from '../../error-handler-service.js';
 import JSZip from 'jszip';
 
 import endpoints from '../../proxy/data/endpoints.json';
 import config from '../../../config.json';
+import ErrorHandlerService from '../../error-handler-service.js';
 const importExperimentURL = `${config.api.proxy.url}${endpoints.proxy.storage.importExperiment.url}`;
 const scanStorageURL = `${config.api.proxy.url}${endpoints.proxy.storage.scanStorage.url}`;
 
@@ -69,7 +69,7 @@ export default class ImportExperimentService extends HttpService {
   async scanStorage() {
     return this.httpRequestPOST(scanStorageURL)
       .then(response => this.getScanStorageResponse(response))
-      .catch(error => ErrorHandlerService.instance.displayError(error));
+      .catch(error => ErrorHandlerService.instance.networkError(error));
   }
 
   async zipExperimentFolder(event) {
@@ -106,7 +106,7 @@ export default class ImportExperimentService extends HttpService {
             )
           )
           .catch(error => {
-            ErrorHandlerService.instance.displayError(error);
+            ErrorHandlerService.instance.dataError(error);
             return Promise.reject(error);
           })
       );
@@ -115,7 +115,7 @@ export default class ImportExperimentService extends HttpService {
     return Promise.all(promises)
       .then(() => zip.generateAsync({ type: 'blob' }))
       .catch(error => {
-        ErrorHandlerService.instance.displayError(error);
+        ErrorHandlerService.instance.dataError(error);
         return Promise.reject(error);
       });
   }
@@ -123,8 +123,8 @@ export default class ImportExperimentService extends HttpService {
   async importExperimentFolder(event) {
     return this.zipExperimentFolder(event).then(async zipContent => {
       return this.httpRequestPOST(importExperimentURL, zipContent, options)
-        .catch(error => ErrorHandlerService.instance
-          .displayError(error)
+        .then(response => response.json())
+        .catch(error => ErrorHandlerService.instance.networkError(error)
         );
     });
   }
@@ -133,15 +133,7 @@ export default class ImportExperimentService extends HttpService {
     let files = event.target.files;
     let zipFiles = [];
     Array.from(files).forEach(file => {
-      if (file.type !== 'application/zip') {
-        ErrorHandlerService.instance.displayError({
-          type : 'Import Error.',
-          message :`The file ${file.name} cannot be imported because it is not a zip file.`
-        });
-      }
-      else {
-        zipFiles.push(file);
-      }
+      zipFiles.push(file);
     });
     let promises = zipFiles.map(zipFile => {
       return new Promise(resolve => {
@@ -159,7 +151,7 @@ export default class ImportExperimentService extends HttpService {
         zipContents.map(zipContent =>
           this.httpRequestPOST(importExperimentURL, zipContent, options)
             .catch(error => {
-              ErrorHandlerService.instance.displayError(error);
+              ErrorHandlerService.instance.networkError(error);
               return Promise.reject(error);
             })
         )