B OpenNebula/one#6120: Fix datatable zones (#3026)

Co-authored-by: Tino Vázquez <cvazquez@opennebula.io>

src/fireedge/src/client/components/Tabs/Zone/Info/index.js

@@ -46,7 +46,7 @@ const ZoneInfoTab = ({ tabProps = {}, id }) => {
   } = tabProps
 
   const [update] = useUpdateZoneMutation()
-  const { data: zone = {} } = useGetZoneQuery({ id })
+  const { data: zone = {} } = useGetZoneQuery(id)
   const { TEMPLATE } = zone
 
   const handleAttributeInXml = async (path, newValue) => {

src/fireedge/src/client/components/Tabs/Zone/index.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import { Alert, LinearProgress } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'
 
+import { RESOURCE_NAMES } from 'client/constants'
 import { useViews } from 'client/features/Auth'
 import { useGetZoneQuery } from 'client/features/OneApi/zone'
 import { getAvailableInfoTabs } from 'client/models/Helper'
-import { RESOURCE_NAMES } from 'client/constants'
 
 import Tabs from 'client/components/Tabs'
 import Info from 'client/components/Tabs/Zone/Info'
@@ -32,14 +32,16 @@ const getTabComponent = (tabName) =>
 
 const ZoneTabs = memo(({ id }) => {
   const { view, getResourceView } = useViews()
-  const { isLoading, isError, error } = useGetZoneQuery(id)
+  const { isError, error, status, data } = useGetZoneQuery(id, {
+    refetchOnMountOrArgChange: 10,
+  })
 
   const tabsAvailable = useMemo(() => {
-    const resource = RESOURCE_NAMES.ZONE
+    const resource = RESOURCE_NAMES.HOST
     const infoTabs = getResourceView(resource)?.['info-tabs'] ?? {}
 
     return getAvailableInfoTabs(infoTabs, getTabComponent, id)
-  }, [view])
+  }, [view, id])
 
   if (isError) {
     return (
@@ -49,11 +51,11 @@ const ZoneTabs = memo(({ id }) => {
     )
   }
 
-  return isLoading ? (
+  if (status === 'fulfilled' || id === data?.ID) {
-    <LinearProgress color="secondary" sx={{ width: '100%' }} />
+    return <Tabs addBorder tabs={tabsAvailable} />
-  ) : (
+  }
-    <Tabs addBorder tabs={tabsAvailable ?? []} />
+
-  )
+  return <LinearProgress color="secondary" sx={{ width: '100%' }} />
 })
 
 ZoneTabs.propTypes = { id: PropTypes.string.isRequired }

src/fireedge/src/client/containers/Zones/index.js

@@ -13,25 +13,25 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { ReactElement, useState, memo } from 'react'
+import { Box, Chip, Stack, Typography } from '@mui/material'
-import PropTypes from 'prop-types'
+import Cancel from 'iconoir-react/dist/Cancel'
 import GotoIcon from 'iconoir-react/dist/Pin'
 import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
-import Cancel from 'iconoir-react/dist/Cancel'
+import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { ReactElement, memo, useState } from 'react'
 import { Row } from 'react-table'
 
+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+import MultipleTags from 'client/components/MultipleTags'
+import SplitPane from 'client/components/SplitPane'
+import { ZonesTable } from 'client/components/Tables'
+import ZoneTabs from 'client/components/Tabs/Zone'
+import { T, Zone } from 'client/constants'
 import {
   useLazyGetZoneQuery,
   useUpdateZoneMutation,
 } from 'client/features/OneApi/zone'
-import { ZonesTable } from 'client/components/Tables'
-import ZoneTabs from 'client/components/Tabs/Zone'
-import SplitPane from 'client/components/SplitPane'
-import MultipleTags from 'client/components/MultipleTags'
-import { SubmitButton } from 'client/components/FormControl'
-import { Tr } from 'client/components/HOC'
-import { T, Zone } from 'client/constants'
 
 /**
  * Displays a list of Zones with a split pane between the list and selected row(s).
@@ -99,7 +99,7 @@ const InfoTabs = memo(({ zone, gotoPage, unselect }) => {
           icon={<RefreshDouble />}
           tooltip={Tr(T.Refresh)}
           isSubmitting={isFetching}
-          onClick={() => get({ id })}
+          onClick={() => get(id)}
         />
         {typeof gotoPage === 'function' && (
           <SubmitButton