diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.tsx b/packages/ui/src/components/JobCard/Timeline/Timeline.tsx index 3075486e..9be94a98 100644 --- a/packages/ui/src/components/JobCard/Timeline/Timeline.tsx +++ b/packages/ui/src/components/JobCard/Timeline/Timeline.tsx @@ -1,4 +1,4 @@ -import { format, formatDistance, getYear, isToday } from 'date-fns'; +import { format, formatDistance, getYear, isToday, differenceInMilliseconds } from 'date-fns'; import React from 'react'; import s from './Timeline.module.css'; import { AppJob, Status } from '@bull-board/api/typings/app'; @@ -15,6 +15,19 @@ const formatDate = (ts: TimeStamp) => { ? format(ts, 'MM/dd HH:mm:ss') : format(ts, 'MM/dd/yyyy HH:mm:ss'); }; +const formatDuration = (finishedTs: TimeStamp, processedTs: TimeStamp) => { + const durationInMs = differenceInMilliseconds(finishedTs, processedTs); + const durationInSeconds = durationInMs / 1000; + if (durationInSeconds > 5) { + return formatDistance(finishedTs, processedTs, { + includeSeconds: true, + }); + } + if (durationInSeconds >= 1) { + return `${durationInSeconds.toFixed(2)} seconds`; + } + return `${durationInMs} milliseconds`; +} export const Timeline = function Timeline({ job, status }: { job: AppJob; status: Status }) { return ( @@ -34,9 +47,7 @@ export const Timeline = function Timeline({ job, status }: { job: AppJob; status