Pull startup script logs on frontend

code-asher · code-asher · commit 45d250fcad75 · 2023-03-01T08:19:42.000-09:00
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -773,6 +773,15 @@ export const getAgentListeningPorts = async (
   return response.data
 }
 
+export const getStartupScriptLogs = async (
+  workspaceBuildId: string,
+): Promise<TypesGen.StartupScriptLog[]> => {
+  const response = await axios.get(
+    `/api/v2/workspacebuilds/${workspaceBuildId}/startup-script-logs`,
+  )
+  return response.data
+}
+
 export const getDeploymentConfig =
   async (): Promise<TypesGen.DeploymentConfig> => {
     const response = await axios.get(`/api/v2/config/deployment`)
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -132,3 +132,13 @@ CancellationError.args = {
     }),
   },
 }
+
+export const StartupLogsError = Template.bind({})
+StartupLogsError.args = {
+  StartupLogs: new Error("Unable to fetch startup logs"),
+}
+
+export const StartupLogs = Template.bind({})
+StartupLogs.args = {
+  StartupLogs: [{ agent_id: "agent", job_id: "job", output: "startup logs" }],
+}
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
-import { FC } from "react"
+import { FC, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
@@ -24,6 +24,7 @@ import {
 } from "components/WorkspaceBuildProgress/WorkspaceBuildProgress"
 import { AgentRow } from "components/Resources/AgentRow"
 import { Avatar } from "components/Avatar/Avatar"
+import { CodeBlock } from "components/CodeBlock/CodeBlock"
 
 export enum WorkspaceErrors {
   GET_RESOURCES_ERROR = "getResourcesError",
@@ -60,6 +61,7 @@ export interface WorkspaceProps {
   template?: TypesGen.Template
   templateParameters?: TypesGen.TemplateVersionParameter[]
   quota_budget?: number
+  startupScriptLogs?: TypesGen.StartupScriptLog[] | Error | unknown
 }
 
 /**
@@ -87,6 +89,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   template,
   templateParameters,
   quota_budget,
+  startupScriptLogs,
 }) => {
   const { t } = useTranslation("workspacePage")
   const styles = useStyles()
@@ -233,6 +236,19 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           />
         )}
 
+        {typeof startupScriptLogs !== "undefined" &&
+          (Array.isArray(startupScriptLogs) ? (
+            startupScriptLogs.map((log) => (
+              <CodeBlock
+                key={log.agent_id}
+                className={styles.logs}
+                lines={log.output ? log.output.split("\n") : "No output"}
+              />
+            ))
+          ) : (
+            <AlertBanner severity="error" error={startupScriptLogs} />
+          ))}
+
         {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
           <AlertBanner
             severity="error"
@@ -279,5 +295,8 @@ export const useStyles = makeStyles((theme) => {
     timelineContents: {
       margin: 0,
     },
+    logs: {
+      border: `1px solid ${theme.palette.divider}`,
+    },
   }
 })
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,8 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useMachine } from "@xstate/react"
+import * as API from "api/api"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
-import { FC, useEffect } from "react"
+import { FC, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { Loader } from "components/Loader/Loader"
 import { firstOrItem } from "util/array"
@@ -27,6 +28,10 @@ export const WorkspacePage: FC = () => {
   const { getQuotaError } = quotaState.context
   const styles = useStyles()
 
+  const [startupScriptLogs, setStartupScriptLogs] = useState<
+    Record<string, string> | Error | undefined | unknown
+  >(undefined)
+
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
    * workspaceSend should not change.
@@ -41,6 +46,22 @@ export const WorkspacePage: FC = () => {
     username && quotaSend({ type: "GET_QUOTA", username })
   }, [username, quotaSend])
 
+  // Get startup logs once we have agents or when the agents change.
+  // TODO: Should use xstate?  Or that new thing?
+  // TODO: Does not stream yet.
+  // TODO: Should maybe add to the existing SSE endpoint instead?
+  useEffect(() => {
+    if (workspace?.latest_build) {
+      API.getStartupScriptLogs(workspace.latest_build.id)
+        .then((logs) => {
+          setStartupScriptLogs(logs)
+        })
+        .catch((error) => {
+          setStartupScriptLogs(error)
+        })
+    }
+  }, [workspace])
+
   return (
     <ChooseOne>
       <Cond condition={workspaceState.matches("error")}>
@@ -76,6 +97,7 @@ export const WorkspacePage: FC = () => {
           workspaceState={workspaceState}
           quotaState={quotaState}
           workspaceSend={workspaceSend}
+          startupScriptLogs={startupScriptLogs}
         />
       </Cond>
       <Cond>
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -30,12 +30,14 @@ interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>
   quotaState: StateFrom<typeof quotaMachine>
   workspaceSend: (event: WorkspaceEvent) => void
+  startupScriptLogs?: Record<string, string> | Error
 }
 
 export const WorkspaceReadyPage = ({
   workspaceState,
   quotaState,
   workspaceSend,
+  startupScriptLogs,
 }: WorkspaceReadyPageProps): JSX.Element => {
   const [_, bannerSend] = useActor(
     workspaceState.children["scheduleBannerMachine"],
@@ -129,6 +131,7 @@ export const WorkspaceReadyPage = ({
         template={template}
         templateParameters={templateParameters}
         quota_budget={quotaState.context.quota?.budget}
+        startupScriptLogs={startupScriptLogs}
       />
       <DeleteDialog
         entity="workspace"
diff --git a/site/src/xServices/workspace/workspaceXService.ts b/site/src/xServices/workspace/workspaceXService.ts
@@ -751,6 +751,7 @@ export const workspaceMachine = createMachine(
             checkRefresh: true,
             data: JSON.parse(event.data),
           })
+          // refresh
         })
 
         // handle any error events returned by our sse
