feat(ui) - url search - read query params
This commit is contained in:
Shekar Siri
parent
7d6d9d50ff
commit
f0d5238b65
2 changed files with 171 additions and 105 deletions
|
|
@ -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 ? (
|
||||
<div className="border bg-white rounded mt-4">
|
||||
<div className="p-5">
|
||||
<FilterList
|
||||
|
|
@ -66,17 +112,15 @@ function SessionSearch(props: Props) {
|
|||
|
||||
<div className="border-t px-5 py-1 flex items-center -mx-2">
|
||||
<div>
|
||||
<FilterSelection
|
||||
filter={undefined}
|
||||
onFilterClick={onAddFilter}
|
||||
>
|
||||
<FilterSelection filter={undefined} onFilterClick={onAddFilter}>
|
||||
{/* <IconButton primaryText label="ADD STEP" icon="plus" /> */}
|
||||
<Button
|
||||
variant="text-primary"
|
||||
className="mr-2"
|
||||
// onClick={() => setshowModal(true)}
|
||||
icon="plus">
|
||||
ADD STEP
|
||||
icon="plus"
|
||||
>
|
||||
ADD STEP
|
||||
</Button>
|
||||
</FilterSelection>
|
||||
</div>
|
||||
|
|
@ -85,10 +129,17 @@ function SessionSearch(props: Props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : <></>;
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
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)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
ERRORS = 'js_exception',
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue