[Uptime] Enable deselection of stale filters (#65523)

elastic · May 12, 2020 · 592e234 · 592e234
1 parent 0f5c1ed
commit 592e234
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 39 deletions.
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
@@ -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);

diff --git a/...ptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx b/...ptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx
@@ -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') {
@@ -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 });
   };
@@ -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,
@@ -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,
@@ -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,
@@ -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(','),
     },
   ];
 

diff --git a/...lic/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap b/...lic/components/overview/filter_group/__tests__/__snapshots__/filter_popover.test.tsx.snap
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
@@ -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,
     },
     {
@@ -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,
     },
     {
@@ -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,
     },
     {
@@ -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,
     },
   ];

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
@@ -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<string>('');
   const [tempSelectedItems, setTempSelectedItems] = useState<string[]>(selectedItems);
 
+  const [items, setItems] = useState<string[]>([]);
+
+  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 ?? (
           <UptimeFilterButton
-            isDisabled={disabled}
+            isDisabled={disabled && selectedItems.length === 0}
             isSelected={tempSelectedItems.length > 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
@@ -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();
@@ -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,
+  };
 };