Skip to content

Commit fc9319e

Browse files
bexsoftbexsoft
authored
Added identifier field to Event destinations page & migrated to mds (#2816)
1 parent 58b64a5 commit fc9319e

File tree

13 files changed

+539
-461
lines changed

13 files changed

+539
-461
lines changed

‎portal-ui/src/screens/Console/Account/NotificationEndpointTypeSelectorHelpBox.tsx

Lines changed: 13 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -14,84 +14,23 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
import React from "react";
17-
import { Box } from "@mui/material";
18-
import { HelpIconFilled, LambdaNotificationsIcon } from "mds";
1917

20-
const FeatureItem = ({
21-
icon,
22-
description,
23-
}: {
24-
icon: any;
25-
description: string;
26-
}) => {
27-
return (
28-
<Box
29-
sx={{
30-
display: "flex",
31-
"& .min-icon": {
32-
marginRight: "10px",
33-
height: "23px",
34-
width: "23px",
35-
marginBottom: "10px",
36-
},
37-
}}
38-
>
39-
{icon}{" "}
40-
<div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
41-
{description}
42-
</div>
43-
</Box>
44-
);
45-
};
18+
import { HelpBox, LambdaNotificationsIcon, Box } from "mds";
19+
4620
const NotificationEndpointTypeSelectorHelpBox = () => {
4721
return (
48-
<Box
49-
sx={{
50-
flex: 1,
51-
border: "1px solid #eaeaea",
52-
borderRadius: "2px",
53-
display: "flex",
54-
flexFlow: "column",
55-
padding: "20px",
56-
marginTop: {
57-
xs: "0px",
58-
},
59-
}}
60-
>
61-
<Box
62-
sx={{
63-
fontSize: "16px",
64-
fontWeight: 600,
65-
display: "flex",
66-
alignItems: "center",
67-
marginBottom: "16px",
68-
paddingBottom: "20px",
69-
70-
"& .min-icon": {
71-
height: "21px",
72-
width: "21px",
73-
marginRight: "15px",
74-
},
75-
}}
76-
>
77-
<HelpIconFilled />
78-
<div>Learn more about Event Destinations</div>
79-
</Box>
80-
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
81-
<Box sx={{ paddingBottom: "20px" }}>
82-
<FeatureItem
83-
icon={<LambdaNotificationsIcon />}
84-
description={`What are Event Destinations?`}
85-
/>
86-
<Box sx={{ paddingTop: "20px" }}>
87-
MinIO bucket notifications allow administrators to send
88-
notifications to supported external services on certain object or
89-
bucket events. MinIO supports bucket and object-level S3 events
90-
similar to the Amazon S3 Event Notifications.
91-
</Box>
22+
<HelpBox
23+
iconComponent={<LambdaNotificationsIcon />}
24+
title={"What are Event Destinations?"}
25+
help={
26+
<Box sx={{ paddingTop: "20px" }}>
27+
MinIO bucket notifications allow administrators to send notifications
28+
to supported external services on certain object or bucket events.
29+
MinIO supports bucket and object-level S3 events similar to the Amazon
30+
S3 Event Notifications.
9231
</Box>
93-
</Box>
94-
</Box>
32+
}
33+
/>
9534
);
9635
};
9736

‎portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ export const typesSelection = {
400400
height: "80px",
401401
},
402402
lambdaNotif: {
403-
background: "#ffffff",
403+
background: "#ffffff50",
404404
border: "#E5E5E5 1px solid",
405405
borderRadius: 5,
406406
width: 250,

‎portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx

Lines changed: 54 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,18 @@
1717
import React, { Fragment, useCallback, useEffect, useState } from "react";
1818

1919
import get from "lodash/get";
20-
import Grid from "@mui/material/Grid";
2120
import { Theme } from "@mui/material/styles";
2221
import createStyles from "@mui/styles/createStyles";
2322
import withStyles from "@mui/styles/withStyles";
24-
import { BackLink, Button, PageLayout } from "mds";
23+
import { BackLink, Button, FormLayout, Grid, InputBox, PageLayout } from "mds";
2524

2625
import api from "../../../common/api";
2726
import {
27+
destinationList,
2828
notificationEndpointsFields,
2929
notifyMysql,
3030
notifyPostgres,
3131
removeEmptyFields,
32-
destinationList,
3332
} from "./utils";
3433
import {
3534
modalBasic,
@@ -49,6 +48,8 @@ import {
4948
import { useNavigate, useParams } from "react-router-dom";
5049
import { useAppDispatch } from "../../../store";
5150
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
51+
import TargetTitle from "./TargetTitle";
52+
import { setDestinationLoading } from "./destinationsSlice";
5253

5354
const ConfMySql = withSuspense(
5455
React.lazy(() => import("./CustomForms/ConfMySql"))
@@ -66,43 +67,6 @@ const styles = (theme: Theme) =>
6667
createStyles({
6768
...modalBasic,
6869
...settingsCommon,
69-
lambdaNotif: {
70-
background:
71-
"linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
72-
border: "#E5E5E5 1px solid",
73-
borderRadius: 5,
74-
height: 80,
75-
display: "flex",
76-
alignItems: "center",
77-
justifyContent: "start",
78-
marginBottom: 16,
79-
cursor: "pointer",
80-
padding: 0,
81-
overflow: "hidden",
82-
},
83-
lambdaNotifIcon: {
84-
backgroundColor: "#FEFEFE",
85-
display: "flex",
86-
alignItems: "center",
87-
justifyContent: "center",
88-
width: 80,
89-
height: 80,
90-
91-
"& img": {
92-
maxWidth: 46,
93-
maxHeight: 46,
94-
},
95-
},
96-
lambdaNotifTitle: {
97-
color: "#07193E",
98-
fontSize: 16,
99-
fontFamily: "Inter,sans-serif",
100-
paddingLeft: 18,
101-
},
102-
formBox: {
103-
border: "1px solid #EAEAEA",
104-
padding: 15,
105-
},
10670
});
10771

10872
interface IAddNotificationEndpointProps {
@@ -120,28 +84,38 @@ const AddEventDestination = ({
12084

12185
//Local States
12286
const [valuesArr, setValueArr] = useState<IElementValue[]>([]);
87+
const [identifier, setIdentifier] = useState<string>("");
12388
const [saving, setSaving] = useState<boolean>(false);
12489
const service = params.service || "";
125-
//Effects
12690

91+
//Effects
12792
useEffect(() => {
12893
if (saving) {
12994
const payload = {
13095
key_values: removeEmptyFields(valuesArr),
13196
};
13297
api
133-
.invoke("PUT", `/api/v1/configs/${service}`, payload)
98+
.invoke("PUT", `/api/v1/configs/${service}:${identifier}`, payload)
13499
.then(() => {
135100
setSaving(false);
136101
dispatch(setServerNeedsRestart(true));
102+
dispatch(setDestinationLoading(true));
137103
navigate(IAM_PAGES.EVENT_DESTINATIONS);
138104
})
139105
.catch((err: ErrorResponseHandler) => {
140106
setSaving(false);
141107
dispatch(setErrorSnackMessage(err));
142108
});
143109
}
144-
}, [saving, service, valuesArr, saveAndRefresh, dispatch, navigate]);
110+
}, [
111+
saving,
112+
service,
113+
valuesArr,
114+
saveAndRefresh,
115+
dispatch,
116+
navigate,
117+
identifier,
118+
]);
145119

146120
//Fetch Actions
147121
const submitForm = (event: React.FormEvent) => {
@@ -199,41 +173,54 @@ const AddEventDestination = ({
199173
<Fragment>
200174
<Grid item xs={12}>
201175
{targetElement && (
202-
<div
203-
key={`icon-${targetElement.targetTitle}`}
204-
className={classes.lambdaNotif}
205-
>
206-
<div className={classes.lambdaNotifIcon}>
207-
<img
208-
src={targetElement.logo}
209-
className={classes.logoButton}
210-
alt={targetElement.targetTitle}
211-
/>
212-
</div>
213-
214-
<div className={classes.lambdaNotifTitle}>
215-
<b>
216-
{targetElement ? targetElement.targetTitle : ""} Event
217-
Destination
218-
</b>
219-
</div>
220-
</div>
176+
<TargetTitle
177+
logoSrc={targetElement.logo}
178+
title={`${
179+
targetElement ? targetElement.targetTitle : ""
180+
} Event
181+
Destination`}
182+
/>
221183
)}
222184
</Grid>
223-
<div className={classes.formBox}>
224-
<Grid item xs={12} className={classes.configForm}>
185+
<FormLayout>
186+
<Grid
187+
item
188+
xs={12}
189+
className={classes.formFieldRow}
190+
sx={{ marginBottom: "12px" }}
191+
>
192+
<InputBox
193+
id={"identifier-field"}
194+
name={"identifier-field"}
195+
label={"Identifier"}
196+
value={identifier}
197+
onChange={(e) => setIdentifier(e.target.value)}
198+
tooltip={"Unique descriptive string for this destination"}
199+
placeholder="Enter Destination Identifier"
200+
required
201+
/>
202+
</Grid>
203+
<Grid item xs={12}>
225204
{srvComponent}
226205
</Grid>
227-
<Grid item xs={12} className={classes.settingsButtonContainer}>
206+
<Grid
207+
item
208+
xs={12}
209+
sx={{
210+
display: "flex",
211+
justifyContent: "flex-end",
212+
marginTop: 15,
213+
}}
214+
>
228215
<Button
229216
id={"save-notification-target"}
230217
type="submit"
231218
variant="callAction"
232-
disabled={saving}
219+
disabled={saving || identifier.trim() === ""}
233220
label={"Save Event Destination"}
234221
/>
235222
</Grid>
236-
</div>
223+
</FormLayout>
237224
</Fragment>
238225
)}
239226
</form>

‎portal-ui/src/screens/Console/EventDestinations/ConfTargetGeneric.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,10 @@ import {
2424
formFieldStyles,
2525
modalBasic,
2626
} from "../Common/FormComponents/common/styleLibrary";
27-
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
2827
import CSVMultiSelector from "../Common/FormComponents/CSVMultiSelector/CSVMultiSelector";
2928
import CommentBoxWrapper from "../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
30-
import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
3129
import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
32-
import { ConsoleIcon, Tooltip } from "mds";
30+
import { ConsoleIcon, InputBox, Switch, Tooltip } from "mds";
3331

3432
interface IConfGenericProps {
3533
onChange: (newValue: IElementValue[]) => void;
@@ -144,7 +142,7 @@ const ConfTargetGeneric = ({
144142
const value = holderItem ? holderItem.value : "off";
145143

146144
return (
147-
<FormSwitchWrapper
145+
<Switch
148146
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
149147
const value = e.target.checked ? "on" : "off";
150148
setValueElement(field.name, value, item);
@@ -195,7 +193,7 @@ const ConfTargetGeneric = ({
195193
);
196194
default:
197195
return (
198-
<InputBoxWrapper
196+
<InputBox
199197
id={field.name}
200198
name={field.name}
201199
label={field.label}
@@ -204,7 +202,6 @@ const ConfTargetGeneric = ({
204202
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
205203
setValueElement(field.name, e.target.value, item)
206204
}
207-
multiline={!!field.multiline}
208205
placeholder={field.placeholder}
209206
/>
210207
);

‎portal-ui/src/screens/Console/EventDestinations/ConfirmDeleteDestinationModal.tsx

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2022 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
117
import React from "react";
218
import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
319
import { ConfirmModalIcon } from "mds";
4-
import { DialogContentText } from "@mui/material";
520

621
const ConfirmDeleteDestinationModal = ({
722
onConfirm,
@@ -25,11 +40,9 @@ const ConfirmDeleteDestinationModal = ({
2540
onClose={onClose}
2641
confirmationContent={
2742
<React.Fragment>
28-
<DialogContentText>
29-
Are you sure you want to delete the event destination ?
30-
<br />
31-
<b>{serviceName}</b> which is <b>{status}</b>
32-
</DialogContentText>
43+
Are you sure you want to delete the event destination ?
44+
<br />
45+
<b>{serviceName}</b> which is <b>{status}</b>
3346
</React.Fragment>
3447
}
3548
/>

0 commit comments

Comments
 (0)