From f8b982feedf1512264450daed50912585137ea29 Mon Sep 17 00:00:00 2001
From: Lucy Fu <lufu@redhat.com>
Date: Thu, 14 Nov 2024 16:39:38 -0500
Subject: [PATCH] Fixes #38013 - Add Image mode card on host details tab

---
 .../DetailsTabCards/ImageModeCard.js          | 77 +++++++++++++++++++
 webpack/global_index.js                       |  4 +-
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js

diff --git a/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js b/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js
new file mode 100644
index 00000000000..7ec258bf776
--- /dev/null
+++ b/webpack/components/extensions/HostDetails/DetailsTabCards/ImageModeCard.js
@@ -0,0 +1,77 @@
+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;
+  const header = (
+    <>
+      <span style={{ marginRight: '0.5rem' }}>{__('Image mode host')}</span>
+      <FontAwesomeImageModeIcon />
+    </>
+  );
+  if (!imageMode) return null;
+  return (
+    <CardTemplate
+      header={header}
+      expandable
+      masonryLayout
+      isExpandedGlobal={isExpandedGlobal}
+    >
+      <DescriptionList isHorizontal>
+        <DescriptionListGroup>
+          <Dt>{__('Running image')}</Dt>
+          <Dd>{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>{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>{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>{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;
diff --git a/webpack/global_index.js b/webpack/global_index.js
index e1dbe296ae6..3dc3b26a1f9 100644
--- a/webpack/global_index.js
+++ b/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 mode host', <ImageModeCard key="image-mode-host" />, 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);