diff --git a/keep-ui/features/filter/facets-panel.tsx b/keep-ui/features/filter/facets-panel.tsx index e7448d40b..8f8aea91e 100644 --- a/keep-ui/features/filter/facets-panel.tsx +++ b/keep-ui/features/filter/facets-panel.tsx @@ -132,13 +132,24 @@ export const FacetsPanel: React.FC = ({ return facetsState[facetId] || new Set(); } + useEffect(() => { + const newFacetsState: FacetState = {}; + + facets.forEach((facet) => { + newFacetsState[facet.id] = getFacetState(facet.id); + }); + + setFacetsState(newFacetsState); + // we need to run this effect only once on mount + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const isOptionSelected = (facet_id: string, option_id: string) => { return !facetsState[facet_id] || !facetsState[facet_id].has(option_id); }; - function calculateFacetsState(newFacetsState: FacetState): void { - setFacetsState(newFacetsState); - var cel = buildCel(facets, facetOptions, newFacetsState); + useEffect(() => { + var cel = buildCel(facets, facetOptions, facetsState); if (cel !== celState) { setCelState(cel); @@ -152,12 +163,13 @@ export const FacetsPanel: React.FC = ({ facetOptionQueries[facet.id] = buildCel( otherFacets, facetOptions, - newFacetsState + facetsState ); }); onReloadFacetOptions && onReloadFacetOptions(facetOptionQueries); - } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [facetsState]); function toggleFacetOption(facetId: string, value: string) { setClickedFacetId(facetId); @@ -169,7 +181,7 @@ export const FacetsPanel: React.FC = ({ facetState.delete(value); } - calculateFacetsState({ ...facetsState, [facetId]: facetState }); + setFacetsState({ ...facetsState, [facetId]: facetState }); } function selectOneFacetOption(facetId: string, optionValue: string): void { @@ -185,7 +197,7 @@ export const FacetsPanel: React.FC = ({ facetState.add(facetOption.display_name); }); - calculateFacetsState({ + setFacetsState({ ...facetsState, [facetId]: facetState, }); @@ -199,14 +211,14 @@ export const FacetsPanel: React.FC = ({ facetState.delete(option.display_name) ); - calculateFacetsState({ + setFacetsState({ ...facetsState, [facetId]: facetState, }); } function clearFilters(): void { - calculateFacetsState({}); + setFacetsState({}); } useEffect( diff --git a/keep-ui/utils/hooks/useIncidents.ts b/keep-ui/utils/hooks/useIncidents.ts index 777c5c537..1581809c9 100644 --- a/keep-ui/utils/hooks/useIncidents.ts +++ b/keep-ui/utils/hooks/useIncidents.ts @@ -38,6 +38,20 @@ export const useIncidents = ( const filtersParams = new URLSearchParams(); + filtersParams.set("confirmed", confirmed.toString()); + + if (limit !== undefined) { + filtersParams.set("limit", limit.toString()); + } + + if (offset !== undefined) { + filtersParams.set("offset", offset.toString()); + } + + if (sorting) { + filtersParams.set("sorting", sorting.desc ? `-${sorting.id}` : sorting.id); + } + if (cel) { filtersParams.set("cel", cel); } @@ -45,9 +59,7 @@ export const useIncidents = ( const swrValue = useSWR( () => api.isReady() - ? `/incidents?confirmed=${confirmed}&limit=${limit}&offset=${offset}&sorting=${ - sorting.desc ? "-" : "" - }${sorting.id}&${filtersParams.toString()}` + ? `/incidents${filtersParams.size ? `?${filtersParams.toString()}` : ""}` : null, (url) => api.get(url), options