diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/CategoryFilter.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/CategoryFilter.js index 762fe2c33e..7cea462f88 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/CategoryFilter.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/CategoryFilter.js @@ -6,20 +6,6 @@ import { Cancel } from 'iconoir-react' import { Tr } from 'client/components/HOC' -// FILTER FUNCTION -export const categoryFilterFn = (accessorOption, rows, columnsId, filterValue) => - rows.filter(row => - columnsId.some(id => { - const val = row.values[id][accessorOption] ?? row.values[id] - - return filterValue.includes(val) - }) - ) - -categoryFilterFn.autoRemove = val => !val || !val.length - -// *************************************************************** - const CategoryFilter = ({ title, column, accessorOption, multiple }) => { /** @type {import('react-table').UseFiltersInstanceProps} */ const { @@ -40,7 +26,7 @@ const CategoryFilter = ({ title, column, accessorOption, multiple }) => { }) return [...options.values()] - }, [id]) + }, [id, preFilteredRows]) const handleSelect = value => setFilter( multiple ? [...filterValue, value] : value diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js index 8742e8360d..aac43084ba 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js @@ -37,6 +37,8 @@ const EnhancedTable = ({ }) => { const classes = EnhancedTableStyles() + const isFetching = isLoading && data === undefined + const defaultColumn = React.useMemo(() => ({ Filter: DefaultFilter, disableFilters: true @@ -79,6 +81,7 @@ const EnhancedTable = ({ const { getTableProps, prepareRow, + preFilteredRows, rows, page, gotoPage, @@ -87,8 +90,8 @@ const EnhancedTable = ({ } = useTableProps const selectedRows = React.useMemo( - () => rows.filter(row => !!selectedRowIds[row.id]), - [rows, selectedRowIds] + () => preFilteredRows.filter(row => !!selectedRowIds[row.id]), + [preFilteredRows, selectedRowIds] ) const handleChangePage = newPage => { @@ -103,7 +106,7 @@ const EnhancedTable = ({
- + {!isFetching && }
{page?.length > 0 && ( - + {!isFetching && }
{/* NO DATA MESSAGE */} - {((!isLoading && data.length === 0) || page?.length === 0) && ( + {!isFetching && page?.length === 0 && ( {Tr(T.NoDataAvailable)} diff --git a/src/fireedge/src/client/components/Tables/Images/row.js b/src/fireedge/src/client/components/Tables/Images/row.js index e81e8695bf..09101d0886 100644 --- a/src/fireedge/src/client/components/Tables/Images/row.js +++ b/src/fireedge/src/client/components/Tables/Images/row.js @@ -15,11 +15,9 @@ const Row = ({ original, value, ...props }) => { const { ID, NAME, UNAME, GNAME, REGTIME, TYPE, DISK_TYPE, PERSISTENT, LOCK, DATASTORE, - VMS, RUNNING_VMS + TOTAL_VMS, RUNNING_VMS } = value - const usedByVms = [VMS?.ID ?? []].flat().length || 0 - const labels = [...new Set([ PERSISTENT && 'PERSISTENT', TYPE, DISK_TYPE])].filter(Boolean) @@ -61,9 +59,9 @@ const Row = ({ original, value, ...props }) => { {` ${DATASTORE}`} - + - {` ${RUNNING_VMS} / ${usedByVms}`} + {` ${RUNNING_VMS} / ${TOTAL_VMS}`}