Introduce browser notifications for live build logs

openSUSE · Mar 11, 2022 · 192f01b · 192f01b
1 parent 9f3a77b
commit 192f01b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
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') {
+      this.notificationsButton.click($.proxy(this.askNotificationPermission, this));
+    }
+    else {
+      this.notificationsButton.html(this.notificationsButton.html().replace('Request Browser Notifications', 'Browser Notifications ' + Notification.permission));
+      this.notificationsButton.addClass('disabled');
+    }
     this.start();
     this.initial = false;
     return this;
@@ -120,4 +128,33 @@ $.extend(LiveLog.prototype, {
     if (typeof source !== 'undefined')
       $("link[rel='shortcut icon']").attr("href", source);
   },
+
+  browserNotification: function(status) {
+    if (this.notificationSupport() && Notification.permission === "granted") {
+      var statusDetails = this.buildStatusDetails(status);
+      new Notification('OBS: ' + statusDetails.content,
+        { body: 'The status of your Open Build Service build is "' + statusDetails.indicator + '".', icon: statusDetails.favicon }
+      );
+    }
+  },
+
+  askNotificationPermission: function () { // jshint ignore:line
+    if (this.notificationSupport() && Notification.permission === 'default') {
+      Notification.requestPermission().then(function (permission) {
+        if (permission === 'granted' || permission === 'denied') {
+          liveLog.notificationsButton.html(liveLog.notificationsButton.html().replace('Request Browser Notifications', 'Browser Notifications ' + Notification.permission));
+          liveLog.notificationsButton.addClass('disabled');
+        }
+      });
+    }
+  },
+
+  notificationSupport: function () { // jshint ignore:line
+    if (!('Notification' in window)) {
+      console.log("This browser does not support notifications.");
+      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)}');