Skip to content

Commit

Permalink
enable unselection
Browse files Browse the repository at this point in the history
  • Loading branch information
shahzad31 committed May 6, 2020
1 parent 46b91cc commit bb03b50
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ interface Props {
export const AddFilterButton: React.FC<Props> = ({ 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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
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') {
Expand All @@ -45,13 +48,6 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
// 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 });
};
Expand All @@ -64,10 +60,11 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
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,
Expand All @@ -76,10 +73,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
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,
Expand All @@ -88,10 +85,10 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
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,
Expand All @@ -100,10 +97,14 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
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(','),
},
];

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,23 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
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,
onFilterFieldChange,
fieldName: 'observer.geo.name',
id: 'location',
items: locations,
selectedItems: getSelectedItems('observer.geo.name'),
selectedItems: selectedLocations,
title: filterLabels.LOCATION,
},
{
Expand All @@ -52,7 +53,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
id: 'port',
disabled: ports.length === 0,
items: ports.map((p: number) => p.toString()),
selectedItems: getSelectedItems('url.port'),
selectedItems: selectedPorts,
title: filterLabels.PORT,
},
{
Expand All @@ -62,7 +63,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
id: 'scheme',
disabled: schemes.length === 0,
items: schemes,
selectedItems: getSelectedItems('monitor.type'),
selectedItems: selectedSchemes,
title: filterLabels.SCHEME,
},
{
Expand All @@ -72,7 +73,7 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
id: 'tags',
disabled: tags.length === 0,
items: tags,
selectedItems: getSelectedItems('tags'),
selectedItems: selectedTags,
title: filterLabels.TAGS,
},
];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const FilterPopover = ({
id,
disabled,
loading,
items,
items: allItems,
onFilterFieldChange,
selectedItems,
title,
Expand All @@ -46,6 +46,16 @@ export const FilterPopover = ({
const [searchQuery, setSearchQuery] = useState<string>('');
const [tempSelectedItems, setTempSelectedItems] = useState<string[]>(selectedItems);

const [items, setItems] = useState<string[]>([]);

useEffect(() => {
// Merge incoming items with selected items, to enable un-selection

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);
Expand All @@ -60,7 +70,7 @@ export const FilterPopover = ({
button={
btnContent ?? (
<UptimeFilterButton
isDisabled={disabled}
isDisabled={disabled && selectedItems.length === 0}
isSelected={tempSelectedItems.length > 0}
numFilters={items.length}
numActiveFilters={tempSelectedItems.length}
Expand Down
17 changes: 15 additions & 2 deletions x-pack/plugins/uptime/public/hooks/use_filter_update.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, string[]>;
}

export const useFilterUpdate = (fieldName?: string, values?: string[]) => {
export const useFilterUpdate = (fieldName?: string, values?: string[]): SelectedFilters => {
const [getUrlParams, updateUrl] = useUrlParams();

const { filters: currentFilters } = getUrlParams();
Expand Down Expand Up @@ -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,
};
};

0 comments on commit bb03b50

Please sign in to comment.