diff --git a/src/Routes.js b/src/Routes.js
index 46247d42d..9284e8f98 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -16,6 +16,9 @@ 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';
+const InventoryOrEdgeGroupDetailsView = lazy(() =>
+ import('./routes/InventoryOrEdgeGroupDetailsComponent')
+);
const InventoryOrEdgeView = lazy(() =>
import('./routes/InventoryOrEdgeComponent')
);
@@ -25,9 +28,6 @@ const InventoryHostStaleness = lazy(() =>
import('./routes/InventoryHostStaleness')
);
-const InventoryGroupDetail = lazy(() =>
- import('./routes/InventoryGroupDetail')
-);
const EdgeInventoryUpdate = lazy(() => import('./routes/SystemUpdate'));
export const routes = {
@@ -82,7 +82,11 @@ export const Routes = () => {
},
{
path: '/groups/:groupId',
- element: groupsEnabled ? : ,
+ element: groupsEnabled ? (
+
+ ) : (
+
+ ),
},
{
path: '/:inventoryId/update',
diff --git a/src/Utilities/hooks/useEdgeGroups.js b/src/Utilities/hooks/useEdgeGroups.js
index 098887c6d..76637a66f 100644
--- a/src/Utilities/hooks/useEdgeGroups.js
+++ b/src/Utilities/hooks/useEdgeGroups.js
@@ -4,7 +4,7 @@ import { fetchEdgeEnforceGroups } from '../../api';
const useEdgeGroups = () => {
const [data, setData] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
const edgeParityInventoryGroupsEnabled = useFeatureFlag(
'edgeParity.inventory-groups-enabled'
diff --git a/src/components/InventoryGroupDetail/EdgeGroupDetails.js b/src/components/InventoryGroupDetail/EdgeGroupDetails.js
new file mode 100644
index 000000000..25fa5a893
--- /dev/null
+++ b/src/components/InventoryGroupDetail/EdgeGroupDetails.js
@@ -0,0 +1,27 @@
+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, useParams } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+const EdgeGroupsDetailsView = (props) => {
+ const dispatch = useDispatch();
+ const notificationProp = getNotificationProp(dispatch);
+ return (
+ }
+ navigateProp={useNavigate}
+ locationProp={useLocation}
+ paramsProp={useParams}
+ notificationProp={notificationProp}
+ pathPrefix={resolveRelPath('')}
+ {...props}
+ />
+ );
+};
+
+export default EdgeGroupsDetailsView;
diff --git a/src/components/InventoryGroups/EdgeGroups.js b/src/components/InventoryGroups/EdgeGroups.js
index f765ba624..decf10052 100644
--- a/src/components/InventoryGroups/EdgeGroups.js
+++ b/src/components/InventoryGroups/EdgeGroups.js
@@ -3,7 +3,7 @@ import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComp
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 { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
const EdgeGroupsView = (props) => {
@@ -16,6 +16,7 @@ const EdgeGroupsView = (props) => {
ErrorComponent={}
navigateProp={useNavigate}
locationProp={useLocation}
+ useParams={useParams}
notificationProp={notificationProp}
pathPrefix={resolveRelPath('')}
{...props}
diff --git a/src/routes/InventoryOrEdgeGroupDetailsComponent.js b/src/routes/InventoryOrEdgeGroupDetailsComponent.js
new file mode 100644
index 000000000..a33c7c146
--- /dev/null
+++ b/src/routes/InventoryOrEdgeGroupDetailsComponent.js
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { inventoryHasConventionalSystems } from '../Utilities/conventional';
+import { inventoryHasEdgeSystems } from '../Utilities/edge';
+import useEdgeGroups from '../Utilities/hooks/useEdgeGroups';
+import useFeatureFlag from '../Utilities/useFeatureFlag';
+import PropTypes from 'prop-types';
+import { Spinner } from '@patternfly/react-core';
+import EdgeGroupsDetailsView from '../components/InventoryGroupDetail/EdgeGroupDetails';
+import InventoryGroupDetail from './InventoryGroupDetail';
+
+const InventoryOrEdgeGroupDetailsView = () => {
+ const [enforceEdgeGroups, isLoading] = useEdgeGroups();
+ const [hasConventionalSystems, setHasConventionalSystems] = useState(true);
+ const [hasEdgeDevices, setHasEdgeDevices] = useState(true);
+ const edgeParityInventoryListEnabled = useFeatureFlag(
+ 'edgeParity.inventory-list'
+ );
+
+ useEffect(() => {
+ try {
+ (async () => {
+ const hasConventionalSystems = await inventoryHasConventionalSystems();
+ if (edgeParityInventoryListEnabled) {
+ const hasEdgeSystems = await inventoryHasEdgeSystems();
+ setHasConventionalSystems(hasConventionalSystems);
+ setHasEdgeDevices(hasEdgeSystems);
+ }
+ })();
+ } catch (e) {
+ console.log(e);
+ }
+ }, []);
+
+ const GroupsDetailComponents = enforceEdgeGroups
+ ? EdgeGroupsDetailsView
+ : InventoryGroupDetail;
+ if (!isLoading) {
+ return (
+
+ );
+ } else {
+ return ;
+ }
+};
+
+InventoryOrEdgeGroupDetailsView.prototype = {
+ enforceEdgeGroups: PropTypes.bool,
+ isLoading: PropTypes.bool,
+};
+
+export default InventoryOrEdgeGroupDetailsView;