Skip to content

Commit 046c436

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Extract agent row rendering
1 parent 3f499e9 commit 046c436

File tree

4 files changed

+173
-157
lines changed

4 files changed

+173
-157
lines changed

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import { Skeleton } from "@material-ui/lab"
3+
import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
4+
import { FC } from "react"
5+
import { Workspace, WorkspaceAgent } from "../../api/typesGenerated"
6+
import { AppLink } from "../AppLink/AppLink"
7+
import { SSHButton } from "../SSHButton/SSHButton"
8+
import { Stack } from "../Stack/Stack"
9+
import { TerminalLink } from "../TerminalLink/TerminalLink"
10+
import { AgentLatency } from "./AgentLatency"
11+
import { AgentVersion } from "./AgentVersion"
12+
import { Maybe } from "components/Conditionals/Maybe"
13+
import { AgentStatus } from "./AgentStatus"
14+
15+
export interface AgentRowProps {
16+
agent: WorkspaceAgent
17+
workspace: Workspace
18+
applicationsHost: string | undefined
19+
showApps: boolean
20+
hideSSHButton?: boolean
21+
serverVersion: string
22+
}
23+
24+
export const AgentRow: FC<AgentRowProps> = ({
25+
agent,
26+
workspace,
27+
applicationsHost,
28+
showApps,
29+
hideSSHButton,
30+
serverVersion,
31+
}) => {
32+
const styles = useStyles()
33+
34+
return (
35+
<Stack
36+
key={agent.id}
37+
direction="row"
38+
alignItems="center"
39+
justifyContent="space-between"
40+
className={styles.agentRow}
41+
>
42+
<Stack direction="row" alignItems="baseline">
43+
<div className={styles.agentStatusWrapper}>
44+
<AgentStatus agent={agent} />
45+
</div>
46+
<div>
47+
<div className={styles.agentName}>{agent.name}</div>
48+
<Stack
49+
direction="row"
50+
alignItems="baseline"
51+
className={styles.agentData}
52+
spacing={1}
53+
>
54+
<span className={styles.agentOS}>{agent.operating_system}</span>
55+
56+
<Maybe condition={agent.status === "connected"}>
57+
<AgentVersion agent={agent} serverVersion={serverVersion} />
58+
</Maybe>
59+
60+
<AgentLatency agent={agent} />
61+
</Stack>
62+
</div>
63+
</Stack>
64+
65+
<Stack
66+
direction="row"
67+
alignItems="center"
68+
spacing={0.5}
69+
wrap="wrap"
70+
maxWidth="750px"
71+
>
72+
{showApps && agent.status === "connected" && (
73+
<>
74+
{agent.apps.map((app) => (
75+
<AppLink
76+
key={app.name}
77+
appsHost={applicationsHost}
78+
appIcon={app.icon}
79+
appName={app.name}
80+
appCommand={app.command}
81+
appSubdomain={app.subdomain}
82+
username={workspace.owner_name}
83+
workspaceName={workspace.name}
84+
agentName={agent.name}
85+
health={app.health}
86+
appSharingLevel={app.sharing_level}
87+
/>
88+
))}
89+
90+
<TerminalLink
91+
workspaceName={workspace.name}
92+
agentName={agent.name}
93+
userName={workspace.owner_name}
94+
/>
95+
{!hideSSHButton && (
96+
<SSHButton
97+
workspaceName={workspace.name}
98+
agentName={agent.name}
99+
/>
100+
)}
101+
{applicationsHost !== undefined && (
102+
<PortForwardButton
103+
host={applicationsHost}
104+
workspaceName={workspace.name}
105+
agentId={agent.id}
106+
agentName={agent.name}
107+
username={workspace.owner_name}
108+
/>
109+
)}
110+
</>
111+
)}
112+
{showApps && agent.status === "connecting" && (
113+
<>
114+
<Skeleton width={80} height={36} variant="rect" />
115+
<Skeleton width={120} height={36} variant="rect" />
116+
</>
117+
)}
118+
</Stack>
119+
</Stack>
120+
)
121+
}
122+
123+
const useStyles = makeStyles((theme) => ({
124+
agentRow: {
125+
padding: theme.spacing(3, 4),
126+
backgroundColor: theme.palette.background.paperLight,
127+
fontSize: 16,
128+
129+
"&:not(:last-child)": {
130+
borderBottom: `1px solid ${theme.palette.divider}`,
131+
},
132+
},
133+
134+
agentStatusWrapper: {
135+
width: theme.spacing(4.5),
136+
display: "flex",
137+
justifyContent: "center",
138+
},
139+
140+
agentName: {
141+
fontWeight: 600,
142+
},
143+
144+
agentOS: {
145+
textTransform: "capitalize",
146+
},
147+
148+
agentData: {
149+
fontSize: 14,
150+
color: theme.palette.text.secondary,
151+
marginTop: theme.spacing(0.5),
152+
},
153+
}))

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

Lines changed: 4 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import { Skeleton } from "@material-ui/lab"
3-
import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
42
import { FC, useState } from "react"
5-
import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
6-
import { AppLink } from "../AppLink/AppLink"
7-
import { SSHButton } from "../SSHButton/SSHButton"
3+
import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated"
84
import { Stack } from "../Stack/Stack"
9-
import { TerminalLink } from "../TerminalLink/TerminalLink"
105
import { ResourceAvatar } from "./ResourceAvatar"
116
import { SensitiveValue } from "./SensitiveValue"
12-
import { AgentLatency } from "./AgentLatency"
13-
import { AgentVersion } from "./AgentVersion"
147
import {
158
OpenDropdown,
169
CloseDropdown,
@@ -19,25 +12,13 @@ import IconButton from "@material-ui/core/IconButton"
1912
import Tooltip from "@material-ui/core/Tooltip"
2013
import { Maybe } from "components/Conditionals/Maybe"
2114
import { CopyableValue } from "components/CopyableValue/CopyableValue"
22-
import { AgentStatus } from "./AgentStatus"
2315

2416
export interface ResourceCardProps {
2517
resource: WorkspaceResource
26-
workspace: Workspace
27-
applicationsHost: string | undefined
28-
showApps: boolean
29-
hideSSHButton?: boolean
30-
serverVersion: string
18+
agentRow: (agent: WorkspaceAgent) => JSX.Element
3119
}
3220

33-
export const ResourceCard: FC<ResourceCardProps> = ({
34-
resource,
35-
workspace,
36-
applicationsHost,
37-
showApps,
38-
hideSSHButton,
39-
serverVersion,
40-
}) => {
21+
export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
4122
const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
4223
useState(false)
4324
const styles = useStyles()
@@ -113,102 +94,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({
11394
</Stack>
11495

11596
{resource.agents && resource.agents.length > 0 && (
116-
<div>
117-
{resource.agents.map((agent) => {
118-
return (
119-
<Stack
120-
key={agent.id}
121-
direction="row"
122-
alignItems="center"
123-
justifyContent="space-between"
124-
className={styles.agentRow}
125-
>
126-
<Stack direction="row" alignItems="baseline">
127-
<div className={styles.agentStatusWrapper}>
128-
<AgentStatus agent={agent} />
129-
</div>
130-
<div>
131-
<div className={styles.agentName}>{agent.name}</div>
132-
<Stack
133-
direction="row"
134-
alignItems="baseline"
135-
className={styles.agentData}
136-
spacing={1}
137-
>
138-
<span className={styles.agentOS}>
139-
{agent.operating_system}
140-
</span>
141-
142-
<Maybe condition={agent.status === "connected"}>
143-
<AgentVersion
144-
agent={agent}
145-
serverVersion={serverVersion}
146-
/>
147-
</Maybe>
148-
149-
<AgentLatency agent={agent} />
150-
</Stack>
151-
</div>
152-
</Stack>
153-
154-
<Stack
155-
direction="row"
156-
alignItems="center"
157-
spacing={0.5}
158-
wrap="wrap"
159-
maxWidth="750px"
160-
>
161-
{showApps && agent.status === "connected" && (
162-
<>
163-
{agent.apps.map((app) => (
164-
<AppLink
165-
key={app.name}
166-
appsHost={applicationsHost}
167-
appIcon={app.icon}
168-
appName={app.name}
169-
appCommand={app.command}
170-
appSubdomain={app.subdomain}
171-
username={workspace.owner_name}
172-
workspaceName={workspace.name}
173-
agentName={agent.name}
174-
health={app.health}
175-
appSharingLevel={app.sharing_level}
176-
/>
177-
))}
178-
179-
<TerminalLink
180-
workspaceName={workspace.name}
181-
agentName={agent.name}
182-
userName={workspace.owner_name}
183-
/>
184-
{!hideSSHButton && (
185-
<SSHButton
186-
workspaceName={workspace.name}
187-
agentName={agent.name}
188-
/>
189-
)}
190-
{applicationsHost !== undefined && (
191-
<PortForwardButton
192-
host={applicationsHost}
193-
workspaceName={workspace.name}
194-
agentId={agent.id}
195-
agentName={agent.name}
196-
username={workspace.owner_name}
197-
/>
198-
)}
199-
</>
200-
)}
201-
{showApps && agent.status === "connecting" && (
202-
<>
203-
<Skeleton width={80} height={36} variant="rect" />
204-
<Skeleton width={120} height={36} variant="rect" />
205-
</>
206-
)}
207-
</Stack>
208-
</Stack>
209-
)
210-
})}
211-
</div>
97+
<div>{resource.agents.map(agentRow)}</div>
21298
)}
21399
</div>
214100
)
@@ -270,34 +156,4 @@ const useStyles = makeStyles((theme) => ({
270156
overflow: "hidden",
271157
whiteSpace: "nowrap",
272158
},
273-
274-
agentRow: {
275-
padding: theme.spacing(3, 4),
276-
backgroundColor: theme.palette.background.paperLight,
277-
fontSize: 16,
278-
279-
"&:not(:last-child)": {
280-
borderBottom: `1px solid ${theme.palette.divider}`,
281-
},
282-
},
283-
284-
agentStatusWrapper: {
285-
width: theme.spacing(4.5),
286-
display: "flex",
287-
justifyContent: "center",
288-
},
289-
290-
agentName: {
291-
fontWeight: 600,
292-
},
293-
294-
agentOS: {
295-
textTransform: "capitalize",
296-
},
297-
298-
agentData: {
299-
fontSize: 14,
300-
color: theme.palette.text.secondary,
301-
marginTop: theme.spacing(0.5),
302-
},
303159
}))

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@ import {
55
OpenDropdown,
66
} from "components/DropdownArrows/DropdownArrows"
77
import { FC, useState } from "react"
8-
import { WorkspaceResource } from "../../api/typesGenerated"
8+
import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated"
99
import { Stack } from "../Stack/Stack"
10+
import { ResourceCard } from "./ResourceCard"
1011

1112
const countAgents = (resource: WorkspaceResource) => {
1213
return resource.agents ? resource.agents.length : 0
1314
}
1415

1516
interface ResourcesProps {
1617
resources: WorkspaceResource[]
17-
resourceCard: (resource: WorkspaceResource) => JSX.Element
18+
agentRow: (agent: WorkspaceAgent) => JSX.Element
1819
}
1920

2021
export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
2122
resources,
22-
resourceCard,
23+
agentRow,
2324
}) => {
2425
const styles = useStyles()
2526
const [shouldDisplayHideResources, setShouldDisplayHideResources] =
@@ -34,7 +35,13 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
3435

3536
return (
3637
<Stack direction="column" spacing={0}>
37-
{displayResources.map(resourceCard)}
38+
{displayResources.map((resource) => (
39+
<ResourceCard
40+
key={resource.id}
41+
resource={resource}
42+
agentRow={agentRow}
43+
/>
44+
))}
3845
{hasHideResources && (
3946
<div className={styles.buttonWrapper}>
4047
<Button

0 commit comments

Comments
 (0)