Skip to content

Commit 719eb4d

Browse files
f0sself0ssel
committed
add storybooks
1 parent 8d0517e commit 719eb4d

File tree

5 files changed

+75
-18
lines changed

5 files changed

+75
-18
lines changed

‎codersdk/workspaceapps.go

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,14 @@ type WorkspaceApp struct {
2020
Command string `json:"command,omitempty"`
2121
// Icon is a relative path or external URL that specifies
2222
// an icon to be displayed in the dashboard.
23-
Icon string `json:"icon,omitempty"`
24-
Status WorkspaceAppHealth `json:"health"`
23+
Icon string `json:"icon,omitempty"`
24+
HealthcheckEnabled bool `json:"healthcheck_enabled"`
25+
HealthcheckPeriod int32 `json:"healthcheck_period"`
26+
HealthcheckThreshold int32 `json:"healthcheck_threshold"`
27+
Health WorkspaceAppHealth `json:"health"`
2528
}
2629

2730
type PostWorkspaceAppHealthsRequest struct {
28-
// Healths is a map of the workspace app name and the status of the app.
31+
// Healths is a map of the workspace app name and the health of the app.
2932
Healths map[string]WorkspaceAppHealth
3033
}

‎site/src/api/typesGenerated.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,9 @@ export interface WorkspaceApp {
621621
readonly name: string
622622
readonly command?: string
623623
readonly icon?: string
624+
readonly healthcheck_enabled: boolean
625+
readonly healthcheck_period: number
626+
readonly healthcheck_threshold: number
624627
readonly health: WorkspaceAppHealth
625628
}
626629

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,37 @@ WithIcon.args = {
1515
workspaceName: MockWorkspace.name,
1616
appName: "code-server",
1717
appIcon: "/icon/code.svg",
18+
health: "healthy",
1819
}
1920

2021
export const WithoutIcon = Template.bind({})
2122
WithoutIcon.args = {
2223
userName: "developer",
2324
workspaceName: MockWorkspace.name,
2425
appName: "code-server",
26+
health: "healthy",
27+
}
28+
29+
export const HealthDisabled = Template.bind({})
30+
HealthDisabled.args = {
31+
userName: "developer",
32+
workspaceName: MockWorkspace.name,
33+
appName: "code-server",
34+
health: "disabled",
35+
}
36+
37+
export const HealthInitializing = Template.bind({})
38+
HealthInitializing.args = {
39+
userName: "developer",
40+
workspaceName: MockWorkspace.name,
41+
appName: "code-server",
42+
health: "initializing",
43+
}
44+
45+
export const HealthUnhealthy = Template.bind({})
46+
HealthUnhealthy.args = {
47+
userName: "developer",
48+
workspaceName: MockWorkspace.name,
49+
appName: "code-server",
50+
health: "unhealthy",
2551
}

‎site/src/components/AppLink/AppLink.tsx

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Button from "@material-ui/core/Button"
2+
import CircularProgress from "@material-ui/core/CircularProgress"
23
import Link from "@material-ui/core/Link"
34
import { makeStyles } from "@material-ui/core/styles"
5+
import CloseIcon from "@material-ui/icons/Close"
46
import ComputerIcon from "@material-ui/icons/Computer"
57
import { FC, PropsWithChildren } from "react"
68
import * as TypesGen from "../../api/typesGenerated"
@@ -17,6 +19,7 @@ export interface AppLinkProps {
1719
appName: TypesGen.WorkspaceApp["name"]
1820
appIcon?: TypesGen.WorkspaceApp["icon"]
1921
appCommand?: TypesGen.WorkspaceApp["command"]
22+
health: TypesGen.WorkspaceApp["health"]
2023
}
2124

2225
export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
@@ -26,6 +29,7 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
2629
appName,
2730
appIcon,
2831
appCommand,
32+
health,
2933
}) => {
3034
const styles = useStyles()
3135

@@ -38,37 +42,57 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
3842
)}`
3943
}
4044

45+
let canClick = true
46+
let icon = appIcon ? <img alt={`${appName} Icon`} src={appIcon} /> : <ComputerIcon />
47+
if (health === "initializing") {
48+
canClick = false
49+
icon = <CircularProgress size={16} />
50+
}
51+
if (health === "unhealthy") {
52+
canClick = false
53+
icon = <CloseIcon className={styles.unhealthyIcon} />
54+
}
55+
4156
return (
4257
<Link
4358
href={href}
4459
target="_blank"
45-
className={styles.link}
46-
onClick={(event) => {
47-
event.preventDefault()
48-
window.open(
49-
href,
50-
Language.appTitle(appName, generateRandomString(12)),
51-
"width=900,height=600",
52-
)
53-
}}
60+
className={canClick ? styles.link : styles.disabledLink}
61+
onClick={
62+
canClick
63+
? (event) => {
64+
event.preventDefault()
65+
window.open(
66+
href,
67+
Language.appTitle(appName, generateRandomString(12)),
68+
"width=900,height=600",
69+
)
70+
}
71+
: undefined
72+
}
5473
>
55-
<Button
56-
size="small"
57-
startIcon={appIcon ? <img alt={`${appName} Icon`} src={appIcon} /> : <ComputerIcon />}
58-
className={styles.button}
59-
>
74+
<Button size="small" startIcon={icon} className={styles.button} disabled={!canClick}>
6075
{appName}
6176
</Button>
6277
</Link>
6378
)
6479
}
6580

66-
const useStyles = makeStyles(() => ({
81+
const useStyles = makeStyles((theme) => ({
6782
link: {
6883
textDecoration: "none !important",
6984
},
7085

86+
disabledLink: {
87+
pointerEvents: "none",
88+
textDecoration: "none !important",
89+
},
90+
7191
button: {
7292
whiteSpace: "nowrap",
7393
},
94+
95+
unhealthyIcon: {
96+
color: theme.palette.error.main,
97+
},
7498
}))

‎site/src/components/Resources/Resources.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
171171
userName={workspace.owner_name}
172172
workspaceName={workspace.name}
173173
agentName={agent.name}
174+
health={app.health}
174175
/>
175176
))}
176177
</>

0 commit comments

Comments
 (0)