use relative time on job detail created, add title w/ ISO utc time

riverqueue · May 15, 2024 · 100a512 · 100a512
1 parent eeddbd4
commit 100a512
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/ui/src/components/JobDetail.tsx b/ui/src/components/JobDetail.tsx
@@ -12,6 +12,7 @@ import JobTimeline from "./JobTimeline";
 import { FormEvent } from "react";
 import { Link } from "@tanstack/react-router";
 import TopNavTitleOnly from "./TopNavTitleOnly";
+import RelativeTimeFormatter from "./RelativeTimeFormatter";
 
 type JobDetailProps = {
   cancel: () => void;
@@ -181,7 +182,7 @@ export default function JobDetail({ cancel, job, retry }: JobDetailProps) {
                   Created
                 </dt>
                 <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
-                  {job.createdAt.toISOString()}
+                  <RelativeTimeFormatter time={job.createdAt} addSuffix />
                 </dd>
               </div>
             </dl>

diff --git a/ui/src/components/RelativeTimeFormatter.tsx b/ui/src/components/RelativeTimeFormatter.tsx
@@ -14,14 +14,15 @@ const RelativeTimeFormatter = ({
   includeSeconds,
   humanize = false,
   time,
-}: RelativeTimeFormatterProps): string => {
+}: RelativeTimeFormatterProps) => {
   const nowSec = useTime();
   const relative = useMemo(() => {
     const now = new Date(nowSec * 1000);
     return formatRelative(time, { addSuffix, includeSeconds, humanize, now });
   }, [addSuffix, includeSeconds, humanize, nowSec, time]);
+  const utcTime = useMemo(() => time.toISOString(), [time]);
 
-  return relative;
+  return <span title={utcTime}>{relative}</span>;
 };
 
 export default RelativeTimeFormatter;