From 2fe2406d0c3be9508cc52a7ab22c5c1fb0838600 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 15 Jun 2022 15:29:29 +0200 Subject: [PATCH] feat(ui) - assist filters wip --- .../shared/FilterDropdown/FilterDropdown.js | 14 +- .../Filters/FilterModal/FilterModal.tsx | 3 +- .../FilterSelection/FilterSelection.tsx | 10 +- .../SessionSearchField/SessionSearchField.tsx | 13 +- frontend/app/constants/alertMetrics.js | 38 ++--- frontend/app/constants/filterOptions.js | 134 +++++++++--------- frontend/app/constants/platformOptions.js | 6 +- frontend/app/constants/schedule.js | 70 +++------ frontend/app/duck/search.js | 4 +- frontend/app/types/filter/newFilter.js | 115 ++++++++------- 10 files changed, 193 insertions(+), 214 deletions(-) diff --git a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js index fa9165202..aaf0baf70 100644 --- a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js +++ b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js @@ -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' }, diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 7f0998d05..5db8bd1ab 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -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' ]), diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index c92944271..5c2e5c32b 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -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) { {showModal && (
- {/* { isRoute(ASSIST_ROUTE, window.location.pathname) ? : } */} - +
)} ); } -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); \ No newline at end of file diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx index a6285c2e0..28d1af364 100644 --- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx @@ -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 } /> )} @@ -51,4 +53,7 @@ function SessionSearchField(props: Props) { ); } -export default connect(null, { })(SessionSearchField); \ No newline at end of file +export default connect((state: any) => ({ + filterList: state.getIn([ 'search', 'filterList' ]), + filterListLive: state.getIn([ 'search', 'filterListLive' ]), +}), { })(SessionSearchField); \ No newline at end of file diff --git a/frontend/app/constants/alertMetrics.js b/frontend/app/constants/alertMetrics.js index e7f0efb30..01fc24acb 100644 --- a/frontend/app/constants/alertMetrics.js +++ b/frontend/app/constants/alertMetrics.js @@ -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: '' }, ]; diff --git a/frontend/app/constants/filterOptions.js b/frontend/app/constants/filterOptions.js index 3a7345b61..4e27d6b44 100644 --- a/frontend/app/constants/filterOptions.js +++ b/frontend/app/constants/filterOptions.js @@ -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 { diff --git a/frontend/app/constants/platformOptions.js b/frontend/app/constants/platformOptions.js index 46747ea2e..2da361a57 100644 --- a/frontend/app/constants/platformOptions.js +++ b/frontend/app/constants/platformOptions.js @@ -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' }, ] \ No newline at end of file diff --git a/frontend/app/constants/schedule.js b/frontend/app/constants/schedule.js index 1b55b8630..8e08a32a8 100644 --- a/frontend/app/constants/schedule.js +++ b/frontend/app/constants/schedule.js @@ -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' }, ] \ No newline at end of file diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index 9a4498439..a1e6485b6 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -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: diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 61c0e42bd..45d31e2f1 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -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