1 files changed, 23 insertions, 1 deletions
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index 4e0631740d8..5e9a5b03543 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -1,8 +1,15 @@
 <script>
 import { mapActions } from 'vuex';
+import { GlBadge } from '@gitlab/ui';
+import { n__ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'TestIssueBody',
+  components: {
+    GlBadge,
+  },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     issue: {
       type: Object,
@@ -19,8 +26,20 @@ export default {
       default: false,
     },
   },
+  computed: {
+    showRecentFailures() {
+      return this.glFeatures.testFailureHistory && this.issue.recent_failures;
+    },
+  },
   methods: {
     ...mapActions(['openModal']),
+    recentFailuresText(count) {
+      return n__(
+        'Failed %d time in the last 14 days',
+        'Failed %d times in the last 14 days',
+        count,
+      );
+    },
   },
 };
 </script>
@@ -32,7 +51,10 @@ export default {
         class="btn-link btn-blank text-left break-link vulnerability-name-button"
         @click="openModal({ issue })"
       >
-        <div v-if="isNew" class="badge badge-danger gl-mr-2">{{ s__('New') }}</div>
+        <gl-badge v-if="isNew" variant="danger" class="gl-mr-2">{{ s__('New') }}</gl-badge>
+        <gl-badge v-if="showRecentFailures" variant="warning" class="gl-mr-2">
+          {{ recentFailuresText(issue.recent_failures) }}
+        </gl-badge>
         {{ issue.name }}
       </button>
     </div>