feat: Add reports about live agent load (#4537)

* feat: Add reports about live agent load

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

@@ -3,6 +3,7 @@
 /* eslint no-shadow: 0 */
 import * as types from '../mutation-types';
 import Report from '../../api/reports';
+import Vue from 'vue';
 
 import { downloadCsvFile } from '../../helper/downloadCsvFile';
 
@@ -22,6 +23,14 @@ const state = {
     resolutions_count: 0,
     previous: {},
   },
+  overview: {
+    uiFlags: {
+      isFetchingAccountConversationMetric: false,
+      isFetchingAgentConversationMetric: false,
+    },
+    accountConversationMetric: {},
+    agentConversationMetric: [],
+  },
 };
 
 const getters = {
@@ -31,6 +40,15 @@ const getters = {
   getAccountSummary(_state) {
     return _state.accountSummary;
   },
+  getAccountConversationMetric(_state) {
+    return _state.overview.accountConversationMetric;
+  },
+  getAgentConversationMetric(_state) {
+    return _state.overview.agentConversationMetric;
+  },
+  getOverviewUIFlags($state) {
+    return $state.overview.uiFlags;
+  },
 };
 
 export const actions = {
@@ -70,6 +88,37 @@ export const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
+  fetchAccountConversationMetric({ commit }, reportObj) {
+    commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, true);
+    Report.getConversationMetric(reportObj.type)
+      .then(accountConversationMetric => {
+        commit(
+          types.default.SET_ACCOUNT_CONVERSATION_METRIC,
+          accountConversationMetric.data
+        );
+        commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
+      })
+      .catch(() => {
+        commit(types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING, false);
+      });
+  },
+  fetchAgentConversationMetric({ commit }, reportObj) {
+    commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, true);
+    Report.getConversationMetric(reportObj.type, reportObj.page)
+      .then(agentConversationMetric => {
+        commit(
+          types.default.SET_AGENT_CONVERSATION_METRIC,
+          agentConversationMetric.data
+        );
+        commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
+      })
+      .catch(() => {
+        commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
+      });
+  },
+  updateReportAgentStatus({ commit }, data) {
+    commit(types.default.UPDATE_REPORT_AGENTS_STATUS, data);
+  },
   downloadAgentReports(_, reportObj) {
     return Report.getAgentReports(reportObj.from, reportObj.to)
       .then(response => {
@@ -118,6 +167,28 @@ const mutations = {
   [types.default.SET_ACCOUNT_SUMMARY](_state, summaryData) {
     _state.accountSummary = summaryData;
   },
+  [types.default.SET_ACCOUNT_CONVERSATION_METRIC](_state, metricData) {
+    _state.overview.accountConversationMetric = metricData;
+  },
+  [types.default.TOGGLE_ACCOUNT_CONVERSATION_METRIC_LOADING](_state, flag) {
+    _state.overview.uiFlags.isFetchingAccountConversationMetric = flag;
+  },
+  [types.default.SET_AGENT_CONVERSATION_METRIC](_state, metricData) {
+    _state.overview.agentConversationMetric = metricData;
+  },
+  [types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING](_state, flag) {
+    _state.overview.uiFlags.isFetchingAgentConversationMetric = flag;
+  },
+  [types.default.UPDATE_REPORT_AGENTS_STATUS](_state, data) {
+    _state.overview.agentConversationMetric.forEach((element, index) => {
+      const availabilityStatus = data[element.id];
+      Vue.set(
+        _state.overview.agentConversationMetric[index],
+        'availability',
+        availabilityStatus || 'offline'
+      );
+    });
+  },
 };
 
 export default {