Skip to content

Commit

Permalink
Tables replacement in mcs
Browse files Browse the repository at this point in the history 
Replaced all the tables in mcs to be consistent with the new design
  • Loading branch information
Benjamin Perez committed Apr 21, 2020
1 parent 068ac28 commit d9270f4
Show file tree
Hide file tree
Showing 12 changed files with 517 additions and 671 deletions.
232 changes: 116 additions & 116 deletions portal-ui/bindata_assetfs.go
View file

Large diffs are not rendered by default.

152 changes: 59 additions & 93 deletions portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,20 @@

import React from "react";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import { Button } from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";
import Moment from "react-moment";
import api from "../../../../common/api";
import { Bucket, BucketList } from "../types";
import {
Button,
IconButton,
LinearProgress,
TableFooter,
TablePagination
} from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import AddBucket from "./AddBucket";
import DeleteBucket from "./DeleteBucket";
import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
import { CreateIcon } from "../../../../icons";
import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";
import Moment from "react-moment";
import { Link } from "react-router-dom";
import ViewIcon from "@material-ui/icons/Visibility";

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

const tableActions = [
{ type: "view", to: `/buckets`, sendOnlyId: true },
{ type: "delete", onClick: confirmDeleteBucket, sendOnlyId: true }
];

const displayParsedDate = (date: string) => {
return <Moment>{date}</Moment>;
};

const filteredRecords = records
.slice(offset, offset + rowsPerPage)
.filter((b: Bucket) => {
if (filterBuckets === "") {
return true;
} else {
if (b.name.indexOf(filterBuckets) >= 0) {
return true;
} else {
return false;
}
}
});

return (
<React.Fragment>
{addScreenOpen && (
Expand Down Expand Up @@ -271,78 +280,35 @@ class ListBuckets extends React.Component<
<br />
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>
{loading && <LinearProgress />}
{records != null && records.length > 0 ? (
<Table size="medium">
<TableHead className={classes.minTableHeader}>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Creation Date</TableCell>
<TableCell align="right">Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{records
.slice(offset, offset + rowsPerPage)
.filter((b: Bucket) => {
if (filterBuckets === "") {
return true;
} else {
if (b.name.indexOf(filterBuckets) >= 0) {
return true;
} else {
return false;
}
}
})
.map(row => (
<TableRow key={row.name}>
<TableCell>{row.name}</TableCell>
<TableCell>
<Moment>{row.creation_date}</Moment>
</TableCell>
<TableCell align="right">
<Link to={`/buckets/${row.name}`}>
<IconButton aria-label="delete">
<ViewIcon />
</IconButton>
</Link>
<IconButton
aria-label="delete"
onClick={() => {
confirmDeleteBucket(row.name);
}}
>
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
colSpan={3}
count={totalRecords}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={MinTablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
) : (
<div>No Buckets</div>
)}
</Paper>
<TableWrapper
itemActions={tableActions}
columns={[
{ label: "Name", elementKey: "name" },
{
label: "Creation Date",
elementKey: "creation_date",
renderFunction: displayParsedDate
}
]}
isLoading={loading}
records={filteredRecords}
entityName="Buckets"
idField="name"
paginatorConfig={{
rowsPerPageOptions: [5, 10, 25],
colSpan: 3,
count: totalRecords,
rowsPerPage: rowsPerPage,
page: page,
SelectProps: {
inputProps: { "aria-label": "rows per page" },
native: true
},
onChangePage: handleChangePage,
onChangeRowsPerPage: handleChangeRowsPerPage,
ActionsComponent: MinTablePaginationActions
}}
/>
</Grid>
</Grid>
</React.Fragment>
Expand Down
115 changes: 41 additions & 74 deletions portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,29 +16,17 @@

import React from "react";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import api from "../../../../common/api";
import { BucketEvent, BucketEventList, BucketInfo } from "../types";
import {
Button,
IconButton,
LinearProgress,
TableFooter,
TablePagination
} from "@material-ui/core";
import { Button } from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import SetAccessPolicy from "./SetAccessPolicy";
import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
import { CreateIcon } from "../../../../icons";
import AddEvent from "./AddEvent";
import DeleteEvent from "./DeleteEvent";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";

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

const eventsDisplay = (events: string[]) => {
return <React.Fragment>{events.join(", ")}</React.Fragment>;
};

const tableActions = [{ type: "delete", onClick: confirmDeleteEvent }];

const filteredRecords = records.slice(offset, offset + rowsPerPage);

return (
<React.Fragment>
<AddEvent
Expand Down Expand Up @@ -301,66 +297,37 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
<br />
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>
{loading && <LinearProgress />}
{records != null && records.length > 0 ? (
<Table size="medium">
<TableHead className={classes.minTableHeader}>
<TableRow>
<TableCell>SQS</TableCell>
<TableCell>Events</TableCell>
<TableCell>Prefix</TableCell>
<TableCell>Suffix</TableCell>
<TableCell align="right">Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{records
.slice(offset, offset + rowsPerPage)
.map((row, index) => (
<TableRow
key={`bucket-evt-${row.id}-${index.toString()}`}
>
<TableCell>{row.arn}</TableCell>
<TableCell>{row.events.join(", ")}</TableCell>
<TableCell>{row.prefix}</TableCell>
<TableCell>{row.suffix}</TableCell>
<TableCell align="right">
<IconButton
aria-label="delete"
onClick={() => {
confirmDeleteEvent(row);
}}
>
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
colSpan={3}
count={totalRecords}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={MinTablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
) : (
<div className={classes.noRecords}>No Events</div>
)}
</Paper>
<TableWrapper
itemActions={tableActions}
columns={[
{ label: "SQS", elementKey: "arn" },
{
label: "Events",
elementKey: "events",
renderFunction: eventsDisplay
},
{ label: "Prefix", elementKey: "prefix" },
{ label: "Suffix", elementKey: "suffix" }
]}
isLoading={loading}
records={filteredRecords}
entityName="Events"
idField="id"
paginatorConfig={{
rowsPerPageOptions: [5, 10, 25],
colSpan: 3,
count: totalRecords,
rowsPerPage: rowsPerPage,
page: page,
SelectProps: {
inputProps: { "aria-label": "rows per page" },
native: true
},
onChangePage: handleChangePage,
onChangeRowsPerPage: handleChangeRowsPerPage,
ActionsComponent: MinTablePaginationActions
}}
/>
</Grid>
</Grid>

Expand Down
36 changes: 30 additions & 6 deletions portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,21 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import isString from "lodash/isString";
import { IconButton } from "@material-ui/core";
import ViewIcon from "./TableActionIcons/ViewIcon";
import PencilIcon from "./TableActionIcons/PencilIcon";
import DeleteIcon from "./TableActionIcons/DeleteIcon";
import { Link } from "react-router-dom";

interface IActionButton {
type: string;
onClick: (id: string) => any;
onClick?: (id: string) => any;
to?: string;
valueToSend: any;
selected: boolean;
sendOnlyId?: boolean;
idField: string;
}

const defineIcon = (type: string, selected: boolean) => {
Expand All @@ -43,18 +48,37 @@ const TableActionButton = ({
type,
onClick,
valueToSend,
selected
idField,
selected,
to,
sendOnlyId = false
}: IActionButton) => {
return (
const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend;

const buttonElement = (
<IconButton
aria-label={type}
onClick={() => {
onClick(valueToSend);
}}
onClick={
onClick
? () => {
onClick(valueClick);
}
: () => null
}
>
{defineIcon(type, selected)}
</IconButton>
);

if (onClick) {
return buttonElement;
}

if (isString(to)) {
return <Link to={`${to}/${valueClick}`}>{buttonElement}</Link>;
}

return null;
};

export default TableActionButton;
Loading

0 comments on commit d9270f4

Please sign in to comment.