From cb90fdc9986a2267e21c719837015596af2bbb4d Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Tue, 15 Feb 2022 19:19:58 +0100 Subject: [PATCH] F #5637: Reformat logic to VMs datatable (#1777) (cherry picked from commit 779cbbceb22087f04eae3bd4d3a875a800350e9b) --- .../Steps/MarketplacesTable/index.js | 19 ++++--- .../components/Tables/Clusters/index.js | 2 +- .../components/Tables/Datastores/index.js | 2 +- .../components/Tables/DockerHubTags/index.js | 7 +-- .../components/Tables/Enhanced/index.js | 12 ++--- .../client/components/Tables/Groups/index.js | 2 +- .../client/components/Tables/Hosts/index.js | 2 +- .../client/components/Tables/Images/index.js | 2 +- .../Tables/MarketplaceApps/index.js | 2 +- .../components/Tables/Marketplaces/index.js | 11 ++-- .../client/components/Tables/Users/index.js | 2 +- .../Tables/VNetworkTemplates/index.js | 2 +- .../components/Tables/VNetworks/index.js | 2 +- .../components/Tables/VRouters/index.js | 2 +- .../components/Tables/VmTemplates/index.js | 2 +- .../src/client/components/Tables/Vms/index.js | 53 ++++++++++++------- .../client/components/Tables/Zones/index.js | 2 +- src/fireedge/src/client/models/Marketplace.js | 24 +++++++++ 18 files changed, 95 insertions(+), 55 deletions(-) diff --git a/src/fireedge/src/client/components/Forms/MarketplaceApp/CreateForm/Steps/MarketplacesTable/index.js b/src/fireedge/src/client/components/Forms/MarketplaceApp/CreateForm/Steps/MarketplacesTable/index.js index 0ea5380834..0026f7f6eb 100644 --- a/src/fireedge/src/client/components/Forms/MarketplaceApp/CreateForm/Steps/MarketplacesTable/index.js +++ b/src/fireedge/src/client/components/Forms/MarketplaceApp/CreateForm/Steps/MarketplacesTable/index.js @@ -17,8 +17,10 @@ import PropTypes from 'prop-types' import { useFormContext } from 'react-hook-form' import { useGetOneConfigQuery } from 'client/features/OneApi/system' +import { useGetMarketplacesQuery } from 'client/features/OneApi/marketplace' import { MarketplacesTable } from 'client/components/Tables' import { SCHEMA } from 'client/components/Forms/MarketplaceApp/CreateForm/Steps/MarketplacesTable/schema' +import { onedConfIncludesAction } from 'client/models/Marketplace' import { Step } from 'client/utils' import { T } from 'client/constants' @@ -41,14 +43,15 @@ const Content = ({ data }) => { onlyGlobalSearch onlyGlobalSelectedRows getRowId={(market) => String(market.NAME)} - filter={(market) => - oneConfig?.FEDERATION?.ZONE_ID === market.ZONE_ID && - oneConfig?.MARKET_MAD_CONF?.some( - (marketMad) => - marketMad?.APP_ACTIONS?.includes('create') && - `${marketMad?.NAME}`.toUpperCase() === - `${market?.MARKET_MAD}`.toUpperCase() - ) + useQuery={() => + useGetMarketplacesQuery(undefined, { + selectFromResult: ({ data: result = [], ...restOfQuery }) => ({ + data: result?.filter((market) => + onedConfIncludesAction(market, oneConfig, 'create') + ), + ...restOfQuery, + }), + }) } initialState={{ selectedRowIds: { [NAME]: true } }} onSelectedRowsChange={handleSelectedRows} diff --git a/src/fireedge/src/client/components/Tables/Clusters/index.js b/src/fireedge/src/client/components/Tables/Clusters/index.js index c2912eb046..506f7ab054 100644 --- a/src/fireedge/src/client/components/Tables/Clusters/index.js +++ b/src/fireedge/src/client/components/Tables/Clusters/index.js @@ -49,7 +49,7 @@ const ClustersTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Datastores/index.js b/src/fireedge/src/client/components/Tables/Datastores/index.js index 3f20b9d3b1..2b1ea66a49 100644 --- a/src/fireedge/src/client/components/Tables/Datastores/index.js +++ b/src/fireedge/src/client/components/Tables/Datastores/index.js @@ -54,7 +54,7 @@ const DatastoresTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/DockerHubTags/index.js b/src/fireedge/src/client/components/Tables/DockerHubTags/index.js index 27de813669..47a504a647 100644 --- a/src/fireedge/src/client/components/Tables/DockerHubTags/index.js +++ b/src/fireedge/src/client/components/Tables/DockerHubTags/index.js @@ -59,17 +59,14 @@ const DockerHubTagsTable = ({ app, ...props } = {}) => { })() }, [appId, next]) - const memoData = useMemo(() => tags, [tags?.length]) - const memoColumns = useMemo(() => [{ accessor: 'name' }], []) - if (!appId) { return <>{'App ID is required'} } return ( [{ accessor: 'name' }], [])} + data={useMemo(() => tags, [tags])} rootProps={rootProps} searchProps={searchProps} refetch={fetchRequest} diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js index 3c13543549..f5e52ecbf5 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js @@ -65,15 +65,13 @@ const EnhancedTable = ({ }) => { const styles = EnhancedTableStyles() - const isUninitialized = isLoading && data === undefined - - const defaultColumn = useMemo( - () => ({ - disableFilters: true, - }), - [] + const isUninitialized = useMemo( + () => isLoading && data === undefined, + [isLoading, data] ) + const defaultColumn = useMemo(() => ({ disableFilters: true }), []) + const sortTypes = useMemo( () => ({ length: (rowA, rowB, columnId, desc) => diff --git a/src/fireedge/src/client/components/Tables/Groups/index.js b/src/fireedge/src/client/components/Tables/Groups/index.js index 7e0eb803ce..e1bf553eb8 100644 --- a/src/fireedge/src/client/components/Tables/Groups/index.js +++ b/src/fireedge/src/client/components/Tables/Groups/index.js @@ -49,7 +49,7 @@ const GroupsTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Hosts/index.js b/src/fireedge/src/client/components/Tables/Hosts/index.js index d0c0d3b26e..eaa7e79c5a 100644 --- a/src/fireedge/src/client/components/Tables/Hosts/index.js +++ b/src/fireedge/src/client/components/Tables/Hosts/index.js @@ -54,7 +54,7 @@ const HostsTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Images/index.js b/src/fireedge/src/client/components/Tables/Images/index.js index c21c187721..6c54036937 100644 --- a/src/fireedge/src/client/components/Tables/Images/index.js +++ b/src/fireedge/src/client/components/Tables/Images/index.js @@ -49,7 +49,7 @@ const ImagesTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js index 48dd57167d..0c10a3bbc4 100644 --- a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js +++ b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js @@ -49,7 +49,7 @@ const MarketplaceAppsTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/index.js b/src/fireedge/src/client/components/Tables/Marketplaces/index.js index cb1f8b0b43..99651fe7a4 100644 --- a/src/fireedge/src/client/components/Tables/Marketplaces/index.js +++ b/src/fireedge/src/client/components/Tables/Marketplaces/index.js @@ -32,12 +32,17 @@ const DEFAULT_DATA_CY = 'marketplaces' * @returns {ReactElement} Marketplaces table */ const MarketplacesTable = ({ filter, ...props }) => { - const { rootProps = {}, searchProps = {}, ...rest } = props ?? {} + const { + rootProps = {}, + searchProps = {}, + useQuery = useGetMarketplacesQuery, + ...rest + } = props ?? {} rootProps['data-cy'] ??= DEFAULT_DATA_CY searchProps['data-cy'] ??= `search-${DEFAULT_DATA_CY}` const { view, getResourceView } = useAuth() - const { data = [], isFetching, refetch } = useGetMarketplacesQuery() + const { data = [], isFetching, refetch } = useQuery() const columns = useMemo( () => @@ -51,7 +56,7 @@ const MarketplacesTable = ({ filter, ...props }) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Users/index.js b/src/fireedge/src/client/components/Tables/Users/index.js index 23b1f62e08..b2b5531317 100644 --- a/src/fireedge/src/client/components/Tables/Users/index.js +++ b/src/fireedge/src/client/components/Tables/Users/index.js @@ -49,7 +49,7 @@ const UsersTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js b/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js index 8c264635d5..94d726ebd3 100644 --- a/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js +++ b/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js @@ -50,7 +50,7 @@ const VNetworkTemplatesTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/VNetworks/index.js b/src/fireedge/src/client/components/Tables/VNetworks/index.js index 69a791fe86..4bd98630ee 100644 --- a/src/fireedge/src/client/components/Tables/VNetworks/index.js +++ b/src/fireedge/src/client/components/Tables/VNetworks/index.js @@ -54,7 +54,7 @@ const VNetworksTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/VRouters/index.js b/src/fireedge/src/client/components/Tables/VRouters/index.js index 64e82ba2a3..dfeceb8794 100644 --- a/src/fireedge/src/client/components/Tables/VRouters/index.js +++ b/src/fireedge/src/client/components/Tables/VRouters/index.js @@ -49,7 +49,7 @@ const VRoutersTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/index.js b/src/fireedge/src/client/components/Tables/VmTemplates/index.js index ab4abf9b1e..9a3cfce018 100644 --- a/src/fireedge/src/client/components/Tables/VmTemplates/index.js +++ b/src/fireedge/src/client/components/Tables/VmTemplates/index.js @@ -49,7 +49,7 @@ const VmTemplatesTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js index ebb4b03a4b..3611d83ee1 100644 --- a/src/fireedge/src/client/components/Tables/Vms/index.js +++ b/src/fireedge/src/client/components/Tables/Vms/index.js @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { useMemo, ReactElement } from 'react' +import { useState, useEffect, useMemo, ReactElement } from 'react' import { useAuth } from 'client/features/Auth' import { useGetVmsQuery } from 'client/features/OneApi/vm' @@ -23,14 +23,14 @@ import VmColumns from 'client/components/Tables/Vms/columns' import VmRow from 'client/components/Tables/Vms/row' import { RESOURCE_NAMES } from 'client/constants' -// const INITIAL_ELEMENT = 0 -// const INTERVAL_ON_FIRST_RENDER = 2_000 +const INITIAL_ELEMENT = 0 +const INTERVAL_ON_FIRST_RENDER = 2_000 -// const INITIAL_ARGS = { -// start: INITIAL_ELEMENT, -// end: -INTERVAL_ON_FIRST_RENDER, -// state: -1, -// } +const INITIAL_ARGS = { + start: INITIAL_ELEMENT, + end: -INTERVAL_ON_FIRST_RENDER, + state: -1, +} const DEFAULT_DATA_CY = 'vms' @@ -44,8 +44,11 @@ const VmsTable = (props) => { searchProps['data-cy'] ??= `search-${DEFAULT_DATA_CY}` const { view, getResourceView } = useAuth() - // const [args, setArgs] = useState(() => INITIAL_ARGS) - const { data = [], isFetching, refetch } = useGetVmsQuery() + const [totalData, setTotalData] = useState(() => []) + const [args, setArgs] = useState(() => INITIAL_ARGS) + const { data, isSuccess, isFetching } = useGetVmsQuery(args, { + refetchOnMountOrArgChange: true, + }) const columns = useMemo( () => @@ -56,22 +59,33 @@ const VmsTable = (props) => { [view] ) - /* useEffect(() => { - const lastVmId = data[INTERVAL_ON_FIRST_RENDER - 1]?.ID - const end = isSuccess ? lastVmId : -INTERVAL_ON_FIRST_RENDER - - if (isSuccess && data?.length === INTERVAL_ON_FIRST_RENDER) { - setArgs({ start: INITIAL_ELEMENT, end, state: -1 }) + useEffect(() => { + if (!isFetching && isSuccess && data?.length >= +INTERVAL_ON_FIRST_RENDER) { + setArgs((prev) => ({ + ...prev, + start: prev.start + INTERVAL_ON_FIRST_RENDER, + })) } - }, [isSuccess]) */ + }, [isFetching]) + + useEffect(() => { + data && + setTotalData((prev) => { + const notDuplicatedData = data.filter( + ({ ID }) => !prev.find((vm) => vm.ID === ID) + ) + + return prev.concat(notDuplicatedData).sort((a, b) => b.ID - a.ID) + }) + }, [data]) return ( totalData, [totalData])} rootProps={rootProps} searchProps={searchProps} - refetch={refetch} + refetch={() => setArgs(INITIAL_ARGS)} isLoading={isFetching} getRowId={(row) => String(row.ID)} RowComponent={VmRow} @@ -80,7 +94,6 @@ const VmsTable = (props) => { ) } -VmsTable.propTypes = { ...EnhancedTable.propTypes } VmsTable.displayName = 'VmsTable' export default VmsTable diff --git a/src/fireedge/src/client/components/Tables/Zones/index.js b/src/fireedge/src/client/components/Tables/Zones/index.js index 93035d7723..3f4834f083 100644 --- a/src/fireedge/src/client/components/Tables/Zones/index.js +++ b/src/fireedge/src/client/components/Tables/Zones/index.js @@ -49,7 +49,7 @@ const ZonesTable = (props) => { return ( data, [data])} rootProps={rootProps} searchProps={searchProps} refetch={refetch} diff --git a/src/fireedge/src/client/models/Marketplace.js b/src/fireedge/src/client/models/Marketplace.js index 159d76ed77..7610b14da1 100644 --- a/src/fireedge/src/client/models/Marketplace.js +++ b/src/fireedge/src/client/models/Marketplace.js @@ -43,3 +43,27 @@ export const getCapacityInfo = ({ TOTAL_MB, USED_MB } = {}) => { return { percentOfUsed, percentLabel } } + +/** + * Returns `true` if the marketplace can be perform + * one of these actions: monitor, create, delete. + * + * @param {Marketplace} marketplace - Marketplace + * @param {object} onedConf - One daemon configuration + * @param {'monitor'|'create'|'delete'} action - Marketplace action + * @returns {boolean} If the oned.conf includes the action + */ +export const onedConfIncludesAction = ( + marketplace = {}, + onedConf = {}, + action = 'monitor' +) => { + const isInZone = onedConf.FEDERATION?.ZONE_ID === marketplace.ZONE_ID + const includesAction = onedConf.MARKET_MAD_CONF?.some( + ({ APP_ACTIONS, NAME }) => + APP_ACTIONS?.includes(action) && + `${NAME}`.toLowerCase() === `${marketplace.MARKET_MAD}`.toLowerCase() + ) + + return isInZone && includesAction +}