feat: Download SLA reports (#9201)

app/javascript/dashboard/i18n/locale/en/report.json

@@ -510,6 +510,8 @@
     "HEADER": "SLA Reports",
     "NO_RECORDS": "SLA applied conversations are not available.",
     "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",

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>

app/javascript/dashboard/store/modules/SLAReports.js

@@ -1,7 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import SLAReportsAPI from '../../api/slaReports';
-
+import { downloadCsvFile } from 'dashboard/helper/downloadHelper';
 export const state = {
   records: [],
   metrics: {
@@ -60,6 +60,11 @@ export const actions = {
       commit(types.SET_SLA_REPORTS_UI_FLAG, { isFetchingMetrics: false });
     }
   },
+  download(_, params) {
+    return SLAReportsAPI.download(params).then(response => {
+      downloadCsvFile(params.fileName, response.data);
+    });
+  },
 };
 
 export const mutations = {