render durations for deploy events (#3824)

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/DeployEventCard.tsx

@@ -4,7 +4,7 @@ import Text from "components/porter/Text";
 import Container from "components/porter/Container";
 import Spacer from "components/porter/Spacer";
 import Icon from "components/porter/Icon";
-import { getStatusColor, getStatusIcon } from '../utils';
+import { getDuration, getStatusColor, getStatusIcon } from '../utils';
 import { ImageTagContainer, CommitIcon, StyledEventCard } from "./EventCard";
 import styled from "styled-components";
 import Link from "components/porter/Link";
@@ -14,6 +14,7 @@ import ServiceStatusDetail from "./ServiceStatusDetail";
 import { useRevisionList } from "lib/hooks/useRevisionList";
 import RevisionDiffModal from "../modals/RevisionDiffModal";
 import pull_request_icon from "assets/pull_request_icon.svg";
+import run_for from "assets/run_for.png";
 import { match } from "ts-pattern";
 
 type Props = {
@@ -159,6 +160,11 @@ const DeployEventCard: React.FC<Props> = ({
             </>
           }
         </Container>
+        <Container row>
+          <Icon height="14px" src={run_for} />
+          <Spacer inline width="6px" />
+          <Text color="helper">{getDuration(event)}</Text>
+        </Container>
       </Container>
       <Spacer y={0.5} />
       <Container row spaced>

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/types.ts

@@ -20,6 +20,7 @@ const porterAppDeployEventMetadataValidator = z.object({
         status: z.string(),
         type: z.string(),
     })).optional(),
+    end_time: z.string().optional(),
 });
 const porterAppBuildEventMetadataValidator = z.object({
     repo: z.string().optional(),

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/utils.ts

@@ -3,18 +3,23 @@ import failure from "assets/failure.svg";
 import loading from "assets/loading.gif";
 import canceled from "assets/canceled.svg"
 import api from "shared/api";
-import { PorterAppBuildEvent, PorterAppPreDeployEvent } from "./types";
+import { PorterAppBuildEvent, PorterAppDeployEvent, PorterAppPreDeployEvent } from "./types";
 import { PorterAppRecord } from "../../../AppView";
 import { match } from "ts-pattern";
 import { differenceInSeconds, intervalToDuration } from 'date-fns';
 
-export const getDuration = (event: PorterAppPreDeployEvent | PorterAppBuildEvent): string => {
+const ZERO_TIME = "0001-01-01T00:00:00Z";
+
+export const getDuration = (event: PorterAppPreDeployEvent | PorterAppBuildEvent | PorterAppDeployEvent): string => {
     const startTimeStamp = match(event)
         .with({ type: "BUILD" }, (ev) => new Date(ev.created_at).getTime())
+        .with({ type: "DEPLOY" }, (ev) => new Date(ev.created_at).getTime())
         .with({ type: "PRE_DEPLOY" }, (ev) => new Date(ev.metadata.start_time).getTime())
         .exhaustive();
 
-    const endTimeStamp = event.metadata.end_time ? new Date(event.metadata.end_time).getTime() : Date.now()
+    const endTimeStamp = event.metadata.end_time && event.metadata.end_time !== ZERO_TIME
+        ? new Date(event.metadata.end_time).getTime() 
+        : Date.now();
 
     const timeDifferenceInSeconds = differenceInSeconds(endTimeStamp, startTimeStamp);
     const duration = intervalToDuration({ start: 0, end: timeDifferenceInSeconds * 1000 });