Extract logs

coder · BrunoQuaresma · Nov 3, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit c024a1ddb5490082ee1c53dbcea21ab5e331a8b6
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -19,6 +19,8 @@ import {
   createTemplateVersionFileTree,
   isAllowedFile,
 } from "utils/templateVersion";
+import { watchBuildLogsByTemplateVersionId } from "api/api";
+import { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
 
 type Params = {
   version: string;
@@ -47,9 +49,12 @@ export const TemplateVersionEditorPage: FC = () => {
   const createTemplateVersionMutation = useMutation(
     createTemplateVersion(orgId),
   );
+  const [currentVersionOnEditor, setCurrentVersionOnEditor] =
+    useState<TemplateVersion>();
 
+  // Initialize file tree
   useEffect(() => {
-    const initialize = async (file: ArrayBuffer) => {
+    const initializeFileTree = async (file: ArrayBuffer) => {
       const tarReader = new TarReader();
       await tarReader.readFile(file);
       currentTarFileRef.current = tarReader;
@@ -58,24 +63,56 @@ export const TemplateVersionEditorPage: FC = () => {
     };
 
     if (fileQuery.data) {
-      initialize(fileQuery.data).catch(() => {
+      initializeFileTree(fileQuery.data).catch(() => {
         console.error("Error on initializing the editor");
       });
     }
   }, [fileQuery.data, sendEvent]);
 
+  // Initialize current version used on editor
+  useEffect(() => {
+    if (templateVersionQuery.data) {
+      setCurrentVersionOnEditor(templateVersionQuery.data);
+    }
+  }, [templateVersionQuery.data]);
+
+  // Watch version logs
+  const [logs, setLogs] = useState<ProvisionerJobLog[]>([]);
+  useEffect(() => {
+    if (!currentVersionOnEditor) {
+      return;
+    }
+
+    const socket = watchBuildLogsByTemplateVersionId(
+      currentVersionOnEditor.id,
+      {
+        onMessage: (log) => {
+          setLogs((logs) => [...logs, log]);
+        },
+        onDone: () => {
+          sendEvent({ type: "BUILD_DONE" });
+        },
+        onError: (error) => {
+          console.error(error);
+        },
+      },
+    );
+
+    return () => {
+      socket.close();
+    };
+  }, [currentVersionOnEditor, sendEvent]);
+
   return (
     <>
       <Helmet>
         <title>{pageTitle(`${templateName} · Template Editor`)}</title>
       </Helmet>
 
-      {templateQuery.data && templateVersionQuery.data && fileTree && (
+      {templateQuery.data && currentVersionOnEditor && fileTree && (
         <TemplateVersionEditor
           template={templateQuery.data}
-          templateVersion={
-            editorState.context.version || templateVersionQuery.data
-          }
+          templateVersion={currentVersionOnEditor}
           isBuildingNewVersion={Boolean(editorState.context.version)}
           defaultFileTree={fileTree}
           onPreview={async (newFileTree) => {
@@ -96,6 +133,8 @@ export const TemplateVersionEditorPage: FC = () => {
               template_id: templateQuery.data.id,
               file_id: serverFile.hash,
             });
+            setLogs([]);
+            setCurrentVersionOnEditor(newVersion);
             sendEvent({
               type: "CREATED_VERSION",
               data: newVersion,
@@ -140,7 +179,7 @@ export const TemplateVersionEditorPage: FC = () => {
             editorState.context.version?.job.status !== "succeeded"
           }
           resources={editorState.context.resources}
-          buildLogs={editorState.context.buildLogs}
+          buildLogs={logs}
           isPromptingMissingVariables={editorState.matches("promptVariables")}
           missingVariables={editorState.context.missingVariables}
           onSubmitMissingVariableValues={(values) => {

diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -1,6 +1,4 @@
 import {
-  ProvisionerJobLog,
-  ProvisionerJobStatus,
   TemplateVersion,
   TemplateVersionVariable,
   VariableValue,
@@ -15,7 +13,6 @@ export interface TemplateVersionEditorMachineContext {
   templateId?: string;
   version?: TemplateVersion;
   resources?: WorkspaceResource[];
-  buildLogs?: ProvisionerJobLog[];
   publishingError?: unknown;
   lastSuccessfulPublishedVersion?: TemplateVersion;
   missingVariables?: TemplateVersionVariable[];
@@ -40,7 +37,6 @@ export const templateVersionEditorMachine = createMachine(
             fileId: string;
           }
         | { type: "CANCEL_MISSING_VARIABLE_VALUES" }
-        | { type: "ADD_BUILD_LOG"; log: ProvisionerJobLog }
         | { type: "BUILD_DONE" }
         | { type: "PUBLISH" }
         | ({ type: "CONFIRM_PUBLISH" } & PublishVersionData)
@@ -118,14 +114,7 @@ export const templateVersionEditorMachine = createMachine(
 
       watchingBuildLogs: {
         tags: "loading",
-        invoke: {
-          id: "watchBuildLogs",
-          src: "watchBuildLogs",
-        },
         on: {
-          ADD_BUILD_LOG: {
-            actions: "addBuildLog",
-          },
           BUILD_DONE: "fetchingVersion",
         },
       },
@@ -192,7 +181,6 @@ export const templateVersionEditorMachine = createMachine(
   {
     actions: {
       resetCreateBuildData: assign({
-        buildLogs: (_, _1) => [],
         resources: (_, _1) => [],
       }),
       assignResources: assign({
@@ -205,28 +193,6 @@ export const templateVersionEditorMachine = createMachine(
         lastSuccessfulPublishedVersion: (ctx) => ctx.version,
         version: () => undefined,
       }),
-      addBuildLog: assign({
-        buildLogs: (context, event) => {
-          const previousLogs = context.buildLogs ?? [];
-          return [...previousLogs, event.log];
-        },
-        // Instead of periodically fetching the version,
-        // we just assume the state is running after the first log.
-        //
-        // The machine fetches the version after the log stream ends anyways!
-        version: (context) => {
-          if (!context.version || context.buildLogs?.length !== 0) {
-            return context.version;
-          }
-          return {
-            ...context.version,
-            job: {
-              ...context.version.job,
-              status: "running" as ProvisionerJobStatus,
-            },
-          };
-        },
-      }),
       assignPublishingError: assign({
         publishingError: (_, event) => event.data,
       }),
@@ -261,29 +227,6 @@ export const templateVersionEditorMachine = createMachine(
         }
         return API.getTemplateVersion(ctx.version.id);
       },
-      watchBuildLogs:
-        ({ version }) =>
-        async (callback) => {
-          if (!version) {
-            throw new Error("version must be set");
-          }
-
-          const socket = API.watchBuildLogsByTemplateVersionId(version.id, {
-            onMessage: (log) => {
-              callback({ type: "ADD_BUILD_LOG", log });
-            },
-            onDone: () => {
-              callback({ type: "BUILD_DONE" });
-            },
-            onError: (error) => {
-              console.error(error);
-            },
-          });
-
-          return () => {
-            socket.close();
-          };
-        },
       getResources: (ctx) => {
         if (!ctx.version) {
           throw new Error("template version must be set");