Show logs and build errors

BrunoQuaresma · BrunoQuaresma · commit 1180e8be3ba7 · 2023-10-06T14:12:29.000Z
diff --git a/site/src/api/queries/templateVersions.ts b/site/src/api/queries/templateVersions.ts
@@ -0,0 +1,8 @@
+import * as API from "api/api";
+
+export const templateVersionLogs = (versionId: string) => {
+  return {
+    queryKey: ["templateVersion", versionId, "logs"],
+    queryFn: () => API.getTemplateVersionLogs(versionId),
+  };
+};
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -157,18 +157,16 @@ const waitBuildToBeFinished = async (version: TemplateVersion) => {
   } while (jobStatus === "pending" || jobStatus === "running");
 
   // No longer pending/running, but didn't succeed
-  throw new JobError(data.job);
+  throw new JobError(data.job, version);
 };
 
-class JobError extends Error {
-  private job: ProvisionerJob;
+export class JobError extends Error {
+  public job: ProvisionerJob;
+  public version: TemplateVersion;
 
-  constructor(job: ProvisionerJob) {
+  constructor(job: ProvisionerJob, version: TemplateVersion) {
     super(job.error);
     this.job = job;
-  }
-
-  get code() {
-    return this.job.error_code;
+    this.version = version;
   }
 }
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -11,13 +11,15 @@ import { CreateTemplateForm } from "./CreateTemplateForm";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import {
+  JobError,
   createTemplate,
   templateByName,
   templateVersion,
   templateVersionVariables,
 } from "api/queries/templates";
 import { ProvisionerType } from "api/typesGenerated";
 import { calculateAutostopRequirementDaysValue } from "utils/schedule";
+import { templateVersionLogs } from "api/queries/templateVersions";
 
 const provisioner: ProvisionerType =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Playwright needs to use a different provisioner type!
@@ -122,17 +124,15 @@ const DuplicateTemplateView = () => {
   const templateByNameQuery = useQuery(
     templateByName(organizationId, searchParams.get("fromTemplate")!),
   );
+  const activeVersionId =
+    templateByNameQuery.data?.template.active_version_id ?? "";
   const templateVersionQuery = useQuery({
-    ...templateVersion(
-      templateByNameQuery.data?.template.active_version_id ?? "",
-    ),
-    enabled: templateByNameQuery.data !== undefined,
+    ...templateVersion(activeVersionId),
+    enabled: templateByNameQuery.isSuccess,
   });
   const templateVersionVariablesQuery = useQuery({
-    ...templateVersionVariables(
-      templateByNameQuery.data?.template.active_version_id ?? "",
-    ),
-    enabled: templateByNameQuery.data !== undefined,
+    ...templateVersionVariables(activeVersionId),
+    enabled: templateByNameQuery.isSuccess,
   });
   const isLoading =
     templateByNameQuery.isLoading ||
@@ -146,6 +146,12 @@ const DuplicateTemplateView = () => {
   const formEntitlements = useFormEntitlements();
 
   const createTemplateMutation = useMutation(createTemplate());
+  const createError = createTemplateMutation.error;
+  const isJobError = createError instanceof JobError;
+  const templateVersionLogsQuery = useQuery({
+    ...templateVersionLogs(isJobError ? createError.version.id : ""),
+    enabled: isJobError,
+  });
 
   if (isLoading) {
     return <Loader />;
@@ -176,13 +182,20 @@ const DuplicateTemplateView = () => {
         });
         navigate(`/templates/${template.name}`);
       }}
-
-      // jobError={jobError}
-      // logs={jobLogs}
+      jobError={isJobError ? createError.job.error : undefined}
+      logs={templateVersionLogsQuery.data}
     />
   );
 };
 
+const ImportStaterTemplateView = () => {
+  return <div>Import</div>;
+};
+
+const UploadTemplateView = () => {
+  return <div>Upload</div>;
+};
+
 const useFormEntitlements = () => {
   const { entitlements } = useDashboard();
   const allowAdvancedScheduling =
@@ -201,14 +214,6 @@ const useFormEntitlements = () => {
   };
 };
 
-const ImportStaterTemplateView = () => {
-  return <div>Import</div>;
-};
-
-const UploadTemplateView = () => {
-  return <div>Upload</div>;
-};
-
 const prepareData = (formData: CreateTemplateData) => {
   const {
     default_ttl_hours,
