Skip to content

Commit

Permalink
[WIFI-13549] Fix for venues with large amount of APs
Browse files Browse the repository at this point in the history 
Signed-off-by: Charles <[email protected]>
  • Loading branch information
@BourqueCharles
BourqueCharles committed Mar 27, 2024
1 parent 65f4832 commit 7df9560
Show file tree
Hide file tree
Showing 8 changed files with 427 additions and 137 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "wlan-cloud-owprov-ui",
"version": "3.0.2(2)",
"version": "3.0.2(3)",
"description": "",
"main": "index.tsx",
"scripts": {
Expand Down
240 changes: 124 additions & 116 deletions src/components/DataTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
Spinner,
Heading,
useBreakpoint,
TableContainer,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import {
Expand Down Expand Up @@ -63,6 +64,7 @@ type DataTableProps<TValue> = {
isManual?: boolean;
saveSettingsId?: string;
showAllRows?: boolean;
disabledPaginationAutoReset?: boolean;
};

type TableInstanceWithHooks<T extends object> = TableInstance<T> &
Expand All @@ -89,6 +91,7 @@ const DataTable = <TValue extends object>({
showAllRows,
onRowClick,
isRowClickable,
disabledPaginationAutoReset,
}: DataTableProps<TValue>) => {
const { t } = useTranslation();
const breakpoint = useBreakpoint();
Expand Down Expand Up @@ -141,6 +144,7 @@ const DataTable = <TValue extends object>({
// @ts-ignore
initialState: { sortBy, pagination: !hideControls, pageSize: queryPageSize },
manualPagination: isManual,
autoResetPage: !disabledPaginationAutoReset,
pageCount:
isManual && count !== undefined
? Math.ceil(count / queryPageSize)
Expand All @@ -164,7 +168,9 @@ const DataTable = <TValue extends object>({
};

useEffect(() => {
if (setPageInfo && pageIndex !== undefined) setPageInfo({ index: pageIndex, limit: queryPageSize });
if (setPageInfo && pageIndex !== undefined) {
setPageInfo({ index: pageIndex, limit: queryPageSize });
}
}, [queryPageSize, pageIndex]);

useEffect(() => {
Expand Down Expand Up @@ -214,132 +220,134 @@ const DataTable = <TValue extends object>({
// Render the UI for your table
return (
<>
<Box minHeight={computedMinHeight()} position="relative">
<Box minH={computedMinHeight()} position="relative">
<LoadingOverlay isLoading={isManual !== undefined && isManual && isLoading !== undefined && isLoading}>
<Table {...getTableProps()} size="small" textColor={textColor} w="100%">
<Thead fontSize="14px">
{
// @ts-ignore
headerGroups.map((group) => (
<Tr {...group.getHeaderGroupProps()} key={uuid()}>
{
// @ts-ignore
group.headers.map((column) => (
<Th
color="gray.400"
{...column.getHeaderProps()}
// @ts-ignore
minWidth={column.customMinWidth ?? null}
// @ts-ignore
maxWidth={column.customMaxWidth ?? null}
// @ts-ignore
width={column.customWidth ?? null}
>
<div
// @ts-ignore
{...column.getSortByToggleProps()}
style={{
alignContent: 'center',
overflow: 'hidden',
whiteSpace: 'nowrap',
// @ts-ignore
paddingTop: column.canSort ? '' : '4px',
}}
>
{column.render('Header')}
<SortIcon
// @ts-ignore
isSorted={column.isSorted}
// @ts-ignore
isSortedDesc={column.isSortedDesc}
// @ts-ignore
canSort={column.canSort}
/>
</div>
</Th>
))
}
</Tr>
))
}
</Thead>
{data.length > 0 && (
<Tbody {...getTableBodyProps()}>
{page.map((row: Row<TValue>) => {
prepareRow(row);
const rowIsClickable = isRowClickable ? isRowClickable(row.original) : true;
const onClick = rowIsClickable && onRowClick ? () => onRowClick(row.original) : undefined;
return (
<Tr
{...row.getRowProps()}
key={uuid()}
_hover={{
backgroundColor: hoveredRowBg,
}}
onClick={onClick}
>
<TableContainer minH={computedMinHeight()}>
<Table {...getTableProps()} size="small" textColor={textColor} w="100%">
<Thead fontSize="14px">
{
// @ts-ignore
headerGroups.map((group) => (
<Tr {...group.getHeaderGroupProps()} key={uuid()}>
{
// @ts-ignore
row.cells.map((cell) => (
<Td
key={uuid()}
px={1}
// @ts-ignore
minWidth={cell.column.customMinWidth ?? undefined}
group.headers.map((column) => (
<Th
color="gray.400"
{...column.getHeaderProps()}
// @ts-ignore
maxWidth={cell.column.customMaxWidth ?? undefined}
minWidth={column.customMinWidth ?? null}
// @ts-ignore
width={cell.column.customWidth ?? undefined}
textOverflow="ellipsis"
overflow="hidden"
whiteSpace="nowrap"
fontSize="14px"
maxWidth={column.customMaxWidth ?? null}
// @ts-ignore
textAlign={cell.column.isCentered ? 'center' : undefined}
fontFamily={
// @ts-ignore
cell.column.isMonospace
? 'Inter, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
: undefined
}
onClick={
// @ts-ignore
cell.column.stopPropagation || (cell.column.id === 'actions' && onRowClick)
? (e) => {
e.stopPropagation();
}
: undefined
}
cursor={
// @ts-ignore
!cell.column.stopPropagation && cell.column.id !== 'actions' && onRowClick
? 'pointer'
: undefined
}
width={column.customWidth ?? null}
>
{cell.render('Cell')}
</Td>
<div
// @ts-ignore
{...column.getSortByToggleProps()}
style={{
alignContent: 'center',
overflow: 'hidden',
whiteSpace: 'nowrap',
// @ts-ignore
paddingTop: column.canSort ? '' : '4px',
}}
>
{column.render('Header')}
<SortIcon
// @ts-ignore
isSorted={column.isSorted}
// @ts-ignore
isSortedDesc={column.isSortedDesc}
// @ts-ignore
canSort={column.canSort}
/>
</div>
</Th>
))
}
</Tr>
);
})}
</Tbody>
)}
</Table>
{!isLoading && data.length === 0 && !hideEmptyListText && (
<Center>
{obj ? (
<Heading size="md" pt={12}>
{t('common.no_obj_found', { obj })}
</Heading>
) : (
<Heading size="sm" pt={12}>
{t('common.empty_list')}
</Heading>
))
}
</Thead>
{data.length > 0 && (
<Tbody {...getTableBodyProps()}>
{page.map((row: Row<TValue>) => {
prepareRow(row);
const rowIsClickable = isRowClickable ? isRowClickable(row.original) : true;
const onClick = rowIsClickable && onRowClick ? () => onRowClick(row.original) : undefined;
return (
<Tr
{...row.getRowProps()}
key={uuid()}
_hover={{
backgroundColor: hoveredRowBg,
}}
onClick={onClick}
>
{
// @ts-ignore
row.cells.map((cell) => (
<Td
key={uuid()}
px={1}
// @ts-ignore
minWidth={cell.column.customMinWidth ?? undefined}
// @ts-ignore
maxWidth={cell.column.customMaxWidth ?? undefined}
// @ts-ignore
width={cell.column.customWidth ?? undefined}
textOverflow="ellipsis"
overflow="hidden"
whiteSpace="nowrap"
fontSize="14px"
// @ts-ignore
textAlign={cell.column.isCentered ? 'center' : undefined}
fontFamily={
// @ts-ignore
cell.column.isMonospace
? 'Inter, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
: undefined
}
onClick={
// @ts-ignore
cell.column.stopPropagation || (cell.column.id === 'actions' && onRowClick)
? (e) => {
e.stopPropagation();
}
: undefined
}
cursor={
// @ts-ignore
!cell.column.stopPropagation && cell.column.id !== 'actions' && onRowClick
? 'pointer'
: undefined
}
>
{cell.render('Cell')}
</Td>
))
}
</Tr>
);
})}
</Tbody>
)}
</Center>
)}
</Table>
{!isLoading && data.length === 0 && !hideEmptyListText && (
<Center>
{obj ? (
<Heading size="md" pt={12}>
{t('common.no_obj_found', { obj })}
</Heading>
) : (
<Heading size="sm" pt={12}>
{t('common.empty_list')}
</Heading>
)}
</Center>
)}
</TableContainer>
</LoadingOverlay>
</Box>
{!hideControls && (
Expand Down
49 changes: 49 additions & 0 deletions src/hooks/Network/Inventory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,55 @@ import { AxiosError } from 'models/Axios';
import { PageInfo, SortInfo } from 'models/Table';
import { axiosProv } from 'utils/axiosInstances';

export const useGetSelectInventoryPaginated = ({
serialNumbers,
pageInfo,
sortInfo,
}: {
serialNumbers: string[];
pageInfo?: PageInfo;
sortInfo?: SortInfo;
}) => {
const { t } = useTranslation();
const toast = useToast();
const paginatedSerials = pageInfo
? serialNumbers.slice(pageInfo.limit * pageInfo.index, pageInfo.limit * (pageInfo.index + 1))
: [];
let sortString = '';
if (sortInfo && sortInfo.length > 0) {
sortString = `&orderBy=${sortInfo.map((info) => `${info.id}:${info.sort.charAt(0)}`).join(',')}`;
}

return useQuery(
['get-inventory-with-select', serialNumbers, pageInfo],
() =>
paginatedSerials.length > 0
? axiosProv
.get(`inventory?withExtendedInfo=true&select=${paginatedSerials}${sortString}`)
.then(({ data }) => data.taglist)
: [],
{
staleTime: 30000,
keepPreviousData: true,
onError: (e: AxiosError) => {
if (!toast.isActive('get-inventory-tags-fetching-error'))
toast({
id: 'get-inventory-tags-fetching-error',
title: t('common.error'),
description: t('crud.error_fetching_obj', {
obj: t('inventory.tags'),
e: e?.response?.data?.ErrorDescription,
}),
status: 'error',
duration: 5000,
isClosable: true,
position: 'top-right',
});
},
},
);
};

export const useGetInventoryTableSpecs = () =>
useQuery(
['get-inventory-table-spec'],
Expand Down
Loading

0 comments on commit 7df9560

Please sign in to comment.