diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js index 5b4d837d211cd..b6e29530b5e72 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.js @@ -18,11 +18,19 @@ import ChatsOverview from './overviews/ChatsOverview'; import ConversationOverview from './overviews/ConversationOverview'; import ProductivityOverview from './overviews/ProductivityOverview'; +const randomizeKeys = (keys) => { + keys.current = keys.current.map((_key, i) => { + return `${i}_${new Date().getTime()}`; + }); +}; + const dateRange = getDateRange(); const RealTimeMonitoringPage = () => { const t = useTranslation(); + const keys = useRef([...Array(10).keys()]); + const [reloadFrequency, setReloadFrequency] = useState(5); const [departmentId, setDepartment] = useState(''); @@ -43,6 +51,10 @@ const RealTimeMonitoringPage = () => { [departmentParams], ); + useEffect(() => { + randomizeKeys(keys); + }, [allParams]); + const reloadCharts = useMutableCallback(() => { Object.values(reloadRef.current).forEach((reload) => { reload(); @@ -53,6 +65,7 @@ const RealTimeMonitoringPage = () => { const interval = setInterval(reloadCharts, reloadFrequency * 1000); return () => { clearInterval(interval); + randomizeKeys(keys); }; }, [reloadCharts, reloadFrequency]); @@ -90,30 +103,54 @@ const RealTimeMonitoringPage = () => { - + - - + + - + - - + + - + - + - + - +