feat(RHINENG-9687): create system type filter (#2190)

* feat(RHINENG-9687): create system type filter * chore(RHINENG-9687): gate the filter with flags * chore: add labels to system type icons * chore: update test snapshots
RedHatInsights · May 3, 2024 · a14c486 · a14c486
1 parent 212c1d8
commit a14c486
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 3 deletions.
diff --git a/src/Utilities/constants.js b/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
@@ -104,6 +105,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) => ({

diff --git a/src/api/api.js b/src/api/api.js
@@ -110,6 +110,7 @@ export const calculateSystemProfile = ({
   rhcdFilter,
   updateMethodFilter,
   hostTypeFilter,
+  systemTypeFilter,
 }) => {
   let systemProfile = {};
   const osFilterValues = Array.isArray(osFilter)
@@ -166,6 +167,16 @@ export const calculateSystemProfile = ({
     systemProfile['host_type'] = 'nil';
   }
 
+  if (systemTypeFilter?.length) {
+    systemProfile.bootc_status = {
+      booted: {
+        image_digest: {
+          is: systemTypeFilter,
+        },
+      },
+    };
+  }
+
   return generateFilter({
     system_profile: systemProfile,
   });
@@ -189,6 +200,9 @@ export const filtersReducer = (acc, filter = {}) => ({
   ...('hostGroupFilter' in filter && {
     hostGroupFilter: filter.hostGroupFilter,
   }),
+  ...('systemTypeFilter' in filter && {
+    systemTypeFilter: filter.systemTypeFilter,
+  }),
 });
 
 export async function getEntities(

diff --git a/src/components/InventoryTable/EntityTableToolbar.js b/src/components/InventoryTable/EntityTableToolbar.js
@@ -32,6 +32,7 @@ import {
   TEXT_FILTER,
   TagsModal,
   UPDATE_METHOD_KEY,
+  SYSTEM_TYPE_KEY,
   arrayToSelection,
   reduceFilters,
 } from '../../Utilities/index';
@@ -60,6 +61,9 @@ import {
   useTagsFilter,
   useTextFilter,
   useUpdateMethodFilter,
+  useSystemTypeFilter,
+  systemTypeFilterReducer,
+  systemTypeFilterState,
 } from '../filters';
 import useOperatingSystemFilter from '../filters/useOperatingSystemFilter';
 import useFeatureFlag from '../../Utilities/useFeatureFlag';
@@ -93,6 +97,7 @@ const EntityTableToolbar = ({
   onRefreshData,
   loaded,
   showTagModal,
+  showSystemTypeFilter,
   showCentosVersions,
   ...props
 }) => {
@@ -108,6 +113,7 @@ const EntityTableToolbar = ({
       lastSeenFilterReducer,
       updateMethodFilterReducer,
       groupFilterReducer,
+      systemTypeFilterReducer,
     ]),
     {
       ...textFilterState,
@@ -118,6 +124,7 @@ const EntityTableToolbar = ({
       ...updateMethodFilterState,
       ...lastSeenFilterState,
       ...groupFilterState,
+      ...systemTypeFilterState,
     }
   );
   const filters = useSelector(
@@ -185,6 +192,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,
   };
 
   /**
@@ -282,6 +298,7 @@ const EntityTableToolbar = ({
       lastSeenFilter,
       updateMethodFilter,
       hostGroupFilter,
+      systemTypeFilter,
     } = reduceFilters([...(filters || []), ...(customFilters?.filters || [])]);
 
     debouncedRefresh();
@@ -296,6 +313,7 @@ const EntityTableToolbar = ({
       setUpdateMethodValue(updateMethodFilter);
     enabledFilters.lastSeenFilter && setLastSeenFilterValue(lastSeenFilter);
     enabledFilters.hostGroupFilter && setHostGroupValue(hostGroupFilter);
+    enabledFilters.systemTypeFilter && setHostGroupValue(systemTypeFilter);
   }, []);
 
   /**
@@ -402,6 +420,12 @@ const EntityTableToolbar = ({
     }
   }, [hostGroupValue]);
 
+  useEffect(() => {
+    if (shouldReload && enabledFilters.systemTypeFilter) {
+      onSetFilter(systemTypeValue, 'systemTypeFilter', debouncedRefresh);
+    }
+  }, [systemTypeValue]);
+
   /**
    * Mapper to simplify removing of any filter.
    */
@@ -437,6 +461,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
@@ -451,6 +477,7 @@ const EntityTableToolbar = ({
     enabledFilters.lastSeenFilter && setLastSeenFilterValue([]);
     enabledFilters.updateMethodFilter && setUpdateMethodValue([]);
     enabledFilters.hostGroupFilter && setHostGroupValue([]);
+    enabledFilters.systemTypeFilter && setSystemTypeValue([]);
     setEndDate();
     setStartDate(oldestDate);
     dispatch(setFilter([]));
@@ -475,6 +502,9 @@ const EntityTableToolbar = ({
           : []),
         ...(!hasItems && enabledFilters.lastSeenFilter ? lastSeenChip : []),
         ...(!hasItems && enabledFilters.hostGroupFilter ? hostGroupChips : []),
+        ...(showSystemTypeFilter && !hasItems && enabledFilters.systemTypeFilter
+          ? systemTypeChips
+          : []),
         ...(activeFiltersConfig?.filters || []),
       ],
       onDelete: (e, [deleted, ...restDeleted], isAll) => {
@@ -503,6 +533,9 @@ const EntityTableToolbar = ({
           ...(enabledFilters.updateMethodFilter ? [updateMethodConfig] : []),
           ...(enabledFilters.lastSeenFilter ? [lastSeenFilter] : []),
           ...(enabledFilters.hostGroupFilter ? [hostGroupConfig] : []),
+          ...(showSystemTypeFilter && enabledFilters.systemTypeFilter
+            ? [systemTypeConfig]
+            : []),
           ...(showTags && enabledFilters.tags ? [tagsFilter] : []),
         ]
       : []),
@@ -635,6 +668,7 @@ EntityTableToolbar.propTypes = {
     lastSeen: PropTypes.bool,
     updateMethodFilter: PropTypes.bool,
     hostGroupFilter: PropTypes.bool,
+    systemTypeFilter: PropTypes.bool,
     all: PropTypes.bool,
   }),
   paginationProps: PropTypes.object,
@@ -649,6 +683,7 @@ EntityTableToolbar.propTypes = {
   disableDefaultColumns: PropTypes.any,
   showCentosVersions: PropTypes.bool,
   showNoGroupOption: PropTypes.bool,
+  showSystemTypeFilter: PropTypes.bool,
 };
 
 EntityTableToolbar.defaultProps = {

diff --git a/src/components/InventoryTable/TitleColumn.js b/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>
           )}

diff --git a/src/components/InventoryTable/__snapshots__/TitleColumn.test.js.snap b/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"

diff --git a/src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js b/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 }}
@@ -362,6 +375,10 @@ ConventionalSystemsTab.propTypes = {
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.string,
   ]),
+  systemTypeFilter: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]),
 };
 
 ConventionalSystemsTab.defaultProps = {

diff --git a/src/components/filters/index.js b/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) => ({

diff --git a/src/components/filters/useSystemTypeFilter.js b/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];
+};