From eb13801daa91cff04e0f5ff6510e1259419a6ff3 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 30 May 2023 15:23:23 +0200 Subject: [PATCH] feat(ui): added user city filter and display in session list --- .../Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js | 4 ++++ frontend/app/components/shared/SessionItem/SessionItem.tsx | 3 ++- frontend/app/components/ui/CountryFlag/CountryFlag.js | 3 ++- frontend/app/mstore/types/session.ts | 2 ++ frontend/app/types/filter/filterType.ts | 6 ++++++ frontend/app/types/filter/newFilter.js | 1 + frontend/app/types/session/session.ts | 2 ++ 7 files changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js index 7b295d94b..0da9620f8 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js +++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js @@ -20,6 +20,7 @@ function UserCard({ className, request, session, width, height, similarSessions, userBrowser, userDevice, userCountry, + userCity, userBrowserVersion, userOs, userOsVersion, @@ -69,6 +70,9 @@ function UserCard({ className, request, session, width, height, similarSessions, · + {userCity && ( + {userCity}, + )} {countries[userCountry]} · diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 6f23776c7..0aecebfa2 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -93,6 +93,7 @@ function SessionItem(props: RouteComponentProps & Props) { userAnonymousId, userDisplayName, userCountry, + userCity, startedAt, duration, eventsCount, @@ -218,7 +219,7 @@ function SessionItem(props: RouteComponentProps & Props) {
- +
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js index 4e4ba4cba..0af4419f6 100644 --- a/frontend/app/components/ui/CountryFlag/CountryFlag.js +++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js @@ -4,7 +4,7 @@ import { countries } from 'App/constants'; import { Icon } from 'UI'; import stl from './countryFlag.module.css'; -const CountryFlag = ({ country = '', className = '', style = {}, label = false, width = 22, height = 15}) => { +const CountryFlag = ({ city = '', country = '', className = '', style = {}, label = false, width = 22, height = 15}) => { const knownCountry = !!country && country !== 'UN'; const countryFlag = knownCountry ? country.toLowerCase() : ''; const countryName = knownCountry ? countries[ country ] : 'Unknown Country'; @@ -19,6 +19,7 @@ const CountryFlag = ({ country = '', className = '', style = {}, label = false,
Unknown Country
)} + { city &&
{ city },
} { knownCountry && label &&
{ countryName }
}
); diff --git a/frontend/app/mstore/types/session.ts b/frontend/app/mstore/types/session.ts index d0984593e..3c4212514 100644 --- a/frontend/app/mstore/types/session.ts +++ b/frontend/app/mstore/types/session.ts @@ -25,6 +25,7 @@ export default class Session { userId: string = "" userDeviceType: string = "" userCountry: string = "" + userCity: string = "" eventsCount: number = 0 userNumericHash: number = 0 userDisplayName: string = "" @@ -55,6 +56,7 @@ export default class Session { this.userDeviceType = session.userDeviceType this.eventsCount = session.eventsCount this.userCountry = session.userCountry + this.userCity = session.userCity this.userNumericHash = hashString(session.userId || session.userAnonymousId || session.userUuid || session.userID || session.userUUID || "") this.userDisplayName = session.userId || session.userAnonymousId || session.userID || 'Anonymous User' }) diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts index 879dc985e..e21ea66ec 100644 --- a/frontend/app/types/filter/filterType.ts +++ b/frontend/app/types/filter/filterType.ts @@ -32,6 +32,8 @@ export const setQueryParamKeyFromFilterkey = (filterKey: string) => { return 'revid'; case FilterKey.USER_COUNTRY: return 'country'; + case FilterKey.USER_CITY: + return 'city'; case FilterKey.REFERRER: return 'ref'; case FilterKey.CUSTOM: @@ -95,6 +97,9 @@ export const getFilterKeyTypeByKey = (key: string) => { case 'country': case 'userCountry': return FilterKey.USER_COUNTRY; + case 'city': + case 'userCity': + return FilterKey.USER_CITY; case 'ref': case 'referrer': return FilterKey.REFERRER; @@ -193,6 +198,7 @@ export enum FilterKey { DURATION = 'duration', REFERRER = 'referrer', USER_COUNTRY = 'userCountry', + USER_CITY = 'userCity', JOURNEY = 'journey', REQUEST = 'request', GRAPHQL = 'graphql', diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 0fcc8e668..872756e56 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -39,6 +39,7 @@ export const filters = [ { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/arrow-return-right' }, { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), icon: 'filters/duration' }, { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.USER, label: 'User Country', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', options: countryOptions }, + { key: FilterKey.USER_CITY, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User City', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', options: countryOptions }, // { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' }, { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User Id', placeholder: 'E.g. Alex, or alex@domain.com, or EMP123', operator: 'is', operatorOptions: filterOptions.stringOperators.concat([{ label: 'is undefined', value: 'isUndefined'}]), icon: 'filters/userid' }, { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' }, diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index fcf943aff..f8d8c6dad 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -74,6 +74,7 @@ export interface ISession { userBrowser: string; userBrowserVersion: string; userCountry: string; + userCity: string; userDevice: string; userDeviceType: string; isMobile: boolean; @@ -160,6 +161,7 @@ export default class Session { userBrowser: ISession['userBrowser']; userBrowserVersion: ISession['userBrowserVersion']; userCountry: ISession['userCountry']; + userCity: ISession['userCity']; userDevice: ISession['userDevice']; userDeviceType: ISession['userDeviceType']; isMobile: ISession['isMobile'];