[8.7] [Synthetics] Filtering - location filter counts are off when filter is applied (#155437) (#155537)

Co-authored-by: Anjola Adeuyi
Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>

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,26 +45,55 @@ 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.map((locationData) => {
+            const matchingLocation = locations.find(
+              (location) => location.id === locationData.label
+            );
+            return {
+              label: matchingLocation ? matchingLocation.label : locationData.label,
+              count: locationData.count,
+            };
+          }),
+          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
+      ),
     },
   ];
 
@@ -55,7 +101,11 @@ export const FilterGroup = ({
     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/use_filters.ts

@@ -132,7 +132,7 @@ export const useFilters = (): FiltersList => {
           })) ?? [],
       schedules:
         schedules?.buckets?.map(({ key, doc_count: count }) => ({
-          label: key,
+          label: String(key),
           count,
         })) ?? [],
     };