feat(RHINENG-8881): Add bootc card host detail page

src/components/GeneralInfo/BootcImageCard/BootcImageCard.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import LoadingCard from '../LoadingCard';
+import { bootcSelector } from '../selectors';
+import { extraShape } from '../../../constants';
+
+export const BootcImageCard = ({ handleClick, extra }) => {
+  const { detailLoaded, bootc } = useSelector(
+    ({ systemProfileStore: { systemProfile } }) => ({
+      detailLoaded: systemProfile && systemProfile.loaded,
+      bootc: bootcSelector(systemProfile),
+    })
+  );
+
+  return (
+    <LoadingCard
+      title="BOOTC"
+      isLoading={!detailLoaded}
+      items={[
+        ...[{ title: 'Booted Image', value: bootc.bootedImage }],
+        ...[{ title: 'Booted Image Digest', value: bootc.bootedImageDigest }],
+        ...[{ title: 'Staged Image', value: bootc.stagedImage }],
+        ...[{ title: 'Staged Image Digest', value: bootc.stagedImageDigest }],
+        ...[{ title: 'Rollback Image', value: bootc.rollbackImage }],
+        ...[
+          { title: 'Rollback Image Digest', value: bootc.rollbackImageDigest },
+        ],
+        ...extra.map(({ onClick, ...item }) => ({
+          ...item,
+          ...(onClick && { onClick: (e) => onClick(e, handleClick) }),
+        })),
+      ]}
+    />
+  );
+};
+
+BootcImageCard.propTypes = {
+  detailLoaded: PropTypes.bool,
+  handleClick: PropTypes.func,
+  bootc: PropTypes.shape({
+    bootedImage: PropTypes.string,
+    bootedImageDigest: PropTypes.string,
+    stagedImage: PropTypes.string,
+    stagedImageDigest: PropTypes.string,
+    rollbackImage: PropTypes.string,
+    rollbackImageDigest: PropTypes.string,
+  }),
+  extra: PropTypes.arrayOf(extraShape),
+};
+BootcImageCard.defaultProps = {
+  detailLoaded: false,
+  handleClick: () => undefined,
+  extra: [],
+};

src/components/GeneralInfo/BootcImageCard/index.js

@@ -0,0 +1 @@
+export * from './BootcImageCard';

src/components/GeneralInfo/GeneralInformation/GeneralInformation.js

@@ -11,6 +11,7 @@ import InfoTable from '../InfoTable';
 import { OperatingSystemCard } from '../OperatingSystemCard';
 import { SystemCard } from '../SystemCard';
 import { BiosCard } from '../BiosCard';
+import { BootcImageCard } from '../BootcImageCard';
 import { InfrastructureCard } from '../InfrastructureCard';
 import { ConfigurationCard } from '../ConfigurationCard';
 import { SystemStatusCard } from '../SystemStatusCard';
@@ -92,6 +93,7 @@ class GeneralInformation extends Component {
       SystemCardWrapper,
       OperatingSystemCardWrapper,
       BiosCardWrapper,
+      BootcImageCardWrapper,
       InfrastructureCardWrapper,
       ConfigurationCardWrapper,
       SystemStatusCardWrapper,
@@ -101,7 +103,6 @@ class GeneralInformation extends Component {
       entity,
     } = this.props;
     const Wrapper = store ? Provider : Fragment;
-
     return (
       <Wrapper {...(store && { store })}>
         {entity?.system_profile?.operating_system?.name === 'CentOS Linux' && (
@@ -160,6 +161,14 @@ class GeneralInformation extends Component {
                   </GridItem>
                 )}
 
+                {this.props.isBootcHost && BootcImageCardWrapper && (
+                  <GridItem>
+                    <BootcImageCardWrapper
+                      handleClick={this.handleModalToggle}
+                    />
+                  </GridItem>
+                )}
+
                 {ConfigurationCardWrapper && (
                   <GridItem>
                     <ConfigurationCardWrapper
@@ -232,6 +241,10 @@ GeneralInformation.propTypes = {
     PropTypes.bool,
   ]),
   BiosCardWrapper: PropTypes.oneOfType([PropTypes.elementType, PropTypes.bool]),
+  BootcImageCardWrapper: PropTypes.oneOfType([
+    PropTypes.elementType,
+    PropTypes.bool,
+  ]),
   InfrastructureCardWrapper: PropTypes.oneOfType([
     PropTypes.elementType,
     PropTypes.bool,
@@ -257,12 +270,14 @@ GeneralInformation.propTypes = {
   inventoryId: PropTypes.string.isRequired,
   systemProfilePrefetched: PropTypes.bool,
   showImageDetails: PropTypes.bool,
+  isBootcHost: PropTypes.bool,
 };
 GeneralInformation.defaultProps = {
   entity: {},
   SystemCardWrapper: SystemCard,
   OperatingSystemCardWrapper: OperatingSystemCard,
   BiosCardWrapper: BiosCard,
+  BootcImageCardWrapper: BootcImageCard,
   InfrastructureCardWrapper: InfrastructureCard,
   ConfigurationCardWrapper: ConfigurationCard,
   SystemStatusCardWrapper: SystemStatusCard,

src/components/GeneralInfo/selectors/selectors.js

@@ -74,6 +74,15 @@ export const biosSelector = ({
   releaseDate: bios_release_date,
 });
 
+export const bootcSelector = ({ bootc_status } = {}) => ({
+  bootedImage: bootc_status?.booted?.image,
+  bootedImageDigest: bootc_status?.booted?.image_digest,
+  stagedImage: bootc_status?.staged?.image,
+  stagedImageDigest: bootc_status?.staged?.image_digest,
+  rollbackImage: bootc_status?.rollback?.image,
+  rollbackImageDigest: bootc_status?.rollback?.image_digest,
+});
+
 export const infrastructureSelector = (
   {
     infrastructure_type,

src/components/SystemDetails/GeneralInfo.js

@@ -9,6 +9,7 @@ const GeneralInfoTab = (props) => {
     ({ systemProfileStore }) => systemProfileStore?.systemProfile
   );
   const isEdgeHost = systemProfile?.host_type === 'edge';
+  const isBootcHost = !!systemProfile.bootc_status;
   const enableEdgeImageDetails = useFeatureFlag(
     'edgeParity.inventory-system-detail'
   );
@@ -19,6 +20,7 @@ const GeneralInfoTab = (props) => {
   return (
     <GeneralInformation
       {...props}
+      isBootcHost={isBootcHost}
       showImageDetails={
         enableEdgeImageDetails && enableEdgeInventoryListDetails && isEdgeHost
       }