@zintrust/queue-monitor 0.4.50 → 0.4.60

package/dist/QueueMonitoringService.js

@@ -2,7 +2,7 @@ import { Logger } from '@zintrust/core';
 export const ALL_QUEUES = '__all__';
 const subscriptions = new Map();
 const isAllQueuesSelection = (queue) => queue === ALL_QUEUES;
-const sortJobsByTimestamp = (jobs) => jobs.sort((left, right) => right.timestamp - left.timestamp);
+const sortJobsByTimestamp = (jobs) => jobs.toSorted((left, right) => right.timestamp - left.timestamp);
 export async function getRecentJobsForSelection(queueName, metrics, driver, queueNames) {
     if (!isAllQueuesSelection(queueName)) {
         return getRecentJobsForQueue(queueName, metrics, driver);

package/dist/build-manifest.json

@@ -1,14 +1,14 @@
 {
   "name": "@zintrust/queue-monitor",
-  "version": "0.4.43",
-  "buildDate": "2026-04-01T18:15:53.560Z",
+  "version": "0.4.60",
+  "buildDate": "2026-04-05T07:02:46.309Z",
   "buildEnvironment": {
     "node": "v22.22.1",
     "platform": "darwin",
     "arch": "arm64"
   },
   "git": {
-    "commit": "57e4d1b5",
+    "commit": "be058c1d",
     "branch": "release"
   },
   "package": {
@@ -25,12 +25,12 @@
   },
   "files": {
     "QueueMonitoringService.d.ts": {
-      "size": 1492,
-      "sha256": "a87d7ab795606e7b238c01a657306bea805f63eb4c155951d31c191bfd8582e1"
+      "size": 1684,
+      "sha256": "26a91f1b41d8a976a9e8fabaedc3fe6dc955c700499f0afc1a16fb91c9848665"
     },
     "QueueMonitoringService.js": {
-      "size": 6190,
-      "sha256": "068477c0b545686c9c35d6b42960b5ecf8d19ee4f3f5adec8ddeeb21113258b3"
+      "size": 7011,
+      "sha256": "23cfc989a6e6926224e3507cb2fad5e6e884070406ca9cf58644536b63a52eb7"
     },
     "api/workerClient.d.ts": {
       "size": 597,
@@ -42,7 +42,7 @@
     },
     "build-manifest.json": {
       "size": 3865,
-      "sha256": "6b9eece186e37f5ed657a014c799e3783f30d0e16e0c2fb4e9fa8f2ffcbdd673"
+      "sha256": "c2769a76a31b33d2de31cb3281ada6e5e41c31c26e4477c05617d02bebaa64af"
     },
     "config/queueMonitor.d.ts": {
       "size": 407,
@@ -73,8 +73,8 @@
       "sha256": "1b487b6e9cedbcb00cde7e920fb128724cb21aa154160e0bd02b02e2a0bd7334"
     },
     "dashboard-ui.js": {
-      "size": 42243,
-      "sha256": "04f5bf91f2f283db1149b3cea7ea74a17147d13df4f5e83ca3ec4ed79cedd03e"
+      "size": 51371,
+      "sha256": "955df86422fd6cda793ade860394744cfdb9217ecc7a841ac89dc7027433b834"
     },
     "driver.d.ts": {
       "size": 707,
@@ -85,16 +85,16 @@
       "sha256": "50229d05df9ca8bf5528b923e2799a4719e5a32ad9fa30bf3e2f36ecc91cf00c"
     },
     "index.d.ts": {
-      "size": 1965,
-      "sha256": "be25d5e56f1c0ce0387c67ef7ce7544074e0d90698ad93826bb4d557d1a0b26f"
+      "size": 2161,
+      "sha256": "2556c136641769f4e7cd81abd6ecae8663433aba74b09bc507b8fba01e3fc6f5"
     },
     "index.js": {
-      "size": 11889,
-      "sha256": "19a7bdc71cec34fe732dd0d7177ad366d271e31462f402911d4a2700d0ea8b2c"
+      "size": 12811,
+      "sha256": "a3691ff87403fc468c86efec2d907b45c5c8a642e75a6e6ecf29bdaaf3d220ed"
     },
     "metrics.d.ts": {
-      "size": 848,
-      "sha256": "3ed092d97ff3ce81b43aa85dbded2898479d5c4d46860f22f21415085dce6229"
+      "size": 868,
+      "sha256": "cbae21100c770e0960f4ae8c96bfaa2015162042122e04f00812817f04306512"
     },
     "metrics.js": {
       "size": 3448,

package/dist/dashboard-ui.js

@@ -337,8 +337,6 @@ const getDashboardScriptAutoRefresh = () => `
 const getRenderStatsFunction = () => `
         function renderStats(data) {
             const grid = document.getElementById('stats-grid');
-            grid.innerHTML = '';
-
             const totalActive = data.queues.reduce((acc, q) => acc + q.counts.active, 0);
             const totalFailed = data.queues.reduce((acc, q) => acc + q.counts.failed, 0);
             const totalDelayed = data.queues.reduce((acc, q) => acc + q.counts.delayed, 0);
@@ -374,143 +372,299 @@ const getRenderStatsFunction = () => `
                 }
             ];
 
-            cards.forEach(card => {
-                const div = document.createElement('div');
-                div.className = 'tile';
-                const infoIcon = '<span class="info-icon" data-info="' + card.info + '">i</span>';
-                div.innerHTML =
-                    '<div class="stat-header">' +
-                    '<div class="stat-label">' + card.label + '</div>' +
-                    infoIcon +
-                    '</div>' +
-                    '<div class="stat-value" style="' + (card.color ? 'color:' + card.color : '') + '">' +
-                    card.value +
-                    '</div>';
-                grid.appendChild(div);
-            });
+            cards.forEach((card, index) => {
+                let div = grid.children[index];
+                let labelEl;
+                let valueEl;
+                let iconEl;
+
+                if (!div) {
+                    div = document.createElement('div');
+                    div.className = 'tile';
+
+                    const header = document.createElement('div');
+                    header.className = 'stat-header';
+
+                    labelEl = document.createElement('div');
+                    labelEl.className = 'stat-label';
+
+                    iconEl = document.createElement('span');
+                    iconEl.className = 'info-icon';
+                    iconEl.textContent = 'i';
+                    iconEl.addEventListener('mouseenter', showTooltip);
+                    iconEl.addEventListener('mouseleave', hideTooltip);
+
+                    valueEl = document.createElement('div');
+                    valueEl.className = 'stat-value';
 
-            document.querySelectorAll('.info-icon').forEach(icon => {
-                icon.addEventListener('mouseenter', showTooltip);
-                icon.addEventListener('mouseleave', hideTooltip);
+                    header.appendChild(labelEl);
+                    header.appendChild(iconEl);
+                    div.appendChild(header);
+                    div.appendChild(valueEl);
+                    grid.appendChild(div);
+                } else {
+                    labelEl = div.querySelector('.stat-label');
+                    valueEl = div.querySelector('.stat-value');
+                    iconEl = div.querySelector('.info-icon');
+                }
+
+                if (labelEl) labelEl.textContent = card.label;
+                if (valueEl) {
+                    valueEl.textContent = String(card.value);
+                    valueEl.style.color = card.color || '';
+                }
+                if (iconEl) iconEl.setAttribute('data-info', card.info);
             });
+
+            while (grid.children.length > cards.length) {
+                grid.removeChild(grid.lastElementChild);
+            }
         }`;
 const getUpdateQueueSelectFunction = () => `
         function updateQueueSelect(queues) {
             const select = document.getElementById('queue-select');
             const storedQueue = localStorage.getItem(QUEUE_KEY);
             const preferredQueue = currentQueue || select.value || storedQueue || '';
-            select.innerHTML = '';
 
             if (queues.length === 0) {
                 select.disabled = true;
-                select.innerHTML = '<option value="">No queues</option>';
+                if (select.options.length !== 1 || select.options[0].value !== '' || select.options[0].textContent !== 'No queues') {
+                    select.innerHTML = '<option value="">No queues</option>';
+                }
                 return '';
             }
 
             const queueNames = queues.map(q => q.name);
             const totalWaiting = queues.reduce((acc, queue) => acc + queue.counts.waiting, 0);
             const totalFailed = queues.reduce((acc, queue) => acc + queue.counts.failed, 0);
-            const allOption = document.createElement('option');
-            allOption.value = ALL_QUEUES;
-            allOption.textContent = 'All queues (' + totalWaiting + ' waiting, ' + totalFailed + ' failed)';
 
             const nextQueue = preferredQueue === ALL_QUEUES || queueNames.includes(preferredQueue)
                 ? preferredQueue
                 : queueNames[0];
+            const desiredOptions = [
+                {
+                    value: ALL_QUEUES,
+                    text: 'All queues (' + totalWaiting + ' waiting, ' + totalFailed + ' failed)'
+                },
+                ...queues.map(q => ({
+                    value: q.name,
+                    text: q.name + ' (' + q.counts.waiting + ' waiting, ' + q.counts.failed + ' failed)'
+                }))
+            ];
+
+            const existingOptions = new Map();
+            Array.from(select.options).forEach(option => {
+                existingOptions.set(option.value, option);
+            });
+
             select.disabled = false;
-            allOption.selected = nextQueue === ALL_QUEUES;
-            select.appendChild(allOption);
-
-            queues.forEach(q => {
-                const opt = document.createElement('option');
-                opt.value = q.name;
-                opt.textContent = q.name + ' (' + q.counts.waiting + ' waiting, ' + q.counts.failed + ' failed)';
-                opt.selected = q.name === nextQueue;
-                select.appendChild(opt);
+
+            desiredOptions.forEach((item, index) => {
+                let option = existingOptions.get(item.value);
+                if (!option) {
+                    option = document.createElement('option');
+                    option.value = item.value;
+                }
+
+                option.textContent = item.text;
+                option.selected = item.value === nextQueue;
+
+                const currentAtIndex = select.options[index];
+                if (currentAtIndex !== option) {
+                    select.appendChild(option);
+                }
+            });
+
+            Array.from(select.options).forEach(option => {
+                if (!desiredOptions.some(item => item.value === option.value)) {
+                    option.remove();
+                }
             });
 
             select.value = nextQueue;
             return nextQueue;
         }`;
-const getRenderJobsFunction = () => `
+const getRenderJobsStateFunction = () => `
         // Track expanded job IDs to preserve state during SSE updates
         let expandedJobIds = new Set();
+`;
+const getRenderJobsDetailHelpersFunction = () => `
+        function getJobId(job) {
+            return String(job.id);
+        }
 
-        function renderJobs(jobs) {
-            const tbody = document.querySelector('#jobs-table tbody');
+        function getJobStatusInfo(job) {
+            const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
+            const statusMap = {
+                failed: { label: 'Failed', cls: 'status-failed' },
+                completed: { label: 'Completed', cls: 'status-completed' },
+                active: { label: 'Active', cls: 'status-active' },
+                waiting: { label: 'Waiting', cls: 'status-waiting' },
+                delayed: { label: 'Delayed', cls: 'status-delayed' },
+                paused: { label: 'Paused', cls: 'status-paused' }
+            };
 
-            // Store currently expanded job IDs before clearing
-            const currentExpanded = document.querySelectorAll('.expand-icon.expanded');
-            currentExpanded.forEach(icon => {
-                const row = icon.closest('tr');
-                if (row) {
-                    const jobId = row.querySelector('code')?.textContent;
-                    if (jobId) expandedJobIds.add(jobId);
-                }
+            return statusMap[status] || statusMap.completed;
+        }
+
+        function getJobRetryMarkup(job) {
+            const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
+            if (status === 'failed') {
+                return '<button class="retry-btn" onclick="retryJob(' + "'" + job.id + "'" + ', ' + "'" + (job.queue || currentQueue) + "'" + ')" title="Retry this job">↻ Retry</button>';
+            }
+            return '<span style="color: var(--muted); font-size: 11px;">—</span>';
+        }
+
+        function buildJobDetailMarkup(job) {
+            const jobData = {
+                id: job.id,
+                name: job.name,
+                queue: job.queue || currentQueue,
+                status: job.status || (job.failedReason ? 'failed' : 'completed'),
+                attempts: job.attempts,
+                timestamp: new Date(job.timestamp).toISOString(),
+                data: job.data || {},
+                failedReason: job.failedReason || null,
+                processedOn: job.processedOn ? new Date(job.processedOn).toISOString() : null,
+                finishedOn: job.finishedOn ? new Date(job.finishedOn).toISOString() : null,
+                returnvalue: job.returnvalue
+            };
+
+            return '<td colspan="7" class="detail-cell">' +
+                '<div class="detail-content">' +
+                '<strong style="color: var(--accent); display: block; margin-bottom: 8px;">Job Details:</strong>' +
+                '<pre>' + JSON.stringify(jobData, null, 2) + '</pre>' +
+                '</div>' +
+                '</td>';
+        }
+
+        function removeJobDetailRow(row) {
+            const existingDetail = row.nextElementSibling;
+            if (existingDetail && existingDetail.classList.contains('detail-row')) {
+                existingDetail.remove();
+            }
+        }
+
+        function upsertJobDetailRow(row, job, parent) {
+            const existingDetail = row.nextElementSibling && row.nextElementSibling.classList.contains('detail-row')
+                ? row.nextElementSibling
+                : null;
+
+            let detailRow = existingDetail;
+            if (!detailRow) {
+                detailRow = document.createElement('tr');
+                detailRow.className = 'detail-row';
+            }
+
+            detailRow.dataset.jobId = getJobId(job);
+            detailRow.innerHTML = buildJobDetailMarkup(job);
+
+            if (parent) {
+                parent.appendChild(detailRow);
+            } else {
+                row.parentNode.insertBefore(detailRow, row.nextSibling);
+            }
+        }
+
+        function ensureEmptyJobsState(tbody) {
+            if (
+                tbody.children.length === 1 &&
+                tbody.children[0].textContent.includes('No recent jobs found')
+            ) {
+                return;
+            }
+
+            tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--muted)">No recent jobs found</td></tr>';
+        }
+`;
+const getRenderJobsRowHelpersFunction = () => `
+        function createJobRow(job, idx) {
+            const tr = document.createElement('tr');
+            tr.className = 'expandable-row';
+            tr.addEventListener('click', (e) => {
+                if (e.target.classList.contains('retry-btn')) return;
+                toggleJobDetails(tr, tr.__jobData);
+            });
+            updateExistingJobRow(tr, job, idx);
+            return tr;
+        }
+
+        function updateExistingJobRow(tr, job, idx) {
+            const jobId = getJobId(job);
+            const statusInfo = getJobStatusInfo(job);
+            const isExpanded = expandedJobIds.has(jobId);
+
+            tr.__jobData = job;
+            tr.dataset.jobId = jobId;
+            tr.dataset.jobIndex = idx;
+            tr.innerHTML =
+                '<td><span class="expand-icon' + (isExpanded ? ' expanded' : '') + '">▶</span><code>' + job.id + '</code></td>' +
+                '<td>' + job.name + '</td>' +
+                '<td>' + (job.queue || currentQueue) + '</td>' +
+                '<td><span class="status-badge ' + statusInfo.cls + '">' + statusInfo.label + '</span></td>' +
+                '<td>' + job.attempts + '</td>' +
+                '<td>' + new Date(job.timestamp).toLocaleTimeString() + '</td>' +
+                '<td>' + getJobRetryMarkup(job) + '</td>';
+
+            if (job.failedReason) {
+                tr.title = 'Click to see error details';
+            } else {
+                tr.removeAttribute('title');
+            }
+        }
+
+        function getExistingJobRows(tbody) {
+            const rows = new Map();
+            Array.from(tbody.querySelectorAll('tr.expandable-row')).forEach(row => {
+                const jobId = row.dataset.jobId || row.querySelector('code')?.textContent;
+                if (jobId) rows.set(jobId, row);
             });
+            return rows;
+        }
 
-            tbody.innerHTML = '';
+        function removeObsoleteJobRows(tbody, currentJobIds) {
+            Array.from(tbody.querySelectorAll('tr.expandable-row')).forEach(row => {
+                const jobId = row.dataset.jobId || row.querySelector('code')?.textContent;
+                if (!jobId || currentJobIds.has(jobId)) return;
+                removeJobDetailRow(row);
+                row.remove();
+                expandedJobIds.delete(jobId);
+            });
+        }
+`;
+const getRenderJobsFunction = () => `
+        function renderJobs(jobs) {
+            const tbody = document.querySelector('#jobs-table tbody');
+            const jobList = Array.isArray(jobs) ? jobs : [];
 
-            if (!jobs || jobs.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--muted)">No recent jobs found</td></tr>';
+            if (jobList.length === 0) {
+                ensureEmptyJobsState(tbody);
+                expandedJobIds.clear();
                 return;
             }
 
-            jobs.forEach((job, idx) => {
-                const tr = document.createElement('tr');
-                tr.className = 'expandable-row';
-                tr.dataset.jobIndex = idx;
-                const status = (job.status || (job.failedReason ? 'failed' : 'completed')).toLowerCase();
-                const statusMap = {
-                    failed: { label: 'Failed', cls: 'status-failed' },
-                    completed: { label: 'Completed', cls: 'status-completed' },
-                    active: { label: 'Active', cls: 'status-active' },
-                    waiting: { label: 'Waiting', cls: 'status-waiting' },
-                    delayed: { label: 'Delayed', cls: 'status-delayed' },
-                    paused: { label: 'Paused', cls: 'status-paused' }
-                };
-                const statusInfo = statusMap[status] || statusMap.completed;
-
-                const retryBtn = status === 'failed'
-                    ? '<button class="retry-btn" onclick="retryJob(' + "'" + job.id + "'" + ', ' + "'" + (job.queue || currentQueue) + "'" + ')" title="Retry this job">↻ Retry</button>'
-                    : '<span style="color: var(--muted); font-size: 11px;">—</span>';
-
-                // Check if this job was previously expanded
-                const isExpanded = expandedJobIds.has(job.id);
-
-                tr.innerHTML =
-                    '<td><span class="expand-icon' + (isExpanded ? ' expanded' : '') + '">▶</span><code>' + job.id + '</code></td>' +
-                    '<td>' + job.name + '</td>' +
-                    '<td>' + (job.queue || currentQueue) + '</td>' +
-                    '<td><span class="status-badge ' +
-                    statusInfo.cls +
-                    '">' +
-                    statusInfo.label +
-                    '</span></td>' +
-                    '<td>' + job.attempts + '</td>' +
-                    '<td>' + new Date(job.timestamp).toLocaleTimeString() + '</td>' +
-                    '<td>' + retryBtn + '</td>';
-                if (job.failedReason) {
-                    tr.title = 'Click to see error details';
-                }
+            const currentJobIds = new Set(jobList.map(job => getJobId(job)));
+            removeObsoleteJobRows(tbody, currentJobIds);
 
-                tr.addEventListener('click', (e) => {
-                    if (e.target.classList.contains('retry-btn')) return;
-                    toggleJobDetails(tr, job);
-                });
+            const existingRows = getExistingJobRows(tbody);
 
-                tbody.appendChild(tr);
+            jobList.forEach((job, idx) => {
+                const jobId = getJobId(job);
+                const existingRow = existingRows.get(jobId);
+                const row = existingRow || createJobRow(job, idx);
 
-                // Auto-expand if this job was previously expanded
-                if (isExpanded) {
-                    setTimeout(() => {
-                        toggleJobDetails(tr, job);
-                    }, 10); // Small delay to ensure DOM is ready
+                if (existingRow) {
+                    updateExistingJobRow(row, job, idx);
+                }
+
+                tbody.appendChild(row);
+                if (expandedJobIds.has(jobId)) {
+                    upsertJobDetailRow(row, job, tbody);
+                } else {
+                    removeJobDetailRow(row);
                 }
             });
 
-            // Clean up expanded job IDs that are no longer in the current jobs list
-            const currentJobIds = new Set(jobs.map(job => job.id));
             expandedJobIds = new Set([...expandedJobIds].filter(id => currentJobIds.has(id)));
         }`;
 const getRenderLocksFunction = () => `
@@ -698,45 +852,20 @@ const getToggleDetailsFunctions = () => `
         function toggleJobDetails(row, job) {
             const expandIcon = row.querySelector('.expand-icon');
             const existingDetail = row.nextElementSibling;
+            const jobId = getJobId(job);
 
             if (existingDetail && existingDetail.classList.contains('detail-row')) {
                 expandIcon.classList.remove('expanded');
                 existingDetail.remove();
                 // Remove from expanded set
-                expandedJobIds.delete(job.id);
+                expandedJobIds.delete(jobId);
                 return;
             }
 
             expandIcon.classList.add('expanded');
             // Add to expanded set
-            expandedJobIds.add(job.id);
-
-            const detailRow = document.createElement('tr');
-            detailRow.className = 'detail-row';
-
-            const jobData = {
-                id: job.id,
-                name: job.name,
-                queue: job.queue || currentQueue,
-                status: job.status || (job.failedReason ? 'failed' : 'completed'),
-                attempts: job.attempts,
-                timestamp: new Date(job.timestamp).toISOString(),
-                data: job.data || {},
-                failedReason: job.failedReason || null,
-                processedOn: job.processedOn ? new Date(job.processedOn).toISOString() : null,
-                finishedOn: job.finishedOn ? new Date(job.finishedOn).toISOString() : null,
-                returnvalue: job.returnvalue
-            };
-
-            detailRow.innerHTML =
-                '<td colspan="7" class="detail-cell">' +
-                '<div class="detail-content">' +
-                '<strong style="color: var(--accent); display: block; margin-bottom: 8px;">Job Details:</strong>' +
-                '<pre>' + JSON.stringify(jobData, null, 2) + '</pre>' +
-                '</div>' +
-                '</td>';
-
-            row.parentNode.insertBefore(detailRow, row.nextSibling);
+            expandedJobIds.add(jobId);
+            upsertJobDetailRow(row, job);
         }
 
         function toggleLockDetails(row, lock) {
@@ -1031,6 +1160,9 @@ const getDashboardScriptFetch = () => `
 const getDashboardScriptRender = () => [
     getRenderStatsFunction(),
     getUpdateQueueSelectFunction(),
+    getRenderJobsStateFunction(),
+    getRenderJobsDetailHelpersFunction(),
+    getRenderJobsRowHelpersFunction(),
     getRenderJobsFunction(),
     getRenderLocksFunction(),
     getLockHelperFunctions(),

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { type RedisConfig } from './connection';
 import { type QueueDriver } from './driver';
 import { type Metrics } from './metrics';
 export type { JobPayload } from './driver';
+export { createMetrics, type JobStatus, type JobSummary, type Metrics } from './metrics';
 export { createWorker as createQueueWorker, type QueueWorker } from './worker';
 export type QueueMonitorConfig = {
     enabled?: boolean;

package/dist/index.js

@@ -1,9 +1,10 @@
-import { isNonEmptyString, Logger, queueConfig, resolveLockPrefix, Router, } from '@zintrust/core';
+import { isArray, isNonEmptyString, Logger, queueConfig, resolveLockPrefix, Router, } from '@zintrust/core';
 import { createRedisConnection } from './connection';
 import { getDashboardHtml } from './dashboard-ui';
 import { createBullMQDriver } from './driver';
 import { createMetrics } from './metrics';
 import { getRecentJobsForSelection, QueueMonitoringStream } from './QueueMonitoringService';
+export { createMetrics } from './metrics';
 export { createWorker as createQueueWorker } from './worker';
 const DEFAULTS = {
     enabled: true,
@@ -46,7 +47,7 @@ async function resolveKnownQueues(knownQueues) {
     if (typeof knownQueues === 'function') {
         return normalizeQueueNames(await knownQueues());
     }
-    if (Array.isArray(knownQueues)) {
+    if (isArray(knownQueues)) {
         return normalizeQueueNames(knownQueues);
     }
     return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zintrust/queue-monitor",
-  "version": "0.4.50",
+  "version": "0.4.60",
   "description": "Queue monitoring package for ZinTrust with BullMQ and Redis.",
   "private": false,
   "type": "module",
@@ -20,7 +20,7 @@
     "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "@zintrust/core": "^0.4.50"
+    "@zintrust/core": "^0.4.60"
   },
   "publishConfig": {
     "access": "public"
@@ -40,4 +40,4 @@
     "bullmq": "^5.71.1",
     "ioredis": "^5.10.1"
   }
-}
+}