1 files changed, 36 insertions, 4 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
index 504cf138d07..2edc84e62cb 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
@@ -1,12 +1,13 @@
 <script>
-import { GlModal } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlBadge, GlModal } from '@gitlab/ui';
+import { __, n__, sprintf } from '~/locale';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
 
 export default {
   name: 'TestCaseDetails',
   components: {
     CodeBlock,
+    GlBadge,
     GlModal,
   },
   props: {
@@ -17,13 +18,37 @@ export default {
     testCase: {
       type: Object,
       required: true,
-      validator: ({ classname, formattedTime, name }) =>
-        Boolean(classname) && Boolean(formattedTime) && Boolean(name),
+    },
+  },
+  computed: {
+    failureHistoryMessage() {
+      if (!this.hasRecentFailures) {
+        return null;
+      }
+
+      return sprintf(
+        n__(
+          'Reports|Failed %{count} time in %{baseBranch} in the last 14 days',
+          'Reports|Failed %{count} times in %{baseBranch} in the last 14 days',
+          this.recentFailures.count,
+        ),
+        {
+          count: this.recentFailures.count,
+          baseBranch: this.recentFailures.base_branch,
+        },
+      );
+    },
+    hasRecentFailures() {
+      return Boolean(this.recentFailures);
+    },
+    recentFailures() {
+      return this.testCase.recent_failures;
     },
   },
   text: {
     name: __('Name'),
     duration: __('Execution time'),
+    history: __('History'),
     trace: __('System output'),
   },
   modalCloseButton: {
@@ -53,6 +78,13 @@ export default {
       </div>
     </div>
 
+    <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
+      <strong class="gl-text-right col-sm-3">{{ $options.text.history }}</strong>
+      <div class="col-sm-9" data-testid="test-case-recent-failures">
+        <gl-badge variant="warning">{{ failureHistoryMessage }}</gl-badge>
+      </div>
+    </div>
+
     <div
       v-if="testCase.system_output"
       class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"