feat: Edits to the resource's and role's UI (#289)

visualization_tool/docs/USAGE.md

@@ -8,13 +8,13 @@ To run the tool, you can use the following command `gcp-scanner-visualizer`. The
 
 Then you can open your browser and navigate to `http://localhost:8080` to use the tool.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/start_page.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/start_page.webp)
 
 ## Uploading the results
 
-To upload the results, head to the `Upload` Section and click on the `Choose File` button. Then select the JSON file that you want to upload and click on the `Plus` icon.
+To upload the results, head to the `Upload` Section and click on the `Choose File` button. Then choose the JSON file that you want to upload. Note that you can upload multiple files at once.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/upload.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/upload.webp)
 
 After uploading the result file, the tool will scan the file and append the results to UI.
 
@@ -28,39 +28,39 @@ There are two main pages in the tool:
 
 This is the main page and it shows the list of resources that were found in the result file. You can click on the `Details` button to see more details about the resource.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/details.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/details.webp)
 
 #### Sorting and filtering resources
 
 You can sort the shown resources by their name or creation time. By default, the resources are sorted by their creation date in descending order and you can change the sorting type from the `Sort` Section on the left menu.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/sort.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/sort.webp)
 
 The tool provides several options to filter the resources. You can filter the resources by:
 
 - Project
 - Resource Type
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/filter.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/filter.webp)
 
 #### Searching for resources
 
 You can search for resources by their name in the search bar. The tool will show the resources that contain the search term in their name.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/search_resources.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/search_resources.webp)
 
 ### IAM Policy Page
 
-This page shows the list of IAM policies that were found in the result file. The policies are visualized in a table view with each row represents a single role and the roles names prefixed with the project name.
+This page shows the list of IAM policies that were found in the result file. The policies are visualized in a table view with each row represents a single role. The roles are grouped by the project that they belong to.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/iam_policies.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/iam_policies.webp)
 
 To see the members of a role, you can click on the icon next to the role name to expand the role.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/expand_role.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/expand_role.webp)
 
 #### Searching for IAM policies
 
 You can search for a member in the IAM policies by using the search bar. The tool will show the policies that contain the email address of the member in the search bar.
 
-![GCP Scanner Visualizer](../misc/visualization_tool_images/search_role.webp)
+![GCP Scanner Visualizer](../../misc/visualization_tool_images/search_role.webp)

visualization_tool/src/components/ResourcesList/ResourcesList.css

@@ -16,20 +16,15 @@
 .resources-list__table {
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
+  gap: 15px;
 }
 
 .resources-list__table__card {
   width: 210px;
-  padding: 10px 12px 30px 12px;
+  padding: 20px 15px 25px 15px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
 }
 
-.resources-list__table__card img {
-  width: 55px;
-  margin-bottom: 10px;
-}
-
 .resource-name {
   color: #000;
   font-family: Inter;
@@ -42,12 +37,22 @@
   overflow: hidden;
 }
 
+.resources-image {
+  width: 40px;
+}
+
 .resource-type {
   color: #a3a3a3;
   font-family: Inter;
   font-size: 16px;
   font-weight: 400;
-  margin-bottom: 20px;
+}
+
+.resource-type_container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-block: 10px;
 }
 
 .resource-status {

visualization_tool/src/components/ResourcesList/ResourcesList.tsx

@@ -44,9 +44,11 @@ const ResourcesList = ({
         {filteredResources.map(resource => {
           return (
             <div className="resources-list__table__card" key={resource.id}>
-              <img src={typeToImage(resource)} alt="" />
               <p className="resource-name">{resource.name}</p>
-              <p className="resource-type">{resource.type}</p>
+              <div className="resource-type_container">
+                <img src={typeToImage(resource)} className="resources-image" />
+                <p className="resource-type">{resource.type}</p>
+              </div>
               <p
                 className="resource-status"
                 style={{

visualization_tool/src/components/RolesList/RolesList.tsx

@@ -20,14 +20,14 @@ type RolesListProps = {
 
 const RolesList = ({roles, emailQuery, allowedProjects}: RolesListProps) => {
   const filteredRoles = useFilter(roles, emailQuery, allowedProjects);
-  // console.log(filteredRoles);
+  const projects = [...new Set(roles.map(role => role.projectId))];
 
   return (
     <div className="roles-list">
       <h1>{roles.length > 0 ? 'Found Roles' : 'No Roles Found'}</h1>
       {filteredRoles.length > 0 && (
         <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
+          <Table aria-label="collapsible table" size="small">
             <TableHead>
               <TableRow>
                 <TableCell
@@ -39,17 +39,54 @@ const RolesList = ({roles, emailQuery, allowedProjects}: RolesListProps) => {
                 <TableCell
                   sx={{
                     fontWeight: 'bold',
-                    fontSize: '1rem',
+                    fontSize: '1.1rem',
                   }}
                 >
                   Role
                 </TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
-              {filteredRoles.map(role => (
-                <Row key={role.role} row={role} />
-              ))}
+              {
+                // create a outer cell for each project
+                projects.map(project => {
+                  // filter roles by project
+                  const projectRoles = filteredRoles.filter(
+                    role => role.projectId === project
+                  );
+                  return (
+                    <>
+                      <TableRow
+                        sx={{
+                          backgroundColor: '#f5f5f5',
+                        }}
+                        key={project}
+                      >
+                        <TableCell
+                          sx={{
+                            width: '10px',
+                            padding: '0px',
+                          }}
+                        />
+                        <TableCell
+                          sx={{
+                            fontWeight: 'bold',
+                            fontSize: '1.05rem',
+                          }}
+                        >
+                          {project}
+                        </TableCell>
+                      </TableRow>
+                      {
+                        // create a row for each role
+                        projectRoles.map(role => (
+                          <Row key={`${role.role}__${project}`} row={role} />
+                        ))
+                      }
+                    </>
+                  );
+                })
+              }
             </TableBody>
           </Table>
         </TableContainer>

visualization_tool/src/components/RolesList/partials/Row.tsx

@@ -33,14 +33,7 @@ const Row = ({row}: RowProps) => {
             {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </TableCell>
-        <TableCell
-          component="th"
-          scope="row"
-          sx={{
-            padding: '0px',
-            margin: '0px',
-          }}
-        >
+        <TableCell component="th" scope="row">
           {row.role}
         </TableCell>
       </TableRow>

visualization_tool/src/parser/parser.ts

@@ -73,7 +73,7 @@ const parseIAMRoles = (data: OutputFile, fileName: string) => {
       roles.push({
         file: fileName,
         projectId,
-        role: `${projectId}__${role.role.split('/')[1]}`,
+        role: `${role.role.split('/')[1]}`,
         members: role.members.map(member => {
           return {
             memberType: member.split(':')[0],