Skip to content

Commit df93746

Browse files
bexsoftbexsoft
authored
Fixed Bucket Events Notifications Page (#2906)
- Added missing ilm & replica supported types - Fixed add screen crash when no arn is selected - Migrated components to mds Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent d1ae271 commit df93746

File tree

10 files changed

+92
-142
lines changed

10 files changed

+92
-142
lines changed

‎go.mod

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ require (
2323
github.com/minio/kes v0.22.3
2424
github.com/minio/madmin-go/v3 v3.0.2
2525
github.com/minio/mc v0.0.0-20230619193119-5f39522e6902
26-
github.com/minio/minio-go/v7 v7.0.55-0.20230525060734-b7836f021bfb
26+
github.com/minio/minio-go/v7 v7.0.58-0.20230622175401-7048a16cfbca
2727
github.com/minio/pkg v1.7.5
2828
github.com/minio/selfupdate v0.6.0
2929
github.com/minio/websocket v1.6.0

‎go.sum

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,8 +254,8 @@ github.com/minio/mc v0.0.0-20230619193119-5f39522e6902 h1:oNewsjSewAfS4Bly8E0cqQ
254254
github.com/minio/mc v0.0.0-20230619193119-5f39522e6902/go.mod h1:DZvNh8trMmDzTcxI2WVQeD2f5yd2UDDk9RYsFxaOMaQ=
255255
github.com/minio/md5-simd v1.1.2 h1:Gdi1DZK69+ZVMoNHRXJyNcxrMA4dSxoYHZSQbirFg34=
256256
github.com/minio/md5-simd v1.1.2/go.mod h1:MzdKDxYpY2BT9XQFocsiZf/NKVtR7nkE4RoEpN+20RM=
257-
github.com/minio/minio-go/v7 v7.0.55-0.20230525060734-b7836f021bfb h1:oW9owq24i06IMYrfufzdjLH5S4rcOc9M1f7Cak+Ya5I=
258-
github.com/minio/minio-go/v7 v7.0.55-0.20230525060734-b7836f021bfb/go.mod h1:NUDy4A4oXPq1l2yK6LTSvCEzAMeIcoz9lcj5dbzSrRE=
257+
github.com/minio/minio-go/v7 v7.0.58-0.20230622175401-7048a16cfbca h1:/cqQl5kUAeTVVfTiJTWN0r4USgUBhjqfwamlnvBqW9k=
258+
github.com/minio/minio-go/v7 v7.0.58-0.20230622175401-7048a16cfbca/go.mod h1:NUDy4A4oXPq1l2yK6LTSvCEzAMeIcoz9lcj5dbzSrRE=
259259
github.com/minio/mux v1.9.0 h1:dWafQFyEfGhJvK6AwLOt83bIG5bxKxKJnKMCi0XAaoA=
260260
github.com/minio/pkg v1.7.5 h1:UOUJjewE5zoaDPlCMJtNx/swc1jT1ZR+IajT7hrLd44=
261261
github.com/minio/pkg v1.7.5/go.mod h1:mEfGMTm5Z0b5EGxKNuPwyb5A2d+CC/VlUyRj6RJtIwo=

‎models/notification_event_type.go

Lines changed: 7 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎portal-ui/src/api/consoleApi.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,8 @@ export enum NotificationEventType {
291291
Put = "put",
292292
Delete = "delete",
293293
Get = "get",
294+
Replica = "replica",
295+
Ilm = "ilm",
294296
}
295297

296298
export interface NotificationConfig {

‎portal-ui/src/screens/Console/Buckets/BucketDetails/AddEvent.tsx

Lines changed: 50 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -14,53 +14,28 @@
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

17-
import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
18-
19-
import Grid from "@mui/material/Grid";
20-
import { Button, EventSubscriptionIcon } from "mds";
21-
import { Theme } from "@mui/material/styles";
22-
import createStyles from "@mui/styles/createStyles";
23-
import withStyles from "@mui/styles/withStyles";
24-
import TableHead from "@mui/material/TableHead";
25-
import TableRow from "@mui/material/TableRow";
26-
import TableCell from "@mui/material/TableCell";
27-
import TableBody from "@mui/material/TableBody";
28-
import Checkbox from "@mui/material/Checkbox";
29-
import Table from "@mui/material/Table";
30-
import {
31-
formFieldStyles,
32-
modalStyleUtils,
33-
} from "../../Common/FormComponents/common/styleLibrary";
34-
17+
import React, { useCallback, useEffect, useState } from "react";
18+
import { Button, DataTable, EventSubscriptionIcon, Grid, InputBox } from "mds";
3519
import { ErrorResponseHandler } from "../../../../common/types";
36-
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
37-
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
38-
import AutocompleteWrapper from "../../Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper";
3920
import { setModalErrorSnackMessage } from "../../../../systemSlice";
4021
import { useAppDispatch } from "../../../../store";
4122
import { api } from "api";
4223
import { NotificationEventType } from "api/consoleApi";
43-
44-
const styles = (theme: Theme) =>
45-
createStyles({
46-
arnField: {
47-
"& div div .MuiOutlinedInput-root": {
48-
padding: 0,
49-
},
50-
},
51-
...formFieldStyles,
52-
...modalStyleUtils,
53-
});
24+
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
25+
import AutocompleteWrapper from "../../Common/FormComponents/AutocompleteWrapper/AutocompleteWrapper";
26+
import {
27+
formFieldStyles,
28+
modalBasic,
29+
modalStyleUtils,
30+
} from "../../Common/FormComponents/common/styleLibrary";
5431

5532
interface IAddEventProps {
56-
classes: any;
5733
open: boolean;
5834
selectedBucket: string;
5935
closeModalAndRefresh: () => void;
6036
}
6137

6238
const AddEvent = ({
63-
classes,
6439
open,
6540
selectedBucket,
6641
closeModalAndRefresh,
@@ -125,28 +100,27 @@ const AddEvent = ({
125100
{ label: "PUT - Object Uploaded", value: NotificationEventType.Put },
126101
{ label: "GET - Object accessed", value: NotificationEventType.Get },
127102
{ label: "DELETE - Object Deleted", value: NotificationEventType.Delete },
103+
{
104+
label: "REPLICA - Object Replicated",
105+
value: NotificationEventType.Replica,
106+
},
107+
{ label: "ILM - Object Transitioned", value: NotificationEventType.Ilm },
128108
];
129109

130-
const handleClick = (
131-
event: React.MouseEvent<unknown> | ChangeEvent<unknown>,
132-
name: NotificationEventType
133-
) => {
134-
const selectedIndex = selectedEvents.indexOf(name);
135-
let newSelected: NotificationEventType[] = [];
110+
const handleClick = (event: React.ChangeEvent<HTMLInputElement>) => {
111+
const targetD = event.target;
112+
const value = targetD.value;
113+
const checked = targetD.checked;
136114

137-
if (selectedIndex === -1) {
138-
newSelected = newSelected.concat(selectedEvents, name);
139-
} else if (selectedIndex === 0) {
140-
newSelected = newSelected.concat(selectedEvents.slice(1));
141-
} else if (selectedIndex === selectedEvents.length - 1) {
142-
newSelected = newSelected.concat(selectedEvents.slice(0, -1));
143-
} else if (selectedIndex > 0) {
144-
newSelected = newSelected.concat(
145-
selectedEvents.slice(0, selectedIndex),
146-
selectedEvents.slice(selectedIndex + 1)
147-
);
115+
let elements: NotificationEventType[] = [...selectedEvents];
116+
117+
if (checked) {
118+
elements.push(value as NotificationEventType);
119+
} else {
120+
elements = elements.filter((element) => element !== value);
148121
}
149-
setSelectedEvents(newSelected);
122+
123+
setSelectedEvents(elements);
150124
};
151125

152126
const arnValues = arnList?.map((arnConstant) => ({
@@ -171,11 +145,16 @@ const AddEvent = ({
171145
}}
172146
>
173147
<Grid container>
174-
<Grid item xs={12} className={classes.formScrollable}>
148+
<Grid item xs={12} sx={modalBasic.formScrollable}>
175149
<Grid
176150
item
177151
xs={12}
178-
className={`${classes.arnField} ${classes.formFieldRow}`}
152+
sx={{
153+
...formFieldStyles.formFieldRow,
154+
"& div div .MuiOutlinedInput-root": {
155+
padding: 0,
156+
},
157+
}}
179158
>
180159
<AutocompleteWrapper
181160
onChange={(value: string) => {
@@ -188,8 +167,8 @@ const AddEvent = ({
188167
options={arnValues || []}
189168
/>
190169
</Grid>
191-
<Grid item xs={12} className={classes.formFieldRow}>
192-
<InputBoxWrapper
170+
<Grid item xs={12} sx={formFieldStyles.formFieldRow}>
171+
<InputBox
193172
id="prefix-input"
194173
name="prefix-input"
195174
label="Prefix"
@@ -199,8 +178,8 @@ const AddEvent = ({
199178
}}
200179
/>
201180
</Grid>
202-
<Grid item xs={12} className={classes.formFieldRow}>
203-
<InputBoxWrapper
181+
<Grid item xs={12} sx={formFieldStyles.formFieldRow}>
182+
<InputBox
204183
id="suffix-input"
205184
name="suffix-input"
206185
label="Suffix"
@@ -210,41 +189,19 @@ const AddEvent = ({
210189
}}
211190
/>
212191
</Grid>
213-
<Grid item xs={12} className={classes.formFieldRow}>
214-
<Table size="medium">
215-
<TableHead className={classes.minTableHeader}>
216-
<TableRow>
217-
<TableCell>Select</TableCell>
218-
<TableCell>Event</TableCell>
219-
</TableRow>
220-
</TableHead>
221-
<TableBody>
222-
{events.map((row) => (
223-
<TableRow
224-
key={`group-${row.value}`}
225-
onClick={(event) => handleClick(event, row.value)}
226-
>
227-
<TableCell padding="checkbox">
228-
<Checkbox
229-
value={row.value}
230-
color="primary"
231-
inputProps={{
232-
"aria-label": "secondary checkbox",
233-
}}
234-
onChange={(event) => handleClick(event, row.value)}
235-
checked={selectedEvents.includes(row.value)}
236-
/>
237-
</TableCell>
238-
<TableCell className={classes.wrapCell}>
239-
{row.label}
240-
</TableCell>
241-
</TableRow>
242-
))}
243-
</TableBody>
244-
</Table>
192+
<Grid item xs={12} sx={formFieldStyles.formFieldRow}>
193+
<DataTable
194+
columns={[{ label: "Event", elementKey: "label" }]}
195+
idField={"value"}
196+
records={events}
197+
onSelect={handleClick}
198+
selectedItems={selectedEvents}
199+
noBackground
200+
customPaperHeight={"260px"}
201+
/>
245202
</Grid>
246203
</Grid>
247-
<Grid item xs={12} className={classes.modalButtonBar}>
204+
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
248205
<Button
249206
id={"cancel-add-event"}
250207
type="button"
@@ -259,7 +216,7 @@ const AddEvent = ({
259216
id={"save-event"}
260217
type="submit"
261218
variant="callAction"
262-
disabled={addLoading}
219+
disabled={addLoading || arn === "" || selectedEvents.length === 0}
263220
label={"Save"}
264221
/>
265222
</Grid>
@@ -269,4 +226,4 @@ const AddEvent = ({
269226
);
270227
};
271228

272-
export default withStyles(styles)(AddEvent);
229+
export default AddEvent;

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,53 +15,30 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React, { Fragment, useEffect, useState } from "react";
18+
import get from "lodash/get";
1819
import { useSelector } from "react-redux";
1920
import { useParams } from "react-router-dom";
20-
import { Theme } from "@mui/material/styles";
21-
import { AddIcon, Button, HelpBox, LambdaIcon } from "mds";
22-
import createStyles from "@mui/styles/createStyles";
23-
import withStyles from "@mui/styles/withStyles";
24-
import get from "lodash/get";
25-
import Grid from "@mui/material/Grid";
26-
import {
27-
actionsTray,
28-
searchField,
29-
} from "../../Common/FormComponents/common/styleLibrary";
30-
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
31-
32-
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
21+
import { AddIcon, Button, HelpBox, LambdaIcon, DataTable, Grid } from "mds";
22+
import { api } from "api";
23+
import { NotificationConfig } from "api/consoleApi";
24+
import { errorToHandler } from "api/errors";
25+
import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
3326
import {
3427
hasPermission,
3528
SecureComponent,
3629
} from "../../../../common/SecureComponent";
3730
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
38-
39-
import withSuspense from "../../Common/Components/withSuspense";
4031
import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
4132
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
4233
import { useAppDispatch } from "../../../../store";
34+
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
35+
import withSuspense from "../../Common/Components/withSuspense";
4336
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
44-
import { api } from "api";
45-
import { NotificationConfig } from "api/consoleApi";
46-
import { errorToHandler } from "api/errors";
4737

4838
const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
4939
const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
5040

51-
const styles = (theme: Theme) =>
52-
createStyles({
53-
...searchField,
54-
...actionsTray,
55-
twHeight: {
56-
minHeight: 400,
57-
},
58-
});
59-
60-
interface IBucketEventsProps {
61-
classes: any;
62-
}
63-
64-
const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
41+
const BucketEventsPanel = () => {
6542
const dispatch = useAppDispatch();
6643
const params = useParams();
6744

@@ -155,7 +132,7 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
155132
)}
156133

157134
<Grid container>
158-
<Grid item xs={12} className={classes.actionsTray}>
135+
<Grid item xs={12} sx={actionsTray.actionsTray}>
159136
<PanelTitle>Events</PanelTitle>
160137
<SecureComponent
161138
scopes={[
@@ -189,7 +166,7 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
189166
resource={bucketName}
190167
errorProps={{ disabled: true }}
191168
>
192-
<TableWrapper
169+
<DataTable
193170
itemActions={tableActions}
194171
columns={[
195172
{ label: "SQS", elementKey: "arn" },
@@ -205,7 +182,7 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
205182
records={records}
206183
entityName="Events"
207184
idField="id"
208-
customPaperHeight={classes.twHeight}
185+
customPaperHeight={"400px"}
209186
/>
210187
</SecureComponent>
211188
</Grid>
@@ -242,4 +219,4 @@ const BucketEventsPanel = ({ classes }: IBucketEventsProps) => {
242219
);
243220
};
244221

245-
export default withStyles(styles)(BucketEventsPanel);
222+
export default BucketEventsPanel;

‎portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteEvent.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,8 @@
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

17-
import React from "react";
17+
import React, { Fragment } from "react";
1818
import get from "lodash/get";
19-
20-
import { DialogContentText } from "@mui/material";
21-
2219
import { ErrorResponseHandler } from "../../../../common/types";
2320
import useApi from "../../Common/Hooks/useApi";
2421
import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
@@ -82,9 +79,7 @@ const DeleteEvent = ({
8279
onConfirm={onConfirmDelete}
8380
onClose={onClose}
8481
confirmationContent={
85-
<DialogContentText>
86-
Are you sure you want to delete this event?
87-
</DialogContentText>
82+
<Fragment>Are you sure you want to delete this event?</Fragment>
8883
}
8984
/>
9085
);

0 commit comments

Comments
 (0)