Add "empty queue" action

packages/api/src/handlers/emptyQueue.ts

@@ -0,0 +1,14 @@
+import { BullBoardRequest, ControllerHandlerReturnType } from '../../typings/app';
+import { queueProvider } from '../providers/queue';
+import { BaseAdapter } from '../queueAdapters/base';
+
+async function emptyQueue(
+  _req: BullBoardRequest,
+  queue: BaseAdapter
+): Promise<ControllerHandlerReturnType> {
+  await queue.empty();
+
+  return { status: 200, body: {} };
+}
+
+export const emptyQueueHandler = queueProvider(emptyQueue);

packages/api/src/queueAdapters/base.ts

@@ -61,4 +61,6 @@ export abstract class BaseAdapter {
   public abstract pause(): Promise<void>;
 
   public abstract resume(): Promise<void>;
+
+  public abstract empty(): Promise<void>;
 }

packages/api/src/queueAdapters/bull.ts

@@ -60,4 +60,10 @@ export class BullAdapter extends BaseAdapter {
   public resume(): Promise<void> {
     return this.queue.resume();
   }
+
+  public empty(): Promise<void> {
+    return this.queue.empty();
+  }
 }
+
+

packages/api/src/queueAdapters/bullMQ.ts

@@ -49,4 +49,8 @@ export class BullMQAdapter extends BaseAdapter {
   public resume(): Promise<void> {
     return this.queue.resume();
   }
+
+  public empty(): Promise<void> {
+    return this.queue.drain();
+  }
 }

packages/api/src/routes.ts

@@ -1,6 +1,7 @@
 import { AppRouteDefs } from '../typings/app';
 import { cleanAllHandler } from './handlers/cleanAll';
 import { cleanJobHandler } from './handlers/cleanJob';
+import { emptyQueueHandler } from './handlers/emptyQueue';
 import { entryPoint } from './handlers/entryPoint';
 import { jobLogsHandler } from './handlers/jobLogs';
 import { pauseQueueHandler } from './handlers/pauseQueue';
@@ -45,6 +46,11 @@ export const appRoutes: AppRouteDefs = {
       route: '/api/queues/:queueName/resume',
       handler: resumeQueueHandler,
     },
+    {
+      method: 'put',
+      route: '/api/queues/:queueName/empty',
+      handler: emptyQueueHandler,
+    },
     {
       method: 'put',
       route: '/api/queues/:queueName/:jobId/retry',

packages/ui/src/components/QueueDropdownActions/QueueDropdownActions.tsx

@@ -5,6 +5,7 @@ import { Store } from '../../hooks/useStore';
 import { EllipsisVerticalIcon } from '../Icons/EllipsisVertical';
 import { PauseIcon } from '../Icons/Pause';
 import { PlayIcon } from '../Icons/Play';
+import { TrashIcon } from '../Icons/Trash'
 import { Button } from '../JobCard/Button/Button';
 import s from './QueueDropdownActions.module.css';
 
@@ -42,6 +43,15 @@ export const QueueDropdownActions = ({
             </>
           )}
         </Item>
+        <Item
+          className={s.item}
+          onSelect={
+            actions.emptyQueue(queue.name)
+          }
+        >          
+          <TrashIcon />
+          Empty
+        </Item>
       </Content>
     </Portal>
   </Root>

packages/ui/src/hooks/useStore.ts

@@ -144,6 +144,13 @@ export const useStore = (): Store => {
       confirmQueueActions
     );
 
+  const emptyQueue = (queueName: string) =>
+    withConfirmAndUpdate(
+      () => api.emptyQueue(queueName),
+      'Are you sure that you want to empty the queue?',
+      confirmQueueActions
+    );
+
   const getJobLogs = (queueName: string) => (job: AppJob) => () =>
     api.getJobLogs(queueName, job.id);
 
@@ -160,6 +167,7 @@ export const useStore = (): Store => {
       getJobLogs,
       pauseQueue,
       resumeQueue,
+      emptyQueue,
     },
     confirmProps,
     selectedStatuses,

packages/ui/src/services/Api.ts

@@ -73,6 +73,10 @@ export class Api {
     return this.axios.put(`/queues/${encodeURIComponent(queueName)}/resume`);
   }
 
+  public emptyQueue(queueName: string) {
+    return this.axios.put(`/queues/${encodeURIComponent(queueName)}/empty`);
+  }
+
   private handleResponse(response: AxiosResponse): any {
     return response.data;
   }

packages/ui/typings/app.d.ts

@@ -15,4 +15,5 @@ export interface QueueActions {
   cleanAllCompleted: (queueName: string) => () => Promise<void>;
   pauseQueue: (queueName: string) => () => Promise<void>;
   resumeQueue: (queueName: string) => () => Promise<void>;
+  emptyQueue: (queueName: string) => () => Promise<void>;
 }