Expose failure reason in pipeline error badge

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -73,6 +73,13 @@
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
+      <span
+        v-if="pipeline.flags.failure_reason"
+        v-tooltip
+        class="js-pipeline-url-failure label label-danger"
+        :title="pipeline.failure_reason">
+        error
+      </span>
       <a
         v-if="pipeline.flags.auto_devops"
         class="js-pipeline-url-autodevops label label-info autodevops-badge"

app/serializers/pipeline_entity.rb

@@ -20,6 +20,7 @@ class PipelineEntity < Grape::Entity
     expose :has_yaml_errors?, as: :yaml_errors
     expose :can_retry?, as: :retryable
     expose :can_cancel?, as: :cancelable
+    expose :failure_reason?, as: :failure_reason
   end
 
   expose :details do
@@ -45,7 +46,10 @@ class PipelineEntity < Grape::Entity
 
   expose :commit, using: CommitEntity
   expose :yaml_errors, if: -> (pipeline, _) { pipeline.has_yaml_errors? }
-  expose :failure_reason, if: -> (pipeline, _) { pipeline.failure_reason? }
+
+  expose :failure_reason, if: -> (pipeline, _) { pipeline.failure_reason? } do |pipeline|
+    pipeline.present.failure_reason
+  end
 
   expose :retry_path, if: -> (*) { can_retry? }  do |pipeline|
     retry_project_pipeline_path(pipeline.project, pipeline)