fix(OperatingSystemFilter): RHINENG-10345 - Fix OS inventory filter conversion (#1152)

Author: bastilian

src/SmartComponents/AdvisorySystems/AdvisorySystems.js

@@ -8,6 +8,9 @@ import { changeAffectedSystemsParams, clearAdvisorySystemsReducer,
 import {
     decodeQueryparams
 } from '../../Utilities/Helpers';
+import {
+    osParamParser
+} from '../../Utilities/SystemsHelpers';
 import RemediationWizard from '../Remediation/RemediationWizard';
 import { useSearchParams } from 'react-router-dom';
 import { useActivateRemediationModal } from '../Systems/SystemsListAssets';
@@ -20,7 +23,7 @@ const AdvisorySystems = ({ advisoryName }) => {
     const [isRemediationOpen, setRemediationOpen] = useState(false);
     const [remediationIssues, setRemediationIssues] = useState([]);
 
-    const decodedParams = decodeQueryparams('?' + searchParams.toString());
+    const decodedParams = decodeQueryparams('?' + searchParams.toString(), { os: osParamParser });
     const status = useSelector(
         ({ entities }) => entities?.status || {}
     );

src/SmartComponents/PackageSystems/PackageSystems.js

@@ -23,6 +23,9 @@ import {
     arrayFromObj, buildFilterChips, decodeQueryparams, filterRemediatablePackageSystems,
     persistantParams, remediationProviderWithPairs, removeUndefinedObjectKeys
 } from '../../Utilities/Helpers';
+import {
+    osParamParser
+} from '../../Utilities/SystemsHelpers';
 import { useBulkSelectConfig, useGetEntities, useOnExport, useRemoveFilter,
     useOnSelect, ID_API_ENDPOINTS } from '../../Utilities/hooks';
 import { intl } from '../../Utilities/IntlProvider';
@@ -36,7 +39,7 @@ const PackageSystems = ({ packageName }) => {
     const [packageVersions, setPackageVersions] = React.useState([]);
 
     const [searchParams, setSearchParams] = useSearchParams();
-    const decodedParams = decodeQueryparams('?' + searchParams.toString());
+    const decodedParams = decodeQueryparams('?' + searchParams.toString(), { os: osParamParser });
     const systems = useSelector(({ entities }) => entities?.rows || [], shallowEqual);
     const status = useSelector(
         ({ entities }) => entities?.status || {}

src/SmartComponents/Systems/SystemsTable.js

@@ -60,7 +60,23 @@ const SystemsTable = ({
     ]);
 
     const { systemProfile, selectedTags,
-        filter, search, page, perPage, sort } = queryParams;
+        filter: queryParamsFilter, search, page, perPage, sort
+    } = queryParams;
+    const { os: operatingSystemFilter, ...filter } = queryParamsFilter || {};
+    const osFilter = operatingSystemFilter && [{
+        osFilter: operatingSystemFilter.reduce((osFilter, os) => {
+            const [osName, osVersion] = os.split(' ');
+            const [major] = osVersion.split('.');
+
+            return {
+                ...osFilter,
+                [`${osName}-${major}`]: {
+                    ...osFilter[`${osName}-${major}`] || {},
+                    [`${osName}-${major}-${osVersion}`]: true
+                }
+            };
+        }, {})
+    }];
 
     const applyMetadata = (metadata) => {
         dispatch(changeSystemsMetadata(metadata));
@@ -143,6 +159,9 @@ const SystemsTable = ({
             columns={(defaultColumns) => systemsColumnsMerger(defaultColumns, systemsListColumns)}
             showTags
             customFilters={{
+                ...operatingSystemFilter ? {
+                    filters: [...(osFilter || [])]
+                } : {},
                 patchParams: {
                     search,
                     filter,

src/Utilities/Helpers.js

@@ -293,16 +293,18 @@ export const encodeURLParams = parameters => {
     return encodeParams(removeUndefinedObjectItems(urlParams), false);
 };
 
-export const decomposeFilterValue = filterValue => {
-    if (typeof(filterValue) === 'string' && filterValue.startsWith('in:')) {
+export const decomposeFilterValue = (filterValue, parser) => {
+    if (parser) {
+        return parser(filterValue);
+    } else if (typeof(filterValue) === 'string' && filterValue.startsWith('in:')) {
         const values = filterValue.slice(3);
         return values.split(',');
+    } else {
+        return filterValue;
     }
-
-    return filterValue;
 };
 
-export const decodeQueryparams = queryString => {
+export const decodeQueryparams = (queryString, parsers = {}) => {
     const parsed = qs.parse(queryString);
     const res = {};
     Object.keys(parsed).forEach(key => {
@@ -313,9 +315,10 @@ export const decodeQueryparams = queryString => {
             if (bracketIndex > 0) {
                 const objParent = key.slice(0, bracketIndex);
                 const objKey = key.slice(bracketIndex + 1, -1);
+                const parser = parsers[objKey];
                 res[objParent] = {
                     ...res[objParent],
-                    [objKey]: decomposeFilterValue(typeHandledParam)
+                    [objKey]: decomposeFilterValue(typeHandledParam, parser)
                 };
             } else {
                 res[key] = typeHandledParam;
@@ -325,11 +328,13 @@ export const decodeQueryparams = queryString => {
     return res;
 };
 
-export const buildFilterChips = (filters, search, searchChipLabel = 'Search') => {
+export const buildFilterChips = (filters, search, searchChipLabel = 'Search', parsers = {}) => {
 
     let filterConfig = [];
     const buildChips = (filters, category) => {
-        if (multiValueFilters.includes(category)) {
+        if (parsers[category]) {
+            return parsers[category](filters[category]);
+        } else if (multiValueFilters.includes(category)) {
             const filterValues = filters[category] && (typeof(filters[category]) === 'string' && filters[category].split(',')
                 || filters[category]) || [];
             return filterValues.map(value => ({
@@ -396,15 +401,29 @@ export const buildFilterChips = (filters, search, searchChipLabel = 'Search') =>
     return filterConfig;
 };
 
+export const buildOsFilter = (osFilter = {}) => {
+    const osVersions = Object.entries(osFilter).reduce((acc, [, osGroupValues]) => {
+        return [
+            ...acc,
+            ...Object.entries(osGroupValues).filter(([, value]) => (value === true)).map(([key]) => {
+                const keyParts = key.split('-');
+                return keyParts.slice(0, keyParts.length - 2) + ' ' + keyParts[keyParts.length - 1];
+            })
+        ];
+    }, []);
+
+    return osVersions.length > 0 ? {
+        os: osVersions.join(',')
+    } : {};
+};
+
 export const buildApiFilters = (patchFilters, inventoryFilters) => (
     {
         ...patchFilters,
         ...(Array.isArray(inventoryFilters.hostGroupFilter) && inventoryFilters.hostGroupFilter.length > 0
             ? { group_name: inventoryFilters.hostGroupFilter }
             : {}),
-        ...inventoryFilters?.osFilter?.length > 0 ? {
-            os: inventoryFilters.osFilter.map(({ value }) => 'RHEL ' + value).join(',')
-        } : {}
+        ...buildOsFilter(inventoryFilters?.osFilter)
     });
 
 export const changeListParams = (oldParams, newParams) => {

src/Utilities/Helpers.test.js

@@ -408,7 +408,12 @@ describe('buildApiFilters', () => {
     });
 
     it('adds a os filter when the inventory is filtered by OS', () => {
-        const osFilter = [{ value: '8.8' }, { value: '8.9' }];
+        const osFilter = {
+            'RHEL-8': {
+                'RHEL-8-8.8': true,
+                'RHEL-8-8.9': true
+            }
+        };
         const inventoryFilters = {
             osFilter
         };

src/Utilities/SystemsHelpers.js

@@ -104,3 +104,18 @@ export const createSystemsSortBy = (orderBy, orderDirection, hasLastUpload) => {
 
     return sort;
 };
+
+export const osParamParser = (paramValue) => {
+    return paramValue.replace('in:', '').split(',').reduce((osFilter, os) => {
+        const [osName, osVersion] = os.split(' ');
+        const [major] = osVersion.split('.');
+
+        return {
+            ...osFilter,
+            [`${osName}-${major}`]: {
+                ...osFilter[`${osName}-${major}`] || {},
+                [`${osName}-${major}-${osVersion}`]: true
+            }
+        };
+    }, {});
+};