correctly display elapsed time

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/ActivityFeed.tsx

@@ -102,7 +102,7 @@ const ActivityFeed: React.FC<Props> = ({
               <Spacer x={0.5} />
               <Text>{feedDate(event.created_at).split(", ")[1]}</Text>
             </Time>
-            <EventCard event={event} i={i} />
+            <EventCard event={event} />
           </EventWrapper>
         );
       })}

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/EventCard.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
+import { timeElapsed } from "shared/string_utils";
+
 import app_event from "assets/app_event.png";
 import build from "assets/build.png";
 import deploy from "assets/deploy.png";
@@ -179,6 +181,14 @@ const EventCard: React.FC<Props> = ({
     };
   };
 
+  const getElapsed = (event: any) => {
+    if (event.status === "SUCCESS" || event.status === "FAILED") {
+      return timeElapsed(event.updated_at, event.created_at);
+    } else {
+      return timeElapsed(new Date().toISOString(), event.created_at);
+    }
+  };
+
   return (
     <StyledEventCard>
       <Container row spaced>
@@ -188,9 +198,13 @@ const EventCard: React.FC<Props> = ({
           <Text size={14}>{getTitle(event.type)}</Text>
         </Container>
         <Container row>
-          <Icon height="14px" src={run_for} />
-          <Spacer inline width="6px" />
-          <Text color="helper">1h 2m</Text>
+          {getElapsed(event) !== "0s" && (
+            <>
+              <Icon height="14px" src={run_for} />
+              <Spacer inline width="6px" />
+              <Text color="helper">{getElapsed(event)}</Text>
+            </>
+          )}
         </Container>
       </Container>
       <Spacer y={1} />

dashboard/src/shared/string_utils.ts

@@ -45,6 +45,32 @@ export const feedDate = (timestamp: string) => {
   return formattedDate;
 }
 
+export const timeElapsed = (tsString1: string, tsString2: string) => {
+  const ts1 = Date.parse(tsString1);
+  const ts2 = Date.parse(tsString2);
+  if (isNaN(ts1) || isNaN(ts2)) {
+    return 'Invalid timestamps';
+  }
+
+  const timeDifference = Math.abs(ts1 - ts2);
+  const hours = Math.floor(timeDifference / (1000 * 60 * 60));
+  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
+
+  let formattedTime = '';
+  if (hours > 0) {
+    formattedTime += `${hours}h `;
+  }
+  if (minutes > 0) {
+    formattedTime += `${minutes}m `;
+  }
+  if (minutes === 0 || (minutes === 0 && seconds > 0)) {
+    formattedTime += `${seconds}s`;
+  }
+
+  return formattedTime;
+}
+
 export const timeFrom = (
   time: string | number,
   secondTime?: string | number