Logs in details panel

src/@types/app.ts

@@ -26,7 +26,7 @@ export interface QueueAdapter {
     start?: number,
     end?: number,
   ): Promise<(Job | JobMq)[]>
-
+  getLogs(id: string): Promise<string[]>
   getJobCounts(...jobStatuses: JobStatus[]): Promise<JobCounts>
 
   clean(queueStatus: JobCleanStatus, graceTimeMs: number): Promise<any>

src/index.ts

@@ -1,12 +1,13 @@
-import express from 'express'
-import { ParamsDictionary, RequestHandler } from 'express-serve-static-core'
-import path from 'path'
 import { BullBoardQueues, QueueAdapter } from './@types/app'
+import { ParamsDictionary, RequestHandler } from 'express-serve-static-core'
+
 import { cleanAll } from './routes/cleanAll'
 import { cleanJob } from './routes/cleanJob'
 import { entryPoint } from './routes/index'
+import express from 'express'
+import { getLogs } from './routes/getLogs'
+import path from 'path'
 import { promoteJob } from './routes/promoteJob'
-
 import { queuesHandler } from './routes/queues'
 import { retryAll } from './routes/retryAll'
 import { retryJob } from './routes/retryJob'
@@ -31,6 +32,7 @@ router.use('/static', express.static(path.resolve(__dirname, '../static')))
 
 router.get(['/', '/queue/:queueName'], entryPoint)
 router.get('/api/queues', wrapAsync(queuesHandler))
+router.get('/api/queues/:queueName/:id/logs', wrapAsync(getLogs))
 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))

src/queueAdapters/bull.ts

@@ -25,6 +25,10 @@ export class BullAdapter implements QueueAdapter {
     return this.queue.getJob(id)
   }
 
+  public getLogs(id: string): Promise<string[]> {
+    return this.queue.getJobLogs(id).then(({logs}) => logs);
+  }
+
   public getJobs(
     jobStatuses: JobStatus[],
     start?: number,

src/queueAdapters/bullMQ.ts

@@ -28,6 +28,10 @@ export class BullMQAdapter implements QueueAdapter {
     return this.queue.getJob(id)
   }
 
+  public getLogs(id: string): Promise<string[]> {
+    return this.queue.getJobLogs(id).then(({logs}) => logs);
+  }
+
   public getJobs(
     jobStatuses: JobStatus[],
     start?: number,

src/routes/getLogs.ts

@@ -0,0 +1,27 @@
+import { Request, RequestHandler, Response } from 'express-serve-static-core'
+
+import { BullBoardQueues } from '../@types/app'
+
+export const getLogs: RequestHandler = async (req: Request, res: Response) => {
+  try {
+    const { queueName, id } = req.params
+    const { bullBoardQueues } = req.app.locals as {
+      bullBoardQueues: BullBoardQueues
+    }
+    const { queue } = bullBoardQueues[queueName]
+    if (!queue) {
+      return res.status(404).send({ error: 'queue not found' })
+    }
+
+    const logs = await queue.getLogs(id)
+
+    return res.send(logs)
+  } catch (e) {
+    const body = {
+      error: 'queue error',
+      details: e.stack,
+    }
+
+    return res.status(500).send(body)
+  }
+}

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

@@ -1,17 +1,18 @@
-import React from 'react'
 import { AppJob } from '../../../../@types/app'
-import { useDetailsTabs } from '../../../hooks/useDetailsTabs'
-import { Status } from '../../constants'
 import { Button } from '../Button/Button'
+import React from 'react'
+import { Status } from '../../constants'
 import s from './Details.module.css'
+import { useDetailsTabs } from '../../../hooks/useDetailsTabs'
 
 interface DetailsProps {
   job: AppJob
   status: Status
+  queueName: string
 }
 
-export const Details = ({ status, job }: DetailsProps) => {
-  const { tabs, getTabContent } = useDetailsTabs(status)
+export const Details = ({ status, job, queueName }: DetailsProps) => {
+  const { tabs, getTabContent } = useDetailsTabs(status, queueName)
 
   if (tabs.length === 0) {
     return null

src/ui/components/JobCard/JobCard.tsx

@@ -1,23 +1,24 @@
-import React from 'react'
 import { AppJob } from '../../../@types/app'
-import { Status } from '../constants'
 import { Details } from './Details/Details'
 import { JobActions } from './JobActions/JobActions'
-import s from './JobCard.module.css'
 import { Progress } from './Progress/Progress'
+import React from 'react'
+import { Status } from '../constants'
 import { Timeline } from './Timeline/Timeline'
+import s from './JobCard.module.css'
 
 interface JobCardProps {
   job: AppJob
   status: Status
+  queueName: string
   actions: {
     promoteJob: () => Promise<void>
     retryJob: () => Promise<void>
     cleanJob: () => Promise<void>
   }
 }
 
-export const JobCard = ({ job, status, actions }: JobCardProps) => (
+export const JobCard = ({ job, queueName, status, actions }: JobCardProps) => (
   <div className={s.card}>
     <div className={s.sideInfo}>
       <span title={`#${job.id}`}>#{job.id}</span>
@@ -32,7 +33,7 @@ export const JobCard = ({ job, status, actions }: JobCardProps) => (
         <JobActions status={status} actions={actions} />
       </div>
       <div className={s.content}>
-        <Details status={status} job={job} />
+        <Details status={status} job={job} queueName={queueName} />
         {typeof job.progress === 'number' && (
           <Progress
             percentage={job.progress}

src/ui/components/Logs/Logs.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+
+const basePath = document.head.querySelector('base')?.getAttribute('href') || ''
+
+export const Logs = ({
+  queueName,
+  jobId,
+}: {
+  queueName: string
+  jobId: string | number | undefined
+}) => {
+  const [state, setState] = useState([])
+
+  useEffect(() => {
+    fetch(
+      `${basePath}/api/queues/${encodeURIComponent(queueName)}/${jobId}/logs`
+    )
+    .then((res) => res.json())
+    .then((logs) => setState(logs))
+  }, [jobId])
+
+  return (
+    <ul>
+      {state.map((line, i) => (
+        <li key={i}>
+          <pre>{line}</pre>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/ui/components/QueuePage/QueuePage.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
 import { AppQueue } from '../../../@types/app'
-import { Store } from '../../hooks/useStore'
 import { JobCard } from '../JobCard/JobCard'
 import { QueueActions } from '../QueueActions/QueueActions'
+import React from 'react'
 import { StatusMenu } from '../StatusMenu/StatusMenu'
+import { Store } from '../../hooks/useStore'
 import s from './QueuePage.module.css'
 
 export const QueuePage = ({
@@ -36,6 +36,7 @@ export const QueuePage = ({
       {queue.jobs.map((job) => (
         <JobCard
           key={job.id}
+          queueName={queue.name}
           job={job}
           status={selectedStatus[queue.name]}
           actions={{

src/ui/hooks/useDetailsTabs.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
+import { STATUSES, Status } from '../components/constants'
+
 import { AppJob } from '../../@types/app'
-import { Status, STATUSES } from '../components/constants'
 import { Highlight } from '../components/Highlight/Highlight'
+import { Logs } from '../components/Logs/Logs'
 
-const regularItems = ['Data', 'Options']
+const regularItems = ['Data', 'Options', 'Logs']
 
-export function useDetailsTabs(currentStatus: Status) {
+export function useDetailsTabs(currentStatus: Status, queueName: string) {
   const [tabs, updateTabs] = useState<string[]>([])
   const [selectedTabIdx, setSelectedTabIdx] = useState(0)
   const selectedTab = tabs[selectedTabIdx]
@@ -24,6 +26,7 @@ export function useDetailsTabs(currentStatus: Status) {
     })),
     selectedTab,
     getTabContent: ({
+      id,
       data,
       returnValue,
       opts,
@@ -43,6 +46,9 @@ export function useDetailsTabs(currentStatus: Status) {
               {JSON.stringify(opts, null, 2)}
             </Highlight>
           )
+        case 'Logs': {
+          return <Logs jobId={id} queueName={queueName} />
+        }
         case 'Error':
           return (
             <>