diff --git a/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js b/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js new file mode 100644 index 000000000..610e737a0 --- /dev/null +++ b/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 ( + ({ + ...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: [], +}; diff --git a/src/components/GeneralInfo/BootcImageCard/index.js b/src/components/GeneralInfo/BootcImageCard/index.js new file mode 100644 index 000000000..2d0e1a7bc --- /dev/null +++ b/src/components/GeneralInfo/BootcImageCard/index.js @@ -0,0 +1 @@ +export * from './BootcImageCard'; diff --git a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js b/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js index b7c2cd47a..1f42d50cd 100644 --- a/src/components/GeneralInfo/GeneralInformation/GeneralInformation.js +++ b/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 ( {entity?.system_profile?.operating_system?.name === 'CentOS Linux' && ( @@ -160,6 +161,14 @@ class GeneralInformation extends Component { )} + {this.props.isBootcHost && BootcImageCardWrapper && ( + + + + )} + {ConfigurationCardWrapper && ( ({ + 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, diff --git a/src/components/SystemDetails/GeneralInfo.js b/src/components/SystemDetails/GeneralInfo.js index c76888445..523d1b4d7 100644 --- a/src/components/SystemDetails/GeneralInfo.js +++ b/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 (