Re-write live-conversations API

app/javascript/dashboard/api/liveReports.js

@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric() {
+    return axios.get(`${this.url}/conversation_metrics`);
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();

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

@@ -62,7 +62,6 @@
           :agent-metrics="agentConversationMetric"
           :page-index="pageIndex"
           :is-loading="uiFlags.isFetchingAgentConversationMetric"
-          @page-change="onPageNumberChange"
         />
       </metric-card>
     </div>
@@ -132,8 +131,8 @@ export default {
   },
   methods: {
     fetchAllData() {
-      this.fetchAccountConversationMetric();
-      this.fetchAgentConversationMetric();
+      this.$store.dispatch('fetchLiveConversationMetric');
+      this.$store.dispatch('fetchAgentConversationMetric');
       this.fetchHeatmapData();
     },
     downloadHeatmapData() {
@@ -170,21 +169,6 @@ export default {
         businessHours: false,
       });
     },
-    fetchAccountConversationMetric() {
-      this.$store.dispatch('fetchAccountConversationMetric', {
-        type: 'account',
-      });
-    },
-    fetchAgentConversationMetric() {
-      this.$store.dispatch('fetchAgentConversationMetric', {
-        type: 'agent',
-        page: this.pageIndex,
-      });
-    },
-    onPageNumberChange(pageIndex) {
-      this.pageIndex = pageIndex;
-      this.fetchAgentConversationMetric();
-    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -12,17 +12,12 @@
         $t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.LOADING_MESSAGE')
       }}</span>
     </div>
-    <empty-state
-      v-else-if="!isLoading && !agentMetrics.length"
-      :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
-    />
-    <div v-if="agentMetrics.length > 0" class="table-pagination">
+    <div v-if="agents.length > 0" class="table-pagination">
       <ve-pagination
         :total="agents.length"
         :page-index="pageIndex"
         :page-size="25"
         :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
       />
     </div>
   </div>
@@ -31,14 +26,12 @@
 <script>
 import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   name: 'AgentTable',
   components: {
-    EmptyState,
     Spinner,
     VeTable,
     VePagination,
@@ -64,15 +57,15 @@ export default {
   },
   computed: {
     tableData() {
-      return this.agentMetrics.map(agent => {
-        const agentInformation = this.getAgentInformation(agent.id);
+      return this.agents.map(agent => {
+        const agentMetrics = this.getAgentMetrics(agent.id);
         return {
-          agent: agentInformation.name,
-          email: agentInformation.email,
-          thumbnail: agentInformation.thumbnail,
-          open: agent.metric.open || 0,
-          unattended: agent.metric.unattended || 0,
-          status: agentInformation.availability_status,
+          agent: agent.name,
+          email: agent.email,
+          thumbnail: agent.thumbnail,
+          open: agentMetrics.open || 0,
+          unattended: agentMetrics.unattended || 0,
+          status: agent.availability_status,
         };
       });
     },
@@ -126,11 +119,11 @@ export default {
     },
   },
   methods: {
-    onPageNumberChange(pageIndex) {
-      this.$emit('page-change', pageIndex);
-    },
-    getAgentInformation(id) {
-      return this.agents.find(agent => agent.id === Number(id));
+    getAgentMetrics(id) {
+      return (
+        this.agentMetrics.find(metrics => metrics.assignee_id === Number(id)) ||
+        {}
+      );
     },
   },
 };
@@ -170,6 +163,7 @@ export default {
       .title {
         @apply text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100;
       }
+
       .sub-title {
         @apply text-xs text-slate-600 dark:text-slate-200;
       }

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

@@ -8,6 +8,7 @@ import {
   reconcileHeatmapData,
   clampDataBetweenTimeline,
 } from 'shared/helpers/ReportsDataHelper';
+import liveReports from '../../api/liveReports';
 
 const state = {
   fetchingStatus: false,
@@ -125,9 +126,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
-  fetchAccountConversationMetric({ commit }, reportObj) {
+  fetchLiveConversationMetric({ commit }) {
     commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type)
+    liveReports
+      .getConversationMetric()
       .then(accountConversationMetric => {
         commit(
           types.default.SET_ACCOUNT_CONVERSATION_METRIC,
@@ -139,9 +141,10 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
       });
   },
-  fetchAgentConversationMetric({ commit }, reportObj) {
+  fetchAgentConversationMetric({ commit }) {
     commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, true);
-    Report.getConversationMetric(reportObj.type, reportObj.page)
+    liveReports
+      .getGroupedConversations()
       .then(agentConversationMetric => {
         commit(
           types.default.SET_AGENT_CONVERSATION_METRIC,