Add clean single job functionality

src/index.ts

@@ -9,6 +9,7 @@ import { retryAll } from './routes/retryAll'
 import { retryJob } from './routes/retryJob'
 import { promoteJob } from './routes/promoteJob'
 import { cleanAll } from './routes/cleanAll'
+import { cleanJob } from './routes/cleanJob'
 import { entryPoint } from './routes/index'
 import { BullBoardQueues } from './@types/app'
 
@@ -31,6 +32,7 @@ router.get('/', entryPoint)
 router.get('/queues', wrapAsync(queuesHandler))
 router.put('/queues/:queueName/retry', wrapAsync(retryAll))
 router.put('/queues/:queueName/:id/retry', wrapAsync(retryJob))
+router.put('/queues/:queueName/:id/clean', wrapAsync(cleanJob))
 router.put('/queues/:queueName/:id/promote', wrapAsync(promoteJob))
 router.put('/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
 

src/routes/cleanJob.ts

@@ -0,0 +1,36 @@
+import { RequestHandler } from 'express'
+import { BullBoardQueues } from '../@types/app'
+
+export const cleanJob: RequestHandler = async (req, res) => {
+  try {
+    const {
+      bullBoardQueues,
+    }: { bullBoardQueues: BullBoardQueues } = req.app.locals
+    const { queueName, id } = req.params
+    const { queue } = bullBoardQueues[queueName]
+
+    if (!queue) {
+      return res.status(404).send({
+        error: 'Queue not found',
+      })
+    }
+
+    const job = await queue.getJob(id)
+
+    if (!job) {
+      return res.status(404).send({
+        error: 'Job not found',
+      })
+    }
+
+    await job.remove()
+
+    return res.sendStatus(204)
+  } catch (error) {
+    const body = {
+      error: 'queue error',
+      details: error.stack,
+    }
+    return res.status(500).send(body)
+  }
+}

src/ui/components/App.tsx

@@ -13,6 +13,7 @@ export const App = ({ basePath }: { basePath: string }) => {
     promoteJob,
     retryJob,
     retryAll,
+    cleanJob,
     cleanAllDelayed,
     cleanAllFailed,
     cleanAllCompleted,
@@ -40,6 +41,7 @@ export const App = ({ basePath }: { basePath: string }) => {
                 selectStatus={setSelectedStatuses}
                 promoteJob={promoteJob(queue.name)}
                 retryJob={retryJob(queue.name)}
+                cleanJob={cleanJob(queue.name)}
                 retryAll={retryAll(queue.name)}
                 cleanAllDelayed={cleanAllDelayed(queue.name)}
                 cleanAllFailed={cleanAllFailed(queue.name)}

src/ui/components/Job.tsx

@@ -11,6 +11,7 @@ import { Timestamp } from './Timestamp'
 type FieldProps = {
   job: AppJob
   retryJob: () => Promise<void>
+  cleanJob: () => Promise<void>
   delayedJob: () => Promise<void>
 }
 
@@ -126,6 +127,8 @@ const fieldComponents: Record<Field, React.FC<FieldProps>> = {
 
   retry: ({ retryJob }) => <button onClick={retryJob}>Retry</button>,
 
+  clean: ({ cleanJob }) => <button onClick={cleanJob}>Clean</button>,
+
   promote: ({ delayedJob }) => <button onClick={delayedJob}>Promote</button>,
 }
 
@@ -134,11 +137,13 @@ export const Job = ({
   status,
   queueName,
   retryJob,
+  cleanJob,
   promoteJob,
 }: {
   job: AppJob
   status: Status
   queueName: string
+  cleanJob: (job: AppJob) => () => Promise<void>
   retryJob: (job: AppJob) => () => Promise<void>
   promoteJob: (job: AppJob) => () => Promise<void>
 }) => {
@@ -152,6 +157,7 @@ export const Job = ({
             <Field
               job={job}
               retryJob={retryJob(job)}
+              cleanJob={cleanJob(job)}
               delayedJob={promoteJob(job)}
             />
           </td>

src/ui/components/Jobs.tsx

@@ -5,11 +5,13 @@ import { Job } from './Job'
 
 export const Jobs = ({
   retryJob,
+  cleanJob,
   promoteJob,
   queue: { jobs, name },
   status,
 }: {
   retryJob: (job: AppJob) => () => Promise<void>
+  cleanJob: (job: AppJob) => () => Promise<void>
   promoteJob: (job: AppJob) => () => Promise<void>
   queue: AppQueue
   status: Status
@@ -35,6 +37,7 @@ export const Jobs = ({
             status={status}
             queueName={name}
             retryJob={retryJob}
+            cleanJob={cleanJob}
             promoteJob={promoteJob}
           />
         ))}

src/ui/components/Queue.tsx

@@ -93,6 +93,7 @@ interface QueueProps {
   cleanAllCompleted: () => Promise<void>
   retryAll: () => Promise<void>
   retryJob: (job: AppJob) => () => Promise<void>
+  cleanJob: (job: AppJob) => () => Promise<void>
   promoteJob: (job: AppJob) => () => Promise<void>
 }
 
@@ -107,6 +108,7 @@ export const Queue = ({
   queue,
   retryAll,
   retryJob,
+  cleanJob,
   promoteJob,
   selectedStatus,
   selectStatus,
@@ -137,6 +139,7 @@ export const Queue = ({
         />
         <Jobs
           retryJob={retryJob}
+          cleanJob={cleanJob}
           promoteJob={promoteJob}
           queue={queue}
           status={selectedStatus}

src/ui/components/constants.ts

@@ -22,6 +22,7 @@ export type Field =
   | 'failedReason'
   | 'retry'
   | 'promote'
+  | 'clean'
 
 export const FIELDS: Record<Status, Field[]> = {
   active: ['attempts', 'data', 'id', 'name', 'opts', 'progress', 'timestamps'],
@@ -43,6 +44,7 @@ export const FIELDS: Record<Status, Field[]> = {
     'opts',
     'promote',
     'timestamps',
+    'clean',
   ],
   failed: [
     'attempts',
@@ -54,8 +56,9 @@ export const FIELDS: Record<Status, Field[]> = {
     'progress',
     'retry',
     'timestamps',
+    'clean',
   ],
   latest: ['attempts', 'data', 'id', 'name', 'opts', 'progress', 'timestamps'],
   paused: ['attempts', 'data', 'id', 'name', 'opts', 'timestamps'],
-  waiting: ['data', 'id', 'name', 'opts', 'timestamps'],
+  waiting: ['data', 'id', 'name', 'opts', 'timestamps', 'clean'],
 }

src/ui/components/hooks/useStore.ts

@@ -17,6 +17,7 @@ export interface Store {
   state: State
   promoteJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   retryJob: (queueName: string) => (job: AppJob) => () => Promise<void>
+  cleanJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   retryAll: (queueName: string) => () => Promise<void>
   cleanAllDelayed: (queueName: string) => () => Promise<void>
   cleanAllFailed: (queueName: string) => () => Promise<void>
@@ -79,6 +80,14 @@ export const useStore = (basePath: string): Store => {
       },
     ).then(update)
 
+  const cleanJob = (queueName: string) => (job: AppJob) => () =>
+    fetch(
+      `${basePath}/queues/${encodeURIComponent(queueName)}/${job.id}/clean`,
+      {
+        method: 'put',
+      },
+    ).then(update)
+
   const retryAll = (queueName: string) => () =>
     fetch(`${basePath}/queues/${encodeURIComponent(queueName)}/retry`, {
       method: 'put',
@@ -107,6 +116,7 @@ export const useStore = (basePath: string): Store => {
     promoteJob,
     retryJob,
     retryAll,
+    cleanJob,
     cleanAllDelayed,
     cleanAllFailed,
     cleanAllCompleted,