From f0d5238b650368631ff9b599b846acc0437352c8 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 17 Aug 2022 14:22:54 +0200 Subject: [PATCH] feat(ui) - url search - read query params --- .../shared/SessionSearch/SessionSearch.tsx | 91 +++++++-- frontend/app/types/filter/filterType.ts | 185 ++++++++++-------- 2 files changed, 171 insertions(+), 105 deletions(-) diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx index 66bd28a1b..156c42312 100644 --- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx +++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx @@ -1,25 +1,71 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import FilterList from 'Shared/Filters/FilterList'; import FilterSelection from 'Shared/Filters/FilterSelection'; import SaveFilterButton from 'Shared/SaveFilterButton'; import { connect } from 'react-redux'; import { Button } from 'UI'; import { edit, addFilter } from 'Duck/search'; +import { withRouter } from 'react-router'; +import { clearSearch, fetchSessions, addFilterByKeyAndValue } from 'Duck/search'; +import { FilterKey, getFilterKeyTypeByKey } from 'Types/filter/filterType'; + +const allowedQueryKeys = [ + 'userOs', + 'userId', + 'userBrowser', + 'userDevice', + 'userCountry', + 'startDate', + 'endDate', + 'minDuration', + 'maxDuration', + 'referrer', + 'sort', + 'order', +]; interface Props { appliedFilter: any; edit: typeof edit; addFilter: typeof addFilter; saveRequestPayloads: boolean; + location: any; + addFilterByKeyAndValue: typeof addFilterByKeyAndValue; } function SessionSearch(props: Props) { - const { appliedFilter, saveRequestPayloads = false } = props; + const { + appliedFilter, + saveRequestPayloads = false, + location: { search }, + } = props; const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0; const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0; + useEffect(() => { + const queryParams = Object.fromEntries( + Object.entries(Object.fromEntries(new URLSearchParams(search))).filter(([key]) => + allowedQueryKeys.includes(key) + ) + ); + const entires = Object.entries(queryParams); + if (entires.length > 0) { + entires.forEach(([key, value]) => { + if (value !== '') { + const filterKey = getFilterKeyTypeByKey(key); + const valueArr = value.split('|'); + const operator = valueArr.shift(); + console.log('operator', operator, valueArr); + if (filterKey) { + props.addFilterByKeyAndValue(filterKey, valueArr, operator); + } + } + }); + } + }, []); + const onAddFilter = (filter: any) => { props.addFilter(filter); - } + }; const onUpdateFilter = (filterIndex: any, filter: any) => { const newFilters = appliedFilter.filters.map((_filter: any, i: any) => { @@ -31,10 +77,10 @@ function SessionSearch(props: Props) { }); props.edit({ - ...appliedFilter, - filters: newFilters, + ...appliedFilter, + filters: newFilters, }); - } + }; const onRemoveFilter = (filterIndex: any) => { const newFilters = appliedFilter.filters.filter((_filter: any, i: any) => { @@ -44,15 +90,15 @@ function SessionSearch(props: Props) { props.edit({ filters: newFilters, }); - } + }; const onChangeEventsOrder = (e: any, { value }: any) => { props.edit({ eventsOrder: value, }); - } + }; - return (hasEvents || hasFilters) ? ( + return hasEvents || hasFilters ? (
- + {/* */}
@@ -85,10 +129,17 @@ function SessionSearch(props: Props) {
- ) : <>; + ) : ( + <> + ); } -export default connect((state: any) => ({ - saveRequestPayloads: state.getIn(['site', 'active', 'saveRequestPayloads']), - appliedFilter: state.getIn([ 'search', 'instance' ]), -}), { edit, addFilter })(SessionSearch); +export default withRouter( + connect( + (state: any) => ({ + saveRequestPayloads: state.getIn(['site', 'active', 'saveRequestPayloads']), + appliedFilter: state.getIn(['search', 'instance']), + }), + { edit, addFilter, addFilterByKeyAndValue } + )(SessionSearch) +); diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts index 772bea55e..17c84ece3 100644 --- a/frontend/app/types/filter/filterType.ts +++ b/frontend/app/types/filter/filterType.ts @@ -1,97 +1,112 @@ export enum FilterCategory { - INTERACTIONS = "Interactions", - GEAR = "Gear", - RECORDING_ATTRIBUTES = "Recording Attributes", - JAVASCRIPT = "Javascript", - USER = "User Identification", - METADATA = "Session & User Metadata", - PERFORMANCE = "Performance", + INTERACTIONS = 'Interactions', + GEAR = 'Gear', + RECORDING_ATTRIBUTES = 'Recording Attributes', + JAVASCRIPT = 'Javascript', + USER = 'User Identification', + METADATA = 'Session & User Metadata', + PERFORMANCE = 'Performance', +} + +export const getFilterKeyTypeByKey = (key: string) => { + switch (key) { + case 'userId': + return FilterKey.USERID; + case 'userOs': + return FilterKey.USER_OS; + case 'userBrowser': + return FilterKey.USER_BROWSER; + case 'userDevice': + return FilterKey.USER_DEVICE; + case 'userCountry': + return FilterKey.USER_COUNTRY; + } }; export enum IssueType { - CLICK_RAGE = "click_rage", - DEAD_CLICK = "dead_click", - EXCESSIVE_SCROLLING = "excessive_scrolling", - BAD_REQUEST = "bad_request", - MISSING_RESOURCE = "missing_resource", - MEMORY = "memory", - CPU = "cpu", - SLOW_RESOURCE = "slow_resource", - SLOW_PAGE_LOAD = "slow_page_load", - CRASH = "crash", - CUSTOM = "custom", - JS_EXCEPTION = "js_exception", + CLICK_RAGE = 'click_rage', + DEAD_CLICK = 'dead_click', + EXCESSIVE_SCROLLING = 'excessive_scrolling', + BAD_REQUEST = 'bad_request', + MISSING_RESOURCE = 'missing_resource', + MEMORY = 'memory', + CPU = 'cpu', + SLOW_RESOURCE = 'slow_resource', + SLOW_PAGE_LOAD = 'slow_page_load', + CRASH = 'crash', + CUSTOM = 'custom', + JS_EXCEPTION = 'js_exception', } export enum FilterType { - STRING = "STRING", - ISSUE = "ISSUE", - BOOLEAN = "BOOLEAN", - NUMBER = "NUMBER", - NUMBER_MULTIPLE = "NUMBER_MULTIPLE", - DURATION = "DURATION", - MULTIPLE = "MULTIPLE", - SUB_FILTERS = "SUB_FILTERS", - COUNTRY = "COUNTRY", - DROPDOWN = "DROPDOWN", - MULTIPLE_DROPDOWN = "MULTIPLE_DROPDOWN", - AUTOCOMPLETE_LOCAL = "AUTOCOMPLETE_LOCAL", -}; + STRING = 'STRING', + ISSUE = 'ISSUE', + BOOLEAN = 'BOOLEAN', + NUMBER = 'NUMBER', + NUMBER_MULTIPLE = 'NUMBER_MULTIPLE', + DURATION = 'DURATION', + MULTIPLE = 'MULTIPLE', + SUB_FILTERS = 'SUB_FILTERS', + COUNTRY = 'COUNTRY', + DROPDOWN = 'DROPDOWN', + MULTIPLE_DROPDOWN = 'MULTIPLE_DROPDOWN', + AUTOCOMPLETE_LOCAL = 'AUTOCOMPLETE_LOCAL', +} export enum FilterKey { - ERROR = "ERROR", - MISSING_RESOURCE = "MISSING_RESOURCE", - SLOW_SESSION = "SLOW_SESSION", - CLICK_RAGE = "CLICK_RAGE", - CLICK = "CLICK", - INPUT = "INPUT", - LOCATION = "LOCATION", - VIEW = "VIEW", - CONSOLE = "CONSOLE", - METADATA = "METADATA", - CUSTOM = "CUSTOM", - URL = "URL", - USER_BROWSER = "USERBROWSER", - USER_OS = "USEROS", - USER_DEVICE = "USERDEVICE", - PLATFORM = "PLATFORM", - DURATION = "DURATION", - REFERRER = "REFERRER", - USER_COUNTRY = "USERCOUNTRY", - JOURNEY = "JOURNEY", - REQUEST = "REQUEST", - GRAPHQL = "GRAPHQL", - STATEACTION = "STATEACTION", - REVID = "REVID", - USERANONYMOUSID = "USERANONYMOUSID", - USERID = "USERID", - ISSUE = "ISSUE", - EVENTS_COUNT = "EVENTS_COUNT", - UTM_SOURCE = "UTM_SOURCE", - UTM_MEDIUM = "UTM_MEDIUM", - UTM_CAMPAIGN = "UTM_CAMPAIGN", - - DOM_COMPLETE = "DOM_COMPLETE", - LARGEST_CONTENTFUL_PAINT_TIME = "LARGEST_CONTENTFUL_PAINT_TIME", - TIME_BETWEEN_EVENTS = "TIME_BETWEEN_EVENTS", - TTFB = "TTFB", - AVG_CPU_LOAD = "AVG_CPU_LOAD", - AVG_MEMORY_USAGE = "AVG_MEMORY_USAGE", - FETCH_FAILED = "FETCH_FAILED", - - FETCH = "FETCH", - FETCH_URL = "FETCH_URL", - FETCH_STATUS_CODE = "FETCH_STATUS_CODE", - FETCH_METHOD = "FETCH_METHOD", - FETCH_DURATION = "FETCH_DURATION", - FETCH_REQUEST_BODY = "FETCH_REQUEST_BODY", - FETCH_RESPONSE_BODY = "FETCH_RESPONSE_BODY", + ERROR = 'ERROR', + MISSING_RESOURCE = 'MISSING_RESOURCE', + SLOW_SESSION = 'SLOW_SESSION', + CLICK_RAGE = 'CLICK_RAGE', + CLICK = 'CLICK', + INPUT = 'INPUT', + LOCATION = 'LOCATION', + VIEW = 'VIEW', + CONSOLE = 'CONSOLE', + METADATA = 'METADATA', + CUSTOM = 'CUSTOM', + URL = 'URL', + USER_BROWSER = 'USERBROWSER', + USER_OS = 'USEROS', + USER_DEVICE = 'USERDEVICE', + PLATFORM = 'PLATFORM', + DURATION = 'DURATION', + REFERRER = 'REFERRER', + USER_COUNTRY = 'USERCOUNTRY', + JOURNEY = 'JOURNEY', + REQUEST = 'REQUEST', + GRAPHQL = 'GRAPHQL', + STATEACTION = 'STATEACTION', + REVID = 'REVID', + USERANONYMOUSID = 'USERANONYMOUSID', + USERID = 'USERID', + ISSUE = 'ISSUE', + EVENTS_COUNT = 'EVENTS_COUNT', + UTM_SOURCE = 'UTM_SOURCE', + UTM_MEDIUM = 'UTM_MEDIUM', + UTM_CAMPAIGN = 'UTM_CAMPAIGN', - GRAPHQL_NAME = "GRAPHQL_NAME", - GRAPHQL_METHOD = "GRAPHQL_METHOD", - GRAPHQL_REQUEST_BODY = "GRAPHQL_REQUEST_BODY", - GRAPHQL_RESPONSE_BODY = "GRAPHQL_RESPONSE_BODY", + DOM_COMPLETE = 'DOM_COMPLETE', + LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME', + TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS', + TTFB = 'TTFB', + AVG_CPU_LOAD = 'AVG_CPU_LOAD', + AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE', + FETCH_FAILED = 'FETCH_FAILED', + + FETCH = 'FETCH', + FETCH_URL = 'FETCH_URL', + FETCH_STATUS_CODE = 'FETCH_STATUS_CODE', + FETCH_METHOD = 'FETCH_METHOD', + FETCH_DURATION = 'FETCH_DURATION', + FETCH_REQUEST_BODY = 'FETCH_REQUEST_BODY', + FETCH_RESPONSE_BODY = 'FETCH_RESPONSE_BODY', + + GRAPHQL_NAME = 'GRAPHQL_NAME', + GRAPHQL_METHOD = 'GRAPHQL_METHOD', + GRAPHQL_REQUEST_BODY = 'GRAPHQL_REQUEST_BODY', + GRAPHQL_RESPONSE_BODY = 'GRAPHQL_RESPONSE_BODY', SESSIONS = 'SESSIONS', - ERRORS = 'js_exception' -} \ No newline at end of file + ERRORS = 'js_exception', +}