add tooltip on badge in pipelines index

app/assets/javascripts/vue_pipelines_index/components/status.js

@@ -36,7 +36,7 @@ export default {
 
   computed: {
     cssClasses() {
-      return `ci-status ci-${this.pipeline.details.status.group}`;
+      return `ci-status ci-${this.pipeline.details.status.group} has-tooltip`;
     },
 
     detailsPath() {
@@ -47,12 +47,17 @@ export default {
     content() {
       return `${this.svg} ${this.pipeline.details.status.text}`;
     },
+
+    tooltipTitle() {
+      return this.pipeline.details.status_tooltip;
+    }
   },
   template: `
     <td class="commit-link">
       <a
         :class="cssClasses"
         :href="detailsPath"
+        :title="tooltipTitle"
         v-html="content">
       </a>
     </td>

app/serializers/pipeline_entity.rb

@@ -13,6 +13,7 @@ class PipelineEntity < Grape::Entity
 
   expose :details do
     expose :detailed_status, as: :status, with: StatusEntity
+    expose :status_tooltip
     expose :duration
     expose :finished_at
     expose :stages, using: StageEntity
@@ -81,4 +82,8 @@ class PipelineEntity < Grape::Entity
   def detailed_status
     pipeline.detailed_status(request.user)
   end
+
+  def status_tooltip
+    "This pipeline is redundant as a newer pipeline exists (canceled by ##{pipeline.auto_canceled_by_id} pipeline)" if pipeline.auto_canceled_by_id? && pipeline.canceled?
+  end
 end