Merge pull request #12299 from eduardoj/live_build_log_browser_notifi…

…cations Introduce browser notifications for live build logs
openSUSE · Mar 14, 2022 · b2338bc · b2338bc
2 parents f870ef9 + 8f78982
commit b2338bc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/api/app/assets/javascripts/webui/live_build_log.js b/src/api/app/assets/javascripts/webui/live_build_log.js
@@ -2,6 +2,7 @@ var LiveLog = function(wrapperId, startButton, stopButton, status, finished, inf
   this.wrapper = $(wrapperId);
   this.startButton = $(startButton);
   this.stopButton = $(stopButton);
+  this.notificationsButton = $('.link_notifications');
   this.status = $(status);
   this.faviconFinished = faviconFinished;
   this.faviconRunning = faviconRunning;
@@ -20,6 +21,13 @@ $.extend(LiveLog.prototype, {
   initialize: function() {
     this.startButton.click($.proxy(this.start, this));
     this.stopButton.click($.proxy(this.stop, this));
+    if (Notification.permission === 'default') { // jshint ignore:line
+      this.notificationsButton.click($.proxy(this.askNotificationPermission, this));
+    }
+    else {
+      this.notificationsButton.html(this.notificationsButton.html().replace('Request Browser Notifications', 'Browser Notifications ' + Notification.permission)); // jshint ignore:line
+      this.notificationsButton.addClass('disabled');
+    }
     this.start();
     this.initial = false;
     return this;
@@ -83,7 +91,7 @@ $.extend(LiveLog.prototype, {
     }
   },
 
-  finish: function(status) { // jshint ignore:line
+  finish: function(status) {
     this.finished = true;
     this.stop();
     var statusDetails = this.buildStatusDetails(status);
@@ -95,29 +103,58 @@ $.extend(LiveLog.prototype, {
     this.startButton.addClass('d-none');
   },
 
-  stopAjaxRequest: function() { // jshint ignore:line
+  stopAjaxRequest: function() {
     if (this.ajaxRequest !== 0)
       this.ajaxRequest.abort();
     this.ajaxRequest = 0;
   },
 
-  showAbort: function() { // jshint ignore:line
+  showAbort: function() {
     $(".link_abort_build").removeClass('d-none');
     $(".link_trigger_rebuild").addClass('d-none');
   },
 
-  hideAbort: function() { // jshint ignore:line
+  hideAbort: function() {
     $(".link_abort_build").addClass('d-none');
     $(".link_trigger_rebuild").removeClass('d-none');
   },
 
-  indicatorStatus: function(status) { // jshint ignore:line
+  indicatorStatus: function(status) {
     this.logInfo.children().hide();
     this.logInfo.children('.' + status).show();
   },
 
-  faviconStatus: function(source) { // jshint ignore:line
+  faviconStatus: function(source) {
     if (typeof source !== 'undefined')
       $("link[rel='shortcut icon']").attr("href", source);
   },
+
+  browserNotification: function(status) {
+    if (this.notificationSupport() && Notification.permission === "granted") { // jshint ignore:line
+      var statusDetails = this.buildStatusDetails(status);
+      new Notification('OBS: ' + statusDetails.content, // jshint ignore:line
+        { body: 'The status of your Open Build Service build is "' + statusDetails.indicator + '".', icon: statusDetails.favicon }
+      );
+    }
+  },
+
+  askNotificationPermission: function () {
+    if (this.notificationSupport() && Notification.permission === 'default') { // jshint ignore:line
+      Notification.requestPermission().then(function (permission) { // jshint ignore:line
+        if (permission === 'granted' || permission === 'denied') {
+          liveLog.notificationsButton.html(liveLog.notificationsButton.html().replace('Request Browser Notifications', 'Browser Notifications ' + Notification.permission)); // jshint ignore:line
+          liveLog.notificationsButton.addClass('disabled'); // jshint ignore:line
+        }
+      });
+    }
+  },
+
+  notificationSupport: function () {
+    if (!('Notification' in window)) {
+      console.log("This browser does not support notifications."); // jshint ignore:line
+      return false;
+    } else {
+      return true;
+    }
+  },
 });
diff --git a/src/api/app/views/webui/package/_live_build_log_controls.html.haml b/src/api/app/views/webui/package/_live_build_log_controls.html.haml
@@ -1,4 +1,4 @@
-%p
+%p.d-flex
   = link_to('#', class: 'start_refresh d-none live-link-action btn-info') do
     %i.far.fa-play-circle
     Start refresh
@@ -30,3 +30,8 @@
               class: 'link_abort_build live-link-action btn-danger d-none') do
       %i.far.fa-times-circle
       Abort Build
+
+  = link_to('#', class: 'link_notifications live-link-action btn-secondary ml-auto text-capitalize',
+            title: 'Request permission for browser notifications') do
+    %i.far.fa-bell
+    Request Browser Notifications
diff --git a/src/api/app/views/webui/package/update_build_log.js.haml b/src/api/app/views/webui/package/update_build_log.js.haml
@@ -1,11 +1,14 @@
 - if @errors
   $('#flash').html("#{escape_javascript(render(partial: 'layouts/webui/flash', locals: { flash: { error: @errors } }))}");
   $("html, body").scrollTop(0);
+  liveLog.browserNotification('#{@status}');
   liveLog.finish("#{@status}");
 - else
   - if @finished
     - if @first_request
       $('#log-space').html('#{escape_javascript(@log_chunk)}');
+    - else
+      liveLog.browserNotification('#{@status}');
     liveLog.finish("#{@status}");
   - else
     $('#log-space').append('#{escape_javascript(@log_chunk)}');