Skip to content

Commit 9007c7d

Browse files
kaankabalakkaankabalak
authored
Consolidate Remote Buckets and Replication modals (#317)
* Consolidate Remote Buckets and Replication modals This commit consolidates Remote Buckets and Replication modals into a single modal in the Add Replication Rule modal located in the Buckets section Fixes #301 * Remove Remote Buckets section * Properly align tabs and button on Buckets page
1 parent 850fd3e commit 9007c7d

File tree

9 files changed

+190
-818
lines changed

9 files changed

+190
-818
lines changed

‎portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx

Lines changed: 133 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
2525
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
2626
import { Button, LinearProgress } from "@material-ui/core";
2727
import api from "../../../../common/api";
28-
import {
29-
IRemoteBucket,
30-
IRemoteBucketsResponse,
31-
} from "../../RemoteBuckets/types";
32-
import RemoteBucketsList from "../../RemoteBuckets/RemoteBuckets";
28+
import { IRemoteBucket } from "../types";
3329

3430
interface IReplicationModal {
3531
open: boolean;
@@ -64,66 +60,68 @@ const AddReplicationModal = ({
6460
bucketName,
6561
}: IReplicationModal) => {
6662
const [addError, setAddError] = useState("");
67-
const [loadingForm, setLoadingForm] = useState(true);
6863
const [addLoading, setAddLoading] = useState(false);
69-
const [remoteURL, setRemoteURL] = useState("");
70-
const [source, setSource] = useState("");
71-
const [target, setTarget] = useState("");
72-
const [ARN, setARN] = useState("");
73-
const [arnValues, setARNValues] = useState([]);
74-
75-
useEffect(() => {
76-
if (addLoading) {
77-
addRecord();
78-
}
79-
}, [addLoading]);
80-
81-
useEffect(() => {
82-
if (loadingForm) {
83-
getARNValues();
84-
}
85-
});
64+
const [accessKey, setAccessKey] = useState("");
65+
const [secretKey, setSecretKey] = useState("");
66+
const [targetURL, setTargetURL] = useState("");
67+
const [targetBucket, setTargetBucket] = useState("");
68+
const [region, setRegion] = useState("");
8669

8770
const addRecord = () => {
88-
const replicationInfo = {
89-
destination_bucket: target,
90-
arn: ARN,
71+
const remoteBucketInfo = {
72+
accessKey: accessKey,
73+
secretKey: secretKey,
74+
sourceBucket: bucketName,
75+
targetURL: targetURL,
76+
targetBucket: targetBucket,
77+
region: region,
9178
};
9279

9380
api
94-
.invoke(
95-
"POST",
96-
`/api/v1/buckets/${bucketName}/replication`,
97-
replicationInfo
98-
)
99-
.then((res) => {
100-
setAddLoading(false);
101-
setAddError("");
102-
closeModalAndRefresh();
81+
.invoke("POST", "/api/v1/remote-buckets", remoteBucketInfo)
82+
.then(() => {
83+
api
84+
.invoke("GET", "/api/v1/remote-buckets")
85+
.then((res: any) => {
86+
const remoteBuckets = get(res, "buckets", []);
87+
const remoteBucket = remoteBuckets.find(
88+
(itemRemote: IRemoteBucket) => {
89+
return itemRemote.sourceBucket === bucketName;
90+
}
91+
);
92+
if (remoteBucket && remoteBucket.remoteARN) {
93+
const remoteARN = remoteBucket.remoteARN;
94+
const replicationInfo = {
95+
destination_bucket: targetBucket,
96+
arn: remoteARN,
97+
};
98+
api
99+
.invoke(
100+
"POST",
101+
`/api/v1/buckets/${bucketName}/replication`,
102+
replicationInfo
103+
)
104+
.then(() => {
105+
setAddLoading(false);
106+
setAddError("");
107+
closeModalAndRefresh();
108+
})
109+
.catch((err) => {
110+
setAddLoading(false);
111+
setAddError(err);
112+
});
113+
}
114+
})
115+
.catch((err) => {
116+
setAddError(err);
117+
});
103118
})
104119
.catch((err) => {
105120
setAddLoading(false);
106121
setAddError(err);
107122
});
108123
};
109124

110-
const getARNValues = () => {
111-
api
112-
.invoke("GET", "/api/v1/remote-buckets")
113-
.then((res: any) => {
114-
const remoteBuckets = get(res, "buckets", []);
115-
116-
const remoteARNS = remoteBuckets.map((itemRemote: IRemoteBucket) => {
117-
return { label: itemRemote.remoteARN, value: itemRemote.remoteARN };
118-
});
119-
setLoadingForm(false);
120-
setARNValues(remoteARNS);
121-
})
122-
.catch((err) => {
123-
setLoadingForm(false);
124-
});
125-
};
126-
127125
return (
128126
<ModalWrapper
129127
modalOpen={open}
@@ -139,71 +137,96 @@ const AddReplicationModal = ({
139137
onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
140138
e.preventDefault();
141139
setAddLoading(true);
140+
addRecord();
142141
}}
143142
>
144-
{loadingForm && (
145-
<Grid container>
146-
<Grid item xs={12}>
147-
<LinearProgress />
148-
</Grid>
149-
</Grid>
150-
)}
151-
{!loadingForm && (
152-
<Grid container>
153-
<Grid item xs={12} className={classes.formScrollable}>
154-
{addError !== "" && (
155-
<Grid item xs={12}>
156-
<Typography
157-
component="p"
158-
variant="body1"
159-
className={classes.errorBlock}
160-
>
161-
{addError}
162-
</Typography>
163-
</Grid>
164-
)}
165-
143+
<Grid container>
144+
<Grid item xs={12} className={classes.formScrollable}>
145+
{addError !== "" && (
166146
<Grid item xs={12}>
167-
<InputBoxWrapper
168-
id="target"
169-
name="target"
170-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
171-
setTarget(e.target.value);
172-
}}
173-
label="Destination Bucket"
174-
value={target}
175-
/>
176-
</Grid>
177-
<Grid item xs={12}>
178-
<SelectWrapper
179-
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
180-
setARN(e.target.value as string);
181-
}}
182-
id="arn"
183-
name="arn"
184-
label={"ARN"}
185-
value={ARN}
186-
options={arnValues}
187-
/>
147+
<Typography
148+
component="p"
149+
variant="body1"
150+
className={classes.errorBlock}
151+
>
152+
{addError}
153+
</Typography>
188154
</Grid>
155+
)}
156+
157+
<Grid item xs={12}>
158+
<InputBoxWrapper
159+
id="target"
160+
name="target"
161+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
162+
setAccessKey(e.target.value);
163+
}}
164+
label="Access Key"
165+
value={accessKey}
166+
/>
189167
</Grid>
190-
<Grid item xs={12} className={classes.buttonContainer}>
191-
<Button
192-
type="submit"
193-
variant="contained"
194-
color="primary"
195-
disabled={addLoading}
196-
>
197-
Save
198-
</Button>
168+
<Grid item xs={12}>
169+
<InputBoxWrapper
170+
id="target"
171+
name="target"
172+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
173+
setSecretKey(e.target.value);
174+
}}
175+
label="Secret Key"
176+
value={secretKey}
177+
/>
178+
</Grid>
179+
<Grid item xs={12}>
180+
<InputBoxWrapper
181+
id="target"
182+
name="target"
183+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
184+
setTargetURL(e.target.value);
185+
}}
186+
placeholder="https://play.min.io:9000"
187+
label="Target URL"
188+
value={targetURL}
189+
/>
190+
</Grid>
191+
<Grid item xs={12}>
192+
<InputBoxWrapper
193+
id="target"
194+
name="target"
195+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
196+
setTargetBucket(e.target.value);
197+
}}
198+
label="Target Bucket"
199+
value={targetBucket}
200+
/>
201+
</Grid>
202+
<Grid item xs={12}>
203+
<InputBoxWrapper
204+
id="target"
205+
name="target"
206+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
207+
setRegion(e.target.value);
208+
}}
209+
label="Region"
210+
value={region}
211+
/>
199212
</Grid>
200-
{addLoading && (
201-
<Grid item xs={12}>
202-
<LinearProgress />
203-
</Grid>
204-
)}
205213
</Grid>
206-
)}
214+
<Grid item xs={12} className={classes.buttonContainer}>
215+
<Button
216+
type="submit"
217+
variant="contained"
218+
color="primary"
219+
disabled={addLoading}
220+
>
221+
Save
222+
</Button>
223+
</Grid>
224+
{addLoading && (
225+
<Grid item xs={12}>
226+
<LinearProgress />
227+
</Grid>
228+
)}
229+
</Grid>
207230
</form>
208231
</ModalWrapper>
209232
);

‎portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -515,51 +515,53 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
515515
<Grid item xs={12}>
516516
<br />
517517
</Grid>
518-
<Grid item xs={6}>
519-
<Tabs
520-
value={curTab}
521-
onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
522-
this.setState({ curTab: newValue });
523-
}}
524-
indicatorColor="primary"
525-
textColor="primary"
526-
aria-label="cluster-tabs"
527-
>
528-
<Tab label="Events" {...a11yProps(0)} />
529-
<Tab label="Replication" {...a11yProps(1)} />
530-
</Tabs>
531-
</Grid>
532-
<Grid item xs={6} className={classes.actionsTray}>
533-
{curTab === 0 && (
534-
<Button
535-
variant="contained"
536-
color="primary"
537-
startIcon={<CreateIcon />}
538-
size="medium"
539-
onClick={() => {
540-
this.setState({
541-
addScreenOpen: true,
542-
});
543-
}}
544-
>
545-
Subscribe to Event
546-
</Button>
547-
)}
548-
{curTab === 1 && (
549-
<Button
550-
variant="contained"
551-
color="primary"
552-
startIcon={<CreateIcon />}
553-
size="medium"
554-
onClick={() => {
555-
this.setState({
556-
openSetReplication: true,
557-
});
518+
<Grid container item xs={12}>
519+
<Grid item xs={6}>
520+
<Tabs
521+
value={curTab}
522+
onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
523+
this.setState({ curTab: newValue });
558524
}}
525+
indicatorColor="primary"
526+
textColor="primary"
527+
aria-label="cluster-tabs"
559528
>
560-
Add Replication Rule
561-
</Button>
562-
)}
529+
<Tab label="Events" {...a11yProps(0)} />
530+
<Tab label="Replication" {...a11yProps(1)} />
531+
</Tabs>
532+
</Grid>
533+
<Grid item xs={6} className={classes.actionsTray}>
534+
{curTab === 0 && (
535+
<Button
536+
variant="contained"
537+
color="primary"
538+
startIcon={<CreateIcon />}
539+
size="medium"
540+
onClick={() => {
541+
this.setState({
542+
addScreenOpen: true,
543+
});
544+
}}
545+
>
546+
Subscribe to Event
547+
</Button>
548+
)}
549+
{curTab === 1 && (
550+
<Button
551+
variant="contained"
552+
color="primary"
553+
startIcon={<CreateIcon />}
554+
size="medium"
555+
onClick={() => {
556+
this.setState({
557+
openSetReplication: true,
558+
});
559+
}}
560+
>
561+
Add Replication Rule
562+
</Button>
563+
)}
564+
</Grid>
563565
</Grid>
564566
<Grid item xs={12}>
565567
<TabPanel index={0} value={curTab}>

‎portal-ui/src/screens/Console/Buckets/types.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,15 @@ export interface MakeBucketRequest {
7979
versioning: boolean;
8080
quota?: QuotaRequest;
8181
}
82+
83+
export interface IRemoteBucket {
84+
name: string;
85+
accessKey: string;
86+
secretKey: string;
87+
sourceBucket: string;
88+
targetURL: string;
89+
targetBucket: string;
90+
remoteARN: string;
91+
status: string;
92+
service: string;
93+
}

0 commit comments

Comments
 (0)