katello 4.15.1 → 4.16.0.rc1

data/webpack/ForemanColumnExtensions/index.js

@@ -7,13 +7,78 @@ import {
   PackageIcon,
 } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
-import { Flex, FlexItem, Popover, Badge } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  Popover,
+  Badge,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription as Dd,
+  DescriptionListTerm as Dt,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 import { ContentViewEnvironmentDisplay } from '../components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
 import { truncate } from '../utils/helpers';
+import RepoIcon from '../scenes/ContentViews/Details/Repositories/RepoIcon';
+import FontAwesomeImageModeIcon from '../components/extensions/Hosts/FontAwesomeImageModeIcon';
+import './index.scss';
 
 const hostsIndexColumnExtensions = [
+  {
+    columnName: 'bootc_booted_image',
+    title: (
+      <span id="image-mode-column-title-icon">
+        <FontAwesomeImageModeIcon title={__('Image mode / package mode')} />
+      </span>
+    ),
+    wrapper: (hostDetails) => {
+      const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
+      const digest = hostDetails?.content_facet_attributes?.bootc_booted_digest;
+      return (
+        <span className={imageMode ? 'image-mode-column-td-icon' : 'package-mode-column-td-icon'}>
+          {imageMode ?
+            <Popover
+              id="image-mode-tooltip"
+              className="image-mode-tooltip"
+              maxWidth="74rem"
+              headerContent={hostDetails.display_name}
+              bodyContent={
+                <Flex direction={{ default: 'column' }}>
+                  <FlexItem>
+                    <Flex direction={{ default: 'row' }} alignItems={{ default: 'alignItemsCenter' }}>
+                      <FlexItem>
+                        <FontAwesomeImageModeIcon />
+                      </FlexItem>
+                      <Text ouiaId="image-mode-popover-h4" component={TextVariants.h4}>{__('Image-mode host')}</Text>
+                    </Flex>
+                  </FlexItem>
+                  <DescriptionList isCompact isHorizontal>
+                    <DescriptionListGroup>
+                      <Dt>{__('Running image')}</Dt>
+                      <Dd>{hostDetails.content_facet_attributes.bootc_booted_image}</Dd>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                      <Dt>{__('Digest')}</Dt>
+                      <Dd>{digest}</Dd>
+                    </DescriptionListGroup>
+                  </DescriptionList>
+                </Flex>
+              }
+            >
+              <FontAwesomeImageModeIcon title={__('Image mode')} />
+            </Popover>
+            : <span style={{ color: 'var(--pf-global--palette--black-600)' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
+          }
+        </span>
+      );
+    },
+    weight: 35, // between power status (0) and name (50)
+    isSorted: true,
+  },
   {
     columnName: 'rhel_lifecycle_status',
     title: __('RHEL Lifecycle status'),
@@ -32,6 +97,7 @@ const hostsIndexColumnExtensions = [
       const registered = !!hostDetails?.subscription_facet_attributes?.uuid;
       const { security, bugfix, enhancement } = errataCounts ?? {};
       const upgradableRpmCount = hostDetails?.content_facet_attributes?.upgradable_package_count;
+      const upgradableDebCount = hostDetails?.content_facet_attributes?.upgradable_deb_count;
       if (!registered) return '—';
       const hostErrataUrl = type => `hosts/${hostDetails?.name}#/Content/errata?type=${type}&show=installable`;
       return (
@@ -54,10 +120,14 @@ const hostsIndexColumnExtensions = [
               <Link to={hostErrataUrl('enhancement')}>{enhancement}</Link>
             </FlexItem>
           }
-          {upgradableRpmCount !== undefined &&
+          {(upgradableRpmCount !== undefined || upgradableDebCount !== undefined) &&
             <FlexItem>
               <PackageIcon />
-              <Link to={`hosts/${hostDetails?.name}#/Content/Packages?status=Upgradable`}>{upgradableRpmCount}</Link>
+              { hostDetails?.operatingsystem_family === 'Debian' ?
+                <Link to={`hosts/${hostDetails?.name}#/Content/Debs?status=Upgradable`}>{upgradableDebCount}</Link>
+                :
+                <Link to={`hosts/${hostDetails?.name}#/Content/Packages?status=Upgradable`}>{upgradableRpmCount}</Link>
+              }
             </FlexItem>
           }
         </Flex>

data/webpack/ForemanColumnExtensions/index.scss

@@ -0,0 +1,9 @@
+#image-mode-column-title-icon {
+  padding: 5px;
+}
+.image-mode-column-td-icon {
+  padding: 6px;
+}
+.package-mode-column-td-icon {
+  padding: 4px;
+}

data/webpack/__mocks__/foremanReact/Root/Context/ForemanContext.js

@@ -1,3 +1,4 @@
 // eslint-disable-next-line import/prefer-default-export
 export const useForemanSettings = () => ({ perPage: 20 });
 export const useForemanVersion = () => 'nightly';
+export const useForemanHostsPageUrl = () => '/new/hosts';

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.js

@@ -130,7 +130,7 @@ const ErrataOverviewCard = ({ hostDetails }) => {
                 <ErrataToggleGroupItem
                   text={__('Installable')}
                   aria-label="Show installable errata chart"
-                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s content view and lifecycle environment.')}
+                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
                   isSelected={errataCategory === 'installable'}
                   onChange={selected => selected && setErrataCategory('installable')}
                 />

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js

@@ -17,8 +17,6 @@ import {
   FlexItem,
   GridItem,
   Label,
-  List,
-  ListItem,
   Tooltip,
   Skeleton,
   CardExpandableContent,
@@ -41,12 +39,11 @@ const SystemPurposeCard = ({ hostDetails, akDetails }) => {
   const { organization_id: orgId, name } = details;
   const subscriptionFacetAttributes = details?.subscription_facet_attributes;
   const {
-    purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
+    purposeRole, purposeUsage, releaseVersion, serviceLevel,
   } = propsToCamelCase((subscriptionFacetAttributes || details) ?? {});
   const sysPurposeProps = {
     purposeRole,
     purposeUsage,
-    purposeAddons,
     releaseVersion,
     serviceLevel,
   };
@@ -142,21 +139,6 @@ const SystemPurposeCard = ({ hostDetails, akDetails }) => {
                 <Dd>
                   {dataIsLoading ? <Skeleton /> : releaseVersion}
                 </Dd>
-                {!!purposeAddons?.length && (
-                  <>
-                    <Dt>{__('Add-ons')}</Dt>
-                    {dataIsLoading ? <Skeleton /> : (
-                      <Dd>
-                        <List isPlain>
-                          {purposeAddons.map(addon => (
-                            <ListItem key={addon}>{addon}</ListItem>
-                          ))}
-                        </List>
-                      </Dd>
-                    )}
-                  </>
-                )
-                }
               </DescriptionListGroup>
             </DescriptionList>
             {showEditButton && (
@@ -201,7 +183,6 @@ SystemPurposeCard.propTypes = {
     purpose_role: PropTypes.string,
     release_version: PropTypes.string,
     service_level: PropTypes.string,
-    purpose_addons: PropTypes.arrayOf(PropTypes.string),
     permissions: PropTypes.shape({
       edit_activation_keys: PropTypes.bool,
     }),

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import { STATUS } from 'foremanReact/constants';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
@@ -11,9 +10,6 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
-  Select,
-  SelectOption,
-  SelectVariant,
 } from '@patternfly/react-core';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -29,27 +25,23 @@ import { defaultUsages, defaultRoles, defaultServiceLevels } from './SystemPurpo
 import { getActivationKey } from '../../../../../scenes/ActivationKeys/Details/ActivationKeyActions';
 
 const SystemPurposeEditModal = ({
-  closeModal, name, purposeRole, purposeUsage, purposeAddons,
+  closeModal, name, purposeRole, purposeUsage,
   serviceLevel, releaseVersion, isOpen, orgId, id, type,
 }) => {
   const initialPurposeRole = purposeRole ?? '';
   const initialServiceLevel = serviceLevel ?? '';
   const initialPurposeUsage = purposeUsage ?? '';
   const initialReleaseVersion = releaseVersion ?? '';
-  const initialPurposeAddons = purposeAddons ?? [];
   const [selectedRole, setSelectedRole] = useState(initialPurposeRole);
   const [selectedServiceLevel, setSelectedServiceLevel] = useState(initialServiceLevel);
   const [selectedUsage, setSelectedUsage] = useState(initialPurposeUsage);
-  const [addonSelectOpen, setAddonSelectOpen] = useState(false);
-  const [selectedAddons, setSelectedAddons] = useState(initialPurposeAddons);
   const [selectedReleaseVersion, setSelectedReleaseVersion] = useState(initialReleaseVersion);
 
   const unmodified = (
     selectedRole === initialPurposeRole &&
     selectedServiceLevel === initialServiceLevel &&
     selectedUsage === initialPurposeUsage &&
-    selectedReleaseVersion === initialReleaseVersion &&
-    isEqual(selectedAddons, initialPurposeAddons)
+    selectedReleaseVersion === initialReleaseVersion
   );
   const dispatch = useDispatch();
 
@@ -58,7 +50,7 @@ const SystemPurposeEditModal = ({
   const orgDetails = propsToCamelCase(organizationDetails ?? { systemPurposes: {} });
   const availableSyspurposeAttributes = orgDetails?.systemPurposes ?? {};
   const availableServiceLevels = orgDetails?.serviceLevels ?? [];
-  const { addons: availableAddons, roles: availableRoles, usage: availableUsages }
+  const { roles: availableRoles, usage: availableUsages }
     = availableSyspurposeAttributes;
   const selectorAPIKey = type === 'host' ? 'AVAILABLE_RELEASE_VERSIONS' : 'RELEASES';
 
@@ -79,19 +71,6 @@ const SystemPurposeEditModal = ({
     }
   }, [type, id, availableReleaseVersionsStatus, actionToDispatch, dispatch]);
 
-  const toggleAddonSelect = isOpenState => setAddonSelectOpen(isOpenState);
-
-  const onAddonSelect = (_event, selected) => {
-    const newSelectedAddons = new Set(selectedAddons);
-    if (!selected) return;
-    if (newSelectedAddons.has(selected)) {
-      newSelectedAddons.delete(selected);
-    } else {
-      newSelectedAddons.add(selected);
-    }
-    setSelectedAddons([...newSelectedAddons]);
-  };
-
   const refreshHostDetails = () => dispatch({
     type: 'API_GET',
     payload: {
@@ -122,14 +101,6 @@ const SystemPurposeEditModal = ({
   const usageOptions =
     buildOptions(defaultUsages, availableUsages, selectedUsage, purposeUsage);
 
-  // addons may be present on the host but not available from subscriptions,
-  // so we combine the options here
-  const addonToObject = addon => ({ label: addon, value: addon });
-  const addonsOptions =
-    [...new Set([ // don't repeat addons if they are already selected
-      ...purposeAddons.map(addonToObject), ...availableAddons?.map(addonToObject) ?? [],
-    ])];
-
   const serviceLevelOptions =
     buildOptions(defaultServiceLevels, availableServiceLevels, selectedServiceLevel, serviceLevel);
 
@@ -148,7 +119,6 @@ const SystemPurposeEditModal = ({
           autoheal: true,
           purpose_role: optionsToValue(roleOptions, selectedRole),
           purpose_usage: optionsToValue(usageOptions, selectedUsage),
-          purpose_addons: selectedAddons,
           release_version: optionsToValue(releaseVersionOptions, selectedReleaseVersion),
           service_level: optionsToValue(serviceLevelOptions, selectedServiceLevel),
         },
@@ -161,7 +131,6 @@ const SystemPurposeEditModal = ({
           autoheal: true,
           purpose_role: optionsToValue(roleOptions, selectedRole),
           purpose_usage: optionsToValue(usageOptions, selectedUsage),
-          purpose_addons: selectedAddons,
           release_version: optionsToValue(releaseVersionOptions, selectedReleaseVersion),
           service_level: optionsToValue(serviceLevelOptions, selectedServiceLevel),
         },
@@ -174,7 +143,6 @@ const SystemPurposeEditModal = ({
     setSelectedRole(initialPurposeRole);
     setSelectedServiceLevel(initialServiceLevel);
     setSelectedUsage(initialPurposeUsage);
-    setSelectedAddons(initialPurposeAddons);
     setSelectedReleaseVersion(initialReleaseVersion);
     closeModal();
   };
@@ -277,31 +245,6 @@ const SystemPurposeEditModal = ({
             ))}
           </FormSelect>
         </FormGroup>
-        <FormGroup label={__('Add-ons')} fieldId="addons">
-          <span id="syspurpose-addons-title" hidden>
-            Checkbox Title
-          </span>
-          <Select
-            variant={SelectVariant.typeaheadMulti}
-            aria-label="syspurpose-addons"
-            ouiaId="syspurpose-addons-select"
-            onToggle={toggleAddonSelect}
-            onSelect={onAddonSelect}
-            selections={selectedAddons}
-            isOpen={addonSelectOpen}
-            placeholderText={__('Select add-ons')}
-            aria-labelledby="syspurpose-addons-title"
-            menuAppendTo="parent"
-          >
-            {addonsOptions.map(option => (
-              <SelectOption
-                key={option.value}
-                value={option.value}
-                label={option.label}
-              />
-            ))}
-          </Select>
-        </FormGroup>
       </Form>
     </Modal>
   );
@@ -314,7 +257,6 @@ SystemPurposeEditModal.propTypes = {
   name: PropTypes.string,
   purposeRole: PropTypes.string.isRequired,
   purposeUsage: PropTypes.string.isRequired,
-  purposeAddons: PropTypes.arrayOf(PropTypes.string).isRequired,
   serviceLevel: PropTypes.string.isRequired,
   releaseVersion: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeCard.test.js

@@ -16,7 +16,6 @@ const baseHostDetails = {
     edit_hosts: true,
   },
   subscription_facet_attributes: {
-    purpose_addons: ['Addon1', 'Addon2'],
     purpose_role: 'Red Hat Enterprise Linux Server',
     purpose_usage: 'Production',
     service_level: 'Premium',
@@ -61,8 +60,6 @@ test('shows system purpose details for a host', async (done) => {
   expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
   expect(getByText('Production')).toBeInTheDocument();
   expect(getByText('Premium')).toBeInTheDocument();
-  expect(getByText('Addon1')).toBeInTheDocument();
-  expect(getByText('Addon2')).toBeInTheDocument();
   expect(getByText('8')).toBeInTheDocument();
 
   assertNockRequest(orgScope);
@@ -77,8 +74,6 @@ test('shows system purpose details for an activation key', () => {
   expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
   expect(getByText('Production')).toBeInTheDocument();
   expect(getByText('Premium')).toBeInTheDocument();
-  expect(getByText('Addon1')).toBeInTheDocument();
-  expect(getByText('Addon2')).toBeInTheDocument();
   expect(getByText('8')).toBeInTheDocument();
 });
 

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeEditModal.test.js

@@ -22,7 +22,6 @@ const baseHostDetails = {
     edit_hosts: true,
   },
   subscription_facet_attributes: {
-    purpose_addons: ['Addon1', 'Addon2'],
     purpose_role: 'Red Hat Enterprise Linux Server',
     purpose_usage: 'Production',
     service_level: 'Premium',
@@ -85,8 +84,6 @@ describe('SystemPurposeEditModal', () => {
     expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
     expect(getByText('Production')).toBeInTheDocument();
     expect(getByText('Premium')).toBeInTheDocument();
-    expect(getByText('Addon1')).toBeInTheDocument();
-    expect(getByText('Addon2')).toBeInTheDocument();
     expect(getByText('8')).toBeInTheDocument();
 
     assertNockRequest(orgScope);
@@ -136,7 +133,6 @@ describe('SystemPurposeEditModal', () => {
             // we're going to change role from 'Server' to 'Workstation'
             purpose_role: 'Red Hat Enterprise Linux Workstation',
             purpose_usage: 'Production',
-            purpose_addons: ['Addon1', 'Addon2'],
             release_version: '8',
             service_level: 'Premium',
           },
@@ -191,7 +187,6 @@ describe('SystemPurposeEditModal', () => {
           autoheal: true,
           purpose_role: 'Red Hat Enterprise Linux Workstation',
           purpose_usage: 'Production',
-          purpose_addons: ['Addon1', 'Addon2'],
           release_version: '8',
           service_level: 'Premium',
         },

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

@@ -0,0 +1,87 @@
+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';
+import { createJob } from '../Tabs/customizedRexUrlHelpers';
+
+const cardHeader = (
+  <>
+    <span style={{ marginRight: '0.5rem' }}>{__('Image mode details')}</span>
+    <FontAwesomeImageModeIcon />
+  </>
+);
+const actionUrl = hostname => createJob({
+  hostname,
+  feature: 'katello_bootc_action',
+  inputs: {},
+});
+
+const ImageModeCard = ({ isExpandedGlobal, hostDetails }) => {
+  const imageMode = hostDetails?.content_facet_attributes?.bootc_booted_image;
+  if (!imageMode) return null;
+  const getValueOrDash = value => (value || '—');
+  return (
+    <CardTemplate
+      header={cardHeader}
+      expandable
+      masonryLayout
+      isExpandedGlobal={isExpandedGlobal}
+    >
+      <a href={actionUrl(hostDetails.name)}>{__('Modify via remote execution')}</a>
+      <DescriptionList isHorizontal>
+        <DescriptionListGroup>
+          <Dt>{__('Running image')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_booted_image)}</Dd>
+          <Dt>{__('Running image digest')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_booted_digest)}</Dd>
+
+          <Dt>{__('Staged image')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_staged_image)}</Dd>
+          <Dt>{__('Staged image digest')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_staged_digest)}</Dd>
+
+          <Dt>{__('Available image')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_available_image)}</Dd>
+          <Dt>{__('Available image digest')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_available_digest)}</Dd>
+
+          <Dt>{__('Rollback image')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_rollback_image)}</Dd>
+          <Dt>{__('Rollback image digest')}</Dt>
+          <Dd>{getValueOrDash(hostDetails.content_facet_attributes.bootc_rollback_digest)}</Dd>
+        </DescriptionListGroup>
+      </DescriptionList>
+    </CardTemplate>
+  );
+};
+
+ImageModeCard.propTypes = {
+  isExpandedGlobal: PropTypes.bool,
+  hostDetails: PropTypes.shape({
+    name: PropTypes.string,
+    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;

data/webpack/components/extensions/HostDetails/DetailsTabCards/RegistrationCard.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
   DescriptionList,
@@ -55,12 +56,14 @@ const RegistrationCard = ({ isExpandedGlobal, hostDetails }) => {
   const subscriptionFacetAttributes
     = propsToCamelCase(hostDetails?.subscription_facet_attributes || {});
   const {
-    registeredAt, activationKeys, user,
+    registeredAt, registeredThrough, activationKeys, user,
   }
     = subscriptionFacetAttributes;
   const contentFacetAttributes
     = propsToCamelCase(hostDetails?.content_facet_attributes || {});
   const { contentSourceName } = contentFacetAttributes;
+  const { contentSource } = propsToCamelCase(contentFacetAttributes || {});
+  const { loadBalanced, registrationHost } = propsToCamelCase(contentSource || {});
   const login = user?.login;
   if (!registeredAt) return null;
   return (
@@ -79,9 +82,32 @@ const RegistrationCard = ({ isExpandedGlobal, hostDetails }) => {
           <DescriptionListTerm>{__('Registered by')}</DescriptionListTerm>
           <RegisteredBy user={login} activationKeys={activationKeys} />
         </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>{__('Registered to')}</DescriptionListTerm>
+          <DescriptionListDescription>{registeredThrough}</DescriptionListDescription>
+        </DescriptionListGroup>
+        {loadBalanced && (
+          <DescriptionListGroup>
+            <DescriptionListTerm>{__('Load balancer')}</DescriptionListTerm>
+            <DescriptionListDescription>{registrationHost}</DescriptionListDescription>
+          </DescriptionListGroup>
+        )}
         <DescriptionListGroup>
           <DescriptionListTerm>{__('Content source')}</DescriptionListTerm>
-          <DescriptionListDescription>{contentSourceName}</DescriptionListDescription>
+          {!loadBalanced && (
+            <DescriptionListDescription>{contentSourceName}</DescriptionListDescription>
+          )}
+          {loadBalanced && (
+            <DescriptionListDescription>
+              <FormattedMessage
+                id="load-balancer-content-source-text"
+                defaultMessage={__('Content may come from {contentSourceName} or any other Smart Proxy behind the load balancer.')}
+                values={{
+                  contentSourceName: <strong>{contentSourceName}</strong>,
+                }}
+              />
+            </DescriptionListDescription>
+          )}
         </DescriptionListGroup>
       </DescriptionList>
     </CardTemplate>

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebInstallModal.js

@@ -87,7 +87,7 @@ const DebInstallModal = ({
   isOpen, closeModal, hostId, hostName, triggerPackageInstall,
 }) => {
   const emptyContentTitle = __('No packages available to install');
-  const emptyContentBody = __('No packages available to install on this host. Please check the host\'s content view and lifecycle environment.');
+  const emptyContentBody = __('No packages available to install on this host. Please check the host\'s assigned content view environments.');
   const emptySearchTitle = __('No matching packages found');
   const emptySearchBody = __('Try changing your search settings.');
   const columnHeaders = ['', __('Package'), __('Version')];

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js

@@ -427,7 +427,7 @@ export const ErrataTab = () => {
             />
             <ErrataToggleGroupItem
               text={__('Installable')}
-              tooltipText={__('Installable errata are applicable errata that are available in the host\'s content view and lifecycle environment.')}
+              tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
               buttonId="installableToggle"
               aria-label="Show installable errata"
               isSelected={toggleGroupState === INSTALLABLE}
@@ -557,7 +557,7 @@ export const ErrataTab = () => {
                         <span>
                           <Tooltip
                             content={
-                              __("This erratum is not installable because it is not in this host's content view and lifecycle environment.")
+                              __("This erratum is not installable because it is not in this host's assigned content view environments.")
                             }
                           >
 

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.js

@@ -87,7 +87,7 @@ const PackageInstallModal = ({
   isOpen, closeModal, hostId, hostName, triggerPackageInstall,
 }) => {
   const emptyContentTitle = __('No packages available to install');
-  const emptyContentBody = __('No packages available to install on this host. Please check the host\'s content view and lifecycle environment.');
+  const emptyContentBody = __('No packages available to install on this host. Please check the host\'s assigned content view environments.');
   const emptySearchTitle = __('No matching packages found');
   const emptySearchBody = __('Try changing your search settings.');
   const columnHeaders = ['', __('Package'), __('Version')];

data/webpack/components/extensions/Hosts/FontAwesomeImageModeIcon.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { Tooltip } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const FontAwesomeImageModeIcon = ({ fill, margin, title }) => (
+  <Tooltip content={title}>
+    <svg
+      id="Layer_2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 221.37 221.44"
+      width="14px"
+      height="14px"
+      version="1.1"
+      xmlSpace="preserve"
+      style={{
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        strokeLinejoin: 'round',
+        strokeMiterlimit: 2,
+        margin: margin || '-2px',
+      }}
+    >
+      <g id="Layer_1-2">
+        <circle
+          fill={fill}
+          className="cls-1"
+          cx="77.01"
+          cy="87"
+          r="20.41"
+          transform="translate(-39.07 79) rotate(-45)"
+        />
+        <path
+          className="cls-1"
+          fill={fill}
+          d="M205.48,40.09L120.07,1.72c-5.84-2.28-12.28-2.29-18.13-.02L15.93,40.09h0C6.25,43.85,0,52.98,0,63.37v91.2c0,9.48,5.5,18.28,14.02,22.44l85.84,41.91c3.45,1.68,7.2,2.52,10.95,2.52,4.03,0,8.05-.97,11.69-2.89l85.58-45.31c8.2-4.34,13.29-12.8,13.29-22.07V63.35c0-10.36-6.24-19.49-15.88-23.26ZM110.97,28.55l82.09,37.07v60.44l-39.44-37.64c-2.09-2.09-5.48-2.09-7.57,0l-60.43,60.43-24.76-24.76c-2.09-2.09-5.48-2.09-7.57,0l-25,26.93v-85.39L110.97,28.55Z"
+        />
+      </g>
+    </svg>
+  </Tooltip>
+);
+
+FontAwesomeImageModeIcon.propTypes = {
+  fill: propTypes.string,
+  margin: propTypes.string,
+  title: propTypes.string,
+};
+
+FontAwesomeImageModeIcon.defaultProps = {
+  fill: 'var(--pf-global--palette--black-600)',
+  margin: '-2px',
+  title: __('Image mode'),
+};
+
+export default FontAwesomeImageModeIcon;

data/webpack/containers/Application/config.js

@@ -15,6 +15,7 @@ import ContentDetails from '../../scenes/Content/Details';
 import withHeader from './withHeaders';
 import ChangeContentSource from '../../scenes/Hosts/ChangeContentSource';
 import AlternateContentSource from '../../scenes/AlternateContentSources';
+import BootedContainerImages from '../../scenes/BootedContainerImages';
 
 // eslint-disable-next-line import/prefer-default-export
 export const links = [
@@ -85,4 +86,8 @@ export const links = [
     component: WithOrganization(withHeader(AlternateContentSource, { title: __('Alternate Content Sources') })),
     exact: false,
   },
+  {
+    path: 'booted_container_images',
+    component: WithOrganization(withHeader(BootedContainerImages, { title: __('Booted container images') })),
+  },
 ];