stackrox · sachaudh · Jun 10, 2024 · Jun 6, 2024 · Jun 7, 2024
@@ -11,6 +11,7 @@ import {
     imageSearchFilterConfig,
     nodeComponentSearchFilterConfig,
 } from '../types';
+import { getFilteredConfig } from '../utils/searchFilterConfig';
 
 const selectors = {
     entitySelectToggle: 'button[aria-label="compound search filter entity selector toggle"]',
@@ -77,7 +78,7 @@ describe(Cypress.spec.relative, () => {
         cy.get(selectors.entitySelectToggle).should('not.exist');
     });
 
-    it('should display the Image entity in the entity selector', () => {
+    it('should disable the entity selector when only one entity is present', () => {
         const config = {
             Image: imageSearchFilterConfig,
         };
@@ -88,10 +89,7 @@ describe(Cypress.spec.relative, () => {
 
         cy.get(selectors.entitySelectToggle).should('contain.text', 'Image');
 
-        cy.get(selectors.entitySelectToggle).click();
-
-        cy.get(selectors.entitySelectItems).should('have.length', 1);
-        cy.get(selectors.entitySelectItems).eq(0).should('have.text', 'Image');
+        cy.get(selectors.entitySelectToggle).should('be.disabled');
     });
 
     it('should display Image and Deployment entities in the entity selector', () => {
@@ -134,6 +132,21 @@ describe(Cypress.spec.relative, () => {
         cy.get(selectors.entitySelectItems).eq(2).should('have.text', 'Cluster');
     });
 
+    it('should disable the attribute selector when only one attribute is present', () => {
+        const config = {
+            Image: getFilteredConfig(imageSearchFilterConfig, ['Name']),
+        };
+        const onSearch = cy.stub().as('onSearch');
+        const searchFilter = {};
+
+        setup(config, searchFilter, onSearch);
+
+        cy.get(selectors.entitySelectToggle).should('contain.text', 'Image');
+        cy.get(selectors.attributeSelectToggle).should('contain.text', 'Name');
+
+        cy.get(selectors.attributeSelectToggle).should('be.disabled');
+    });
+
     it('should display Image attributes in the attribute selector', () => {
         const config = {
             Image: imageSearchFilterConfig,

@@ -33,6 +33,7 @@ function EntitySelector({ selectedEntity, onChange, config }: EntitySelectorProp
             onChange={onChange}
             ariaLabelMenu="compound search filter entity selector menu"
             ariaLabelToggle="compound search filter entity selector toggle"
+            isDisabled={entities.length === 1}
         >
             {entities.map((entity) => {
                 const displayName = config[entity]?.displayName;

@@ -12,6 +12,9 @@ import { getComplianceProfileCheckStats } from 'services/ComplianceResultsStatsS
 import { getComplianceProfileCheckResult } from 'services/ComplianceResultsService';
 import { getTableUIState } from 'utils/getTableUIState';
 
+import useURLSearch from 'hooks/useURLSearch';
+import { getFilteredConfig } from 'Components/CompoundSearchFilter/utils/searchFilterConfig';
+import { OnSearchPayload, clusterSearchFilterConfig } from 'Components/CompoundSearchFilter/types';
 import CheckDetailsTable from './CheckDetailsTable';
 import DetailsPageHeader, { PageHeaderLabel } from './components/DetailsPageHeader';
 import { coverageProfileChecksPath } from './compliance.coverage.routes';
@@ -40,8 +43,9 @@ function CheckDetails() {
     const { sortOption, getSortParams } = useURLSort({
         sortFields: [CLUSTER_QUERY],
         defaultSortOption: { field: CLUSTER_QUERY, direction: 'asc' },
-        onSort: () => setPage(1),
+        onSort: () => setPage(1, 'replace'),
     });
+    const { searchFilter, setSearchFilter } = useURLSearch();
 
     const fetchCheckStats = useCallback(
         () => getComplianceProfileCheckStats(profileName, checkName),
@@ -55,28 +59,31 @@ function CheckDetails() {
 
     const fetchCheckResults = useCallback(
         () =>
-            getComplianceProfileCheckResult(profileName, checkName, { page, perPage, sortOption }),
-        [page, perPage, checkName, profileName, sortOption]
+            getComplianceProfileCheckResult(profileName, checkName, {
+                page,
+                perPage,
+                sortOption,
+                searchFilter,
+            }),
+        [page, perPage, checkName, profileName, sortOption, searchFilter]
     );
     const {
         data: checkResultsResponse,
         loading: isLoadingCheckResults,
         error: checkResultsError,
     } = useRestQuery(fetchCheckResults);
 
+    const searchFilterConfig = {
+        Cluster: getFilteredConfig(clusterSearchFilterConfig, ['Name']),
+    };
+
     const tableState = getTableUIState({
         isLoading: isLoadingCheckResults,
         data: checkResultsResponse?.checkResults,
         error: checkResultsError,
         searchFilter: {},
     });
 
-    useEffect(() => {
-        if (checkResultsResponse) {
-            setCurrentDatetime(new Date());
-        }
-    }, [checkResultsResponse]);
-
     const checkStatsLabels =
         checkStatsResponse?.checkStats
             .sort(sortCheckStats)
@@ -94,6 +101,41 @@ function CheckDetails() {
             }, [] as PageHeaderLabel[])
             .filter((component) => component !== null) || [];
 
+    useEffect(() => {
+        if (checkResultsResponse) {
+            setCurrentDatetime(new Date());
+        }
+    }, [checkResultsResponse]);
+
+    // @TODO: Consider making a function to make this more reusable
+    const onSearch = (payload: OnSearchPayload) => {
+        const { action, category, value } = payload;
+        const currentSelection = searchFilter[category] || [];
+        let newSelection = !Array.isArray(currentSelection) ? [currentSelection] : currentSelection;
+        if (action === 'ADD') {
+            newSelection.push(value);
+        } else if (action === 'REMOVE') {
+            newSelection = newSelection.filter((datum) => datum !== value);
+        } else {
+            // Do nothing
+        }
+        setSearchFilter({
+            ...searchFilter,
+            [category]: newSelection,
+        });
+    };
+
+    const onCheckStatusSelect = (
+        filterType: 'Compliance Check Status',
+        checked: boolean,
+        selection: string
+    ) => {
+        const action = checked ? 'ADD' : 'REMOVE';
+        const category = filterType;
+        const value = selection;
+        onSearch({ action, category, value });
+    };
+
     return (
         <>
             <PageTitle title="Compliance coverage - Check" />
@@ -132,6 +174,10 @@ function CheckDetails() {
                     profileName={profileName}
                     tableState={tableState}
                     getSortParams={getSortParams}
+                    searchFilterConfig={searchFilterConfig}
+                    searchFilter={searchFilter}
+                    onSearch={onSearch}
+                    onCheckStatusSelect={onCheckStatusSelect}
                 />
             </PageSection>
         </>

@@ -6,6 +6,7 @@ import {
     Pagination,
     Toolbar,
     ToolbarContent,
+    ToolbarGroup,
     ToolbarItem,
     Tooltip,
 } from '@patternfly/react-core';
@@ -19,8 +20,17 @@ import { ClusterCheckStatus } from 'services/ComplianceResultsService';
 import { getDistanceStrictAsPhrase } from 'utils/dateUtils';
 import { TableUIState } from 'utils/getTableUIState';
 
+import CompoundSearchFilter from 'Components/CompoundSearchFilter/components/CompoundSearchFilter';
+import SearchFilterChips from 'Components/PatternFly/SearchFilterChips';
+import {
+    OnSearchPayload,
+    PartialCompoundSearchFilterConfig,
+} from 'Components/CompoundSearchFilter/types';
+import { SearchFilter } from 'types/search';
 import { coverageClusterDetailsPath } from './compliance.coverage.routes';
 import { getClusterResultsStatusObject } from './compliance.coverage.utils';
+import { CHECK_STATUS_QUERY, CLUSTER_QUERY } from './compliance.coverage.constants';
+import CheckStatusDropdown from './components/CheckStatusDropdown';
 
 export type CheckDetailsTableProps = {
     checkResultsCount: number;
@@ -29,6 +39,14 @@ export type CheckDetailsTableProps = {
     profileName: string;
     tableState: TableUIState<ClusterCheckStatus>;
     getSortParams: UseURLSortResult['getSortParams'];
+    searchFilterConfig: PartialCompoundSearchFilterConfig;
+    searchFilter: SearchFilter;
+    onSearch: (payload: OnSearchPayload) => void;
+    onCheckStatusSelect: (
+        filterType: 'Compliance Check Status',
+        checked: boolean,
+        selection: string
+    ) => void;
 };
 
 function CheckDetailsTable({
@@ -38,22 +56,55 @@ function CheckDetailsTable({
     profileName,
     tableState,
     getSortParams,
+    searchFilterConfig,
+    searchFilter,
+    onSearch,
+    onCheckStatusSelect,
 }: CheckDetailsTableProps) {
     const { page, perPage, setPage, setPerPage } = pagination;
 
     return (
         <>
             <Toolbar>
                 <ToolbarContent>
-                    <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
-                        <Pagination
-                            itemCount={checkResultsCount}
-                            page={page}
-                            perPage={perPage}
-                            onSetPage={(_, newPage) => setPage(newPage)}
-                            onPerPageSelect={(_, newPerPage) => setPerPage(newPerPage)}
+                    <ToolbarGroup className="pf-v5-u-w-100">
+                        <ToolbarItem className="pf-v5-u-flex-1">
+                            <CompoundSearchFilter
+                                config={searchFilterConfig}
+                                searchFilter={searchFilter}
+                                onSearch={onSearch}
+                            />
+                        </ToolbarItem>
+                        <ToolbarItem>
+                            <CheckStatusDropdown
+                                searchFilter={searchFilter}
+                                onSelect={onCheckStatusSelect}
+                            />
+                        </ToolbarItem>
+                        <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+                            <Pagination
+                                itemCount={checkResultsCount}
+                                page={page}
+                                perPage={perPage}
+                                onSetPage={(_, newPage) => setPage(newPage)}
+                                onPerPageSelect={(_, newPerPage) => setPerPage(newPerPage)}
+                            />
+                        </ToolbarItem>
+                    </ToolbarGroup>
+                    <ToolbarGroup className="pf-v5-u-w-100">
+                        <SearchFilterChips
+                            filterChipGroupDescriptors={[
+                                {
+                                    displayName: 'Cluster',
+                                    searchFilterName: CLUSTER_QUERY,
+                                },
+                                {
+                                    displayName: 'Compliance Status',
+                                    searchFilterName: CHECK_STATUS_QUERY,
+                                },
+                            ]}
                         />
-                    </ToolbarItem>
+                    </ToolbarGroup>
                 </ToolbarContent>
             </Toolbar>
             <Table>

@@ -1,7 +1,7 @@
 import qs from 'qs';
 
 import { SearchQueryOptions } from 'types/search';
-import { getPaginationParams } from 'utils/searchUtils';
+import { getPaginationParams, getRequestQueryStringForSearchFilter } from 'utils/searchUtils';
 
 export const complianceV2Url = '/v2/compliance';
 
@@ -64,10 +64,14 @@ export function buildNestedRawQueryParams({
     page,
     perPage,
     sortOption,
+    searchFilter = {},
 }: SearchQueryOptions): string {
+    const query = getRequestQueryStringForSearchFilter(searchFilter);
+    const pagination = getPaginationParams({ page, perPage, sortOption });
     const queryParameters = {
         query: {
-            pagination: getPaginationParams({ page, perPage, sortOption }),
+            query,
+            pagination,
         },
     };
     return qs.stringify(queryParameters, { arrayFormat: 'repeat', allowDots: true });

@@ -55,9 +55,9 @@ export type ListComplianceCheckResultResponse = {
 export function getComplianceProfileCheckResult(
     profileName: string,
     checkName: string,
-    { sortOption, page, perPage }: SearchQueryOptions
+    { sortOption, page, perPage, searchFilter }: SearchQueryOptions
 ): Promise<ListComplianceCheckClusterResponse> {
-    const params = buildNestedRawQueryParams({ page, perPage, sortOption });
+    const params = buildNestedRawQueryParams({ page, perPage, sortOption, searchFilter });
     return axios
         .get<ListComplianceCheckClusterResponse>(
             `${complianceResultsBaseUrl}/results/profiles/${profileName}/checks/${checkName}?${params}`