From 5f5981fe551212b40925b86bd414f018d0791b78 Mon Sep 17 00:00:00 2001
From: jaden <noreply@example.com>
Date: Wed, 24 May 2017 18:09:14 +0200
Subject: [PATCH] add a global error Service and modal to manage user-facing
errors
---
.../reports/app/directives/bootstrapModal.js | 1 -
.../static/reports/app/directives/error.js | 30 ++++++++++++-------
.../static/reports/app/directives/publish.js | 10 +++++--
.../reports/app/services/errorService.js | 17 ++---------
.../templates/reports/panels/viewer.html | 1 +
5 files changed, 31 insertions(+), 28 deletions(-)
diff --git a/beat/web/reports/static/reports/app/directives/bootstrapModal.js b/beat/web/reports/static/reports/app/directives/bootstrapModal.js
index 6692f51a0..3a60c59e9 100644
--- a/beat/web/reports/static/reports/app/directives/bootstrapModal.js
+++ b/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',
diff --git a/beat/web/reports/static/reports/app/directives/error.js b/beat/web/reports/static/reports/app/directives/error.js
index 673449b70..a8759663e 100644
--- a/beat/web/reports/static/reports/app/directives/error.js
+++ b/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>
`
diff --git a/beat/web/reports/static/reports/app/directives/publish.js b/beat/web/reports/static/reports/app/directives/publish.js
index 8833a3445..ebd3ee047 100644
--- a/beat/web/reports/static/reports/app/directives/publish.js
+++ b/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: `
diff --git a/beat/web/reports/static/reports/app/services/errorService.js b/beat/web/reports/static/reports/app/services/errorService.js
index 3343054bb..562c8a326 100644
--- a/beat/web/reports/static/reports/app/services/errorService.js
+++ b/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;
}]);
diff --git a/beat/web/reports/templates/reports/panels/viewer.html b/beat/web/reports/templates/reports/panels/viewer.html
index f1cc222af..9fcba9aaf 100644
--- a/beat/web/reports/templates/reports/panels/viewer.html
+++ b/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>
--
GitLab