handle edge case

elastic · Mar 2, 2023 · 8fa86ac · 8fa86ac
1 parent c285698
commit 8fa86ac
Showing 1 changed file with 44 additions and 5 deletions.
diff --git a/...s/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_group.tsx b/...s/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
+      ),
     });
   }