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

Commit0fb608c

Browse files
BrunoQuaresmaSasSwart
authored andcommitted
refactor: update provisioners page to match the new design (#17232)
**Demo**https://github.com/user-attachments/assets/b880326c-7e94-4778-8166-91af7699901eCloses#17221
1 parentefd9b93 commit0fb608c

File tree

22 files changed

+853
-463
lines changed

22 files changed

+853
-463
lines changed

‎site/src/components/StatusIndicator/StatusIndicator.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{typeVariantProps,cva}from"class-variance-authority";
2-
import{typeFC,createContext,useContext}from"react";
2+
import{typeFC,createContext,forwardRef,useContext}from"react";
33
import{cn}from"utils/cn";
44

55
conststatusIndicatorVariants=cva(
@@ -33,21 +33,19 @@ export interface StatusIndicatorProps
3333
extendsReact.HTMLAttributes<HTMLDivElement>,
3434
StatusIndicatorContextValue{}
3535

36-
exportconstStatusIndicator:FC<StatusIndicatorProps>=({
37-
size,
38-
variant,
39-
className,
40-
...props
41-
})=>{
42-
return(
43-
<StatusIndicatorContext.Providervalue={{ size, variant}}>
44-
<div
45-
className={cn(statusIndicatorVariants({ variant, size}),className)}
46-
{...props}
47-
/>
48-
</StatusIndicatorContext.Provider>
49-
);
50-
};
36+
exportconstStatusIndicator=forwardRef<HTMLDivElement,StatusIndicatorProps>(
37+
({ size, variant, className, ...props},ref)=>{
38+
return(
39+
<StatusIndicatorContext.Providervalue={{ size, variant}}>
40+
<div
41+
ref={ref}
42+
className={cn(statusIndicatorVariants({ variant, size}),className)}
43+
{...props}
44+
/>
45+
</StatusIndicatorContext.Provider>
46+
);
47+
},
48+
);
5149

5250
constdotVariants=cva("rounded-full inline-block border-4 border-solid",{
5351
variants:{
Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MockProvisionerJob } from "testHelpers/entities";
33
import{JobStatusIndicator}from"./JobStatusIndicator";
44

55
constmeta:Meta<typeofJobStatusIndicator>={
6-
title:"pages/OrganizationProvisionerJobsPage/JobStatusIndicator",
6+
title:"modules/provisioners/JobStatusIndicator",
77
component:JobStatusIndicator,
88
};
99

@@ -12,65 +12,43 @@ type Story = StoryObj<typeof JobStatusIndicator>;
1212

1313
exportconstSucceeded:Story={
1414
args:{
15-
job:{
16-
...MockProvisionerJob,
17-
status:"succeeded",
18-
},
15+
status:"succeeded",
1916
},
2017
};
2118

2219
exportconstFailed:Story={
2320
args:{
24-
job:{
25-
...MockProvisionerJob,
26-
status:"failed",
27-
},
21+
status:"failed",
2822
},
2923
};
3024

3125
exportconstPending:Story={
3226
args:{
33-
job:{
34-
...MockProvisionerJob,
35-
status:"pending",
36-
queue_position:1,
37-
queue_size:1,
38-
},
27+
status:"pending",
28+
queue:{size:1,position:1},
3929
},
4030
};
4131

4232
exportconstRunning:Story={
4333
args:{
44-
job:{
45-
...MockProvisionerJob,
46-
status:"running",
47-
},
34+
status:"running",
4835
},
4936
};
5037

5138
exportconstCanceling:Story={
5239
args:{
53-
job:{
54-
...MockProvisionerJob,
55-
status:"canceling",
56-
},
40+
status:"canceling",
5741
},
5842
};
5943

6044
exportconstCanceled:Story={
6145
args:{
62-
job:{
63-
...MockProvisionerJob,
64-
status:"canceled",
65-
},
46+
status:"canceled",
6647
},
6748
};
6849

6950
exportconstUnknown:Story={
7051
args:{
71-
job:{
72-
...MockProvisionerJob,
73-
status:"unknown",
74-
},
52+
status:"unknown",
7553
},
7654
};
Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importtype{ProvisionerJob,ProvisionerJobStatus}from"api/typesGenerated";
1+
importtype{ProvisionerJobStatus}from"api/typesGenerated";
22
import{
33
StatusIndicator,
44
StatusIndicatorDot,
@@ -21,18 +21,22 @@ const variantByStatus: Record<
2121
};
2222

2323
typeJobStatusIndicatorProps={
24-
job:ProvisionerJob;
24+
status:ProvisionerJobStatus;
25+
queue?:{size:number;position:number};
2526
};
2627

27-
exportconstJobStatusIndicator:FC<JobStatusIndicatorProps>=({ job})=>{
28+
exportconstJobStatusIndicator:FC<JobStatusIndicatorProps>=({
29+
status,
30+
queue,
31+
})=>{
2832
return(
29-
<StatusIndicatorsize="sm"variant={variantByStatus[job.status]}>
33+
<StatusIndicatorsize="sm"variant={variantByStatus[status]}>
3034
<StatusIndicatorDot/>
31-
<spanclassName="[&:first-letter]:uppercase">{job.status}</span>
32-
{job.status==="failed"&&(
35+
<spanclassName="[&:first-letter]:uppercase">{status}</span>
36+
{status==="failed"&&(
3337
<TriangleAlertIconclassName="size-icon-xs p-[1px]"/>
3438
)}
35-
{job.status==="pending"&&`(${job.queue_position}/${job.queue_size})`}
39+
{status==="pending"&&queue&&`(${queue.position}/${queue.size})`}
3640
</StatusIndicator>
3741
);
3842
};
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{
3+
ProvisionerTag,
4+
ProvisionerTags,
5+
ProvisionerTruncateTags,
6+
}from"./ProvisionerTags";
7+
8+
constmeta:Meta={
9+
title:"modules/provisioners/ProvisionerTags",
10+
};
11+
12+
exportdefaultmeta;
13+
typeStory=StoryObj;
14+
15+
exportconstTag:Story={
16+
render:()=>{
17+
return<ProvisionerTaglabel="cluster"value="dogfood-v2"/>;
18+
},
19+
};
20+
21+
exportconstTags:Story={
22+
render:()=>{
23+
return(
24+
<ProvisionerTags>
25+
<ProvisionerTaglabel="cluster"value="dogfood-v2"/>
26+
<ProvisionerTaglabel="env"value="gke"/>
27+
<ProvisionerTaglabel="scope"value="organization"/>
28+
</ProvisionerTags>
29+
);
30+
},
31+
};
32+
33+
exportconstTruncateTags:Story={
34+
render:()=>{
35+
return(
36+
<ProvisionerTruncateTags
37+
tags={{
38+
cluster:"dogfood-v2",
39+
env:"gke",
40+
scope:"organization",
41+
}}
42+
/>
43+
);
44+
},
45+
};
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Badge } from "components/Badge/Badge";
22
importtype{FC,HTMLProps}from"react";
33
import{cn}from"utils/cn";
44

5-
exportconstTags:FC<HTMLProps<HTMLDivElement>>=({
5+
exportconstProvisionerTags:FC<HTMLProps<HTMLDivElement>>=({
66
className,
77
...props
88
})=>{
@@ -14,12 +14,12 @@ export const Tags: FC<HTMLProps<HTMLDivElement>> = ({
1414
);
1515
};
1616

17-
typeTagProps={
17+
typeProvisionerTagProps={
1818
label:string;
1919
value?:string;
2020
};
2121

22-
exportconstTag:FC<TagProps>=({ label, value})=>{
22+
exportconstProvisionerTag:FC<ProvisionerTagProps>=({ label, value})=>{
2323
return(
2424
<Badgesize="sm"className="whitespace-nowrap">
2525
[{label}
@@ -28,11 +28,11 @@ export const Tag: FC<TagProps> = ({ label, value }) => {
2828
);
2929
};
3030

31-
typeTagsProps={
31+
typeProvisionerTagsProps={
3232
tags:Record<string,string>;
3333
};
3434

35-
exportconstTruncateTags:FC<TagsProps>=({ tags})=>{
35+
exportconstProvisionerTruncateTags:FC<ProvisionerTagsProps>=({ tags})=>{
3636
constkeys=Object.keys(tags);
3737

3838
if(keys.length===0){
@@ -44,9 +44,9 @@ export const TruncateTags: FC<TagsProps> = ({ tags }) => {
4444
constremainderCount=keys.length-1;
4545

4646
return(
47-
<Tags>
48-
<Taglabel={firstKey}value={firstValue}/>
47+
<ProvisionerTags>
48+
<ProvisionerTaglabel={firstKey}value={firstValue}/>
4949
{remainderCount>0&&<Badgesize="sm">+{remainderCount}</Badge>}
50-
</Tags>
50+
</ProvisionerTags>
5151
);
5252
};

‎site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
importtype{ProvisionerJob}from"api/typesGenerated";
22
import{Avatar}from"components/Avatar/Avatar";
33
import{Badge}from"components/Badge/Badge";
4+
import{Button}from"components/Button/Button";
45
import{TableCell,TableRow}from"components/Table/Table";
56
import{
67
ChevronDownIcon,
78
ChevronRightIcon,
89
TriangleAlertIcon,
910
}from"lucide-react";
11+
import{JobStatusIndicator}from"modules/provisioners/JobStatusIndicator";
12+
import{
13+
ProvisionerTag,
14+
ProvisionerTags,
15+
ProvisionerTruncateTags,
16+
}from"modules/provisioners/ProvisionerTags";
1017
import{typeFC,useState}from"react";
1118
import{cn}from"utils/cn";
1219
import{relativeTime}from"utils/time";
1320
import{CancelJobButton}from"./CancelJobButton";
14-
import{JobStatusIndicator}from"./JobStatusIndicator";
15-
import{Tag,Tags,TruncateTags}from"./Tags";
1621

1722
typeJobRowProps={
1823
job:ProvisionerJob;
@@ -21,32 +26,32 @@ type JobRowProps = {
2126
exportconstJobRow:FC<JobRowProps>=({ job})=>{
2227
constmetadata=job.metadata;
2328
const[isOpen,setIsOpen]=useState(false);
29+
constqueue={
30+
size:job.queue_size,
31+
position:job.queue_position,
32+
};
2433

2534
return(
2635
<>
2736
<TableRowkey={job.id}>
2837
<TableCell>
29-
<button
38+
<Button
39+
variant="subtle"
40+
size="sm"
3041
className={cn([
31-
"flex items-center gap-1 p-0 bg-transparent border-0 text-inherit text-xs cursor-pointer",
32-
"transition-colors hover:text-content-primary font-medium whitespace-nowrap",
3342
isOpen&&"text-content-primary",
43+
"p-0 h-auto min-w-0 align-middle",
3444
])}
35-
type="button"
3645
onClick={()=>{
3746
setIsOpen((v)=>!v);
3847
}}
3948
>
40-
{isOpen ?(
41-
<ChevronDownIconclassName="size-icon-sm p-0.5"/>
42-
) :(
43-
<ChevronRightIconclassName="size-icon-sm p-0.5"/>
44-
)}
49+
{isOpen ?<ChevronDownIcon/> :<ChevronRightIcon/>}
4550
<spanclassName="sr-only">({isOpen ?"Hide" :"Show more"})</span>
46-
<spanclassName="[&:first-letter]:uppercase">
51+
<spanclassName="blockfirst-letter:uppercase">
4752
{relativeTime(newDate(job.created_at))}
4853
</span>
49-
</button>
54+
</Button>
5055
</TableCell>
5156
<TableCell>
5257
<Badgesize="sm">{job.type}</Badge>
@@ -68,10 +73,10 @@ export const JobRow: FC<JobRowProps> = ({ job }) => {
6873
)}
6974
</TableCell>
7075
<TableCell>
71-
<TruncateTagstags={job.tags}/>
76+
<ProvisionerTruncateTagstags={job.tags}/>
7277
</TableCell>
7378
<TableCell>
74-
<JobStatusIndicatorjob={job}/>
79+
<JobStatusIndicatorstatus={job.status}queue={queue}/>
7580
</TableCell>
7681
<TableCellclassName="text-right">
7782
<CancelJobButtonjob={job}/>
@@ -125,11 +130,11 @@ export const JobRow: FC<JobRowProps> = ({ job }) => {
125130

126131
<dt>Tags:</dt>
127132
<dd>
128-
<Tags>
133+
<ProvisionerTags>
129134
{Object.entries(job.tags).map(([key,value])=>(
130-
<Tagkey={key}label={key}value={value}/>
135+
<ProvisionerTagkey={key}label={key}value={value}/>
131136
))}
132-
</Tags>
137+
</ProvisionerTags>
133138
</dd>
134139
</dl>
135140
</TableCell>

0 commit comments

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