jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): added user city filter and display in session list

Browse source
This commit is contained in:
Shekar Siri 2023-05-30 15:23:23 +02:00
parent b7bb800221
commit eb13801daa
7 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
View file

@ -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,
</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
{userCity && (
<span className="mr-2">{userCity},</span>
)}
<span>{countries[userCountry]}</span>
<span className="mx-1 font-bold text-xl">&#183;</span>
<span className="capitalize">

3
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -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) {
</div>
<div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
<div style={{ height: '21px' }}>
<CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
<CountryFlag city={userCity} country={userCountry} style={{ paddingTop: '4px' }} label />
</div>
<div className="color-gray-medium flex items-center py-1">
<span className="capitalize" style={{ maxWidth: '70px' }}>

3
frontend/app/components/ui/CountryFlag/CountryFlag.js
View file

@ -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,
<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
</div>
)}
{ city && <div className={ cn(stl.label, 'ml-2') }>{ city }, </div> }
{ knownCountry && label && <div className={ cn(stl.label, 'ml-1') }>{ countryName }</div> }
</div>
);

2
frontend/app/mstore/types/session.ts
View file

@ -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'
})

6
frontend/app/types/filter/filterType.ts
View file

@ -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',

1
frontend/app/types/filter/newFilter.js
View file

@ -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' },

2
frontend/app/types/session/session.ts
View file

@ -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'];