Add promote button for delayed jobs

src/index.ts

@@ -7,6 +7,7 @@ import { Queue as QueueMq } from 'bullmq'
 import { queuesHandler } from './routes/queues'
 import { retryAll } from './routes/retryAll'
 import { retryJob } from './routes/retryJob'
+import { promoteJob } from './routes/promoteJob'
 import { cleanAll } from './routes/cleanAll'
 import { entryPoint } from './routes/index'
 import { BullBoardQueues } from './@types/app'
@@ -30,6 +31,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/promote', wrapAsync(promoteJob))
 router.put('/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
 
 export const setQueues = (bullQueues: Queue[] | QueueMq[]) => {

src/routes/promoteJob.ts

@@ -0,0 +1,35 @@
+import { RequestHandler } from 'express'
+import { BullBoardQueues } from '../@types/app'
+
+export const promoteJob: 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.promote()
+
+    return res.sendStatus(204)
+  } catch (e) {
+    return res.status(500).send({
+      error: 'queue error',
+      details: e.stack,
+    })
+  }
+}

src/ui/components/App.tsx

@@ -10,6 +10,7 @@ export const App = ({ basePath }: { basePath: string }) => {
     state,
     selectedStatuses,
     setSelectedStatuses,
+    promoteJob,
     retryJob,
     retryAll,
     cleanAllDelayed,
@@ -36,6 +37,7 @@ export const App = ({ basePath }: { basePath: string }) => {
                 key={queue.name}
                 selectedStatus={selectedStatuses[queue.name]}
                 selectStatus={setSelectedStatuses}
+                promoteJob={promoteJob(queue.name)}
                 retryJob={retryJob(queue.name)}
                 retryAll={retryAll(queue.name)}
                 cleanAllDelayed={cleanAllDelayed(queue.name)}

src/ui/components/Queue.tsx

@@ -95,6 +95,7 @@ const CheckIcon = () => (
 type FieldProps = {
   job: AppJob
   retryJob: () => Promise<void>
+  delayedJob: () => Promise<void>
 }
 
 const fieldComponents: Record<Field, React.FC<FieldProps>> = {
@@ -189,14 +190,18 @@ const fieldComponents: Record<Field, React.FC<FieldProps>> = {
   ),
 
   retry: ({ retryJob }) => <button onClick={retryJob}>Retry</button>,
+
+  promote: ({ delayedJob }) => <button onClick={delayedJob}>Promote</button>,
 }
 
 const Jobs = ({
   retryJob,
+  promoteJob,
   queue: { jobs, name },
   status,
 }: {
   retryJob: (job: AppJob) => () => Promise<void>
+  promoteJob: (job: AppJob) => () => Promise<void>
   queue: AppQueue
   status: Status
 }) => {
@@ -221,7 +226,11 @@ const Jobs = ({
 
               return (
                 <td key={`${name}-${job.id}-${field}`}>
-                  <Field job={job} retryJob={retryJob(job)} />
+                  <Field
+                    job={job}
+                    retryJob={retryJob(job)}
+                    delayedJob={promoteJob(job)}
+                  />
                 </td>
               )
             })}
@@ -281,6 +290,7 @@ interface QueueProps {
   cleanAllFailed: () => Promise<void>
   retryAll: () => Promise<void>
   retryJob: (job: AppJob) => () => Promise<void>
+  promoteJob: (job: AppJob) => () => Promise<void>
 }
 
 // We need to extend so babel doesn't think it's JSX
@@ -293,6 +303,7 @@ export const Queue = ({
   queue,
   retryAll,
   retryJob,
+  promoteJob,
   selectedStatus,
   selectStatus,
 }: QueueProps) => (
@@ -318,7 +329,12 @@ export const Queue = ({
           queue={queue}
           status={selectedStatus}
         />
-        <Jobs retryJob={retryJob} queue={queue} status={selectedStatus} />
+        <Jobs
+          retryJob={retryJob}
+          promoteJob={promoteJob}
+          queue={queue}
+          status={selectedStatus}
+        />
       </>
     )}
   </section>

src/ui/components/constants.ts

@@ -21,6 +21,7 @@ export type Field =
   | 'delay'
   | 'failedReason'
   | 'retry'
+  | 'promote'
 
 export const FIELDS: Record<Status, Field[]> = {
   active: ['attempts', 'data', 'id', 'name', 'opts', 'progress', 'timestamps'],
@@ -33,7 +34,16 @@ export const FIELDS: Record<Status, Field[]> = {
     'progress',
     'timestamps',
   ],
-  delayed: ['attempts', 'data', 'delay', 'id', 'name', 'opts', 'timestamps'],
+  delayed: [
+    'attempts',
+    'data',
+    'delay',
+    'id',
+    'name',
+    'opts',
+    'promote',
+    'timestamps',
+  ],
   failed: [
     'attempts',
     'failedReason',

src/ui/components/hooks/useStore.ts

@@ -16,6 +16,7 @@ type SelectedStatuses = Record<AppQueue['name'], Status>
 
 export interface Store {
   state: State
+  promoteJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   retryJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   retryAll: (queueName: string) => () => Promise<void>
   cleanAllDelayed: (queueName: string) => () => Promise<void>
@@ -62,6 +63,11 @@ export const useStore = (basePath: string): Store => {
       .then(res => (res.ok ? res.json() : Promise.reject(res)))
       .then(data => setState({ data, loading: false }))
 
+  const promoteJob = (queueName: string) => (job: AppJob) => () =>
+    fetch(`${basePath}/queues/${queueName}/${job.id}/promote`, {
+      method: 'put',
+    }).then(update)
+
   const retryJob = (queueName: string) => (job: AppJob) => () =>
     fetch(`${basePath}/queues/${queueName}/${job.id}/retry`, {
       method: 'put',
@@ -84,6 +90,7 @@ export const useStore = (basePath: string): Store => {
 
   return {
     state,
+    promoteJob,
     retryJob,
     retryAll,
     cleanAllDelayed,