F/692 pause resume jobs at once

packages/api/src/handlers/pauseAll.ts

@@ -0,0 +1,13 @@
+import { BullBoardRequest, ControllerHandlerReturnType } from '../../typings/app';
+
+async function pauseAll(req: BullBoardRequest): Promise<ControllerHandlerReturnType> {
+  req.queues.forEach(async (queue) => {
+    const isPaused = await queue.isPaused();
+    if (!isPaused) {
+      queue.pause();
+    }
+  });
+  return { status: 200, body: { message: 'All queues paused' } };
+}
+
+export const pauseAllHandler = pauseAll;

packages/api/src/handlers/resumeAll.ts

@@ -0,0 +1,13 @@
+import { BullBoardRequest, ControllerHandlerReturnType } from '../../typings/app';
+
+async function resumeAll(req: BullBoardRequest): Promise<ControllerHandlerReturnType> {
+  req.queues.forEach(async (queue) => {
+    const isPaused = await queue.isPaused();
+    if (isPaused) {
+      await queue.resume();
+    }
+  });
+  return { status: 200, body: { message: 'All queues resumed' } };
+}
+
+export const resumeAllHandler = resumeAll;

packages/api/src/routes.ts

@@ -15,6 +15,8 @@ import { retryAllHandler } from './handlers/retryAll';
 import { retryJobHandler } from './handlers/retryJob';
 import { promoteAllHandler } from './handlers/promoteAll';
 import { updateJobDataHandler } from './handlers/updateJobData';
+import { pauseAllHandler } from './handlers/pauseAll';
+import { resumeAllHandler } from './handlers/resumeAll';
 
 export const appRoutes: AppRouteDefs = {
   entryPoint: {
@@ -25,6 +27,8 @@ export const appRoutes: AppRouteDefs = {
   api: [
     { method: 'get', route: '/api/redis/stats', handler: redisStatsHandler },
     { method: 'get', route: '/api/queues', handler: queuesHandler },
+    { method: 'put', route: '/api/queues/pause', handler: pauseAllHandler },
+    { method: 'put', route: '/api/queues/resume', handler: resumeAllHandler },
     {
       method: 'get',
       route: '/api/queues/:queueName/:jobId/logs',

packages/ui/src/components/OverviewDropDownActions/OverviewDropDownActions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Item, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu';
+import { Button } from '../Button/Button';
+import { DropdownContent } from '../DropdownContent/DropdownContent';
+import { EllipsisVerticalIcon } from '../Icons/EllipsisVertical';
+import { PauseIcon } from '../Icons/Pause';
+import { PlayIcon } from '../Icons/Play';
+import { useTranslation } from 'react-i18next';
+import { useQueues } from '../../hooks/useQueues';
+
+export const OverviewActions = ({
+  actions,
+}: {
+  actions: ReturnType<typeof useQueues>['actions'];
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Root>
+      <Trigger asChild>
+        <Button>
+          <EllipsisVerticalIcon />
+        </Button>
+      </Trigger>
+
+      <Portal>
+        <DropdownContent align="end">
+          <Item onClick={actions.pauseAll}>
+            <PauseIcon />
+            {t('QUEUE.ACTIONS.PAUSE_ALL')}
+          </Item>
+          <Item onClick={actions.resumeAll}>
+            <PlayIcon />
+            {t('QUEUE.ACTIONS.RESUME_ALL')}
+          </Item>
+        </DropdownContent>
+      </Portal>
+    </Root>
+  );
+};
+
+export default OverviewActions;

packages/ui/src/hooks/useQueues.ts

@@ -115,10 +115,23 @@ export function useQueues(): Omit<QueuesState, 'updateQueues'> & { actions: Queu
     jobOptions: Record<any, any>
   ) => withConfirmAndUpdate(() => api.addJob(queueName, jobName, jobData, jobOptions), '', false);
 
+  const pauseAll = withConfirmAndUpdate(
+    () => api.pauseAllQueues(),
+    t('QUEUE.ACTIONS.CONFIRM.PAUSE_ALL'),
+    confirmQueueActions
+  );
+  const resumeAll = withConfirmAndUpdate(
+    () => api.resumeAllQueues(),
+    t('QUEUE.ACTIONS.CONFIRM.RESUME_ALL'),
+    confirmQueueActions
+  );
+
   return {
     queues,
     loading,
     actions: {
+      pauseAll,
+      resumeAll,
       updateQueues,
       pollQueues,
       retryAll,

packages/ui/src/pages/OverviewPage/OverviewPage.module.css

@@ -21,3 +21,9 @@
     }
   }
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

packages/ui/src/pages/OverviewPage/OverviewPage.tsx

@@ -8,6 +8,7 @@ import { useQuery } from '../../hooks/useQuery';
 import { useQueues } from '../../hooks/useQueues';
 import { links } from '../../utils/links';
 import s from './OverviewPage.module.css';
+import OverviewDropDownActions from '../../components/OverviewDropDownActions/OverviewDropDownActions';
 
 export const OverviewPage = () => {
   const { t } = useTranslation();
@@ -20,8 +21,10 @@ export const OverviewPage = () => {
     queues?.filter((queue) => !selectedStatus || queue.counts[selectedStatus] > 0) || [];
   return (
     <section>
-      <StatusLegend />
-
+      <div className={s.header}>
+        <StatusLegend />
+        <OverviewDropDownActions actions={actions} />
+      </div>
       {queuesToView.length > 0 && (
         <ul className={s.overview}>
           {queuesToView.map((queue) => (

packages/ui/src/services/Api.ts

@@ -111,6 +111,14 @@ export class Api {
     return this.axios.put(`/queues/${encodeURIComponent(queueName)}/resume`);
   }
 
+  public pauseAllQueues() {
+    return this.axios.put(`/queues/pause`);
+  }
+
+  public resumeAllQueues() {
+    return this.axios.put(`/queues/resume`);
+  }
+
   public emptyQueue(queueName: string) {
     return this.axios.put(`/queues/${encodeURIComponent(queueName)}/empty`);
   }

packages/ui/src/static/locales/en-US/messages.json

@@ -63,6 +63,8 @@
       "CLEAN_ALL": "Clean all",
       "RESUME": "Resume",
       "PAUSE": "Pause",
+      "RESUME_ALL": "Resume all",
+      "PAUSE_ALL": "Pause all",
       "EMPTY": "Empty",
       "ADD_JOB": "Add job",
       "CONFIRM": {
@@ -71,7 +73,9 @@
         "PROMOTE_ALL": "Are you sure that you want to promote all delayed jobs?",
         "PAUSE_QUEUE": "Are you sure that you want to pause queue processing?",
         "EMPTY_QUEUE": "Are you sure that you want to empty the queue?",
-        "RESUME_QUEUE": "Are you sure that you want to resume queue processing?"
+        "RESUME_QUEUE": "Are you sure that you want to resume queue processing?",
+        "PAUSE_ALL": "Are you sure that you want to pause all queues?",
+        "RESUME_ALL": "Are you sure that you want to resume all queues?"
       }
     },
     "STATUS": {

packages/ui/typings/app.d.ts

@@ -11,6 +11,8 @@ export { Status } from '@bull-board/api/typings/app';
 export type SelectedStatuses = Record<AppQueue['name'], Status>;
 
 export interface QueueActions {
+  pauseAll: () => Promise<void>;
+  resumeAll: () => Promise<void>;
   retryAll: (queueName: string, status: JobRetryStatus) => () => Promise<void>;
   promoteAll: (queueName: string) => () => Promise<void>;
   cleanAll: (queueName: string, status: JobCleanStatus) => () => Promise<void>;