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

Commit3c7808c

Browse files
fix(site): update workspace timings to use theme colors (coder#15269)
Fixcoder#15266After fix:<img width="1210" alt="Screenshot 2024-10-29 at 09 37 02"src="https://github.com/user-attachments/assets/35ff0361-6323-4e26-b4f2-05da6f1651c6"><img width="1200" alt="Screenshot 2024-10-29 at 09 36 49"src="https://github.com/user-attachments/assets/c2e55364-9f21-4bd1-bda6-aedf106a9742"><img width="1202" alt="Screenshot 2024-10-29 at 09 36 40"src="https://github.com/user-attachments/assets/2d0222d9-cf25-4ef9-8d74-f426fbae7bec">
1 parent7982ad7 commit3c7808c

File tree

5 files changed

+74
-61
lines changed

5 files changed

+74
-61
lines changed

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,15 @@ const styles = {
9191
left:-8,
9292
},
9393
}),
94-
clickable:{
94+
clickable:(theme)=>({
9595
cursor:"pointer",
9696
// We need to make the bar width at least 34px to allow the "..." icons to be displayed.
9797
// The calculation is border * 1 + side paddings * 2 + icon width (which is 18px)
9898
minWidth:34,
9999

100100
"&:focus, &:hover, &:active":{
101101
outline:"none",
102-
borderColor:"#38BDF8",
102+
borderColor:theme.roles.active.outline,
103103
},
104-
},
104+
}),
105105
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,22 @@ const styles = {
5252
gap:spaceBetweenBlocks,
5353
alignItems:"center",
5454
},
55-
block:{
55+
block:(theme)=>({
5656
borderRadius:4,
5757
height:18,
58-
backgroundColor:"#082F49",
59-
border:"1px solid#38BDF8",
58+
backgroundColor:theme.roles.active.background,
59+
border:`1px solid${theme.roles.active.outline}`,
6060
flexShrink:0,
6161
flex:1,
62-
},
63-
more:{
64-
color:"#38BDF8",
62+
}),
63+
more:(theme)=>({
64+
color:theme.roles.active.outline,
6565
lineHeight:0,
6666
flexShrink:0,
6767
flex:1,
6868

6969
"& svg":{
7070
fontSize:moreIconSize,
7171
},
72-
},
72+
}),
7373
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,6 @@ import {
3232
}from"./Chart/utils";
3333
importtype{StageCategory}from"./StagesChart";
3434

35-
constlegendsByAction:Record<string,ChartLegend>={
36-
"state refresh":{
37-
label:"state refresh",
38-
},
39-
create:{
40-
label:"create",
41-
colors:{
42-
fill:"#022C22",
43-
stroke:"#BBF7D0",
44-
},
45-
},
46-
delete:{
47-
label:"delete",
48-
colors:{
49-
fill:"#422006",
50-
stroke:"#FDBA74",
51-
},
52-
},
53-
read:{
54-
label:"read",
55-
colors:{
56-
fill:"#082F49",
57-
stroke:"#38BDF8",
58-
},
59-
},
60-
};
61-
6235
typeResourceTiming={
6336
name:string;
6437
source:string;
@@ -86,6 +59,8 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
8659
constvisibleTimings=timings.filter(
8760
(t)=>!isCoderResource(t.name)&&t.name.includes(filter),
8861
);
62+
consttheme=useTheme();
63+
constlegendsByAction=getLegendsByAction(theme);
8964
constvisibleLegends=[...newSet(visibleTimings.map((t)=>t.action))].map(
9065
(a)=>legendsByAction[a],
9166
);
@@ -168,3 +143,32 @@ export const isCoderResource = (resource: string) => {
168143
resource.startsWith("coder_")
169144
);
170145
};
146+
147+
functiongetLegendsByAction(theme:Theme):Record<string,ChartLegend>{
148+
return{
149+
"state refresh":{
150+
label:"state refresh",
151+
},
152+
create:{
153+
label:"create",
154+
colors:{
155+
fill:theme.roles.success.background,
156+
stroke:theme.roles.success.outline,
157+
},
158+
},
159+
delete:{
160+
label:"delete",
161+
colors:{
162+
fill:theme.roles.warning.background,
163+
stroke:theme.roles.warning.outline,
164+
},
165+
},
166+
read:{
167+
label:"read",
168+
colors:{
169+
fill:theme.roles.active.background,
170+
stroke:theme.roles.active.outline,
171+
},
172+
},
173+
};
174+
}

‎site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{typeTheme,useTheme}from"@emotion/react";
12
import{typeFC,useState}from"react";
23
import{Bar}from"./Chart/Bar";
34
import{
@@ -28,30 +29,6 @@ import {
2829
}from"./Chart/utils";
2930
importtype{StageCategory}from"./StagesChart";
3031

31-
constlegendsByStatus:Record<string,ChartLegend>={
32-
ok:{
33-
label:"success",
34-
colors:{
35-
fill:"#022C22",
36-
stroke:"#BBF7D0",
37-
},
38-
},
39-
exit_failure:{
40-
label:"failure",
41-
colors:{
42-
fill:"#450A0A",
43-
stroke:"#F87171",
44-
},
45-
},
46-
timeout:{
47-
label:"timed out",
48-
colors:{
49-
fill:"#422006",
50-
stroke:"#FDBA74",
51-
},
52-
},
53-
};
54-
5532
typeScriptTiming={
5633
name:string;
5734
status:string;
@@ -77,6 +54,8 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
7754
const[ticks,scale]=makeTicks(totalTime);
7855
const[filter,setFilter]=useState("");
7956
constvisibleTimings=timings.filter((t)=>t.name.includes(filter));
57+
consttheme=useTheme();
58+
constlegendsByStatus=getLegendsByStatus(theme);
8059
constvisibleLegends=[...newSet(visibleTimings.map((t)=>t.status))].map(
8160
(s)=>legendsByStatus[s],
8261
);
@@ -151,3 +130,29 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
151130
</Chart>
152131
);
153132
};
133+
134+
functiongetLegendsByStatus(theme:Theme):Record<string,ChartLegend>{
135+
return{
136+
ok:{
137+
label:"success",
138+
colors:{
139+
fill:theme.roles.success.background,
140+
stroke:theme.roles.success.outline,
141+
},
142+
},
143+
exit_failure:{
144+
label:"failure",
145+
colors:{
146+
fill:theme.roles.error.background,
147+
stroke:theme.roles.error.outline,
148+
},
149+
},
150+
timeout:{
151+
label:"timed out",
152+
colors:{
153+
fill:theme.roles.warning.background,
154+
stroke:theme.roles.warning.outline,
155+
},
156+
},
157+
};
158+
}

‎site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
22
import{expect,userEvent,waitFor,within}from"@storybook/test";
3+
import{chromatic}from"testHelpers/chromatic";
34
import{WorkspaceTimings}from"./WorkspaceTimings";
45
import{WorkspaceTimingsResponse}from"./storybookData";
56

@@ -11,6 +12,9 @@ const meta: Meta<typeof WorkspaceTimings> = {
1112
provisionerTimings:WorkspaceTimingsResponse.provisioner_timings,
1213
agentScriptTimings:WorkspaceTimingsResponse.agent_script_timings,
1314
},
15+
parameters:{
16+
chromatic,
17+
},
1418
};
1519

1620
exportdefaultmeta;

0 commit comments

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