Improve performance

packages/api/src/handlers/queues.ts

@@ -93,19 +93,21 @@ async function getAppQueues(
   pairs: [string, BaseAdapter][],
   query: Record<string, any>
 ): Promise<AppQueue[]> {
-  return await Promise.all(
+  return Promise.all(
     pairs.map(async ([queueName, queue]) => {
+      const isActiveQueue = query.activeQueue === queueName;
+
       const status =
-        !query[queueName] || query[queueName] === 'latest'
-          ? allStatuses
-          : [query[queueName] as JobStatus];
+        !isActiveQueue || query.status === 'latest' ? allStatuses : [query.status as JobStatus];
       const currentPage = +query.page || 1;
 
       const counts = await queue.getJobCounts(...allStatuses);
-
       const isPaused = await queue.isPaused();
+
       const pagination = getPagination(status, counts, currentPage);
-      const jobs = await queue.getJobs(status, pagination.range.start, pagination.range.end);
+      const jobs = isActiveQueue
+        ? await queue.getJobs(status, pagination.range.start, pagination.range.end)
+        : [];
 
       return {
         name: queueName,

packages/ui/src/hooks/useActiveQueue.ts

@@ -0,0 +1,13 @@
+import { matchPath } from 'react-router';
+import { useLocation } from 'react-router-dom';
+
+export function useActiveQueue(): string | undefined {
+  const { pathname } = useLocation();
+  const match = matchPath<{ name: string }>(pathname, {
+    path: '/queue/:name',
+    exact: true,
+    strict: true,
+  });
+
+  return match?.params.name;
+}

packages/ui/src/hooks/useInterval.ts

@@ -1,10 +1,14 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+/**
+ * Based on https://usehooks-ts.com/react-hook/use-interval
+ * */
 
 export function useInterval(callback: () => void, delay: number | null, deps: any[] = []): void {
   const savedCallback = useRef(callback);
 
   // Remember the latest callback if it changes.
-  useEffect(() => {
+  useLayoutEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
@@ -16,8 +20,20 @@ export function useInterval(callback: () => void, delay: number | null, deps: an
     }
 
     savedCallback.current();
+    let isLastFinished = true;
+
+    const id = setInterval(async () => {
+      if (!isLastFinished) {
+        return;
+      }
 
-    const id = setInterval(() => savedCallback.current(), delay);
+      isLastFinished = false;
+      try {
+        await savedCallback.current();
+      } finally {
+        isLastFinished = true;
+      }
+    }, delay);
 
     return () => {
       clearInterval(id);

packages/ui/src/hooks/useStore.ts

@@ -1,13 +1,14 @@
+import { AppJob } from '@bull-board/api/typings/app';
+import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import { useState } from 'react';
+import { QueueActions, SelectedStatuses } from '../../typings/app';
 
 import { Api } from '../services/Api';
+import { useActiveQueue } from './useActiveQueue';
+import { ConfirmApi, useConfirm } from './useConfirm';
 import { useInterval } from './useInterval';
-import { useSelectedStatuses } from './useSelectedStatuses';
-import { QueueActions, SelectedStatuses } from '../../typings/app';
-import { AppJob } from '@bull-board/api/typings/app';
-import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import { useQuery } from './useQuery';
-import { ConfirmApi, useConfirm } from './useConfirm';
+import { useSelectedStatuses } from './useSelectedStatuses';
 
 const interval = 5000;
 
@@ -25,6 +26,8 @@ export interface Store {
 
 export const useStore = (api: Api): Store => {
   const query = useQuery();
+  const activeQueue = useActiveQueue();
+
   const [state, setState] = useState<State>({
     data: null,
     loading: true,
@@ -35,7 +38,11 @@ export const useStore = (api: Api): Store => {
 
   const update = () =>
     api
-      .getQueues({ status: selectedStatuses, page: query.get('page') || '1' })
+      .getQueues({
+        activeQueue,
+        status: activeQueue ? selectedStatuses[activeQueue] : undefined,
+        page: query.get('page') || '1',
+      })
       .then((data) => {
         setState({ data, loading: false });
       })
@@ -101,15 +108,17 @@ export const useStore = (api: Api): Store => {
       'Are you sure that you want to clean all completed jobs?'
     );
 
-  const pauseQueue = (queueName: string) =>withConfirmAndUpdate(
-    () => api.pauseQueue(queueName),
-    'Are you sure that you want to pause queue processing?'
-  );
+  const pauseQueue = (queueName: string) =>
+    withConfirmAndUpdate(
+      () => api.pauseQueue(queueName),
+      'Are you sure that you want to pause queue processing?'
+    );
 
-  const resumeQueue = (queueName: string) =>withConfirmAndUpdate(
-    () => api.resumeQueue(queueName),
-    'Are you sure that you want to resume queue processing?'
-  );
+  const resumeQueue = (queueName: string) =>
+    withConfirmAndUpdate(
+      () => api.resumeQueue(queueName),
+      'Are you sure that you want to resume queue processing?'
+    );
 
   const getJobLogs = (queueName: string) => (job: AppJob) => () =>
     api.getJobLogs(queueName, job.id);
@@ -126,7 +135,7 @@ export const useStore = (api: Api): Store => {
       cleanAllCompleted,
       getJobLogs,
       pauseQueue,
-      resumeQueue
+      resumeQueue,
     },
     confirmProps,
     selectedStatuses,

packages/ui/src/services/Api.ts

@@ -1,8 +1,7 @@
-import { AppJob } from '@bull-board/api/typings/app';
+import { AppJob, Status } from '@bull-board/api/typings/app';
 import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import Axios, { AxiosInstance, AxiosResponse } from 'axios';
 import { toast } from 'react-toastify';
-import { SelectedStatuses } from '../../typings/app';
 
 export class Api {
   private axios: AxiosInstance;
@@ -13,13 +12,15 @@ export class Api {
   }
 
   public getQueues({
+    activeQueue,
     status,
     page,
   }: {
-    status: SelectedStatuses;
+    activeQueue?: string;
+    status?: Status;
     page: string;
   }): Promise<GetQueuesResponse> {
-    return this.axios.get(`/queues`, { params: { ...status, page } });
+    return this.axios.get(`/queues`, { params: { activeQueue, status, page } });
   }
 
   public retryAll(queueName: string): Promise<void> {
@@ -39,19 +40,27 @@ export class Api {
   }
 
   public cleanJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/clean`);
+    return this.axios.put(
+      `/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/clean`
+    );
   }
 
   public retryJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/retry`);
+    return this.axios.put(
+      `/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/retry`
+    );
   }
 
   public promoteJob(queueName: string, jobId: AppJob['id']): Promise<void> {
-    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/promote`);
+    return this.axios.put(
+      `/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/promote`
+    );
   }
 
   public getJobLogs(queueName: string, jobId: AppJob['id']): Promise<string[]> {
-    return this.axios.get(`/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/logs`);
+    return this.axios.get(
+      `/queues/${encodeURIComponent(queueName)}/${encodeURIComponent(`${jobId}`)}/logs`
+    );
   }
 
   public pauseQueue(queueName: string) {