Displays descriptive tooltip

This is implemented on:
- job lists on Pipeline detail view
- global job list view.
- Merge request widget
- Commit widget
- Jobs sidebar
- Pipeline list

Frontend is needed to make the br tag actually work

9 files changed, 90 insertions, 17 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 9b136573135..1a42d86d71a 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -72,9 +72,12 @@
         if (this.job.name && this.status.label) {
           textBuilder.push('-');
         }
-
         if (this.status.label) {
-          textBuilder.push(`${this.job.status.label}`);
+          if (this.status.label === 'failed' && this.status.failure_reason) {
+            textBuilder.push(`${this.job.status.failure_reason}`);
+          } else {
+            textBuilder.push(`${this.job.status.label}`);
+          }
         }
 
         return textBuilder.join(' ');
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index 636316da80a..99808c8cbc2 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -144,4 +144,12 @@ module CiStatusHelper
       status.respond_to?(:label) &&
       status.respond_to?(:icon)
   end
+
+  def tooltip_for_badge(build, status_label)
+    if build.failed?
+      build.present(current_user: current_user).graph_tooltip_description
+    else
+      "#{build.name} - #{status_label}"
+    end
+  end
 end
diff --git a/app/presenters/ci/build_presenter.rb b/app/presenters/ci/build_presenter.rb
index 655cb817a80..39fb3131437 100644
--- a/app/presenters/ci/build_presenter.rb
+++ b/app/presenters/ci/build_presenter.rb
@@ -15,6 +15,8 @@ module Ci
     def status_title
       if auto_canceled?
         "Job is redundant and is auto-canceled by Pipeline ##{auto_canceled_by_id}"
+      else
+        tooltip_description
       end
     end
 
@@ -29,20 +31,36 @@ module Ci
         end
     end
 
+    def tooltip_description
+      if failed_or_allowed_to_failed? && failure_reason
+        failure_reason_description
+      else
+        status.titleize
+      end
+    end
+
+    def graph_tooltip_description
+      "#{name} - #{failure_reason_description}"
+    end
+
     def failure_reason_description
-      failure_descriptions[failure_reason]
+      "Failed <br> #{failure_descriptions[failure_reason]}"
     end
 
     private
 
+    def failed_or_allowed_to_failed?
+      failed? || allow_failure?
+    end
+
     def failure_descriptions
       {
-        "unknown_failure" => "Unknown failure",
-        "script_failure" => "Script failure",
-        "api_failure" => "API failure",
-        "stuck_or_timeout_failure" => "Stuck or timeout failure",
-        "runner_system_failure" => "Runner system failure",
-        "missing_dependency_failure" => "Missing dependency failure"
+        'unknown_failure' => 'Unknown failure',
+        'script_failure' => 'Script failure',
+        'api_failure' => 'API failure',
+        'stuck_or_timeout_failure' => 'Stuck or timeout failure',
+        'runner_system_failure' => 'Runner system failure',
+        'missing_dependency_failure' => 'Missing dependency failure'
       }
     end
   end
diff --git a/app/serializers/job_group_entity.rb b/app/serializers/job_group_entity.rb
index 8554de55517..157a59edc6c 100644
--- a/app/serializers/job_group_entity.rb
+++ b/app/serializers/job_group_entity.rb
@@ -3,7 +3,10 @@ class JobGroupEntity < Grape::Entity
 
   expose :name
   expose :size
-  expose :detailed_status, as: :status, with: StatusEntity
+  expose :status do
+    expose :failure_reason
+    expose :detailed_status, merge: true, with: StatusEntity
+  end
   expose :jobs, with: JobEntity
 
   private
@@ -13,4 +16,12 @@ class JobGroupEntity < Grape::Entity
   def detailed_status
     group.detailed_status(request.current_user)
   end
+
+  def failure_reason
+    failure_reason_description if group.jobs.one?
+  end
+
+  def failure_reason_description
+    Ci::BuildPresenter.new(group.jobs.first).failure_reason_description
+  end
 end
diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml
index c5b4439e273..2c3a21ffe75 100644
--- a/app/views/ci/status/_dropdown_graph_badge.html.haml
+++ b/app/views/ci/status/_dropdown_graph_badge.html.haml
@@ -3,7 +3,7 @@
 - subject = local_assigns.fetch(:subject)
 - status = subject.detailed_status(current_user)
 - klass = "ci-status-icon ci-status-icon-#{status.group}"
-- tooltip = "#{subject.name} - #{status.label}"
+- tooltip = tooltip_for_badge(subject, status.label)
 
 - if status.has_details?
   = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
diff --git a/app/views/projects/jobs/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml
index e779473c239..7b091a950c8 100644
--- a/app/views/projects/jobs/_sidebar.html.haml
+++ b/app/views/projects/jobs/_sidebar.html.haml
@@ -93,7 +93,7 @@
           .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
             = link_to project_job_path(@project, build) do
               = sprite_icon('arrow-right', size:16, css_class: 'icon-arrow-right')
-              %span{ class: "ci-status-icon-#{build.status}" }
+              %span{ class: "ci-status-icon-#{build.status}", data: { toggle: 'tooltip', title: tooltip_for_badge(build, build.detailed_status(current_user)), container: 'body' } }
                 = ci_icon_for_status(build.status)
               %span
                 - if build.name
diff --git a/changelogs/unreleased/44269-show-failure-reason-on-upgrade-tooltip-of-jobs.yml b/changelogs/unreleased/44269-show-failure-reason-on-upgrade-tooltip-of-jobs.yml
new file mode 100644
index 00000000000..b3ae8ca7340
--- /dev/null
+++ b/changelogs/unreleased/44269-show-failure-reason-on-upgrade-tooltip-of-jobs.yml
@@ -0,0 +1,5 @@
+---
+title: Display error message on job's tooltip if this one fails
+merge_request: 17782
+author:
+type: added
diff --git a/spec/factories/ci/builds.rb b/spec/factories/ci/builds.rb
index f6ba3a581ca..8e552aad25b 100644
--- a/spec/factories/ci/builds.rb
+++ b/spec/factories/ci/builds.rb
@@ -237,5 +237,9 @@ FactoryBot.define do
     trait :protected do
       protected true
     end
+
+    trait :script_failure do
+      failure_reason 1
+    end
   end
 end
diff --git a/spec/presenters/ci/build_presenter_spec.rb b/spec/presenters/ci/build_presenter_spec.rb
index 1a8001be6ab..faeae3581ba 100644
--- a/spec/presenters/ci/build_presenter_spec.rb
+++ b/spec/presenters/ci/build_presenter_spec.rb
@@ -72,13 +72,25 @@ describe Ci::BuildPresenter do
       end
     end
 
-    context 'when build is not auto-canceled' do
-      before do
-        expect(build).to receive(:auto_canceled?).and_return(false)
+    context 'when build has a failure' do
+      let(:build) { create(:ci_build, :failed, pipeline: pipeline) }
+
+      it 'returns the reason of failure' do
+        status_title = presenter.status_title
+
+        expect(status_title).to include('Failed')
+        expect(status_title).to include('Unknown failure')
       end
+    end
+
+    context 'when build is allowed to failed' do
+      let(:build) { create(:ci_build, :allowed_to_fail, :script_failure, pipeline: pipeline) }
 
-      it 'does not have a status title' do
-        expect(presenter.status_title).to be_nil
+      it 'returns the reason of failure' do
+        status_title = presenter.status_title
+
+        expect(status_title).to include('Failed')
+        expect(status_title).to include('Script failure')
       end
     end
   end
@@ -134,4 +146,16 @@ describe Ci::BuildPresenter do
       end
     end
   end
+
+  describe '#graph_tooltip_descriptoin' do
+    let(:build) { create(:ci_build, :failed, :script_failure, pipeline: pipeline) }
+
+    it 'returns the reason of failure' do
+      graph_tooltip_description = subject.graph_tooltip_description
+
+      expect(graph_tooltip_description).to include(build.name)
+      expect(graph_tooltip_description).to include('Failed')
+      expect(graph_tooltip_description).to include('Script failure')
+    end
+  end
 end