1 files changed, 41 insertions, 1 deletions
diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
index 92ae8128285..d7e68484143 100644
--- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlButton, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { get } from 'lodash';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -11,6 +11,7 @@ export default {
   components: {
     GlAlert,
     GlAreaChart,
+    GlButton,
     GlDropdown,
     GlDropdownItem,
     GlSprintf,
@@ -20,6 +21,22 @@ export default {
       type: String,
       required: true,
     },
+    graphEndDate: {
+      type: String,
+      required: true,
+    },
+    graphStartDate: {
+      type: String,
+      required: true,
+    },
+    graphRef: {
+      type: String,
+      required: true,
+    },
+    graphCsvPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -119,6 +136,28 @@ export default {
 
 <template>
   <div>
+    <div
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-t gl-pt-4 gl-mb-3"
+    >
+      <h4 class="gl-m-0" sub-header>
+        <gl-sprintf
+          :message="__('Code coverage statistics for %{ref} %{start_date} - %{end_date}')"
+        >
+          <template #ref>
+            <strong> {{ graphRef }} </strong>
+          </template>
+          <template #start_date>
+            <strong> {{ graphStartDate }} </strong>
+          </template>
+          <template #end_date>
+            <strong> {{ graphEndDate }} </strong>
+          </template>
+        </gl-sprintf>
+      </h4>
+      <gl-button v-if="canShowData" size="small" data-testid="download-button" :href="graphCsvPath">
+        {{ __('Download raw data (.csv)') }}
+      </gl-button>
+    </div>
     <div class="gl-mt-3 gl-mb-3">
       <gl-alert
         v-if="hasFetchError"
@@ -155,6 +194,7 @@ export default {
       :data="chartData"
       :option="chartOptions"
       :format-tooltip-text="formatTooltipText"
+      responsive
     >
       <template v-if="canShowData" #tooltip-title>
         {{ tooltipTitle }}