diff --git a/portal-ui/package.json b/portal-ui/package.json
index 52c785a2d..b068ab3c1 100644
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -17,6 +17,7 @@
"@types/react-redux": "^7.1.5",
"@types/react-router": "^5.1.3",
"@types/react-router-dom": "^5.1.2",
+ "@types/react-virtualized": "^9.21.10",
"@types/recharts": "^1.8.9",
"@types/superagent": "^4.1.4",
"@types/webpack-env": "^1.14.1",
@@ -40,6 +41,8 @@
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.4",
+ "react-virtualized": "^9.22.2",
+ "react-window-infinite-loader": "^1.0.5",
"recharts": "^1.8.5",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx
index 45f67f33b..67a34e017 100644
--- a/portal-ui/src/index.tsx
+++ b/portal-ui/src/index.tsx
@@ -21,6 +21,7 @@ import Routes from "./Routes";
import configureStore from "./store";
import * as serviceWorker from "./serviceWorker";
import { ThemeProvider, withStyles } from "@material-ui/core/styles";
+import "react-virtualized/styles.css";
import "./index.css";
import theme from "./theme/main";
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 49cb0a8b0..a4889ae21 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -197,7 +197,7 @@ const ListBuckets = ({
}
});
- const showInPage = filteredRecords.slice(offset, offset + rowsPerPage);
+ const showInPage = filteredRecords;
return (
@@ -266,26 +266,14 @@ const ListBuckets = ({
label: "Size",
elementKey: "size",
renderFunction: niceBytes,
+ width: 60,
+ contentTextAlign: "right",
},
]}
isLoading={loading}
records={showInPage}
entityName="Buckets"
idField="name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: filteredRecords.length,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index e8d1cdb76..1ee17e28b 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -103,6 +103,9 @@ const styles = (theme: Theme) =>
marginLeft: 10,
},
},
+ browsePaper: {
+ height: "calc(100vh - 280px)",
+ },
"@global": {
".rowElementRaw:hover .iconFileElm": {
backgroundImage: "url(/images/ob_file_filled.svg)",
@@ -485,12 +488,15 @@ const ListObjects = ({
label: "Size",
elementKey: "size",
renderFunction: niceBytes,
+ width: 60,
+ contentTextAlign: "right",
},
]}
isLoading={loading}
entityName="Objects"
idField="name"
records={filteredRecords}
+ customPaperHeight={classes.browsePaper}
/>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
index 287d54c48..6afb53195 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
@@ -642,20 +642,6 @@ class ViewBucket extends React.Component {
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,
- }}
/>
@@ -683,20 +669,6 @@ class ViewBucket extends React.Component {
records={filteredRules}
entityName="Replication Rules"
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,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index b49d3f81d..ed897ae99 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -104,7 +104,7 @@ const radioBasic = {
width: 12,
height: 12,
borderRadius: "100%",
- 'input:disabled ~ &': {
+ "input:disabled ~ &": {
border: "1px solid #9C9C9C",
},
};
@@ -120,8 +120,7 @@ export const radioIcons = {
export const containerForHeader = (bottomSpacing: any) => ({
container: {
- padding: "110px 33px 30px",
- paddingBottom: bottomSpacing,
+ padding: "110px 33px 0",
"& h6": {
color: "#777777",
fontSize: 14,
@@ -210,3 +209,9 @@ export const objectBrowserCommon = {
},
},
};
+
+export const selectorsCommon = {
+ multiSelectTable: {
+ height: 200,
+ },
+};
diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
index a00dd4bde..9b59a4e51 100644
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
@@ -25,6 +25,14 @@ import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
import GetAppIcon from "@material-ui/icons/GetApp";
import SvgIcon from "@material-ui/core/SvgIcon";
import { Link } from "react-router-dom";
+import { createStyles, withStyles } from "@material-ui/core/styles";
+
+const styles = () =>
+ createStyles({
+ spacing: {
+ margin: "0 8px",
+ },
+ });
interface IActionButton {
type: string;
@@ -34,6 +42,7 @@ interface IActionButton {
selected: boolean;
sendOnlyId?: boolean;
idField: string;
+ classes: any;
}
const defineIcon = (type: string, selected: boolean) => {
@@ -67,6 +76,7 @@ const TableActionButton = ({
selected,
to,
sendOnlyId = false,
+ classes,
}: IActionButton) => {
const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend;
@@ -82,6 +92,7 @@ const TableActionButton = ({
}
: () => null
}
+ className={classes.spacing}
>
{defineIcon(type, selected)}
@@ -107,4 +118,4 @@ const TableActionButton = ({
return null;
};
-export default TableActionButton;
+export default withStyles(styles)(TableActionButton);
diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
index 540be55b4..0b50fd3ff 100644
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
@@ -18,19 +18,13 @@ import get from "lodash/get";
import isString from "lodash/isString";
import {
LinearProgress,
- TablePagination,
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableRow,
Paper,
Grid,
Checkbox,
Typography,
} from "@material-ui/core";
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { TablePaginationActionsProps } from "@material-ui/core/TablePagination/TablePaginationActions";
+import { Table, Column, AutoSizer } from "react-virtualized";
+import { createStyles, withStyles } from "@material-ui/core/styles";
import TableActionButton from "./TableActionButton";
import history from "../../../../history";
import {
@@ -50,28 +44,13 @@ interface ItemActions {
interface IColumns {
label: string;
elementKey: string;
- sortable?: boolean;
renderFunction?: (input: any) => any;
renderFullObject?: boolean;
globalClass?: any;
rowClass?: any;
-}
-
-interface IPaginatorConfig {
- rowsPerPageOptions: number[];
- colSpan: number;
- count: number;
- rowsPerPage: number;
- page: number;
- SelectProps: any;
- onChangePage: (
- event: React.MouseEvent | null,
- page: number
- ) => void;
- onChangeRowsPerPage?: React.ChangeEventHandler<
- HTMLTextAreaElement | HTMLInputElement
- >;
- ActionsComponent?: React.ElementType;
+ width?: number;
+ headerTextAlign?: string;
+ contentTextAlign?: string;
}
interface TableWrapperProps {
@@ -84,10 +63,9 @@ interface TableWrapperProps {
classes: any;
entityName: string;
selectedItems?: string[];
- stickyHeader?: boolean;
radioSelection?: boolean;
customEmptyMessage?: string;
- paginatorConfig?: IPaginatorConfig;
+ customPaperHeight?: string;
}
const borderColor = "#9c9c9c80";
@@ -104,7 +82,7 @@ const rowText = {
paddingLeft: 6,
};
-const styles = (theme: Theme) =>
+const styles = () =>
createStyles({
dialogContainer: {
padding: "12px 26px 22px",
@@ -117,7 +95,16 @@ const styles = (theme: Theme) =>
boxShadow: "none",
border: "#EAEDEE 1px solid",
borderRadius: 3,
- minHeight: "calc(100vh - 340px)",
+ minHeight: 200,
+ overflowY: "scroll",
+
+ "&::-webkit-scrollbar": {
+ width: 3,
+ height: 3,
+ },
+ },
+ defaultPaperHeight: {
+ height: "calc(100vh - 205px)",
},
allTableSettings: {
"& .MuiTableCell-sizeSmall:last-child": {
@@ -177,63 +164,143 @@ const styles = (theme: Theme) =>
paddingTop: "100px",
paddingBottom: "100px",
},
- rowElement: {
- userSelect: "none",
-
- "&:hover": {
- backgroundColor: "#ececec",
-
- "& td": {
+ "@global": {
+ ".rowLine": {
+ borderBottom: `1px solid ${borderColor}`,
+ height: 40,
+ color: "#393939",
+ fontSize: 14,
+ transitionDuration: 0.3,
+ "&:focus": {
+ outline: "initial",
+ },
+ "&:hover:not(.ReactVirtualized__Table__headerRow)": {
+ userSelect: "none",
+ backgroundColor: "#ececec",
+ fontWeight: 600,
+ "&.canClick": {
+ cursor: "pointer",
+ },
+ },
+ "& .selected": {
+ color: "#081C42",
fontWeight: 600,
},
},
- },
- rowClickable: {
- cursor: "pointer",
+ ".headerItem": {
+ userSelect: "none",
+ fontWeight: 700,
+ fontSize: 14,
+ fontStyle: "initial",
+ },
+ ".ReactVirtualized__Table__headerRow": {
+ fontWeight: 700,
+ fontSize: 14,
+ borderColor: "#39393980",
+ textTransform: "initial",
+ },
+ ".optionsAlignment": {
+ textAlign: "center",
+ },
+ ".text-center": {
+ textAlign: "center",
+ },
+ ".text-right": {
+ textAlign: "right",
+ },
},
...checkboxIcons,
...radioIcons,
});
-// Function that renders Title Columns
-const titleColumnsMap = (columns: IColumns[]) => {
- return columns.map((column: IColumns, index: number) => {
- return (
-
- {column.label}
-
- );
- });
-};
+const selectWidth = 45;
-// Function that renders Rows
-const rowColumnsMap = (
- columns: IColumns[],
- itemData: any,
- classes: any,
+// Function to render elements in table
+const subRenderFunction = (
+ rowData: any,
+ column: IColumns,
isSelected: boolean
) => {
- return columns.map((column: IColumns, index: number) => {
- const itemElement = isString(itemData)
- ? itemData
- : get(itemData, column.elementKey, null); // If the element is just a string, we render it as it is
- const renderConst = column.renderFullObject ? itemData : itemElement;
+ const itemElement = isString(rowData)
+ ? rowData
+ : get(rowData, column.elementKey, null); // If the element is just a string, we render it as it is
+ const renderConst = column.renderFullObject ? rowData : itemElement;
- const renderElement = column.renderFunction
- ? column.renderFunction(renderConst)
- : renderConst; // If render function is set, we send the value to the function.
+ const renderElement = column.renderFunction
+ ? column.renderFunction(renderConst)
+ : renderConst; // If render function is set, we send the value to the function.
+
+ return (
+
+ {renderElement}
+
+ );
+};
+
+// Function to calculate common column width for elements with no with size
+const calculateColumnRest = (
+ columns: IColumns[],
+ containerWidth: number,
+ actionsWidth: number,
+ hasSelect: boolean,
+ hasActions: boolean
+) => {
+ let initialValue = containerWidth;
+
+ if (hasSelect) {
+ initialValue -= selectWidth;
+ }
+
+ if (hasActions) {
+ initialValue -= actionsWidth;
+ }
+
+ let freeSpacing = columns.reduce((total, currValue) => {
+ return currValue.width ? total - currValue.width : total;
+ }, initialValue);
+
+ return freeSpacing / columns.filter((el) => !el.width).length;
+};
+
+// Function that renders Columns in table
+const generateColumnsMap = (
+ columns: IColumns[],
+ containerWidth: number,
+ actionsWidth: number,
+ hasSelect: boolean,
+ hasActions: boolean,
+ selectedItems: string[],
+ idField: string
+) => {
+ const commonRestWidth = calculateColumnRest(
+ columns,
+ containerWidth,
+ actionsWidth,
+ hasSelect,
+ hasActions
+ );
+ return columns.map((column: IColumns, index: number) => {
return (
-
- {renderElement}
-
+ headerRenderer={() => {column.label}}
+ className={
+ column.contentTextAlign ? `text-${column.contentTextAlign}` : ""
+ }
+ cellRenderer={({ rowData }) => {
+ const isSelected = selectedItems
+ ? selectedItems.includes(
+ isString(rowData) ? rowData : rowData[idField]
+ )
+ : false;
+ return subRenderFunction(rowData, column, isSelected);
+ }}
+ width={column.width || commonRestWidth}
+ />
);
});
};
@@ -265,6 +332,22 @@ const elementActions = (
});
};
+// Function to calculate the options column width according elements inside
+const calculateOptionsSize = (containerWidth: number, totalOptions: number) => {
+ const minContainerSize = 80;
+ const sizeOptions = totalOptions * 45;
+
+ if (sizeOptions < minContainerSize) {
+ return minContainerSize;
+ }
+
+ if (sizeOptions > containerWidth) {
+ return containerWidth;
+ }
+
+ return sizeOptions;
+};
+
// Main function to render the Table Wrapper
const TableWrapper = ({
itemActions,
@@ -276,10 +359,9 @@ const TableWrapper = ({
selectedItems,
idField,
classes,
- stickyHeader = false,
radioSelection = false,
customEmptyMessage = "",
- paginatorConfig,
+ customPaperHeight = "",
}: TableWrapperProps) => {
const findView = itemActions
? itemActions.find((el) => el.type === "view")
@@ -301,7 +383,13 @@ const TableWrapper = ({
return (
-
+
{isLoading && (
@@ -313,104 +401,133 @@ const TableWrapper = ({
)}
{records && !isLoading && records.length > 0 ? (
-
-
-
- {onSelect && selectedItems && (
-
- Select
-
- )}
- {titleColumnsMap(columns)}
- {((itemActions && itemActions.length > 1) ||
- (itemActions &&
- itemActions.length === 1 &&
- itemActions[0].type !== "view")) && (
-
- Actions
-
- )}
-
-
-
- {records.map((record: any, index: number) => {
- const isSelected = selectedItems
- ? selectedItems.includes(
- isString(record) ? record : record[idField]
- )
- : false;
+
+ {({ width, height }: any) => {
+ const optionsWidth = calculateOptionsSize(
+ width,
+ itemActions
+ ? itemActions.filter((el) => el.type !== "view").length
+ : 0
+ );
+ const hasSelect: boolean = !!(onSelect && selectedItems);
+ const hasOptions: boolean = !!(
+ (itemActions && itemActions.length > 1) ||
+ (itemActions &&
+ itemActions.length === 1 &&
+ itemActions[0].type !== "view")
+ );
+ return (
+ (
+
+ {customEmptyMessage !== ""
+ ? customEmptyMessage
+ : `There are no ${entityName} yet.`}
+
+ )}
+ overscanRowCount={10}
+ rowHeight={40}
+ width={width}
+ rowCount={records.length}
+ rowGetter={({ index }) => records[index]}
+ onRowClick={({ rowData }) => {
+ clickAction(rowData);
+ }}
+ rowClassName={`rowLine ${findView ? "canClick" : ""}`}
+ >
+ {hasSelect && (
+ (
+ Select
+ )}
+ dataKey={idField}
+ width={selectWidth}
+ cellRenderer={({ rowData }) => {
+ const isSelected = selectedItems
+ ? selectedItems.includes(
+ isString(rowData) ? rowData : rowData[idField]
+ )
+ : false;
- return (
- {
- clickAction(record);
- }}
- >
- {onSelect && selectedItems && (
-
- {
- e.stopPropagation();
- }}
- checkedIcon={
-
- }
- icon={
-
- }
- />
-
- )}
- {rowColumnsMap(columns, record, classes, isSelected)}
- {((itemActions && itemActions.length > 1) ||
- (itemActions &&
- itemActions.length === 1 &&
- itemActions[0].type !== "view")) && (
-
- {elementActions(
- itemActions,
- record,
+ return (
+ {
+ e.stopPropagation();
+ }}
+ checkedIcon={
+
+ }
+ icon={
+
+ }
+ />
+ );
+ }}
+ />
+ )}
+ {generateColumnsMap(
+ columns,
+ width,
+ optionsWidth,
+ hasSelect,
+ hasOptions,
+ selectedItems || [],
+ idField
+ )}
+ {hasOptions && (
+ (
+ Options
+ )}
+ dataKey={idField}
+ width={optionsWidth}
+ headerClassName="optionsAlignment"
+ className="optionsAlignment"
+ cellRenderer={({ rowData }) => {
+ const isSelected = selectedItems
+ ? selectedItems.includes(
+ isString(rowData) ? rowData : rowData[idField]
+ )
+ : false;
+ return elementActions(
+ itemActions || [],
+ rowData,
isSelected,
idField
- )}
-
- )}
-
- );
- })}
-
-
+ );
+ }}
+ />
+ )}
+
+ );
+ }}
+
) : (
{!isLoading && (
@@ -423,20 +540,6 @@ const TableWrapper = ({
)}
- {paginatorConfig && (
-
-
-
- )}
);
};
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index c61400e88..80369b207 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -257,20 +257,6 @@ const Groups = ({ classes }: IGroupsProps) => {
records={filteredRecords}
entityName="Groups"
idField=""
- 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,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
index bd9bf103a..d6bf477e4 100644
--- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
+++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
@@ -27,7 +27,10 @@ import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
+import {
+ actionsTray,
+ selectorsCommon,
+} from "../Common/FormComponents/common/styleLibrary";
interface IGroupsProps {
classes: any;
@@ -102,6 +105,7 @@ const styles = (theme: Theme) =>
},
},
...actionsTray,
+ ...selectorsCommon,
});
const UsersSelectors = ({
@@ -211,6 +215,7 @@ const UsersSelectors = ({
records={filteredRecords}
entityName="Users"
idField="accessKey"
+ customPaperHeight={classes.multiSelectTable}
/>
diff --git a/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx
index 7342e9cab..a4b86591f 100644
--- a/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx
@@ -205,27 +205,6 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
records={filteredRecords}
entityName="Notification Endpoints"
idField="service_name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: totalRecords,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: (event: unknown, newPage: number) => {
- setPage(newPage);
- },
- onChangeRowsPerPage: (
- event: React.ChangeEvent
- ) => {
- const rPP = parseInt(event.target.value, 10);
- setRowsPerPage(rPP);
- },
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
index fa7021908..31223fad1 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -94,6 +94,9 @@ const styles = (theme: Theme) =>
backgroundImage: "url(/images/ob_bucket_filled.svg)",
},
},
+ browsePaper: {
+ height: "calc(100vh - 280px)",
+ },
...actionsTray,
...searchField,
...objectBrowserCommon,
@@ -168,8 +171,6 @@ const BrowseBuckets = ({
return b.name.indexOf(filterBuckets) >= 0;
});
- const showInPage = filteredRecords.slice(offset, offset + rowsPerPage);
-
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
@@ -268,26 +269,16 @@ const BrowseBuckets = ({
renderFunction: niceBytes,
globalClass: classes.usedSpaceCol,
rowClass: classes.usedSpaceCol,
+ width: 100,
+ contentTextAlign: "right",
+ headerTextAlign: "right",
},
]}
isLoading={loading}
- records={showInPage}
+ records={filteredRecords}
entityName="Buckets"
idField="name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: filteredRecords.length,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
+ customPaperHeight={classes.browsePaper}
/>
diff --git a/portal-ui/src/screens/Console/Policies/Policies.tsx b/portal-ui/src/screens/Console/Policies/Policies.tsx
index d975c4224..42956d1c5 100644
--- a/portal-ui/src/screens/Console/Policies/Policies.tsx
+++ b/portal-ui/src/screens/Console/Policies/Policies.tsx
@@ -257,20 +257,6 @@ const Policies = ({ classes }: IPoliciesProps) => {
records={paginatedRecords}
entityName="Policies"
idField="name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: filteredRecords.length,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
index dc85ec098..1309dfc25 100644
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -25,7 +25,10 @@ import TextField from "@material-ui/core/TextField";
import api from "../../../common/api";
import { policySort } from "../../../utils/sortFunctions";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
+import {
+ actionsTray,
+ selectorsCommon,
+} from "../Common/FormComponents/common/styleLibrary";
import { PolicyList } from "./types";
interface ISelectPolicyProps {
@@ -100,6 +103,7 @@ const styles = (theme: Theme) =>
},
},
...actionsTray,
+ ...selectorsCommon,
});
const PolicySelectors = ({
@@ -188,6 +192,7 @@ const PolicySelectors = ({
records={filteredRecords}
entityName="Policies"
idField="name"
+ customPaperHeight={classes.multiSelectTable}
radioSelection
/>
diff --git a/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx b/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx
index 1e599af9e..9856fd168 100644
--- a/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx
+++ b/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx
@@ -278,20 +278,6 @@ const ServiceAccounts = ({ classes }: IServiceAccountsProps) => {
idField={""}
columns={[{ label: "Service Account", elementKey: "" }]}
itemActions={tableActions}
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 4,
- count: records.length,
- rowsPerPage: rowsPerPage,
- page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index 9f03d73a9..9d842cf2c 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -301,20 +301,6 @@ const ListTenants = ({ classes }: ITenantsList) => {
records={filteredRecords}
entityName="Tenants"
idField="name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: filteredRecords.length,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index f54494e06..1c9ee0135 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -280,20 +280,6 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
records={zones}
entityName="Zones"
idField="name"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: zoneCount,
- rowsPerPage: 10,
- page: 0,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- ActionsComponent: MinTablePaginationActions,
- onChangePage: () => {},
- onChangeRowsPerPage: () => {},
- }}
/>
)}
diff --git a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
index c7e7f90ff..6bab8c4aa 100644
--- a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
+++ b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
@@ -27,7 +27,10 @@ import { stringSort } from "../../../utils/sortFunctions";
import { GroupsList } from "../Groups/types";
import get from "lodash/get";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
+import {
+ actionsTray,
+ selectorsCommon,
+} from "../Common/FormComponents/common/styleLibrary";
interface IGroupsProps {
classes: any;
@@ -101,6 +104,7 @@ const styles = (theme: Theme) =>
},
},
...actionsTray,
+ ...selectorsCommon,
});
const GroupsSelectors = ({
@@ -205,6 +209,7 @@ const GroupsSelectors = ({
records={filteredRecords}
entityName="Groups"
idField=""
+ customPaperHeight={classes.multiSelectTable}
/>
diff --git a/portal-ui/src/screens/Console/Users/Users.tsx b/portal-ui/src/screens/Console/Users/Users.tsx
index ab48ff8e1..5606eacf6 100644
--- a/portal-ui/src/screens/Console/Users/Users.tsx
+++ b/portal-ui/src/screens/Console/Users/Users.tsx
@@ -361,20 +361,6 @@ class Users extends React.Component {
records={paginatedRecords}
entityName="Users"
idField="accessKey"
- paginatorConfig={{
- rowsPerPageOptions: [5, 10, 25],
- colSpan: 3,
- count: filteredRecords.length,
- rowsPerPage: rowsPerPage,
- page: page,
- SelectProps: {
- inputProps: { "aria-label": "rows per page" },
- native: true,
- },
- onChangePage: handleChangePage,
- onChangeRowsPerPage: handleChangeRowsPerPage,
- ActionsComponent: MinTablePaginationActions,
- }}
/>
diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
index 02042cae4..c1c9cc365 100644
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -1726,6 +1726,14 @@
dependencies:
"@types/react" "*"
+"@types/react-virtualized@^9.21.10":
+ version "9.21.10"
+ resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.10.tgz#cd072dc9c889291ace2c4c9de8e8c050da8738b7"
+ integrity sha512-f5Ti3A7gGdLkPPFNHTrvKblpsPNBiQoSorOEOD+JPx72g/Ng2lOt4MYfhvQFQNgyIrAro+Z643jbcKafsMW2ag==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/react" "*"
+
"@types/react@*":
version "16.9.53"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.53.tgz#40cd4f8b8d6b9528aedd1fff8fcffe7a112a3d23"
@@ -4038,7 +4046,7 @@ dom-helpers@^3.4.0:
dependencies:
"@babel/runtime" "^7.1.2"
-dom-helpers@^5.0.1:
+dom-helpers@^5.0.1, dom-helpers@^5.1.3:
version "5.2.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
@@ -9290,6 +9298,23 @@ react-transition-group@^4.4.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"
+react-virtualized@^9.22.2:
+ version "9.22.2"
+ resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.2.tgz#217a870bad91e5438f46f01a009e1d8ce1060a5a"
+ integrity sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==
+ dependencies:
+ "@babel/runtime" "^7.7.2"
+ clsx "^1.0.4"
+ dom-helpers "^5.1.3"
+ loose-envify "^1.4.0"
+ prop-types "^15.7.2"
+ react-lifecycles-compat "^3.0.4"
+
+react-window-infinite-loader@^1.0.5:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.5.tgz#6fe094d538a88978c2c9b623052bc50cb28c2abc"
+ integrity sha512-IcPIq8lADK3zsAcqoLqQGyduicqR6jWkiK2VUX5sKSI9X/rou6OWlOEexnGyujdNTG7hSG8OVBFEhLSDs4qrxg==
+
react@^16.13.1:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"