[FIX] AppMonitor data processing: prevent UI freeze for large range (…

…>1 day) and optimize filtering
RunOnFlux · Jan 27, 2025 · 0c58607 · 0c58607
1 parent 81eb356
commit 0c58607
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/HomeUI/src/views/apps/Management.vue b/HomeUI/src/views/apps/Management.vue
@@ -7408,7 +7408,7 @@ export default {
         let statsResponse;
         this.additionalMessage = '';
         if (this.enableHistoryStatistics) {
-          statsResponse = await this.executeLocalCommand(`/apps/appmonitor/${appname}`);
+          statsResponse = await this.executeLocalCommand(`/apps/appmonitor/${appname}/${this.selectedTimeRange}`);
         } else {
           statsResponse = await this.executeLocalCommand(`/apps/appstats/${appname}`);
         }
@@ -7440,13 +7440,7 @@ export default {
             statsData = statsResponse.data.data;
           }
           if (Array.isArray(statsData)) {
-            const now = new Date().getTime();
-            const cutoffTimestamp = now - this.selectedTimeRange;
-            const filteredStats = statsData.filter((stats) => {
-              const statsTimestamp = new Date(stats.timestamp).getTime();
-              return statsTimestamp >= cutoffTimestamp;
-            });
-            filteredStats.forEach((stats) => {
+            statsData.forEach((stats) => {
               this.processStatsData(stats.data, stats.timestamp);
             });
           } else {

diff --git a/ZelBack/src/routes.js b/ZelBack/src/routes.js
@@ -1113,7 +1113,7 @@ module.exports = (app) => {
   app.get('/apps/appstats/:appname?', (req, res) => {
     appsService.appStats(req, res);
   });
-  app.get('/apps/appmonitor/:appname?', (req, res) => {
+  app.get('/apps/appmonitor/:appname?/:range?', (req, res) => {
     appsService.appMonitor(req, res);
   });
   app.get('/apps/appmonitorstream/:appname?', (req, res) => {

diff --git a/ZelBack/src/services/appsService.js b/ZelBack/src/services/appsService.js
@@ -1072,20 +1072,37 @@ async function appStats(req, res) {
  */
 async function appMonitor(req, res) {
   try {
-    let { appname } = req.params;
+    let { appname, range } = req.params;
     appname = appname || req.query.appname;
+    range = range || req.query.range || null;
 
     if (!appname) {
       throw new Error('No Flux App specified');
     }
 
+    if (range !== null) {
+      range = parseInt(range, 10);
+      if (!Number.isInteger(range) || range <= 0) {
+        throw new Error('Invalid range value. It must be a positive integer or null.');
+      }
+    }
+
     const mainAppName = appname.split('_')[1] || appname;
 
     const authorized = await verificationHelper.verifyPrivilege('appownerabove', req, mainAppName);
     if (authorized === true) {
       if (appsMonitored[appname]) {
-        const response = appsMonitored[appname].statsStore;
-        const appResponse = messageHelper.createDataMessage(response);
+        let appStatsMonitoring = appsMonitored[appname].statsStore;
+        if (range) {
+          const now = Date.now();
+          const cutoffTimestamp = now - range;
+          const hoursInMs = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+          appStatsMonitoring = appStatsMonitoring.filter((stats) => stats.timestamp >= cutoffTimestamp);
+          if (range > hoursInMs) {
+            appStatsMonitoring = appStatsMonitoring.filter((_, index, array) => index % 20 === 0 || index === array.length - 1); // keep always last entry
+          }
+        }
+        const appResponse = messageHelper.createDataMessage(appStatsMonitoring);
         res.json(appResponse);
       } else throw new Error('No data available');
     } else {