feat(site): display builds logs by default (#11597)

site/src/hooks/useWorkspaceBuildLogs.ts

@@ -1,20 +1,26 @@
 import { watchBuildLogsByBuildId } from "api/api";
 import { ProvisionerJobLog } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
-// buildId is optional because sometimes the build is not loaded yet
-export const useWorkspaceBuildLogs = (buildId?: string) => {
+export const useWorkspaceBuildLogs = (
+  // buildId is optional because sometimes the build is not loaded yet
+  buildId: string | undefined,
+  enabled: boolean = true,
+) => {
   const [logs, setLogs] = useState<ProvisionerJobLog[]>();
+  const socket = useRef<WebSocket>();
+
   useEffect(() => {
-    if (!buildId) {
+    if (!buildId || !enabled) {
+      socket.current?.close();
       return;
     }
 
     // Every time this hook is called reset the values
     setLogs(undefined);
 
-    const socket = watchBuildLogsByBuildId(buildId, {
+    socket.current = watchBuildLogsByBuildId(buildId, {
       // Retrieve all the logs
       after: -1,
       onMessage: (log) => {
@@ -31,9 +37,9 @@ export const useWorkspaceBuildLogs = (buildId?: string) => {
     });
 
     return () => {
-      socket.close();
+      socket.current?.close();
     };
-  }, [buildId]);
+  }, [buildId, enabled]);
 
   return logs;
 };

site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx

@@ -5,7 +5,6 @@ import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 import { Workspace } from "./Workspace";
 import { pageTitle } from "utils/page";
-import { hasJobError } from "utils/workspace";
 import { UpdateBuildParametersDialog } from "./UpdateBuildParametersDialog";
 import { ChangeVersionDialog } from "./ChangeVersionDialog";
 import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -67,12 +66,11 @@ export const WorkspaceReadyPage = ({
   });
 
   // Build logs
-  const buildLogs = useWorkspaceBuildLogs(workspace.latest_build.id);
-  const shouldDisplayBuildLogs =
-    hasJobError(workspace) ||
-    ["canceling", "deleting", "pending", "starting", "stopping"].includes(
-      workspace.latest_build.status,
-    );
+  const shouldDisplayBuildLogs = workspace.latest_build.status !== "running";
+  const buildLogs = useWorkspaceBuildLogs(
+    workspace.latest_build.id,
+    shouldDisplayBuildLogs,
+  );
 
   // Restart
   const [confirmingRestart, setConfirmingRestart] = useState<{