fix: probe filtering behaviour and reset button (#1066)

* fix: change camelCasetoSentence to pascalCasetoSentence with additional tests * fix: hardcode displayNames in probe meta. fix reset * fix: add default empty metadata for probes * fix: default displayName to probe.name when not present
grafana · Feb 12, 2025 · 1b7dfb4 · 1b7dfb4
1 parent ff377b6
commit 1b7dfb4
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 28 deletions.
diff --git a/src/components/CheckEditor/ProbesMetadata.ts b/src/components/CheckEditor/ProbesMetadata.ts
@@ -23,9 +23,20 @@ const COUNTRY_AE = { code: 'AE', long: 'United Arab Emirates' };
 const COUNTRY_ES = { code: 'ES', long: 'Spain' };
 const COUNTRY_ID = { code: 'ID', long: 'Indonesia' };
 
+export const EMPTY_METADATA: ProbeMetadata = {
+  name: '',
+  displayName: '',
+  region: '',
+  longRegion: '',
+  provider: ProbeProvider.PRIVATE,
+  countryCode: '',
+  country: '',
+};
+
 export const PROBES_METADATA: ProbeMetadata[] = [
   {
     name: 'Bangalore',
+    displayName: `Bangalore`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.DIGITAL_OCEAN,
@@ -34,6 +45,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Mumbai',
+    displayName: `Mumbai`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -42,6 +54,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Seoul',
+    displayName: `Seoul`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -50,6 +63,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Singapore',
+    displayName: `Singapore`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -58,6 +72,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Sydney',
+    displayName: `Sydney`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -66,6 +81,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Tokyo',
+    displayName: `Tokyo`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -75,6 +91,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
 
   {
     name: 'Atlanta',
+    displayName: `Atlanta`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.LINODE,
@@ -83,6 +100,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Dallas',
+    displayName: `Dallas`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.LINODE,
@@ -91,6 +109,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Newark',
+    displayName: `Newark`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.LINODE,
@@ -99,6 +118,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Toronto',
+    displayName: `Toronto`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.LINODE,
@@ -107,6 +127,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'NewYork',
+    displayName: `New York`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.DIGITAL_OCEAN,
@@ -115,6 +136,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'SanFrancisco',
+    displayName: `San Francisco`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.DIGITAL_OCEAN,
@@ -123,6 +145,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'NorthCalifornia',
+    displayName: `North California`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -131,6 +154,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'NorthVirginia',
+    displayName: `North Virginia`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -139,6 +163,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Ohio',
+    displayName: `Ohio`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -147,6 +172,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Oregon',
+    displayName: `Oregon`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -155,6 +181,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'SaoPaulo',
+    displayName: `Sao Paulo`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -164,6 +191,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
 
   {
     name: 'Amsterdam',
+    displayName: `Amsterdam`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.DIGITAL_OCEAN,
@@ -172,6 +200,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'CapeTown',
+    displayName: `Cape Town`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -180,6 +209,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Frankfurt',
+    displayName: `Frankfurt`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -188,6 +218,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'London',
+    displayName: `London`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -196,6 +227,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Paris',
+    displayName: `Paris`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -204,6 +236,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Zurich',
+    displayName: `Zurich`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -212,6 +245,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Stockholm',
+    displayName: `Stockholm`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -220,6 +254,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Montreal',
+    displayName: `Montreal`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -228,6 +263,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Calgary',
+    displayName: `Calgary`,
     region: REGION_AMER.code,
     longRegion: REGION_AMER.long,
     provider: ProbeProvider.AWS,
@@ -236,6 +272,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'UAE',
+    displayName: `UAE`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -244,6 +281,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Hyderabad',
+    displayName: `Hyderabad`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,
@@ -252,6 +290,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Spain',
+    displayName: `Spain`,
     region: REGION_EMEA.code,
     longRegion: REGION_EMEA.long,
     provider: ProbeProvider.AWS,
@@ -260,6 +299,7 @@ export const PROBES_METADATA: ProbeMetadata[] = [
   },
   {
     name: 'Jakarta',
+    displayName: `Jakarta`,
     region: REGION_APAC.code,
     longRegion: REGION_APAC.long,
     provider: ProbeProvider.AWS,

diff --git a/src/data/useProbes.ts b/src/data/useProbes.ts
@@ -3,9 +3,8 @@ import { type QueryKey, useMutation, UseMutationResult, useQuery, useSuspenseQue
 import { isFetchError } from '@grafana/runtime';
 
 import { type MutationProps } from 'data/types';
-import { ExtendedProbe, type Probe, ProbeMetadata, ProbeWithMetadata } from 'types';
+import { ExtendedProbe, type Probe, ProbeWithMetadata } from 'types';
 import { FaroEvent } from 'faro';
-import { camelCaseToSentence } from 'utils';
 import { SMDataSource } from 'datasource/DataSource';
 import type {
   AddProbeResult,
@@ -16,7 +15,7 @@ import type {
 } from 'datasource/responses.types';
 import { queryClient } from 'data/queryClient';
 import { useSMDS } from 'hooks/useSMDS';
-import { PROBES_METADATA } from 'components/CheckEditor/ProbesMetadata';
+import { EMPTY_METADATA, PROBES_METADATA } from 'components/CheckEditor/ProbesMetadata';
 
 import { useChecks } from './useChecks';
 
@@ -48,15 +47,13 @@ export function useProbesWithMetadata() {
     return probes
       .sort((a, b) => a.name.localeCompare(b.name))
       .map((probe) => {
-        const metadata = PROBES_METADATA.find(
-          (info) => info.name === probe.name && info.region === probe.region
-        ) as ProbeMetadata;
-        const displayName = camelCaseToSentence(probe.name);
+        const metadata =
+          PROBES_METADATA.find((info) => info.name === probe.name && info.region === probe.region) || EMPTY_METADATA;
 
         return {
-          ...probe,
           ...metadata,
-          displayName,
+          ...probe,
+          displayName: metadata.displayName || probe.name,
         };
       });
   }, [probes, isLoading]);

diff --git a/src/page/CheckList/CheckList.hooks.ts b/src/page/CheckList/CheckList.hooks.ts
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash';
 
 import { CheckTypeFilter, ProbeFilter } from 'page/CheckList/CheckList.types';
 import { CheckEnabledStatus, CheckType } from 'types';
-import { useProbes } from 'data/useProbes';
+import { useProbesWithMetadata } from 'data/useProbes';
 import { useQueryParametersState } from 'hooks/useQueryParametersState';
 import { defaultFilters } from 'page/CheckList/CheckList.utils';
 
@@ -22,7 +22,7 @@ interface CheckFiltersProps {
 }
 
 export function useCheckFilters() {
-  const { data: probes = [] } = useProbes();
+  const { data: probes = [] } = useProbesWithMetadata();
 
   const filters: CheckFiltersProps = {
     search: useQueryParametersState<string>({
@@ -68,8 +68,8 @@ export function useCheckFilters() {
         const labels = value.split(',');
 
         return probes
-          .filter((probe) => labels.includes(probe.name))
-          .map((probe) => ({ label: probe.name, value: probe.id } as SelectableValue<ProbeFilter>));
+          .filter((probe) => labels.includes(probe.displayName))
+          .map((probe) => ({ label: probe.displayName, value: probe.id } as SelectableValue<ProbeFilter>));
       },
     }),
   };

diff --git a/src/page/CheckList/CheckList.test.tsx b/src/page/CheckList/CheckList.test.tsx
@@ -321,6 +321,30 @@ test('clicking status chiclet adds it to filter', async () => {
   expect(checks.length).toBe(1);
 });
 
+test(`clicking filters reset button works correctly`, async () => {
+  const DNS_CHECK_DISABLED = {
+    ...BASIC_DNS_CHECK,
+    enabled: false,
+  };
+
+  const { user } = await renderCheckList([DNS_CHECK_DISABLED, BASIC_HTTP_CHECK]);
+  const disabledChiclet = await screen.findAllByText('Disabled');
+  await user.click(disabledChiclet[0]);
+  const additionalFilters = await screen.findByText(/Additional filters/i);
+  await user.click(additionalFilters);
+
+  const dialog = getModalContainer();
+  const statusFilter = await within(dialog).findByText(`Disabled`);
+  expect(statusFilter).toBeInTheDocument();
+
+  const checks = await screen.findAllByTestId('check-card');
+  expect(checks.length).toBe(1);
+
+  await user.click(await within(dialog).findByText(`Reset`));
+  const resetChecks = await screen.findAllByTestId('check-card');
+  expect(resetChecks.length).toBe(2);
+});
+
 test('clicking add new is handled', async () => {
   const navigate = jest.fn();
   useNavigationHook.useNavigation = jest.fn(() => navigate); // TODO: COME BACK TO

diff --git a/src/page/CheckList/CheckList.tsx b/src/page/CheckList/CheckList.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { PluginPage } from '@grafana/runtime';
 import { Pagination, useStyles2 } from '@grafana/ui';
@@ -53,6 +54,8 @@ type CheckListContentProps = {
 
 const CheckListContent = ({ onChangeViewType, viewType }: CheckListContentProps) => {
   useSuspenseProbes(); // we need to block rendering until we have the probe list so not to initially render a check list that might have probe filters
+  const navigate = useNavigate();
+  const location = useLocation();
   const { data: checks } = useSuspenseChecks();
   const { data: reachabilitySuccessRates = [] } = useChecksReachabilitySuccessRate();
   const filters = useCheckFilters();
@@ -118,11 +121,7 @@ const CheckListContent = ({ onChangeViewType, viewType }: CheckListContentProps)
   };
 
   const handleResetFilters = () => {
-    setSearch(null);
-    setLabels(null);
-    setType(null);
-    setProbes(null);
-    setStatus(null);
+    navigate(`${location.pathname}${sortType ? `?sort=${sortType}` : ''}`);
   };
 
   const handleLabelSelect = (label: Label) => {

diff --git a/src/test/utils.ts b/src/test/utils.ts
@@ -9,7 +9,7 @@ import {
 } from 'test/fixtures/datasources';
 
 import { ExtendedProbe, FeatureName, type Probe, ProbeProvider, ProbeWithMetadata } from 'types';
-import { camelCaseToSentence } from 'utils';
+import { pascalCaseToSentence } from 'utils';
 
 import { FULL_ADMIN_ACCESS, FULL_READONLY_ACCESS, FULL_WRITER_ACCESS } from './fixtures/rbacPermissions';
 import { apiRoute } from './handlers';
@@ -306,7 +306,7 @@ export const probeToMetadataProbe = (probe: Probe): ProbeWithMetadata => ({
   countryCode: 'cc',
   region: 'region',
   longRegion: 'long region',
-  displayName: camelCaseToSentence(probe.name),
+  displayName: pascalCaseToSentence(probe.name),
 });
 
 export const probeToExtendedProbe = (probe: Probe, usedByChecks: number[] = []): ExtendedProbe => ({