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

Commit9f3a6d6

Browse files
refactor: Move schedule info to the sidebar (#1665)
1 parent1f03277 commit9f3a6d6

File tree

4 files changed

+158
-61
lines changed

4 files changed

+158
-61
lines changed

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { BuildsTable } from "../BuildsTable/BuildsTable"
88
import{Resources}from"../Resources/Resources"
99
import{Stack}from"../Stack/Stack"
1010
import{WorkspaceActions}from"../WorkspaceActions/WorkspaceActions"
11+
import{WorkspaceSchedule}from"../WorkspaceSchedule/WorkspaceSchedule"
1112
import{WorkspaceSection}from"../WorkspaceSection/WorkspaceSection"
1213
import{WorkspaceStats}from"../WorkspaceStats/WorkspaceStats"
1314

@@ -64,12 +65,18 @@ export const Workspace: React.FC<WorkspaceProps> = ({
6465
</div>
6566
</div>
6667

67-
<Stackspacing={3}>
68-
<WorkspaceStatsworkspace={workspace}/>
69-
<Resourcesresources={resources}getResourcesError={getResourcesError}/>
70-
<WorkspaceSectiontitle="Timeline"contentsProps={{className:styles.timelineContents}}>
71-
<BuildsTablebuilds={builds}className={styles.timelineTable}/>
72-
</WorkspaceSection>
68+
<Stackdirection="row"spacing={3}className={styles.layout}>
69+
<Stackspacing={3}className={styles.main}>
70+
<WorkspaceStatsworkspace={workspace}/>
71+
<Resourcesresources={resources}getResourcesError={getResourcesError}/>
72+
<WorkspaceSectiontitle="Timeline"contentsProps={{className:styles.timelineContents}}>
73+
<BuildsTablebuilds={builds}className={styles.timelineTable}/>
74+
</WorkspaceSection>
75+
</Stack>
76+
77+
<Stackspacing={3}className={styles.sidebar}>
78+
<WorkspaceScheduleworkspace={workspace}/>
79+
</Stack>
7380
</Stack>
7481
</div>
7582
)
@@ -99,6 +106,16 @@ export const useStyles = makeStyles((theme) => {
99106
fontFamily:"inherit",
100107
marginTop:theme.spacing(0.5),
101108
},
109+
layout:{
110+
alignItems:"flex-start",
111+
},
112+
main:{
113+
width:"100%",
114+
},
115+
sidebar:{
116+
width:theme.spacing(32),
117+
flexShrink:0,
118+
},
102119
timelineContents:{
103120
margin:0,
104121
},
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import{Story}from"@storybook/react"
2+
importReactfrom"react"
3+
import{MockWorkspace}from"../../testHelpers/renderHelpers"
4+
import{WorkspaceSchedule,WorkspaceScheduleProps}from"./WorkspaceSchedule"
5+
6+
exportdefault{
7+
title:"components/WorkspaceSchedule",
8+
component:WorkspaceSchedule,
9+
argTypes:{},
10+
}
11+
12+
constTemplate:Story<WorkspaceScheduleProps>=(args)=><WorkspaceSchedule{...args}/>
13+
14+
exportconstExample=Template.bind({})
15+
Example.args={
16+
workspace:MockWorkspace,
17+
}
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
importLinkfrom"@material-ui/core/Link"
2+
import{makeStyles}from"@material-ui/core/styles"
3+
importTypographyfrom"@material-ui/core/Typography"
4+
importScheduleIconfrom"@material-ui/icons/Schedule"
5+
importcronstruefrom"cronstrue"
6+
importdayjsfrom"dayjs"
7+
importdurationfrom"dayjs/plugin/duration"
8+
importrelativeTimefrom"dayjs/plugin/relativeTime"
9+
importReactfrom"react"
10+
import{Workspace}from"../../api/typesGenerated"
11+
import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
12+
import{extractTimezone,stripTimezone}from"../../util/schedule"
13+
import{Stack}from"../Stack/Stack"
14+
15+
dayjs.extend(duration)
16+
dayjs.extend(relativeTime)
17+
18+
constautoStartLabel=(schedule:string):string=>{
19+
constprefix="Start"
20+
21+
if(schedule){
22+
return`${prefix} (${extractTimezone(schedule)})`
23+
}else{
24+
returnprefix
25+
}
26+
}
27+
28+
constautoStartDisplay=(schedule:string):string=>{
29+
if(schedule){
30+
returncronstrue.toString(stripTimezone(schedule),{throwExceptionOnParseError:false})
31+
}
32+
return"Manual"
33+
}
34+
35+
constautoStopDisplay=(workspace:Workspace):string=>{
36+
constlatest=workspace.latest_build
37+
38+
if(!workspace.ttl||workspace.ttl<1){
39+
return"Manual"
40+
}
41+
42+
if(latest.transition==="start"){
43+
constnow=dayjs()
44+
constupdatedAt=dayjs(latest.updated_at)
45+
constdeadline=updatedAt.add(workspace.ttl/1_000_000,"ms")
46+
if(now.isAfter(deadline)){
47+
return"Workspace is shutting down now"
48+
}
49+
returnnow.to(deadline)
50+
}
51+
52+
constduration=dayjs.duration(workspace.ttl/1_000_000,"milliseconds")
53+
return`${duration.humanize()} after start`
54+
}
55+
56+
exportinterfaceWorkspaceScheduleProps{
57+
workspace:Workspace
58+
}
59+
60+
exportconstWorkspaceSchedule:React.FC<WorkspaceScheduleProps>=({ workspace})=>{
61+
conststyles=useStyles()
62+
63+
return(
64+
<divclassName={styles.schedule}>
65+
<Stackspacing={2}>
66+
<Typographyvariant="body1"className={styles.title}>
67+
<ScheduleIconclassName={styles.scheduleIcon}/>
68+
Schedule
69+
</Typography>
70+
<div>
71+
<spanclassName={styles.scheduleLabel}>{autoStartLabel(workspace.autostart_schedule)}</span>
72+
<spanclassName={styles.scheduleValue}>{autoStartDisplay(workspace.autostart_schedule)}</span>
73+
</div>
74+
<div>
75+
<spanclassName={styles.scheduleLabel}>Shutdown</span>
76+
<spanclassName={styles.scheduleValue}>{autoStopDisplay(workspace)}</span>
77+
</div>
78+
<div>
79+
<LinkclassName={styles.scheduleAction}>Edit schedule</Link>
80+
</div>
81+
</Stack>
82+
</div>
83+
)
84+
}
85+
86+
constuseStyles=makeStyles((theme)=>({
87+
schedule:{
88+
fontFamily:MONOSPACE_FONT_FAMILY,
89+
},
90+
title:{
91+
fontWeight:600,
92+
93+
fontFamily:"inherit",
94+
display:"flex",
95+
alignItems:"center",
96+
},
97+
scheduleIcon:{
98+
width:16,
99+
height:16,
100+
marginRight:theme.spacing(1),
101+
},
102+
scheduleLabel:{
103+
fontSize:12,
104+
textTransform:"uppercase",
105+
display:"block",
106+
fontWeight:600,
107+
color:theme.palette.text.secondary,
108+
},
109+
scheduleValue:{
110+
fontSize:16,
111+
marginTop:theme.spacing(0.25),
112+
display:"inline-block",
113+
color:theme.palette.text.secondary,
114+
},
115+
scheduleAction:{
116+
cursor:"pointer",
117+
},
118+
}))

‎site/src/components/WorkspaceStats/WorkspaceStats.tsx

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,13 @@
11
importLinkfrom"@material-ui/core/Link"
22
import{makeStyles,useTheme}from"@material-ui/core/styles"
3-
importcronstruefrom"cronstrue"
43
importdayjsfrom"dayjs"
5-
importdurationfrom"dayjs/plugin/duration"
6-
importrelativeTimefrom"dayjs/plugin/relativeTime"
74
importReactfrom"react"
85
import{LinkasRouterLink}from"react-router-dom"
96
import{Workspace}from"../../api/typesGenerated"
107
import{CardRadius,MONOSPACE_FONT_FAMILY}from"../../theme/constants"
118
import{combineClasses}from"../../util/combineClasses"
12-
import{extractTimezone,stripTimezone}from"../../util/schedule"
139
import{getDisplayStatus}from"../../util/workspace"
1410

15-
dayjs.extend(duration)
16-
dayjs.extend(relativeTime)
17-
18-
constautoStartLabel=(schedule:string):string=>{
19-
constprefix="Start"
20-
21-
if(schedule){
22-
return`${prefix} (${extractTimezone(schedule)})`
23-
}else{
24-
returnprefix
25-
}
26-
}
27-
28-
constautoStartDisplay=(schedule:string):string=>{
29-
if(schedule){
30-
returncronstrue.toString(stripTimezone(schedule),{throwExceptionOnParseError:false})
31-
}
32-
return"Manual"
33-
}
34-
35-
constautoStopDisplay=(workspace:Workspace):string=>{
36-
constlatest=workspace.latest_build
37-
38-
if(!workspace.ttl||workspace.ttl<1){
39-
return"Manual"
40-
}
41-
42-
if(latest.transition==="start"){
43-
constnow=dayjs()
44-
constupdatedAt=dayjs(latest.updated_at)
45-
constdeadline=updatedAt.add(workspace.ttl/1_000_000,"ms")
46-
if(now.isAfter(deadline)){
47-
return"workspace is shutting down now"
48-
}
49-
returnnow.to(deadline)
50-
}
51-
52-
constduration=dayjs.duration(workspace.ttl/1_000_000,"milliseconds")
53-
return`${duration.humanize()} after start`
54-
}
55-
5611
exportinterfaceWorkspaceStatsProps{
5712
workspace:Workspace
5813
}
@@ -99,16 +54,6 @@ export const WorkspaceStats: React.FC<WorkspaceStatsProps> = ({ workspace }) =>
9954
<spanclassName={styles.statsLabel}>Last Built</span>
10055
<spanclassName={styles.statsValue}>{dayjs().to(dayjs(workspace.latest_build.created_at))}</span>
10156
</div>
102-
<divclassName={styles.statsDivider}/>
103-
<divclassName={styles.statItem}>
104-
<spanclassName={styles.statsLabel}>{autoStartLabel(workspace.autostart_schedule)}</span>
105-
<spanclassName={styles.statsValue}>{autoStartDisplay(workspace.autostart_schedule)}</span>
106-
</div>
107-
<divclassName={styles.statsDivider}/>
108-
<divclassName={styles.statItem}>
109-
<spanclassName={styles.statsLabel}>Shutdown</span>
110-
<spanclassName={styles.statsValue}>{autoStopDisplay(workspace)}</span>
111-
</div>
11257
</div>
11358
)
11459
}

0 commit comments

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