F OpenNebula/one#5422: Update fetching logic with pagination

src/fireedge/src/client/components/Tables/Enhanced/index.js

@@ -65,6 +65,9 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: '1em'
+  },
+  loading: {
+    transition: '200ms'
   }
 }))
 
@@ -127,8 +130,7 @@ const EnhancedTable = ({
     page,
     gotoPage,
     pageCount,
-    state: { pageIndex, selectedRowIds },
-    ...rest
+    state: { pageIndex, selectedRowIds }
   } = useTableProps
 
   const selectedRows = React.useMemo(
@@ -161,7 +163,9 @@ const EnhancedTable = ({
           </div>
         </div>
 
-        {isLoading && <LinearProgress size='1em' color='secondary' />}
+        {isLoading && (
+          <LinearProgress size='1em' color='secondary' className={classes.loading} />
+        )}
 
         <div className={classes.body}>
           {page.map(row => {

src/fireedge/src/client/components/Tables/Vms/columns.js

@@ -22,6 +22,6 @@ export default [
   {
     Header: 'Hostname',
     id: 'HOSTNAME',
-    accessor: row => VirtualMachineModel.getLastHistory(row)?.HOSTNAME
+    accessor: row => VirtualMachineModel.getLastHistory(row)?.HOSTNAME ?? '--'
   }
 ]

src/fireedge/src/client/components/Tables/Vms/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect } from 'react'
 
 import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
@@ -10,46 +10,42 @@ import VmRow from 'client/components/Tables/Vms/row'
 import VmDetail from 'client/components/Tables/Vms/detail'
 
 const INITIAL_ELEMENT = 0
-const NUMBER_OF_INTERVAL = 12
+const INTERVAL_ON_FIRST_RENDER = 2_500
 
 const VmsTable = () => {
-  const [[start, end], setPage] = useState([INITIAL_ELEMENT, -NUMBER_OF_INTERVAL])
-
   const columns = React.useMemo(() => VmColumns, [])
 
   const vms = useVm()
   const { getVms } = useVmApi()
   const { filterPool } = useAuth()
 
-  const { data, fetchRequest, loading, reloading, error } = useFetch(getVms)
+  const { status, data, fetchRequest, loading, reloading, error } = useFetch(getVms)
 
-  useEffect(() => { fetchRequest({ start, end }) }, [filterPool])
+  useEffect(() => {
+    const requests = {
+      INIT: () => fetchRequest({ start: INITIAL_ELEMENT, end: -INTERVAL_ON_FIRST_RENDER }),
+      FETCHED: () => {
+        const canFetchMore = !error && data?.vms?.length === INTERVAL_ON_FIRST_RENDER
 
-  const fetchMore = useCallback(() => {
-    setPage(([prevStart, prevEnd]) => {
-      const newStart = prevStart + NUMBER_OF_INTERVAL
-      const newEnd = prevEnd - NUMBER_OF_INTERVAL
+        // fetch the rest of VMs, from 0 to last VM ID fetched
+        canFetchMore && fetchRequest({
+          start: INITIAL_ELEMENT,
+          end: data?.vms[INTERVAL_ON_FIRST_RENDER - 1]?.ID
+        })
+      }
+    }
 
-      fetchRequest({ start: newStart, end: newEnd })
-
-      return [newStart, newEnd]
-    })
-  }, [start, end])
-
-  const canFetchMore = !error && data?.vms?.length % NUMBER_OF_INTERVAL === 0
+    requests[status]?.()
+  }, [filterPool, status, data])
 
   return (
     <EnhancedTable
       columns={columns}
       data={vms}
-      pageSize={NUMBER_OF_INTERVAL / 2}
       isLoading={loading || reloading}
-      showPageCount={false}
       getRowId={row => String(row.ID)}
       RowComponent={VmRow}
       renderDetail={row => <VmDetail id={row.ID} />}
-      canFetchMore={canFetchMore}
-      fetchMore={fetchMore}
     />
   )
 }