Feat: Full server-side pagination for important events (#3515)

* Feat: Serverside pagination for importantBeats

* Chore: Remove unused state

* Apply suggestions from code review

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Fix: Add watch for monitor

* Fix: Fix compatibility with dynamic page length

* Chore: Fix lint

* Merge conflict

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>
Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

src/pages/Details.vue

@@ -195,7 +195,7 @@
                             <td class="border-0">{{ beat.msg }}</td>
                         </tr>
 
-                        <tr v-if="importantHeartBeatList.length === 0">
+                        <tr v-if="importantHeartBeatListLength === 0">
                             <td colspan="3">
                                 {{ $t("No important events") }}
                             </td>
@@ -206,7 +206,7 @@
                 <div class="d-flex justify-content-center kuma_pagination">
                     <pagination
                         v-model="page"
-                        :records="importantHeartBeatList.length"
+                        :records="importantHeartBeatListLength"
                         :per-page="perPage"
                         :options="paginationConfig"
                     />
@@ -275,6 +275,8 @@ export default {
                 chunksNavigation: "scroll",
             },
             cacheTime: Date.now(),
+            importantHeartBeatListLength: 0,
+            displayedRecords: [],
         };
     },
     computed: {
@@ -313,16 +315,6 @@ export default {
             return this.$t("notAvailableShort");
         },
 
-        importantHeartBeatList() {
-            if (this.$root.importantHeartbeatList[this.monitor.id]) {
-                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-                this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
-                return this.$root.importantHeartbeatList[this.monitor.id];
-            }
-
-            return [];
-        },
-
         status() {
             if (this.$root.statusList[this.monitor.id]) {
                 return this.$root.statusList[this.monitor.id];
@@ -346,12 +338,6 @@ export default {
             return this.tlsInfo != null && this.toggleCertInfoBox;
         },
 
-        displayedRecords() {
-            const startIndex = this.perPage * (this.page - 1);
-            const endIndex = startIndex + this.perPage;
-            return this.heartBeatList.slice(startIndex, endIndex);
-        },
-
         group() {
             if (!this.monitor.pathName.includes("/")) {
                 return "";
@@ -367,9 +353,27 @@ export default {
             return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
         }
     },
-    mounted() {
 
+    watch: {
+        page(to) {
+            this.getImportantHeartbeatListPaged();
+        },
+
+        monitor(to) {
+            this.getImportantHeartbeatListLength();
+        }
     },
+
+    mounted() {
+        this.getImportantHeartbeatListLength();
+
+        this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);
+    },
+
+    beforeUnmount() {
+        this.$root.emitter.off("newImportantHeartbeat", this.onNewImportantHeartbeat);
+    },
+
     methods: {
         getResBaseURL,
         /**
@@ -454,7 +458,9 @@ export default {
          */
         clearEvents() {
             this.$root.clearEvents(this.monitor.id, (res) => {
-                if (! res.ok) {
+                if (res.ok) {
+                    this.getImportantHeartbeatListLength();
+                } else {
                     toast.error(res.msg);
                 }
             });
@@ -515,7 +521,54 @@ export default {
                 // Handle SQL Server
                 return urlString.replaceAll(/Password=(.+);/ig, "Password=******;");
             }
-        }
+        },
+
+        /**
+         * Retrieves the length of the important heartbeat list for this monitor.
+         * @returns {void}
+         */
+        getImportantHeartbeatListLength() {
+            if (this.monitor) {
+                this.$root.getSocket().emit("monitorImportantHeartbeatListCount", this.monitor.id, (res) => {
+                    if (res.ok) {
+                        this.importantHeartBeatListLength = res.count;
+                        this.getImportantHeartbeatListPaged();
+                    }
+                });
+            }
+        },
+
+        /**
+         * Retrieves the important heartbeat list for the current page.
+         * @returns {void}
+         */
+        getImportantHeartbeatListPaged() {
+            if (this.monitor) {
+                const offset = (this.page - 1) * this.perPage;
+                this.$root.getSocket().emit("monitorImportantHeartbeatListPaged", this.monitor.id, offset, this.perPage, (res) => {
+                    if (res.ok) {
+                        this.displayedRecords = res.data;
+                    }
+                });
+            }
+        },
+
+        /**
+         * Updates the displayed records when a new important heartbeat arrives.
+         * @param {object} heartbeat - The heartbeat object received.
+         * @returns {void}
+         */
+        onNewImportantHeartbeat(heartbeat) {
+            if (heartbeat.monitorID === this.monitor?.id) {
+                if (this.page === 1) {
+                    this.displayedRecords.unshift(heartbeat);
+                    if (this.displayedRecords.length > this.perPage) {
+                        this.displayedRecords.pop();
+                    }
+                    this.importantHeartBeatListLength += 1;
+                }
+            }
+        },
     },
 };
 </script>