Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1f63a11

Browse files
refactor(site): refactor resource and agents (#11647)
1 parent89fd294 commit1f63a11

18 files changed

+600
-367
lines changed

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
11
importButton,{typeButtonProps}from"@mui/material/Button";
2-
import{useTheme}from"@emotion/react";
32
import{forwardRef}from"react";
43

54
// eslint-disable-next-line react/display-name -- Name is inferred from variable name
65
exportconstAgentButton=forwardRef<HTMLButtonElement,ButtonProps>(
76
(props,ref)=>{
87
const{ children, ...buttonProps}=props;
9-
consttheme=useTheme();
108

119
return(
1210
<Button
13-
color="neutral"
1411
{...buttonProps}
12+
color="neutral"
13+
size="xlarge"
14+
variant="contained"
1515
ref={ref}
16-
css={{
17-
backgroundColor:theme.palette.background.default,
18-
19-
"&:hover":{
20-
backgroundColor:theme.palette.background.paper,
21-
},
22-
16+
css={(theme)=>({
17+
padding:"12px 20px",
18+
color:theme.palette.text.primary,
2319
// Making them smaller since those icons don't have a padding around them
24-
"& .MuiButton-startIcon":{
25-
width:12,
26-
height:12,
20+
"& .MuiButton-startIcon, & .MuiButton-endIcon":{
21+
width:16,
22+
height:16,
2723
"& svg":{width:"100%",height:"100%"},
2824
},
29-
}}
25+
})}
3026
>
3127
{children}
3228
</Button>

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

Lines changed: 83 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -24,71 +24,6 @@ type ItemStatus = "stale" | "valid" | "loading";
2424

2525
exportconstWatchAgentMetadataContext=createContext(watchAgentMetadata);
2626

27-
interfaceMetadataItemProps{
28-
item:WorkspaceAgentMetadata;
29-
}
30-
31-
constMetadataItem:FC<MetadataItemProps>=({ item})=>{
32-
if(item.result===undefined){
33-
thrownewError("Metadata item result is undefined");
34-
}
35-
if(item.description===undefined){
36-
thrownewError("Metadata item description is undefined");
37-
}
38-
39-
conststaleThreshold=Math.max(
40-
item.description.interval+item.description.timeout*2,
41-
// In case there is intense backpressure, we give a little bit of slack.
42-
5,
43-
);
44-
45-
conststatus:ItemStatus=(()=>{
46-
constyear=dayjs(item.result.collected_at).year();
47-
if(year<=1970||isNaN(year)){
48-
return"loading";
49-
}
50-
// There is a special circumstance for metadata with `interval: 0`. It is
51-
// expected that they run once and never again, so never display them as
52-
// stale.
53-
if(item.result.age>staleThreshold&&item.description.interval>0){
54-
return"stale";
55-
}
56-
return"valid";
57-
})();
58-
59-
// Stale data is as good as no data. Plus, we want to build confidence in our
60-
// users that what's shown is real. If times aren't correctly synced this
61-
// could be buggy. But, how common is that anyways?
62-
constvalue=
63-
status==="loading" ?(
64-
<Skeletonwidth={65}height={12}variant="text"css={styles.skeleton}/>
65-
) :status==="stale" ?(
66-
<Tooltiptitle="This data is stale and no longer up to date">
67-
<StaticWidthcss={[styles.metadataValue,styles.metadataStale]}>
68-
{item.result.value}
69-
</StaticWidth>
70-
</Tooltip>
71-
) :(
72-
<StaticWidth
73-
css={[
74-
styles.metadataValue,
75-
item.result.error.length===0
76-
?styles.metadataValueSuccess
77-
:styles.metadataValueError,
78-
]}
79-
>
80-
{item.result.value}
81-
</StaticWidth>
82-
);
83-
84-
return(
85-
<divcss={styles.metadata}>
86-
<divcss={styles.metadataLabel}>{item.description.display_name}</div>
87-
<div>{value}</div>
88-
</div>
89-
);
90-
};
91-
9227
exportinterfaceAgentMetadataViewProps{
9328
metadata:WorkspaceAgentMetadata[];
9429
}
@@ -98,16 +33,11 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
9833
returnnull;
9934
}
10035
return(
101-
<divcss={styles.root}>
102-
<StackalignItems="baseline"direction="row"spacing={6}>
103-
{metadata.map((m)=>{
104-
if(m.description===undefined){
105-
thrownewError("Metadata item description is undefined");
106-
}
107-
return<MetadataItemkey={m.description.key}item={m}/>;
108-
})}
109-
</Stack>
110-
</div>
36+
<sectioncss={styles.root}>
37+
{metadata.map((m)=>(
38+
<MetadataItemkey={m.description.key}item={m}/>
39+
))}
40+
</section>
11141
);
11242
};
11343

@@ -162,13 +92,19 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
16292

16393
if(metadata===undefined){
16494
return(
165-
<divcss={styles.root}>
95+
<sectioncss={styles.root}>
16696
<AgentMetadataSkeleton/>
167-
</div>
97+
</section>
16898
);
16999
}
170100

171-
return<AgentMetadataViewmetadata={metadata}/>;
101+
return(
102+
<AgentMetadataView
103+
metadata={[...metadata].sort((a,b)=>
104+
a.description.display_name.localeCompare(b.description.display_name),
105+
)}
106+
/>
107+
);
172108
};
173109

174110
exportconstAgentMetadataSkeleton:FC=()=>{
@@ -192,6 +128,64 @@ export const AgentMetadataSkeleton: FC = () => {
192128
);
193129
};
194130

131+
interfaceMetadataItemProps{
132+
item:WorkspaceAgentMetadata;
133+
}
134+
135+
constMetadataItem:FC<MetadataItemProps>=({ item})=>{
136+
conststaleThreshold=Math.max(
137+
item.description.interval+item.description.timeout*2,
138+
// In case there is intense backpressure, we give a little bit of slack.
139+
5,
140+
);
141+
142+
conststatus:ItemStatus=(()=>{
143+
constyear=dayjs(item.result.collected_at).year();
144+
if(year<=1970||isNaN(year)){
145+
return"loading";
146+
}
147+
// There is a special circumstance for metadata with `interval: 0`. It is
148+
// expected that they run once and never again, so never display them as
149+
// stale.
150+
if(item.result.age>staleThreshold&&item.description.interval>0){
151+
return"stale";
152+
}
153+
return"valid";
154+
})();
155+
156+
// Stale data is as good as no data. Plus, we want to build confidence in our
157+
// users that what's shown is real. If times aren't correctly synced this
158+
// could be buggy. But, how common is that anyways?
159+
constvalue=
160+
status==="loading" ?(
161+
<Skeletonwidth={65}height={12}variant="text"css={styles.skeleton}/>
162+
) :status==="stale" ?(
163+
<Tooltiptitle="This data is stale and no longer up to date">
164+
<StaticWidthcss={[styles.metadataValue,styles.metadataStale]}>
165+
{item.result.value}
166+
</StaticWidth>
167+
</Tooltip>
168+
) :(
169+
<StaticWidth
170+
css={[
171+
styles.metadataValue,
172+
item.result.error.length===0
173+
?styles.metadataValueSuccess
174+
:styles.metadataValueError,
175+
]}
176+
>
177+
{item.result.value}
178+
</StaticWidth>
179+
);
180+
181+
return(
182+
<divcss={styles.metadata}>
183+
<divcss={styles.metadataLabel}>{item.description.display_name}</div>
184+
<div>{value}</div>
185+
</div>
186+
);
187+
};
188+
195189
constStaticWidth:FC<HTMLAttributes<HTMLDivElement>>=({
196190
children,
197191
...attrs
@@ -221,33 +215,28 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
221215
// These are more or less copied from
222216
// site/src/components/Resources/ResourceCard.tsx
223217
conststyles={
224-
root:(theme)=>({
225-
padding:"20px 32px",
226-
borderTop:`1px solid${theme.palette.divider}`,
227-
overflowX:"auto",
228-
scrollPadding:"0 32px",
229-
}),
218+
root:{
219+
display:"flex",
220+
alignItems:"baseline",
221+
flexWrap:"wrap",
222+
gap:32,
223+
rowGap:16,
224+
},
230225

231226
metadata:{
232-
fontSize:12,
233-
lineHeight:"normal",
227+
lineHeight:"1.6",
234228
display:"flex",
235229
flexDirection:"column",
236-
gap:4,
237230
overflow:"visible",
238-
239-
// Because of scrolling
240-
"&:last-child":{
241-
paddingRight:32,
242-
},
231+
flexShrink:0,
243232
},
244233

245234
metadataLabel:(theme)=>({
246235
color:theme.palette.text.secondary,
247236
textOverflow:"ellipsis",
248237
overflow:"hidden",
249238
whiteSpace:"nowrap",
250-
fontWeight:500,
239+
fontSize:13,
251240
}),
252241

253242
metadataValue:{
@@ -259,9 +248,7 @@ const styles = {
259248
},
260249

261250
metadataValueSuccess:(theme)=>({
262-
// color: theme.palette.success.light,
263-
color:theme.experimental.roles.success.fill,
264-
// color: theme.experimental.roles.success.text,
251+
color:theme.experimental.roles.success.outline,
265252
}),
266253

267254
metadataValueError:(theme)=>({

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
MockWorkspaceAgentDeprecated,
2121
MockWorkspaceApp,
2222
MockProxyLatencies,
23+
MockListeningPortsResponse,
2324
}from"testHelpers/entities";
2425
import{AgentRow,LineWithID}from"./AgentRow";
2526
import{ProxyContext,getPreferredProxy}from"contexts/ProxyContext";
@@ -103,7 +104,15 @@ const storybookLogs: LineWithID[] = [
103104

104105
constmeta:Meta<typeofAgentRow>={
105106
title:"components/AgentRow",
106-
parameters:{ chromatic},
107+
parameters:{
108+
chromatic,
109+
queries:[
110+
{
111+
key:["portForward",MockWorkspaceAgent.id],
112+
data:MockListeningPortsResponse,
113+
},
114+
],
115+
},
107116
component:AgentRow,
108117
args:{
109118
storybookLogs,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp