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

Commit6f0defb

Browse files
refactor: refactor activity in workspace page (#17980)
Changing the activity in the workspace page. It is more boring, but morereliable and extensible. By moving it to the bottom of the agent card,we have more space to display longer messages and more items. It alsogive us some space for interactivity controls in case we want them inthe future.**Before:**<img width="1512" alt="Screenshot 2025-05-21 at 19 09 41"src="https://github.com/user-attachments/assets/c25aa848-b496-4a78-8d19-0b0efeae6115"/>**After:**https://github.com/user-attachments/assets/3e88eb63-e082-4e5c-a6a3-79a6fe3d46b6
1 parent4cb35c4 commit6f0defb

File tree

5 files changed

+353
-590
lines changed

5 files changed

+353
-590
lines changed

‎site/src/modules/resources/AgentRow.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
1515
importtype{Line}from"components/Logs/LogLine";
1616
import{Stack}from"components/Stack/Stack";
1717
import{useProxy}from"contexts/ProxyContext";
18+
import{AppStatuses}from"pages/WorkspacePage/AppStatuses";
1819
import{
1920
typeFC,
2021
useCallback,
@@ -225,6 +226,13 @@ export const AgentRow: FC<AgentRowProps> = ({
225226
</header>
226227

227228
<divcss={styles.content}>
229+
{workspace.latest_app_status?.agent_id===agent.id&&(
230+
<section>
231+
<h3className="sr-only">App statuses</h3>
232+
<AppStatusesworkspace={workspace}agent={agent}/>
233+
</section>
234+
)}
235+
228236
{agent.status==="connected"&&(
229237
<sectioncss={styles.apps}>
230238
{shouldDisplayApps&&(

‎site/src/pages/WorkspacePage/AppStatuses.stories.tsx

Lines changed: 150 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { AppStatuses } from "./AppStatuses";
1212
constmeta:Meta<typeofAppStatuses>={
1313
title:"pages/WorkspacePage/AppStatuses",
1414
component:AppStatuses,
15+
args:{
16+
referenceDate:newDate("2024-03-26T15:15:00Z"),
17+
},
1518
// Add decorator for ProxyContext
1619
decorators:[
1720
(Story)=>(
@@ -43,165 +46,163 @@ export default meta;
4346

4447
typeStory=StoryObj<typeofAppStatuses>;
4548

46-
// Helper function to create timestamps easily
47-
constcreateTimestamp=(
48-
minuteOffset:number,
49-
secondOffset:number,
50-
):string=>{
51-
constbaseDate=newDate("2024-03-26T15:00:00Z");
52-
baseDate.setMinutes(baseDate.getMinutes()+minuteOffset);
53-
baseDate.setSeconds(baseDate.getSeconds()+secondOffset);
54-
returnbaseDate.toISOString();
55-
};
56-
57-
// Define a fixed reference date for Storybook, slightly after the last status
58-
conststoryReferenceDate=newDate("2024-03-26T15:15:00Z");// 15 minutes after base
59-
6049
exportconstDefault:Story={
6150
args:{
6251
workspace:MockWorkspace,
63-
agents:[MockWorkspaceAgent],
64-
apps:[
65-
{
66-
...MockWorkspaceApp,
67-
statuses:[
68-
{
69-
// This is the latest status chronologically (15:04:38)
70-
...MockWorkspaceAppStatus,
71-
id:"status-7",
72-
icon:"/emojis/1f4dd.png",// 📝
73-
message:"Creating PR with gh CLI",
74-
created_at:createTimestamp(4,38),// 15:04:38
75-
uri:"https://github.com/coder/coder/pull/5678",
76-
state:"complete"asconst,
77-
},
78-
{
79-
// (15:03:56)
80-
...MockWorkspaceAppStatus,
81-
id:"status-6",
82-
icon:"/emojis/1f680.png",// 🚀
83-
message:"Pushing branch to remote",
84-
created_at:createTimestamp(3,56),// 15:03:56
85-
uri:"",
86-
state:"complete"asconst,
87-
},
88-
{
89-
// (15:02:29)
90-
...MockWorkspaceAppStatus,
91-
id:"status-5",
92-
icon:"/emojis/1f527.png",// 🔧
93-
message:"Configuring git identity",
94-
created_at:createTimestamp(2,29),// 15:02:29
95-
uri:"",
96-
state:"complete"asconst,
97-
},
98-
{
99-
// (15:02:04)
100-
...MockWorkspaceAppStatus,
101-
id:"status-4",
102-
icon:"/emojis/1f4be.png",// 💾
103-
message:"Committing changes",
104-
created_at:createTimestamp(2,4),// 15:02:04
105-
uri:"",
106-
state:"complete"asconst,
107-
},
108-
{
109-
// (15:01:44)
110-
...MockWorkspaceAppStatus,
111-
id:"status-3",
112-
icon:"/emojis/2795.png",// +
113-
message:"Adding files to staging",
114-
created_at:createTimestamp(1,44),// 15:01:44
115-
uri:"",
116-
state:"complete"asconst,
117-
},
118-
{
119-
// (15:01:32)
120-
...MockWorkspaceAppStatus,
121-
id:"status-2",
122-
icon:"/emojis/1f33f.png",// 🌿
123-
message:"Creating a new branch for PR",
124-
created_at:createTimestamp(1,32),// 15:01:32
125-
uri:"",
126-
state:"complete"asconst,
127-
},
128-
{
129-
// (15:01:00) - Oldest
130-
...MockWorkspaceAppStatus,
131-
id:"status-1",
132-
icon:"/emojis/1f680.png",// 🚀
133-
message:"Starting to create a PR",
134-
created_at:createTimestamp(1,0),// 15:01:00
135-
uri:"",
136-
state:"complete"asconst,
137-
},
138-
].sort(
139-
(a,b)=>
140-
newDate(b.created_at).getTime()-newDate(a.created_at).getTime(),
141-
),// Ensure sorted correctly for component input if needed
142-
},
143-
],
52+
agent:{
53+
...MockWorkspaceAgent,
54+
apps:[
55+
{
56+
...MockWorkspaceApp,
57+
statuses:[
58+
{
59+
// This is the latest status chronologically (15:04:38)
60+
...MockWorkspaceAppStatus,
61+
id:"status-7",
62+
icon:"/emojis/1f4dd.png",// 📝
63+
message:"Creating PR with gh CLI",
64+
created_at:createTimestamp(4,38),// 15:04:38
65+
uri:"https://github.com/coder/coder/pull/5678",
66+
state:"complete"asconst,
67+
},
68+
{
69+
// (15:03:56)
70+
...MockWorkspaceAppStatus,
71+
id:"status-6",
72+
icon:"/emojis/1f680.png",// 🚀
73+
message:"Pushing branch to remote",
74+
created_at:createTimestamp(3,56),// 15:03:56
75+
uri:"",
76+
state:"complete"asconst,
77+
},
78+
{
79+
// (15:02:29)
80+
...MockWorkspaceAppStatus,
81+
id:"status-5",
82+
icon:"/emojis/1f527.png",// 🔧
83+
message:"Configuring git identity",
84+
created_at:createTimestamp(2,29),// 15:02:29
85+
uri:"",
86+
state:"complete"asconst,
87+
},
88+
{
89+
// (15:02:04)
90+
...MockWorkspaceAppStatus,
91+
id:"status-4",
92+
icon:"/emojis/1f4be.png",// 💾
93+
message:"Committing changes",
94+
created_at:createTimestamp(2,4),// 15:02:04
95+
uri:"",
96+
state:"complete"asconst,
97+
},
98+
{
99+
// (15:01:44)
100+
...MockWorkspaceAppStatus,
101+
id:"status-3",
102+
icon:"/emojis/2795.png",// +
103+
message:"Adding files to staging",
104+
created_at:createTimestamp(1,44),// 15:01:44
105+
uri:"",
106+
state:"complete"asconst,
107+
},
108+
{
109+
// (15:01:32)
110+
...MockWorkspaceAppStatus,
111+
id:"status-2",
112+
icon:"/emojis/1f33f.png",// 🌿
113+
message:"Creating a new branch for PR",
114+
created_at:createTimestamp(1,32),// 15:01:32
115+
uri:"",
116+
state:"complete"asconst,
117+
},
118+
{
119+
// (15:01:00) - Oldest
120+
...MockWorkspaceAppStatus,
121+
id:"status-1",
122+
icon:"/emojis/1f680.png",// 🚀
123+
message:"Starting to create a PR",
124+
created_at:createTimestamp(1,0),// 15:01:00
125+
uri:"",
126+
state:"complete"asconst,
127+
},
128+
].sort(
129+
(a,b)=>
130+
newDate(b.created_at).getTime()-
131+
newDate(a.created_at).getTime(),
132+
),// Ensure sorted correctly for component input if needed
133+
},
134+
],
135+
},
136+
144137
// Pass the reference date to the component for Storybook rendering
145-
referenceDate:storyReferenceDate,
146138
},
147139
};
148140

149141
// Add a story with a "Working" status as the latest
150142
exportconstWorkingState:Story={
151143
args:{
152144
workspace:MockWorkspace,
153-
agents:[MockWorkspaceAgent],
154-
apps:[
155-
{
156-
...MockWorkspaceApp,
157-
statuses:[
158-
{
159-
// This is now the latest (15:05:15) and is "working"
160-
...MockWorkspaceAppStatus,
161-
id:"status-8",
162-
icon:"",// Let the component handle the spinner icon
163-
message:"Processing final checks...",
164-
created_at:createTimestamp(5,15),// 15:05:15 (after referenceDate)
165-
uri:"",
166-
state:"working"asconst,
167-
},
168-
{
169-
// Previous latest (15:04:38)
170-
...MockWorkspaceAppStatus,
171-
id:"status-7",
172-
icon:"/emojis/1f4dd.png",// 📝
173-
message:"Creating PR with gh CLI",
174-
created_at:createTimestamp(4,38),// 15:04:38
175-
uri:"https://github.com/coder/coder/pull/5678",
176-
state:"complete"asconst,
177-
},
178-
{
179-
// (15:03:56)
180-
...MockWorkspaceAppStatus,
181-
id:"status-6",
182-
icon:"/emojis/1f680.png",// 🚀
183-
message:"Pushing branch to remote",
184-
created_at:createTimestamp(3,56),// 15:03:56
185-
uri:"",
186-
state:"complete"asconst,
187-
},
188-
// ... include other older statuses if desired ...
189-
{
190-
// (15:01:00) - Oldest
191-
...MockWorkspaceAppStatus,
192-
id:"status-1",
193-
icon:"/emojis/1f680.png",// 🚀
194-
message:"Starting to create a PR",
195-
created_at:createTimestamp(1,0),// 15:01:00
196-
uri:"",
197-
state:"complete"asconst,
198-
},
199-
].sort(
200-
(a,b)=>
201-
newDate(b.created_at).getTime()-newDate(a.created_at).getTime(),
202-
),
203-
},
204-
],
205-
referenceDate:storyReferenceDate,// Use the same reference date
145+
agent:{
146+
...MockWorkspaceAgent,
147+
apps:[
148+
{
149+
...MockWorkspaceApp,
150+
statuses:[
151+
{
152+
// This is now the latest (15:05:15) and is "working"
153+
...MockWorkspaceAppStatus,
154+
id:"status-8",
155+
icon:"",// Let the component handle the spinner icon
156+
message:"Processing final checks...",
157+
created_at:createTimestamp(5,15),// 15:05:15 (after referenceDate)
158+
uri:"",
159+
state:"working"asconst,
160+
},
161+
{
162+
// Previous latest (15:04:38)
163+
...MockWorkspaceAppStatus,
164+
id:"status-7",
165+
icon:"/emojis/1f4dd.png",// 📝
166+
message:"Creating PR with gh CLI",
167+
created_at:createTimestamp(4,38),// 15:04:38
168+
uri:"https://github.com/coder/coder/pull/5678",
169+
state:"complete"asconst,
170+
},
171+
{
172+
// (15:03:56)
173+
...MockWorkspaceAppStatus,
174+
id:"status-6",
175+
icon:"/emojis/1f680.png",// 🚀
176+
message:"Pushing branch to remote",
177+
created_at:createTimestamp(3,56),// 15:03:56
178+
uri:"",
179+
state:"complete"asconst,
180+
},
181+
// ... include other older statuses if desired ...
182+
{
183+
// (15:01:00) - Oldest
184+
...MockWorkspaceAppStatus,
185+
id:"status-1",
186+
icon:"/emojis/1f680.png",// 🚀
187+
message:"Starting to create a PR",
188+
created_at:createTimestamp(1,0),// 15:01:00
189+
uri:"",
190+
state:"complete"asconst,
191+
},
192+
].sort(
193+
(a,b)=>
194+
newDate(b.created_at).getTime()-
195+
newDate(a.created_at).getTime(),
196+
),
197+
},
198+
],
199+
},
206200
},
207201
};
202+
203+
functioncreateTimestamp(minuteOffset:number,secondOffset:number){
204+
constbaseDate=newDate("2024-03-26T15:00:00Z");
205+
baseDate.setMinutes(baseDate.getMinutes()+minuteOffset);
206+
baseDate.setSeconds(baseDate.getSeconds()+secondOffset);
207+
returnbaseDate.toISOString();
208+
}

0 commit comments

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