F/692 pause resume jobs at once (#868)

* feat(OverviewActions): add OverviewActions component with pause and resume functionality; update OverviewPage layout and styles - Introduced a new `OverviewActions` component that provides pause and resume actions for queues. - Updated `OverviewPage` to include the new `OverviewActions` component in the header. - Enhanced CSS for the header layout to improve UI alignment and spacing. - Added new translation keys for pause and resume actions in the localization files. * feat(OverviewActions): integrate pause and resume actions into OverviewActions component - Updated the OverviewActions component to accept actions as props, enabling pause and resume functionality for queues. - Implemented pauseAll and resumeAll actions in the useQueues hook. - Modified OverviewPage to pass the actions prop to OverviewActions, enhancing the user interface for queue management. * feat(api): add pause and resume queue functionality - Introduced `pauseAllHandler` and `resumeAllHandler` to handle pausing and resuming all queues. - Updated `appRoutes` to include new API endpoints for pausing and resuming queues. - Enhanced `useQueues` hook to integrate API calls for pausing and resuming queues with user confirmation. - Added corresponding methods in the `Api` service for making requests to the new endpoints. * refactor: renamed component OverviewActions is renamed to OverviewDropDownActions * feat: check for the queue pause state before resuming or pausing --------- Co-authored-by: ahmad anwar <[email protected]>
felixmosh · Jan 19, 2025 · 62ecfbb · 62ecfbb
1 parent 11cf428
commit 62ecfbb
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 3 deletions.
diff --git a/packages/api/src/handlers/pauseAll.ts b/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;
diff --git a/packages/api/src/handlers/resumeAll.ts b/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;
diff --git a/packages/api/src/routes.ts b/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',

diff --git a/packages/ui/src/components/OverviewDropDownActions/OverviewDropDownActions.tsx b/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;
diff --git a/packages/ui/src/hooks/useQueues.ts b/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,

diff --git a/packages/ui/src/pages/OverviewPage/OverviewPage.module.css b/packages/ui/src/pages/OverviewPage/OverviewPage.module.css
@@ -21,3 +21,9 @@
     }
   }
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/packages/ui/src/pages/OverviewPage/OverviewPage.tsx b/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) => (

diff --git a/packages/ui/src/services/Api.ts b/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`);
   }

diff --git a/packages/ui/src/static/locales/en-US/messages.json b/packages/ui/src/static/locales/en-US/messages.json
@@ -64,6 +64,8 @@
       "CLEAN_ALL": "Clean all",
       "RESUME": "Resume",
       "PAUSE": "Pause",
+      "RESUME_ALL": "Resume all",
+      "PAUSE_ALL": "Pause all",
       "EMPTY": "Empty",
       "ADD_JOB": "Add job",
       "CONFIRM": {
@@ -72,7 +74,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": {

diff --git a/packages/ui/typings/app.d.ts b/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>;