From 453418b6942d7e235c252307b66ffbd28807d582 Mon Sep 17 00:00:00 2001 From: Shao Date: Mon, 21 Dec 2015 15:55:20 -0800 Subject: [PATCH 1/2] Add finish alert with blinking tab title --- zeppelin-web/src/app/app.controller.js | 40 +++++++++++++++++++ .../paragraph/paragraph.controller.js | 6 +++ 2 files changed, 46 insertions(+) diff --git a/zeppelin-web/src/app/app.controller.js b/zeppelin-web/src/app/app.controller.js index 2c302b542d9..33e6108fae7 100644 --- a/zeppelin-web/src/app/app.controller.js +++ b/zeppelin-web/src/app/app.controller.js @@ -16,6 +16,8 @@ angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootScope, $window) { $rootScope.compiledScope = $scope.$new(true, $rootScope); $scope.looknfeel = 'default'; + $rootScope.windowFocus = true; + $rootScope.hasNewStatus = false; var init = function() { $scope.asIframe = (($window.location.href.indexOf('asIframe') > -1) ? true : false); @@ -45,4 +47,42 @@ angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootSc BootstrapDialog.defaultOptions.onshown = function() { angular.element('#' + this.id).find('.btn:last').focus(); }; + + $rootScope.$on('hasNewStatus', function(event, data) { + if (!event.defaultPrevented && data && data === true && $rootScope.hasNewStatus === false) { + $rootScope.hasNewStatus = true; + pageTitleNotification.On('You have a job finished!!!', 1000); + event.preventDefault(); + } + }); + + // Blinking page title for finished job notification + $window.onblur = function (){ + $rootScope.windowFocus = false; + }; + + $window.onfocus = function (){ + $rootScope.windowFocus = true; + if($rootScope.hasNewStatus === true) { + $rootScope.hasNewStatus = false; + pageTitleNotification.Off(); + } + }; + + var pageTitleNotification = { + vars:{ + originalTitle: document.title, + interval: null + }, + On: function(notification, intervalSpeed){ + var _this = this; + _this.vars.interval = setInterval(function(){ + document.title = (_this.vars.originalTitle === document.title) ? notification : _this.vars.originalTitle; + }, (intervalSpeed) ? intervalSpeed : 1000); + }, + Off: function(){ + clearInterval(this.vars.interval); + document.title = this.vars.originalTitle; + } + }; }); diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 8eafa6fb4dd..202c06aff95 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -206,6 +206,12 @@ angular.module('zeppelinWebApp') $scope.paragraph.result = data.paragraph.result; $scope.paragraph.settings = data.paragraph.settings; + // when paragraph finishes, activate blinking tab notification if user is not focusing the the tab. + if (($scope.paragraph.status === 'FINISHED' || $scope.paragraph.status === 'ERROR' || $scope.paragraph.status === 'ABORTED') && + ($rootScope.windowFocus === false)) { + $rootScope.$emit('hasNewStatus', true); + } + if (!$scope.asIframe) { $scope.paragraph.config = data.paragraph.config; initializeDefault(); From 24475b3a07401f0d54cb2cf6d76ebaecabdbd1ed Mon Sep 17 00:00:00 2001 From: Shao Date: Wed, 6 Jan 2016 13:46:53 -0800 Subject: [PATCH 2/2] Replace blinking tab title notification with desktop notification --- zeppelin-web/bower.json | 6 ++- zeppelin-web/src/app/app.controller.js | 43 +++++++++---------- zeppelin-web/src/app/app.js | 3 +- .../paragraph/paragraph.controller.js | 3 +- zeppelin-web/src/index.html | 3 ++ 5 files changed, 31 insertions(+), 27 deletions(-) diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json index 4e5c3534066..70a08b48515 100644 --- a/zeppelin-web/bower.json +++ b/zeppelin-web/bower.json @@ -11,6 +11,7 @@ "angular-animate": "1.3.8", "angular-touch": "1.3.8", "angular-route": "1.3.8", + "angular-resource": "1.3.8", "angular-bootstrap": "~0.13.0", "angular-websocket": "~1.0.13", "ace-builds": "1.1.9", @@ -28,7 +29,8 @@ "angular-filter": "~0.5.4", "ngtoast": "~1.5.5", "ng-focus-if": "~1.0.2", - "bootstrap3-dialog": "bootstrap-dialog#~1.34.7" + "bootstrap3-dialog": "bootstrap-dialog#~1.34.7", + "floatThead": "~1.3.2" }, "devDependencies": { "angular-mocks": "1.3.8" @@ -61,4 +63,4 @@ "name": "highlightjs" } } -} +} \ No newline at end of file diff --git a/zeppelin-web/src/app/app.controller.js b/zeppelin-web/src/app/app.controller.js index 33e6108fae7..f6af014bfe4 100644 --- a/zeppelin-web/src/app/app.controller.js +++ b/zeppelin-web/src/app/app.controller.js @@ -13,10 +13,10 @@ */ 'use strict'; -angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootScope, $window) { +angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootScope, $window, webNotification) { $rootScope.compiledScope = $scope.$new(true, $rootScope); $scope.looknfeel = 'default'; - $rootScope.windowFocus = true; + $scope.windowFocus = true; $rootScope.hasNewStatus = false; var init = function() { @@ -51,12 +51,29 @@ angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootSc $rootScope.$on('hasNewStatus', function(event, data) { if (!event.defaultPrevented && data && data === true && $rootScope.hasNewStatus === false) { $rootScope.hasNewStatus = true; - pageTitleNotification.On('You have a job finished!!!', 1000); + + // Send desktop notification + webNotification.showNotification('Zeppelin Notification', { + body: 'You have a job finished!', + icon: 'my-icon.ico', + onClick: function onNotificationClicked() { + console.log('Notification clicked.'); + }, + autoClose: 4000 //auto close the notification after 2 seconds (you can manually close it via hide function) + }, function onShow(error, hide) { + if (error) { + window.alert('Unable to show notification: ' + error.message); + } else { + setTimeout(function hideNotification() { + hide(); + }, 5000); + } + }); + event.preventDefault(); } }); - // Blinking page title for finished job notification $window.onblur = function (){ $rootScope.windowFocus = false; }; @@ -65,24 +82,6 @@ angular.module('zeppelinWebApp').controller('MainCtrl', function($scope, $rootSc $rootScope.windowFocus = true; if($rootScope.hasNewStatus === true) { $rootScope.hasNewStatus = false; - pageTitleNotification.Off(); - } - }; - - var pageTitleNotification = { - vars:{ - originalTitle: document.title, - interval: null - }, - On: function(notification, intervalSpeed){ - var _this = this; - _this.vars.interval = setInterval(function(){ - document.title = (_this.vars.originalTitle === document.title) ? notification : _this.vars.originalTitle; - }, (intervalSpeed) ? intervalSpeed : 1000); - }, - Off: function(){ - clearInterval(this.vars.interval); - document.title = this.vars.originalTitle; } }; }); diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js index 64d43bb3c59..d1c0a7940e0 100644 --- a/zeppelin-web/src/app/app.js +++ b/zeppelin-web/src/app/app.js @@ -32,7 +32,8 @@ angular.module('zeppelinWebApp', [ 'puElasticInput', 'xeditable', 'ngToast', - 'focus-if' + 'focus-if', + 'angular-web-notification' ]) .filter('breakFilter', function() { return function (text) { diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 202c06aff95..72bbb3c1a09 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -207,8 +207,7 @@ angular.module('zeppelinWebApp') $scope.paragraph.settings = data.paragraph.settings; // when paragraph finishes, activate blinking tab notification if user is not focusing the the tab. - if (($scope.paragraph.status === 'FINISHED' || $scope.paragraph.status === 'ERROR' || $scope.paragraph.status === 'ABORTED') && - ($rootScope.windowFocus === false)) { + if (statusChanged && ($rootScope.windowFocus === false)) { $rootScope.$emit('hasNewStatus', true); } diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index 4bddd9849d4..1954a870212 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -122,6 +122,9 @@ + + +