Skip to content

Commit 2d882ad

Browse files
BrunoQuaresmaBrunoQuaresma
committed
BAse work
1 parent 8503c5c commit 2d882ad

File tree

7 files changed

+175
-108
lines changed

7 files changed

+175
-108
lines changed

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ export const AppLink: FC<AppLinkProps> = ({
8484

8585
const button = (
8686
<Button
87-
size="small"
8887
startIcon={icon}
8988
endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
9089
className={styles.button}
@@ -136,10 +135,19 @@ const useStyles = makeStyles((theme) => ({
136135
button: {
137136
whiteSpace: "nowrap",
138137
backgroundColor: theme.palette.background.default,
138+
padding: theme.spacing(0, 3),
139+
height: 44,
140+
borderRadius: 6,
139141

140142
"&:hover": {
141143
backgroundColor: `${theme.palette.background.paper} !important`,
142144
},
145+
146+
"& .MuiButton-startIcon": {
147+
width: 16,
148+
height: 16,
149+
marginRight: theme.spacing(1.5),
150+
},
143151
},
144152

145153
unhealthyIcon: {

‎site/src/components/PortForwardButton/PortForwardButton.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Link from "@material-ui/core/Link"
33
import Popover from "@material-ui/core/Popover"
44
import { makeStyles } from "@material-ui/core/styles"
55
import TextField from "@material-ui/core/TextField"
6-
import OpenInNewOutlined from "@material-ui/icons/OpenInNewOutlined"
76
import { Stack } from "components/Stack/Stack"
87
import { useRef, useState, Fragment } from "react"
98
import { colors } from "theme/colors"
@@ -149,8 +148,8 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
149148
return (
150149
<>
151150
<Button
151+
variant="outlined"
152152
className={styles.button}
153-
startIcon={<OpenInNewOutlined />}
154153
size="small"
155154
ref={anchorRef}
156155
onClick={() => {
@@ -211,11 +210,10 @@ const useStyles = makeStyles((theme) => ({
211210
},
212211

213212
button: {
214-
whiteSpace: "nowrap",
215-
backgroundColor: theme.palette.background.default,
216-
217-
"&:hover": {
218-
backgroundColor: `${theme.palette.background.default} !important`,
219-
},
213+
fontSize: 12,
214+
fontWeight: 500,
215+
height: theme.spacing(4),
216+
minHeight: theme.spacing(4),
217+
borderRadius: 4,
220218
},
221219
}))

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

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -249,12 +249,22 @@ export const AgentMetadata: FC<{
249249

250250
if (metadata === undefined) {
251251
return (
252-
<Skeleton
253-
width={65}
254-
height={12}
255-
variant="text"
256-
className={styles.skeleton}
257-
/>
252+
<Stack alignItems="baseline" direction="row" spacing={6}>
253+
<div className={styles.metadata}>
254+
<Skeleton width={40} height={12} variant="text" />
255+
<Skeleton width={65} height={14} variant="text" />
256+
</div>
257+
258+
<div className={styles.metadata}>
259+
<Skeleton width={40} height={12} variant="text" />
260+
<Skeleton width={65} height={14} variant="text" />
261+
</div>
262+
263+
<div className={styles.metadata}>
264+
<Skeleton width={40} height={12} variant="text" />
265+
<Skeleton width={65} height={14} variant="text" />
266+
</div>
267+
</Stack>
258268
)
259269
}
260270

@@ -266,6 +276,11 @@ export const AgentMetadata: FC<{
266276
const useStyles = makeStyles((theme) => ({
267277
metadata: {
268278
fontSize: 12,
279+
lineHeight: "normal",
280+
display: "flex",
281+
flexDirection: "column",
282+
gap: theme.spacing(0.5),
283+
overflow: "visible",
269284
},
270285

271286
metadataLabel: {
@@ -281,10 +296,11 @@ const useStyles = makeStyles((theme) => ({
281296
overflow: "hidden",
282297
whiteSpace: "nowrap",
283298
maxWidth: "16em",
299+
fontSize: 14,
284300
},
285301

286302
metadataValueSuccess: {
287-
color: theme.palette.text.primary,
303+
color: theme.palette.success.light,
288304
},
289305

290306
metadataValueError: {

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

Lines changed: 120 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,10 @@ export const AgentRow: FC<AgentRowProps> = ({
170170
key={agent.id}
171171
direction="column"
172172
spacing={0}
173-
className={styles.agentRow}
173+
className={combineClasses([
174+
styles.agentRow,
175+
styles[`agentRow-${agent.status}`],
176+
])}
174177
>
175178
<Stack
176179
direction="row"
@@ -179,58 +182,42 @@ export const AgentRow: FC<AgentRowProps> = ({
179182
className={styles.agentInfo}
180183
>
181184
<div className={styles.agentNameAndStatus}>
182-
<AgentStatus agent={agent} />
183-
<div>
185+
<Stack alignItems="center" direction="row" spacing={3}>
184186
<div className={styles.agentName}>{agent.name}</div>
185-
{agent.status === "timeout" && (
186-
<div className={styles.agentErrorMessage}>
187-
{t("unableToConnect")}
188-
</div>
189-
)}
190-
</div>
187+
<Stack
188+
direction="row"
189+
spacing={2}
190+
alignItems="baseline"
191+
className={styles.agentDescription}
192+
>
193+
{agent.status === "timeout" && (
194+
<div className={styles.agentErrorMessage}>
195+
{t("unableToConnect")}
196+
</div>
197+
)}
198+
{agent.status === "connected" && (
199+
<>
200+
<span className={styles.agentOS}>
201+
{agent.operating_system}
202+
</span>
203+
<AgentVersion
204+
agent={agent}
205+
serverVersion={serverVersion}
206+
onUpdate={onUpdateAgent}
207+
/>
208+
<AgentLatency agent={agent} />
209+
</>
210+
)}
211+
{agent.status === "connecting" && (
212+
<>
213+
<Skeleton width={160} variant="text" />
214+
<Skeleton width={36} variant="text" />
215+
</>
216+
)}
217+
</Stack>
218+
</Stack>
191219
</div>
192220

193-
{agent.status === "connected" && (
194-
<div className={styles.agentDataGroup}>
195-
<div className={styles.agentData}>
196-
<span>Ping</span>
197-
<AgentLatency agent={agent} />
198-
</div>
199-
200-
<div className={styles.agentData}>
201-
<span>Version</span>
202-
<AgentVersion
203-
agent={agent}
204-
serverVersion={serverVersion}
205-
onUpdate={onUpdateAgent}
206-
/>
207-
</div>
208-
<AgentMetadata
209-
storybookMetadata={storybookAgentMetadata}
210-
agent={agent}
211-
/>
212-
</div>
213-
)}
214-
215-
{agent.status === "connecting" && (
216-
<div className={styles.agentDataGroup}>
217-
<div className={styles.agentData}>
218-
<Skeleton width={40} height={12} variant="text" />
219-
<Skeleton width={65} height={12} variant="text" />
220-
</div>
221-
222-
<div className={styles.agentData}>
223-
<Skeleton width={40} height={12} variant="text" />
224-
<Skeleton width={65} height={12} variant="text" />
225-
</div>
226-
227-
<div className={styles.agentData}>
228-
<Skeleton width={40} height={12} variant="text" />
229-
<Skeleton width={65} height={12} variant="text" />
230-
</div>
231-
</div>
232-
)}
233-
234221
{agent.status === "connected" && (
235222
<div className={styles.agentDefaultActions}>
236223
<TerminalLink
@@ -275,42 +262,53 @@ export const AgentRow: FC<AgentRowProps> = ({
275262
)}
276263
</Stack>
277264

278-
{showApps && agent.status === "connected" && (
265+
<div className={styles.agentMetadata}>
266+
<AgentMetadata
267+
storybookMetadata={storybookAgentMetadata}
268+
agent={agent}
269+
/>
270+
</div>
271+
272+
{showApps && (
279273
<div className={styles.apps}>
280-
{!hideVSCodeDesktopButton && (
281-
<VSCodeDesktopButton
282-
userName={workspace.owner_name}
283-
workspaceName={workspace.name}
284-
agentName={agent.name}
285-
folderPath={agent.expanded_directory}
286-
/>
274+
{agent.status === "connected" && (
275+
<>
276+
{!hideVSCodeDesktopButton && (
277+
<VSCodeDesktopButton
278+
userName={workspace.owner_name}
279+
workspaceName={workspace.name}
280+
agentName={agent.name}
281+
folderPath={agent.expanded_directory}
282+
/>
283+
)}
284+
{agent.apps.map((app) => (
285+
<AppLink
286+
key={app.slug}
287+
appsHost={applicationsHost}
288+
app={app}
289+
agent={agent}
290+
workspace={workspace}
291+
/>
292+
))}
293+
</>
287294
)}
288-
{agent.apps.map((app) => (
289-
<AppLink
290-
key={app.slug}
291-
appsHost={applicationsHost}
292-
app={app}
293-
agent={agent}
294-
workspace={workspace}
295-
/>
296-
))}
297-
</div>
298-
)}
299295

300-
{showApps && agent.status === "connecting" && (
301-
<div className={styles.apps}>
302-
<Skeleton
303-
width={80}
304-
height={36}
305-
variant="rect"
306-
className={styles.buttonSkeleton}
307-
/>
308-
<Skeleton
309-
width={110}
310-
height={36}
311-
variant="rect"
312-
className={styles.buttonSkeleton}
313-
/>
296+
{agent.status === "connecting" && (
297+
<>
298+
<Skeleton
299+
width={80}
300+
height={36}
301+
variant="rect"
302+
className={styles.buttonSkeleton}
303+
/>
304+
<Skeleton
305+
width={110}
306+
height={36}
307+
variant="rect"
308+
className={styles.buttonSkeleton}
309+
/>
310+
</>
311+
)}
314312
</div>
315313
)}
316314

@@ -420,10 +418,27 @@ const useStyles = makeStyles((theme) => ({
420418
agentRow: {
421419
backgroundColor: theme.palette.background.paperLight,
422420
fontSize: 16,
421+
borderLeft: `2px solid ${theme.palette.text.secondary}`,
422+
},
423+
424+
"agentRow-connected": {
425+
borderColor: theme.palette.success.light,
426+
},
427+
428+
"agentRow-disconnected": {
429+
borderColor: theme.palette.text.secondary,
430+
},
431+
432+
"agentRow-connecting": {
433+
borderColor: theme.palette.info.light,
434+
},
435+
436+
"agentRow-timeout": {
437+
borderColor: theme.palette.warning.light,
423438
},
424439

425440
agentInfo: {
426-
padding: theme.spacing(4),
441+
padding: theme.spacing(2, 4),
427442
},
428443

429444
agentDefaultActions: {
@@ -432,6 +447,11 @@ const useStyles = makeStyles((theme) => ({
432447
marginLeft: "auto",
433448
},
434449

450+
agentDescription: {
451+
fontSize: 14,
452+
color: theme.palette.text.secondary,
453+
},
454+
435455
startupLogs: {
436456
maxHeight: 256,
437457
borderBottom: `1px solid ${theme.palette.divider}`,
@@ -449,18 +469,18 @@ const useStyles = makeStyles((theme) => ({
449469
},
450470

451471
agentNameAndStatus: {
452-
fontWeight: 600,
453472
display: "flex",
454473
alignItems: "center",
455-
gap: theme.spacing(2),
456-
fontSize: theme.spacing(2),
474+
gap: theme.spacing(4),
457475
},
458476

459477
agentName: {
460478
whiteSpace: "nowrap",
461479
overflow: "hidden",
462480
textOverflow: "ellipsis",
463481
maxWidth: 260,
482+
fontWeight: 600,
483+
fontSize: theme.spacing(2),
464484
},
465485

466486
agentDataGroup: {
@@ -483,8 +503,9 @@ const useStyles = makeStyles((theme) => ({
483503
apps: {
484504
display: "flex",
485505
flexWrap: "wrap",
486-
gap: theme.spacing(1),
487-
padding: theme.spacing(0, 4, 4),
506+
gap: theme.spacing(1.5),
507+
padding: theme.spacing(4),
508+
borderTop: `1px solid ${theme.palette.divider}`,
488509
},
489510

490511
logsPanel: {
@@ -539,4 +560,14 @@ const useStyles = makeStyles((theme) => ({
539560
height: theme.spacing(2),
540561
},
541562
},
563+
564+
agentOS: {
565+
textTransform: "capitalize",
566+
},
567+
568+
agentMetadata: {
569+
padding: theme.spacing(2.5, 4),
570+
borderTop: `1px solid ${theme.palette.divider}`,
571+
background: theme.palette.background.paper,
572+
},
542573
}))

0 commit comments

Comments
 (0)