Fixes #38013 - Add Image mode card on host details tab

webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription as Dd,
+  DescriptionListTerm as Dt,
+} from '@patternfly/react-core';
+import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
+import FontAwesomeImageModeIcon from '../../../../components/extensions/Hosts/FontAwesomeImageModeIcon';
+
+const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
+  const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
+  if (!imageMode) return null;
+  return (
+    <CardTemplate
+      header={__('Image information')}
+      expandable
+      masonryLayout
+      isExpandedGlobal={isExpandedGlobal}
+    >
+      <DescriptionList isHorizontal>
+        <DescriptionListGroup>
+          <Dt>{__('Running image')}</Dt>
+          <Dd>
+	    <span style={{ marginRight: '0.5rem' }}><FontAwesomeImageModeIcon /></span>
+	    {hostDetails.content_facet_attributes.bootc_booted_image}
+	  </Dd>
+          <Dt>{__('Running image digest')}</Dt>
+          <Dd>{hostDetails.content_facet_attributes.bootc_booted_digest}</Dd>
+
+          <Dt>{__('Staged image')}</Dt>
+          <Dd>
+	    <span style={{ marginRight: '0.5rem' }}><FontAwesomeImageModeIcon /></span>
+	    {hostDetails.content_facet_attributes.bootc_staged_image}
+	  </Dd>
+          <Dt>{__('Staged image digest')}</Dt>
+          <Dd>{hostDetails.content_facet_attributes.bootc_staged_digest}</Dd>
+
+          <Dt>{__('Available image')}</Dt>
+          <Dd>
+	    <span style={{ marginRight: '0.5rem' }}><FontAwesomeImageModeIcon /></span>
+	    {hostDetails.content_facet_attributes.bootc_available_image}
+	  </Dd>
+          <Dt>{__('Available image digest')}</Dt>
+          <Dd>{hostDetails.content_facet_attributes.bootc_available_digest}</Dd>
+
+          <Dt>{__('Rollback image')}</Dt>
+          <Dd>
+	    <span style={{ marginRight: '0.5rem' }}><FontAwesomeImageModeIcon /></span>
+	    {hostDetails.content_facet_attributes.bootc_rollback_image}
+	  </Dd>
+          <Dt>{__('Rollback image digest')}</Dt>
+          <Dd>{hostDetails.content_facet_attributes.bootc_rollback_digest}</Dd>
+        </DescriptionListGroup>
+      </DescriptionList>
+    </CardTemplate>
+  );
+};
+
+ImageModeCard.propTypes = {
+  isExpandedGlobal: PropTypes.bool,
+  hostDetails: PropTypes.shape({
+    content_facet_attributes: PropTypes.shape({
+      bootc_booted_image: PropTypes.string,
+      bootc_booted_digest: PropTypes.string,
+      bootc_staged_image: PropTypes.string,
+      bootc_staged_digest: PropTypes.string,
+      bootc_available_image: PropTypes.string,
+      bootc_available_digest: PropTypes.string,
+      bootc_rollback_image: PropTypes.string,
+      bootc_rollback_digest: PropTypes.string,
+    }),
+  }),
+};
+
+ImageModeCard.defaultProps = {
+  isExpandedGlobal: false,
+  hostDetails: {},
+};
+
+export default ImageModeCard;

webpack/global_index.js

@@ -19,6 +19,7 @@ import ErrataOverviewCard from './components/extensions/HostDetails/Cards/Errata
 import InstalledProductsCard from './components/extensions/HostDetails/DetailsTabCards/InstalledProductsCard';
 import RegistrationCard from './components/extensions/HostDetails/DetailsTabCards/RegistrationCard';
 import HwPropertiesCard from './components/extensions/HostDetails/DetailsTabCards/HwPropertiesCard';
+import ImageModeCard from './components/extensions/HostDetails/DetailsTabCards/ImageModeCard';
 
 import TracesTab from './components/extensions/HostDetails/Tabs/TracesTab/TracesTab.js';
 import extendReducer from './components/extensions/reducers';
@@ -71,6 +72,8 @@ addGlobalFill('recent-communication-card-item', 'Recent communication', <RecentC
 // Details tab cards & card extensions
 addGlobalFill('host-tab-details-cards', 'Installed products', <InstalledProductsCard key="installed-products" />, 100);
 addGlobalFill('host-tab-details-cards', 'Registration details', <RegistrationCard key="registration-details" />, 200);
+addGlobalFill('host-tab-details-cards', 'HW properties', <HwPropertiesCard key="hw-properties" />, 200);
+addGlobalFill('host-tab-details-cards', 'Image information', <ImageModeCard key="image-mode" />, 3000);
 addGlobalFill('host-details-tab-properties-1', 'Subscription UUID', <SystemPropertiesCardSubscription key="subscription-uuid" />);
 addGlobalFill('host-details-tab-properties-2', 'Tracer', <SystemPropertiesCardTracer key="tracer-status" />);
 addGlobalFill('host-details-tab-properties-3', 'Virtualization', <SystemPropertiesCardVirtualization key="virtualization" />);
@@ -89,7 +92,6 @@ addGlobalFill(
   100,
 );
 
-addGlobalFill('host-tab-details-cards', 'HW properties', <HwPropertiesCard key="hw-properties" />, 200);
 
 // Hosts Index page extensions
 addGlobalFill('_all-hosts-modals', 'BulkChangeHostCVModal', <BulkChangeHostCVModal key="bulk-change-host-cv-modal" />, 100);