Skip to content

feature: Load workspace build logs from streaming #1997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jun 3, 2022
Merged

feature: Load workspace build logs from streaming #1997

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a9fb43c
Load logs from stream
BrunoQuaresma Jun 2, 2022
5478411
Use polyfill for streaming
BrunoQuaresma Jun 2, 2022
600d5bf
Add loading indicator
BrunoQuaresma Jun 2, 2022
79758da
Fix loader
BrunoQuaresma Jun 2, 2022
ec8c088
Remove unused comment
BrunoQuaresma Jun 2, 2022
7232e65
Fix lint
BrunoQuaresma Jun 2, 2022
1041f37
Add definition type in tsconfig test
BrunoQuaresma Jun 2, 2022
3d7acf1
Fix test
BrunoQuaresma Jun 3, 2022
6b74a7f
Merge branch 'main' of github.com:coder/coder into bq/stream-logs
BrunoQuaresma Jun 3, 2022
27d1020
Move seconds to language
BrunoQuaresma Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add loading indicator
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jun 2, 2022
commit 600d5bf7ec3025d6a3891323c9d30bb8c0187e31
6 changes: 6 additions & 0 deletions site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx
View file
Open in desktop
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,
}
17 changes: 14 additions & 3 deletions site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
View file
Open in desktop
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 Down Expand 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

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
Collaborator Author

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",
},
}))
8 changes: 4 additions & 4 deletions site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
View file
Open in desktop
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
7 changes: 2 additions & 5 deletions site/src/xServices/workspaceBuild/workspaceBuildXService.ts
View file
Open in desktop
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 Down Expand 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