feat(RHINENG-9685): image/package mode icons to inv table

This PR adds Image and Package mode icons to the Inventory table. We use the api to request the `bootc_status` from `system_profile` and if `bootc_status` exists, we show the image mode icon. If it doesn't exist, we show the package mode icon. Hovering over each will provide a popover with a description of the image and package modes, respectively.
RedHatInsights · Apr 26, 2024 · 7b112ea · 7b112ea
1 parent e17bbd1
commit 7b112ea
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 2 deletions.
diff --git a/src/api/api.js b/src/api/api.js
@@ -205,6 +205,7 @@ export async function getEntities(
       system_profile: [
         'operating_system',
         /* needed by inventory groups */ 'system_update_method',
+        /* needed for image based systems */ 'bootc_status',
       ],
     },
     ...options

diff --git a/src/components/FontAwesomeImageIcon.js b/src/components/FontAwesomeImageIcon.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import propTypes from 'prop-types';
 
-const FontAwesomeImageIcon = () => (
+const FontAwesomeImageIcon = ({ fill, margin }) => (
   <svg
     id="Layer_2"
     xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +15,7 @@ const FontAwesomeImageIcon = () => (
       clipRule: 'evenodd',
       strokeLinejoin: 'round',
       strokeMiterlimit: 2,
-      margin: '-2px',
+      margin: margin || '-2px',
     }}
   >
     <g id="Layer_1-2">
@@ -27,10 +28,16 @@ const FontAwesomeImageIcon = () => (
       />
       <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>
 );
 
+FontAwesomeImageIcon.propTypes = {
+  fill: propTypes.string,
+  margin: propTypes.string,
+};
+
 export default FontAwesomeImageIcon;
diff --git a/src/components/InventoryTable/TitleColumn.js b/src/components/InventoryTable/TitleColumn.js
@@ -2,6 +2,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ConversionPopover } from './ConversionPopover/ConversionPopover';
+import { Icon, Popover } from '@patternfly/react-core';
+import { BundleIcon } from '@patternfly/react-icons';
+import FontAwesomeImageIcon from '../FontAwesomeImageIcon';
 
 /**
  * Helper function to proprly calculate what to do when user clicks on first cell.
@@ -40,6 +43,45 @@ const TitleColumn = ({ children, id, item, ...props }) => (
         children
       ) : (
         <span>
+          {item?.system_profile?.bootc_status ? (
+            <Popover
+              triggerAction="hover"
+              headerContent="Image-based system"
+              bodyContent={
+                <div>
+                  Image mode for Red Hat Enterprise Linux is a container-native
+                  approach that uses the same bits but delivers them as a
+                  container image. Updates are immutable and the experience is
+                  very close to running a containerized application.
+                </div>
+              }
+            >
+              <Icon style={{ marginRight: '8px' }}>
+                <FontAwesomeImageIcon
+                  fill="var(--pf-v5-global--icon--Color--light)"
+                  margin="0px"
+                />
+              </Icon>
+            </Popover>
+          ) : (
+            <Popover
+              triggerAction="hover"
+              headerContent="Package-based system"
+              bodyContent={
+                <div>
+                  Package mode is a familiar RHEL experience across any
+                  footprint where the OS is assembled and updated from rpm
+                  packages. This is traditionally how RHEL is deployed and will
+                  remain the preferred method for many. Package mode is not
+                  going away.
+                </div>
+              }
+            >
+              <Icon style={{ marginRight: '8px' }}>
+                <BundleIcon color="var(--pf-v5-global--icon--Color--light)" />
+              </Icon>
+            </Popover>
+          )}
           <Link
             to={item?.href || item?.to || id}
             {...{

diff --git a/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap b/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap
@@ -26,6 +26,33 @@ exports[`TitleColumn should render correctly with NO data 1`] = `
       class=""
     >
       <span>
+        <div
+          style="display: contents;"
+        >
+          <span
+            class="pf-v5-c-icon"
+            style="margin-right: 8px;"
+          >
+            <span
+              class="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                color="var(--pf-v5-global--icon--Color--light)"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
         <a
           class="fakeLink"
         />
@@ -44,6 +71,33 @@ exports[`TitleColumn should render correctly with data 1`] = `
       class=""
     >
       <span>
+        <div
+          style="display: contents;"
+        >
+          <span
+            class="pf-v5-c-icon"
+            style="margin-right: 8px;"
+          >
+            <span
+              class="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                color="var(--pf-v5-global--icon--Color--light)"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
         <a
           class="fakeLink"
           to="testId"
@@ -65,6 +119,33 @@ exports[`TitleColumn should render correctly with href 1`] = `
       class=""
     >
       <span>
+        <div
+          style="display: contents;"
+        >
+          <span
+            class="pf-v5-c-icon"
+            style="margin-right: 8px;"
+          >
+            <span
+              class="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                color="var(--pf-v5-global--icon--Color--light)"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
         <a
           class="fakeLink"
           to="/link/to/item"
@@ -89,6 +170,33 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
       class=""
     >
       <span>
+        <div
+          style="display: contents;"
+        >
+          <span
+            class="pf-v5-c-icon"
+            style="margin-right: 8px;"
+          >
+            <span
+              class="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                color="var(--pf-v5-global--icon--Color--light)"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
         <a
           class="fakeLink"
           to="testId"
@@ -110,6 +218,33 @@ exports[`TitleColumn should render correctly with to 1`] = `
       class=""
     >
       <span>
+        <div
+          style="display: contents;"
+        >
+          <span
+            class="pf-v5-c-icon"
+            style="margin-right: 8px;"
+          >
+            <span
+              class="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                color="var(--pf-v5-global--icon--Color--light)"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M314.143886,228.505956 L317.553886,510.305956 L650.853886,583.995956 C661.740694,586.3978 673.134531,584.498827 682.653886,578.695956 L831.023886,487.805956 L835.523886,218.105956 C835.891154,196.417205 820.089335,177.831867 798.623886,174.705956 L504.723886,132.305956 L343.423886,187.205956 C325.75695,193.194142 313.934673,209.852622 314.111877,228.505956 L314.143886,228.505956 Z M986.143886,89.605956 L722.343886,57.405956 L577.023886,107.705956 L860.123886,146.905956 C881.738011,149.916157 897.704407,168.58654 897.323886,190.405956 L892.753886,449.995956 L1017.85389,373.395956 L1023.95389,133.495956 C1024.62358,111.281829 1008.22116,92.2324674 986.153886,89.595956 L986.143886,89.605956 Z M317.343886,591.905956 L321.243886,904.805956 L638.743886,1000.10596 C653.190248,1004.42398 668.842707,1000.89934 680.043886,990.805956 L823.843886,860.605956 L828.743886,567.805956 L681.343886,664.205956 C671.460593,670.687909 659.34701,672.821346 647.843886,670.105956 L317.343886,591.905956 Z M272.243886,175.905956 C326.643886,158.005956 381.043886,140.139289 435.443886,122.305956 L199.343886,88.205956 L31.1438863,137.105956 C12.1841324,142.605495 -0.629574671,160.265518 0.0238862761,179.995956 L9.12388628,442.195956 L246.123886,494.595956 L242.523886,217.395956 C242.331797,198.571464 254.343871,181.786918 272.223886,175.895956 L272.243886,175.905956 Z M508.843886,98.205956 C559.143886,81.705956 609.410553,65.205956 659.643886,48.705956 L438.243886,22.305956 C432.507745,21.6175225 426.691666,22.0936928 421.143886,23.705956 L276.023886,65.905956 L508.843886,98.205956 Z M10.7538863,519.405956 L19.9538863,783.905956 C20.5605633,802.39522 32.9246802,818.424271 50.6538863,823.705956 L253.023886,884.405956 L247.723886,575.505956 L10.7538863,519.405956 Z M890.453886,527.505956 L1016.35389,445.205956 L1010.15389,673.905956 C1009.86976,685.691377 1004.73149,696.836362 995.953886,704.705956 L885.553886,804.705956 L890.453886,527.505956 Z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
         <a
           class="fakeLink"
           to="[object Object]"