diff --git a/frontend/dashboard/app/components/filters.tsx b/frontend/dashboard/app/components/filters.tsx index 89d672c30..b602523b7 100644 --- a/frontend/dashboard/app/components/filters.tsx +++ b/frontend/dashboard/app/components/filters.tsx @@ -4,7 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation"; import { formatDateToHumanReadableDateTime, formatIsoDateForDateTimeInputField, isValidTimestamp } from "../utils/time_utils"; import { useEffect, useState } from "react"; import { AppVersion, AppsApiStatus, FiltersApiStatus, FiltersApiType, OsVersion, SessionType, RootSpanNamesApiStatus, emptyApp, fetchAppsFromServer, fetchFiltersFromServer, fetchRootSpanNamesFromServer, SpanStatus } from "../api/api_calls"; -import { DateTime, Interval } from "luxon"; +import { DateTime } from "luxon"; import DropdownSelect, { DropdownSelectType } from "./dropdown_select"; import FilterPill from "./filter_pill"; import CreateApp from "./create_app"; @@ -140,122 +140,10 @@ const Filters: React.FC = ({ onFiltersChanged }) => { const router = useRouter() - const searchParams = useSearchParams() const persistedFiltersStorageKey = 'measurePersistedFilters' const persistedFilters: PersistedFilters = sessionStorage.getItem(persistedFiltersStorageKey) === null ? null : JSON.parse(sessionStorage.getItem(persistedFiltersStorageKey)!) - const updateUrlWithFilters = (filters: Partial) => { - const params = new URLSearchParams(searchParams.toString()); - - if (filters.app?.id) { - params.set('appId', filters.app.id) - } else { - params.delete('appId') - } - if (filters.startDate && showDates) { - params.set('startDate', filters.startDate) - } else { - params.delete('startDate') - } - if (filters.endDate && showDates) { - params.set('endDate', filters.endDate) - } else { - params.delete('endDate') - } - if (filters.versions?.length && showAppVersions) { - params.set('versions', filters.versions.map(v => v.displayName).join(',')) - } else { - params.delete('versions') - } - if (filters.sessionType && showSessionType) { - params.set('sessionType', filters.sessionType) - } else { - params.delete('sessionType') - } - if (filters.osVersions?.length && showOsVersions) { - params.set('osVersions', filters.osVersions.map(v => v.displayName).join(',')) - } else { - params.delete('osVersions') - } - if (filters.countries?.length && showCountries) { - params.set('countries', filters.countries.join(',')) - } else { - params.delete('countries') - } - if (filters.networkProviders?.length && showNetworkProviders) { - params.set('networkProviders', filters.networkProviders.join(',')) - } else { - params.delete('networkProviders') - } - if (filters.networkTypes?.length && showNetworkTypes) { - params.set('networkTypes', filters.networkTypes.join(',')) - } else { - params.delete('networkTypes') - } - if (filters.networkGenerations?.length && showNetworkGenerations) { - params.set('networkGenerations', filters.networkGenerations.join(',')) - } else { - params.delete('networkGenerations') - } - if (filters.locales?.length && showLocales) { - params.set('locales', filters.locales.join(',')) - } else { - params.delete('locales') - } - if (filters.deviceManufacturers?.length && showDeviceManufacturers) { - params.set('deviceManufacturers', filters.deviceManufacturers.join(',')) - } else { - params.delete('deviceManufacturers') - } - if (filters.deviceNames?.length && showDeviceNames) { - params.set('deviceNames', filters.deviceNames.join(',')) - } else { - params.delete('deviceNames') - } - if (filters.freeText && showFreeText) { - params.set('freeText', filters.freeText) - } else { - params.delete('freeText') - } - - router.replace(`?${params.toString()}`, { scroll: false }); - }; - - const getFiltersFromUrl = () => { - const appIdFromUrl = searchParams.get('appId'); - const startDateFromUrl = searchParams.get('startDate'); - const endDateFromUrl = searchParams.get('endDate'); - const versionsFromUrl = searchParams.get('versions')?.split(',') || []; - const sessionTypeFromUrl = searchParams.get('sessionType'); - const osVersionsFromUrl = searchParams.get('osVersions')?.split(',') || []; - const countriesFromUrl = searchParams.get('countries')?.split(',') || []; - const networkProvidersFromUrl = searchParams.get('networkProviders')?.split(',') || []; - const networkTypesFromUrl = searchParams.get('networkTypes')?.split(',') || []; - const networkGenerationsFromUrl = searchParams.get('networkGenerations')?.split(',') || []; - const localesFromUrl = searchParams.get('locales')?.split(',') || []; - const deviceManufacturersFromUrl = searchParams.get('deviceManufacturers')?.split(',') || []; - const deviceNamesFromUrl = searchParams.get('deviceNames')?.split(',') || []; - const freeTextFromUrl = searchParams.get('freeText') || ''; - - return { - appId: appIdFromUrl, - startDate: startDateFromUrl, - endDate: endDateFromUrl, - versions: versionsFromUrl, - sessionType: sessionTypeFromUrl as SessionType, - osVersions: osVersionsFromUrl, - countries: countriesFromUrl, - networkProviders: networkProvidersFromUrl, - networkTypes: networkTypesFromUrl, - networkGenerations: networkGenerationsFromUrl, - locales: localesFromUrl, - deviceManufacturers: deviceManufacturersFromUrl, - deviceNames: deviceNamesFromUrl, - freeText: freeTextFromUrl - }; - } - function mapDateRangeToDate(dateRange: string) { let today = DateTime.now() @@ -291,55 +179,6 @@ const Filters: React.FC = ({ } } - function mapDatesToDateRange(startDateIso: string, endDateIso: string): DateRange { - const startDate = DateTime.fromISO(startDateIso); - const endDate = DateTime.fromISO(endDateIso); - - if (!startDate.isValid || !endDate.isValid) { - throw new Error("Invalid date string provided"); - } - - if (startDate > endDate) { - throw new Error("Start date must be earlier than or equal to end date") - } - - const interval = Interval.fromDateTimes(startDate, endDate); - const duration = interval.toDuration(['years', 'months', 'days', 'hours', 'minutes']); - - const totalMinutes = duration.as('minutes'); - - switch (true) { - case totalMinutes === 15: - return DateRange.Last15Mins; - case totalMinutes === 30: - return DateRange.Last30Mins; - case totalMinutes === 60: - return DateRange.LastHour; - case totalMinutes === 3 * 60: - return DateRange.Last3Hours; - case totalMinutes === 6 * 60: - return DateRange.Last6Hours; - case totalMinutes === 12 * 60: - return DateRange.Last12Hours; - case totalMinutes === 24 * 60: - return DateRange.Last24Hours; - case totalMinutes === 7 * 24 * 60: - return DateRange.LastWeek; - case totalMinutes === 15 * 24 * 60: - return DateRange.Last15Days; - case duration.months === 1 && duration.days === 0: - return DateRange.LastMonth; - case duration.months === 3 && duration.days === 0: - return DateRange.Last3Months; - case duration.months === 6 && duration.days === 0: - return DateRange.Last6Months; - case duration.years === 1 && duration.months === 0 && duration.days === 0: - return DateRange.LastYear; - default: - return DateRange.Custom; - } - } - const [appsApiStatus, setAppsApiStatus] = useState(AppsApiStatus.Loading); const [rootSpanNamesApiStatus, setRootSpanNamesApiStatus] = useState(RootSpanNamesApiStatus.Loading); const [filtersApiStatus, setFiltersApiStatus] = useState(FiltersApiStatus.Loading); @@ -424,11 +263,9 @@ const Filters: React.FC = ({ case AppsApiStatus.Success: setAppsApiStatus(AppsApiStatus.Success) setApps(result.data) - // Prefer provided appId if present, then appId from url if present, - // then appId from persisted filters if present. If all else fails, + // Prefer provided appId and then appId from + // persisted filters if present. If all else fails, // set app to first one - let appIdFromUrl = getFiltersFromUrl().appId - if (appId !== undefined) { let appFromGivenId = result.data.find((e: typeof emptyApp) => e.id === appId) if (appFromGivenId === undefined) { @@ -436,9 +273,6 @@ const Filters: React.FC = ({ } else { setSelectedApp(appFromGivenId) } - } else if (appIdFromUrl !== null) { - let appFromUrl = result.data.find((e: typeof emptyApp) => e.id === appIdFromUrl) - setSelectedApp(appFromUrl !== undefined ? appFromUrl : result.data[0]) } else if (persistedFilters !== null) { let appFromPersistedFilters = result.data.find((e: typeof emptyApp) => e.id === persistedFilters.appId) setSelectedApp(appFromPersistedFilters !== undefined ? appFromPersistedFilters : result.data[0]) @@ -517,175 +351,56 @@ const Filters: React.FC = ({ case FiltersApiStatus.Success: setFiltersApiStatus(FiltersApiStatus.Success) - let urlFilters = getFiltersFromUrl() - - if (showDates) { - if (urlFilters.startDate - && urlFilters.endDate - && DateTime.fromISO(urlFilters.startDate).isValid - && DateTime.fromISO(urlFilters.endDate).isValid - && DateTime.fromISO(urlFilters.startDate) < DateTime.fromISO(urlFilters.endDate)) { - setSelectedStartDate(urlFilters.startDate) - setSelectedEndDate(urlFilters.endDate) - setSelectedDateRange(mapDatesToDateRange(urlFilters.startDate, urlFilters.endDate)) - } else if (urlFilters.startDate - && DateTime.fromISO(urlFilters.startDate).isValid - && DateTime.fromISO(urlFilters.startDate) < DateTime.fromISO(selectedEndDate)) { - setSelectedStartDate(urlFilters.startDate) - setSelectedDateRange(mapDatesToDateRange(urlFilters.startDate, selectedEndDate)) - } else if (urlFilters.endDate - && DateTime.fromISO(urlFilters.endDate).isValid - && DateTime.fromISO(urlFilters.endDate) > DateTime.fromISO(selectedStartDate)) { - setSelectedEndDate(urlFilters.endDate) - setSelectedDateRange(mapDatesToDateRange(selectedStartDate, urlFilters.endDate)) - } - } - - if (result.data.versions !== null && showAppVersions) { + if (result.data.versions !== null) { let versions = result.data.versions.map((v: { name: string; code: string; }) => new AppVersion(v.name, v.code)) setVersions(versions) - if (urlFilters.versions.length > 0) { - const versionsFromUrl = versions.filter((v: AppVersion) => urlFilters.versions.includes(v.displayName)) - if (versionsFromUrl.length > 0) { - setSelectedVersions(versionsFromUrl) - } else if (appVersionsInitialSelectionType === AppVersionsInitialSelectionType.All) { - setSelectedVersions(versions) - } else { - setSelectedVersions(versions.slice(0, 1)) - } - } - else if (appVersionsInitialSelectionType === AppVersionsInitialSelectionType.All) { + if (appVersionsInitialSelectionType === AppVersionsInitialSelectionType.All) { setSelectedVersions(versions) } else { setSelectedVersions(versions.slice(0, 1)) } } - if (showSessionType) { - if (urlFilters.sessionType) { - setSelectedSessionType(urlFilters.sessionType) - } - } - - if (result.data.os_versions !== null && showOsVersions) { + if (result.data.os_versions !== null) { let osVersions = result.data.os_versions.map((v: { name: string; version: string; }) => new OsVersion(v.name, v.version)) setOsVersions(osVersions) - - if (urlFilters.osVersions.length > 0) { - const osVersionsFromUrl = osVersions.filter((o: OsVersion) => urlFilters.osVersions.includes(o.displayName)) - if (osVersionsFromUrl.length > 0) { - setSelectedOsVersions(osVersionsFromUrl) - } else { - setSelectedOsVersions(osVersions) - } - } else { - setSelectedOsVersions(osVersions) - } + setSelectedOsVersions(osVersions) } - if (result.data.countries !== null && showCountries) { + if (result.data.countries !== null) { setCountries(result.data.countries) - if (urlFilters.countries) { - const countriesFromUrl = result.data.countries.filter((v: string) => urlFilters.countries.includes(v)) - if (countriesFromUrl.length > 0) { - setSelectedCountries(countriesFromUrl) - } else { - setSelectedCountries(result.data.countries) - } - } else { - setSelectedCountries(result.data.countries) - } + setSelectedCountries(result.data.countries) } - if (result.data.network_providers !== null && showNetworkProviders) { + if (result.data.network_providers !== null) { setNetworkProviders(result.data.network_providers) - if (urlFilters.networkProviders) { - const networkProvidersFromUrl = result.data.network_providers.filter((v: string) => urlFilters.networkProviders.includes(v)) - if (networkProvidersFromUrl.length > 0) { - setSelectedNetworkProviders(networkProvidersFromUrl) - } else { - setSelectedNetworkProviders(result.data.network_providers) - } - } else { - setSelectedNetworkProviders(result.data.network_providers) - } + setSelectedNetworkProviders(result.data.network_providers) } - if (result.data.network_types !== null && showNetworkTypes) { + if (result.data.network_types !== null) { setNetworkTypes(result.data.network_types) - if (urlFilters.networkTypes) { - const networkTypesFromUrl = result.data.network_types.filter((v: string) => urlFilters.networkTypes.includes(v)) - if (networkTypesFromUrl.length > 0) { - setSelectedNetworkTypes(networkTypesFromUrl) - } else { - setSelectedNetworkTypes(result.data.network_types) - } - } else { - setSelectedNetworkTypes(result.data.network_types) - } + setSelectedNetworkTypes(result.data.network_types) } - if (result.data.network_generations !== null && showNetworkGenerations) { + if (result.data.network_generations !== null) { setNetworkGenerations(result.data.network_generations) - if (urlFilters.networkGenerations) { - const networkGenerationsFromUrl = result.data.network_generations.filter((v: string) => urlFilters.networkGenerations.includes(v)) - if (networkGenerationsFromUrl.length > 0) { - setSelectedNetworkGenerations(networkGenerationsFromUrl) - } else { - setSelectedNetworkGenerations(result.data.network_generations) - } - } else { - setSelectedNetworkGenerations(result.data.network_generations) - } + setSelectedNetworkGenerations(result.data.network_generations) } - if (result.data.locales !== null && showLocales) { + if (result.data.locales !== null) { setLocales(result.data.locales) - if (urlFilters.locales) { - const localesFromUrl = result.data.locales.filter((v: string) => urlFilters.locales.includes(v)) - if (localesFromUrl.length > 0) { - setSelectedLocales(localesFromUrl) - } else { - setSelectedLocales(result.data.locales) - } - } else { - setSelectedLocales(result.data.locales) - } + setSelectedLocales(result.data.locales) } - if (result.data.device_manufacturers !== null && showDeviceManufacturers) { + if (result.data.device_manufacturers !== null) { setDeviceManufacturers(result.data.device_manufacturers) - if (urlFilters.deviceManufacturers) { - const deviceManufacturersFromUrl = result.data.device_manufacturers.filter((v: string) => urlFilters.deviceManufacturers.includes(v)) - if (deviceManufacturersFromUrl.length > 0) { - setSelectedDeviceManufacturers(deviceManufacturersFromUrl) - } else { - setSelectedDeviceManufacturers(result.data.device_manufacturers) - } - } else { - setSelectedDeviceManufacturers(result.data.device_manufacturers) - } + setSelectedDeviceManufacturers(result.data.device_manufacturers) } - if (result.data.device_names !== null && showDeviceNames) { + if (result.data.device_names !== null) { setDeviceNames(result.data.device_names) - if (urlFilters.deviceNames) { - const deviceNamesFromUrl = result.data.device_names.filter((v: string) => urlFilters.deviceNames.includes(v)) - if (deviceNamesFromUrl.length > 0) { - setSelectedDeviceNames(deviceNamesFromUrl) - } else { - setSelectedDeviceNames(result.data.device_names) - } - } else { - setSelectedDeviceNames(result.data.device_names) - } - } - - if (showFreeText) { - if (urlFilters.freeText) { - setSelectedFreeText(urlFilters.freeText) - } + setSelectedDeviceNames(result.data.device_names) } break @@ -702,7 +417,7 @@ const Filters: React.FC = ({ }, [selectedApp]); useEffect(() => { - // Don't update url filters or fire change listener if selected app is not yet set + // Don't fire change listener if selected app is not yet set if (selectedApp.id === "") { return } @@ -747,7 +462,6 @@ const Filters: React.FC = ({ sessionStorage.setItem(persistedFiltersStorageKey, JSON.stringify(updatedPersistedFilters)) onFiltersChanged(updatedSelectedFilters) - // updateUrlWithFilters(updatedSelectedFilters) }, [filtersApiStatus, selectedStartDate, selectedEndDate, selectedVersions, selectedSessionType, selectedOsVersions, selectedCountries, selectedNetworkProviders, selectedNetworkTypes, selectedNetworkGenerations, selectedLocales, selectedDeviceManufacturers, selectedDeviceNames, selectedFreeText, selectedRootSpanName, selectedSpanStatuses]) return (