fix: Show failed jobs as failed in "latest" tab

packages/api/src/handlers/queues.ts

@@ -60,6 +60,7 @@ const formatJob = (job: QueueJob, queue: BaseAdapter): AppJob => {
     data: queue.format('data', jobProps.data),
     name: jobProps.name,
     returnValue: queue.format('returnValue', jobProps.returnvalue),
+    isFailed: !!jobProps.failedReason || (Array.isArray(stacktrace) && stacktrace.length > 0),
   };
 };
 

packages/api/src/queueAdapters/base.ts

@@ -14,24 +14,16 @@ export abstract class BaseAdapter {
     this.readOnlyMode = options.readOnlyMode === true;
   }
 
-  public setFormatter(
-    field: 'data' | 'returnValue',
-    formatter: (data: any) => any
-  ): void {
+  public setFormatter(field: 'data' | 'returnValue', formatter: (data: any) => any): void {
     this.formatters[field] = formatter;
   }
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   public format(field: 'data' | 'returnValue', data: any): any {
-    return typeof this.formatters[field] === 'function'
-      ? this.formatters[field](data)
-      : data;
+    return typeof this.formatters[field] === 'function' ? this.formatters[field](data) : data;
   }
 
-  public abstract clean(
-    queueStatus: JobCleanStatus,
-    graceTimeMs: number
-  ): Promise<void>;
+  public abstract clean(queueStatus: JobCleanStatus, graceTimeMs: number): Promise<void>;
 
   public abstract getJob(id: string): Promise<QueueJob | undefined | null>;
 

packages/api/typings/app.ts

@@ -70,6 +70,7 @@ export interface AppJob {
   opts: QueueJobJson['opts'];
   data: QueueJobJson['data'];
   returnValue: QueueJobJson['returnvalue'];
+  isFailed: boolean;
 }
 
 export interface AppQueue {

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

@@ -4,6 +4,7 @@ import { Button } from '../Button/Button';
 import s from './Details.module.css';
 import { DetailsContent } from './DetailsContent/DetailsContent';
 import { AppJob, Status } from '@bull-board/api/typings/app';
+import { STATUSES } from '@bull-board/api/dist/src/constants/statuses';
 
 interface DetailsProps {
   job: AppJob;
@@ -12,7 +13,7 @@ interface DetailsProps {
 }
 
 export const Details = ({ status, job, actions }: DetailsProps) => {
-  const { tabs, selectedTab } = useDetailsTabs(status);
+  const { tabs, selectedTab } = useDetailsTabs(job.isFailed ? STATUSES.failed : status);
 
   if (tabs.length === 0) {
     return null;

packages/ui/src/components/JobCard/JobCard.tsx

@@ -5,6 +5,7 @@ import s from './JobCard.module.css';
 import { Progress } from './Progress/Progress';
 import { Timeline } from './Timeline/Timeline';
 import { AppJob, Status } from '@bull-board/api/typings/app';
+import { STATUSES } from '@bull-board/api/dist/src/constants/statuses';
 
 interface JobCardProps {
   job: AppJob;
@@ -30,12 +31,18 @@ export const JobCard = ({ job, status, actions, readOnlyMode }: JobCardProps) =>
           {job.name}
           {job.attempts > 0 && <span>attempt #{job.attempts + 1}</span>}
         </h4>
-        {!readOnlyMode && <JobActions status={status} actions={actions} />}
+        {!readOnlyMode && (
+          <JobActions status={job.isFailed ? STATUSES.failed : status} actions={actions} />
+        )}
       </div>
       <div className={s.content}>
         <Details status={status} job={job} actions={actions} />
         {typeof job.progress === 'number' && (
-          <Progress percentage={job.progress} status={status} className={s.progress} />
+          <Progress
+            percentage={job.progress}
+            status={job.isFailed ? STATUSES.failed : status}
+            className={s.progress}
+          />
         )}
       </div>
     </div>

packages/ui/src/components/JobCard/Timeline/Timeline.tsx

@@ -53,7 +53,7 @@ export const Timeline = function Timeline({ job, status }: { job: AppJob; status
                 includeSeconds: true,
               })}
             </small>
-            <small>{status === STATUSES.failed ? 'Failed' : 'Finished'} at</small>
+            <small>{job.isFailed ? 'Failed' : 'Finished'} at</small>
             <time>{formatDate(job.finishedOn)}</time>
           </li>
         )}