@necrolab/dashboard 0.5.28 → 0.5.30

package/src/stores/connection.js

@@ -4,8 +4,356 @@ import { decode } from "@msgpack/msgpack";
 import router from "@/router/index";
 import { sortTaskIds } from "@/libs/utils/array";
 
+const TASK_UPDATE_EVENTS = new Set(["task-update", "task-setstatus", "task-setinfo"]);
+const QUEUE_STAT_FIELDS = new Set(["siteId", "eventId", "inQueue", "status", "queuePosition"]);
+const TASK_FLUSH_CHUNK_SIZE = 300;
+const TASK_INIT_APPLY_CHUNK_SIZE = 900;
+const QUEUE_STATS_REFRESH_DELAY = 600;
+
 export class ConnectionHandler {
+    constructor() {
+        this.pendingTaskMessages = new Map();
+        this.deferredTaskMessages = [];
+        this.flushTaskFrame = null;
+        this.inFlightFlushMessages = null;
+        this.inFlightFlushIndex = 0;
+        this.inFlightShouldSort = false;
+        this.inFlightQueueRelevantChanges = false;
+        this.queueStatsRefreshTimer = null;
+        this.taskMessageSeq = 0;
+        this.isTaskInitInProgress = false;
+        this.pendingInitTaskIds = [];
+        this.oldTaskOrder = [];
+        this.taskInitFrame = null;
+        this.profileInitBuffer = null;
+        this.tmAccountInitBuffer = null;
+        this.axsAccountInitBuffer = null;
+        this.ui = null;
+        this.socket = null;
+    }
+
+    scheduleQueueStatsRefresh(immediate = false) {
+        if (immediate) {
+            clearTimeout(this.queueStatsRefreshTimer);
+            this.queueStatsRefreshTimer = null;
+            this.ui.refreshQueueStats();
+            return;
+        }
+
+        if (!this.isTasksRouteActive()) return;
+        if (this.queueStatsRefreshTimer) return;
+        this.queueStatsRefreshTimer = setTimeout(() => {
+            this.queueStatsRefreshTimer = null;
+            this.ui.refreshQueueStats();
+        }, QUEUE_STATS_REFRESH_DELAY);
+    }
+
+    isTasksRouteActive() {
+        const path = router.currentRoute?.value?.path || window.location.pathname;
+        return path === "/" || path === "/tasks";
+    }
+
+    insertTaskId(taskId) {
+        if (this.ui.taskIdOrder.includes(taskId)) return false;
+
+        if (this.ui.sortData.sortBy) {
+            this.ui.taskIdOrder.push(taskId);
+            return true;
+        }
+
+        let left = 0;
+        let right = this.ui.taskIdOrder.length;
+
+        while (left < right) {
+            const mid = Math.floor((left + right) / 2);
+            if (sortTaskIds(taskId, this.ui.taskIdOrder[mid]) < 0) right = mid;
+            else left = mid + 1;
+        }
+
+        this.ui.taskIdOrder.splice(left, 0, taskId);
+        return true;
+    }
+
+    mergeSortedTaskIds(existingIds, newSortedIds) {
+        const out = [];
+        let i = 0;
+        let j = 0;
+
+        while (i < existingIds.length && j < newSortedIds.length) {
+            if (sortTaskIds(existingIds[i], newSortedIds[j]) <= 0) out.push(existingIds[i++]);
+            else out.push(newSortedIds[j++]);
+        }
+
+        while (i < existingIds.length) out.push(existingIds[i++]);
+        while (j < newSortedIds.length) out.push(newSortedIds[j++]);
+        return out;
+    }
+
+    mergeTaskMessages(existing, incoming, taskId) {
+        if (!existing) return { ...incoming, id: incoming.id || taskId };
+        if (incoming?.task?.removed) return { ...incoming, id: incoming.id || taskId };
+        if (existing?.task?.removed) return existing;
+
+        const merged = {
+            ...existing,
+            ...incoming,
+            id: incoming.id || existing.id || taskId
+        };
+
+        if (existing.task || incoming.task) {
+            merged.task = {
+                ...(existing.task || {}),
+                ...(incoming.task || {})
+            };
+        }
+
+        if (existing.update || incoming.update) {
+            merged.update = {
+                ...(existing.update || {}),
+                ...(incoming.update || {})
+            };
+        }
+
+        if (merged.task && merged.update) {
+            Object.assign(merged.task, merged.update);
+            delete merged.update;
+        }
+
+        return merged;
+    }
+
+    applyTaskMessage(msg) {
+        const taskId = msg.id || msg.task?.taskId;
+        if (!taskId) return { changed: false, added: false, queueRelevantChanged: false };
+
+        if (msg?.task?.removed) {
+            const existed = Boolean(this.ui.tasks[taskId]);
+            if (existed) delete this.ui.tasks[taskId];
+
+            if (this.ui.taskIdOrder.includes(taskId)) {
+                this.ui.taskIdOrder = this.ui.taskIdOrder.filter((id) => id !== taskId);
+                return { changed: true, added: false, queueRelevantChanged: true };
+            }
+
+            return { changed: existed, added: false, queueRelevantChanged: existed };
+        }
+
+        if (msg.update) {
+            const existingTask = this.ui.tasks[taskId];
+            if (!existingTask) return { changed: false, added: false, queueRelevantChanged: false };
+            const queueRelevantChanged = this.messageAffectsQueueStats(msg);
+            const changed = this.assignChangedFields(existingTask, msg.update);
+            if (!changed) return { changed: false, added: false, queueRelevantChanged: false };
+            return { changed: true, added: false, queueRelevantChanged };
+        }
+
+        if (!msg.task) return { changed: false, added: false, queueRelevantChanged: false };
+
+        if (!this.ui.tasks[taskId]) {
+            this.ui.tasks[taskId] = msg.task;
+            this.insertTaskId(taskId);
+            return { changed: true, added: true, queueRelevantChanged: true };
+        }
+
+        const queueRelevantChanged = this.messageAffectsQueueStats(msg);
+        const changed = this.assignChangedFields(this.ui.tasks[taskId], msg.task);
+        if (!changed) return { changed: false, added: false, queueRelevantChanged: false };
+        return { changed: true, added: false, queueRelevantChanged };
+    }
+
+    assignChangedFields(target, source) {
+        let changed = false;
+        for (const [key, nextValue] of Object.entries(source)) {
+            if (target[key] === nextValue) continue;
+            target[key] = nextValue;
+            changed = true;
+        }
+        return changed;
+    }
+
+    flushQueuedTaskMessages() {
+        if (!this.inFlightFlushMessages?.length) {
+            if (!this.pendingTaskMessages.size) return;
+            this.inFlightFlushMessages = Array.from(this.pendingTaskMessages.values())
+                .sort((a, b) => a.seq - b.seq)
+                .map((entry) => entry.message);
+            this.pendingTaskMessages.clear();
+            this.inFlightFlushIndex = 0;
+            this.inFlightShouldSort = false;
+            this.inFlightQueueRelevantChanges = false;
+        }
+
+        const end = Math.min(
+            this.inFlightFlushIndex + TASK_FLUSH_CHUNK_SIZE,
+            this.inFlightFlushMessages.length
+        );
+
+        for (let index = this.inFlightFlushIndex; index < end; index++) {
+            const msg = this.inFlightFlushMessages[index];
+            const { changed, added, queueRelevantChanged } = this.applyTaskMessage(msg);
+            if (!changed) continue;
+            if (added) this.inFlightShouldSort = true;
+            if (queueRelevantChanged) this.inFlightQueueRelevantChanges = true;
+        }
+
+        this.inFlightFlushIndex = end;
+        if (this.inFlightFlushIndex < this.inFlightFlushMessages.length) {
+            this.flushTaskFrame = requestAnimationFrame(() => {
+                this.flushTaskFrame = null;
+                this.flushQueuedTaskMessages();
+            });
+            return;
+        }
+
+        if (this.inFlightShouldSort && this.ui.sortData.sortBy) this.ui.toggleSort();
+        if (this.inFlightQueueRelevantChanges) this.scheduleQueueStatsRefresh();
+
+        this.inFlightFlushMessages = null;
+        this.inFlightFlushIndex = 0;
+        this.inFlightShouldSort = false;
+        this.inFlightQueueRelevantChanges = false;
+
+        if (!this.pendingTaskMessages.size) return;
+        this.flushTaskFrame = requestAnimationFrame(() => {
+            this.flushTaskFrame = null;
+            this.flushQueuedTaskMessages();
+        });
+    }
+
+    enqueueTaskMessage(msg) {
+        const taskId = msg.id || msg.task?.taskId;
+        if (!taskId) return;
+
+        const queueKey = `${msg.event}:${taskId}`;
+        const existingEntry = this.pendingTaskMessages.get(queueKey);
+        const merged = this.mergeTaskMessages(existingEntry?.message, msg, taskId);
+        this.pendingTaskMessages.set(queueKey, {
+            message: merged,
+            seq: ++this.taskMessageSeq
+        });
+
+        if (this.flushTaskFrame) return;
+        this.flushTaskFrame = requestAnimationFrame(() => {
+            this.flushTaskFrame = null;
+            this.flushQueuedTaskMessages();
+        });
+    }
+
+    handleIncomingBatch(messages) {
+        if (!Array.isArray(messages)) return;
+        messages.forEach((msg) => this.handleWebsocketMessages(msg));
+    }
+
+    clearTaskUpdateQueue() {
+        this.pendingTaskMessages.clear();
+        this.deferredTaskMessages = [];
+        this.inFlightFlushMessages = null;
+        this.inFlightFlushIndex = 0;
+        this.inFlightShouldSort = false;
+        this.inFlightQueueRelevantChanges = false;
+        if (this.flushTaskFrame) {
+            cancelAnimationFrame(this.flushTaskFrame);
+            this.flushTaskFrame = null;
+        }
+        if (this.taskInitFrame) {
+            cancelAnimationFrame(this.taskInitFrame);
+            this.taskInitFrame = null;
+        }
+    }
+
+    messageAffectsQueueStats(msg) {
+        if (msg?.task?.removed) return true;
+
+        const payload = msg.task || msg.update;
+        if (!payload || typeof payload !== "object") return false;
+        return Object.keys(payload).some((key) => QUEUE_STAT_FIELDS.has(key));
+    }
+
+    handleTaskInitStart() {
+        this.clearTaskUpdateQueue();
+        this.isTaskInitInProgress = true;
+        this.oldTaskOrder = [...this.ui.taskIdOrder];
+        this.pendingInitTaskIds = [];
+        this.ui.tasks = {};
+        this.ui.taskIdOrder = [];
+    }
+
+    applyInitTaskChunk(tasksChunk) {
+        const ids = Object.keys(tasksChunk || {});
+        if (!ids.length) return;
+
+        ids.forEach((id) => {
+            this.ui.tasks[id] = tasksChunk[id];
+        });
+        this.pendingInitTaskIds.push(...ids);
+    }
+
+    finalizeTaskInit() {
+        const newIdSet = new Set(this.pendingInitTaskIds);
+        const oldIdSet = new Set(this.oldTaskOrder);
+
+        const existingIds = this.oldTaskOrder.filter((id) => newIdSet.has(id));
+        const missingIds = this.pendingInitTaskIds.filter((id) => !oldIdSet.has(id));
+        missingIds.sort(sortTaskIds);
+
+        this.ui.taskIdOrder = [...existingIds, ...missingIds];
+
+        if (this.ui.sortData.sortBy) this.ui.toggleSort();
+
+        this.isTaskInitInProgress = false;
+        this.pendingInitTaskIds = [];
+        this.oldTaskOrder = [];
+        this.scheduleQueueStatsRefresh(true);
+        this.ui.hideSpinner();
+
+        if (!this.deferredTaskMessages.length) return;
+        const bufferedMessages = this.deferredTaskMessages;
+        this.deferredTaskMessages = [];
+        bufferedMessages.forEach((message) => this.enqueueTaskMessage(message));
+    }
+
+    applyTasksSnapshotInChunks(tasksSnapshot) {
+        this.handleTaskInitStart();
+
+        const entries = Object.entries(tasksSnapshot || {});
+        const total = entries.length;
+        if (!total) {
+            this.finalizeTaskInit();
+            return;
+        }
+
+        let cursor = 0;
+        const applyChunk = () => {
+            const end = Math.min(cursor + TASK_INIT_APPLY_CHUNK_SIZE, total);
+            for (let index = cursor; index < end; index++) {
+                const [taskId, task] = entries[index];
+                this.ui.tasks[taskId] = task;
+                this.pendingInitTaskIds.push(taskId);
+            }
+
+            cursor = end;
+            if (cursor < total) {
+                this.taskInitFrame = requestAnimationFrame(applyChunk);
+                return;
+            }
+
+            this.taskInitFrame = null;
+            this.finalizeTaskInit();
+        };
+
+        applyChunk();
+    }
+
     handleWebsocketMessages(msg) {
+        if (TASK_UPDATE_EVENTS.has(msg.event)) {
+            if (this.isTaskInitInProgress) {
+                this.deferredTaskMessages.push(msg);
+                return;
+            }
+            this.enqueueTaskMessage(msg);
+            return;
+        }
+
         switch (msg.event) {
             case "startup":
                 if (msg.done) {
@@ -32,20 +380,23 @@ export class ConnectionHandler {
                 this.ui.tasks = {};
                 this.ui.taskIdOrder = [];
                 this.ui.showSuccess("Deleted all tasks!");
+                this.scheduleQueueStatsRefresh(true);
                 break;
 
-            case "init-tasks":
-                var oldOrder = [...this.ui.taskIdOrder];
-                this.ui.tasks = msg.tasks;
-                var newIds = Object.keys(msg.tasks);
+            case "init-tasks-start":
+                this.handleTaskInitStart();
+                break;
 
-                var existingIds = oldOrder.filter((id) => newIds.includes(id));
-                var missingTaskIds = newIds.filter((id) => !oldOrder.includes(id));
-                missingTaskIds.sort(sortTaskIds);
+            case "init-tasks-chunk":
+                this.applyInitTaskChunk(msg.tasks);
+                break;
 
-                this.ui.taskIdOrder = [...existingIds, ...missingTaskIds];
-                this.ui.refreshQueueStats();
-                this.ui.hideSpinner();
+            case "init-tasks-done":
+                this.finalizeTaskInit();
+                break;
+
+            case "init-tasks":
+                this.applyTasksSnapshotInChunks(msg.tasks);
                 break;
 
             case "init-profiles":
@@ -53,86 +404,109 @@ export class ConnectionHandler {
                 this.ui.hideSpinner();
                 break;
 
+            case "init-profiles-start":
+                this.profileInitBuffer = [];
+                break;
+
+            case "init-profiles-chunk":
+                if (!this.profileInitBuffer) this.profileInitBuffer = [];
+                this.profileInitBuffer.push(...(msg.items || []));
+                break;
+
+            case "init-profiles-done":
+                this.ui.setProfiles(this.profileInitBuffer || []);
+                this.profileInitBuffer = null;
+                this.ui.hideSpinner();
+                break;
+
             case "init-proxies":
                 this.ui.setProxies(msg.proxies);
                 this.ui.hideSpinner();
                 break;
 
             case "init-tm-accounts":
-                this.ui.setAccounts(msg.accounts.map((acc) => ({ ...acc, module: "TM" })));
+                this.ui.setAccountsForModule(
+                    "TM",
+                    msg.accounts.map((acc) => ({ ...acc, module: "TM" }))
+                );
                 this.ui.hideSpinner();
                 break;
 
             case "init-axs-accounts":
-                this.ui.setAccounts(msg.accounts.map((acc) => ({ ...acc, module: "AXS" })));
+                this.ui.setAccountsForModule(
+                    "AXS",
+                    msg.accounts.map((acc) => ({ ...acc, module: "AXS" }))
+                );
+                this.ui.hideSpinner();
+                break;
+
+            case "init-tm-accounts-start":
+                this.tmAccountInitBuffer = [];
+                break;
+
+            case "init-tm-accounts-chunk":
+                if (!this.tmAccountInitBuffer) this.tmAccountInitBuffer = [];
+                this.tmAccountInitBuffer.push(
+                    ...(msg.items || []).map((account) => ({ ...account, module: "TM" }))
+                );
+                break;
+
+            case "init-tm-accounts-done":
+                this.ui.setAccountsForModule("TM", this.tmAccountInitBuffer || []);
+                this.tmAccountInitBuffer = null;
                 this.ui.hideSpinner();
                 break;
 
-            case "add-task":
+            case "init-axs-accounts-start":
+                this.axsAccountInitBuffer = [];
+                break;
+
+            case "init-axs-accounts-chunk":
+                if (!this.axsAccountInitBuffer) this.axsAccountInitBuffer = [];
+                this.axsAccountInitBuffer.push(
+                    ...(msg.items || []).map((account) => ({ ...account, module: "AXS" }))
+                );
+                break;
+
+            case "init-axs-accounts-done":
+                this.ui.setAccountsForModule("AXS", this.axsAccountInitBuffer || []);
+                this.axsAccountInitBuffer = null;
+                this.ui.hideSpinner();
+                break;
+
+            case "add-task": {
                 this.ui.tasks[msg.task.taskId] = msg.task;
 
-                if (!this.ui.taskIdOrder.includes(msg.task.taskId)) {
-                    let pos = this.ui.taskIdOrder.length;
-                    for (let i = 0; i < this.ui.taskIdOrder.length; i++) {
-                        if (sortTaskIds(msg.task.taskId, this.ui.taskIdOrder[i]) < 0) {
-                            pos = i;
-                            break;
-                        }
-                    }
-                    this.ui.taskIdOrder.splice(pos, 0, msg.task.taskId);
-                }
+                const inserted = this.insertTaskId(msg.task.taskId);
 
-                this.ui.toggleSort();
+                if (inserted && this.ui.sortData.sortBy) this.ui.toggleSort();
                 this.ui.showSuccess("Created 1 task!");
-                this.ui.refreshQueueStats();
+                this.scheduleQueueStatsRefresh();
                 break;
+            }
 
-            case "add-tasks":
+            case "add-tasks": {
                 var batchTaskIds = Object.keys(msg.tasks).sort(sortTaskIds);
+                const existingOrderSet = new Set(this.ui.taskIdOrder);
+                const batchMissingTaskIds = batchTaskIds.filter((id) => !existingOrderSet.has(id));
+
+                Object.entries(msg.tasks).forEach(([id, task]) => {
+                    this.ui.tasks[id] = task;
+                });
 
-                for (const id of batchTaskIds) {
-                    const value = msg.tasks[id];
-                    this.ui.tasks[id] = value;
-
-                    if (!this.ui.taskIdOrder.includes(id)) {
-                        let pos = this.ui.taskIdOrder.length;
-                        for (let i = 0; i < this.ui.taskIdOrder.length; i++) {
-                            if (sortTaskIds(id, this.ui.taskIdOrder[i]) < 0) {
-                                pos = i;
-                                break;
-                            }
-                        }
-                        this.ui.taskIdOrder.splice(pos, 0, id);
+                if (batchMissingTaskIds.length) {
+                    if (this.ui.sortData.sortBy) {
+                        this.ui.taskIdOrder.push(...batchMissingTaskIds);
+                        this.ui.toggleSort();
+                    } else {
+                        this.ui.taskIdOrder = this.mergeSortedTaskIds(this.ui.taskIdOrder, batchMissingTaskIds);
                     }
                 }
+
                 this.ui.showSuccess(`Created ${batchTaskIds.length} tasks!`);
-                this.ui.refreshQueueStats();
-                break;
-
-            case "task-update":
-            case "task-setstatus":
-            case "task-setinfo":
-                if (msg?.task?.removed) {
-                    delete this.ui.tasks[msg.id];
-                    this.ui.taskIdOrder = this.ui.taskIdOrder.filter((i) => i !== msg.id);
-                } else if (msg.update) {
-                    try {
-                        Object.entries(msg.update).forEach((change) => (this.ui.tasks[msg.id][change[0]] = change[1]));
-                    } catch {
-                        // Ignore update errors if task doesn't exist
-                    }
-                } else {
-                    if (!this.ui.tasks[msg.id]) this.ui.tasks[msg.id] = msg.task;
-                    if (!this.ui.taskIdOrder.includes(msg.id)) {
-                        this.ui.taskIdOrder.push(msg.id);
-                        this.ui.sortTasks();
-                    } else
-                        Object.keys(msg.task).forEach((key) => {
-                            this.ui.tasks[msg.id][key] = msg.task[key];
-                        });
-                }
-                this.ui.refreshQueueStats();
+                this.scheduleQueueStatsRefresh();
                 break;
+            }
 
             case "edit-presale-code":
                 for (const value of Object.values(this.ui.tasks)) {
@@ -212,22 +586,33 @@ export class ConnectionHandler {
             }
 
             // if event is not json but msgpack encoded, decode it
-            if (event.data instanceof Blob || event.data instanceof ArrayBuffer) {
+            if (event.data instanceof ArrayBuffer) {
+                const data = decode(new Uint8Array(event.data));
+                this.handleIncomingBatch(data);
+                return;
+            }
+
+            if (event.data instanceof Blob) {
                 event.data.arrayBuffer().then((buffer) => {
                     const data = decode(new Uint8Array(buffer));
-                    data.forEach((d) => this.handleWebsocketMessages(d));
+                    this.handleIncomingBatch(data);
                 });
-            } else JSON.parse(event.data).forEach((e) => this.handleWebsocketMessages(e));
+                return;
+            }
+
+            this.handleIncomingBatch(JSON.parse(event.data));
         };
 
         this.socket.onclose = () => {
             this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
+            this.clearTaskUpdateQueue();
         };
 
         this.socket.onerror = () => {
             this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
+            this.clearTaskUpdateQueue();
         };
 
     }