Refactor how version logs were consumed

coder · BrunoQuaresma · Feb 23, 2024 · Feb 9, 2024 · Feb 21, 2024 · Feb 22, 2024
commit 8ba9ed15a39c2b9fde3fc3b678589ec6e147dc8f
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -211,6 +211,7 @@ export type CreateTemplateOptions = {
   version: CreateTemplateVersionRequest;
   template: Omit<CreateTemplateRequest, "template_version_id">;
   onCreateVersion?: (version: TemplateVersion) => void;
+  onTemplateVersionChanges?: (version: TemplateVersion) => void;
 };
 
 const createTemplateFn = async (options: CreateTemplateOptions) => {
@@ -219,7 +220,7 @@ const createTemplateFn = async (options: CreateTemplateOptions) => {
     options.version,
   );
   options.onCreateVersion?.(version);
-  await waitBuildToBeFinished(version);
+  await waitBuildToBeFinished(version, options.onTemplateVersionChanges);
   return API.createTemplate(options.organizationId, {
     ...options.template,
     template_version_id: version.id,
@@ -282,12 +283,16 @@ export const previousTemplateVersion = (
   };
 };
 
-const waitBuildToBeFinished = async (version: TemplateVersion) => {
+const waitBuildToBeFinished = async (
+  version: TemplateVersion,
+  onRequest?: (data: TemplateVersion) => void,
+) => {
   let data: TemplateVersion;
   let jobStatus: ProvisionerJobStatus;
   do {
     await delay(1000);
     data = await API.getTemplateVersion(version.id);
+    onRequest?.(data);
     jobStatus = data.job.status;
 
     if (jobStatus === "succeeded") {

diff --git a/site/src/modules/templates/useVersionLogs.ts → .../modules/templates/useWatchVersionLogs.ts b/site/src/modules/templates/useVersionLogs.ts → .../modules/templates/useWatchVersionLogs.ts
@@ -1,12 +1,8 @@
 import { watchBuildLogsByTemplateVersionId } from "api/api";
-import {
-  ProvisionerJobLog,
-  ProvisionerJobStatus,
-  TemplateVersion,
-} from "api/typesGenerated";
+import { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
 import { useState, useEffect } from "react";
 
-export const useVersionLogs = (
+export const useWatchVersionLogs = (
   templateVersion: TemplateVersion | undefined,
   options?: { onDone: () => Promise<unknown> },
 ) => {
@@ -15,14 +11,15 @@ export const useVersionLogs = (
   const templateVersionStatus = templateVersion?.job.status;
 
   useEffect(() => {
-    setLogs([]);
-    const enabledStatuses: ProvisionerJobStatus[] = ["running", "pending"];
+    setLogs(undefined);
+  }, [templateVersionId]);
 
+  useEffect(() => {
     if (!templateVersionId || !templateVersionStatus) {
       return;
     }
 
-    if (!enabledStatuses.includes(templateVersionStatus)) {
+    if (templateVersionStatus !== "running") {
       return;
     }
 
@@ -41,8 +38,5 @@ export const useVersionLogs = (
     };
   }, [options?.onDone, templateVersionId, templateVersionStatus]);
 
-  return {
-    logs,
-    setLogs,
-  };
+  return logs;
 };
diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -62,9 +62,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
       }}
       {...attrs}
     >
-      {stages.length === 0 && (
-        <div css={styles.header(theme)}>Waiting for logs...</div>
-      )}
       {stages.map((stage) => {
         const logs = groupedLogsByStage[stage];
         const isEmpty = logs.every((log) => log.output === "");

diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -7,12 +7,11 @@ import { TemplateVersion } from "api/typesGenerated";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { useTheme } from "@emotion/react";
 import { navHeight } from "theme/constants";
-import { useVersionLogs } from "modules/templates/useVersionLogs";
+import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 import { JobError } from "api/queries/templates";
-import AlertTitle from "@mui/material/AlertTitle";
-import { Alert, AlertDetail } from "components/Alert/Alert";
 import Button from "@mui/material/Button";
-import Collapse from "@mui/material/Collapse";
+import { Loader } from "components/Loader/Loader";
+import WarningOutlined from "@mui/icons-material/WarningOutlined";
 
 type BuildLogsDrawerProps = {
   error: unknown;
@@ -29,7 +28,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
   ...drawerProps
 }) => {
   const theme = useTheme();
-  const { logs } = useVersionLogs(templateVersion);
+  const logs = useWatchVersionLogs(templateVersion);
   const logsContainer = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -83,21 +82,54 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
           </IconButton>
         </header>
 
-        <Collapse in={isMissingVariables}>
-          <Alert
+        {isMissingVariables ? (
+          <div
             css={{
-              borderTop: 0,
-              borderRight: 0,
-              backgroundColor: theme.palette.background.paper,
-              borderRadius: 0,
-              borderBottomColor: theme.palette.divider,
-              paddingLeft: 24,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 40,
             }}
-            severity="warning"
-            actions={
+          >
+            <div
+              css={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center",
+                maxWidth: 360,
+              }}
+            >
+              <WarningOutlined
+                css={{ fontSize: 32, color: theme.roles.warning.fill.outline }}
+              />
+              <h3
+                css={{
+                  fontWeight: 500,
+                  lineHeight: "1",
+                  margin: 0,
+                  marginTop: 16,
+                }}
+              >
+                Missing variables
+              </h3>
+              <p
+                css={{
+                  color: theme.palette.text.secondary,
+                  fontSize: 14,
+                  margin: 0,
+                  marginTop: 8,
+                  lineHeight: "1.5",
+                }}
+              >
+                During the build process, we identified some missing variables.
+                Rest assured, we have automatically added them to the form for
+                you.
+              </p>
               <Button
+                css={{ marginTop: 16 }}
                 size="small"
-                variant="text"
+                variant="outlined"
                 onClick={() => {
                   variablesSectionRef.current?.scrollIntoView({
                     behavior: "smooth",
@@ -108,24 +140,24 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
                   drawerProps.onClose();
                 }}
               >
-                Add variables
+                Fill variables
               </Button>
-            }
+            </div>
+          </div>
+        ) : logs ? (
+          <section
+            ref={logsContainer}
+            css={{
+              flex: 1,
+              overflow: "auto",
+              backgroundColor: theme.palette.background.default,
+            }}
           >
-            <AlertTitle>Failed to create template</AlertTitle>
-            <AlertDetail>{isMissingVariables && error.message}</AlertDetail>
-          </Alert>
-        </Collapse>
-        <section
-          ref={logsContainer}
-          css={{
-            flex: 1,
-            overflow: "auto",
-            backgroundColor: theme.palette.background.default,
-          }}
-        >
-          <WorkspaceBuildLogs logs={logs ?? []} css={{ border: 0 }} />
-        </section>
+            <WorkspaceBuildLogs logs={logs} css={{ border: 0 }} />
+          </section>
+        ) : (
+          <Loader />
+        )}
       </div>
     </Drawer>
   );

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -30,6 +30,7 @@ const CreateTemplatePage: FC = () => {
       const template = await createTemplateMutation.mutateAsync({
         ...options,
         onCreateVersion: setTemplateVersion,
+        onTemplateVersionChanges: setTemplateVersion,
       });
       navigate(`/templates/${template.name}/files`);
     },

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -30,7 +30,6 @@ const meta: Meta<typeof TemplateVersionEditor> = {
     template: MockTemplate,
     templateVersion: MockTemplateVersion,
     defaultFileTree: MockTemplateVersionFileTree,
-    onPreview: action("onPreview"),
     onPublish: action("onPublish"),
     onConfirmPublish: action("onConfirmPublish"),
     onCancelPublish: action("onCancelPublish"),

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -67,7 +67,7 @@ export interface TemplateVersionEditorProps {
   resources?: WorkspaceResource[];
   disablePreview?: boolean;
   disableUpdate?: boolean;
-  onPreview: (files: FileTree) => void;
+  onPreview: (files: FileTree) => Promise<void>;
   onPublish: () => void;
   onConfirmPublish: (data: PublishVersionData) => void;
   onCancelPublish: () => void;
@@ -122,14 +122,14 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const [renameFileOpen, setRenameFileOpen] = useState<string>();
   const [dirty, setDirty] = useState(false);
 
-  const triggerPreview = useCallback(() => {
-    onPreview(fileTree);
+  const triggerPreview = useCallback(async () => {
+    await onPreview(fileTree);
     setSelectedTab("logs");
   }, [fileTree, onPreview]);
 
   // Stop ctrl+s from saving files and make ctrl+enter trigger a preview.
   useEffect(() => {
-    const keyListener = (event: KeyboardEvent) => {
+    const keyListener = async (event: KeyboardEvent) => {
       if (!(navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
         return;
       }
@@ -140,7 +140,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
           break;
         case "Enter":
           event.preventDefault();
-          triggerPreview();
+          await triggerPreview();
           break;
       }
     };
@@ -252,8 +252,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 }
                 title="Build template (Ctrl + Enter)"
                 disabled={disablePreview}
-                onClick={() => {
-                  triggerPreview();
+                onClick={async () => {
+                  await triggerPreview();
                 }}
               >
                 Build
@@ -719,7 +719,7 @@ const styles = {
     // Hack to update logs header and lines
     "& .logs-header": {
       border: 0,
-      padding: "0 16px",
+      padding: "8px 16px",
       fontFamily: MONOSPACE_FONT_FAMILY,
 
       "&:first-of-type": {

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -23,7 +23,7 @@ import { FileTree, traverse } from "utils/filetree";
 import { createTemplateVersionFileTree } from "utils/templateVersion";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
-import { useVersionLogs } from "modules/templates/useVersionLogs";
+import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
 
 type Params = {
   version: string;
@@ -54,7 +54,7 @@ export const TemplateVersionEditorPage: FC = () => {
     ...resources(templateVersionQuery.data?.id ?? ""),
     enabled: templateVersionQuery.data?.job.status === "succeeded",
   });
-  const { logs, setLogs } = useVersionLogs(templateVersionQuery.data, {
+  const logs = useWatchVersionLogs(templateVersionQuery.data, {
     onDone: templateVersionQuery.refetch,
   });
   const { fileTree, tarFile } = useFileTree(templateVersionQuery.data);
@@ -93,22 +93,6 @@ export const TemplateVersionEditorPage: FC = () => {
     );
   };
 
-  // Optimistically update the template version data job status to make the
-  // build action feels faster
-  const onBuildStart = () => {
-    setLogs([]);
-
-    queryClient.setQueryData(templateVersionOptions.queryKey, () => {
-      return {
-        ...templateVersionQuery.data,
-        job: {
-          ...templateVersionQuery.data?.job,
-          status: "pending",
-        },
-      };
-    });
-  };
-
   const onBuildEnds = (newVersion: TemplateVersion) => {
     queryClient.setQueryData(templateVersionOptions.queryKey, newVersion);
     navigateToVersion(newVersion);
@@ -141,7 +125,6 @@ export const TemplateVersionEditorPage: FC = () => {
             if (!tarFile) {
               return;
             }
-            onBuildStart();
             const newVersionFile = await generateVersionFiles(
               tarFile,
               newFileTree,
@@ -214,7 +197,6 @@ export const TemplateVersionEditorPage: FC = () => {
             if (!uploadFileMutation.data) {
               return;
             }
-            onBuildStart();
             const newVersion = await createTemplateVersionMutation.mutateAsync({
               provisioner: "terraform",
               storage_method: "file",