Updated based on feedback

app/assets/javascripts/merge_request_widget.js.coffee

@@ -8,10 +8,11 @@ class @MergeRequestWidget
 
   constructor: (@opts) ->
     @firstCICheck = true
-    @getCIStatus()
-    notifyPermissions()
     @readyForCICheck = true
-    # clear the build poller
+    clearInterval @fetchBuildStatusInterval
+
+    @pollCIStatus()
+    notifyPermissions()
 
   mergeInProgress: (deleteSourceBranch = false)->
     $.ajax
@@ -39,23 +40,32 @@ class @MergeRequestWidget
     else
       status
 
-  getCIStatus: ->
-    _this = @
+  pollCIStatus: ->
     @fetchBuildStatusInterval = setInterval ( =>
       return if not @readyForCICheck
 
-      $.getJSON @opts.ci_status_url, (data) =>
-        @readyForCICheck = true
+      @getCIStatus(true)
+
+      @readyForCICheck = false
+    ), 5000
+
+  getCIStatus: (showNotification) ->
+    _this = @
+    $('.ci-widget-fetching').show()
+
+    $.getJSON @opts.ci_status_url, (data) =>
+      @readyForCICheck = true
 
-        if @firstCICheck
-          @firstCICheck = false
-          @opts.ci_status = data.status
+      if @firstCICheck
+        @firstCICheck = false
+        @opts.ci_status = data.status
 
-        if data.status isnt @opts.ci_status
-          @showCIState data.status
-          if data.coverage
-            @showCICoverage data.coverage
+      if data.status isnt @opts.ci_status
+        @showCIStatus data.status
+        if data.coverage
+          @showCICoverage data.coverage
 
+        if showNotification
           message = @opts.ci_message.replace('{{status}}', @ciLabelForStatus(data.status))
           message = message.replace('{{sha}}', data.sha)
           message = message.replace('{{title}}', data.title)
@@ -69,19 +79,9 @@ class @MergeRequestWidget
               Turbolinks.visit _this.opts.builds_path
           )
 
-          @opts.ci_status = data.status
-
-      @readyForCICheck = false
-    ), 5000
-
-  getCIState: ->
-    $('.ci-widget-fetching').show()
-    $.getJSON @opts.ci_status_url, (data) =>
-      @showCIState data.status
-      if data.coverage
-        @showCICoverage data.coverage
+        @opts.ci_status = data.status
 
-  showCIState: (state) ->
+  showCIStatus: (state) ->
     $('.ci_widget').hide()
     allowed_states = ["failed", "canceled", "running", "pending", "success", "skipped", "not_found"]
     if state in allowed_states

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

-- if @ci_commit or @merge_request.has_ci?
+- if @ci_commit
   .mr-widget-heading
-    - if @merge_request.has_ci?
-      .ci_widget.ci-widget-fetching
-        = icon('spinner spin')
+    - %w[success skipped canceled failed running pending].each do |status|
+      .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @ci_commit.status == status) }
+        = ci_icon_for_status(status)
         %span
-          Checking CI status for #{@merge_request.last_commit_short_sha}…
+          CI build
+          = ci_label_for_status(status)
+        for
+        - commit = @merge_request.last_commit
+        = succeed "." do
+          = link_to @ci_commit.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @ci_commit.sha), class: "monospace"
+        %span.ci-coverage
+        = link_to "View details", builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "js-show-tab", data: {action: 'builds'}
+
+- elsif @merge_request.has_ci?
+  - # Compatibility with old CI integrations (ex jenkins) when you request status from CI server via AJAX
+  - # Remove in later versions when services like Jenkins will set CI status via Commit status API
+  .mr-widget-heading
     - %w[success skipped canceled failed running pending].each do |status|
-      .ci_widget{ class: "ci-#{status}", style: ("display:none" unless status == @ci_commit.status) }
+      .ci_widget{class: "ci-#{status}", style: "display:none"}
         = ci_icon_for_status(status)
         %span
           CI build
@@ -16,20 +28,22 @@
         = succeed "." do
           = link_to commit.short_id, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, commit), class: "monospace"
         %span.ci-coverage
-        - if details_path = builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+        - if details_path = ci_build_details_path(@merge_request)
           = link_to "View details", details_path, :"data-no-turbolink" => "data-no-turbolink"
-    - if @merge_request.has_ci?
-      - # Compatibility with old CI integrations (ex jenkins) when you request status from CI server via AJAX
-      - # Remove in later versions when services like Jenkins will set CI status via Commit status API
-      .ci_widget.ci-not_found{style: "display:none"}
-        = icon("times-circle")
-        Could not find CI status for #{@merge_request.last_commit_short_sha}.
 
-      .ci_widget.ci-error{style: "display:none"}
-        = icon("times-circle")
-        Could not connect to the CI server. Please check your settings and try again.
+    .ci_widget
+      = icon("spinner spin")
+      Checking CI status for #{@merge_request.last_commit_short_sha}…
+
+    .ci_widget.ci-not_found{style: "display:none"}
+      = icon("times-circle")
+      Could not find CI status for #{@merge_request.last_commit_short_sha}.
+
+    .ci_widget.ci-error{style: "display:none"}
+      = icon("times-circle")
+      Could not connect to the CI server. Please check your settings and try again.
 
-      :javascript
-        $(function() {
-          merge_request_widget.getCIState();
-        });
+  :javascript
+    $(function() {
+      merge_request_widget.getCIStatus(false);
+    });