add a global error Service and modal to manage user-facing errors

beat/web/reports/static/reports/app/directives/bootstrapModal.js

@@ -36,7 +36,6 @@ angular.module('reportApp')
 			buttonSubmitText: '@'
 		},
 		link: function(scope){
-			console.log(scope);
 		},
 		transclude: {
 			'title': '?bTitle',

beat/web/reports/static/reports/app/directives/error.js

@@ -35,16 +35,24 @@ angular.module('reportApp')
 		},
 		restrict: 'E',
 		link: function(scope){
-			scope.error = null;
+			scope.currError = {
+				message: '',
+				error: ''
+			};
+
+			const errors = [];
 
 			const processError = () => {
-				// if theres no error, return
-				if(!ErrorService._hasError){
+				const modalOpen = ($("#errorReportModal").data('bs.modal') || {}).isShown;
+				if(modalOpen || errors.length === 0){
 					return;
 				}
 
 				// save our error
-				scope.error = ErrorService._getError();
+				const e = errors.shift();
+				scope.currError.message = e.message;
+				scope.currError.error = e.error;
+				scope.$apply();
 
 				// pop up the modal
 				$('#errorReportModal').modal();
@@ -53,14 +61,15 @@ angular.module('reportApp')
 			$timeout(() => {
 				$('#errorReportModal').on('hidden.bs.modal', () => {
 					// finished processing the last error
-					scope.error = null;
-
-					// process the next one, if there is one
+					// process the next one
 					processError();
 				});
 			}, 0);
 
-			scope.$watch(ErrorService._hasError, processError);
+			scope.$on('user:error', (event, error) => {
+				errors.push(error);
+				processError();
+			});
 		},
 		template: `
 <bootstrap-modal dom-id='errorReportModal' button-cancel-text='Continue'>
@@ -69,8 +78,9 @@ angular.module('reportApp')
 	</b-title>
 	<b-content>
 		<p>There was an error:</p>
-		<p>{{ error.message }}</p>
-		<pre>{{ error.error.message }}</pre>
+		<p>{{ currError.message }}</p>
+		<small>Details:</small>
+		<pre>{{ currError.error }}</pre>
 	</b-content>
 </bootstrap-modal>
 `

beat/web/reports/static/reports/app/directives/publish.js

@@ -50,7 +50,9 @@ angular.module('reportApp')
 					scope.algorithms.forEach(a => { scope.radios[a] = ''; });
 				})
 				.catch(e => {
-					ErrorService.logError(e, `Could not publish the report.`);
+					$('#publishReportModal').modal('hide');
+					// wait for the modal to close before logging error
+					setTimeout(() => ErrorService.logError(e, `Could not fetch the algorithms of the report, which is required to publish it.`), 500);
 				})
 				;
 			};
@@ -67,7 +69,11 @@ angular.module('reportApp')
 					visible_algorithms: openSourceAlgs
 				});
 
-				return ReportService.publishReport(openSourceAlgs);
+				return ReportService.publishReport(openSourceAlgs)
+				.catch(e => {
+					ErrorService.logError(e, `Could not publish the report.`);
+				})
+				;
 			};
 		},
 		template: `

beat/web/reports/static/reports/app/services/errorService.js

@@ -29,10 +29,8 @@
  * 	The ErrorService will (one at a time & synchronously!) pop up an error
  * 	modal (directives/error.js, "report-error") to let the user know.
  */
-angular.module('reportApp').factory('ErrorService', [function(){
+angular.module('reportApp').factory('ErrorService', ['$rootScope', function($rootScope){
 	const es = {
-		_errors: [],
-		_hasError: false
 	};
 
 	class ReportError {
@@ -53,19 +51,8 @@ angular.module('reportApp').factory('ErrorService', [function(){
 	es.logError = (error, message) => {
 		const newErr = new ReportError(error, message);
 
-		es._errors.push(newErr);
-		_hasError = true;
+		$rootScope.$broadcast('user:error', newErr);
 	};
 
-	es._getError = () => {
-		const err = es._errors.shift();
-
-		if(es._errors.length === 0){
-			es._hasError = false;
-		}
-
-		return err;
-	}
-
 	return es;
 }]);

beat/web/reports/templates/reports/panels/viewer.html

@@ -66,6 +66,7 @@
 </div>{# row #}
 <div class="row">
 	<div class="col-sm-12">
+		<report-error></report-error>
 		<div groups-layout></div>
 	</div>
 </div>