Update datagrid tables with better displays and pagination (#682)

cisagov · Oct 9, 2024 · 7bfe865 · 7bfe865
1 parent fa8f95b
commit 7bfe865
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 33 deletions.
diff --git a/frontend/src/components/Logs/Logs.tsx b/frontend/src/components/Logs/Logs.tsx
@@ -162,8 +162,8 @@ export const Logs: FC<LogsProps> = () => {
   }, [filters]);
 
   return (
-    <Box>
-      <Paper elevation={2} sx={{ width: '100%' }}>
+    <Box display="flex">
+      <Paper elevation={2} sx={{ width: '100%', minHeight: '200px' }}>
         <DataGrid
           rows={logs.result}
           columns={logCols}
@@ -175,31 +175,35 @@ export const Logs: FC<LogsProps> = () => {
           onFilterModelChange={(model) => {
             setFilters(model.items);
           }}
+          initialState={{
+            pagination: { paginationModel: { pageSize: 15 } }
+          }}
+          pageSizeOptions={[15, 30, 50, 100]}
         />
-        <Dialog
-          open={openDialog}
-          onClose={() => setOpenDialog(false)}
-          scroll="paper"
-          fullWidth
-          maxWidth="lg"
-        >
-          <DialogTitle>Payload Details</DialogTitle>
-          <DialogContent>
-            <Box
-              sx={{
-                fontSize: '12px',
-                padding: 2,
-                margin: 0,
-                backgroundColor: 'black',
-                color: 'white',
-                width: '100%'
-              }}
-            >
-              <pre>{JSON.stringify(dialogDetails?.payload, null, 2)}</pre>
-            </Box>
-          </DialogContent>
-        </Dialog>
       </Paper>
+      <Dialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+        scroll="paper"
+        fullWidth
+        maxWidth="lg"
+      >
+        <DialogTitle>Payload Details</DialogTitle>
+        <DialogContent>
+          <Box
+            sx={{
+              fontSize: '12px',
+              padding: 2,
+              margin: 0,
+              backgroundColor: 'black',
+              color: 'white',
+              width: '100%'
+            }}
+          >
+            <pre>{JSON.stringify(dialogDetails?.payload, null, 2)}</pre>
+          </Box>
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 };
diff --git a/frontend/src/components/OrganizationList/OrganizationList.tsx b/frontend/src/components/OrganizationList/OrganizationList.tsx
@@ -113,14 +113,18 @@ export const OrganizationList: React.FC<{
 
   return (
     <>
-      <Paper elevation={2} sx={{ width: '100%' }}>
+      <Paper elevation={2} sx={{ width: '100%', minHeight: '200px' }}>
         <DataGrid
           rows={organizations}
           columns={orgCols}
           slots={{ toolbar: CustomToolbar }}
           slotProps={{
             toolbar: { children: addOrgButton }
           }}
+          initialState={{
+            pagination: { paginationModel: { pageSize: 15 } }
+          }}
+          pageSizeOptions={[15, 30, 50, 100]}
         />
       </Paper>
       <OrganizationForm

diff --git a/frontend/src/pages/Domains/Domains.tsx b/frontend/src/pages/Domains/Domains.tsx
@@ -176,7 +176,7 @@ export const Domains: React.FC = () => {
             </Button>
           </Stack>
         ) : isLoading === false && loadingError === false ? (
-          <Paper elevation={2} sx={{ width: '90%' }}>
+          <Paper elevation={2} sx={{ width: '90%', minHeight: '200px' }}>
             <DataGrid
               rows={domRows}
               rowCount={totalResults}

diff --git a/frontend/src/pages/Organization/OrgMembers.tsx b/frontend/src/pages/Organization/OrgMembers.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAuthContext } from 'context';
 import { Organization as OrganizationType, Role } from 'types';
-import { Alert, IconButton, Paper, Typography } from '@mui/material';
+import { Alert, Box, IconButton, Paper, Typography } from '@mui/material';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { CheckCircleOutline, RemoveCircleOutline } from '@mui/icons-material';
 import CustomToolbar from 'components/DataGrid/CustomToolbar';
@@ -117,12 +117,16 @@ export const OrgMembers: React.FC<OrgMemberProps> = ({
   };
 
   return (
-    <React.Fragment>
-      <Paper elevation={0}>
+    <Box display="flex">
+      <Paper elevation={2} sx={{ width: '100%', minHeight: '200px' }}>
         <DataGrid
           rows={userRoles}
           columns={userRoleColumns}
           slots={{ toolbar: CustomToolbar }}
+          initialState={{
+            pagination: { paginationModel: { pageSize: 15 } }
+          }}
+          pageSizeOptions={[15, 30, 50, 100]}
         />
       </Paper>
       <ConfirmDialog
@@ -167,7 +171,7 @@ export const OrgMembers: React.FC<OrgMemberProps> = ({
           </Typography>
         }
       />
-    </React.Fragment>
+    </Box>
   );
 };
 

diff --git a/frontend/src/pages/Users/Users.tsx b/frontend/src/pages/Users/Users.tsx
@@ -315,7 +315,7 @@ export const Users: React.FC = () => {
               </Button>
             </Stack>
           ) : isLoading === false && loadingError === false ? (
-            <Paper elevation={2} sx={{ width: '100%' }}>
+            <Paper elevation={2} sx={{ width: '100%', minHeight: '200px' }}>
               <DataGrid
                 rows={users}
                 columns={userCols}

diff --git a/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx b/frontend/src/pages/Vulnerabilities/Vulnerabilities.tsx
@@ -527,7 +527,7 @@ export const Vulnerabilities: React.FC<{ groupBy?: string }> = ({
             </Button>
           </Stack>
         ) : isLoading === false && loadingError === false ? (
-          <Paper elevation={2} sx={{ width: '90%' }}>
+          <Paper elevation={2} sx={{ width: '90%', minHeight: '200px' }}>
             <DataGrid
               rows={vulRows}
               rowCount={totalResults}