gateways page performant

explorer/src/components/Newniversal-DataGrid.tsx

@@ -53,15 +53,9 @@ function CustomPagination() {
 
 type DataGridProps = {
   columns: GridColDef[];
-  pagination?: boolean;
-  hideFooter?: boolean | undefined;
+  pagination?: true | undefined;
   pageSize?: string | undefined;
-  rows: {
-    id: number | null;
-    lastName: string | null;
-    firstName: string | null;
-    age: number | null;
-  }[];
+  rows: any;
   loading?: boolean;
 };
 export const NewniversalDataGrid: React.FC<DataGridProps> = ({
@@ -69,14 +63,13 @@ export const NewniversalDataGrid: React.FC<DataGridProps> = ({
   columns,
   loading,
   pagination,
-  hideFooter,
   pageSize,
 }) => {
   if (loading) return <LinearProgress />;
   if (!loading)
     return (
       <DataGrid
-        pagination={pagination ? true : undefined}
+        pagination={pagination}
         rows={rows}
         components={{
           Pagination: CustomPagination,
@@ -86,7 +79,7 @@ export const NewniversalDataGrid: React.FC<DataGridProps> = ({
         rowsPerPageOptions={[5]}
         disableSelectionOnClick
         autoHeight
-        hideFooter={hideFooter}
+        hideFooter={!pagination}
         style={{
           width: '100%',
           border: 'none',
@@ -98,8 +91,6 @@ export const NewniversalDataGrid: React.FC<DataGridProps> = ({
 
 NewniversalDataGrid.defaultProps = {
   loading: false,
-  pagination: false,
-  hideFooter: true,
+  pagination: undefined,
   pageSize: '10',
-  //   sortModel: undefined,
 };

explorer/src/pages/Gateways/index.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { Button, Grid, Typography } from '@mui/material';
+import { Button, Card, Grid, Typography } from '@mui/material';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { printableCoin } from '@nymproject/nym-validator-client';
 import { SelectChangeEvent } from '@mui/material/Select';
-import {
-  cellStyles,
-  UniversalDataGrid,
-} from 'src/components/Universal-DataGrid';
 import { useMainContext } from 'src/context/main';
 import { gatewayToGridRow } from 'src/utils';
 import { GatewayResponse } from 'src/typeDefs/explorer-api';
 import { TableToolbar } from 'src/components/TableToolbar';
-import { ContentCard } from 'src/components/ContentCard';
 import { CustomColumnHeading } from 'src/components/CustomColumnHeading';
 import { Title } from 'src/components/Title';
+import {
+  cellStyles,
+  NewniversalDataGrid,
+} from 'src/components/Newniversal-DataGrid';
 
 export const PageGateways: React.FC = () => {
   const { gateways } = useMainContext();
@@ -49,8 +48,9 @@ export const PageGateways: React.FC = () => {
   const columns: GridColDef[] = [
     {
       field: 'owner',
+      headerName: 'Owner',
       renderHeader: () => <CustomColumnHeading headingTitle="Owner" />,
-      width: 200,
+      width: 380,
       headerAlign: 'left',
       headerClassName: 'MuiDataGrid-header-override',
       renderCell: (params: GridRenderCellParams) => (
@@ -61,10 +61,11 @@ export const PageGateways: React.FC = () => {
     },
     {
       field: 'identity_key',
+      headerName: 'Identity Key',
       renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
-      width: 200,
-      headerAlign: 'left',
       headerClassName: 'MuiDataGrid-header-override',
+      width: 380,
+      headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <Typography sx={cellStyles} data-testid="identity-key">
           {params.value}
@@ -73,7 +74,7 @@ export const PageGateways: React.FC = () => {
     },
     {
       field: 'bond',
-      width: 120,
+      width: 150,
       type: 'number',
       renderHeader: () => <CustomColumnHeading headingTitle="Bond" />,
       headerClassName: 'MuiDataGrid-header-override',
@@ -93,7 +94,7 @@ export const PageGateways: React.FC = () => {
     {
       field: 'host',
       renderHeader: () => <CustomColumnHeading headingTitle="IP:Port" />,
-      width: 150,
+      width: 110,
       headerAlign: 'left',
       headerClassName: 'MuiDataGrid-header-override',
       renderCell: (params: GridRenderCellParams) => (
@@ -105,7 +106,7 @@ export const PageGateways: React.FC = () => {
     {
       field: 'location',
       renderHeader: () => <CustomColumnHeading headingTitle="Location" />,
-      flex: 1,
+      width: 150,
       headerAlign: 'left',
       headerClassName: 'MuiDataGrid-header-override',
       renderCell: (params: GridRenderCellParams) => (
@@ -128,31 +129,26 @@ export const PageGateways: React.FC = () => {
     return (
       <>
         <Title text="Gateways" />
-        <Grid>
-          <Grid item>
-            <ContentCard>
+        <Grid container>
+          <Grid item xs={12}>
+            <Card
+              sx={{
+                padding: 2,
+                height: '100%',
+              }}
+            >
               <TableToolbar
                 onChangeSearch={handleSearch}
                 onChangePageSize={handlePageSize}
                 pageSize={pageSize}
                 searchTerm={searchTerm}
               />
-              <UniversalDataGrid
-                loading={gateways?.isLoading}
-                columnsData={columns}
+              <NewniversalDataGrid
                 rows={gatewayToGridRow(filteredGateways)}
+                columns={columns}
                 pageSize={pageSize}
-                pagination={gateways?.data?.length >= 12}
-                hideFooter={gateways?.data?.length < 12}
-                data-testid="gateway-data-grid"
-                sortModel={[
-                  {
-                    field: 'bond',
-                    sort: 'desc',
-                  },
-                ]}
               />
-            </ContentCard>
+            </Card>
           </Grid>
         </Grid>
       </>

explorer/src/pages/Mixnodes/index.tsx

@@ -70,6 +70,7 @@ export const PageMixnodes: React.FC = () => {
       field: 'identity_key',
       headerName: 'Identity Key',
       renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
+      headerClassName: 'MuiDataGrid-header-override',
       width: 380,
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
@@ -190,7 +191,6 @@ export const PageMixnodes: React.FC = () => {
             sx={{
               padding: 2,
               height: '100%',
-              // border: '1px solid blue',
             }}
           >
             <TableToolbar
@@ -203,7 +203,6 @@ export const PageMixnodes: React.FC = () => {
               pagination
               rows={mixnodeToGridRow(filteredMixnodes)}
               columns={columns}
-              hideFooter={false}
               pageSize={pageSize}
             />
           </Card>