From f4dd195381788bb240b87eb26742d8a223d07e31 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Tue, 25 Feb 2025 10:35:30 -0500
Subject: [PATCH] display time of eval task

---
 .../Experiment/Eval/EvalJobsTable.tsx         | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
index 1ea12e3a..d72c7431 100644
--- a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
+++ b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
@@ -15,11 +15,11 @@ import {
   FileDigitIcon,
   Grid3X3Icon,
   Trash2Icon,
+  Type,
 } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import useSWR from 'swr';
 import * as chatAPI from '../../../lib/transformerlab-api-sdk';
-import dayjs from 'dayjs';
 import ViewOutputModalStreaming from './ViewOutputModalStreaming';
 import ViewCSVModal from './ViewCSVModal';
 import ViewPlotModal from './ViewPlotModal';
@@ -32,8 +32,24 @@ dayjs.extend(relativeTime);
 var duration = require('dayjs/plugin/duration');
 dayjs.extend(duration);
 
+var utc = require('dayjs/plugin/utc');
+var timezone = require('dayjs/plugin/timezone'); // dependent on utc plugin
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
+function getLocalTimeSinceEvent(utcTimestamp) {
+  // Parse the UTC timestamp
+  const eventTime = dayjs.utc(utcTimestamp);
+  // Convert to local timezone
+  const localEventTime = eventTime.local();
+  // Get current local time
+  const currentTime = dayjs();
+  // Calculate the time difference
+  return localEventTime.from(currentTime);
+}
+
 function RenderScore({ score }) {
   if (score === undefined) {
     return <Chip color="warning">Not available</Chip>;
@@ -150,24 +166,20 @@ const EvalJobsTable = () => {
               <tr key={job.id}>
                 <td>{job.id}</td>
                 <td>
-                  {job?.job_data?.plugin}
-                  <br />
-                  {job?.job_data?.evaluator}
+                  <Typography level="title-md">
+                    {job?.job_data?.evaluator}
+                  </Typography>
+                  <Typography level="title-sm">
+                    {job?.job_data?.plugin}
+                  </Typography>
+                  <Typography level="body-sm">
+                    {getLocalTimeSinceEvent(job?.created_at)}
+                  </Typography>
                 </td>
                 <td>
                   <JobProgress job={job} />
                 </td>
-                {/* <td>
-                  Started:&nbsp;
-                  {String(dayjs(job?.created_at).fromNow())}
-                  <br />
-                  Completed in:&nbsp;
-                  {dayjs
-                    .duration(
-                      dayjs(job?.updated_at).diff(dayjs(job?.created_at))
-                    )
-                    .humanize()}
-                </td> */}
+
                 <td>
                   <RenderScore score={job?.job_data?.score} />
                   {job?.job_data?.additional_output_path &&
-- 
GitLab