Add job logs, (#246)

closes #210
closes #97

example.js

@@ -26,7 +26,8 @@ const run = async () => {
   exampleBull.process(async (job) => {
     for (let i = 0; i <= 100; i++) {
       await sleep(Math.random())
-      job.progress(i)
+      await job.progress(i)
+      await job.log(`Processing job at interval ${i}`)
       if (Math.random() * 200 < 1) throw new Error(`Random error ${i}`)
     }
 
@@ -42,6 +43,7 @@ const run = async () => {
     for (let i = 0; i <= 100; i++) {
       await sleep(Math.random())
       await job.updateProgress(i)
+      await job.log(`Processing job at interval ${i}`)
 
       if (Math.random() * 200 < 1) throw new Error(`Random error ${i}`)
     }

src/@types/app.ts

@@ -40,6 +40,8 @@ export interface QueueAdapter {
   ): void
 
   format(field: 'data' | 'returnValue', data: any): any
+
+  getJobLogs(jobId: string): Promise<string[]>
 }
 
 export interface QueueAdapterOptions {
@@ -92,6 +94,7 @@ export interface QueueActions {
   promoteJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   retryJob: (queueName: string) => (job: AppJob) => () => Promise<void>
   cleanJob: (queueName: string) => (job: AppJob) => () => Promise<void>
+  getJobLogs: (queueName: string) => (job: AppJob) => () => Promise<string[]>
   retryAll: (queueName: string) => () => Promise<void>
   cleanAllDelayed: (queueName: string) => () => Promise<void>
   cleanAllFailed: (queueName: string) => () => Promise<void>

src/index.ts

@@ -6,6 +6,7 @@ import { cleanAll } from './routes/cleanAll'
 import { cleanJob } from './routes/cleanJob'
 import { errorHandler } from './routes/errorHandler'
 import { entryPoint } from './routes/index'
+import { jobLogs } from './routes/jobLogs'
 import { promoteJob } from './routes/promoteJob'
 
 import { queuesHandler } from './routes/queues'
@@ -36,6 +37,7 @@ router.put('/api/queues/:queueName/retry', wrapAsync(retryAll))
 router.put('/api/queues/:queueName/:id/retry', wrapAsync(retryJob))
 router.put('/api/queues/:queueName/:id/clean', wrapAsync(cleanJob))
 router.put('/api/queues/:queueName/:id/promote', wrapAsync(promoteJob))
+router.get('/api/queues/:queueName/:id/logs', wrapAsync(jobLogs))
 router.put('/api/queues/:queueName/clean/:queueStatus', wrapAsync(cleanAll))
 router.use(errorHandler)
 

src/queueAdapters/base.ts

@@ -46,6 +46,8 @@ export abstract class BaseAdapter implements QueueAdapter {
     end?: number,
   ): Promise<(Job | JobMq)[]>
 
+  public abstract getJobLogs(id: string): Promise<string[]>
+
   public abstract getName(): string
 
   public abstract getClient(): Promise<Redis.Redis>

src/queueAdapters/bull.ts

@@ -3,12 +3,11 @@ import {
   JobCleanStatus,
   JobCounts,
   JobStatus,
-  QueueAdapter,
   QueueAdapterOptions,
 } from '../@types/app'
 import { BaseAdapter } from './base'
 
-export class BullAdapter extends BaseAdapter implements QueueAdapter {
+export class BullAdapter extends BaseAdapter {
   constructor(public queue: Queue, options: Partial<QueueAdapterOptions> = {}) {
     super(options)
   }
@@ -41,4 +40,8 @@ export class BullAdapter extends BaseAdapter implements QueueAdapter {
   public getJobCounts(..._jobStatuses: JobStatus[]): Promise<JobCounts> {
     return (this.queue.getJobCounts() as unknown) as Promise<JobCounts>
   }
+
+  public getJobLogs(id: string): Promise<string[]> {
+    return this.queue.getJobLogs(id).then(({ logs }) => logs)
+  }
 }

src/queueAdapters/bullMQ.ts

@@ -46,4 +46,8 @@ export class BullMQAdapter extends BaseAdapter {
       ...jobStatuses,
     ) as unknown) as Promise<JobCounts>
   }
+
+  public getJobLogs(id: string): Promise<string[]> {
+    return this.queue.getJobLogs(id).then(({ logs }) => logs)
+  }
 }

src/routes/jobLogs.ts

@@ -0,0 +1,28 @@
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
+import { BullBoardQueues } from '../@types/app'
+
+export const jobLogs: RequestHandler = async (req: Request, res: Response) => {
+  const { bullBoardQueues } = req.app.locals as {
+    bullBoardQueues: BullBoardQueues
+  }
+  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',
+    })
+  }
+
+  const logs = await queue.getJobLogs(id)
+
+  return res.json(logs)
+}

src/ui/components/JobCard/Details/Details.module.css

@@ -74,6 +74,7 @@
 
 .tabContent > div {
   overflow: auto;
+  padding-bottom: 2rem;
   height: 100%;
 }
 

src/ui/components/JobCard/Details/Details.tsx

@@ -4,14 +4,16 @@ import { useDetailsTabs } from '../../../hooks/useDetailsTabs'
 import { Status } from '../../constants'
 import { Button } from '../Button/Button'
 import s from './Details.module.css'
+import { DetailsContent } from './DetailsContent/DetailsContent'
 
 interface DetailsProps {
   job: AppJob
   status: Status
+  actions: { getJobLogs: () => Promise<string[]> }
 }
 
-export const Details = ({ status, job }: DetailsProps) => {
-  const { tabs, getTabContent } = useDetailsTabs(status)
+export const Details = ({ status, job, actions }: DetailsProps) => {
+  const { tabs, selectedTab } = useDetailsTabs(status)
 
   if (tabs.length === 0) {
     return null
@@ -29,7 +31,13 @@ export const Details = ({ status, job }: DetailsProps) => {
         ))}
       </ul>
       <div className={s.tabContent}>
-        <div>{getTabContent(job)}</div>
+        <div>
+          <DetailsContent
+            selectedTab={selectedTab}
+            job={job}
+            actions={actions}
+          />
+        </div>
       </div>
     </div>
   )

src/ui/components/JobCard/Details/DetailsContent/DetailsContent.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { AppJob } from '../../../../../@types/app'
+import { TabsType } from '../../../../hooks/useDetailsTabs'
+import { Highlight } from '../../../Highlight/Highlight'
+import { JobLogs } from './JobLogs/JobLogs'
+
+interface DetailsContentProps {
+  job: AppJob
+  selectedTab: TabsType
+  actions: {
+    getJobLogs: () => Promise<string[]>
+  }
+}
+
+export const DetailsContent = ({
+  selectedTab,
+  job: { stacktrace, data, returnValue, opts, failedReason },
+  actions,
+}: DetailsContentProps) => {
+  switch (selectedTab) {
+    case 'Data':
+      return (
+        <Highlight language="json">
+          {JSON.stringify({ data, returnValue }, null, 2)}
+        </Highlight>
+      )
+    case 'Options':
+      return (
+        <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>
+      )
+    case 'Error':
+      return (
+        <>
+          {stacktrace.length === 0 ? (
+            <div className="error">{!!failedReason ? failedReason : 'NA'}</div>
+          ) : (
+            <Highlight language="stacktrace" key="stacktrace">
+              {stacktrace}
+            </Highlight>
+          )}
+        </>
+      )
+    case 'Logs':
+      return <JobLogs actions={actions} />
+    default:
+      return null
+  }
+}

src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css

@@ -0,0 +1,3 @@
+.jobLogs {
+  margin: 0;
+}

src/ui/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import s from './JobLogs.module.css'
+
+interface JobLogsProps {
+  actions: {
+    getJobLogs: () => Promise<string[]>
+  }
+}
+
+export const JobLogs = ({ actions }: JobLogsProps) => {
+  const [logs, setLogs] = useState<string[]>([])
+
+  useEffect(() => {
+    actions.getJobLogs().then((logs) => setLogs(logs))
+  }, [])
+
+  if (!Array.isArray(logs) || !logs.length) {
+    return null
+  }
+
+  return (
+    <ul className={s.jobLogs}>
+      {logs.map((log, idx) => (
+        <li key={idx}>{log}</li>
+      ))}
+    </ul>
+  )
+}

src/ui/components/JobCard/JobCard.tsx

@@ -15,6 +15,7 @@ interface JobCardProps {
     promoteJob: () => Promise<void>
     retryJob: () => Promise<void>
     cleanJob: () => Promise<void>
+    getJobLogs: () => Promise<string[]>
   }
 }
 
@@ -38,7 +39,7 @@ export const JobCard = ({
         {!readOnlyMode && <JobActions status={status} actions={actions} />}
       </div>
       <div className={s.content}>
-        <Details status={status} job={job} />
+        <Details status={status} job={job} actions={actions} />
         {typeof job.progress === 'number' && (
           <Progress
             percentage={job.progress}

src/ui/components/QueuePage/QueuePage.tsx

@@ -44,6 +44,7 @@ export const QueuePage = ({
             cleanJob: actions.cleanJob(queue?.name)(job),
             promoteJob: actions.promoteJob(queue?.name)(job),
             retryJob: actions.retryJob(queue?.name)(job),
+            getJobLogs: actions.getJobLogs(queue?.name)(job),
           }}
           readOnlyMode={queue?.readOnlyMode}
         />

src/ui/hooks/useDetailsTabs.tsx

@@ -1,18 +1,20 @@
-import React, { useEffect, useState } from 'react'
-import { AppJob } from '../../@types/app'
+import { useEffect, useState } from 'react'
 import { Status, STATUSES } from '../components/constants'
-import { Highlight } from '../components/Highlight/Highlight'
 
-const regularItems = ['Data', 'Options']
+const regularItems = ['Data', 'Options', 'Logs'] as const
+
+export type TabsType = typeof regularItems[number] | 'Error'
 
 export function useDetailsTabs(currentStatus: Status) {
-  const [tabs, updateTabs] = useState<string[]>([])
+  const [tabs, updateTabs] = useState<TabsType[]>([])
   const [selectedTabIdx, setSelectedTabIdx] = useState(0)
   const selectedTab = tabs[selectedTabIdx]
 
   useEffect(() => {
     updateTabs(
-      (currentStatus === STATUSES.failed ? ['Error'] : []).concat(regularItems),
+      currentStatus === STATUSES.failed
+        ? ['Error', ...regularItems]
+        : [...regularItems],
     )
   }, [currentStatus])
 
@@ -23,43 +25,5 @@ export function useDetailsTabs(currentStatus: Status) {
       selectTab: () => setSelectedTabIdx(index),
     })),
     selectedTab,
-    getTabContent: ({
-      data,
-      returnValue,
-      opts,
-      failedReason,
-      stacktrace,
-    }: AppJob) => {
-      switch (selectedTab) {
-        case 'Data':
-          return (
-            <Highlight language="json">
-              {JSON.stringify({ data, returnValue }, null, 2)}
-            </Highlight>
-          )
-        case 'Options':
-          return (
-            <Highlight language="json">
-              {JSON.stringify(opts, null, 2)}
-            </Highlight>
-          )
-        case 'Error':
-          return (
-            <>
-              {stacktrace.length === 0 ? (
-                <div className="error">
-                  {!!failedReason ? failedReason : 'NA'}
-                </div>
-              ) : (
-                <Highlight language="stacktrace" key="stacktrace">
-                  {stacktrace}
-                </Highlight>
-              )}
-            </>
-          )
-        default:
-          return null
-      }
-    },
   }
 }

src/ui/hooks/useStore.ts

@@ -86,6 +86,9 @@ export const useStore = (api: Api): Store => {
   const cleanAllCompleted = (queueName: string) => () =>
     api.cleanAllCompleted(queueName).then(update)
 
+  const getJobLogs = (queueName: string) => (job: AppJob) => () =>
+    api.getJobLogs(queueName, job.id)
+
   return {
     state,
     actions: {
@@ -96,6 +99,7 @@ export const useStore = (api: Api): Store => {
       cleanAllDelayed,
       cleanAllFailed,
       cleanAllCompleted,
+      getJobLogs,
       setSelectedStatuses,
     },
     selectedStatuses,

src/ui/services/Api.ts

@@ -1,7 +1,7 @@
 import Axios, { AxiosInstance, AxiosResponse } from 'axios'
+import { toast } from 'react-toastify'
 import { GetQueues } from '../../@types/api'
 import { SelectedStatuses } from '../../@types/app'
-import { toast } from 'react-toastify'
 
 export class Api {
   private axios: AxiosInstance
@@ -68,6 +68,15 @@ export class Api {
     )
   }
 
+  public getJobLogs(
+    queueName: string,
+    jobId: string | number | undefined,
+  ): Promise<string[]> {
+    return this.axios.get(
+      `/queues/${encodeURIComponent(queueName)}/${jobId}/logs`,
+    )
+  }
+
   private handleResponse(response: AxiosResponse): any {
     return response.data
   }