From 7469cde0b9428819e17a7f12655ff7ea4da4f227 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 15 Jan 2025 11:23:00 -0800
Subject: [PATCH] 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.
---
 .../dashboard/helper/actionCable.js           |  7 ------
 .../settings/reports/LiveReports.vue          | 23 ++++++++++++++-----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index c028368df..adb33eb6d 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/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 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 2d39d00f4..27b2126ea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/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();