Skip to content

Commit 903e8ee

Browse files
presleyppresleyp
committed
Render status and buttons
1 parent c100ec5 commit 903e8ee

File tree

5 files changed

+106
-26
lines changed

5 files changed

+106
-26
lines changed

‎site/src/components/Workspace/Workspace.stories.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { action } from "@storybook/addon-actions"
12
import { Story } from "@storybook/react"
23
import React from "react"
34
import { MockOrganization, MockTemplate, MockWorkspace } from "../../testHelpers"
@@ -11,9 +12,25 @@ export default {
1112

1213
const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />
1314

14-
export const Example = Template.bind({})
15-
Example.args = {
15+
export const Started = Template.bind({})
16+
Started.args = {
1617
organization: MockOrganization,
1718
template: MockTemplate,
1819
workspace: MockWorkspace,
20+
handleStart: action("start"),
21+
handleStop: action("stop"),
22+
handleRetry: action("retry"),
23+
workspaceStatus: "started"
1924
}
25+
26+
export const Starting = Template.bind({})
27+
Starting.args = { ...Started.args, workspaceStatus: "starting" }
28+
29+
export const Stopped = Template.bind({})
30+
Stopped.args = { ...Started.args, workspaceStatus: "stopped" }
31+
32+
export const Stopping = Template.bind({})
33+
Stopping.args = { ...Started.args, workspaceStatus: "stopping" }
34+
35+
export const Error = Template.bind({})
36+
Error.args = { ...Started.args, workspaceStatus: "error" }

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,25 @@ import { makeStyles } from "@material-ui/core/styles"
22
import Typography from "@material-ui/core/Typography"
33
import React from "react"
44
import * as Types from "../../api/types"
5+
import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
56
import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
67
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
78
import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
89

910
export interface WorkspaceProps {
10-
organization: Types.Organization
11+
organization?: Types.Organization
1112
workspace: Types.Workspace
12-
template: Types.Template
13+
template?: Types.Template
1314
handleStart: () => void
1415
handleStop: () => void
16+
handleRetry: () => void
17+
workspaceStatus: WorkspaceStatus
1518
}
1619

1720
/**
1821
* Workspace is the top-level component for viewing an individual workspace
1922
*/
20-
export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, workspace, handleStart, handleStop }) => {
23+
export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, workspace, handleStart, handleStop, handleRetry, workspaceStatus }) => {
2124
const styles = useStyles()
2225

2326
return (
@@ -29,6 +32,8 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
2932
workspace={workspace}
3033
handleStart={handleStart}
3134
handleStop={handleStop}
35+
handleRetry={handleRetry}
36+
workspaceStatus={workspaceStatus}
3237
/>
3338
<div className={styles.horizontal}>
3439
<div className={styles.sidebarContainer}>

‎site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,32 @@ import CloudCircleIcon from "@material-ui/icons/CloudCircle"
77
import React from "react"
88
import { Link } from "react-router-dom"
99
import * as Types from "../../api/types"
10+
import { WorkspaceStatus } from "../../pages/WorkspacePage/WorkspacePage"
1011
import { TitleIconSize } from "../../theme/constants"
1112
import { Stack } from "../Stack/Stack"
1213
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
1314

1415
const Language = {
1516
stop: "Stop",
1617
start: "Start",
18+
retry: "Retry",
1719
update: "Update",
1820
settings: "Settings",
21+
started: "Running",
22+
stopped: "Stopped",
23+
starting: "Building",
24+
stopping: "Stopping",
25+
error: "Build Failed"
1926
}
27+
2028
export interface WorkspaceStatusBarProps {
21-
organization: Types.Organization
29+
organization?: Types.Organization
2230
workspace: Types.Workspace
23-
template: Types.Template
31+
template?: Types.Template
2432
handleStart: () => void
2533
handleStop: () => void
34+
handleRetry: () => void
35+
workspaceStatus: WorkspaceStatus
2636
}
2737

2838
/**
@@ -33,43 +43,70 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
3343
template,
3444
workspace,
3545
handleStart,
36-
handleStop
46+
handleStop,
47+
handleRetry,
48+
workspaceStatus
3749
}) => {
3850
const styles = useStyles()
3951

40-
const templateLink = `/templates/${organization.name}/${template.name}`
52+
const templateLink = `/templates/${organization?.name}/${template?.name}`
4153

4254
return (
4355
<WorkspaceSection>
4456
<Stack spacing={1}>
45-
<Typography variant="body2" color="textSecondary">
46-
Back to{" "}
47-
<Link className={styles.link} to={templateLink}>
48-
{template.name}
49-
</Link>
50-
</Typography>
57+
58+
{organization && template &&
59+
<Typography variant="body2" color="textSecondary">
60+
Back to{" "}
61+
<Link className={styles.link} to={templateLink}>
62+
{template.name}
63+
</Link>
64+
</Typography>
65+
}
66+
5167
<div className={styles.horizontal}>
5268
<div className={styles.horizontal}>
53-
<Box mr="1em">
54-
<CloudCircleIcon width={TitleIconSize} height={TitleIconSize} />
55-
</Box>
5669
<div className={styles.vertical}>
5770
<Typography variant="h4">{workspace.name}</Typography>
5871
</div>
72+
<Box className={styles.statusChip}>
73+
{workspaceStatus === "started" && Language.started}
74+
{workspaceStatus === "starting" && Language.starting}
75+
{workspaceStatus === "stopped" && Language.stopped}
76+
{workspaceStatus === "stopping" && Language.stopping}
77+
{workspaceStatus === "error" && Language.error}
78+
</Box>
5979
</div>
80+
6081
<div className={styles.horizontal}>
61-
<Button onClick={handleStart} disabled={false} color="primary">
62-
START
63-
</Button>
82+
{workspaceStatus === "started" &&
83+
(<Button onClick={handleStop} color="primary">
84+
{Language.stop}
85+
</Button>)
86+
}
87+
{workspaceStatus === "stopped" &&
88+
(<Button onClick={handleStart} color="primary">
89+
{Language.start}
90+
</Button>)
91+
}
92+
{workspaceStatus === "error" &&
93+
(<Button onClick={handleRetry} color="primary">
94+
{Language.retry}
95+
</Button>)
96+
}
97+
6498
{workspace.outdated && (
6599
<Button color="primary">
66100
{Language.update}
67101
</Button>
68102
)}
103+
69104
<Divider orientation="vertical" flexItem />
105+
70106
<Link className={styles.link} to={`workspaces/${workspace.id}/edit`}>
71107
{Language.settings}
72108
</Link>
109+
73110
</div>
74111
</div>
75112
</Stack>
@@ -94,6 +131,11 @@ const useStyles = makeStyles((theme) => {
94131
alignItems: "center",
95132
gap: theme.spacing(2),
96133
},
134+
statusChip: {
135+
border: `solid 1px ${theme.palette.text.hint}`,
136+
borderRadius: theme.shape.borderRadius,
137+
padding: theme.spacing(1)
138+
},
97139
vertical: {
98140
display: "flex",
99141
flexDirection: "column",

‎site/src/pages/WorkspacePage/WorkspacePage.tsx

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { Workspace } from "../../components/Workspace/Workspace"
99
import { firstOrItem } from "../../util/array"
1010
import { XServiceContext } from "../../xServices/StateContext"
1111

12+
export type WorkspaceStatus = "started" | "starting" | "stopped" | "stopping" | "error"
13+
1214
export const WorkspacePage: React.FC = () => {
1315
const { workspace: workspaceQueryParam } = useParams()
1416
const workspaceId = firstOrItem(workspaceQueryParam, null)
@@ -17,6 +19,18 @@ export const WorkspacePage: React.FC = () => {
1719
const [workspaceState, workspaceSend] = useActor(xServices.workspaceXService)
1820
const { workspace, template, organization, getWorkspaceError, getTemplateError, getOrganizationError } =
1921
workspaceState.context
22+
let workspaceStatus: WorkspaceStatus
23+
if (workspaceState.matches("ready.build.started")) {
24+
workspaceStatus = "started"
25+
} else if (workspaceState.matches("ready.build.stopped")) {
26+
workspaceStatus = "stopped"
27+
} else if (workspaceState.hasTag("starting")) {
28+
workspaceStatus = "starting"
29+
} else if (workspaceState.hasTag("stopping")) {
30+
workspaceStatus = "stopping"
31+
} else {
32+
workspaceStatus = "error"
33+
}
2034

2135
/**
2236
* Get workspace, template, and organization on mount and whenever workspaceId changes.
@@ -28,7 +42,7 @@ export const WorkspacePage: React.FC = () => {
2842

2943
if (workspaceState.matches("error")) {
3044
return <ErrorSummary error={getWorkspaceError || getTemplateError || getOrganizationError} />
31-
} else if (!workspace || !template || !organization) {
45+
} else if (!workspace){
3246
return <FullScreenLoader />
3347
} else {
3448
return (
@@ -37,6 +51,8 @@ export const WorkspacePage: React.FC = () => {
3751
<Workspace organization={organization} template={template} workspace={workspace}
3852
handleStart={() => workspaceSend("START")}
3953
handleStop={() => workspaceSend("STOP")}
54+
handleRetry={() => workspaceSend("RETRY")}
55+
workspaceStatus={workspaceStatus}
4056
/>
4157
</Stack>
4258
</Margins>

‎site/src/xServices/workspace/workspaceXService.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const workspaceMachine = createMachine(
155155
actions: "assignJobError"
156156
}
157157
},
158-
tags: "buildLoading"
158+
tags: ["buildLoading", "starting"]
159159
},
160160
requestingStop: {
161161
invoke: {
@@ -167,7 +167,7 @@ export const workspaceMachine = createMachine(
167167
actions: "assignJobError"
168168
}
169169
},
170-
tags: "loading"
170+
tags: ["buildLoading", "stopping"]
171171
},
172172
buildingStart: {
173173
invoke: {
@@ -205,7 +205,7 @@ export const workspaceMachine = createMachine(
205205
}
206206
}
207207
},
208-
tags: "loading"
208+
tags: ["buildLoading", "starting"]
209209
},
210210
buildingStop: {
211211
invoke: {
@@ -243,7 +243,7 @@ export const workspaceMachine = createMachine(
243243
}
244244
}
245245
},
246-
tags: "loading"
246+
tags: ["buildLoading", "stopping"]
247247
},
248248
error: {
249249
on: {

0 commit comments

Comments
 (0)