feat(ui) - assist filters wip
This commit is contained in:
Shekar Siri
parent
e5963fbeef
commit
2fe2406d0c
10 changed files with 193 additions and 214 deletions
|
|
@ -14,15 +14,15 @@ const COUNTRY = 'country';
|
|||
const LOCATION = 'location';
|
||||
|
||||
const platformOptions = [
|
||||
{ 'key': PLATFORM, text: 'Desktop', value: 1},
|
||||
{ 'key': PLATFORM, text: 'Tablet', value: 2 },
|
||||
{ 'key': PLATFORM, text: 'Tablet Landscape', value: 3 },
|
||||
{ 'key': PLATFORM, text: 'Mobile', value: 4 },
|
||||
{ 'key': PLATFORM, text: 'Mobile Landscape', value: 5 }
|
||||
{ 'key': PLATFORM, label: 'Desktop', value: 1},
|
||||
{ 'key': PLATFORM, label: 'Tablet', value: 2 },
|
||||
{ 'key': PLATFORM, label: 'Tablet Landscape', value: 3 },
|
||||
{ 'key': PLATFORM, label: 'Mobile', value: 4 },
|
||||
{ 'key': PLATFORM, label: 'Mobile Landscape', value: 5 }
|
||||
];
|
||||
|
||||
const countryOptions = Object.keys(countries).map(c => ({key: COUNTRY, text: countries[c], value: c}));
|
||||
const locationOptions = Object.keys(regionLabels).map(k => ({ key: LOCATION, text: regionLabels[k], value: k}));
|
||||
const countryOptions = Object.keys(countries).map(c => ({key: COUNTRY, label: countries[c], value: c}));
|
||||
const locationOptions = Object.keys(regionLabels).map(k => ({ key: LOCATION, label: regionLabels[k], value: k}));
|
||||
|
||||
const _filterKeys = [
|
||||
{ key: 'userId', name: 'User ID', icon: 'user-alt', placeholder: 'Search for User ID' },
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ function FilterModal(props: Props) {
|
|||
} = props;
|
||||
const hasSearchQuery = searchQuery && searchQuery.length > 0;
|
||||
const showSearchList = isMainSearch && searchQuery.length > 0;
|
||||
console.log('filters', props.filters)
|
||||
|
||||
const onFilterSearchClick = (filter) => {
|
||||
const _filter = filtersMap[filter.type];
|
||||
|
|
@ -123,7 +124,7 @@ function FilterModal(props: Props) {
|
|||
}
|
||||
|
||||
export default connect(state => ({
|
||||
filters: state.getIn([ 'search', 'filterList' ]),
|
||||
// filters: state.getIn([ 'search', 'filterListLive' ]),
|
||||
filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
|
||||
metaOptions: state.getIn([ 'customFields', 'list' ]),
|
||||
fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import FilterModal from '../FilterModal';
|
||||
import LiveFilterModal from '../LiveFilterModal';
|
||||
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
||||
import { Icon } from 'UI';
|
||||
import { connect } from 'react-redux';
|
||||
|
|
@ -10,6 +9,8 @@ const ASSIST_ROUTE = assistRoute();
|
|||
|
||||
interface Props {
|
||||
filter?: any; // event/filter
|
||||
filterList: any;
|
||||
filterListLive: any;
|
||||
onFilterClick: (filter) => void;
|
||||
children?: any;
|
||||
isLive?: boolean;
|
||||
|
|
@ -43,14 +44,15 @@ function FilterSelection(props: Props) {
|
|||
</OutsideClickDetectingDiv>
|
||||
{showModal && (
|
||||
<div className="absolute left-0 border shadow rounded bg-white z-50">
|
||||
{/* { isRoute(ASSIST_ROUTE, window.location.pathname) ? <LiveFilterModal onFilterClick={onFilterClick} /> : <FilterModal onFilterClick={onFilterClick} /> } */}
|
||||
<FilterModal onFilterClick={onFilterClick} />
|
||||
<FilterModal onFilterClick={onFilterClick} filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList } />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(state => ({
|
||||
export default connect((state: any) => ({
|
||||
filters: state.getIn([ 'search', 'filterList' ]),
|
||||
liveFilters: state.getIn([ 'search', 'filterListLive' ]),
|
||||
isLive: state.getIn([ 'sessions', 'activeTab' ]).type === 'live',
|
||||
}), { })(FilterSelection);
|
||||
|
|
@ -2,14 +2,15 @@ import React, { useState } from 'react';
|
|||
import { connect } from 'react-redux';
|
||||
import { Input } from 'UI';
|
||||
import FilterModal from 'Shared/Filters/FilterModal';
|
||||
// import { fetchFilterSearch } from 'Duck/search';
|
||||
import { debounce } from 'App/utils';
|
||||
import { edit as editFilter, addFilterByKeyAndValue } from 'Duck/search';
|
||||
import { assist as assistRoute, isRoute } from "App/routes";
|
||||
const ASSIST_ROUTE = assistRoute();
|
||||
|
||||
interface Props {
|
||||
fetchFilterSearch: (query: any) => void;
|
||||
// editFilter: typeof editFilter;
|
||||
addFilterByKeyAndValue: (key: string, value: string) => void;
|
||||
filterList: any;
|
||||
filterListLive: any;
|
||||
}
|
||||
function SessionSearchField(props: Props) {
|
||||
const debounceFetchFilterSearch = React.useCallback(debounce(props.fetchFilterSearch, 1000), []);
|
||||
|
|
@ -44,6 +45,7 @@ function SessionSearchField(props: Props) {
|
|||
searchQuery={searchQuery}
|
||||
isMainSearch={true}
|
||||
onFilterClick={onAddFilter}
|
||||
filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -51,4 +53,7 @@ function SessionSearchField(props: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
export default connect(null, { })(SessionSearchField);
|
||||
export default connect((state: any) => ({
|
||||
filterList: state.getIn([ 'search', 'filterList' ]),
|
||||
filterListLive: state.getIn([ 'search', 'filterListLive' ]),
|
||||
}), { })(SessionSearchField);
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
export default [
|
||||
{ value: 'performance.dom_content_loaded.average', text: 'performance.dom_content_loaded.average', unit: 'ms' },
|
||||
{ value: 'performance.first_meaningful_paint.average', text: 'performance.first_meaningful_paint.average', unit: 'ms' },
|
||||
{ value: 'performance.page_load_time.average', text: 'performance.page_load_time.average', unit: 'ms' },
|
||||
{ value: 'performance.dom_build_time.average', text: 'performance.dom_build_time.average', unit: 'ms' },
|
||||
{ value: 'performance.speed_index.average', text: 'performance.speed_index.average', unit: 'ms' },
|
||||
{ value: 'performance.page_response_time.average', text: 'performance.page_response_time.average', unit: 'ms' },
|
||||
{ value: 'performance.ttfb.average', text: 'performance.ttfb.average', unit: 'ms' },
|
||||
{ value: 'performance.time_to_render.average', text: 'performance.time_to_render.average', unit: 'ms' },
|
||||
{ value: 'performance.image_load_time.average', text: 'performance.image_load_time.average', unit: 'ms' },
|
||||
{ value: 'performance.request_load_time.average', text: 'performance.request_load_time.average', unit: 'ms' },
|
||||
{ value: 'resources.load_time.average', text: 'resources.load_time.average', unit: 'ms' },
|
||||
{ value: 'resources.missing.count', text: 'resources.missing.count', unit: '' },
|
||||
{ value: 'errors.4xx_5xx.count', text: 'errors.4xx_5xx.count', unit: '' },
|
||||
{ value: 'errors.4xx.count', text: 'errors.4xx.count', unit: '' },
|
||||
{ value: 'errors.5xx.count', text: 'errors.5xx.count', unit: '' },
|
||||
{ value: 'errors.javascript.impacted_sessions.count', text: 'errors.javascript.impacted_sessions.count', unit: '' },
|
||||
{ value: 'performance.crashes.count', text: 'performance.crashes.count', unit: '' },
|
||||
{ value: 'errors.javascript.count', text: 'errors.javascript.count', unit: '' },
|
||||
{ value: 'errors.backend.count', text: 'errors.backend.count', unit: '' },
|
||||
{ value: 'performance.dom_content_loaded.average', label: 'performance.dom_content_loaded.average', unit: 'ms' },
|
||||
{ value: 'performance.first_meaningful_paint.average', label: 'performance.first_meaningful_paint.average', unit: 'ms' },
|
||||
{ value: 'performance.page_load_time.average', label: 'performance.page_load_time.average', unit: 'ms' },
|
||||
{ value: 'performance.dom_build_time.average', label: 'performance.dom_build_time.average', unit: 'ms' },
|
||||
{ value: 'performance.speed_index.average', label: 'performance.speed_index.average', unit: 'ms' },
|
||||
{ value: 'performance.page_response_time.average', label: 'performance.page_response_time.average', unit: 'ms' },
|
||||
{ value: 'performance.ttfb.average', label: 'performance.ttfb.average', unit: 'ms' },
|
||||
{ value: 'performance.time_to_render.average', label: 'performance.time_to_render.average', unit: 'ms' },
|
||||
{ value: 'performance.image_load_time.average', label: 'performance.image_load_time.average', unit: 'ms' },
|
||||
{ value: 'performance.request_load_time.average', label: 'performance.request_load_time.average', unit: 'ms' },
|
||||
{ value: 'resources.load_time.average', label: 'resources.load_time.average', unit: 'ms' },
|
||||
{ value: 'resources.missing.count', label: 'resources.missing.count', unit: '' },
|
||||
{ value: 'errors.4xx_5xx.count', label: 'errors.4xx_5xx.count', unit: '' },
|
||||
{ value: 'errors.4xx.count', label: 'errors.4xx.count', unit: '' },
|
||||
{ value: 'errors.5xx.count', label: 'errors.5xx.count', unit: '' },
|
||||
{ value: 'errors.javascript.impacted_sessions.count', label: 'errors.javascript.impacted_sessions.count', unit: '' },
|
||||
{ value: 'performance.crashes.count', label: 'performance.crashes.count', unit: '' },
|
||||
{ value: 'errors.javascript.count', label: 'errors.javascript.count', unit: '' },
|
||||
{ value: 'errors.backend.count', label: 'errors.backend.count', unit: '' },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
import { FilterKey, IssueType } from 'Types/filter/filterType';
|
||||
// TODO remove text property from options
|
||||
export const options = [
|
||||
{ key: 'on', text: 'on', label: 'on', value: 'on' },
|
||||
{ key: 'notOn', text: 'not on', label: 'not on', value: 'notOn' },
|
||||
{ key: 'onAny', text: 'on any', label: 'on any', value: 'onAny' },
|
||||
{ key: 'is', text: 'is', label: 'is', value: 'is' },
|
||||
{ key: 'isAny', text: 'is any', label: 'is any', value: 'isAny' },
|
||||
{ key: 'inAnyPage', text: 'in any page', label: 'in any page', value: 'isAny' },
|
||||
{ key: 'isNot', text: 'is not', label: 'is not', value: 'isNot' },
|
||||
{ key: 'startsWith', text: 'starts with', label: 'starts with', value: 'startsWith' },
|
||||
{ key: 'endsWith', text: 'ends with', label: 'ends with', value: 'endsWith' },
|
||||
{ key: 'contains', text: 'contains', label: 'contains', value: 'contains' },
|
||||
{ key: 'notContains', text: 'not contains', label: 'not contains', value: 'notContains' },
|
||||
{ key: 'hasAnyValue', text: 'has any value', label: 'has any value', value: 'hasAnyValue' },
|
||||
{ key: 'hasNoValue', text: 'has no value', label: 'has no value', value: 'hasNoValue' },
|
||||
{ key: 'isSignedUp', text: 'is signed up', label: 'is signed up', value: 'isSignedUp' },
|
||||
{ key: 'notSignedUp', text: 'not signed up', label: 'not signed up', value: 'notSignedUp' },
|
||||
{ key: 'before', text: 'before', label: 'before', value: 'before' },
|
||||
{ key: 'after', text: 'after', label: 'after', value: 'after' },
|
||||
{ key: 'inRage', text: 'in rage', label: 'in rage', value: 'inRage' },
|
||||
{ key: 'notInRage', text: 'not in rage', label: 'not in rage', value: 'notInRage' },
|
||||
{ key: 'withinLast', text: 'within last', label: 'within last', value: 'withinLast' },
|
||||
{ key: 'notWithinLast', text: 'not within last', label: 'not within last', value: 'notWithinLast' },
|
||||
{ key: 'greaterThan', text: 'greater than', label: 'greater than', value: 'greaterThan' },
|
||||
{ key: 'lessThan', text: 'less than', label: 'less than', value: 'lessThan' },
|
||||
{ key: 'equal', text: 'equal', label: 'equal', value: 'equal' },
|
||||
{ key: 'not equal', text: 'not equal', label: 'not equal', value: 'not equal' },
|
||||
{ key: 'onSelector', text: 'on selector', label: 'on selector', value: 'onSelector' },
|
||||
{ key: 'onText', text: 'on text', label: 'on text', value: 'onText' },
|
||||
{ key: 'onComponent', text: 'on component', label: 'on component', value: 'onComponent' },
|
||||
{ key: 'on', label: 'on', value: 'on' },
|
||||
{ key: 'notOn', label: 'not on', value: 'notOn' },
|
||||
{ key: 'onAny', label: 'on any', value: 'onAny' },
|
||||
{ key: 'is', label: 'is', value: 'is' },
|
||||
{ key: 'isAny', label: 'is any', value: 'isAny' },
|
||||
{ key: 'inAnyPage', label: 'in any page', value: 'isAny' },
|
||||
{ key: 'isNot', label: 'is not', value: 'isNot' },
|
||||
{ key: 'startsWith', label: 'starts with', value: 'startsWith' },
|
||||
{ key: 'endsWith', label: 'ends with', value: 'endsWith' },
|
||||
{ key: 'contains', label: 'contains', value: 'contains' },
|
||||
{ key: 'notContains', label: 'not contains', value: 'notContains' },
|
||||
{ key: 'hasAnyValue', label: 'has any value', value: 'hasAnyValue' },
|
||||
{ key: 'hasNoValue', label: 'has no value', value: 'hasNoValue' },
|
||||
{ key: 'isSignedUp', label: 'is signed up', value: 'isSignedUp' },
|
||||
{ key: 'notSignedUp', label: 'not signed up', value: 'notSignedUp' },
|
||||
{ key: 'before', label: 'before', value: 'before' },
|
||||
{ key: 'after', label: 'after', value: 'after' },
|
||||
{ key: 'inRage', label: 'in rage', value: 'inRage' },
|
||||
{ key: 'notInRage', label: 'not in rage', value: 'notInRage' },
|
||||
{ key: 'withinLast', label: 'within last', value: 'withinLast' },
|
||||
{ key: 'notWithinLast', label: 'not within last', value: 'notWithinLast' },
|
||||
{ key: 'greaterThan', label: 'greater than', value: 'greaterThan' },
|
||||
{ key: 'lessThan', label: 'less than', value: 'lessThan' },
|
||||
{ key: 'equal', label: 'equal', value: 'equal' },
|
||||
{ key: 'not equal', label: 'not equal', value: 'not equal' },
|
||||
{ key: 'onSelector', label: 'on selector', value: 'onSelector' },
|
||||
{ key: 'onText', label: 'on text', value: 'onText' },
|
||||
{ key: 'onComponent', label: 'on component', value: 'onComponent' },
|
||||
];
|
||||
|
||||
const filterKeys = ['is', 'isNot'];
|
||||
|
|
@ -47,21 +47,21 @@ export const stringOperators = options.filter(({key}) => stringFilterKeys.includ
|
|||
export const stringOperatorsPerformance = options.filter(({key}) => stringFilterKeysPerformance.includes(key));
|
||||
export const targetOperators = options.filter(({key}) => targetFilterKeys.includes(key));
|
||||
export const booleanOperators = [
|
||||
{ key: 'true', text: 'true', label: 'true', value: 'true' },
|
||||
{ key: 'false', text: 'false', label: 'false', value: 'false' },
|
||||
{ key: 'true', label: 'true', value: 'true' },
|
||||
{ key: 'false', label: 'false', value: 'false' },
|
||||
]
|
||||
|
||||
export const customOperators = [
|
||||
{ key: '=', text: '=', label: '=', value: '=' },
|
||||
{ key: '<', text: '<', label: '<', value: '<' },
|
||||
{ key: '>', text: '>', label: '>', value: '>' },
|
||||
{ key: '<=', text: '<=', label: '<=', value: '<=' },
|
||||
{ key: '>=', text: '>=', label: '>=', value: '>=' },
|
||||
{ key: '=', label: '=', value: '=' },
|
||||
{ key: '<', label: '<', value: '<' },
|
||||
{ key: '>', label: '>', value: '>' },
|
||||
{ key: '<=', label: '<=', value: '<=' },
|
||||
{ key: '>=', label: '>=', value: '>=' },
|
||||
]
|
||||
|
||||
export const metricTypes = [
|
||||
{ text: 'Timeseries', label: 'Timeseries', value: 'timeseries' },
|
||||
{ text: 'Table', label: 'Table', value: 'table' },
|
||||
{ label: 'Timeseries', value: 'timeseries' },
|
||||
{ label: 'Table', value: 'table' },
|
||||
{ label: 'Funnel', value: 'funnel' },
|
||||
// { label: 'Errors', value: 'errors' },
|
||||
// { label: 'Sessions', value: 'sessions' },
|
||||
|
|
@ -77,42 +77,42 @@ export const tableColumnName = {
|
|||
}
|
||||
|
||||
export const metricOf = [
|
||||
{ text: 'Session Count', label: 'Session Count', value: 'sessionCount', type: 'timeseries' },
|
||||
{ text: 'Users', label: 'Users', value: FilterKey.USERID, type: 'table' },
|
||||
{ text: 'Sessions', label: 'Sessions', value: FilterKey.SESSIONS, type: 'table' },
|
||||
{ text: 'JS Errors', label: 'JS Errors', value: FilterKey.ERRORS, type: 'table' },
|
||||
{ text: 'Issues', label: 'Issues', value: FilterKey.ISSUE, type: 'table' },
|
||||
{ text: 'Browsers', label: 'Browsers', value: FilterKey.USER_BROWSER, type: 'table' },
|
||||
{ text: 'Devices', label: 'Devices', value: FilterKey.USER_DEVICE, type: 'table' },
|
||||
{ text: 'Countries', label: 'Countries', value: FilterKey.USER_COUNTRY, type: 'table' },
|
||||
{ text: 'URLs', label: 'URLs', value: FilterKey.LOCATION, type: 'table' },
|
||||
{ label: 'Session Count', value: 'sessionCount', type: 'timeseries' },
|
||||
{ label: 'Users', value: FilterKey.USERID, type: 'table' },
|
||||
{ label: 'Sessions', value: FilterKey.SESSIONS, type: 'table' },
|
||||
{ label: 'JS Errors', value: FilterKey.ERRORS, type: 'table' },
|
||||
{ label: 'Issues', value: FilterKey.ISSUE, type: 'table' },
|
||||
{ label: 'Browsers', value: FilterKey.USER_BROWSER, type: 'table' },
|
||||
{ label: 'Devices', value: FilterKey.USER_DEVICE, type: 'table' },
|
||||
{ label: 'Countries', value: FilterKey.USER_COUNTRY, type: 'table' },
|
||||
{ label: 'URLs', value: FilterKey.LOCATION, type: 'table' },
|
||||
]
|
||||
|
||||
export const methodOptions = [
|
||||
{ text: 'GET', label: 'GET', value: 'GET' },
|
||||
{ text: 'POST', label: 'POST', value: 'POST' },
|
||||
{ text: 'PUT', label: 'PUT', value: 'PUT' },
|
||||
{ text: 'DELETE', label: 'DELETE', value: 'DELETE' },
|
||||
{ text: 'PATCH', label: 'PATCH', value: 'PATCH' },
|
||||
{ text: 'HEAD', label: 'HEAD', value: 'HEAD' },
|
||||
{ text: 'OPTIONS', label: 'OPTIONS', value: 'OPTIONS' },
|
||||
{ text: 'TRACE', label: 'TRACE', value: 'TRACE' },
|
||||
{ text: 'CONNECT', label: 'CONNECT', value: 'CONNECT' },
|
||||
{ label: 'GET', value: 'GET' },
|
||||
{ label: 'POST', value: 'POST' },
|
||||
{ label: 'PUT', value: 'PUT' },
|
||||
{ label: 'DELETE', value: 'DELETE' },
|
||||
{ label: 'PATCH', value: 'PATCH' },
|
||||
{ label: 'HEAD', value: 'HEAD' },
|
||||
{ label: 'OPTIONS', value: 'OPTIONS' },
|
||||
{ label: 'TRACE', value: 'TRACE' },
|
||||
{ label: 'CONNECT', value: 'CONNECT' },
|
||||
]
|
||||
|
||||
export const issueOptions = [
|
||||
{ text: 'Click Rage', label: 'Click Rage', value: IssueType.CLICK_RAGE },
|
||||
{ text: 'Dead Click', label: 'Dead Click', value: IssueType.DEAD_CLICK },
|
||||
{ text: 'Excessive Scrolling', label: 'Excessive Scrolling', value: IssueType.EXCESSIVE_SCROLLING },
|
||||
{ text: 'Bad Request', label: 'Bad Request', value: IssueType.BAD_REQUEST },
|
||||
{ text: 'Missing Resource', label: 'Missing Resource', value: IssueType.MISSING_RESOURCE },
|
||||
{ text: 'Memory', label: 'Memory', value: IssueType.MEMORY },
|
||||
{ text: 'CPU', label: 'CPU', value: IssueType.CPU },
|
||||
{ text: 'Slow Resource', label: 'Slow Resource', value: IssueType.SLOW_RESOURCE },
|
||||
{ text: 'Slow Page Load', label: 'Slow Page Load', value: IssueType.SLOW_PAGE_LOAD },
|
||||
{ text: 'Crash', label: 'Crash', value: IssueType.CRASH },
|
||||
{ text: 'Custom', label: 'Custom', value: IssueType.CUSTOM },
|
||||
{ text: 'Error', label: 'Error', value: IssueType.JS_EXCEPTION },
|
||||
{ label: 'Click Rage', value: IssueType.CLICK_RAGE },
|
||||
{ label: 'Dead Click', value: IssueType.DEAD_CLICK },
|
||||
{ label: 'Excessive Scrolling', value: IssueType.EXCESSIVE_SCROLLING },
|
||||
{ label: 'Bad Request', value: IssueType.BAD_REQUEST },
|
||||
{ label: 'Missing Resource', value: IssueType.MISSING_RESOURCE },
|
||||
{ label: 'Memory', value: IssueType.MEMORY },
|
||||
{ label: 'CPU', value: IssueType.CPU },
|
||||
{ label: 'Slow Resource', value: IssueType.SLOW_RESOURCE },
|
||||
{ label: 'Slow Page Load', value: IssueType.SLOW_PAGE_LOAD },
|
||||
{ label: 'Crash', value: IssueType.CRASH },
|
||||
{ label: 'Custom', value: IssueType.CUSTOM },
|
||||
{ label: 'Error', value: IssueType.JS_EXCEPTION },
|
||||
]
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default [
|
||||
{ value: 'desktop', text: 'Desktop' },
|
||||
{ value: 'mobile', text: 'Mobile' },
|
||||
{ value: 'tablet', text: 'Tablet' },
|
||||
{ value: 'desktop', label: 'Desktop' },
|
||||
{ value: 'mobile', label: 'Mobile' },
|
||||
{ value: 'tablet', label: 'Tablet' },
|
||||
]
|
||||
|
|
@ -1,49 +1,22 @@
|
|||
export const MINUTES = [
|
||||
{ value: 5, text: '5 Minutes' },
|
||||
{ value: 15, text: '15 Minutes' },
|
||||
{ value: 30, text: '30 Minutes' },
|
||||
{ value: 60, text: '60 Minutes' },
|
||||
{ value: 5, label: '5 Minutes' },
|
||||
{ value: 15, label: '15 Minutes' },
|
||||
{ value: 30, label: '30 Minutes' },
|
||||
{ value: 60, label: '60 Minutes' },
|
||||
];
|
||||
|
||||
export const HOURS = [ ...Array(24).keys() ].map(i => ({ value: i, text: `${ i > 9 ? '' : '0' }${ i }:00` }));
|
||||
export const HOURS = [ ...Array(24).keys() ].map(i => ({ value: i, label: `${ i > 9 ? '' : '0' }${ i }:00` }));
|
||||
|
||||
export const DAYS = [
|
||||
{
|
||||
value: -2,
|
||||
text: 'Every',
|
||||
},
|
||||
{
|
||||
value: -1,
|
||||
text: 'Everyday',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
text: 'Sunday',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
text: 'Monday',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: 'Tuesday',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: 'Wednesday',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
text: 'Thursday',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
text: 'Friday',
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
text: 'Saturday',
|
||||
},
|
||||
{ value: -2, label: 'Every', },
|
||||
{ value: -1, label: 'Everyday', },
|
||||
{ value: 6, label: 'Sunday', },
|
||||
{ value: 0, label: 'Monday', },
|
||||
{ value: 1, label: 'Tuesday', },
|
||||
{ value: 2, label: 'Wednesday', },
|
||||
{ value: 3, label: 'Thursday', },
|
||||
{ value: 4, label: 'Friday', },
|
||||
{ value: 5, label: 'Saturday', },
|
||||
];
|
||||
|
||||
export const EMAIL = 'email';
|
||||
|
|
@ -51,16 +24,7 @@ export const SLACK = 'slack';
|
|||
export const WEBHOOK = 'webhook';
|
||||
|
||||
export const CHANNEL = [
|
||||
{
|
||||
value: EMAIL,
|
||||
text: 'Email'
|
||||
},
|
||||
{
|
||||
value: SLACK,
|
||||
text: 'Slack'
|
||||
},
|
||||
{
|
||||
value: WEBHOOK,
|
||||
text: 'Webhook'
|
||||
}
|
||||
{ value: EMAIL, label: 'Email' },
|
||||
{ value: SLACK, label: 'Slack' },
|
||||
{ value: WEBHOOK, label: 'Webhook' },
|
||||
]
|
||||
|
|
@ -47,7 +47,7 @@ const updateInstance = (state, instance) => state.getIn([ "savedSearch", savedSe
|
|||
|
||||
const initialState = Map({
|
||||
filterList: generateFilterOptions(filtersMap),
|
||||
filterListLive: generateLiveFilterOptions(liveFiltersMap),
|
||||
filterListLive: generateFilterOptions(liveFiltersMap),
|
||||
list: List(),
|
||||
alertMetricId: null,
|
||||
instance: new Filter({ filters: [] }),
|
||||
|
|
@ -63,7 +63,7 @@ function reducer(state = initialState, action = {}) {
|
|||
switch (action.type) {
|
||||
case REFRESH_FILTER_OPTIONS:
|
||||
return state.set('filterList', generateFilterOptions(filtersMap))
|
||||
.set('filterListLive', generateLiveFilterOptions(liveFiltersMap));
|
||||
.set('filterListLive', generateFilterOptions(liveFiltersMap));
|
||||
case EDIT:
|
||||
return state.mergeIn(['instance'], action.instance).set('currentPage', 1);
|
||||
case APPLY:
|
||||
|
|
|
|||
|
|
@ -3,67 +3,74 @@ import { FilterType, FilterKey, FilterCategory } from './filterType'
|
|||
import filterOptions, { countries, platformOptions } from 'App/constants';
|
||||
import { capitalize } from 'App/utils';
|
||||
|
||||
const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
|
||||
const countryOptions = Object.keys(countries).map(i => ({ label: countries[i], value: i }));
|
||||
const containsFilters = [{ key: 'contains', label: 'contains', text: 'contains', value: 'contains' }]
|
||||
|
||||
export const metaFilter = { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata' };
|
||||
export const filtersMap = {
|
||||
// EVENTS
|
||||
[FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators, icon: 'filters/click', isEvent: true },
|
||||
[FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Input', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/input', isEvent: true },
|
||||
[FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Path', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/location', isEvent: true },
|
||||
[FilterKey.CUSTOM]: { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Custom Events', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/custom', isEvent: true },
|
||||
// [FilterKey.REQUEST]: { key: FilterKey.REQUEST, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Fetch', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', isEvent: true },
|
||||
[FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.JAVASCRIPT, operator: 'is', label: 'Network Request', filters: [
|
||||
{ key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions },
|
||||
{ key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration (ms)', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
], icon: 'filters/fetch', isEvent: true },
|
||||
[FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.SUB_FILTERS, category: FilterCategory.JAVASCRIPT, label: 'GraphQL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/graphql', isEvent: true, filters: [
|
||||
{ key: FilterKey.GRAPHQL_NAME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with name', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.GRAPHQL_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions },
|
||||
{ key: FilterKey.GRAPHQL_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.GRAPHQL_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
]},
|
||||
[FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'StateAction', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/state-action', isEvent: true },
|
||||
[FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/error', isEvent: true },
|
||||
// [FilterKey.METADATA]: { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true },
|
||||
export const filters = [
|
||||
{ key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators, icon: 'filters/click', isEvent: true },
|
||||
{ key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Input', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/input', isEvent: true },
|
||||
{ key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Path', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/location', isEvent: true },
|
||||
{ key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Custom Events', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/custom', isEvent: true },
|
||||
{ key: FilterKey.REQUEST, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Fetch', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', isEvent: true },
|
||||
{ key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, category: FilterCategory.JAVASCRIPT, operator: 'is', label: 'Network Request', filters: [
|
||||
{ key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with URL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with status code', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions },
|
||||
{ key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'with duration (ms)', operator: '=', operatorOptions: filterOptions.customOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
], icon: 'filters/fetch', isEvent: true },
|
||||
{ key: FilterKey.GRAPHQL, type: FilterType.SUB_FILTERS, category: FilterCategory.JAVASCRIPT, label: 'GraphQL', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/graphql', isEvent: true, filters: [
|
||||
{ key: FilterKey.GRAPHQL_NAME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'with name', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.GRAPHQL_METHOD, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.PERFORMANCE, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch', options: filterOptions.methodOptions },
|
||||
{ key: FilterKey.GRAPHQL_REQUEST_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
{ key: FilterKey.GRAPHQL_RESPONSE_BODY, type: FilterType.STRING, category: FilterCategory.PERFORMANCE, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/fetch' },
|
||||
]},
|
||||
{ key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'StateAction', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/state-action', isEvent: true },
|
||||
{ key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/error', isEvent: true },
|
||||
{ key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/metadata', isEvent: true },
|
||||
|
||||
// FILTERS
|
||||
{ key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' },
|
||||
{ key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Browser', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/browser' },
|
||||
{ key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Device', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/device' },
|
||||
{ key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.GEAR, label: 'Platform', operator: 'is', operatorOptions: filterOptions.baseOperators, icon: 'filters/platform', options: platformOptions },
|
||||
{ key: FilterKey.REVID, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'Version ID', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'collection' },
|
||||
{ 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.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', 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' },
|
||||
|
||||
// PERFORMANCE
|
||||
{ key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
{ key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
{ key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/ttfb', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
{ key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/cpu-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
{ key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/memory-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
{ key: FilterKey.FETCH_FAILED, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Failed Request', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, icon: 'filters/fetch-failed', isEvent: true },
|
||||
{ key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/click', options: filterOptions.issueOptions },
|
||||
];
|
||||
|
||||
export const filtersMap = filters.reduce((acc, filter) => {
|
||||
acc[filter.key] = filter;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
export const liveFiltersMap = filters.reduce((acc, filter) => {
|
||||
if (filter.category !== FilterCategory.INTERACTIONS && filter.category !== FilterCategory.JAVASCRIPT) {
|
||||
acc[filter.key] = filter;
|
||||
}
|
||||
return acc
|
||||
}, {});
|
||||
|
||||
// FILTERS
|
||||
[FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' },
|
||||
[FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Browser', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/browser' },
|
||||
[FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Device', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/device' },
|
||||
[FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.GEAR, label: 'Platform', operator: 'is', operatorOptions: filterOptions.baseOperators, icon: 'filters/platform', options: platformOptions },
|
||||
[FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'Version ID', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'collection' },
|
||||
[FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/arrow-return-right' },
|
||||
[FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), icon: 'filters/duration' },
|
||||
[FilterKey.USER_COUNTRY]: { 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 },
|
||||
// [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
|
||||
[FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User Id', operator: 'is', operatorOptions: filterOptions.stringOperators.concat([{ text: 'is undefined', value: 'isUndefined'}]), icon: 'filters/userid' },
|
||||
[FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
|
||||
|
||||
// PERFORMANCE
|
||||
[FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
[FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
[FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/ttfb', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
[FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/cpu-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
[FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/memory-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
|
||||
[FilterKey.FETCH_FAILED]: { key: FilterKey.FETCH_FAILED, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Failed Request', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, icon: 'filters/fetch-failed', isEvent: true },
|
||||
[FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/click', options: filterOptions.issueOptions },
|
||||
}
|
||||
|
||||
export const filterLabelMap = Object.keys(filtersMap).reduce((acc, key) => {
|
||||
acc[key] = filtersMap[key].label
|
||||
export const filterLabelMap = filters.reduce((acc, filter) => {
|
||||
acc[filter.key] = filter.label
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export const liveFiltersMap = {
|
||||
[FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.STRING, category: FilterCategory.USER, label: 'User Id', operator: 'contains', operatorOptions: containsFilters, icon: 'filters/userid', isLive: true },
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new filter to the filter list
|
||||
* @param {*} category
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue