From 100a5123efd94eb0ed4a8d4b01d51c232719a816 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Wed, 15 May 2024 10:13:53 -0500
Subject: [PATCH] use relative time on job detail created, add title w/ ISO utc
 time

---
 ui/src/components/JobDetail.tsx             | 3 ++-
 ui/src/components/RelativeTimeFormatter.tsx | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/JobDetail.tsx b/ui/src/components/JobDetail.tsx
index 122df49..363caa8 100644
--- 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
index 16e608c..cf1da08 100644
--- 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;