Skip to content

Commit 2ccac72

Browse files
shahzad31shahzad31
committed
[Uptime] Enable deselection of stale filters (#65523)
1 parent 3052a16 commit 2ccac72

6 files changed

Lines changed: 64 additions & 39 deletions

File tree

‎x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ interface Props {
1717
export const AddFilterButton: React.FC<Props> = ({ newFilters, onNewFilter }) => {
1818
const [isPopoverOpen, setPopover] = useState(false);
1919

20-
const currentFilters = useFilterUpdate();
20+
const { selectedFilters } = useFilterUpdate();
2121

22-
const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || [];
22+
const getSelectedItems = (fieldName: string) => selectedFilters.get(fieldName) || [];
2323

2424
const onButtonClick = () => {
2525
setPopover(!isPopoverOpen);

‎x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
3131
values: string[];
3232
}>({ fieldName: '', values: [] });
3333

34-
const currentFilters = useFilterUpdate(updatedFieldValues.fieldName, updatedFieldValues.values);
34+
const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useFilterUpdate(
35+
updatedFieldValues.fieldName,
36+
updatedFieldValues.values
37+
);
3538

3639
useEffect(() => {
3740
if (updatedFieldValues.fieldName === 'observer.geo.name') {
@@ -45,13 +48,6 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
4548
// eslint-disable-next-line react-hooks/exhaustive-deps
4649
}, []);
4750

48-
const selectedTags = currentFilters.get('tags');
49-
const selectedPorts = currentFilters.get('url.port');
50-
const selectedScheme = currentFilters.get('monitor.type');
51-
const selectedLocation = currentFilters.get('observer.geo.name');
52-
53-
const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || [];
54-
5551
const onFilterFieldChange = (fieldName: string, values: string[]) => {
5652
setUpdatedFieldValues({ fieldName, values });
5753
};
@@ -64,10 +60,11 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
6460
id: 'filter_port',
6561
disabled: ports?.length === 0,
6662
items: ports?.map((p: number) => p.toString()) ?? [],
67-
selectedItems: getSelectedItems('url.port'),
63+
selectedItems: selectedPorts,
6864
title: filterLabels.PORT,
69-
description: selectedPorts ? alertFilterLabels.USING_PORT : alertFilterLabels.USING,
70-
value: selectedPorts?.join(',') ?? alertFilterLabels.ANY_PORT,
65+
description:
66+
selectedPorts.length === 0 ? alertFilterLabels.USING : alertFilterLabels.USING_PORT,
67+
value: selectedPorts.length === 0 ? alertFilterLabels.ANY_PORT : selectedPorts?.join(','),
7168
},
7269
{
7370
onFilterFieldChange,
@@ -76,10 +73,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
7673
id: 'filter_tags',
7774
disabled: tags?.length === 0,
7875
items: tags ?? [],
79-
selectedItems: getSelectedItems('tags'),
76+
selectedItems: selectedTags,
8077
title: filterLabels.TAGS,
81-
description: selectedTags ? alertFilterLabels.WITH_TAG : alertFilterLabels.WITH,
82-
value: selectedTags?.join(',') ?? alertFilterLabels.ANY_TAG,
78+
description: selectedTags.length === 0 ? alertFilterLabels.WITH : alertFilterLabels.WITH_TAG,
79+
value: selectedTags.length === 0 ? alertFilterLabels.ANY_TAG : selectedTags?.join(','),
8380
},
8481
{
8582
onFilterFieldChange,
@@ -88,10 +85,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
8885
id: 'filter_scheme',
8986
disabled: schemes?.length === 0,
9087
items: schemes ?? [],
91-
selectedItems: getSelectedItems('monitor.type'),
88+
selectedItems: selectedSchemes,
9289
title: filterLabels.SCHEME,
93-
description: selectedScheme ? alertFilterLabels.OF_TYPE : alertFilterLabels.OF,
94-
value: selectedScheme?.join(',') ?? alertFilterLabels.ANY_TYPE,
90+
description: selectedSchemes.length === 0 ? alertFilterLabels.OF : alertFilterLabels.OF_TYPE,
91+
value: selectedSchemes.length === 0 ? alertFilterLabels.ANY_TYPE : selectedSchemes?.join(','),
9592
},
9693
{
9794
onFilterFieldChange,
@@ -100,10 +97,14 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
10097
id: 'filter_location',
10198
disabled: locations?.length === 0,
10299
items: locations ?? [],
103-
selectedItems: getSelectedItems('observer.geo.name'),
100+
selectedItems: selectedLocations,
104101
title: filterLabels.SCHEME,
105-
description: selectedLocation ? alertFilterLabels.FROM_LOCATION : alertFilterLabels.FROM,
106-
value: selectedLocation?.join(',') ?? alertFilterLabels.ANY_LOCATION,
102+
description:
103+
selectedLocations.length === 0 ? alertFilterLabels.FROM : alertFilterLabels.FROM_LOCATION,
104+
value:
105+
selectedLocations.length === 0
106+
? alertFilterLabels.ANY_LOCATION
107+
: selectedLocations?.join(','),
107108
},
108109
];
109110

‎x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,23 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
2727
values: string[];
2828
}>({ fieldName: '', values: [] });
2929

30-
const currentFilters = useFilterUpdate(updatedFieldValues.fieldName, updatedFieldValues.values);
30+
const { selectedLocations, selectedPorts, selectedSchemes, selectedTags } = useFilterUpdate(
31+
updatedFieldValues.fieldName,
32+
updatedFieldValues.values
33+
);
3134

3235
const onFilterFieldChange = (fieldName: string, values: string[]) => {
3336
setUpdatedFieldValues({ fieldName, values });
3437
};
3538

36-
const getSelectedItems = (fieldName: string) => currentFilters.get(fieldName) || [];
37-
3839
const filterPopoverProps: FilterPopoverProps[] = [
3940
{
4041
loading,
4142
onFilterFieldChange,
4243
fieldName: 'observer.geo.name',
4344
id: 'location',
4445
items: locations,
45-
selectedItems: getSelectedItems('observer.geo.name'),
46+
selectedItems: selectedLocations,
4647
title: filterLabels.LOCATION,
4748
},
4849
{
@@ -52,7 +53,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
5253
id: 'port',
5354
disabled: ports.length === 0,
5455
items: ports.map((p: number) => p.toString()),
55-
selectedItems: getSelectedItems('url.port'),
56+
selectedItems: selectedPorts,
5657
title: filterLabels.PORT,
5758
},
5859
{
@@ -62,7 +63,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
6263
id: 'scheme',
6364
disabled: schemes.length === 0,
6465
items: schemes,
65-
selectedItems: getSelectedItems('monitor.type'),
66+
selectedItems: selectedSchemes,
6667
title: filterLabels.SCHEME,
6768
},
6869
{
@@ -72,7 +73,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
7273
id: 'tags',
7374
disabled: tags.length === 0,
7475
items: tags,
75-
selectedItems: getSelectedItems('tags'),
76+
selectedItems: selectedTags,
7677
title: filterLabels.TAGS,
7778
},
7879
];

‎x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const FilterPopover = ({
3333
id,
3434
disabled,
3535
loading,
36-
items,
36+
items: allItems,
3737
onFilterFieldChange,
3838
selectedItems,
3939
title,
@@ -46,6 +46,16 @@ export const FilterPopover = ({
4646
const [searchQuery, setSearchQuery] = useState<string>('');
4747
const [tempSelectedItems, setTempSelectedItems] = useState<string[]>(selectedItems);
4848

49+
const [items, setItems] = useState<string[]>([]);
50+
51+
useEffect(() => {
52+
// Merge incoming items with selected items, to enable deselection
53+
54+
const mItems = selectedItems.concat(allItems ?? []);
55+
const newItems = mItems.filter((item, index) => mItems.indexOf(item) === index);
56+
setItems(newItems);
57+
}, [allItems, selectedItems]);
58+
4959
useEffect(() => {
5060
if (searchQuery !== '') {
5161
const toDisplay = items.filter(item => item.indexOf(searchQuery) >= 0);
@@ -60,7 +70,7 @@ export const FilterPopover = ({
6070
button={
6171
btnContent ?? (
6272
<UptimeFilterButton
63-
isDisabled={disabled}
73+
isDisabled={disabled && selectedItems.length === 0}
6474
isSelected={tempSelectedItems.length > 0}
6575
numFilters={items.length}
6676
numActiveFilters={tempSelectedItems.length}

‎x-pack/plugins/uptime/public/hooks/use_filter_update.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,15 @@ import { useUrlParams } from './use_url_params';
1212
* @param fieldName the name of the field to filter against
1313
* @param values the list of values to use when filter a field
1414
*/
15+
interface SelectedFilters {
16+
selectedTags: string[];
17+
selectedPorts: string[];
18+
selectedSchemes: string[];
19+
selectedLocations: string[];
20+
selectedFilters: Map<string, string[]>;
21+
}
1522

16-
export const useFilterUpdate = (fieldName?: string, values?: string[]) => {
23+
export const useFilterUpdate = (fieldName?: string, values?: string[]): SelectedFilters => {
1724
const [getUrlParams, updateUrl] = useUrlParams();
1825

1926
const { filters: currentFilters } = getUrlParams();
@@ -52,5 +59,11 @@ export const useFilterUpdate = (fieldName?: string, values?: string[]) => {
5259
// eslint-disable-next-line react-hooks/exhaustive-deps
5360
}, [fieldName, values]);
5461

55-
return filterKueries;
62+
return {
63+
selectedTags: filterKueries.get('tags') || [],
64+
selectedPorts: filterKueries.get('url.port') || [],
65+
selectedSchemes: filterKueries.get('monitor.type') || [],
66+
selectedLocations: filterKueries.get('observer.geo.name') || [],
67+
selectedFilters: filterKueries,
68+
};
5669
};

0 commit comments

Comments
 (0)