feat: Download SLA reports (#9201)

app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="flex flex-col flex-1 px-4 pt-4 overflow-auto">
     <SLAReportFilters @filter-change="onFilterChange" />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
+    </woot-button>
     <div class="flex flex-col gap-6">
       <SLAMetrics
         :hit-rate="slaMetrics.hitRate"
@@ -22,8 +30,9 @@
 import { mapGetters } from 'vuex';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
-
+import { generateFileName } from 'dashboard/helper/downloadHelper';
 export default {
   name: 'SLAReports',
   components: {
@@ -31,6 +40,7 @@ export default {
     SLATable,
     SLAReportFilters,
   },
+  mixins: [alertMixin],
   data() {
     return {
       pageNumber: 1,
@@ -73,6 +83,17 @@ export default {
       this.fetchSLAReports();
       this.fetchSLAMetrics();
     },
+    downloadReports() {
+      const type = 'sla';
+      try {
+        this.$store.dispatch('slaReports/download', {
+          fileName: generateFileName({ type, to: this.to }),
+          ...this.requestPayload,
+        });
+      } catch (error) {
+        this.showAlert(this.$t('SLA_REPORTS.DOWNLOAD_FAILED'));
+      }
+    },
   },
 };
 </script>