From ea20d3674427604fbfdb3c58790f2aaa5333b865 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Mon, 9 Dec 2024 09:52:50 +0200
Subject: [PATCH] feat: add proper statuses

---
 .../components/activity/activity-job-item.tsx | 55 +++++++++++++++++--
 .../components/time-display-hover-card.tsx    |  2 +-
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/components/activity/activity-job-item.tsx b/apps/dashboard/src/components/activity/activity-job-item.tsx
index 009475bd319..1153b704a55 100644
--- a/apps/dashboard/src/components/activity/activity-job-item.tsx
+++ b/apps/dashboard/src/components/activity/activity-job-item.tsx
@@ -10,7 +10,6 @@ import { cn } from '@/utils/ui';
 import { ExecutionDetailItem } from './execution-detail-item';
 import { STEP_TYPE_TO_ICON } from '../icons/utils';
 import { STEP_TYPE_TO_COLOR } from '../../utils/color';
-import { ActivityDetailCard } from './activity-detail-card';
 
 interface DigestEvent {
   type: string;
@@ -20,6 +19,8 @@ interface DigestEvent {
 type JobWithDigest = Activity['jobs'][0] & {
   digest?: {
     events: DigestEvent[];
+    amount: number;
+    unit: string;
   };
 };
 
@@ -33,6 +34,50 @@ function formatJobType(type: string): string {
   return type.replace(/_/g, ' ');
 }
 
+function getStatusMessage(job: JobWithDigest): string {
+  if (job.status === 'merged') {
+    return 'Step merged with another execution';
+  }
+
+  if (job.status === 'failed' && job.executionDetails?.length > 0) {
+    return (
+      job.executionDetails[job.executionDetails.length - 1].detail + ' asda sd sad sad sad as d asdasd asd asd as' ||
+      'Step execution failed'
+    );
+  }
+
+  switch (job.type.toLowerCase()) {
+    case 'digest':
+      if (job.status === 'completed') {
+        return `Digested ${job.digest?.events?.length ?? 0} events for ${job.digest?.amount ?? 0} ${
+          job.digest?.unit ?? ''
+        }`;
+      }
+      if (job.status === 'pending') {
+        return 'Collecting Digest events';
+      }
+      return 'Digest failed';
+
+    case 'delay':
+      if (job.status === 'completed') {
+        return 'Delay completed';
+      }
+      if (job.status === 'pending') {
+        return 'Delaying execution';
+      }
+      return 'Delay failed';
+
+    default:
+      if (job.status === 'completed') {
+        return 'Message sent successfully';
+      }
+      if (job.status === 'pending') {
+        return 'Sending message';
+      }
+      return 'Message delivery failed';
+  }
+}
+
 function getJobIcon(type: string) {
   const Icon = STEP_TYPE_TO_ICON[type.toLowerCase() as keyof typeof STEP_TYPE_TO_ICON] ?? Route;
 
@@ -63,6 +108,8 @@ function JobDetails({ job }: { job: JobWithDigest }) {
             ))}
           </div>
         )}
+        {/*
+        TODO: Missing backend support for digest events widget
         {job.type === 'digest' && job.digest?.events && (
           <ActivityDetailCard title="Digest Events" expandable={true} open>
             <div className="min-w-0 max-w-full font-mono">
@@ -79,7 +126,7 @@ function JobDetails({ job }: { job: JobWithDigest }) {
               ))}
             </div>
           </ActivityDetailCard>
-        )}
+        )} */}
       </div>
     </div>
   );
@@ -154,8 +201,8 @@ export function ActivityJobItem({ job, isFirst, isLast }: ActivityJobItemProps)
         {!isExpanded && (
           <CardContent className="rounded-lg bg-neutral-50 p-2">
             <div className="flex items-center justify-between">
-              <span className="text-foreground-400 text-xs capitalize">{job.status}</span>
-              <Badge variant="soft" className="bg-foreground-50 px-2 py-0.5 text-[11px] leading-3">
+              <span className="text-foreground-400 max-w-[300px] truncate pr-2 text-xs">{getStatusMessage(job)}</span>
+              <Badge variant="soft" className="bg-foreground-50 shrink-0 px-2 py-0.5 text-[11px] leading-3">
                 {format(new Date(job.updatedAt), 'MMM d yyyy, HH:mm:ss')}
               </Badge>
             </div>
diff --git a/apps/dashboard/src/components/time-display-hover-card.tsx b/apps/dashboard/src/components/time-display-hover-card.tsx
index de2e2962cba..30761913686 100644
--- a/apps/dashboard/src/components/time-display-hover-card.tsx
+++ b/apps/dashboard/src/components/time-display-hover-card.tsx
@@ -7,7 +7,7 @@ interface TimeDisplayHoverCardProps {
 }
 
 export function TimeDisplayHoverCard({ date, children }: TimeDisplayHoverCardProps) {
-  const utcTime = format(date, 'MMM d yyyy, HH:mm:ss');
+  const utcTime = format(new Date(date.toUTCString()), 'MMM d yyyy, HH:mm:ss');
   const localTime = format(date, 'MMM d yyyy, HH:mm:ss');
   const timeAgo = formatDistanceToNow(date, { addSuffix: true });