improve page load performance of large amount urls (#5025)

Co-authored-by: vishal sabhaya <vishals@vebuin.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>

server/uptime-kuma-server.js

@@ -205,24 +205,56 @@ class UptimeKumaServer {
         return list;
     }
 
+    /**
+     * Update Monitor into list
+     * @param {Socket} socket Socket to send list on
+     * @param {number} monitorID update or deleted monitor id
+     * @returns {Promise<void>}
+     */
+    async sendUpdateMonitorIntoList(socket, monitorID) {
+        let list = await this.getMonitorJSONList(socket.userID, monitorID);
+        this.io.to(socket.userID).emit("updateMonitorIntoList", list);
+    }
+
+    /**
+     * Delete Monitor from list
+     * @param {Socket} socket Socket to send list on
+     * @param {number} monitorID update or deleted monitor id
+     * @returns {Promise<void>}
+     */
+    async sendDeleteMonitorFromList(socket, monitorID) {
+        this.io.to(socket.userID).emit("deleteMonitorFromList", monitorID);
+    }
+
     /**
      * Get a list of monitors for the given user.
      * @param {string} userID - The ID of the user to get monitors for.
+     * @param {number} monitorID - The ID of monitor for.
      * @returns {Promise<object>} A promise that resolves to an object with monitor IDs as keys and monitor objects as values.
      *
      * Generated by Trelent
      */
-    async getMonitorJSONList(userID) {
-        let result = {};
+    async getMonitorJSONList(userID, monitorID = null) {
 
-        let monitorList = await R.find("monitor", " user_id = ? ORDER BY weight DESC, name", [
-            userID,
-        ]);
+        let query = " user_id = ? ";
+        let queryParams = [ userID ];
 
-        for (let monitor of monitorList) {
-            result[monitor.id] = await monitor.toJSON();
+        if (monitorID) {
+            query += "AND id = ? ";
+            queryParams.push(monitorID);
         }
 
+        let monitorList = await R.find("monitor", query + "ORDER BY weight DESC, name", queryParams);
+
+        const monitorData = monitorList.map(monitor => ({
+            id: monitor.id,
+            active: monitor.active,
+            name: monitor.name,
+        }));
+        const preloadData = await Monitor.preparePreloadData(monitorData);
+
+        const result = {};
+        monitorList.forEach(monitor => result[monitor.id] = monitor.toJSON(preloadData));
         return result;
     }
 
@@ -520,3 +552,4 @@ const { DnsMonitorType } = require("./monitor-types/dns");
 const { MqttMonitorType } = require("./monitor-types/mqtt");
 const { SNMPMonitorType } = require("./monitor-types/snmp");
 const { MongodbMonitorType } = require("./monitor-types/mongodb");
+const Monitor = require("./model/monitor");