Show percentage when progress is an object (#828)

* show percentage with progress as an object * Modified the object to {progress?: number}, removed type cast, refactored function to a calculated value.
felixmosh · Oct 9, 2024 · 352ca02 · 352ca02
1 parent 675cbb3
commit 352ca02
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -103,17 +103,15 @@ export const JobCard = ({
               <div className={s.content}>
                 <Details status={status} job={job} actions={actions} />
 
-                {typeof job.progress === 'number' && (
-                  <Progress
-                    percentage={job.progress}
-                    status={
-                      job.isFailed && !greenStatuses.includes(status as any)
-                        ? STATUSES.failed
-                        : status
-                    }
-                    className={s.progress}
-                  />
-                )}
+                <Progress
+                  progress={job.progress}
+                  status={
+                    job.isFailed && !greenStatuses.includes(status as any)
+                      ? STATUSES.failed
+                      : status
+                  }
+                  className={s.progress}
+                />
               </div>
             </div>
           </div>

diff --git a/packages/ui/src/components/JobCard/Progress/Progress.tsx b/packages/ui/src/components/JobCard/Progress/Progress.tsx
@@ -5,20 +5,24 @@ import { Status } from '@bull-board/api/typings/app';
 import { STATUSES } from '@bull-board/api/src/constants/statuses';
 
 interface ProgressProps {
-  percentage: number;
+  progress: number | { progress?: number };
   strokeWidth?: number;
   status: Status;
   className?: string;
 }
 
-export const Progress = ({ percentage, status, className, strokeWidth = 6 }: ProgressProps) => {
+export const Progress = ({ progress, status, className, strokeWidth = 6 }: ProgressProps) => {
   const commonProps = {
     cx: '50%',
     cy: '50%',
     r: `calc(50% - ${strokeWidth / 2}px)`,
     strokeWidth,
     ['transform-origin']: 'center',
   };
+
+  const percentage = typeof progress === 'number' ? progress : progress.progress ?? null;
+  if(!percentage) return null
+
   return (
     <svg className={cn(s.progress, className)} width="100%" height="100%">
       <circle stroke="#E5E7EB" {...commonProps} />