diff --git a/src/components/CheckEditor/ProbesMetadata.ts b/src/components/CheckEditor/ProbesMetadata.ts index f79eaa386..918e60cb4 100644 --- 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 index 780c1c9ca..1e023aee3 100644 --- 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 index cfaa8b10f..d88eb9cf4 100644 --- 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({ @@ -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)); + .filter((probe) => labels.includes(probe.displayName)) + .map((probe) => ({ label: probe.displayName, value: probe.id } as SelectableValue)); }, }), }; diff --git a/src/page/CheckList/CheckList.test.tsx b/src/page/CheckList/CheckList.test.tsx index 4f075e838..8c7c2b83b 100644 --- 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 index 665ce1e13..bc8b335ce 100644 --- 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 index 632ea2df9..6345b4b27 100644 --- 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 => ({ diff --git a/src/types.ts b/src/types.ts index 73a492083..c84a57b51 100644 --- a/src/types.ts +++ b/src/types.ts @@ -65,6 +65,7 @@ export enum ProbeProvider { AWS = 'AWS', LINODE = 'Linode', DIGITAL_OCEAN = 'Digital Ocean', + PRIVATE = '', } export interface HeaderMatch { @@ -126,6 +127,7 @@ export interface Probe extends ExistingObject { export type ProbeMetadata = { name: string; + displayName: string; provider: ProbeProvider; country: string; countryCode: string; diff --git a/src/utils.test.ts b/src/utils.test.ts index 9ea2308cf..971ac5193 100644 --- a/src/utils.test.ts +++ b/src/utils.test.ts @@ -1,4 +1,4 @@ -import { camelCaseToSentence, getRandomProbes } from 'utils'; +import { getRandomProbes, pascalCaseToSentence } from 'utils'; it('gets random probes', async () => { const probes = [11, 23, 5, 5212, 43, 3, 4, 6]; @@ -14,12 +14,24 @@ it('gets random probes', async () => { expect(random2.length).toBe(2); }); -describe(`camelCaseToSentence`, () => { +describe(`pascalCaseToSentence`, () => { it(`converts camelCase to sentence`, () => { - expect(camelCaseToSentence('camelCaseToSentence')).toBe('Camel Case To Sentence'); + expect(pascalCaseToSentence('camelCaseToSentence')).toBe('Camel Case To Sentence'); + }); + + it(`converts pascalCase to sentence`, () => { + expect(pascalCaseToSentence('PascalCaseToSentence')).toBe('Pascal Case To Sentence'); }); it(`doesn't convert values which are all uppercase`, () => { - expect(camelCaseToSentence('ALLUPPERCASE')).toBe('ALLUPPERCASE'); + expect(pascalCaseToSentence('ALLUPPERCASE')).toBe('ALLUPPERCASE'); + }); + + it(`doesn't convert values which are all lowercase`, () => { + expect(pascalCaseToSentence('alllowercase')).toBe('alllowercase'); + }); + + it(`doesn't convert values which already have spaces`, () => { + expect(pascalCaseToSentence('Has Spaces')).toBe('Has Spaces'); }); }); diff --git a/src/utils.ts b/src/utils.ts index 6cfae4108..b80782dd8 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -427,10 +427,10 @@ export function createNavModel(base: NavModelItem, items: NavModelItem[]): NavMo }, base); } -export function camelCaseToSentence(value: string) { - if (value.toUpperCase() === value || value.toLowerCase() === value) { +export const pascalCaseToSentence = (value: string): string => { + if (value === value.toUpperCase() || value === value.toLowerCase()) { return value; } - return value.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase()); -} + return value.charAt(0).toUpperCase() + value.slice(1).replace(/(?