feat(RHINENG-9249): create bifrost toggle

package.json

@@ -13,7 +13,7 @@
     "@patternfly/react-core": "^5.2.3",
     "@patternfly/react-icons": "^5.2.1",
     "@patternfly/react-table": "^5.2.4",
-    "@redhat-cloud-services/frontend-components": "^4.2.5",
+    "@redhat-cloud-services/frontend-components": "^4.2.6",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.10",
     "@redhat-cloud-services/host-inventory-client": "1.2.13",

src/Routes.js

@@ -11,7 +11,10 @@ import useFeatureFlag from './Utilities/useFeatureFlag';
 import LostPage from './components/LostPage';
 import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
-import { inventoryHasEdgeSystems } from './Utilities/edge';
+import {
+  inventoryHasEdgeSystems,
+  inventoryHasBootcImages,
+} from './Utilities/edge';
 import { inventoryHasConventionalSystems } from './Utilities/conventional';
 import Fallback from './components/SpinnerFallback';
 
@@ -21,7 +24,7 @@ const InventoryOrEdgeGroupDetailsView = lazy(() =>
 const InventoryOrEdgeView = lazy(() =>
   import('./routes/InventoryOrEdgeComponent')
 );
-const InventoryTable = lazy(() => import('./routes/InventoryTable'));
+const InventoryTable = lazy(() => import('./routes/InventoryPage'));
 const InventoryDetail = lazy(() => import('./routes/InventoryDetail'));
 const InventoryHostStaleness = lazy(() =>
   import('./routes/InventoryHostStaleness')
@@ -43,18 +46,21 @@ export const routes = {
 export const AccountStatContext = createContext({
   hasConventionalSystems: true,
   hasEdgeDevices: false,
+  hasBootcImages: false,
 });
 
 export const Routes = () => {
   const [hasConventionalSystems, setHasConventionalSystems] = useState(true);
   const [hasEdgeDevices, setHasEdgeDevices] = useState(true);
+  const [hasBootcImages, setHasBootcImages] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
   const edgeParityInventoryListEnabled = useFeatureFlag(
     'edgeParity.inventory-list'
   );
 
   const stalenessAndDeletionEnabled = useFeatureFlag('hbi.custom-staleness');
+  const isBifrostEnabled = useFeatureFlag('hbi.api.disable-xjoin');
 
   useEffect(() => {
     // zero state check
@@ -68,6 +74,10 @@ export const Routes = () => {
           setHasEdgeDevices(hasEdgeSystems);
         }
 
+        if (isBifrostEnabled) {
+          const hasBootc = await inventoryHasBootcImages();
+          setHasBootcImages(hasBootc);
+        }
         setIsLoading(false);
       } catch (error) {
         console.error(error);
@@ -118,6 +128,8 @@ export const Routes = () => {
     },
   ]);
 
+  //bootc images are part of conventional systems,
+  //zero-state is not influenced by them
   const hasSystems = edgeParityInventoryListEnabled
     ? hasEdgeDevices || hasConventionalSystems
     : hasConventionalSystems;
@@ -139,7 +151,7 @@ export const Routes = () => {
     </Suspense>
   ) : (
     <AccountStatContext.Provider
-      value={{ hasConventionalSystems, hasEdgeDevices }}
+      value={{ hasConventionalSystems, hasEdgeDevices, hasBootcImages }}
     >
       {element}
     </AccountStatContext.Provider>

src/Utilities/constants.js

@@ -23,7 +23,8 @@ export const INVENTORY_TOTAL_FETCH_URL_SERVER = '/api/inventory/v1/hosts';
 export const INVENTORY_TOTAL_FETCH_EDGE_PARAMS =
   '?filter[system_profile][host_type]=edge&page=1&per_page=1';
 export const INVENTORY_TOTAL_FETCH_CONVENTIONAL_PARAMS = '?page=1&per_page=1';
-
+export const INVENTORY_TOTAL_FETCH_BIFROST_PARAMS =
+  '?filter[system_profile][bootc_status][booted][image_digest][is]=not_nil&per_page=1';
 export function subtractDate(days) {
   const date = new Date();
   date.setDate(date.getDate() - days);

src/Utilities/edge.js

@@ -4,6 +4,7 @@ import { useGetImageData } from '../api';
 import {
   INVENTORY_TOTAL_FETCH_EDGE_PARAMS,
   INVENTORY_TOTAL_FETCH_URL_SERVER,
+  INVENTORY_TOTAL_FETCH_BIFROST_PARAMS,
 } from './constants';
 
 const manageEdgeInventoryUrlName = 'manage-edge-inventory';
@@ -56,6 +57,13 @@ const inventoryHasEdgeSystems = async () => {
   return result?.data?.total > 0;
 };
 
+const inventoryHasBootcImages = async () => {
+  const result = await axios.get(
+    `${INVENTORY_TOTAL_FETCH_URL_SERVER}${INVENTORY_TOTAL_FETCH_BIFROST_PARAMS}`
+  );
+  return result?.data?.total > 0;
+};
+
 const enhancedEdgeConfig = (groupName, config) => {
   return {
     ...config,
@@ -91,4 +99,5 @@ export {
   enhancedEdgeConfig,
   edgeImageDataResult,
   mapDefaultData,
+  inventoryHasBootcImages,
 };

src/components/FontAwesomeImageIcon.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const FontAwesomeImageIcon = () => (
+  <svg
+    id="Layer_2"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 221.37 221.44"
+    width="14px"
+    height="14px"
+    version="1.1"
+    xmlSpace="preserve"
+    style={{
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
+      strokeLinejoin: 'round',
+      strokeMiterlimit: 2,
+      margin: '-2px',
+    }}
+  >
+    <g id="Layer_1-2">
+      <circle
+        className="cls-1"
+        cx="77.01"
+        cy="87"
+        r="20.41"
+        transform="translate(-39.07 79) rotate(-45)"
+      />
+      <path
+        className="cls-1"
+        d="M205.48,40.09L120.07,1.72c-5.84-2.28-12.28-2.29-18.13-.02L15.93,40.09h0C6.25,43.85,0,52.98,0,63.37v91.2c0,9.48,5.5,18.28,14.02,22.44l85.84,41.91c3.45,1.68,7.2,2.52,10.95,2.52,4.03,0,8.05-.97,11.69-2.89l85.58-45.31c8.2-4.34,13.29-12.8,13.29-22.07V63.35c0-10.36-6.24-19.49-15.88-23.26ZM110.97,28.55l82.09,37.07v60.44l-39.44-37.64c-2.09-2.09-5.48-2.09-7.57,0l-60.43,60.43-24.76-24.76c-2.09-2.09-5.48-2.09-7.57,0l-25,26.93v-85.39L110.97,28.55Z"
+      />
+    </g>
+  </svg>
+);
+
+export default FontAwesomeImageIcon;

src/routes/InventoryComponents/BifrostTable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BifrostTable = () => {
+  return <div>Bifrost table will be here</div>;
+};
+
+export default BifrostTable;

src/routes/InventoryTable.cy.js → src/routes/InventoryComponents/HybridInventory.cy.js

@@ -9,12 +9,12 @@ import {
   groupsInterceptors,
   hostsInterceptors,
   systemProfileInterceptors,
-} from '../../cypress/support/interceptors';
-import Inventory from './InventoryTable';
-import hostTagsFixtures from '../../cypress/fixtures/hostsTags.json';
-import tagsFixtures from '../../cypress/fixtures/tags.json';
-import hostsFixtures from '../../cypress/fixtures/hosts.json';
-import groupsFixtures from '../../cypress/fixtures/groups.json';
+} from '../../../cypress/support/interceptors';
+import Inventory from './HybridInventory';
+import hostTagsFixtures from '../../../cypress/fixtures/hostsTags.json';
+import tagsFixtures from '../../../cypress/fixtures/tags.json';
+import hostsFixtures from '../../../cypress/fixtures/hosts.json';
+import groupsFixtures from '../../../cypress/fixtures/groups.json';
 import {
   DROPDOWN_ITEM,
   MENU_ITEM,
@@ -25,7 +25,7 @@ import {
   TABLE_ROW,
   TABLE_ROW_CHECKBOX,
 } from '@redhat-cloud-services/frontend-components-utilities';
-import { INVENTORY_ACTION_MENU_ITEM } from '../../cypress/support/utils';
+import { INVENTORY_ACTION_MENU_ITEM } from '../../../cypress/support/utils';
 
 const TEST_GROUP_NAME = 'ancd';
 const TEST_GROUP_ID = '54b302e4-07d2-45c5-b2f8-92a286847f9d';
@@ -94,7 +94,7 @@ const prepareTest = (waitNetwork = true) => {
   waitForTable(waitNetwork);
 };
 
-describe('inventory table', () => {
+describe('hybrid inventory table', () => {
   beforeEach(prepareTest);
 
   describe('has groups actions', () => {