Thanks to visit codestin.com
Credit goes to github.com

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

+11
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

+21-5
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

+41-46
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

+13-8
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)