fix: Remove Report API calls from being called on every event (#10691)

Previously, the Reports API fetched data based on event triggers. For
example, when an event occurred on an account, the system would
automatically retrieve and display updated information. However, this
approach was designed under the assumption that reports would be
accessed by a small number of users and on an infrequent basis (e.g.,
once daily or weekly).

In scenarios where large customers have multiple team members actively
monitoring reports, this event-driven approach led to an excessive
number of requests, significantly straining the system.

This PR introduces a interval-based fetching of reports instead of the
event-driven model.

app/javascript/dashboard/helper/actionCable.js

@@ -27,7 +27,6 @@ class ActionCableConnector extends BaseActionCableConnector {
       'notification.created': this.onNotificationCreated,
       'notification.deleted': this.onNotificationDeleted,
       'notification.updated': this.onNotificationUpdated,
-      'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
       'account.cache_invalidated': this.onCacheInvalidate,
@@ -160,7 +159,6 @@ class ActionCableConnector extends BaseActionCableConnector {
   // eslint-disable-next-line class-methods-use-this
   fetchConversationStats = () => {
     emitter.emit('fetch_conversation_stats');
-    emitter.emit('fetch_overview_reports');
   };
 
   onContactDelete = data => {
@@ -187,11 +185,6 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/updateNotification', data);
   };
 
-  // eslint-disable-next-line class-methods-use-this
-  onFirstReplyCreated = () => {
-    emitter.emit('fetch_overview_reports');
-  };
-
   onCacheInvalidate = data => {
     const keys = data.cache_keys;
     this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });

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

@@ -9,8 +9,8 @@ import endOfDay from 'date-fns/endOfDay';
 import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
-import { emitter } from 'shared/helpers/mitt';
 import ReportHeader from './components/ReportHeader.vue';
+export const FETCH_INTERVAL = 60000;
 
 export default {
   name: 'LiveReports',
@@ -59,13 +59,24 @@ export default {
   },
   mounted() {
     this.$store.dispatch('agents/get');
-    this.fetchAllData();
-
-    emitter.on('fetch_overview_reports', () => {
-      this.fetchAllData();
-    });
+    this.initalizeReport();
+  },
+  beforeUnmount() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
   },
   methods: {
+    initalizeReport() {
+      this.fetchAllData();
+      this.scheduleReportRefresh();
+    },
+    scheduleReportRefresh() {
+      this.timeoutId = setTimeout(async () => {
+        await this.fetchAllData();
+        this.scheduleReportRefresh();
+      }, FETCH_INTERVAL);
+    },
     fetchAllData() {
       this.fetchAccountConversationMetric();
       this.fetchAgentConversationMetric();