Skip to content

Commit e8fba43

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor agent row
1 parent 888eb23 commit e8fba43

File tree

10 files changed

+432
-308
lines changed

10 files changed

+432
-308
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const useStyles = makeStyles((theme) => ({
138138
backgroundColor: theme.palette.background.default,
139139

140140
"&:hover": {
141-
backgroundColor: `${theme.palette.background.default} !important`,
141+
backgroundColor: `${theme.palette.background.paper} !important`,
142142
},
143143
},
144144

‎site/src/components/Logs/Logs.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
4141
? idx + 1
4242
: dayjs(line.time).format(`HH:mm:ss.SSS`)}
4343
</span>
44-
<span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
44+
<span className={styles.space} />
4545
</>
4646
)}
4747
<span>{line.output}</span>
@@ -76,7 +76,7 @@ export const LogLine: FC<{
7676
<span className={styles.time}>
7777
{number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
7878
</span>
79-
<span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
79+
<span className={styles.space} />
8080
</>
8181
)}
8282
<span
@@ -96,7 +96,6 @@ const useStyles = makeStyles<
9696
>((theme) => ({
9797
root: {
9898
minHeight: 156,
99-
fontSize: 13,
10099
padding: theme.spacing(2, 0),
101100
borderRadius: theme.shape.borderRadius,
102101
overflowX: "auto",
@@ -107,12 +106,14 @@ const useStyles = makeStyles<
107106
},
108107
line: {
109108
wordBreak: "break-all",
109+
display: "flex",
110+
fontSize: 14,
110111
color: theme.palette.text.primary,
111112
fontFamily: MONOSPACE_FONT_FAMILY,
112113
height: ({ lineNumbers }) => (lineNumbers ? logLineHeight : "auto"),
113114
// Whitespace is significant in terminal output for alignment
114115
whiteSpace: "pre",
115-
padding: theme.spacing(0, 3),
116+
padding: theme.spacing(0, 4),
116117

117118
"&.error": {
118119
backgroundColor: theme.palette.error.dark,
@@ -128,6 +129,8 @@ const useStyles = makeStyles<
128129
},
129130
space: {
130131
userSelect: "none",
132+
width: theme.spacing(1),
133+
display: "block",
131134
},
132135
time: {
133136
userSelect: "none",

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

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -202,25 +202,17 @@ export interface AgentMetadataViewProps {
202202
}
203203

204204
export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
205-
const styles = useStyles()
206205
if (metadata.length === 0) {
207206
return <></>
208207
}
209208
return (
210-
<Stack
211-
alignItems="flex-start"
212-
direction="row"
213-
spacing={5}
214-
className={styles.metadataStack}
215-
>
216-
<div className={styles.metadataHeader}>
217-
{metadata.map((m) => {
218-
if (m.description === undefined) {
219-
throw new Error("Metadata item description is undefined")
220-
}
221-
return <MetadataItem key={m.description.key} item={m} />
222-
})}
223-
</div>
209+
<Stack alignItems="baseline" direction="row" spacing={6}>
210+
{metadata.map((m) => {
211+
if (m.description === undefined) {
212+
throw new Error("Metadata item description is undefined")
213+
}
214+
return <MetadataItem key={m.description.key} item={m} />
215+
})}
224216
</Stack>
225217
)
226218
}
@@ -289,31 +281,16 @@ export const AgentMetadata: FC<{
289281
// These are more or less copied from
290282
// site/src/components/Resources/ResourceCard.tsx
291283
const useStyles = makeStyles((theme) => ({
292-
metadataStack: {
293-
border: `2px dashed ${theme.palette.divider}`,
294-
borderRadius: theme.shape.borderRadius,
295-
width: "100%",
296-
marginTop: theme.spacing(2),
297-
marginBottom: theme.spacing(2),
298-
},
299-
metadataHeader: {
300-
padding: "8px",
301-
display: "flex",
302-
gap: theme.spacing(5),
303-
rowGap: theme.spacing(3),
304-
},
305-
306284
metadata: {
307-
fontSize: 16,
285+
fontSize: 12,
308286
},
309287

310288
metadataLabel: {
311-
fontSize: 12,
312289
color: theme.palette.text.secondary,
313290
textOverflow: "ellipsis",
314291
overflow: "hidden",
315292
whiteSpace: "nowrap",
316-
fontWeight: "bold",
293+
fontWeight: 500,
317294
},
318295

319296
metadataValue: {
@@ -324,8 +301,9 @@ const useStyles = makeStyles((theme) => ({
324301
},
325302

326303
metadataValueSuccess: {
327-
color: theme.palette.success.light,
304+
color: theme.palette.text.primary,
328305
},
306+
329307
metadataValueError: {
330308
color: theme.palette.error.main,
331309
},

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

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,22 +43,71 @@ const defaultAgentMetadata = [
4343
result: {
4444
collected_at: "2021-05-05T00:00:00Z",
4545
error: "",
46-
value: "defvalue",
46+
value: "Master",
4747
age: 5,
4848
},
4949
description: {
50-
display_name: "DisPlay",
51-
key: "defkey",
50+
display_name: "Branch",
51+
key: "branch",
5252
interval: 10,
5353
timeout: 10,
54-
script: "some command",
54+
script: "git branch",
55+
},
56+
},
57+
{
58+
result: {
59+
collected_at: "2021-05-05T00:00:00Z",
60+
error: "",
61+
value: "No changes",
62+
age: 5,
63+
},
64+
description: {
65+
display_name: "Changes",
66+
key: "changes",
67+
interval: 10,
68+
timeout: 10,
69+
script: "git diff",
70+
},
71+
},
72+
{
73+
result: {
74+
collected_at: "2021-05-05T00:00:00Z",
75+
error: "",
76+
value: "2%",
77+
age: 5,
78+
},
79+
description: {
80+
display_name: "CPU Usage",
81+
key: "cpuUsage",
82+
interval: 10,
83+
timeout: 10,
84+
script: "cpu.sh",
85+
},
86+
},
87+
{
88+
result: {
89+
collected_at: "2021-05-05T00:00:00Z",
90+
error: "",
91+
value: "3%",
92+
age: 5,
93+
},
94+
description: {
95+
display_name: "Disk Usage",
96+
key: "diskUsage",
97+
interval: 10,
98+
timeout: 10,
99+
script: "disk.sh",
55100
},
56101
},
57102
]
58103

59104
export const Example = Template.bind({})
60105
Example.args = {
61-
agent: MockWorkspaceAgent,
106+
agent: {
107+
...MockWorkspaceAgent,
108+
startup_script:
109+
'set -eux -o pipefail\n\n# install and start code-server\ncurl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3\n/tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n\n\nif [ ! -d ~/coder ]; then\n mkdir -p ~/coder\n\n git clone https://github.com/coder/coder ~/coder\nfi\n\nsudo service docker start\nDOTFILES_URI=" "\nrm -f ~/.personalize.log\nif [ -n "${DOTFILES_URI// }" ]; then\n coder dotfiles "$DOTFILES_URI" -y 2>&1 | tee -a ~/.personalize.log\nfi\nif [ -x ~/personalize ]; then\n ~/personalize 2>&1 | tee -a ~/.personalize.log\nelif [ -f ~/personalize ]; then\n echo "~/personalize is not executable, skipping..." | tee -a ~/.personalize.log\nfi\n',
110+
},
62111
workspace: MockWorkspace,
63112
applicationsHost: "",
64113
showApps: true,

0 commit comments

Comments
 (0)