From fb11528caad973cc82a0b72fedd3b82ee651f86a Mon Sep 17 00:00:00 2001 From: Dan Kuc Date: Tue, 26 Mar 2024 12:32:18 -0400 Subject: [PATCH 1/2] feat(RHINENG-8881): Add bootc card host detail page --- .../BootcImageCard/BootcImageCard.js | 56 +++++++++++++++++++ .../GeneralInfo/BootcImageCard/index.js | 2 + .../GeneralInformation/GeneralInformation.js | 17 +++++- .../GeneralInfo/selectors/selectors.js | 9 +++ src/components/SystemDetails/GeneralInfo.js | 2 + 5 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 src/components/GeneralInfo/BootcImageCard/BootcImageCard.js create mode 100644 src/components/GeneralInfo/BootcImageCard/index.js diff --git a/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js b/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js new file mode 100644 index 000000000..52862a8d6 --- /dev/null +++ b/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import LoadingCard from '../LoadingCard'; +import { bootcSelector } from '../selectors'; +import { extraShape } from '../../../constants'; + +const BootcImageCardCore = ({ bootc, detailLoaded, handleClick, extra }) => ( + ({ + ...item, + ...(onClick && { onClick: (e) => onClick(e, handleClick) }), + })), + ]} + /> +); + +BootcImageCardCore.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), +}; +BootcImageCardCore.defaultProps = { + detailLoaded: false, + handleClick: () => undefined, + extra: [], +}; + +export const BootcImageCard = connect( + ({ systemProfileStore: { systemProfile } }) => ({ + detailLoaded: systemProfile && systemProfile.loaded, + bootc: bootcSelector(systemProfile), + }) +)(BootcImageCardCore); + +BootcImageCard.propTypes = BootcImageCardCore.propTypes; +BootcImageCard.defaultProps = BootcImageCardCore.defaultProps; + +export default BootcImageCard; diff --git a/src/components/GeneralInfo/BootcImageCard/index.js b/src/components/GeneralInfo/BootcImageCard/index.js new file mode 100644 index 000000000..9169dcd28 --- /dev/null +++ b/src/components/GeneralInfo/BootcImageCard/index.js @@ -0,0 +1,2 @@ +export * from './BootcImageCard'; +export { default } 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 ( Date: Tue, 2 Apr 2024 12:27:21 +0200 Subject: [PATCH 2/2] chore(RHINENG-8881): use redux hooks instead of legacy connect function --- .../BootcImageCard/BootcImageCard.js | 65 +++++++++---------- .../GeneralInfo/BootcImageCard/index.js | 1 - 2 files changed, 32 insertions(+), 34 deletions(-) diff --git a/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js b/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js index 52862a8d6..610e737a0 100644 --- a/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js +++ b/src/components/GeneralInfo/BootcImageCard/BootcImageCard.js @@ -1,30 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; +import { useSelector } from 'react-redux'; import LoadingCard from '../LoadingCard'; import { bootcSelector } from '../selectors'; import { extraShape } from '../../../constants'; -const BootcImageCardCore = ({ bootc, detailLoaded, handleClick, extra }) => ( - ({ - ...item, - ...(onClick && { onClick: (e) => onClick(e, handleClick) }), - })), - ]} - /> -); +export const BootcImageCard = ({ handleClick, extra }) => { + const { detailLoaded, bootc } = useSelector( + ({ systemProfileStore: { systemProfile } }) => ({ + detailLoaded: systemProfile && systemProfile.loaded, + bootc: bootcSelector(systemProfile), + }) + ); -BootcImageCardCore.propTypes = { + return ( + ({ + ...item, + ...(onClick && { onClick: (e) => onClick(e, handleClick) }), + })), + ]} + /> + ); +}; + +BootcImageCard.propTypes = { detailLoaded: PropTypes.bool, handleClick: PropTypes.func, bootc: PropTypes.shape({ @@ -37,20 +48,8 @@ BootcImageCardCore.propTypes = { }), extra: PropTypes.arrayOf(extraShape), }; -BootcImageCardCore.defaultProps = { +BootcImageCard.defaultProps = { detailLoaded: false, handleClick: () => undefined, extra: [], }; - -export const BootcImageCard = connect( - ({ systemProfileStore: { systemProfile } }) => ({ - detailLoaded: systemProfile && systemProfile.loaded, - bootc: bootcSelector(systemProfile), - }) -)(BootcImageCardCore); - -BootcImageCard.propTypes = BootcImageCardCore.propTypes; -BootcImageCard.defaultProps = BootcImageCardCore.defaultProps; - -export default BootcImageCard; diff --git a/src/components/GeneralInfo/BootcImageCard/index.js b/src/components/GeneralInfo/BootcImageCard/index.js index 9169dcd28..2d0e1a7bc 100644 --- a/src/components/GeneralInfo/BootcImageCard/index.js +++ b/src/components/GeneralInfo/BootcImageCard/index.js @@ -1,2 +1 @@ export * from './BootcImageCard'; -export { default } from './BootcImageCard';