coder · BrunoQuaresma · Mar 31, 2023 · Mar 30, 2023 · Mar 30, 2023 · Mar 30, 2023
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -489,15 +489,23 @@ export const postWorkspaceBuild = async (
 export const startWorkspace = (
   workspaceId: string,
   templateVersionID: string,
+  debug = false,
 ) =>
   postWorkspaceBuild(workspaceId, {
     transition: "start",
     template_version_id: templateVersionID,
+    log_level: debug ? "debug" : undefined,
+  })
+export const stopWorkspace = (workspaceId: string, debug = false) =>
+  postWorkspaceBuild(workspaceId, {
+    transition: "stop",
+    log_level: debug ? "debug" : undefined,
+  })
+export const deleteWorkspace = (workspaceId: string, debug = false) =>
+  postWorkspaceBuild(workspaceId, {
+    transition: "delete",
+    log_level: debug ? "debug" : undefined,
   })
-export const stopWorkspace = (workspaceId: string) =>
-  postWorkspaceBuild(workspaceId, { transition: "stop" })
-export const deleteWorkspace = (workspaceId: string) =>
-  postWorkspaceBuild(workspaceId, { transition: "delete" })
 
 export const cancelWorkspaceBuild = async (
   workspaceBuildId: TypesGen.WorkspaceBuild["id"],

diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
@@ -60,9 +60,14 @@ export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
         spacing={0}
         justifyContent="space-between"
       >
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          className={classes.fullWidth}
+        >
           {severityConstants[severity].icon}
-          <Stack spacing={0}>
+          <Stack spacing={0} className={classes.fullWidth}>
             {children}
             {alertMessage}
             {detail && (
@@ -94,11 +99,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     borderColor: severityConstants[props.severity].color,
     border: `1px solid ${colors.orange[7]}`,
     borderRadius: theme.shape.borderRadius,
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(2),
     backgroundColor: `${colors.gray[16]}`,
     textAlign: "left",
 
-    "& span": {
+    "& > span": {
       paddingTop: `${theme.spacing(0.25)}px`,
     },
 
@@ -108,4 +113,8 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
       marginRight: `${theme.spacing(1)}px`,
     },
   }),
+
+  fullWidth: {
+    width: "100%",
+  },
 }))
diff --git a/site/src/components/AlertBanner/severityConstants.tsx b/site/src/components/AlertBanner/severityConstants.tsx
@@ -13,24 +13,20 @@ export const severityConstants: Record<
     color: colors.orange[7],
     icon: (
       <ReportProblemOutlinedIcon
-        fontSize="small"
-        style={{ color: colors.orange[7] }}
+        style={{ color: colors.orange[7], fontSize: 16 }}
       />
     ),
   },
   error: {
     color: colors.red[7],
     icon: (
       <ErrorOutlineOutlinedIcon
-        fontSize="small"
-        style={{ color: colors.red[7] }}
+        style={{ color: colors.red[7], fontSize: 16 }}
       />
     ),
   },
   info: {
     color: colors.blue[7],
-    icon: (
-      <InfoOutlinedIcon fontSize="small" style={{ color: colors.blue[7] }} />
-    ),
+    icon: <InfoOutlinedIcon style={{ color: colors.blue[7], fontSize: 16 }} />,
   },
 }
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
@@ -93,7 +93,7 @@ const useStyles = makeStyles<
     background: theme.palette.background.default,
   },
   scrollWrapper: {
-    width: "fit-content",
+    minWidth: "fit-content",
   },
   line: {
     wordBreak: "break-all",
@@ -109,7 +109,7 @@ const useStyles = makeStyles<
     },
 
     "&.debug": {
-      backgroundColor: theme.palette.grey[900],
+      backgroundColor: theme.palette.background.paperLight,
     },
 
     "&.warn": {

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -1,6 +1,9 @@
+import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
+import RefreshOutlined from "@material-ui/icons/RefreshOutlined"
 import { Avatar } from "components/Avatar/Avatar"
 import { AgentRow } from "components/Resources/AgentRow"
+import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import {
   ActiveTransition,
   WorkspaceBuildProgress,
@@ -55,6 +58,8 @@ export interface WorkspaceProps {
   applicationsHost?: string
   template?: TypesGen.Template
   quota_budget?: number
+  failedBuildLogs: TypesGen.ProvisionerJobLog[] | undefined
+  handleBuildRetry: () => void
 }
 
 /**
@@ -80,6 +85,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   applicationsHost,
   template,
   quota_budget,
+  failedBuildLogs,
+  handleBuildRetry,
 }) => {
   const styles = useStyles()
   const navigate = useNavigate()
@@ -177,6 +184,38 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           handleUpdate={handleUpdate}
         />
 
+        {failedBuildLogs && (
+          <Stack>
+            <AlertBanner severity="error">
+              <Stack
+                className={styles.fullWidth}
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <Stack spacing={0}>
+                  <span>Workspace build failed</span>
+                  <span className={styles.errorDetails}>
+                    {workspace.latest_build.job.error}
+                  </span>
+                </Stack>
+
+                <div>
+                  <Button
+                    onClick={handleBuildRetry}
+                    startIcon={<RefreshOutlined />}
+                    size="small"
+                    variant="outlined"
+                  >
+                    Try again in debug mode
+                  </Button>
+                </div>
+              </Stack>
+            </AlertBanner>
+            <WorkspaceBuildLogs logs={failedBuildLogs} />
+          </Stack>
+        )}
+
         {transitionStats !== undefined && (
           <WorkspaceBuildProgress
             workspace={workspace}
@@ -252,5 +291,14 @@ export const useStyles = makeStyles((theme) => {
     logs: {
       border: `1px solid ${theme.palette.divider}`,
     },
+
+    errorDetails: {
+      color: theme.palette.text.secondary,
+      fontSize: 12,
+    },
+
+    fullWidth: {
+      width: "100%",
+    },
   }
 })
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -104,6 +104,7 @@ const useStyles = makeStyles<
     padding: theme.spacing(2),
     paddingLeft: theme.spacing(3),
     paddingRight: theme.spacing(3),
+    borderTop: `1px solid ${theme.palette.divider}`,
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     display: "flex",
@@ -113,6 +114,7 @@ const useStyles = makeStyles<
     "&:first-child": {
       borderTopLeftRadius: theme.shape.borderRadius,
       borderTopRightRadius: theme.shape.borderRadius,
+      borderTop: 0,
     },
 
     "&:last-child": {
@@ -121,6 +123,10 @@ const useStyles = makeStyles<
       borderBottomLeftRadius: theme.shape.borderRadius,
       borderBottomRightRadius: theme.shape.borderRadius,
     },
+
+    "& + $header": {
+      borderTop: 0,
+    },
   },
 
   duration: {

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,45 +1,56 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { useQuery } from "@tanstack/react-query"
 import { useMachine } from "@xstate/react"
+import { getWorkspaceBuildLogs } from "api/api"
+import { Workspace } from "api/typesGenerated"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { Loader } from "components/Loader/Loader"
-import { FC, useEffect } from "react"
+import { FC, useRef } from "react"
 import { useParams } from "react-router-dom"
-import { firstOrItem } from "util/array"
 import { quotaMachine } from "xServices/quotas/quotasXService"
 import { workspaceMachine } from "xServices/workspace/workspaceXService"
 import { WorkspaceReadyPage } from "./WorkspaceReadyPage"
 
+const useFailedBuildLogs = (workspace: Workspace | undefined) => {
+  const now = useRef(new Date())
+  return useQuery({
+    queryKey: ["logs", workspace?.latest_build.id],
+    queryFn: () => {
+      if (!workspace) {
+        throw new Error(
+          `Build log query being called before workspace is defined`,
+        )
+      }
+
+      return getWorkspaceBuildLogs(workspace.latest_build.id, now.current)
+    },
+    enabled: workspace?.latest_build.job.error !== undefined,
+  })
+}
+
 export const WorkspacePage: FC = () => {
-  const { username: usernameQueryParam, workspace: workspaceQueryParam } =
-    useParams()
-  const username = firstOrItem(usernameQueryParam, null)
-  const workspaceName = firstOrItem(workspaceQueryParam, null)
-  const [workspaceState, workspaceSend] = useMachine(workspaceMachine)
+  const { username, workspace: workspaceName } = useParams() as {
+    username: string
+    workspace: string
+  }
+  const [workspaceState, workspaceSend] = useMachine(workspaceMachine, {
+    context: {
+      workspaceName,
+      username,
+    },
+  })
   const {
     workspace,
     getWorkspaceError,
     getTemplateWarning,
     getTemplateParametersWarning,
     checkPermissionsError,
   } = workspaceState.context
-  const [quotaState, quotaSend] = useMachine(quotaMachine)
+  const [quotaState] = useMachine(quotaMachine, { context: { username } })
   const { getQuotaError } = quotaState.context
   const styles = useStyles()
-
-  /**
-   * Get workspace, template, and organization on mount and whenever workspaceId changes.
-   * workspaceSend should not change.
-   */
-  useEffect(() => {
-    username &&
-      workspaceName &&
-      workspaceSend({ type: "GET_WORKSPACE", username, workspaceName })
-  }, [username, workspaceName, workspaceSend])
-
-  useEffect(() => {
-    username && quotaSend({ type: "GET_QUOTA", username })
-  }, [username, quotaSend])
+  const failedBuildLogs = useFailedBuildLogs(workspace)
 
   return (
     <ChooseOne>
@@ -76,6 +87,7 @@ export const WorkspacePage: FC = () => {
           workspaceState={workspaceState}
           quotaState={quotaState}
           workspaceSend={workspaceSend}
+          failedBuildLogs={failedBuildLogs.data}
         />
       </Cond>
       <Cond>

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -1,4 +1,5 @@
 import { useActor } from "@xstate/react"
+import { ProvisionerJobLog } from "api/typesGenerated"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
 import dayjs from "dayjs"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
@@ -31,11 +32,13 @@ interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>
   quotaState: StateFrom<typeof quotaMachine>
   workspaceSend: (event: WorkspaceEvent) => void
+  failedBuildLogs: ProvisionerJobLog[] | undefined
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
   quotaState,
+  failedBuildLogs,
   workspaceSend,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
@@ -85,6 +88,7 @@ export const WorkspaceReadyPage = ({
       </Helmet>
 
       <Workspace
+        failedBuildLogs={failedBuildLogs}
         scheduleProps={{
           onDeadlineMinus: (hours: number) => {
             bannerSend({
@@ -112,6 +116,7 @@ export const WorkspaceReadyPage = ({
         handleUpdate={() => workspaceSend({ type: "UPDATE" })}
         handleCancel={() => workspaceSend({ type: "CANCEL" })}
         handleSettings={() => navigate("settings")}
+        handleBuildRetry={() => workspaceSend({ type: "RETRY_BUILD" })}
         resources={workspace.latest_build.resources}
         builds={builds}
         canUpdateWorkspace={canUpdateWorkspace}

diff --git a/site/src/xServices/quotas/quotasXService.ts b/site/src/xServices/quotas/quotasXService.ts
@@ -3,37 +3,27 @@ import * as API from "../../api/api"
 import { WorkspaceQuota } from "../../api/typesGenerated"
 
 export type QuotaContext = {
+  username: string
   quota?: WorkspaceQuota
   getQuotaError?: Error | unknown
 }
 
-export type QuotaEvent = {
-  type: "GET_QUOTA"
-  username: string
-}
-
 export const quotaMachine = createMachine(
   {
     id: "quotasMachine",
     predictableActionArguments: true,
     tsTypes: {} as import("./quotasXService.typegen").Typegen0,
     schema: {
       context: {} as QuotaContext,
-      events: {} as QuotaEvent,
       services: {
         getQuota: {
           data: {} as WorkspaceQuota,
         },
       },
     },
-    context: {},
-    initial: "idle",
+    initial: "gettingQuotas",
     states: {
-      idle: {
-        on: {
-          GET_QUOTA: "gettingQuotas",
-        },
-      },
+      idle: {},
       gettingQuotas: {
         entry: "clearGetQuotaError",
         invoke: {
@@ -67,7 +57,7 @@ export const quotaMachine = createMachine(
       }),
     },
     services: {
-      getQuota: (context, event) => API.getWorkspaceQuota(event.username),
+      getQuota: ({ username }) => API.getWorkspaceQuota(username),
     },
   },
 )