feat: SLA reports view (#9189)

* feat: SLA report table


* feat: Add SLA popover card

* feat: Update popover position

* feat: Add loader

* Update SLACardLabel.vue

* feat: Update column order

* chore: fix conditions

* Update SLATable.vue

* chore: enable reports in ui

* chore: Revamp report SLA apis

* chore: revert download method

* chore: improve the code

* Update enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

* chore: style fixes

* chore: fix specs

* feat: Add number of conversations

* chore: review comments

* fix: translation

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

* Update SLAReportItem.vue

* Update report.json

* Update package.json

* chore: review comments

* chore: remove unused translation

* feat: Add TableHeaderCell component

* chore: more review fixes

* Update app/javascript/dashboard/components/widgets/TableHeaderCell.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* Update TableHeaderCell.vue

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

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

@@ -5,7 +5,8 @@ import SLAReportsAPI from '../../api/slaReports';
 export const state = {
   records: [],
   metrics: {
-    numberOfSLABreaches: 0,
+    numberOfConversations: 0,
+    numberOfSLAMisses: 0,
     hitRate: '0%',
   },
   uiFlags: {
@@ -72,19 +73,21 @@ export const mutations = {
   [types.SET_SLA_REPORTS]: MutationHelpers.set,
   [types.SET_SLA_REPORTS_METRICS](
     _state,
-    { number_of_sla_breaches: numberOfSLABreaches, hit_rate: hitRate }
+    {
+      number_of_sla_misses: numberOfSLAMisses,
+      hit_rate: hitRate,
+      total_applied_slas: numberOfConversations,
+    }
   ) {
     _state.metrics = {
-      numberOfSLABreaches,
+      numberOfSLAMisses,
       hitRate,
+      numberOfConversations,
     };
   },
-  [types.SET_SLA_REPORTS_META](
-    _state,
-    { total_applied_slas: totalAppliedSLAs, current_page: currentPage }
-  ) {
+  [types.SET_SLA_REPORTS_META](_state, { count, current_page: currentPage }) {
     _state.meta = {
-      count: totalAppliedSLAs,
+      count,
       currentPage,
     };
   },

app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js

@@ -21,4 +21,33 @@ describe('#getters', () => {
       isFetchingMetrics: false,
     });
   });
+
+  it('getMeta', () => {
+    const state = {
+      meta: {
+        count: 0,
+        currentPage: 1,
+      },
+    };
+    expect(getters.getMeta(state)).toEqual({
+      count: 0,
+      currentPage: 1,
+    });
+  });
+
+  it('getMetrics', () => {
+    const state = {
+      metrics: {
+        numberOfConversations: 27,
+        numberOfSLAMisses: 25,
+        hitRate: '7.41%',
+      },
+    };
+
+    expect(getters.getMetrics(state)).toEqual({
+      numberOfConversations: 27,
+      numberOfSLAMisses: 25,
+      hitRate: '7.41%',
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js

@@ -23,12 +23,14 @@ describe('#mutations', () => {
     it('set metrics', () => {
       const state = { metrics: {} };
       mutations[types.SET_SLA_REPORTS_METRICS](state, {
-        number_of_sla_breaches: 1,
+        number_of_sla_misses: 1,
         hit_rate: '100%',
+        total_applied_slas: 1,
       });
       expect(state.metrics).toEqual({
-        numberOfSLABreaches: 1,
+        numberOfSLAMisses: 1,
         hitRate: '100%',
+        numberOfConversations: 1,
       });
     });
   });
@@ -37,7 +39,7 @@ describe('#mutations', () => {
     it('set meta', () => {
       const state = { meta: {} };
       mutations[types.SET_SLA_REPORTS_META](state, {
-        total_applied_slas: 1,
+        count: 1,
         current_page: 1,
       });
       expect(state.meta).toEqual({