Skip to content

Commit 0d4561c

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Update agent row
1 parent 843f55b commit 0d4561c

File tree

4 files changed

+101
-57
lines changed

4 files changed

+101
-57
lines changed

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

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -77,18 +77,21 @@ export interface AgentMetadataViewProps {
7777
}
7878

7979
export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
80+
const styles = useStyles()
8081
if (metadata.length === 0) {
8182
return <></>
8283
}
8384
return (
84-
<Stack alignItems="baseline" direction="row" spacing={6}>
85-
{metadata.map((m) => {
86-
if (m.description === undefined) {
87-
throw new Error("Metadata item description is undefined")
88-
}
89-
return <MetadataItem key={m.description.key} item={m} />
90-
})}
91-
</Stack>
85+
<div className={styles.root}>
86+
<Stack alignItems="baseline" direction="row" spacing={6}>
87+
{metadata.map((m) => {
88+
if (m.description === undefined) {
89+
throw new Error("Metadata item description is undefined")
90+
}
91+
return <MetadataItem key={m.description.key} item={m} />
92+
})}
93+
</Stack>
94+
</div>
9295
)
9396
}
9497

@@ -99,8 +102,8 @@ export const AgentMetadata: FC<{
99102
const [metadata, setMetadata] = useState<
100103
WorkspaceAgentMetadata[] | undefined
101104
>(undefined)
102-
const styles = useStyles()
103105
const watchAgentMetadata = useContext(WatchAgentMetadataContext)
106+
const styles = useStyles()
104107

105108
useEffect(() => {
106109
if (storybookMetadata !== undefined) {
@@ -139,31 +142,46 @@ export const AgentMetadata: FC<{
139142

140143
if (metadata === undefined) {
141144
return (
142-
<Stack alignItems="baseline" direction="row" spacing={6}>
143-
<div className={styles.metadata}>
144-
<Skeleton width={40} height={12} variant="text" />
145-
<Skeleton width={65} height={14} variant="text" />
146-
</div>
147-
148-
<div className={styles.metadata}>
149-
<Skeleton width={40} height={12} variant="text" />
150-
<Skeleton width={65} height={14} variant="text" />
151-
</div>
152-
153-
<div className={styles.metadata}>
154-
<Skeleton width={40} height={12} variant="text" />
155-
<Skeleton width={65} height={14} variant="text" />
156-
</div>
157-
</Stack>
145+
<div className={styles.root}>
146+
<AgentMetadataSkeleton />
147+
</div>
158148
)
159149
}
160150

161151
return <AgentMetadataView metadata={metadata} />
162152
}
163153

154+
export const AgentMetadataSkeleton: FC = () => {
155+
const styles = useStyles()
156+
157+
return (
158+
<Stack alignItems="baseline" direction="row" spacing={6}>
159+
<div className={styles.metadata}>
160+
<Skeleton width={40} height={12} variant="text" />
161+
<Skeleton width={65} height={14} variant="text" />
162+
</div>
163+
164+
<div className={styles.metadata}>
165+
<Skeleton width={40} height={12} variant="text" />
166+
<Skeleton width={65} height={14} variant="text" />
167+
</div>
168+
169+
<div className={styles.metadata}>
170+
<Skeleton width={40} height={12} variant="text" />
171+
<Skeleton width={65} height={14} variant="text" />
172+
</div>
173+
</Stack>
174+
)
175+
}
176+
164177
// These are more or less copied from
165178
// site/src/components/Resources/ResourceCard.tsx
166179
const useStyles = makeStyles((theme) => ({
180+
root: {
181+
padding: theme.spacing(2.5, 4),
182+
borderTop: `1px solid ${theme.palette.divider}`,
183+
background: theme.palette.background.paper,
184+
},
167185
metadata: {
168186
fontSize: 12,
169187
lineHeight: "normal",

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

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
useRef,
2020
useState,
2121
} from "react"
22-
import { useTranslation } from "react-i18next"
2322
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
2423
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
2524
import AutoSizer from "react-virtualized-auto-sizer"
@@ -41,8 +40,8 @@ import { Stack } from "../Stack/Stack"
4140
import { TerminalLink } from "../TerminalLink/TerminalLink"
4241
import { AgentLatency } from "./AgentLatency"
4342
import { AgentMetadata } from "./AgentMetadata"
44-
import { AgentStatus } from "./AgentStatus"
4543
import { AgentVersion } from "./AgentVersion"
44+
import { AgentStatus } from "./AgentStatus"
4645

4746
export interface AgentRowProps {
4847
agent: WorkspaceAgent
@@ -72,7 +71,6 @@ export const AgentRow: FC<AgentRowProps> = ({
7271
sshPrefix,
7372
}) => {
7473
const styles = useStyles()
75-
const { t } = useTranslation("agent")
7674
const [logsMachine, sendLogsEvent] = useMachine(workspaceAgentLogsMachine, {
7775
context: { agentID: agent.id },
7876
services: process.env.STORYBOOK
@@ -89,7 +87,11 @@ export const AgentRow: FC<AgentRowProps> = ({
8987
const theme = useTheme()
9088
const startupScriptAnchorRef = useRef<HTMLButtonElement>(null)
9189
const [startupScriptOpen, setStartupScriptOpen] = useState(false)
92-
90+
const hasAppsToDisplay = !hideVSCodeDesktopButton || agent.apps.length > 0
91+
const shouldDisplayApps =
92+
showApps &&
93+
((agent.status === "connected" && hasAppsToDisplay) ||
94+
agent.status === "connecting")
9395
const hasStartupFeatures =
9496
Boolean(agent.startup_logs_length) ||
9597
Boolean(logsMachine.context.startupLogs?.length)
@@ -173,6 +175,7 @@ export const AgentRow: FC<AgentRowProps> = ({
173175
className={combineClasses([
174176
styles.agentRow,
175177
styles[`agentRow-${agent.status}`],
178+
styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
176179
])}
177180
>
178181
<Stack
@@ -183,18 +186,14 @@ export const AgentRow: FC<AgentRowProps> = ({
183186
>
184187
<div className={styles.agentNameAndStatus}>
185188
<Stack alignItems="center" direction="row" spacing={3}>
189+
<AgentStatus agent={agent} />
186190
<div className={styles.agentName}>{agent.name}</div>
187191
<Stack
188192
direction="row"
189193
spacing={2}
190194
alignItems="baseline"
191195
className={styles.agentDescription}
192196
>
193-
{agent.status === "timeout" && (
194-
<div className={styles.agentErrorMessage}>
195-
{t("unableToConnect")}
196-
</div>
197-
)}
198197
{agent.status === "connected" && (
199198
<>
200199
<span className={styles.agentOS}>
@@ -262,14 +261,9 @@ export const AgentRow: FC<AgentRowProps> = ({
262261
)}
263262
</Stack>
264263

265-
<div className={styles.agentMetadata}>
266-
<AgentMetadata
267-
storybookMetadata={storybookAgentMetadata}
268-
agent={agent}
269-
/>
270-
</div>
264+
<AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
271265

272-
{showApps && (
266+
{shouldDisplayApps && (
273267
<div className={styles.apps}>
274268
{agent.status === "connected" && (
275269
<>
@@ -419,22 +413,60 @@ const useStyles = makeStyles((theme) => ({
419413
backgroundColor: theme.palette.background.paperLight,
420414
fontSize: 16,
421415
borderLeft: `2px solid ${theme.palette.text.secondary}`,
416+
417+
"&:not(:first-child)": {
418+
borderTop: `2px solid ${theme.palette.divider}`,
419+
},
422420
},
423421

424422
"agentRow-connected": {
425-
borderColor: theme.palette.success.light,
423+
borderLeftColor: theme.palette.success.light,
426424
},
427425

428426
"agentRow-disconnected": {
429-
borderColor: theme.palette.text.secondary,
427+
borderLeftColor: theme.palette.text.secondary,
430428
},
431429

432430
"agentRow-connecting": {
433-
borderColor: theme.palette.info.light,
431+
borderLeftColor: theme.palette.info.light,
434432
},
435433

436434
"agentRow-timeout": {
437-
borderColor: theme.palette.warning.light,
435+
borderLeftColor: theme.palette.warning.light,
436+
},
437+
438+
"agentRow-lifecycle-created": {},
439+
440+
"agentRow-lifecycle-starting": {
441+
borderLeftColor: theme.palette.info.light,
442+
},
443+
444+
"agentRow-lifecycle-ready": {
445+
borderLeftColor: theme.palette.success.light,
446+
},
447+
448+
"agentRow-lifecycle-start_timeout": {
449+
borderLeftColor: theme.palette.warning.light,
450+
},
451+
452+
"agentRow-lifecycle-start_error": {
453+
borderLeftColor: theme.palette.error.light,
454+
},
455+
456+
"agentRow-lifecycle-shutting_down": {
457+
borderLeftColor: theme.palette.info.light,
458+
},
459+
460+
"agentRow-lifecycle-shutdown_timeout": {
461+
borderLeftColor: theme.palette.warning.light,
462+
},
463+
464+
"agentRow-lifecycle-shutdown_error": {
465+
borderLeftColor: theme.palette.error.light,
466+
},
467+
468+
"agentRow-lifecycle-off": {
469+
borderLeftColor: theme.palette.text.secondary,
438470
},
439471

440472
agentInfo: {
@@ -564,10 +596,4 @@ const useStyles = makeStyles((theme) => ({
564596
agentOS: {
565597
textTransform: "capitalize",
566598
},
567-
568-
agentMetadata: {
569-
padding: theme.spacing(2.5, 4),
570-
borderTop: `1px solid ${theme.palette.divider}`,
571-
background: theme.palette.background.paper,
572-
},
573599
}))

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -422,15 +422,15 @@ const useStyles = makeStyles((theme) => ({
422422

423423
timeoutWarning: {
424424
color: theme.palette.warning.light,
425-
width: theme.spacing(2.5),
426-
height: theme.spacing(2.5),
425+
width: theme.spacing(2),
426+
height: theme.spacing(2),
427427
position: "relative",
428428
},
429429

430430
errorWarning: {
431431
color: theme.palette.error.main,
432-
width: theme.spacing(2.5),
433-
height: theme.spacing(2.5),
432+
width: theme.spacing(2),
433+
height: theme.spacing(2),
434434
position: "relative",
435435
},
436436
}))

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const AgentVersion: FC<{
1616
const { outdated } = getDisplayVersionStatus(agent.version, serverVersion)
1717

1818
if (!outdated) {
19-
return <span>{agent.version}</span>
19+
return <span>Updated</span>
2020
}
2121

2222
return (
@@ -29,7 +29,7 @@ export const AgentVersion: FC<{
2929
onMouseLeave={() => setIsOpen(false)}
3030
className={styles.trigger}
3131
>
32-
Agent Outdated
32+
Outdated
3333
</span>
3434
<AgentOutdatedTooltip
3535
id={id}

0 commit comments

Comments
 (0)