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

Merge remote-tracking branch 'origin/ui-city-filter' into dev

Browse source
This commit is contained in:
Taha Yassine Kraiem 2023-06-02 16:51:59 +02:00
commit 0fb8177ce0
9 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
api/chalicelib/core/autocomplete.py
View file

@ -16,6 +16,8 @@ def __get_autocomplete_table(value, project_id):
schemas.FilterType.user_os,
schemas.EventType.custom,
schemas.FilterType.user_country,
schemas.FilterType.user_city,
schemas.FilterType.user_state,
schemas.EventType.location,
schemas.EventType.input]
autocomplete_events.sort()

4
api/schemas.py
View file

@ -429,6 +429,8 @@ class FilterType(str, Enum):
user_browser = "userBrowser"
user_device = "userDevice"
user_country = "userCountry"
user_city = "userCity"
user_state = "userState"
user_id = "userId"
user_anonymous_id = "userAnonymousId"
referrer = "referrer"
@ -980,6 +982,8 @@ class MetricOfTable(str, Enum):
user_browser = FilterType.user_browser.value
user_device = FilterType.user_device.value
user_country = FilterType.user_country.value
user_city = FilterType.user_city.value
user_state = FilterType.user_state.value
user_id = FilterType.user_id.value
issues = FilterType.issue.value
visited_url = "location"

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