initial deploy event and logs view (#4451)

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

@@ -127,7 +127,7 @@ const InitialDeployEventCard: React.FC<Props> = ({
                 tab: "events",
                 queryParams: {
                   event_id: event.id,
-                  service: "initialDeploy",
+                  service: "initdeploy",
                   revision_id: event.metadata.app_revision_id,
                 },
               })}

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/focus-views/EventFocusView.tsx

@@ -15,16 +15,19 @@ import api from "shared/api";
 import {
   porterAppEventValidator,
   type PorterAppBuildEvent,
+  type PorterAppInitialDeployEvent,
   type PorterAppPreDeployEvent,
 } from "../types";
 import BuildEventFocusView from "./BuildEventFocusView";
+import InitialDeployEventFocusView from "./InitialDeployEventFocusView";
 import PreDeployEventFocusView from "./PredeployEventFocusView";
 
 const EVENT_POLL_INTERVAL = 5000; // poll every 5 seconds
 
 type SupportedEventFocusViewEvent =
   | PorterAppBuildEvent
-  | PorterAppPreDeployEvent;
+  | PorterAppPreDeployEvent
+  | PorterAppInitialDeployEvent;
 
 const EventFocusView: React.FC = () => {
   const { search } = useLocation();
@@ -62,7 +65,12 @@ const EventFocusView: React.FC = () => {
   );
 
   useEffect(() => {
-    if (data != null && (data.type === "BUILD" || data.type === "PRE_DEPLOY")) {
+    if (
+      data != null &&
+      (data.type === "BUILD" ||
+        data.type === "PRE_DEPLOY" ||
+        data.type === "INITIAL_DEPLOY")
+    ) {
       setEvent(data);
     }
   }, [data]);
@@ -73,6 +81,9 @@ const EventFocusView: React.FC = () => {
       .with({ type: "PRE_DEPLOY" }, (ev) => (
         <PreDeployEventFocusView event={ev} />
       ))
+      .with({ type: "INITIAL_DEPLOY" }, (ev) => (
+        <InitialDeployEventFocusView event={ev} />
+      ))
       .with(null, () => {
         if (eventId != null && eventId !== "") {
           return <Loading />;

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/focus-views/InitialDeployEventFocusView.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+import Container from "components/porter/Container";
+import Icon from "components/porter/Icon";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+import { useLatestRevision } from "main/home/app-dashboard/app-view/LatestRevisionContext";
+import Logs from "main/home/app-dashboard/validate-apply/logs/Logs";
+
+import { readableDate } from "shared/string_utils";
+import loading from "assets/loading.gif";
+
+import { type PorterAppInitialDeployEvent } from "../types";
+import { getDuration, getStatusColor } from "../utils";
+import { AppearingView } from "./EventFocusView";
+
+type Props = {
+  event: PorterAppInitialDeployEvent;
+};
+
+const InitialDeployEventFocusView: React.FC<Props> = ({ event }) => {
+  const { projectId, clusterId, latestProto, deploymentTarget, porterApp } =
+    useLatestRevision();
+
+  const appName = latestProto.name;
+  const serviceNames = ["initdeploy"];
+
+  const renderHeaderText = (): JSX.Element => {
+    switch (event.status) {
+      case "SUCCESS":
+        return (
+          <Text color={getStatusColor(event.status)} size={16}>
+            Initial deploy job succeeded
+          </Text>
+        );
+      case "FAILED":
+        return (
+          <Text color={getStatusColor(event.status)} size={16}>
+            Initial deploy job failed
+          </Text>
+        );
+      default:
+        return (
+          <Container row>
+            <Icon height="16px" src={loading} />
+            <Spacer inline width="10px" />
+            <Text size={16} color={getStatusColor(event.status)}>
+              Initial deploy job in progress...
+            </Text>
+          </Container>
+        );
+    }
+  };
+
+  const renderDurationText = (): JSX.Element => {
+    switch (event.status) {
+      case "PROGRESSING":
+        return (
+          <Text color="helper">Started {readableDate(event.created_at)}.</Text>
+        );
+      default:
+        return (
+          <Text color="helper">
+            Started {readableDate(event.created_at)} and ran for{" "}
+            {getDuration(event)}.
+          </Text>
+        );
+    }
+  };
+
+  return (
+    <>
+      <AppearingView>{renderHeaderText()}</AppearingView>
+      <Spacer y={0.5} />
+      {renderDurationText()}
+      <Spacer y={0.5} />
+      <Logs
+        projectId={projectId}
+        clusterId={clusterId}
+        appName={appName}
+        serviceNames={serviceNames}
+        deploymentTargetId={deploymentTarget.id}
+        appRevisionId={event.metadata.app_revision_id}
+        logFilterNames={["service_name"]}
+        appId={porterApp.id}
+        filterPredeploy={true}
+      />
+    </>
+  );
+};
+
+export default InitialDeployEventFocusView;