diff --git a/src/Routes.js b/src/Routes.js index 88a024200..e03151a28 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -16,6 +16,8 @@ import AsynComponent from '@redhat-cloud-services/frontend-components/AsyncCompo import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState'; import { inventoryHasEdgeSystems } from './Utilities/edge'; import { inventoryHasConventionalSystems } from './Utilities/conventional'; +import useEdgeGroups from './Utilities/hooks/useEdgeGroups'; +import EdgeGroupsView from './components/InventoryGroups/EdgeGroups'; const InventoryTable = lazy(() => import('./routes/InventoryTable')); const InventoryDetail = lazy(() => import('./routes/InventoryDetail')); @@ -53,6 +55,7 @@ export const Routes = () => { const edgeParityInventoryListEnabled = useFeatureFlag( 'edgeParity.inventory-list' ); + const edgeGroupsUse = useEdgeGroups(); useEffect(() => { try { (async () => { @@ -68,6 +71,8 @@ export const Routes = () => { } }, []); + const GroupsComponents = edgeGroupsUse ? EdgeGroupsView : InventoryGroups; + let element = useRoutes([ { path: '/', @@ -77,7 +82,7 @@ export const Routes = () => { { path: '/:inventoryId/:modalId', element: }, { path: '/groups', - element: groupsEnabled ? : , + element: groupsEnabled ? : , }, { path: '/groups/:groupId', diff --git a/src/Utilities/hooks/useEdgeGroups.js b/src/Utilities/hooks/useEdgeGroups.js new file mode 100644 index 000000000..e07e7eda3 --- /dev/null +++ b/src/Utilities/hooks/useEdgeGroups.js @@ -0,0 +1,23 @@ +import { useEffect, useState } from 'react'; +import useFeatureFlag from '../useFeatureFlag'; +import { fetchEdgeEnforceGroups } from '../../api'; + +const useEdgeGroups = () => { + const [data, setData] = useState(false); + const edgeParityInventoryGroupsEnabled = useFeatureFlag( + 'edgeParity.inventory-groups-enabled' + ); + + useEffect(() => { + edgeParityInventoryGroupsEnabled && + (async () => { + const response = await fetchEdgeEnforceGroups(); + const enforceEdgeGroups = response?.enforce_edge_groups; + setData(enforceEdgeGroups); + })(); + }, [edgeParityInventoryGroupsEnabled]); + + return data; +}; + +export default useEdgeGroups; diff --git a/src/api/api.js b/src/api/api.js index bd5d86bc8..8a16e4999 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -399,3 +399,11 @@ export const fetchEdgeSystem = () => { console.log(err); } }; + +export const fetchEdgeEnforceGroups = () => { + try { + return instance.get(`${EDGE_API_BASE}/device-groups/enforce-edge-groups`); + } catch (err) { + console.log(err); + } +}; diff --git a/src/components/InventoryGroups/EdgeGroups.js b/src/components/InventoryGroups/EdgeGroups.js new file mode 100644 index 000000000..f765ba624 --- /dev/null +++ b/src/components/InventoryGroups/EdgeGroups.js @@ -0,0 +1,26 @@ +import React from 'react'; +import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; +import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState'; +import { resolveRelPath } from '../../Utilities/path'; +import { getNotificationProp } from '../../Utilities/edge'; +import { useLocation, useNavigate } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; + +const EdgeGroupsView = (props) => { + const dispatch = useDispatch(); + const notificationProp = getNotificationProp(dispatch); + return ( + } + navigateProp={useNavigate} + locationProp={useLocation} + notificationProp={notificationProp} + pathPrefix={resolveRelPath('')} + {...props} + /> + ); +}; + +export default EdgeGroupsView;