feat(RHINENG-21983): Add 'Applies to OS' filter CVEs table

Author: red-hat-konflux

src/Components/SmartComponents/IoP/CveListTable.js

@@ -2,9 +2,9 @@ import React, { Fragment, useRef, useState } from 'react';
 import {
     DeclarativeTable,
     setupFilters,
-    decodeRangeFilter
-} from '../../../Frameworks/DeclarativeTable';
-
+    decodeRangeFilter,
+    hierarchyFilter
+} from 'declarative-table';
 import {
     BUSINESS_RISK_OPTIONS,
     DEFAULT_PAGE_SIZE,
@@ -45,6 +45,9 @@ import {
 import GroupedCVELabels from '../../PresentationalComponents/Snippets/GroupedCVELabels';
 import EditCveStatusModal from './EditCveStatusModal';
 import EditCveBusinessRiskModal from './EditCveBusinessRiskModal';
+import {
+    convertOperatingSystemsToFilterGroupItems
+} from '../../PresentationalComponents/Filters/PrimaryToolbarFilters/AppliesToOSFilter';
 
 const DEFAULT_PARAMS = {
     limit: DEFAULT_PAGE_SIZE,
@@ -80,6 +83,15 @@ const CveListTable = () => {
         enabled: areUrlParamsReady
     });
 
+    const { data: osVersionData } = useQuery({
+        queryKey: ['OsVersions'],
+        queryFn: () => axios.get(`${envContext.apiPaths.inventory}/system_profile/operating_system`),
+        initialData: { data: { results: [] } }
+    });
+
+    const osVersionFilterItems =
+        convertOperatingSystemsToFilterGroupItems(osVersionData.data.results.map(version => version.value));
+
     const [cvssMin, cvssMax] = decodeRangeFilter(params.cvss_score);
 
     const filters = [
@@ -92,7 +104,16 @@ const CveListTable = () => {
         affectedSystemsFilter(envContext, params.affecting_host_type, apply),
         publishDateFilter(params.publish_date, apply),
         statusFilter(params.status_id, apply),
-        advisoryAvailableFilter(params.advisory_available, apply)
+        advisoryAvailableFilter(params.advisory_available, apply),
+        hierarchyFilter({
+            urlParam: 'rhel_version',
+            label: 'Applies to OS',
+            value: params.rhel_version,
+            placeholder: 'Filter by Applies to OS',
+            groups: osVersionFilterItems,
+            chipLabel: 'Applies to OS',
+            apply
+        })
     ];
 
     const ENV_CONTEXT_FILTER_FILTER = (filter) => {
@@ -238,6 +259,7 @@ const CveListTable = () => {
                 refreshData={onDataUpdated}
             />
             <DeclarativeTable
+                ouiaId="cves-table"
                 ref={declarativeTableRef}
                 isLoading={isLoading}
                 areColumnsManageable={envContext?.pages?.cveDetail?.areColumnsManageable}

src/Helpers/constants.js

@@ -1153,7 +1153,7 @@ export const IOP_ENVIRONMENT_CONTEXT = {
         cveList: {
             title: 'Vulnerabilities',
             columns: ['synopsis', 'public_date', 'impact', 'cvss_score', 'systems_affected', 'rhel_versions'],
-            filters: ['filter', 'impact', 'publish_date', 'cvss_score', 'rule_presence', 'known_exploit', 'affecting_host_type'],
+            filters: ['filter', 'impact', 'publish_date', 'cvss_score', 'rule_presence', 'known_exploit', 'affecting_host_type', 'rhel_version'],
             areColumnsManageable: false,
             areParamsUrlBound: true
         },