Set Policy For Groups (#140)

portal-ui/src/common/utils.ts

@@ -70,7 +70,7 @@ export const getBytes = (value: string, unit: string) => {
   const vl: number = parseFloat(value);
   const powFactor = units.findIndex((element) => element === unit);
 
-  if(powFactor == -1) {
+  if (powFactor == -1) {
     return 0;
   }
   const factor = Math.pow(1024, powFactor);

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

@@ -90,7 +90,7 @@ class SetAccessPolicy extends React.Component<
   componentDidMount() {
     const { actualPolicy } = this.props;
 
-    this.setState({accessPolicy: actualPolicy});
+    this.setState({ accessPolicy: actualPolicy });
   }
 
   render() {

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

@@ -22,7 +22,7 @@ import Grid from "@material-ui/core/Grid";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import api from "../../../../common/api";
-import {BucketEvent, BucketEventList, BucketInfo, BucketList} from "../types";
+import { BucketEvent, BucketEventList, BucketInfo, BucketList } from "../types";
 import { Button } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import SetAccessPolicy from "./SetAccessPolicy";
@@ -31,7 +31,7 @@ import { CreateIcon } from "../../../../icons";
 import AddEvent from "./AddEvent";
 import DeleteEvent from "./DeleteEvent";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import {niceBytes} from "../../../../common/utils";
+import { niceBytes } from "../../../../common/utils";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -111,11 +111,11 @@ const styles = (theme: Theme) =>
     },
     headerContainer: {
       display: "flex",
-      justifyContent: "space-between"
+      justifyContent: "space-between",
     },
     capitalizeFirst: {
-      textTransform: "capitalize"
-    }
+      textTransform: "capitalize",
+    },
   });
 
 interface IViewBucketProps {
@@ -199,19 +199,25 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
 
     this.setState({ loadingSize: true }, () => {
       api
-          .invoke("GET", `/api/v1/buckets`)
-          .then((res: BucketList) => {
-            const resBuckets = get(res, "buckets", []);
+        .invoke("GET", `/api/v1/buckets`)
+        .then((res: BucketList) => {
+          const resBuckets = get(res, "buckets", []);
 
-            const bucketInfo = resBuckets.find(bucket => bucket.name === bucketName) ;
+          const bucketInfo = resBuckets.find(
+            (bucket) => bucket.name === bucketName
+          );
 
-            const size = get(bucketInfo, "size", "0");
+          const size = get(bucketInfo, "size", "0");
 
-            this.setState({ loadingSize: false, errorSize: "", bucketSize: size });
-          })
-          .catch((err: any) => {
-            this.setState({ loadingSize: false, errorSize: err });
+          this.setState({
+            loadingSize: false,
+            errorSize: "",
+            bucketSize: size,
           });
+        })
+        .catch((err: any) => {
+          this.setState({ loadingSize: false, errorSize: err });
+        });
     });
   }
 
@@ -330,26 +336,30 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
           </Grid>
           <Grid item xs={12}>
             <div className={classes.headerContainer}>
-              <div><Paper className={classes.paperContainer}>
-                <div className={classes.gridContainer}>
-                  <div>Access Policy:</div>
-                  <div className={classes.capitalizeFirst}>{accessPolicy.toLowerCase()}</div>
-                  <div>Reported Usage:</div>
-                  <div>{niceBytes(bucketSize)}</div>
-                </div>
-              </Paper></div>
+              <div>
+                <Paper className={classes.paperContainer}>
+                  <div className={classes.gridContainer}>
+                    <div>Access Policy:</div>
+                    <div className={classes.capitalizeFirst}>
+                      {accessPolicy.toLowerCase()}
+                    </div>
+                    <div>Reported Usage:</div>
+                    <div>{niceBytes(bucketSize)}</div>
+                  </div>
+                </Paper>
+              </div>
               <div className={classes.masterActions}>
                 <div>
                   <Button
-                      variant="contained"
-                      color="primary"
-                      fullWidth
-                      size="medium"
-                      onClick={() => {
-                        this.setState({
-                          setAccessPolicyScreenOpen: true,
-                        });
-                      }}
+                    variant="contained"
+                    color="primary"
+                    fullWidth
+                    size="medium"
+                    onClick={() => {
+                      this.setState({
+                        setAccessPolicyScreenOpen: true,
+                      });
+                    }}
                   >
                     Change Access Policy
                   </Button>
@@ -362,10 +372,10 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
           </Grid>
           <Grid item xs={6}>
             <Tabs
-                value={0}
-                indicatorColor="primary"
-                textColor="primary"
-                aria-label="cluster-tabs"
+              value={0}
+              indicatorColor="primary"
+              textColor="primary"
+              aria-label="cluster-tabs"
             >
               <Tab label="Events" />
             </Tabs>

portal-ui/src/screens/Console/Groups/Groups.tsx

@@ -30,6 +30,7 @@ import { stringSort } from "../../../utils/sortFunctions";
 import AddGroup from "../Groups/AddGroup";
 import DeleteGroup from "./DeleteGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
+import SetPolicy from "../Policies/SetPolicy";
 
 interface IGroupsProps {
   classes: any;
@@ -96,6 +97,7 @@ const Groups = ({ classes }: IGroupsProps) => {
   const [page, setPage] = useState<number>(0);
   const [error, setError] = useState<string>("");
   const [filter, setFilter] = useState<string>("");
+  const [policyOpen, setPolicyOpen] = useState<boolean>(false);
 
   const handleChangePage = (event: unknown, newPage: number) => {
     setPage(newPage);
@@ -176,8 +178,14 @@ const Groups = ({ classes }: IGroupsProps) => {
     setSelectedGroup(group);
   };
 
+  const setPolicyAction = (selectionElement: any): void => {
+    setPolicyOpen(true);
+    setSelectedGroup(selectionElement);
+  };
+
   const tableActions = [
     { type: "view", onClick: viewAction },
+    { type: "description", onClick: setPolicyAction },
     { type: "delete", onClick: deleteAction },
   ];
 
@@ -197,6 +205,16 @@ const Groups = ({ classes }: IGroupsProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
+      {setPolicyOpen && (
+        <SetPolicy
+          open={policyOpen}
+          selectedGroup={selectedGroup}
+          selectedUser={null}
+          closeModalAndRefresh={() => {
+            setPolicyOpen(false);
+          }}
+        />
+      )}
       <Grid container>
         <Grid item xs={12}>
           <Typography variant="h6">Groups</Typography>

portal-ui/src/screens/Console/Policies/SetPolicy.tsx

@@ -34,11 +34,13 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import { Policy, PolicyList } from "./types";
 import api from "../../../common/api";
 import { policySort } from "../../../utils/sortFunctions";
+import { Group } from "../Groups/types";
 
 interface ISetPolicyProps {
   classes: any;
   closeModalAndRefresh: () => void;
   selectedUser: User | null;
+  selectedGroup: string | null;
   open: boolean;
 }
 
@@ -54,6 +56,7 @@ const SetPolicy = ({
   classes,
   closeModalAndRefresh,
   selectedUser,
+  selectedGroup,
   open,
 }: ISetPolicyProps) => {
   //Local States
@@ -79,15 +82,23 @@ const SetPolicy = ({
   };
 
   const setPolicyAction = (policyName: string) => {
-    if (selectedUser === null) {
-      return;
+    let entity = "user";
+    let value = null;
+    if (selectedGroup !== null) {
+      entity = "group";
+      value = selectedGroup;
+    } else {
+      if (selectedUser !== null) {
+        value = selectedUser.accessKey;
+      }
     }
+
     setLoading(true);
 
     api
       .invoke("PUT", `/api/v1/set-policy/${policyName}`, {
-        entityName: selectedUser!.accessKey,
-        entityType: "user",
+        entityName: value,
+        entityType: entity,
       })
       .then((res: any) => {
         setLoading(false);
@@ -102,11 +113,9 @@ const SetPolicy = ({
 
   useEffect(() => {
     if (open) {
-      console.log("im open");
-      console.log(selectedUser);
       fetchRecords();
     }
-  }, []);
+  }, [open]);
 
   return (
     <ModalWrapper

portal-ui/src/screens/Console/Users/Users.tsx

@@ -249,7 +249,6 @@ class Users extends React.Component<IUsersProps, IUsersState> {
     };
 
     const setPolicyAction = (selectionElement: any): void => {
-      console.log("click");
       this.setState({
         setPolicyOpen: true,
         selectedUser: selectionElement,
@@ -284,6 +283,7 @@ class Users extends React.Component<IUsersProps, IUsersState> {
           <SetPolicy
             open={setPolicyOpen}
             selectedUser={selectedUser}
+            selectedGroup={null}
             closeModalAndRefresh={() => {
               this.setState({ setPolicyOpen: false });
             }}