Fix bugs with log viewer

- Deployment status takes too long to update after it changes
- Build logs never updated in realtime because the active deployment != the latest deployment

Author: FluxCapacitor2

frontend/src/components/Logs.tsx

@@ -18,12 +18,29 @@ type LogsProps = {
   type: LogType;
   appId?: number;
   follow: boolean;
+  onLogReceived?: (
+    line: components["schemas"]["LogLine"],
+    pastLogsSent: boolean,
+  ) => void;
 };
 
-export const Logs = ({ deployment, type, appId, follow }: LogsProps) => {
+export const Logs = ({
+  deployment,
+  type,
+  appId,
+  follow,
+  onLogReceived,
+}: LogsProps) => {
   const [logs, setLogs] = useState<components["schemas"]["LogLine"][]>([]);
   const [noLogs, setNoLogs] = useState(false); // Set to true when we know there are no logs for this deployment
-  const [done, setDone] = useState(false); // Set to true when all past logs have been sent and the viewer is up-to-date
+  const [done, _setDone] = useState(false); // Set to true when all past logs have been sent and the viewer is up-to-date
+
+  const doneRef = useRef(false); // Updated at the same time as `setDone` is called so that the closure in useEventSource can access the most up-to-date value of this variable
+
+  const setDone = (newValue: boolean) => {
+    doneRef.current = newValue;
+    _setDone(newValue);
+  };
 
   const logsBody = useRef<HTMLDivElement | null>(null);
   const lastScroll = useRef({ scrollTop: 0, hasScrolledUp: false });
@@ -46,7 +63,7 @@ export const Logs = ({ deployment, type, appId, follow }: LogsProps) => {
       ? `${window.location.protocol}//${window.location.host}/api/app/${appId}/logs?type=${type}`
       : `${window.location.protocol}//${window.location.host}/api/app/${appId}/logs?type=${type}&deploymentId=${deployment.id}`;
 
-  const { connecting, connected, close, reconnect } = useEventSource(
+  const { connecting, connected, close } = useEventSource(
     new URL(url),
     ["log", "pastLogsSent"],
     (eventName, event) => {
@@ -60,6 +77,7 @@ export const Logs = ({ deployment, type, appId, follow }: LogsProps) => {
       const newLine = event.data as string;
       setLogs((lines) => {
         const parsed = JSON.parse(newLine) as components["schemas"]["LogLine"];
+        onLogReceived?.(parsed, doneRef.current);
         for (const existingLine of lines) {
           if (parsed.id && existingLine.id === parsed.id) return lines;
         }
@@ -79,11 +97,7 @@ export const Logs = ({ deployment, type, appId, follow }: LogsProps) => {
     if (!follow && done && connected) {
       close();
     }
-
-    if (follow && !connected && !connecting) {
-      reconnect();
-    }
-  }, [done, follow, connected, connecting, close, reconnect]);
+  }, [done, follow, connected, close]);
 
   return (
     <>

frontend/src/hooks/useEventSource.ts

@@ -9,51 +9,51 @@ export const useEventSource = <T extends string>(
   const [connected, setConnected] = useState(false);
   const [reconnectCounter, setReconnectCounter] = useState(0);
   const source = useRef<EventSource | null>(null);
+  const reconnectTimeout = useRef(500);
   const shouldOpen = useRef(true);
 
-  const setupEventSource = (
-    reconnectCallback: (newEventSource: EventSource) => void,
-  ) => {
+  const reconnect = () => {
+    setReconnectCounter((current) => current + 1);
+  };
+
+  const setupEventSource = () => {
     console.log("Creating EventSource for", url.toString());
-    const eventSource = new EventSource(url);
 
-    eventSource.onopen = () => {
+    source.current = new EventSource(url);
+
+    source.current.onopen = () => {
       setConnected(true);
       setHasConnected(true);
+      reconnectTimeout.current = 500;
     };
-    eventSource.onerror = () => {
+    source.current.onerror = () => {
       setConnected(false);
-      eventSource.close();
+      source.current?.close();
       setTimeout(() => {
         if (!shouldOpen.current) return; // The component has unmounted; we shouldn't try to reconnect anymore
-        reconnectCallback(setupEventSource(reconnectCallback));
-      }, 500);
+        console.log("Reconnecting");
+        reconnect();
+      }, reconnectTimeout.current);
+      reconnectTimeout.current = Math.min(reconnectTimeout.current * 2, 10000);
     };
 
-    source.current = eventSource;
-
     for (const eventName of eventNames) {
-      eventSource.addEventListener(eventName, (event: MessageEvent) =>
+      source.current.addEventListener(eventName, (event: MessageEvent) =>
         onMessage(eventName, event),
       );
     }
-
-    return eventSource;
   };
 
   const setup = useEffectEvent(setupEventSource);
   const urlString = url.toString(); // Equal URLs don't have Object.is() equality, so the useEffect would be triggered on every render if we didn't convert this into a string first.
 
   useEffect(() => {
     shouldOpen.current = true;
-    let eventSource: EventSource;
-    eventSource = setup((newEventSource) => {
-      eventSource = newEventSource;
-    });
+    setup();
 
     return () => {
       shouldOpen.current = false;
-      eventSource.close();
+      source.current?.close();
     };
   }, [urlString, reconnectCounter]);
 
@@ -64,8 +64,5 @@ export const useEventSource = <T extends string>(
       source.current?.close();
       setConnected(false);
     },
-    reconnect: () => {
-      setReconnectCounter((current) => current + 1);
-    },
   };
 };

frontend/src/pages/DeploymentView.tsx

@@ -15,7 +15,15 @@ export const DeploymentView = () => {
     params: { path: { appId } },
   });
 
-  const { data: deployment } = api.useSuspenseQuery(
+  const { data: latestDeployments } = api.useSuspenseQuery(
+    "get",
+    "/app/{appId}/deployments",
+    { params: { path: { appId }, query: { page: 0, length: 1 } } },
+  );
+
+  const latestDeploymentId = latestDeployments?.[0]?.id;
+
+  const { data: deployment, refetch: refetchDeployment } = api.useSuspenseQuery(
     "get",
     "/app/{appId}/deployments/{deploymentId}",
     { params: { path: { appId, deploymentId } } },
@@ -51,7 +59,7 @@ export const DeploymentView = () => {
     "ERROR",
   ].includes(deployment.status);
 
-  const isCurrentDeployment = app.activeDeployment == deploymentId;
+  const isCurrentDeployment = latestDeploymentId == deploymentId;
 
   return (
     <main className="px-8 py-10">
@@ -102,6 +110,16 @@ export const DeploymentView = () => {
             deployment={deployment}
             type="BUILD"
             follow={defaultLogView === "BUILD" && isCurrentDeployment}
+            onLogReceived={(line, pastLogsSent) => {
+              if (
+                pastLogsSent &&
+                (line.log === "Deployment succeeded" ||
+                  line.log.startsWith("Deployment status has been updated to "))
+              ) {
+                // Refetch the deployment to update its status in the UI
+                void refetchDeployment();
+              }
+            }}
           />
         </TabsContent>
         <TabsContent value="RUNTIME">