1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-16 22:50:10 +03:00
This commit is contained in:
Sergio Betanzos 2021-06-28 17:02:54 +02:00
parent d49bc3d94d
commit c6da2438b7
No known key found for this signature in database
GPG Key ID: E3E704F097737136
3 changed files with 12 additions and 25 deletions

View File

@ -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

View File

@ -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 = ({
<SplitPane>
<Box {...getTableProps()} className={classes.root}>
<div className={classes.toolbar}>
<Toolbar useTableProps={useTableProps} />
{!isFetching && <Toolbar useTableProps={useTableProps} />}
<div className={classes.pagination}>
{page?.length > 0 && (
<Pagination
@ -121,11 +124,11 @@ const EnhancedTable = ({
)}
<div className={classes.table}>
<Filters useTableProps={useTableProps} />
{!isFetching && <Filters useTableProps={useTableProps} />}
<div className={classes.body}>
{/* NO DATA MESSAGE */}
{((!isLoading && data.length === 0) || page?.length === 0) && (
{!isFetching && page?.length === 0 && (
<span className={classes.noDataMessage}>
<InfoEmpty />
{Tr(T.NoDataAvailable)}

View File

@ -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 }) => {
<Folder size={16} />
<span>{` ${DATASTORE}`}</span>
</span>
<span title={`Running / Used VMs: ${RUNNING_VMS} / ${usedByVms}`}>
<span title={`Running / Used VMs: ${RUNNING_VMS} / ${TOTAL_VMS}`}>
<ModernTv size={16} />
<span>{` ${RUNNING_VMS} / ${usedByVms}`}</span>
<span>{` ${RUNNING_VMS} / ${TOTAL_VMS}`}</span>
</span>
</div>
</div>