Adds notifications API to MR page.

When a build status changes a notification will popup.
Fixes #10851

app/assets/javascripts/lib/notify.js.coffee

+# Written by Jacob Schatz @jakecodes
+
+((w) ->
+  notifyMe = (message,body) ->
+    notification = undefined
+    opts = 
+      body: body
+      icon: "#{document.location.origin}/assets/gitlab_logo.png"
+    # Let's check if the browser supports notifications
+    if !('Notification' of window)
+      # do nothing
+    else if Notification.permission == 'granted'
+      # If it's okay let's create a notification
+      notification = new Notification(message, opts)
+    else if Notification.permission != 'denied'
+      Notification.requestPermission (permission) ->
+        # If the user accepts, let's create a notification
+        if permission == 'granted'
+          notification = new Notification(message, opts)
+        return
+    return
+
+  w.notify = notifyMe
+  return
+) window
+
+Notification.requestPermission()
\ No newline at end of file

app/assets/javascripts/merge_request_widget.js.coffee

@@ -10,6 +10,8 @@ class @MergeRequestWidget
   constructor: (@opts) ->
     modal = $('#modal_merge_info').modal(show: false)
     @getBuildStatus()
+    # clear the build poller
+    $(document).on 'page:fetch', (e) => clearInterval(@fetchBuildStatusInterval)
 
   mergeInProgress: (deleteSourceBranch = false)->
     $.ajax
@@ -31,12 +33,43 @@ class @MergeRequestWidget
     $.get @opts.url_to_automerge_check, (data) ->
       $('.mr-state-widget').replaceWith(data)
 
+  ciIconForStatus: (status) ->
+    icon = undefined
+    switch status
+      when 'success'
+        icon = 'check'
+      when 'failed'
+        icon = 'close'
+      when 'running' or 'pending'
+        icon = 'clock-o'
+      else
+        icon = 'circle'
+    'fa fa-' + icon + ' fa-fw'
+
+  ciLabelForStatus: (status) ->
+    if status == 'success'
+      'passed'
+    else
+      status
+
   getBuildStatus: ->
     urlToCiCheck = @opts.url_to_ci_check
-    console.log('checking')
-    setInterval (->
+    _this = @
+    @fetchBuildStatusInterval = setInterval (->
       $.getJSON urlToCiCheck, (data) ->
-        console.log("data",data);
+        if data.status isnt _this.opts.current_status
+          notify("Build #{_this.ciLabelForStatus(data.status)}",
+            _this.opts.ci_message.replace('{{status}}',
+              _this.ciLabelForStatus(data.status)));
+          _this.opts.current_status = data.status
+          $('.mr-widget-heading i')
+            .removeClass()
+            .addClass(_this.ciIconForStatus(data.status));
+          $('.mr-widget-heading .ci_widget')
+            .removeClass()
+            .addClass("ci_widget ci-#{data.status}");
+          $('.mr-widget-heading span.ci-status-label')
+            .text(_this.ciLabelForStatus(data.status))
         return
       return
     ), 5000

app/controllers/projects/merge_requests_controller.rb

@@ -218,28 +218,26 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
-  def st
-    @ci_commit = @merge_request.ci_commit
-    @statuses = @ci_commit.statuses if @ci_commit
-    render json: {
-      statuses: @statuses
-    }
-  end
-
   def ci_status
+    ci_commit = @merge_request.ci_commit
+    if ci_commit
+      status = ci_commit.try(:status)
+      coverage = ci_commit.try(:coverage)
+    else
       ci_service = @merge_request.source_project.ci_service
-    status = ci_service.commit_status(merge_request.last_commit.sha, merge_request.source_branch)
+      status = ci_service.commit_status(merge_request.last_commit.sha, merge_request.source_branch) if ci_service
 
       if ci_service.respond_to?(:commit_coverage)
         coverage = ci_service.commit_coverage(merge_request.last_commit.sha, merge_request.source_branch)
       end
+    end
 
     response = {
-      status: status,
-      coverage: coverage
+      status: status || :not_found,
+      coverage: coverage || :not_found
     }
 
-    render json: response
+    render json: response, status: 200
   end
 
   protected

app/views/projects/merge_requests/widget/_heading.html.haml

@@ -4,6 +4,7 @@
       = ci_status_icon(@ci_commit)
       %span
         Build
+        %span.ci-status-label
           = ci_status_label(@ci_commit)
       for
       = succeed "." do

app/views/projects/merge_requests/widget/_show.html.haml

@@ -9,13 +9,21 @@
 
 :javascript
   var merge_request_widget;
-
-  merge_request_widget = new MergeRequestWidget({
+  var opts = {
     url_to_automerge_check: "#{merge_check_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
     check_enable: #{@merge_request.unchecked? ? "true" : "false"},
-    url_to_ci_check: "#{st_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
-    ci_enable: #{@project.ci_service ? "true" : "false"},
-    current_status: "#{@merge_request.gitlab_merge_status}"
-  });
-  var cici = "#{@project}"
+    url_to_ci_check: "#{ci_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
+    ci_enable: #{@project.ci_service ? "true" : "false"}
+  };
+
+- if @merge_request.ci_commit
+  :javascript
+    opts.current_status = "#{@merge_request.ci_commit.try(:status)}";
+    opts.ci_message = "Build {{status}} for #{@merge_request.ci_commit.sha}";
+- else
+  :javascript
+    opts.current_status = "#{@merge_request.source_project.ci_service.commit_status(@merge_request.last_commit.sha, merge_request.source_branch) if @merge_request.source_project.ci_service}";
+    opts.ci_message = "Build {{status}} for #{@merge_request.last_commit.sha}";
 
+:javascript
+  merge_request_widget = new MergeRequestWidget(opts);
\ No newline at end of file

config/routes.rb

@@ -620,7 +620,6 @@ Rails.application.routes.draw do
             post :merge
             post :cancel_merge_when_build_succeeds
             get :ci_status
-            get :st
             post :toggle_subscription
           end