changes so far

dashboard/src/main/home/app-dashboard/expanded-app/EventList.tsx

@@ -14,7 +14,7 @@ import TitleSection from "components/TitleSection";
 import api from "shared/api";
 import Modal from "main/home/modals/Modal";
 import time from "assets/time.svg";
-import { Direction, Log, parseLogs } from "./useAgentLogs";
+import { Direction, Log, parseLogs } from "./logs/useAgentLogs";
 import { Context } from "shared/Context";
 import dayjs from "dayjs";
 import Anser from "anser";

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -39,7 +39,7 @@ import { KeyValueType } from "main/home/cluster-dashboard/env-groups/EnvGroupArr
 import { PorterYamlSchema } from "../new-app-flow/schema";
 import { EnvVariablesTab } from "./EnvVariablesTab";
 import GHABanner from "./GHABanner";
-import LogSection from "./LogSection";
+import LogSection from "./logs/LogSection";
 import ActivityFeed from "./activity-feed/ActivityFeed";
 import MetricsSection from "./MetricsSection";
 import StatusSectionFC from "./status/StatusSection";

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/focus-views/BuildFailureEventFocusView.tsx

@@ -6,7 +6,7 @@ import styled from "styled-components";
 import Anser, { AnserJsonEntry } from "anser";
 import JSZip from "jszip";
 import dayjs from "dayjs";
-import { Log as LogType } from "../../../useAgentLogs";
+import { Log as LogType } from "../../../logs/useAgentLogs";
 import { PorterAppEvent } from "shared/types";
 import Text from "components/porter/Text";
 import { readableDate } from "shared/string_utils";

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/focus-views/PredeployFailureEventFocusView.tsx

@@ -5,82 +5,82 @@ import api from "shared/api";
 import styled from "styled-components";
 import Anser from "anser";
 import dayjs from "dayjs";
-import { Log as LogType, parseLogs } from "../../../useAgentLogs";
+import { Log as LogType, parseLogs } from "../../../logs/useAgentLogs";
 import { PorterAppEvent } from "shared/types";
 import Text from "components/porter/Text";
 import { readableDate } from "shared/string_utils";
 import { getDuration } from "../utils";
-import LogSection from "../../../LogSection";
+import LogSection from "../../../logs/LogSection";
 
 type Props = {
-    event: PorterAppEvent;
-    appData: any;
+  event: PorterAppEvent;
+  appData: any;
 };
 
 const PreDeployFailureEventFocusView: React.FC<Props> = ({
-    event,
-    appData,
+  event,
+  appData,
 }) => {
-    const [logs, setLogs] = useState<LogType[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const scrollToBottomRef = useRef<HTMLDivElement | undefined>(undefined);
-    const [noLogsMessage, setNoLogsMessage] = useState<string>("Waiting for logs...");
+  const [logs, setLogs] = useState<LogType[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const scrollToBottomRef = useRef<HTMLDivElement | undefined>(undefined);
+  const [noLogsMessage, setNoLogsMessage] = useState<string>("Waiting for logs...");
 
-    useEffect(() => {
-        if (!isLoading && scrollToBottomRef.current) {
-            scrollToBottomRef.current.scrollIntoView({
-                behavior: "smooth",
-                block: "end",
-            });
-        }
-    }, [isLoading, logs, scrollToBottomRef]);
+  useEffect(() => {
+    if (!isLoading && scrollToBottomRef.current) {
+      scrollToBottomRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+      });
+    }
+  }, [isLoading, logs, scrollToBottomRef]);
 
-    // const getPredeployLogs = async () => {
-    //     setIsLoading(true);
-    //     try {
-    //         if (appData.releaseChart == null) {
-    //             setNoLogsMessage("Unable to retrieve logs because the pre-deploy job no longer exists.")
-    //             return;
-    //         }
-    //         const logResp = await api.getLogsWithinTimeRange(
-    //             "<token>",
-    //             {
-    //                 chart_name: appData.releaseChart.name,
-    //                 namespace: appData.releaseChart.namespace,
-    //                 start_range: dayjs(event.metadata.start_time).subtract(1, 'minute').toISOString(),
-    //                 end_range: dayjs(event.metadata.end_time).add(1, 'minute').toISOString(),
-    //                 limit: 1000,
-    //             },
-    //             {
-    //                 project_id: appData.app.project_id,
-    //                 cluster_id: appData.app.cluster_id,
-    //             }
-    //         )
-    //         if (logResp.data == null || logResp.data.logs == null || logResp.data.logs.length == 0) {
-    //             setNoLogsMessage("No logs found.")
-    //             return;
-    //         }
-    //         setLogs(parseLogs(logResp.data.logs));
-    //     } catch (error) {
-    //         console.log(error);
-    //     } finally {
-    //         setIsLoading(false);
-    //     }
-    // };
+  // const getPredeployLogs = async () => {
+  //     setIsLoading(true);
+  //     try {
+  //         if (appData.releaseChart == null) {
+  //             setNoLogsMessage("Unable to retrieve logs because the pre-deploy job no longer exists.")
+  //             return;
+  //         }
+  //         const logResp = await api.getLogsWithinTimeRange(
+  //             "<token>",
+  //             {
+  //                 chart_name: appData.releaseChart.name,
+  //                 namespace: appData.releaseChart.namespace,
+  //                 start_range: dayjs(event.metadata.start_time).subtract(1, 'minute').toISOString(),
+  //                 end_range: dayjs(event.metadata.end_time).add(1, 'minute').toISOString(),
+  //                 limit: 1000,
+  //             },
+  //             {
+  //                 project_id: appData.app.project_id,
+  //                 cluster_id: appData.app.cluster_id,
+  //             }
+  //         )
+  //         if (logResp.data == null || logResp.data.logs == null || logResp.data.logs.length == 0) {
+  //             setNoLogsMessage("No logs found.")
+  //             return;
+  //         }
+  //         setLogs(parseLogs(logResp.data.logs));
+  //     } catch (error) {
+  //         console.log(error);
+  //     } finally {
+  //         setIsLoading(false);
+  //     }
+  // };
 
-    // useEffect(() => {
-    //     getPredeployLogs();
-    // }, [event]);
+  // useEffect(() => {
+  //     getPredeployLogs();
+  // }, [event]);
 
-    return (
-        <>
-            <Text size={16} color="#FF6060">Pre-deploy failed</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">Started {readableDate(event.created_at)} and ran for {getDuration(event)}.</Text>
-            <Spacer y={0.5} />
-            <LogSection currentChart={appData.releaseChart} />
-        </>
-    );
+  return (
+    <>
+      <Text size={16} color="#FF6060">Pre-deploy failed</Text>
+      <Spacer y={0.5} />
+      <Text color="helper">Started {readableDate(event.created_at)} and ran for {getDuration(event)}.</Text>
+      <Spacer y={0.5} />
+      <LogSection currentChart={appData.releaseChart} />
+    </>
+  );
 };
 
 export default PreDeployFailureEventFocusView;
@@ -168,9 +168,9 @@ const LogInnerSpan = styled.span`
   font-family: monospace, sans-serif;
   font-size: 12px;
   font-weight: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.decoration && props.ansi?.decoration == "bold" ? "700" : "400"};
+    props.ansi?.decoration && props.ansi?.decoration == "bold" ? "700" : "400"};
   color: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.fg ? `rgb(${props.ansi?.fg})` : "white"};
+    props.ansi?.fg ? `rgb(${props.ansi?.fg})` : "white"};
   background-color: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.bg ? `rgb(${props.ansi?.bg})` : "transparent"};
+    props.ansi?.bg ? `rgb(${props.ansi?.bg})` : "transparent"};
 `;

dashboard/src/main/home/app-dashboard/expanded-app/LogSection.tsx → dashboard/src/main/home/app-dashboard/expanded-app/logs/LogSection.tsx

@@ -30,7 +30,7 @@ import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import Container from "components/porter/Container";
 import Button from "components/porter/Button";
-import { Service } from "../new-app-flow/serviceTypes";
+import { Service } from "../../new-app-flow/serviceTypes";
 
 type Props = {
   currentChart?: ChartType;

dashboard/src/main/home/app-dashboard/expanded-app/useAgentLogs.ts → dashboard/src/main/home/app-dashboard/expanded-app/logs/useAgentLogs.ts

@@ -32,9 +32,9 @@ const LogSchema = z.object({
 type LogLine = z.infer<typeof LogSchema>;
 
 export const parseLogs = (logs: any[] = []): Log[] => {
-  return logs.filter(Boolean).map((logLine: any, idx) => {
+  return logs.filter(Boolean).map((log: any, idx) => {
     try {
-      const parsed: LogLine = LogSchema.parse(logLine);
+      const parsed: LogLine = LogSchema.parse(log);
 
       // TODO Move log parsing to the render method
       const ansiLog = Anser.ansiToJson(parsed.line);
@@ -44,11 +44,17 @@ export const parseLogs = (logs: any[] = []): Log[] => {
         timestamp: parsed.timestamp,
       };
     } catch (err) {
+      console.log(err)
+      // return {
+      //   line: Anser.ansiToJson(log),
+      //   lineNumber: idx + 1,
+      //   timestamp: undefined,
+      // };
       return {
-        line: Anser.ansiToJson(logLine),
+        line: log,
         lineNumber: idx + 1,
         timestamp: undefined,
-      };
+      }
     }
   });
 };
@@ -200,12 +206,15 @@ export const useLogs = (
       },
       onmessage: (evt: MessageEvent) => {
         // Nothing to do here
-        if (!evt?.data || typeof evt.data !== "string") {
+        if (evt.data == null) {
           return;
         }
-
+        console.log("here is the data", evt)
         const newLogs = parseLogs(
-          evt?.data?.split("}\n").map((line: string) => line + "}")
+          [{
+            line: evt.data,
+            timestamp: evt.timeStamp.toString(),
+          }]
         );
 
         pushLogs(newLogs);

dashboard/src/main/home/app-dashboard/expanded-app/status/AppEventModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import Modal from "components/porter/Modal";
 import TitleSection from "components/TitleSection";
-import { Log } from "../useAgentLogs";
+import { Log } from "../logs/useAgentLogs";
 import Text from "components/porter/Text";
 import danger from "assets/danger.svg";
 

dashboard/src/main/home/app-dashboard/expanded-app/status/ExpandedIncidentLogs.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Log } from "../useAgentLogs";
+import { Log } from "../logs/useAgentLogs";
 import React from "react";
 import styled from "styled-components";
 import Loading from "components/Loading";
@@ -7,59 +7,59 @@ import dayjs from "dayjs";
 import Anser from "anser";
 
 interface ExpandedIncidentLogsProps {
-    logs: Log[];
+  logs: Log[];
 }
 
 const ExpandedIncidentLogs: React.FC<ExpandedIncidentLogsProps> = ({ logs }: ExpandedIncidentLogsProps) => {
-    const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (scrollToBottomRef.current) {
-            scrollToBottomRef.current.scrollIntoView({
-                behavior: "smooth",
-                block: "end",
-            });
-        }
-    }, [logs, scrollToBottomRef]);
+  useEffect(() => {
+    if (scrollToBottomRef.current) {
+      scrollToBottomRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+      });
+    }
+  }, [logs, scrollToBottomRef]);
 
-    return logs.length ?
-        (<LogsSectionWrapper>
-            <StyledLogsSection>
-                {logs?.map((log, i) => {
-                    return (
-                        <LogSpan key={[log.lineNumber, i].join(".")}>
-                            <span className="line-number">{log.lineNumber}.</span>
-                            {log.timestamp && <span className="line-timestamp">
-                                {dayjs(log.timestamp).format("MMM D, YYYY HH:mm:ss")}
-                            </span>}
-                            <LogOuter key={[log.lineNumber, i].join(".")}>
-                                {Array.isArray(log.line) ? log.line?.map((ansi, j) => {
-                                    if (ansi.clearLine) {
-                                        return null;
-                                    }
+  return logs.length ?
+    (<LogsSectionWrapper>
+      <StyledLogsSection>
+        {logs?.map((log, i) => {
+          return (
+            <LogSpan key={[log.lineNumber, i].join(".")}>
+              <span className="line-number">{log.lineNumber}.</span>
+              {log.timestamp && <span className="line-timestamp">
+                {dayjs(log.timestamp).format("MMM D, YYYY HH:mm:ss")}
+              </span>}
+              <LogOuter key={[log.lineNumber, i].join(".")}>
+                {Array.isArray(log.line) ? log.line?.map((ansi, j) => {
+                  if (ansi.clearLine) {
+                    return null;
+                  }
 
-                                    return (
-                                        <LogInnerSpan
-                                            key={[log.lineNumber, i, j].join(".")}
-                                            ansi={ansi}
-                                        >
-                                            {ansi.content.replace(/ /g, "\u00a0")}
-                                        </LogInnerSpan>
-                                    );
-                                }) : (
-                                    log.line
-                                )}
-                            </LogOuter>
-                        </LogSpan>
-                    );
-                })}
-                <div ref={scrollToBottomRef} />
-            </StyledLogsSection>
-        </LogsSectionWrapper>)
-        :
-        (<LogsLoadWrapper>
-            <Loading />
-        </LogsLoadWrapper >)
+                  return (
+                    <LogInnerSpan
+                      key={[log.lineNumber, i, j].join(".")}
+                      ansi={ansi}
+                    >
+                      {ansi.content.replace(/ /g, "\u00a0")}
+                    </LogInnerSpan>
+                  );
+                }) : (
+                  log.line
+                )}
+              </LogOuter>
+            </LogSpan>
+          );
+        })}
+        <div ref={scrollToBottomRef} />
+      </StyledLogsSection>
+    </LogsSectionWrapper>)
+    :
+    (<LogsLoadWrapper>
+      <Loading />
+    </LogsLoadWrapper >)
 };
 
 export default ExpandedIncidentLogs;
@@ -141,11 +141,11 @@ const LogInnerSpan = styled.span`
   font-family: monospace, sans-serif;
   font-size: 12px;
   font-weight: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.decoration && props.ansi?.decoration == "bold" ? "700" : "400"};
+    props.ansi?.decoration && props.ansi?.decoration == "bold" ? "700" : "400"};
   color: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.fg ? `rgb(${props.ansi?.fg})` : "white"};
+    props.ansi?.fg ? `rgb(${props.ansi?.fg})` : "white"};
   background-color: ${(props: { ansi: Anser.AnserJsonEntry }) =>
-        props.ansi?.bg ? `rgb(${props.ansi?.bg})` : "transparent"};
+    props.ansi?.bg ? `rgb(${props.ansi?.bg})` : "transparent"};
 `;
 
 export const ViewLogsWrapper = styled.div`

dashboard/src/main/home/app-dashboard/expanded-app/status/GHALogsModal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import Modal from "components/porter/Modal";
 import TitleSection from "components/TitleSection";
-import { Log } from "../useAgentLogs";
+import { Log } from "../logs/useAgentLogs";
 import Loading from "components/Loading";
 import Text from "components/porter/Text";
 import danger from "assets/danger.svg";

dashboard/src/main/home/app-dashboard/expanded-app/status/LogsModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import Modal from "components/porter/Modal";
 import TitleSection from "components/TitleSection";
-import { Log } from "../useAgentLogs";
+import { Log } from "../logs/useAgentLogs";
 import Text from "components/porter/Text";
 import danger from "assets/danger.svg";