Skip to content

Commit

Permalink
Migrated Buckets Pages to mds
Browse files Browse the repository at this point in the history 
Migrated the Buckets page to the available mds compnents

Signed-off-by: Benjamin Perez <[email protected]>
  • Loading branch information
Benjamin Perez committed Jul 27, 2023
1 parent 3ce377d commit 4ecbe76
Show file tree
Hide file tree
Showing 55 changed files with 2,114 additions and 3,059 deletions.
2 changes: 1 addition & 1 deletion portal-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"local-storage-fallback": "^4.1.1",
"lodash": "^4.17.21",
"luxon": "^3.3.0",
"mds": "https://github.com/minio/mds.git#v0.7.0",
"mds": "https://github.com/minio/mds.git#v0.8.1",
"react": "^18.1.0",
"react-component-export-image": "^1.0.6",
"react-copy-to-clipboard": "^5.0.2",
Expand Down
5 changes: 5 additions & 0 deletions portal-ui/src/common/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,8 @@ export interface IEmbeddedCustomStyles {
inputBox: IEmbeddedInputBox;
switch: IEmbeddedSwitch;
}

export interface SelectorTypes {
label: any;
value: string;
}
131 changes: 58 additions & 73 deletions portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,14 @@
import React, { Fragment, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { Paper } from "@mui/material";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";

import { TabPanel } from "../../../shared/tabs";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import { DataTable, SectionTitle, Tabs } from "mds";
import { api } from "api";
import { errorToHandler } from "api/errors";
import {
CONSOLE_UI_RESOURCE,
IAM_PAGES,
IAM_SCOPES,
} from "../../../../common/SecureComponent/permissions";
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
import {
hasPermission,
SecureComponent,
Expand All @@ -38,15 +34,6 @@ import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useAppDispatch } from "../../../../store";
import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
import { api } from "api";
import { errorToHandler } from "api/errors";

function a11yProps(index: any) {
return {
id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`,
};
}

const AccessDetails = () => {
const dispatch = useAppDispatch();
Expand All @@ -55,7 +42,7 @@ const AccessDetails = () => {

const loadingBucket = useSelector(selBucketDetailsLoading);

const [curTab, setCurTab] = useState<number>(0);
const [curTab, setCurTab] = useState<string>("simple-tab-0");
const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
Expand Down Expand Up @@ -158,65 +145,63 @@ const AccessDetails = () => {

return (
<Fragment>
<PanelTitle>Access Audit</PanelTitle>
<SectionTitle separator>Access Audit</SectionTitle>
<Tabs
value={curTab}
onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
currentTabOrPath={curTab}
onTabClick={(newValue: string) => {
setCurTab(newValue);
}}
indicatorColor="primary"
textColor="primary"
aria-label="cluster-tabs"
variant="scrollable"
scrollButtons="auto"
>
{displayPoliciesList && <Tab label="Policies" {...a11yProps(0)} />}
{displayUsersList && <Tab label="Users" {...a11yProps(1)} />}
</Tabs>
<Paper>
<TabPanel index={0} value={curTab}>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
resource={bucketName}
errorProps={{ disabled: true }}
>
{bucketPolicy && (
<TableWrapper
noBackground={true}
itemActions={PolicyActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingPolicies}
records={bucketPolicy}
entityName="Policies"
idField="name"
/>
)}
</SecureComponent>
</TabPanel>

<TabPanel index={1} value={curTab}>
<SecureComponent
scopes={[
IAM_SCOPES.ADMIN_GET_POLICY,
IAM_SCOPES.ADMIN_LIST_USERS,
IAM_SCOPES.ADMIN_LIST_GROUPS,
]}
resource={bucketName}
matchAll
errorProps={{ disabled: true }}
>
<TableWrapper
noBackground={true}
itemActions={userTableActions}
columns={[{ label: "User", elementKey: "accessKey" }]}
isLoading={loadingUsers}
records={bucketUsers}
entityName="Users"
idField="accessKey"
/>
</SecureComponent>
</TabPanel>
</Paper>
horizontal
options={[
{
tabConfig: { label: "Policies", id: "simple-tab-0" },
content: (
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
resource={bucketName}
errorProps={{ disabled: true }}
>
{bucketPolicy && (
<DataTable
noBackground={true}
itemActions={PolicyActions}
columns={[{ label: "Name", elementKey: "name" }]}
isLoading={loadingPolicies}
records={bucketPolicy}
entityName="Policies"
idField="name"
/>
)}
</SecureComponent>
),
},
{
tabConfig: { label: "Users", id: "simple-tab-1" },
content: (
<SecureComponent
scopes={[
IAM_SCOPES.ADMIN_GET_POLICY,
IAM_SCOPES.ADMIN_LIST_USERS,
IAM_SCOPES.ADMIN_LIST_GROUPS,
]}
resource={bucketName}
matchAll
errorProps={{ disabled: true }}
>
<DataTable
noBackground={true}
itemActions={userTableActions}
columns={[{ label: "User", elementKey: "accessKey" }]}
isLoading={loadingUsers}
records={bucketUsers}
entityName="Users"
idField="accessKey"
/>
</SecureComponent>
),
},
]}
/>
</Fragment>
);
};
Expand Down
147 changes: 58 additions & 89 deletions portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,22 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.

import React, { Fragment, useEffect, useState } from "react";
import { AddIcon, Button, DataTable, SectionTitle } from "mds";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import { AddIcon, Button } from "mds";
import createStyles from "@mui/styles/createStyles";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import Grid from "@mui/material/Grid";
import {
actionsTray,
containerForHeader,
objectBrowserCommon,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
import { api } from "api";
import { AccessRule as IAccessRule } from "api/consoleApi";
import { errorToHandler } from "api/errors";
import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
import PanelTitle from "../../Common/PanelTitle/PanelTitle";
import {
hasPermission,
SecureComponent,
} from "../../../../common/SecureComponent";

import withSuspense from "../../Common/Components/withSuspense";
import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
import makeStyles from "@mui/styles/makeStyles";
import { selBucketDetailsLoading } from "./bucketDetailsSlice";
import { useAppDispatch } from "../../../../store";
import withSuspense from "../../Common/Components/withSuspense";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import { api } from "api";
import { AccessRule as IAccessRule } from "api/consoleApi";
import { errorToHandler } from "api/errors";

const AddAccessRuleModal = withSuspense(
React.lazy(() => import("./AddAccessRule")),
Expand All @@ -55,26 +42,8 @@ const EditAccessRuleModal = withSuspense(
React.lazy(() => import("./EditAccessRule")),
);

const useStyles = makeStyles((theme: Theme) =>
createStyles({
"@global": {
".rowLine:hover .iconFileElm": {
backgroundImage: "url(/images/ob_file_filled.svg)",
},
".rowLine:hover .iconFolderElm": {
backgroundImage: "url(/images/ob_folder_filled.svg)",
},
},
...actionsTray,
...searchField,
...objectBrowserCommon,
...containerForHeader,
}),
);

const AccessRule = () => {
const dispatch = useAppDispatch();
const classes = useStyles();
const params = useParams();

const loadingBucket = useSelector(selBucketDetailsLoading);
Expand Down Expand Up @@ -196,60 +165,60 @@ const AccessRule = () => {
initial={initialAccess}
/>
)}
<Grid item xs={12} className={classes.actionsTray}>
<PanelTitle>Anonymous Access</PanelTitle>
<SecureComponent
scopes={[
IAM_SCOPES.S3_GET_BUCKET_POLICY,
IAM_SCOPES.S3_PUT_BUCKET_POLICY,
IAM_SCOPES.S3_GET_ACTIONS,
IAM_SCOPES.S3_PUT_ACTIONS,
<SectionTitle
separator
sx={{ marginBottom: 15 }}
actions={
<SecureComponent
scopes={[
IAM_SCOPES.S3_GET_BUCKET_POLICY,
IAM_SCOPES.S3_PUT_BUCKET_POLICY,
IAM_SCOPES.S3_GET_ACTIONS,
IAM_SCOPES.S3_PUT_ACTIONS,
]}
resource={bucketName}
matchAll
errorProps={{ disabled: true }}
>
<TooltipWrapper tooltip={"Add Access Rule"}>
<Button
id={"add-bucket-access-rule"}
onClick={() => {
setAddAccessRuleOpen(true);
}}
label={"Add Access Rule"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
}
>
Anonymous Access
</SectionTitle>
<SecureComponent
scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
resource={bucketName}
errorProps={{ disabled: true }}
>
<DataTable
itemActions={AccessRuleActions}
columns={[
{
label: "Prefix",
elementKey: "prefix",
renderFunction: (prefix: string) => {
return prefix || "/";
},
},
{ label: "Access", elementKey: "access" },
]}
resource={bucketName}
matchAll
errorProps={{ disabled: true }}
>
<TooltipWrapper tooltip={"Add Access Rule"}>
<Button
id={"add-bucket-access-rule"}
onClick={() => {
setAddAccessRuleOpen(true);
}}
label={"Add Access Rule"}
icon={<AddIcon />}
variant={"callAction"}
/>
</TooltipWrapper>
</SecureComponent>
</Grid>
<Grid item sx={{ border: "#EAEDEE 1px solid" }}>
<SecureComponent
scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
resource={bucketName}
errorProps={{ disabled: true }}
>
{accessRules && (
<TableWrapper
noBackground={true}
itemActions={AccessRuleActions}
columns={[
{
label: "Prefix",
elementKey: "prefix",
renderFunction: (prefix: string) => {
return prefix || "/";
},
},
{ label: "Access", elementKey: "access" },
]}
isLoading={loadingAccessRules}
records={accessRules}
entityName="Access Rules"
idField="prefix"
/>
)}
</SecureComponent>
</Grid>
isLoading={loadingAccessRules}
records={accessRules || []}
entityName="Access Rules"
idField="prefix"
/>
</SecureComponent>
</Fragment>
);
};
Expand Down
Loading

0 comments on commit 4ecbe76

Please sign in to comment.