Revert "Revert "feat(RHINENG-9687): create system type filter (RedHat…

…Insights#2190)""

This reverts commit 4c9d70f.

src/Utilities/constants.js

@@ -8,6 +8,7 @@ export const REGISTERED_CHIP = 'registered_with';
 export const OS_CHIP = 'operating_system';
 export const RHCD_FILTER_KEY = 'rhc_client_id';
 export const UPDATE_METHOD_KEY = 'system_update_method';
+export const SYSTEM_TYPE_KEY = 'system_type';
 export const LAST_SEEN_CHIP = 'last_seen';
 export const HOST_GROUP_CHIP = 'group_name'; // use the same naming as for the back end parameter
 //REPORTERS
@@ -119,6 +120,17 @@ const initUpdateMethodOptions = [
 
 export const updateMethodOptions = initUpdateMethodOptions;
 
+export const systemTypeOptions = [
+  {
+    label: 'Package mode',
+    value: 'nil',
+  },
+  {
+    label: 'Image mode',
+    value: 'not_nil',
+  },
+];
+
 export function filterToGroup(filter = [], valuesKey = 'values') {
   return filter.reduce(
     (accGroup, group) => ({

src/api/api.js

@@ -153,6 +153,7 @@ export const calculateSystemProfile = ({
   updateMethodFilter,
   hostTypeFilter,
   system_profile,
+  systemTypeFilter,
 }) => {
   const operating_system = buildOperatingSystemFilter(osFilter);
   const newSystemProfile = {
@@ -167,6 +168,17 @@ export const calculateSystemProfile = ({
       : {}),
     ...(rhcdFilter ? { [RHCD_FILTER_KEY]: rhcdFilter } : {}),
     ...(Object.keys(operating_system).length ? { operating_system } : {}),
+    ...(systemTypeFilter?.length
+      ? {
+          bootc_status: {
+            booted: {
+              image_digest: {
+                is: systemTypeFilter,
+              },
+            },
+          },
+        }
+      : {}),
   };
 
   return Object.keys(newSystemProfile).length
@@ -194,6 +206,9 @@ export const filtersReducer = (acc, filter = {}) => ({
   ...('hostGroupFilter' in filter && {
     hostGroupFilter: filter.hostGroupFilter,
   }),
+  ...('systemTypeFilter' in filter && {
+    systemTypeFilter: filter.systemTypeFilter,
+  }),
 });
 
 export async function getEntities(

src/components/InventoryTable/EntityTableToolbar.js

@@ -32,6 +32,7 @@ import {
   TEXT_FILTER,
   TagsModal,
   UPDATE_METHOD_KEY,
+  SYSTEM_TYPE_KEY,
   arrayToSelection,
   reduceFilters,
 } from '../../Utilities/index';
@@ -62,6 +63,9 @@ import {
   useTagsFilter,
   useTextFilter,
   useUpdateMethodFilter,
+  useSystemTypeFilter,
+  systemTypeFilterReducer,
+  systemTypeFilterState,
 } from '../filters';
 import useFeatureFlag from '../../Utilities/useFeatureFlag';
 import useGroupFilter from '../filters/useGroupFilter';
@@ -94,6 +98,7 @@ const EntityTableToolbar = ({
   onRefreshData,
   loaded,
   showTagModal,
+  showSystemTypeFilter,
   showCentosVersions,
   showNoGroupOption,
   ...props
@@ -110,6 +115,7 @@ const EntityTableToolbar = ({
       lastSeenFilterReducer,
       updateMethodFilterReducer,
       groupFilterReducer,
+      systemTypeFilterReducer,
     ]),
     {
       ...textFilterState,
@@ -121,6 +127,7 @@ const EntityTableToolbar = ({
       ...updateMethodFilterState,
       ...lastSeenFilterState,
       ...groupFilterState,
+      ...systemTypeFilterState,
     }
   );
   const activeFilters = useSelector(
@@ -188,6 +195,12 @@ const EntityTableToolbar = ({
     reducer
   );
 
+  const [
+    systemTypeConfig,
+    systemTypeChips,
+    systemTypeValue,
+    setSystemTypeValue,
+  ] = useSystemTypeFilter(reducer);
   /**
    * Debounced function for fetching all tags.
    */
@@ -230,6 +243,9 @@ const EntityTableToolbar = ({
     hostGroupFilter:
       !(hideFilters.all && hideFilters.hostGroupFilter !== false) &&
       !hideFilters.hostGroupFilter,
+    systemTypeFilter:
+      !(hideFilters.all && hideFilters.systemTypeFilter !== false) &&
+      !hideFilters.systemTypeFilter,
   };
 
   /**
@@ -276,10 +292,12 @@ const EntityTableToolbar = ({
       lastSeenFilter,
       updateMethodFilter,
       hostGroupFilter,
+      systemTypeFilter,
     } = reduceFilters([
       ...(activeFilters || []),
       ...(customFilters?.filters || []),
     ]);
+
     debouncedRefresh();
     enabledFilters.name && setTextFilter(textFilter);
     enabledFilters.stale && setStaleFilter(staleFilter);
@@ -292,6 +310,7 @@ const EntityTableToolbar = ({
       setUpdateMethodValue(updateMethodFilter);
     enabledFilters.lastSeenFilter && setLastSeenFilterValue(lastSeenFilter);
     enabledFilters.hostGroupFilter && setHostGroupValue(hostGroupFilter);
+    enabledFilters.systemTypeFilter && setHostGroupValue(systemTypeFilter);
   }, []);
 
   /**
@@ -399,6 +418,12 @@ const EntityTableToolbar = ({
     }
   }, [hostGroupValue]);
 
+  useEffect(() => {
+    if (shouldReload && enabledFilters.systemTypeFilter) {
+      onSetFilter(systemTypeValue, 'systemTypeFilter', debouncedRefresh);
+    }
+  }, [systemTypeValue]);
+
   /**
    * Mapper to simplify removing of any filter.
    */
@@ -429,6 +454,8 @@ const EntityTableToolbar = ({
       setUpdateMethodValue(onDeleteFilter(deleted, updateMethodValue)),
     [HOST_GROUP_CHIP]: (deleted) =>
       setHostGroupValue(onDeleteFilter(deleted, hostGroupValue)),
+    [SYSTEM_TYPE_KEY]: (deleted) =>
+      setSystemTypeValue(onDeleteFilter(deleted, systemTypeValue)),
   };
   /**
    * Function to reset all filters with 'Reset Filter' is clicked
@@ -443,6 +470,7 @@ const EntityTableToolbar = ({
     enabledFilters.lastSeenFilter && setLastSeenFilterValue([]);
     enabledFilters.updateMethodFilter && setUpdateMethodValue([]);
     enabledFilters.hostGroupFilter && setHostGroupValue([]);
+    enabledFilters.systemTypeFilter && setSystemTypeValue([]);
     setEndDate();
     setStartDate(oldestDate);
     dispatch(setFilter([]));
@@ -467,6 +495,9 @@ const EntityTableToolbar = ({
           : []),
         ...(!hasItems && enabledFilters.lastSeenFilter ? lastSeenChip : []),
         ...(!hasItems && enabledFilters.hostGroupFilter ? hostGroupChips : []),
+        ...(showSystemTypeFilter && !hasItems && enabledFilters.systemTypeFilter
+          ? systemTypeChips
+          : []),
         ...(activeFiltersConfig?.filters || []),
       ],
       onDelete: (e, [deleted, ...restDeleted], isAll) => {
@@ -495,6 +526,9 @@ const EntityTableToolbar = ({
           ...(enabledFilters.updateMethodFilter ? [updateMethodConfig] : []),
           ...(enabledFilters.lastSeenFilter ? [lastSeenFilter] : []),
           ...(enabledFilters.hostGroupFilter ? [hostGroupConfig] : []),
+          ...(showSystemTypeFilter && enabledFilters.systemTypeFilter
+            ? [systemTypeConfig]
+            : []),
           ...(showTags && enabledFilters.tags ? [tagsFilter] : []),
         ]
       : []),
@@ -627,6 +661,7 @@ EntityTableToolbar.propTypes = {
     lastSeen: PropTypes.bool,
     updateMethodFilter: PropTypes.bool,
     hostGroupFilter: PropTypes.bool,
+    systemTypeFilter: PropTypes.bool,
     all: PropTypes.bool,
   }),
   paginationProps: PropTypes.object,
@@ -641,6 +676,7 @@ EntityTableToolbar.propTypes = {
   disableDefaultColumns: PropTypes.any,
   showCentosVersions: PropTypes.bool,
   showNoGroupOption: PropTypes.bool,
+  showSystemTypeFilter: PropTypes.bool,
 };
 
 EntityTableToolbar.defaultProps = {

src/components/InventoryTable/TitleColumn.js

@@ -60,6 +60,7 @@ const TitleColumn = ({ children, id, item, ...props }) => (
                 <FontAwesomeImageIcon
                   fill="var(--pf-v5-global--icon--Color--light)"
                   margin="0px"
+                  aria-label="Image mode icon"
                 />
               </Icon>
             </Popover>
@@ -77,7 +78,10 @@ const TitleColumn = ({ children, id, item, ...props }) => (
               }
             >
               <Icon style={{ marginRight: '8px' }}>
-                <BundleIcon color="var(--pf-v5-global--icon--Color--light)" />
+                <BundleIcon
+                  color="var(--pf-v5-global--icon--Color--light)"
+                  aria-label="Package mode icon"
+                />
               </Icon>
             </Popover>
           )}

src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap

@@ -38,6 +38,7 @@ exports[`TitleColumn should render correctly with NO data 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Package mode icon"
                 class="pf-v5-svg"
                 color="var(--pf-v5-global--icon--Color--light)"
                 fill="currentColor"
@@ -83,6 +84,7 @@ exports[`TitleColumn should render correctly with data 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Package mode icon"
                 class="pf-v5-svg"
                 color="var(--pf-v5-global--icon--Color--light)"
                 fill="currentColor"
@@ -131,6 +133,7 @@ exports[`TitleColumn should render correctly with href 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Package mode icon"
                 class="pf-v5-svg"
                 color="var(--pf-v5-global--icon--Color--light)"
                 fill="currentColor"
@@ -182,6 +185,7 @@ exports[`TitleColumn should render correctly with os_release 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Package mode icon"
                 class="pf-v5-svg"
                 color="var(--pf-v5-global--icon--Color--light)"
                 fill="currentColor"
@@ -230,6 +234,7 @@ exports[`TitleColumn should render correctly with to 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Package mode icon"
                 class="pf-v5-svg"
                 color="var(--pf-v5-global--icon--Color--light)"
                 fill="currentColor"

src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js

@@ -1,4 +1,10 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, {
+  Fragment,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import * as actions from '../../../store/actions';
@@ -26,6 +32,8 @@ import uniq from 'lodash/uniq';
 import useTableActions from './useTableActions';
 import useGlobalFilter from '../../filters/useGlobalFilter';
 import useOnRefresh from '../../filters/useOnRefresh';
+import useFeatureFlag from '../../../Utilities/useFeatureFlag';
+import { AccountStatContext } from '../../../Routes';
 
 const BulkDeleteButton = ({ selectedSystems, ...props }) => {
   const requiredPermissions = selectedSystems.map(({ groups }) =>
@@ -63,6 +71,7 @@ const ConventionalSystemsTab = ({
   initialLoading,
   hasAccess,
   hostGroupFilter,
+  systemTypeFilter,
 }) => {
   const chrome = useChrome();
   const inventory = useRef(null);
@@ -78,7 +87,8 @@ const ConventionalSystemsTab = ({
       rhcdFilter,
       updateMethodFilter,
       hostGroupFilter,
-      lastSeenFilter
+      lastSeenFilter,
+      systemTypeFilter
     )
   );
   const [ediOpen, onEditOpen] = useState(false);
@@ -156,9 +166,12 @@ const ConventionalSystemsTab = ({
     setAddHostGroupModalOpen
   );
 
+  const isBootcEnabled = useFeatureFlag('hbi.ui.bifrost');
+  const { hasBootcImages } = useContext(AccountStatContext);
   return (
     <Fragment>
       <InventoryTableCmp
+        showSystemTypeFilter={isBootcEnabled && hasBootcImages}
         hasAccess={hasAccess}
         isRbacEnabled
         customFilters={{ filters, globalFilter }}
@@ -370,6 +383,10 @@ ConventionalSystemsTab.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.string,
   ]),
+  systemTypeFilter: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]),
 };
 
 ConventionalSystemsTab.defaultProps = {

src/components/filters/index.js

@@ -7,6 +7,7 @@ export * from './useRhcdFilter';
 export * from './useUpdateMethodFilter';
 export * from './useLastSeenFilter';
 export * from './useGroupFilter';
+export * from './useSystemTypeFilter';
 export const filtersReducer = (reducersList) => (state, action) =>
   reducersList.reduce(
     (acc, curr) => ({

src/components/filters/useSystemTypeFilter.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import {
+  SYSTEM_TYPE_KEY,
+  systemTypeOptions as defaultSystemTypeOptions,
+} from '../../Utilities/index';
+
+export const systemTypeFilterState = { systemTypeFilter: [] };
+export const SYSTEM_TYPE_FILTER = 'SYSTEM_TYPE_FILTER';
+export const systemTypeFilterReducer = (_state, { type, payload }) => ({
+  ...(type === SYSTEM_TYPE_FILTER && {
+    systemTypeFilter: payload,
+  }),
+});
+
+export const useSystemTypeFilter = (
+  [state, dispatch] = [systemTypeFilterState]
+) => {
+  let [filterStateValue, setStateValue] = useState([]);
+  const systemTypeValue = dispatch ? state.systemTypeFilter : filterStateValue;
+  const setValue = dispatch
+    ? (newValue) => dispatch({ type: SYSTEM_TYPE_FILTER, payload: newValue })
+    : setStateValue;
+
+  const filter = {
+    label: 'System type',
+    value: 'not_nil',
+    type: 'checkbox',
+    filterValues: {
+      value: systemTypeValue,
+      onChange: (_e, value) => {
+        setValue(value);
+      },
+      items: defaultSystemTypeOptions,
+    },
+  };
+
+  const chip =
+    systemTypeValue?.length > 0
+      ? [
+          {
+            category: 'System type',
+            type: SYSTEM_TYPE_KEY,
+            chips: defaultSystemTypeOptions
+              .filter(({ value }) => systemTypeValue.includes(value))
+              .map(({ label, ...props }) => ({ name: label, ...props })),
+          },
+        ]
+      : [];
+
+  return [filter, chip, systemTypeValue, setValue];
+};