Skip to content

Commit d9270f4

Browse files
author
Benjamin Perez
committed
Tables replacement in mcs
Replaced all the tables in mcs to be consistent with the new design
1 parent 068ac28 commit d9270f4

File tree

12 files changed

+517
-671
lines changed

12 files changed

+517
-671
lines changed

‎portal-ui/bindata_assetfs.go‎

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

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

Lines changed: 59 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,20 @@
1616

1717
import React from "react";
1818
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
19-
import Table from "@material-ui/core/Table";
20-
import TableBody from "@material-ui/core/TableBody";
21-
import TableCell from "@material-ui/core/TableCell";
22-
import TableHead from "@material-ui/core/TableHead";
23-
import TableRow from "@material-ui/core/TableRow";
24-
import Paper from "@material-ui/core/Paper";
2519
import Grid from "@material-ui/core/Grid";
20+
import { Button } from "@material-ui/core";
21+
import Typography from "@material-ui/core/Typography";
22+
import TextField from "@material-ui/core/TextField";
23+
import InputAdornment from "@material-ui/core/InputAdornment";
24+
import SearchIcon from "@material-ui/icons/Search";
25+
import Moment from "react-moment";
2626
import api from "../../../../common/api";
2727
import { Bucket, BucketList } from "../types";
28-
import {
29-
Button,
30-
IconButton,
31-
LinearProgress,
32-
TableFooter,
33-
TablePagination
34-
} from "@material-ui/core";
35-
import Typography from "@material-ui/core/Typography";
36-
import DeleteIcon from "@material-ui/icons/Delete";
28+
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
3729
import AddBucket from "./AddBucket";
3830
import DeleteBucket from "./DeleteBucket";
3931
import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
4032
import { CreateIcon } from "../../../../icons";
41-
import TextField from "@material-ui/core/TextField";
42-
import InputAdornment from "@material-ui/core/InputAdornment";
43-
import SearchIcon from "@material-ui/icons/Search";
44-
import Moment from "react-moment";
45-
import { Link } from "react-router-dom";
46-
import ViewIcon from "@material-ui/icons/Visibility";
4733

4834
const styles = (theme: Theme) =>
4935
createStyles({
@@ -208,6 +194,29 @@ class ListBuckets extends React.Component<
208194
this.setState({ deleteOpen: true, selectedBucket: bucket });
209195
};
210196

197+
const tableActions = [
198+
{ type: "view", to: `/buckets`, sendOnlyId: true },
199+
{ type: "delete", onClick: confirmDeleteBucket, sendOnlyId: true }
200+
];
201+
202+
const displayParsedDate = (date: string) => {
203+
return <Moment>{date}</Moment>;
204+
};
205+
206+
const filteredRecords = records
207+
.slice(offset, offset + rowsPerPage)
208+
.filter((b: Bucket) => {
209+
if (filterBuckets === "") {
210+
return true;
211+
} else {
212+
if (b.name.indexOf(filterBuckets) >= 0) {
213+
return true;
214+
} else {
215+
return false;
216+
}
217+
}
218+
});
219+
211220
return (
212221
<React.Fragment>
213222
{addScreenOpen && (
@@ -271,78 +280,35 @@ class ListBuckets extends React.Component<
271280
<br />
272281
</Grid>
273282
<Grid item xs={12}>
274-
<Paper className={classes.paper}>
275-
{loading && <LinearProgress />}
276-
{records != null && records.length > 0 ? (
277-
<Table size="medium">
278-
<TableHead className={classes.minTableHeader}>
279-
<TableRow>
280-
<TableCell>Name</TableCell>
281-
<TableCell>Creation Date</TableCell>
282-
<TableCell align="right">Actions</TableCell>
283-
</TableRow>
284-
</TableHead>
285-
<TableBody>
286-
{records
287-
.slice(offset, offset + rowsPerPage)
288-
.filter((b: Bucket) => {
289-
if (filterBuckets === "") {
290-
return true;
291-
} else {
292-
if (b.name.indexOf(filterBuckets) >= 0) {
293-
return true;
294-
} else {
295-
return false;
296-
}
297-
}
298-
})
299-
.map(row => (
300-
<TableRow key={row.name}>
301-
<TableCell>{row.name}</TableCell>
302-
<TableCell>
303-
<Moment>{row.creation_date}</Moment>
304-
</TableCell>
305-
<TableCell align="right">
306-
<Link to={`/buckets/${row.name}`}>
307-
<IconButton aria-label="delete">
308-
<ViewIcon />
309-
</IconButton>
310-
</Link>
311-
<IconButton
312-
aria-label="delete"
313-
onClick={() => {
314-
confirmDeleteBucket(row.name);
315-
}}
316-
>
317-
<DeleteIcon />
318-
</IconButton>
319-
</TableCell>
320-
</TableRow>
321-
))}
322-
</TableBody>
323-
<TableFooter>
324-
<TableRow>
325-
<TablePagination
326-
rowsPerPageOptions={[5, 10, 25]}
327-
colSpan={3}
328-
count={totalRecords}
329-
rowsPerPage={rowsPerPage}
330-
page={page}
331-
SelectProps={{
332-
inputProps: { "aria-label": "rows per page" },
333-
native: true
334-
}}
335-
onChangePage={handleChangePage}
336-
onChangeRowsPerPage={handleChangeRowsPerPage}
337-
ActionsComponent={MinTablePaginationActions}
338-
/>
339-
</TableRow>
340-
</TableFooter>
341-
</Table>
342-
) : (
343-
<div>No Buckets</div>
344-
)}
345-
</Paper>
283+
<TableWrapper
284+
itemActions={tableActions}
285+
columns={[
286+
{ label: "Name", elementKey: "name" },
287+
{
288+
label: "Creation Date",
289+
elementKey: "creation_date",
290+
renderFunction: displayParsedDate
291+
}
292+
]}
293+
isLoading={loading}
294+
records={filteredRecords}
295+
entityName="Buckets"
296+
idField="name"
297+
paginatorConfig={{
298+
rowsPerPageOptions: [5, 10, 25],
299+
colSpan: 3,
300+
count: totalRecords,
301+
rowsPerPage: rowsPerPage,
302+
page: page,
303+
SelectProps: {
304+
inputProps: { "aria-label": "rows per page" },
305+
native: true
306+
},
307+
onChangePage: handleChangePage,
308+
onChangeRowsPerPage: handleChangeRowsPerPage,
309+
ActionsComponent: MinTablePaginationActions
310+
}}
311+
/>
346312
</Grid>
347313
</Grid>
348314
</React.Fragment>

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

Lines changed: 41 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,17 @@
1616

1717
import React from "react";
1818
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
19-
import Table from "@material-ui/core/Table";
20-
import TableBody from "@material-ui/core/TableBody";
21-
import TableCell from "@material-ui/core/TableCell";
22-
import TableHead from "@material-ui/core/TableHead";
23-
import TableRow from "@material-ui/core/TableRow";
24-
import Paper from "@material-ui/core/Paper";
2519
import Grid from "@material-ui/core/Grid";
2620
import api from "../../../../common/api";
2721
import { BucketEvent, BucketEventList, BucketInfo } from "../types";
28-
import {
29-
Button,
30-
IconButton,
31-
LinearProgress,
32-
TableFooter,
33-
TablePagination
34-
} from "@material-ui/core";
22+
import { Button } from "@material-ui/core";
3523
import Typography from "@material-ui/core/Typography";
36-
import DeleteIcon from "@material-ui/icons/Delete";
3724
import SetAccessPolicy from "./SetAccessPolicy";
3825
import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
3926
import { CreateIcon } from "../../../../icons";
4027
import AddEvent from "./AddEvent";
4128
import DeleteEvent from "./DeleteEvent";
29+
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
4230

4331
const styles = (theme: Theme) =>
4432
createStyles({
@@ -231,6 +219,14 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
231219
accessPolicy = info.access;
232220
}
233221

222+
const eventsDisplay = (events: string[]) => {
223+
return <React.Fragment>{events.join(", ")}</React.Fragment>;
224+
};
225+
226+
const tableActions = [{ type: "delete", onClick: confirmDeleteEvent }];
227+
228+
const filteredRecords = records.slice(offset, offset + rowsPerPage);
229+
234230
return (
235231
<React.Fragment>
236232
<AddEvent
@@ -301,66 +297,37 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
301297
<br />
302298
</Grid>
303299
<Grid item xs={12}>
304-
<Paper className={classes.paper}>
305-
{loading && <LinearProgress />}
306-
{records != null && records.length > 0 ? (
307-
<Table size="medium">
308-
<TableHead className={classes.minTableHeader}>
309-
<TableRow>
310-
<TableCell>SQS</TableCell>
311-
<TableCell>Events</TableCell>
312-
<TableCell>Prefix</TableCell>
313-
<TableCell>Suffix</TableCell>
314-
<TableCell align="right">Actions</TableCell>
315-
</TableRow>
316-
</TableHead>
317-
<TableBody>
318-
{records
319-
.slice(offset, offset + rowsPerPage)
320-
.map((row, index) => (
321-
<TableRow
322-
key={`bucket-evt-${row.id}-${index.toString()}`}
323-
>
324-
<TableCell>{row.arn}</TableCell>
325-
<TableCell>{row.events.join(", ")}</TableCell>
326-
<TableCell>{row.prefix}</TableCell>
327-
<TableCell>{row.suffix}</TableCell>
328-
<TableCell align="right">
329-
<IconButton
330-
aria-label="delete"
331-
onClick={() => {
332-
confirmDeleteEvent(row);
333-
}}
334-
>
335-
<DeleteIcon />
336-
</IconButton>
337-
</TableCell>
338-
</TableRow>
339-
))}
340-
</TableBody>
341-
<TableFooter>
342-
<TableRow>
343-
<TablePagination
344-
rowsPerPageOptions={[5, 10, 25]}
345-
colSpan={3}
346-
count={totalRecords}
347-
rowsPerPage={rowsPerPage}
348-
page={page}
349-
SelectProps={{
350-
inputProps: { "aria-label": "rows per page" },
351-
native: true
352-
}}
353-
onChangePage={handleChangePage}
354-
onChangeRowsPerPage={handleChangeRowsPerPage}
355-
ActionsComponent={MinTablePaginationActions}
356-
/>
357-
</TableRow>
358-
</TableFooter>
359-
</Table>
360-
) : (
361-
<div className={classes.noRecords}>No Events</div>
362-
)}
363-
</Paper>
300+
<TableWrapper
301+
itemActions={tableActions}
302+
columns={[
303+
{ label: "SQS", elementKey: "arn" },
304+
{
305+
label: "Events",
306+
elementKey: "events",
307+
renderFunction: eventsDisplay
308+
},
309+
{ label: "Prefix", elementKey: "prefix" },
310+
{ label: "Suffix", elementKey: "suffix" }
311+
]}
312+
isLoading={loading}
313+
records={filteredRecords}
314+
entityName="Events"
315+
idField="id"
316+
paginatorConfig={{
317+
rowsPerPageOptions: [5, 10, 25],
318+
colSpan: 3,
319+
count: totalRecords,
320+
rowsPerPage: rowsPerPage,
321+
page: page,
322+
SelectProps: {
323+
inputProps: { "aria-label": "rows per page" },
324+
native: true
325+
},
326+
onChangePage: handleChangePage,
327+
onChangeRowsPerPage: handleChangeRowsPerPage,
328+
ActionsComponent: MinTablePaginationActions
329+
}}
330+
/>
364331
</Grid>
365332
</Grid>
366333

‎portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,21 @@
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 isString from "lodash/isString";
1718
import { IconButton } from "@material-ui/core";
1819
import ViewIcon from "./TableActionIcons/ViewIcon";
1920
import PencilIcon from "./TableActionIcons/PencilIcon";
2021
import DeleteIcon from "./TableActionIcons/DeleteIcon";
22+
import { Link } from "react-router-dom";
2123

2224
interface IActionButton {
2325
type: string;
24-
onClick: (id: string) => any;
26+
onClick?: (id: string) => any;
27+
to?: string;
2528
valueToSend: any;
2629
selected: boolean;
30+
sendOnlyId?: boolean;
31+
idField: string;
2732
}
2833

2934
const defineIcon = (type: string, selected: boolean) => {
@@ -43,18 +48,37 @@ const TableActionButton = ({
4348
type,
4449
onClick,
4550
valueToSend,
46-
selected
51+
idField,
52+
selected,
53+
to,
54+
sendOnlyId = false
4755
}: IActionButton) => {
48-
return (
56+
const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend;
57+
58+
const buttonElement = (
4959
<IconButton
5060
aria-label={type}
51-
onClick={() => {
52-
onClick(valueToSend);
53-
}}
61+
onClick={
62+
onClick
63+
? () => {
64+
onClick(valueClick);
65+
}
66+
: () => null
67+
}
5468
>
5569
{defineIcon(type, selected)}
5670
</IconButton>
5771
);
72+
73+
if (onClick) {
74+
return buttonElement;
75+
}
76+
77+
if (isString(to)) {
78+
return <Link to={`${to}/${valueClick}`}>{buttonElement}</Link>;
79+
}
80+
81+
return null;
5882
};
5983

6084
export default TableActionButton;

0 commit comments

Comments
 (0)