Jun 3, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
 Example.args = {
  logs: MockWorkspaceBuildLogs,
 }

 export const Loading = Template.bind({})
 Loading.args = {
  logs: MockWorkspaceBuildLogs,
  isLoading: true,
 }
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
 import dayjs from "dayjs"
 import { FC } from "react"

 export interface WorkspaceBuildLogsProps {
  logs: ProvisionerJobLog[]
  isLoading: boolean
 }

 export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs }) => {
 export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isLoading }) => {
  const groupedLogsByStage = groupLogsByStage(logs)
  const stages = Object.keys(groupedLogsByStage)
  const styles = useStyles()

  return (
    <div className={styles.logs}>
      {stages.map((stage) => {
      {stages.map((stage, stageIndex) => {
        const logs = groupedLogsByStage[stage]
        const isEmpty = logs.every((log) => log.output === "")
        const lines = logs.map((log) => ({
          time: log.created_at,
          output: log.output,
        }))
        const duration = getStageDurationInSeconds(logs)
        const isLastStage = stageIndex === stages.length - 1
        const shouldDisplaySpinner = isLoading && isLastStage
        const shouldDisplayDuration = !isLoading && duration

        return (
          <div key={stage}>
            <div className={styles.header}>
              <div>{stage}</div>
              {duration && <div className={styles.duration}>{duration} seconds</div>}
              {shouldDisplaySpinner && <CircularProgress size={14} className={styles.spinner} />}
              {shouldDisplayDuration && <div className={styles.duration}>{duration} seconds</div>}
            </div>
            {!isEmpty && <Logs lines={lines} className={styles.codeBlock} />}
          </div>
    fontSize: theme.typography.body1.fontSize,
    padding: theme.spacing(2),
    paddingLeft: theme.spacing(4),
    paddingRight: theme.spacing(4),
    borderBottom: `1px solid ${theme.palette.divider}`,
    backgroundColor: theme.palette.background.paper,
    display: "flex",
    padding: theme.spacing(2),
    paddingLeft: theme.spacing(4),
  },

  spinner: {
    marginLeft: "auto",
  },
 }))
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
 import { FC } from "react"
 import { useParams } from "react-router-dom"
 import { ProvisionerJobLog } from "../../api/typesGenerated"
 import { Loader } from "../../components/Loader/Loader"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"

 export const WorkspaceBuildPage: FC = () => {
  const buildId = useBuildId()
  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId } })
  // We can initialize logs as an empty array because it will be a stream
  const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId, logs: [] } })
  const { logs, build } = buildState.context
  const isLoading = !buildState.matches("loaded")
  const styles = useStyles()

  return (
        </Typography>

        {build && <WorkspaceBuildStats build={build} />}
        {!logs && <Loader />}
        {logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} />}
        <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isLoading={isLoading} />
      </Stack>
    </Margins>
  )
diff --git a/site/src/xServices/workspaceBuild/workspaceBuildXService.ts b/site/src/xServices/workspaceBuild/workspaceBuildXService.ts
  build?: WorkspaceBuild
  getBuildError?: Error | unknown
  // Logs
  logs?: ProvisionerJobLog[]
  logs: ProvisionerJobLog[]
 }

 type LogsEvent =
        logs: (_, event) => event.data,
      }),
      addLog: assign({
        logs: (context, event) => {
          const previousLogs = context.logs ?? []
          return [...previousLogs, event.log]
        },
        logs: (context, event) => [...context.logs, event.log],
      }),
    },
    services: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,9 @@ export const Example = Template.bind({})
		Example.args = {
		logs: MockWorkspaceBuildLogs,
		}

		export const Loading = Template.bind({})
		Loading.args = {
		logs: MockWorkspaceBuildLogs,
		isLoading: true,
		}
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		import CircularProgress from "@material-ui/core/CircularProgress"
		import { makeStyles } from "@material-ui/core/styles"
		import dayjs from "dayjs"
		import { FC } from "react"
Expand DownExpand Up		@@ -35,29 +36,34 @@ const getStageDurationInSeconds = (logs: ProvisionerJobLog[]) => {

		export interface WorkspaceBuildLogsProps {
		logs: ProvisionerJobLog[]
		isLoading: boolean
		}

		export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs }) => {
		export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ logs, isLoading }) => {
		const groupedLogsByStage = groupLogsByStage(logs)
		const stages = Object.keys(groupedLogsByStage)
		const styles = useStyles()

		return (
		<div className={styles.logs}>
		{stages.map((stage) => {
		{stages.map((stage, stageIndex) => {
		const logs = groupedLogsByStage[stage]
		const isEmpty = logs.every((log) => log.output === "")
		const lines = logs.map((log) => ({
		time: log.created_at,
		output: log.output,
		}))
		const duration = getStageDurationInSeconds(logs)
		const isLastStage = stageIndex === stages.length - 1
		const shouldDisplaySpinner = isLoading && isLastStage
		const shouldDisplayDuration = !isLoading && duration

		return (
		<div key={stage}>
		<div className={styles.header}>
		<div>{stage}</div>
		{duration && <div className={styles.duration}>{duration} seconds</div>}
		{shouldDisplaySpinner && <CircularProgress size={14} className={styles.spinner} />}
		{shouldDisplayDuration && <div className={styles.duration}>{duration} seconds</div>}
Copy link Member Kira-PilotJun 3, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. should we put "seconds" in a`Language` block? Copy link CollaboratorAuthor BrunoQuaresmaJun 3, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Definetely!
		</div>
		{!isEmpty && <Logs lines={lines} className={styles.codeBlock} />}
		</div>
Expand All		@@ -78,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
		fontSize: theme.typography.body1.fontSize,
		padding: theme.spacing(2),
		paddingLeft: theme.spacing(4),
		paddingRight: theme.spacing(4),
		borderBottom: `1px solid ${theme.palette.divider}`,
		backgroundColor: theme.palette.background.paper,
		display: "flex",
Expand All		@@ -94,4 +101,8 @@ const useStyles = makeStyles((theme) => ({
		padding: theme.spacing(2),
		paddingLeft: theme.spacing(4),
		},

		spinner: {
		marginLeft: "auto",
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,6 @@ import { useMachine } from "@xstate/react"
		import { FC } from "react"
		import { useParams } from "react-router-dom"
		import { ProvisionerJobLog } from "../../api/typesGenerated"
		import { Loader } from "../../components/Loader/Loader"
		import { Margins } from "../../components/Margins/Margins"
		import { Stack } from "../../components/Stack/Stack"
		import { WorkspaceBuildLogs } from "../../components/WorkspaceBuildLogs/WorkspaceBuildLogs"
Expand All		@@ -27,8 +26,10 @@ const useBuildId = () => {

		export const WorkspaceBuildPage: FC = () => {
		const buildId = useBuildId()
		const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId } })
		// We can initialize logs as an empty array because it will be a stream
		const [buildState] = useMachine(workspaceBuildMachine, { context: { buildId, logs: [] } })
		const { logs, build } = buildState.context
		const isLoading = !buildState.matches("loaded")
		const styles = useStyles()

		return (
Expand All		@@ -39,8 +40,7 @@ export const WorkspaceBuildPage: FC = () => {
		</Typography>

		{build && <WorkspaceBuildStats build={build} />}
		{!logs && <Loader />}
		{logs && <WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} />}
		<WorkspaceBuildLogs logs={sortLogsByCreatedAt(logs)} isLoading={isLoading} />
		</Stack>
		</Margins>
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,7 +8,7 @@ type LogsContext = {
		build?: WorkspaceBuild
		getBuildError?: Error \| unknown
		// Logs
		logs?: ProvisionerJobLog[]
		logs: ProvisionerJobLog[]
		}

		type LogsEvent =
Expand DownExpand Up		@@ -110,10 +110,7 @@ export const workspaceBuildMachine = createMachine(
		logs: (_, event) => event.data,
		}),
		addLog: assign({
		logs: (context, event) => {
		const previousLogs = context.logs ?? []
		return [...previousLogs, event.log]
		},
		logs: (context, event) => [...context.logs, event.log],
		}),
		},
		services: {
Expand Down