diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx index c52489984dab4..c33cba73ee976 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx @@ -17,9 +17,9 @@ interface Props { export const AddFilterButton: React.FC = ({ newFilters, onNewFilter }) => { const [isPopoverOpen, setPopover] = useState(false); - const currentFilters = useFilterUpdate(); + const { selectedFilters } = useFilterUpdate(); - const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || []; + const getSelectedItems = (fieldName: string) => selectedFilters.get(fieldName) || []; const onButtonClick = () => { setPopover(!isPopoverOpen); diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx index 8298f202b9458..a6728643146df 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx @@ -31,7 +31,10 @@ export const FiltersExpressionsSelect: React.FC = ({ values: string[]; }>({ fieldName: '', values: [] }); - const currentFilters = useFilterUpdate(updatedFieldValues.fieldName, updatedFieldValues.values); + const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useFilterUpdate( + updatedFieldValues.fieldName, + updatedFieldValues.values + ); useEffect(() => { if (updatedFieldValues.fieldName === 'observer.geo.name') { @@ -45,13 +48,6 @@ export const FiltersExpressionsSelect: React.FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const selectedTags = currentFilters.get('tags'); - const selectedPorts = currentFilters.get('url.port'); - const selectedScheme = currentFilters.get('monitor.type'); - const selectedLocation = currentFilters.get('observer.geo.name'); - - const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || []; - const onFilterFieldChange = (fieldName: string, values: string[]) => { setUpdatedFieldValues({ fieldName, values }); }; @@ -64,10 +60,11 @@ export const FiltersExpressionsSelect: React.FC = ({ id: 'filter_port', disabled: ports?.length === 0, items: ports?.map((p: number) => p.toString()) ?? [], - selectedItems: getSelectedItems('url.port'), + selectedItems: selectedPorts, title: filterLabels.PORT, - description: selectedPorts ? alertFilterLabels.USING_PORT : alertFilterLabels.USING, - value: selectedPorts?.join(',') ?? alertFilterLabels.ANY_PORT, + description: + selectedPorts.length === 0 ? alertFilterLabels.USING : alertFilterLabels.USING_PORT, + value: selectedPorts.length === 0 ? alertFilterLabels.ANY_PORT : selectedPorts?.join(','), }, { onFilterFieldChange, @@ -76,10 +73,10 @@ export const FiltersExpressionsSelect: React.FC = ({ id: 'filter_tags', disabled: tags?.length === 0, items: tags ?? [], - selectedItems: getSelectedItems('tags'), + selectedItems: selectedTags, title: filterLabels.TAGS, - description: selectedTags ? alertFilterLabels.WITH_TAG : alertFilterLabels.WITH, - value: selectedTags?.join(',') ?? alertFilterLabels.ANY_TAG, + description: selectedTags.length === 0 ? alertFilterLabels.WITH : alertFilterLabels.WITH_TAG, + value: selectedTags.length === 0 ? alertFilterLabels.ANY_TAG : selectedTags?.join(','), }, { onFilterFieldChange, @@ -88,10 +85,10 @@ export const FiltersExpressionsSelect: React.FC = ({ id: 'filter_scheme', disabled: schemes?.length === 0, items: schemes ?? [], - selectedItems: getSelectedItems('monitor.type'), + selectedItems: selectedSchemes, title: filterLabels.SCHEME, - description: selectedScheme ? alertFilterLabels.OF_TYPE : alertFilterLabels.OF, - value: selectedScheme?.join(',') ?? alertFilterLabels.ANY_TYPE, + description: selectedSchemes.length === 0 ? alertFilterLabels.OF : alertFilterLabels.OF_TYPE, + value: selectedSchemes.length === 0 ? alertFilterLabels.ANY_TYPE : selectedSchemes?.join(','), }, { onFilterFieldChange, @@ -100,10 +97,14 @@ export const FiltersExpressionsSelect: React.FC = ({ id: 'filter_location', disabled: locations?.length === 0, items: locations ?? [], - selectedItems: getSelectedItems('observer.geo.name'), + selectedItems: selectedLocations, title: filterLabels.SCHEME, - description: selectedLocation ? alertFilterLabels.FROM_LOCATION : alertFilterLabels.FROM, - value: selectedLocation?.join(',') ?? alertFilterLabels.ANY_LOCATION, + description: + selectedLocations.length === 0 ? alertFilterLabels.FROM : alertFilterLabels.FROM_LOCATION, + value: + selectedLocations.length === 0 + ? alertFilterLabels.ANY_LOCATION + : selectedLocations?.join(','), }, ]; diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap index c7ffc36532b71..2677fd828c957 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap @@ -7,7 +7,7 @@ exports[`FilterPopover component does not show item list when loading 1`] = ` @@ -26,7 +26,7 @@ exports[`FilterPopover component does not show item list when loading 1`] = ` @@ -64,7 +64,7 @@ exports[`FilterPopover component renders without errors for valid props 1`] = ` - 3 + 1 diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx index b881dfcdd2e00..f5527a17b0cda 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx @@ -27,14 +27,15 @@ export const FilterGroupComponent: React.FC = ({ values: string[]; }>({ fieldName: '', values: [] }); - const currentFilters = useFilterUpdate(updatedFieldValues.fieldName, updatedFieldValues.values); + const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useFilterUpdate( + updatedFieldValues.fieldName, + updatedFieldValues.values + ); const onFilterFieldChange = (fieldName: string, values: string[]) => { setUpdatedFieldValues({ fieldName, values }); }; - const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || []; - const filterPopoverProps: FilterPopoverProps[] = [ { loading, @@ -42,7 +43,7 @@ export const FilterGroupComponent: React.FC = ({ fieldName: 'observer.geo.name', id: 'location', items: locations, - selectedItems: getSelectedItems('observer.geo.name'), + selectedItems: selectedLocations, title: filterLabels.LOCATION, }, { @@ -52,7 +53,7 @@ export const FilterGroupComponent: React.FC = ({ id: 'port', disabled: ports.length === 0, items: ports.map((p: number) => p.toString()), - selectedItems: getSelectedItems('url.port'), + selectedItems: selectedPorts, title: filterLabels.PORT, }, { @@ -62,7 +63,7 @@ export const FilterGroupComponent: React.FC = ({ id: 'scheme', disabled: schemes.length === 0, items: schemes, - selectedItems: getSelectedItems('monitor.type'), + selectedItems: selectedSchemes, title: filterLabels.SCHEME, }, { @@ -72,7 +73,7 @@ export const FilterGroupComponent: React.FC = ({ id: 'tags', disabled: tags.length === 0, items: tags, - selectedItems: getSelectedItems('tags'), + selectedItems: selectedTags, title: filterLabels.TAGS, }, ]; diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx index 18d40b83be369..c04460237f4f1 100644 --- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx +++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx @@ -33,7 +33,7 @@ export const FilterPopover = ({ id, disabled, loading, - items, + items: allItems, onFilterFieldChange, selectedItems, title, @@ -46,6 +46,16 @@ export const FilterPopover = ({ const [searchQuery, setSearchQuery] = useState(''); const [tempSelectedItems, setTempSelectedItems] = useState(selectedItems); + const [items, setItems] = useState([]); + + useEffect(() => { + // Merge incoming items with selected items, to enable deselection + + const mItems = selectedItems.concat(allItems ?? []); + const newItems = mItems.filter((item, index) => mItems.indexOf(item) === index); + setItems(newItems); + }, [allItems, selectedItems]); + useEffect(() => { if (searchQuery !== '') { const toDisplay = items.filter(item => item.indexOf(searchQuery) >= 0); @@ -60,7 +70,7 @@ export const FilterPopover = ({ button={ btnContent ?? ( 0} numFilters={items.length} numActiveFilters={tempSelectedItems.length} diff --git a/x-pack/plugins/uptime/public/hooks/use_filter_update.ts b/x-pack/plugins/uptime/public/hooks/use_filter_update.ts index 97ef6b0e67ad2..e7e59ff2e22e6 100644 --- a/x-pack/plugins/uptime/public/hooks/use_filter_update.ts +++ b/x-pack/plugins/uptime/public/hooks/use_filter_update.ts @@ -12,8 +12,15 @@ import { useUrlParams } from './use_url_params'; * @param fieldName the name of the field to filter against * @param values the list of values to use when filter a field */ +interface SelectedFilters { + selectedTags: string[]; + selectedPorts: string[]; + selectedSchemes: string[]; + selectedLocations: string[]; + selectedFilters: Map; +} -export const useFilterUpdate = (fieldName?: string, values?: string[]) => { +export const useFilterUpdate = (fieldName?: string, values?: string[]): SelectedFilters => { const [getUrlParams, updateUrl] = useUrlParams(); const { filters: currentFilters } = getUrlParams(); @@ -52,5 +59,11 @@ export const useFilterUpdate = (fieldName?: string, values?: string[]) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [fieldName, values]); - return filterKueries; + return { + selectedTags: filterKueries.get('tags') || [], + selectedPorts: filterKueries.get('url.port') || [], + selectedSchemes: filterKueries.get('monitor.type') || [], + selectedLocations: filterKueries.get('observer.geo.name') || [], + selectedFilters: filterKueries, + }; };