[Synthetics] Fix filters persistance (#152543)

.github/CODEOWNERS

@@ -804,7 +804,12 @@ packages/kbn-yarn-lock-validator @elastic/kibana-operations
 /x-pack/test/functional/services/uptime @elastic/uptime
 /x-pack/test/api_integration/apis/uptime @elastic/uptime
 /x-pack/plugins/observability/public/components/shared/exploratory_view @elastic/uptime
+/x-pack/plugins/observability/public/components/shared/field_value_suggestions @elastic/uptime
+/x-pack/plugins/observability/public/components/shared/core_web_vitals @elastic/uptime
+/x-pack/plugins/observability/public/components/shared/load_when_in_view @elastic/uptime
+/x-pack/plugins/observability/public/components/shared/filter_value_label @elastic/uptime
 /x-pack/plugins/observability/public/utils/observability_data_views @elastic/uptime
+/x-pack/plugins/observability/e2e @elastic/uptime
 
 # Client Side Monitoring / Uptime (lives in APM directories but owned by Uptime)
 /x-pack/plugins/apm/public/application/uxApp.tsx @elastic/uptime

x-pack/plugins/observability/public/components/shared/field_value_suggestions/field_value_selection.tsx

@@ -95,7 +95,8 @@ export function FieldValueSelection({
 
   useEffect(() => {
     setOptions(formatOptions(values, selectedValue, excludedValue, showCount));
-  }, [values, selectedValue, showCount, excludedValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(values), JSON.stringify(selectedValue), showCount, excludedValue]);
 
   const onButtonClick = () => {
     setIsPopoverOpen(!isPopoverOpen);

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_group.tsx

@@ -9,16 +9,33 @@ import React from 'react';
 import { EuiFilterGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useSelector } from 'react-redux';
+import { useGetUrlParams } from '../../../../hooks';
 import { selectServiceLocationsState } from '../../../../state';
 
 import {
   SyntheticsMonitorFilterItem,
   getSyntheticsFilterDisplayValues,
   SyntheticsMonitorFilterChangeHandler,
+  LabelWithCountValue,
 } from './filter_fields';
 import { useFilters } from './use_filters';
 import { FilterButton } from './filter_button';
 
+const mixUrlValues = (
+  values?: LabelWithCountValue[],
+  urlLabels?: string[]
+): LabelWithCountValue[] => {
+  const urlValues = urlLabels?.map((label) => ({ label, count: 0 })) ?? [];
+  const newValues = [...(values ?? [])];
+  // add url values that are not in the values
+  urlValues.forEach((urlValue) => {
+    if (!newValues.find((value) => value.label === urlValue.label)) {
+      newValues.push(urlValue);
+    }
+  });
+  return newValues;
+};
+
 export const FilterGroup = ({
   handleFilterChange,
 }: {
@@ -28,34 +45,56 @@ export const FilterGroup = ({
 
   const { locations } = useSelector(selectServiceLocationsState);
 
+  const urlParams = useGetUrlParams();
+
   const filters: SyntheticsMonitorFilterItem[] = [
     {
       label: TYPE_LABEL,
       field: 'monitorTypes',
-      values: getSyntheticsFilterDisplayValues(data.monitorTypes, 'monitorTypes', locations),
+      values: getSyntheticsFilterDisplayValues(
+        mixUrlValues(data.monitorTypes, urlParams.monitorTypes),
+        'monitorTypes',
+        locations
+      ),
     },
     {
       label: LOCATION_LABEL,
       field: 'locations',
-      values: getSyntheticsFilterDisplayValues(data.locations, 'locations', locations),
+      values: getSyntheticsFilterDisplayValues(
+        mixUrlValues(data.locations, urlParams.locations),
+        'locations',
+        locations
+      ),
     },
     {
       label: TAGS_LABEL,
       field: 'tags',
-      values: getSyntheticsFilterDisplayValues(data.tags, 'tags', locations),
+      values: getSyntheticsFilterDisplayValues(
+        mixUrlValues(data.tags, urlParams.tags),
+        'tags',
+        locations
+      ),
     },
     {
       label: SCHEDULE_LABEL,
       field: 'schedules',
-      values: getSyntheticsFilterDisplayValues(data.schedules, 'schedules', locations),
+      values: getSyntheticsFilterDisplayValues(
+        mixUrlValues(data.schedules, urlParams.schedules),
+        'schedules',
+        locations
+      ),
     },
   ];
 
   if (data.projects.length > 0) {
     filters.push({
       label: PROJECT_LABEL,
       field: 'projects',
-      values: getSyntheticsFilterDisplayValues(data.projects, 'projects', locations),
+      values: getSyntheticsFilterDisplayValues(
+        mixUrlValues(data.projects, urlParams.projects),
+        'projects',
+        locations
+      ),
     });
   }
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/common/monitor_filters/list_filters.tsx

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import React, { memo } from 'react';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { FilterGroup } from './filter_group';
 import { SearchField } from '../search_field';
 import { SyntheticsMonitorFilterChangeHandler } from './filter_fields';
 
-export const ListFilters = memo(function ({
+export const ListFilters = function ({
   handleFilterChange,
 }: {
   handleFilterChange: SyntheticsMonitorFilterChangeHandler;
@@ -27,4 +27,4 @@ export const ListFilters = memo(function ({
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-});
+};

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/index.ts

@@ -118,8 +118,8 @@ export const monitorListReducer = createReducer(initialState, (builder) => {
         delete state.monitorUpsertStatuses[action.payload];
       }
     })
-    .addCase(cleanMonitorListState, () => {
-      return initialState;
+    .addCase(cleanMonitorListState, (state) => {
+      return { ...initialState, pageState: state.pageState };
     });
 });