diff --git a/src/fireedge/src/client/components/Tabs/Zone/Info/index.js b/src/fireedge/src/client/components/Tabs/Zone/Info/index.js index 3e1a567f4a..45a46a080a 100644 --- a/src/fireedge/src/client/components/Tabs/Zone/Info/index.js +++ b/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) => { diff --git a/src/fireedge/src/client/components/Tabs/Zone/index.js b/src/fireedge/src/client/components/Tabs/Zone/index.js index 168dd8a16d..0b04ca7361 100644 --- a/src/fireedge/src/client/components/Tabs/Zone/index.js +++ b/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) { + return + } + + return }) ZoneTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js index 84ee574e6b..f71268d3a2 100644 --- a/src/fireedge/src/client/containers/Zones/index.js +++ b/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 PropTypes from 'prop-types' +import { Box, Chip, Stack, Typography } from '@mui/material' +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 { Typography, Box, Stack, Chip } from '@mui/material' +import PropTypes from 'prop-types' +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={} tooltip={Tr(T.Refresh)} isSubmitting={isFetching} - onClick={() => get({ id })} + onClick={() => get(id)} /> {typeof gotoPage === 'function' && (