Skip to content

Commit 84956c1

Browse files
kylecarbskylecarbs
authored
fix: reduce spacing when agent metadata doesn't exist (coder#6937)
1 parent ca4fa81 commit 84956c1

File tree

4 files changed

+86
-59
lines changed

4 files changed

+86
-59
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,16 @@ Example.args = {
103103
key: "nloads",
104104
},
105105
},
106+
{
107+
result: {
108+
...resultDefaults,
109+
value: "r".repeat(1000),
110+
},
111+
description: {
112+
...descriptionDefaults,
113+
display_name: "Really, really big",
114+
key: "big",
115+
},
116+
},
106117
],
107118
}

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -228,14 +228,19 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
228228

229229
export const AgentMetadata: FC<{
230230
agent: WorkspaceAgent
231-
}> = ({ agent }) => {
231+
storybookMetadata?: WorkspaceAgentMetadata[]
232+
}> = ({ agent, storybookMetadata }) => {
232233
const [metadata, setMetadata] = useState<
233234
WorkspaceAgentMetadata[] | undefined
234235
>(undefined)
235236

236237
const watchAgentMetadata = useContext(WatchAgentMetadataContext)
237238

238239
useEffect(() => {
240+
if (storybookMetadata !== undefined) {
241+
setMetadata(storybookMetadata)
242+
return
243+
}
239244
const source = watchAgentMetadata(agent.id)
240245

241246
source.onerror = (e) => {
@@ -248,10 +253,19 @@ export const AgentMetadata: FC<{
248253
return () => {
249254
source.close()
250255
}
251-
}, [agent.id, watchAgentMetadata])
256+
}, [agent.id, watchAgentMetadata, storybookMetadata])
252257

253258
if (metadata === undefined) {
254-
return <CircularProgress size={16} />
259+
return (
260+
<div
261+
style={{
262+
marginTop: 16,
263+
marginBottom: 16,
264+
}}
265+
>
266+
<CircularProgress size={16} />
267+
</div>
268+
)
255269
}
256270

257271
return <AgentMetadataView metadata={metadata} />
@@ -264,11 +278,12 @@ const useStyles = makeStyles((theme) => ({
264278
border: `2px dashed ${theme.palette.divider}`,
265279
borderRadius: theme.shape.borderRadius,
266280
width: "100%",
281+
marginTop: theme.spacing(2),
282+
marginBottom: theme.spacing(2),
267283
},
268284
metadataHeader: {
269285
padding: "8px",
270-
display: "grid",
271-
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
286+
display: "flex",
272287
gap: theme.spacing(5),
273288
rowGap: theme.spacing(3),
274289
},
@@ -290,6 +305,7 @@ const useStyles = makeStyles((theme) => ({
290305
textOverflow: "ellipsis",
291306
overflow: "hidden",
292307
whiteSpace: "nowrap",
308+
maxWidth: "16em",
293309
},
294310

295311
metadataValueSuccess: {

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

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,48 @@ export default {
2424

2525
const Template: Story<AgentRowProps> = (args) => <AgentRow {...args} />
2626

27+
const defaultAgentMetadata = [
28+
{
29+
result: {
30+
collected_at: "2021-05-05T00:00:00Z",
31+
error: "",
32+
value: "defvalue",
33+
age: 5,
34+
},
35+
description: {
36+
display_name: "DisPlay",
37+
key: "defkey",
38+
interval: 10,
39+
timeout: 10,
40+
script: "some command",
41+
},
42+
},
43+
]
44+
2745
export const Example = Template.bind({})
2846
Example.args = {
2947
agent: MockWorkspaceAgent,
3048
workspace: MockWorkspace,
3149
applicationsHost: "",
3250
showApps: true,
51+
storybookAgentMetadata: defaultAgentMetadata,
3352
}
3453

3554
export const HideSSHButton = Template.bind({})
3655
HideSSHButton.args = {
37-
agent: MockWorkspaceAgent,
38-
workspace: MockWorkspace,
39-
applicationsHost: "",
40-
showApps: true,
56+
...Example.args,
4157
hideSSHButton: true,
4258
}
4359

4460
export const HideVSCodeDesktopButton = Template.bind({})
4561
HideVSCodeDesktopButton.args = {
46-
agent: MockWorkspaceAgent,
47-
workspace: MockWorkspace,
48-
applicationsHost: "",
49-
showApps: true,
62+
...Example.args,
5063
hideVSCodeDesktopButton: true,
5164
}
5265

5366
export const NotShowingApps = Template.bind({})
5467
NotShowingApps.args = {
55-
agent: MockWorkspaceAgent,
56-
workspace: MockWorkspace,
57-
applicationsHost: "",
68+
...Example.args,
5869
showApps: false,
5970
}
6071

@@ -81,26 +92,21 @@ BunchOfApps.args = {
8192

8293
export const Connecting = Template.bind({})
8394
Connecting.args = {
95+
...Example.args,
8496
agent: MockWorkspaceAgentConnecting,
85-
workspace: MockWorkspace,
86-
applicationsHost: "",
87-
showApps: true,
97+
storybookAgentMetadata: [],
8898
}
8999

90100
export const Timeout = Template.bind({})
91101
Timeout.args = {
102+
...Example.args,
92103
agent: MockWorkspaceAgentTimeout,
93-
workspace: MockWorkspace,
94-
applicationsHost: "",
95-
showApps: true,
96104
}
97105

98106
export const Starting = Template.bind({})
99107
Starting.args = {
108+
...Example.args,
100109
agent: MockWorkspaceAgentStarting,
101-
workspace: MockWorkspace,
102-
applicationsHost: "",
103-
showApps: true,
104110

105111
storybookStartupLogs: [
106112
"Cloning Git repository...",
@@ -117,13 +123,11 @@ Starting.args = {
117123

118124
export const Started = Template.bind({})
119125
Started.args = {
126+
...Example.args,
120127
agent: {
121128
...MockWorkspaceAgentReady,
122129
startup_logs_length: 1,
123130
},
124-
workspace: MockWorkspace,
125-
applicationsHost: "",
126-
showApps: true,
127131

128132
storybookStartupLogs: [
129133
"Cloning Git repository...",
@@ -138,67 +142,58 @@ Started.args = {
138142
})),
139143
}
140144

145+
export const StartedNoMetadata = Template.bind({})
146+
StartedNoMetadata.args = {
147+
...Started.args,
148+
storybookAgentMetadata: [],
149+
}
150+
141151
export const StartTimeout = Template.bind({})
142152
StartTimeout.args = {
153+
...Example.args,
143154
agent: MockWorkspaceAgentStartTimeout,
144-
workspace: MockWorkspace,
145-
applicationsHost: "",
146-
showApps: true,
147155
}
148156

149157
export const StartError = Template.bind({})
150158
StartError.args = {
159+
...Example.args,
151160
agent: MockWorkspaceAgentStartError,
152-
workspace: MockWorkspace,
153-
applicationsHost: "",
154-
showApps: true,
155161
}
156162

157163
export const ShuttingDown = Template.bind({})
158164
ShuttingDown.args = {
165+
...Example.args,
159166
agent: MockWorkspaceAgentShuttingDown,
160-
workspace: MockWorkspace,
161-
applicationsHost: "",
162-
showApps: true,
163167
}
164168

165169
export const ShutdownTimeout = Template.bind({})
166170
ShutdownTimeout.args = {
171+
...Example.args,
167172
agent: MockWorkspaceAgentShutdownTimeout,
168-
workspace: MockWorkspace,
169-
applicationsHost: "",
170-
showApps: true,
171173
}
172174

173175
export const ShutdownError = Template.bind({})
174176
ShutdownError.args = {
177+
...Example.args,
175178
agent: MockWorkspaceAgentShutdownError,
176-
workspace: MockWorkspace,
177-
applicationsHost: "",
178-
showApps: true,
179179
}
180180

181181
export const Off = Template.bind({})
182182
Off.args = {
183+
...Example.args,
183184
agent: MockWorkspaceAgentOff,
184-
workspace: MockWorkspace,
185-
applicationsHost: "",
186-
showApps: true,
187185
}
188186

189187
export const ShowingPortForward = Template.bind({})
190188
ShowingPortForward.args = {
191-
agent: MockWorkspaceAgent,
192-
workspace: MockWorkspace,
189+
...Example.args,
193190
applicationsHost: "https://coder.com",
194-
showApps: true,
195191
}
196192

197193
export const Outdated = Template.bind({})
198194
Outdated.args = {
195+
...Example.args,
199196
agent: MockWorkspaceAgentOutdated,
200197
workspace: MockWorkspace,
201-
applicationsHost: "",
202-
showApps: true,
203198
serverVersion: "v99.999.9999+c1cdf14",
204199
}

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ import {
2929
LineWithID,
3030
workspaceAgentLogsMachine,
3131
} from "xServices/workspaceAgentLogs/workspaceAgentLogsXService"
32-
import { Workspace, WorkspaceAgent } from "../../api/typesGenerated"
32+
import {
33+
Workspace,
34+
WorkspaceAgent,
35+
WorkspaceAgentMetadata,
36+
} from "../../api/typesGenerated"
3337
import { AppLink } from "../AppLink/AppLink"
3438
import { SSHButton } from "../SSHButton/SSHButton"
3539
import { Stack } from "../Stack/Stack"
@@ -51,6 +55,7 @@ export interface AgentRowProps {
5155
onUpdateAgent: () => void
5256

5357
storybookStartupLogs?: LineWithID[]
58+
storybookAgentMetadata?: WorkspaceAgentMetadata[]
5459
}
5560

5661
export const AgentRow: FC<AgentRowProps> = ({
@@ -63,6 +68,7 @@ export const AgentRow: FC<AgentRowProps> = ({
6368
serverVersion,
6469
onUpdateAgent,
6570
storybookStartupLogs,
71+
storybookAgentMetadata,
6672
sshPrefix,
6773
}) => {
6874
const styles = useStyles()
@@ -180,11 +186,7 @@ export const AgentRow: FC<AgentRowProps> = ({
180186
<div className={styles.agentStatusWrapper}>
181187
<AgentStatus agent={agent} />
182188
</div>
183-
<Stack
184-
direction="column"
185-
alignItems="flex-start"
186-
key={agent.id}
187-
spacing={2}
189+
<div
188190
style={{
189191
flex: 1,
190192
}}
@@ -291,7 +293,10 @@ export const AgentRow: FC<AgentRowProps> = ({
291293
)}
292294
</Stack>
293295
</Stack>
294-
<AgentMetadata agent={agent} />
296+
<AgentMetadata
297+
storybookMetadata={storybookAgentMetadata}
298+
agent={agent}
299+
/>
295300
{hasStartupFeatures && (
296301
<Stack
297302
direction="row"
@@ -364,7 +369,7 @@ export const AgentRow: FC<AgentRowProps> = ({
364369
</Popover>
365370
</Stack>
366371
)}
367-
</Stack>
372+
</div>
368373
</Stack>
369374
{showStartupLogs && (
370375
<AutoSizer disableHeight>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy