fe patches for stacks (#3100)

* first commit

* convert activity feed date to local time

* show app events

---------

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air.local>

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

@@ -45,7 +45,7 @@ const ActivityFeed: React.FC<Props> = ({ chart, stackName, appData }) => {
         }
       );
       setNumPages(res.data.num_pages);
-      setEvents((res.data.events as PorterAppEvent[]).filter(e => e.type === PorterAppEventType.BUILD || e.type === PorterAppEventType.PRE_DEPLOY));
+      setEvents(res.data.events);
       setLoading(false);
     } catch (err) {
       setError(err);
@@ -105,7 +105,9 @@ const ActivityFeed: React.FC<Props> = ({ chart, stackName, appData }) => {
         );
       })}
       <Spacer y={1} />
-      <Pagination page={page} setPage={setPage} totalPages={numPages} />
+      {numPages > 1 && (
+        <Pagination page={page} setPage={setPage} totalPages={numPages} />
+      )}
     </StyledActivityFeed>
   );
 };

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

@@ -112,7 +112,6 @@ const BuildEventCard: React.FC<Props> = ({ event, appData }) => {
         }
       }
     } catch (error) {
-      console.log(appData);
       console.log(error);
     }
   };

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

@@ -17,13 +17,11 @@ const EventCard: React.FC<Props> = ({ event, appData }) => {
   const renderEventCard = (event: PorterAppEvent) => {
     switch (event.type) {
       case PorterAppEventType.APP_EVENT:
-      // TODO: implement
-      // return <AppEventCard event={event} appData={appData} />;
+        return <AppEventCard event={event} appData={appData} />;
       case PorterAppEventType.BUILD:
         return <BuildEventCard event={event} appData={appData} />;
       case PorterAppEventType.DEPLOY:
-      // TODO: implement
-      // return <DeployEventCard event={event} appData={appData} />;
+        return <DeployEventCard event={event} appData={appData} />;
       case PorterAppEventType.PRE_DEPLOY:
         return <PreDeployEventCard event={event} appData={appData} />;
       default:

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

@@ -18,15 +18,15 @@ export const getDuration = (event: PorterAppEvent): string => {
     let formattedTime = "";
 
     if (hours > 0) {
-        formattedTime += `${hours} h `;
+        formattedTime += `${hours}h `;
     }
 
     if (minutes > 0) {
-        formattedTime += `${minutes} m `;
+        formattedTime += `${minutes}m `;
     }
 
     if (hours === 0 && minutes === 0) {
-        formattedTime += `${remainingSeconds} s`;
+        formattedTime += `${remainingSeconds}s`;
     }
 
     return formattedTime.trim();

dashboard/src/shared/string_utils.ts

@@ -29,20 +29,15 @@ export const relativeDate = (date: string | number) => {
 };
 
 export const feedDate = (timestamp: string) => {
-  const date = new Date(timestamp);
-  const monthNames = [
-    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-  ];
-  const month = monthNames[date.getUTCMonth()];
-  const day = date.getUTCDate();
-  const hours = date.getUTCHours();
-  const minutes = date.getUTCMinutes();
-  const formattedHours = hours % 12 === 0 ? 12 : hours % 12; // Convert to 12-hour format
-  const period = hours < 12 ? 'AM' : 'PM';
-  const formattedDate = `${month} ${day}, ${formattedHours}:${minutes.toString().padStart(2, '0')} ${period}`;
-
-  return formattedDate;
+  const localTime = new Date(timestamp).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+
+  return localTime;
 }
 
 export const timeFrom = (