show relative time in runs list

lucafaggianelli · Jun 9, 2023 · 59d0586 · 59d0586
1 parent a6d04c1
commit 59d0586
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/frontend/src/components/RunsList.tsx b/frontend/src/components/RunsList.tsx
@@ -10,6 +10,7 @@ import {
   Text,
   Title,
 } from '@tremor/react'
+import { formatDistanceToNow, differenceInDays } from 'date-fns'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import useWebSocket from 'react-use-websocket'
@@ -146,8 +147,15 @@ const RunsList: React.FC<Props> = ({ pipelineId, runs: _runs, triggerId }) => {
                   </Link>
                 </TableCell>
               )}
-              <TableCell>
-                <Text>{formatDateTime(run.start_time)}</Text>
+              <TableCell title={formatDateTime(run.start_time)}>
+                <Text>
+                  {differenceInDays(new Date(), run.start_time) <= 1
+                    ? formatDistanceToNow(run.start_time, {
+                        addSuffix: true,
+                        includeSeconds: true,
+                      })
+                    : formatDateTime(run.start_time)}
+                </Text>
               </TableCell>
               <TableCell className="text-right">
                 {run.status !== 'running' ? (