From d55f76d0ad5f621eb263af95214d0f5f4b21ac13 Mon Sep 17 00:00:00 2001 From: Sean Rathier Date: Tue, 5 Nov 2024 18:16:18 -0500 Subject: [PATCH] Removed RulesQuery --- .../public/pages/rules/rules_context.tsx | 163 +++++++++--------- .../public/pages/rules/rules_table.tsx | 35 ++-- .../public/pages/rules/rules_table_header.tsx | 49 +++--- 3 files changed, 125 insertions(+), 122 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_context.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_context.tsx index 3f15f3cd3dc90..14ef4dcf534da 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_context.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_context.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { createContext, useContext, useMemo, useEffect, useCallback, useState } from 'react'; +import React, { createContext, useContext, useMemo, useCallback, useState } from 'react'; import { useParams } from 'react-router-dom'; import { @@ -21,7 +21,7 @@ import { uiMetricService, } from '@kbn/cloud-security-posture-common/utils/ui_metrics'; import { buildRuleKey } from '../../../common/utils/rules_states'; -import { RulesQuery, useFindCspBenchmarkRule } from './use_csp_benchmark_rules'; +import { useFindCspBenchmarkRule } from './use_csp_benchmark_rules'; import { RuleStateAttributesWithoutStates, useChangeCspRuleState, @@ -44,17 +44,27 @@ interface RulesPageData { loading: boolean; } -export type RulesState = RulesPageData & RulesQuery; - interface RulesProviderProps { children: React.ReactNode; } interface RulesContextValue { - rulesQuery: RulesQuery; - rulesPageData: RulesPageData; - setRulesQuery: (query: Partial) => void; + section: string[] | undefined; + setSection: (section: string[] | undefined) => void; page: number; setPage: (page: number) => void; + pageSize: number; + setPageSize: (pageSize: number) => void; + sortField: string; + setSortField: (sortField: string) => void; + sortOrder: 'asc' | 'desc'; + setSortOrder: (sortOrder: 'asc' | 'desc') => void; + ruleNumber: string[] | undefined; + setRuleNumber: (ruleNumber: string[] | undefined) => void; + search: string; + setSearch: (search: string) => void; + rulesPageData: RulesPageData; + // setRulesQuery: (query: Partial) => void; + sectionList: string[] | undefined; ruleNumberSelectOptions: string[]; sectionSelectOptions: string[]; @@ -83,17 +93,13 @@ export function useRules() { export function RulesProvider({ children }: RulesProviderProps) { const params = useParams(); const { pageSize, setPageSize } = usePageSize(LOCAL_STORAGE_PAGE_SIZE_RULES_KEY); - const { mutate: mutateRuleState } = useChangeCspRuleState(); const [page, setPage] = useState(1); - const [rulesQuery, setRulesQuery] = useState({ - section: undefined, - ruleNumber: undefined, - search: '', - page: 1, - perPage: pageSize || 10, - sortField: 'metadata.benchmark.rule_number', - sortOrder: 'asc', - }); + const [search, setSearch] = useState(''); + const [sortField, setSortField] = useState('metadata.benchmark.rule_number'); + const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc'); + const [section, setSection] = useState(undefined); + const [ruleNumber, setRuleNumber] = useState(undefined); + const { mutate: mutateRuleState } = useChangeCspRuleState(); const [selectedRules, setSelectedRules] = useState([]); const [enabledDisabledItemsFilter, setEnabledDisabledItemsFilter] = useState('no-filter'); @@ -108,24 +114,6 @@ export function RulesProvider({ children }: RulesProviderProps) { params.benchmarkVersion ); - const setRulesQueryCallback = useCallback( - (query: Partial) => { - setRulesQuery({ ...rulesQuery, ...query }); - if (query.perPage) { - // set the local storage page size - setPageSize(query.perPage); - } - }, - [rulesQuery, setRulesQuery, setPageSize] - ); - - const setPageCallback = useCallback( - (value: number) => { - setPage(value); - }, - [setPage] - ); - const sectionList = useMemo( () => allRules?.data?.items.map((rule) => rule.metadata.section), [allRules] @@ -145,13 +133,13 @@ export function RulesProvider({ children }: RulesProviderProps) { const { data, status, error } = useFindCspBenchmarkRule( { - section: rulesQuery.section, - ruleNumber: rulesQuery.ruleNumber, - search: rulesQuery.search, - page: 1, + section, + ruleNumber, + search, + page, perPage: MAX_ITEMS_PER_PAGE, sortField: 'metadata.benchmark.rule_number', - sortOrder: rulesQuery.sortOrder, + sortOrder, }, params.benchmarkId, params.benchmarkVersion @@ -212,8 +200,8 @@ export function RulesProvider({ children }: RulesProviderProps) { ); const rulesPageData = useMemo( - () => getRulesPageData(filteredRulesWithStates, status, error, rulesQuery), - [filteredRulesWithStates, status, error, rulesQuery] + () => getRulesPageData(filteredRulesWithStates, status, error, page, pageSize), + [filteredRulesWithStates, status, error, page, pageSize] ); const setSelectAllRules = useCallback(() => { @@ -238,36 +226,42 @@ export function RulesProvider({ children }: RulesProviderProps) { }, [rulesStates, params.ruleId, allRules]); // This useEffect is in charge of auto paginating to the correct page of a rule from the url params - useEffect(() => { - const getPageByRuleId = () => { - if (params.ruleId && allRules?.data?.items) { - const ruleIndex = allRules?.data?.items.findIndex( - (rule) => rule.metadata.id === params.ruleId - ); - - if (ruleIndex !== -1) { - // Calculate the page based on the rule index and page size - const rulePage = Math.floor(ruleIndex / pageSize); - return rulePage; - } - } - return 0; - }; - - setRulesQuery({ - ...rulesQuery, - page: getPageByRuleId(), - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [allRules?.data?.items]); + // useEffect(() => { + // const getPageByRuleId = () => { + // if (params.ruleId && allRules?.data?.items) { + // const ruleIndex = allRules?.data?.items.findIndex( + // (rule) => rule.metadata.id === params.ruleId + // ); + + // if (ruleIndex !== -1) { + // // Calculate the page based on the rule index and page size + // const rulePage = Math.floor(ruleIndex / pageSize); + // return rulePage; + // } + // } + // return 1; + // }; + + // setPage(getPageByRuleId()); + // }, [allRules?.data?.items, params.ruleId, pageSize]); const contextValue = useMemo( () => ({ - rulesQuery, - rulesPageData, - setRulesQuery: setRulesQueryCallback, + section, + setSection, page, - setPage: setPageCallback, + pageSize, + setPageSize, + sortField, + setSortField, + sortOrder, + setSortOrder, + ruleNumber, + setRuleNumber, + search, + setSearch, + rulesPageData, + setPage, sectionList, ruleNumberSelectOptions, sectionSelectOptions, @@ -282,12 +276,22 @@ export function RulesProvider({ children }: RulesProviderProps) { rulesFlyoutData, }), [ - rulesQuery, rulesPageData, - setRulesQueryCallback, + sortField, + setSortField, + sortOrder, + setSortOrder, + pageSize, + setPageSize, page, - setPageCallback, + setPage, + section, + setSection, + search, + setSearch, sectionList, + ruleNumber, + setRuleNumber, ruleNumberSelectOptions, sectionSelectOptions, selectedRules, @@ -309,30 +313,33 @@ const getFilteredRulesWithStates = ( rulesWithStates: CspBenchmarkRulesWithStates[], enabledDisabledItemsFilter: string ) => { + let rulesWithStatesFiltered = rulesWithStates; if (enabledDisabledItemsFilter === 'disabled') - return rulesWithStates?.filter((rule) => rule?.state === 'muted'); + rulesWithStatesFiltered = rulesWithStates?.filter((rule) => rule?.state === 'muted'); else if (enabledDisabledItemsFilter === 'enabled') - return rulesWithStates?.filter((rule) => rule?.state === 'unmuted'); - else return rulesWithStates; + rulesWithStatesFiltered = rulesWithStates?.filter((rule) => rule?.state === 'unmuted'); + + return rulesWithStatesFiltered; }; -const getPage = (data: CspBenchmarkRulesWithStates[], { page, perPage }: RulesQuery) => +const getPage = (data: CspBenchmarkRulesWithStates[], page: number, perPage: number) => data.slice(page * perPage, (page + 1) * perPage); const getRulesPageData = ( data: CspBenchmarkRulesWithStates[], status: string, error: unknown, - query: RulesQuery + page: number, + perPage: number ): RulesPageData => { - const page = getPage(data, query); + const pageIndex = getPage(data, page, perPage); return { loading: status === 'loading', error: error ? extractErrorMessage(error) : undefined, all_rules: data, rules_map: new Map(data.map((rule) => [rule.metadata.id, rule])), - rules_page: page, + rules_page: pageIndex, total: data?.length || 0, }; }; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx index 66a392a17d083..a5d14b1ec787b 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table.tsx @@ -46,16 +46,24 @@ type GetColumnProps = Pick & { export const RulesTable = ({ selectedRuleId, onRuleClick }: RulesTableProps) => { const { euiTheme } = useEuiTheme(); - const { setRulesQuery, page, setSelectedRules, selectedRules, rulesQuery, rulesPageData } = - useRules(); - const items = rulesPageData.rules_page; + const { + page, + setSelectedRules, + selectedRules, + rulesPageData, + pageSize, + setPageSize, + sortOrder, + setSortOrder, + } = useRules(); + const items = rulesPageData.all_rules; const total = rulesPageData.total; const error = rulesPageData.error; const loading = rulesPageData.loading; const euiPagination: EuiBasicTableProps['pagination'] = { pageIndex: page, - pageSize: rulesQuery.perPage, + pageSize, totalItemCount: total, pageSizeOptions: [10, 25, 100], }; @@ -63,22 +71,17 @@ export const RulesTable = ({ selectedRuleId, onRuleClick }: RulesTableProps) => const sorting: EuiTableSortingType = { sort: { field: 'metadata.benchmark.rule_number' as keyof CspBenchmarkRulesWithStates, - direction: rulesQuery.sortOrder, + direction: sortOrder, }, }; - const onTableChange = ({ - page: pagination, - sort: sortOrder, - }: Criteria) => { + const onTableChange = ({ page: pagination, sort }: Criteria) => { if (!pagination) return; - if ( - pagination && - (pagination.index !== rulesQuery.page || pagination.size !== rulesQuery.perPage) - ) { - setRulesQuery({ page: pagination.index, perPage: pagination.size }); + if (pagination && (pagination.index !== page || pagination.size !== pageSize)) { + setPageSize(pagination.size); + setPageSize(pagination.index); } - if (sortOrder && sortOrder.direction !== rulesQuery.sortOrder) { - setRulesQuery({ sortOrder: sortOrder.direction }); + if (sort && sort.direction !== sortOrder) { + setSortOrder(sort.direction); } }; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx index 33a2c7756bf0f..35474851a0b9a 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/rules/rules_table_header.tsx @@ -39,14 +39,15 @@ interface RulesTableToolbarProps { } export const RulesTableHeader = ({ isSearching }: RulesTableToolbarProps) => { const { - setRulesQuery, + section, + setSection, + ruleNumber, + setRuleNumber, sectionSelectOptions, ruleNumberSelectOptions, setEnabledDisabledItemsFilter, enabledDisabledItemsFilter, } = useRules(); - const [selectedSection, setSelectedSection] = useState([]); - const [selectedRuleNumber, setSelectedRuleNumber] = useState([]); const sectionOptions = sectionSelectOptions.map((option) => ({ key: option, label: option, @@ -87,14 +88,15 @@ export const RulesTableHeader = ({ isSearching }: RulesTableToolbarProps) => { } )} id={'cis-section-multi-select-filter'} - onChange={(section) => { - setSelectedSection([...section?.selectedOptionKeys]); - setRulesQuery({ - section: section?.selectedOptionKeys ? section?.selectedOptionKeys : undefined, - }); + onChange={(changedSections) => { + setSection( + changedSections?.selectedOptionKeys + ? changedSections?.selectedOptionKeys + : undefined + ); }} options={sectionOptions} - selectedOptionKeys={selectedSection} + selectedOptionKeys={section} /> { } )} id={'rule-number-multi-select-filter'} - onChange={(ruleNumber) => { - setSelectedRuleNumber([...ruleNumber?.selectedOptionKeys]); - setRulesQuery({ - ruleNumber: ruleNumber?.selectedOptionKeys - ? ruleNumber?.selectedOptionKeys - : undefined, - }); + onChange={(changedRuleNumbers) => { + setRuleNumber( + changedRuleNumbers?.selectedOptionKeys + ? changedRuleNumbers?.selectedOptionKeys + : undefined + ); }} options={ruleNumberOptions} - selectedOptionKeys={selectedRuleNumber} + selectedOptionKeys={ruleNumber} /> { const SEARCH_DEBOUNCE_MS = 300; const SearchField = ({ isSearching }: Pick) => { - const { rulesQuery } = useRules(); - const [localValue, setLocalValue] = useState(rulesQuery.search); - const { setRulesQuery } = useRules(); + const { search, setSearch } = useRules(); + const [localValue, setLocalValue] = useState(search); - useDebounce( - () => - setRulesQuery({ - search: localValue, - }), - SEARCH_DEBOUNCE_MS, - [localValue] - ); + useDebounce(() => setSearch(localValue), SEARCH_DEBOUNCE_MS, [localValue]); return (