From c5441a45c8bf86fcef9b925e321ddccd2a7b305d Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 2 Dec 2024 14:34:45 +0100 Subject: [PATCH] ui: moveing and renaming filters --- .../components/WidgetChart/WidgetChart.tsx | 12 +- .../WidgetDatatable/WidgetDatatable.tsx | 3 +- .../Filters/FilterModal/FilterModal.tsx | 2 +- .../FilterSelection/FilterSelection.tsx | 5 +- frontend/app/types/filter/filterType.ts | 11 +- frontend/app/types/filter/newFilter.js | 247 +++++++----------- 6 files changed, 108 insertions(+), 172 deletions(-) diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 26b4de0f5..cd8c1c28c 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -49,7 +49,7 @@ function WidgetChart(props: Props) { rootMargin: '200px 0px', }); const { isSaved = false, metric, isTemplate } = props; - const { dashboardStore, metricStore, sessionStore } = useStore(); + const { dashboardStore, metricStore } = useStore(); const _metric: any = metricStore.instance; const period = dashboardStore.period; const drillDownPeriod = dashboardStore.drillDownPeriod; @@ -153,8 +153,9 @@ function WidgetChart(props: Props) { prevMetricRef.current = metric; const timestmaps = drillDownPeriod.toTimestamps(); const payload = isSaved - ? { ...metricParams } - : { ...params, ...timestmaps, ...metric.toJson() }; + // TODO: remove after backend adds support for more view types + ? { ...metricParams, viewType: 'lineChart' } + : { ...params, ...timestmaps, ...metric.toJson(), viewType: 'lineChart' }; debounceRequest( metric, payload, @@ -167,7 +168,8 @@ function WidgetChart(props: Props) { if (!dashboardStore.comparisonPeriod) return setCompData(null); const timestamps = dashboardStore.comparisonPeriod.toTimestamps(); - const payload = { ...params, ...timestamps, ...metric.toJson() }; + // TODO: remove after backend adds support for more view types + const payload = { ...params, ...timestamps, ...metric.toJson(), viewType: 'lineChart' }; fetchMetricChartData(metric, payload, isSaved, dashboardStore.comparisonPeriod, true); } useEffect(() => { @@ -432,7 +434,7 @@ function WidgetChart(props: Props) {
{renderChart()} {metric.metricType === TIMESERIES ? ( - + ) : null}
diff --git a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx index a7fa3f131..c90c75cd7 100644 --- a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx +++ b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx @@ -26,6 +26,7 @@ interface Props { data: { chart: any[]; namesMap: string[] }; enabledRows: string[]; setEnabledRows: (rows: string[]) => void; + defaultOpen?: boolean; } function WidgetDatatable(props: Props) { @@ -33,7 +34,7 @@ function WidgetDatatable(props: Props) { useState(initTableProps); const data = props.data; - const [showTable, setShowTable] = useState(false); + const [showTable, setShowTable] = useState(props.defaultOpen); const hasMultipleSeries = data.namesMap.length > 1; const [tableData, setTableData] = useState([]); diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx index 6351442ad..96ff1c1ff 100644 --- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx +++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx @@ -230,7 +230,7 @@ function FilterModal(props: Props) {
setCategory(key)} - className={cn('rounded px-4 py-2 hover:bg-active-blue capitalize', key === category ? 'bg-active-blue' : '')} + className={cn('rounded px-4 py-2 hover:bg-active-blue capitalize cursor-pointer', key === category ? 'bg-active-blue' : '')} > {key.toLowerCase()}
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index 37b844293..be87b59bd 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -68,9 +68,8 @@ function FilterSelection(props: Props) { }} onClick={() => setShowModal(true)} > -
- {getNewIcon(filter)} -
+
{getNewIcon(filter)}
+
{`${filter.category} .`}
{ diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js index 38ea74baa..1e60e0f8a 100644 --- a/frontend/app/types/filter/newFilter.js +++ b/frontend/app/types/filter/newFilter.js @@ -11,18 +11,19 @@ const countryOptions = Object.keys(countries).map(i => ({ label: countries[i], v const containsFilters = [{ key: 'contains', label: 'contains', text: 'contains', value: 'contains' }]; const filterOrder = { - [FilterCategory.INTERACTIONS]: 0, - [FilterCategory.TECHNICAL]: 1, - [FilterCategory.PERFORMANCE]: 2, - [FilterCategory.USER]: 3, - [FilterCategory.GEAR]: 4 + [FilterCategory.AUTOCAPTURE]: 0, + [FilterCategory.DEVTOOLS]: 1, + [FilterCategory.USER]: 2, + [FilterCategory.SESSION]: 3, + [FilterCategory.ISSUE]: 4, + [FilterCategory.METADATA]: 5 }; export const mobileFilters = [ { key: FilterKey.CLICK_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Tap', operator: 'on', operatorOptions: filterOptions.targetOperators, @@ -32,7 +33,7 @@ export const mobileFilters = [ { key: FilterKey.INPUT_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Text Input', placeholder: 'Enter input label name', operator: 'is', @@ -43,7 +44,7 @@ export const mobileFilters = [ { key: FilterKey.VIEW_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Screen', placeholder: 'Enter screen name', operator: 'is', @@ -54,7 +55,7 @@ export const mobileFilters = [ { key: FilterKey.CUSTOM_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.AUTOCAPTURE, label: 'Custom Events', placeholder: 'Enter event key', operator: 'is', @@ -65,7 +66,7 @@ export const mobileFilters = [ { key: FilterKey.ERROR_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'Error Message', placeholder: 'E.g. Uncaught SyntaxError', operator: 'is', @@ -76,7 +77,7 @@ export const mobileFilters = [ { key: FilterKey.SWIPE_MOBILE, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Swipe', operator: 'on', operatorOptions: filterOptions.targetOperators, @@ -90,7 +91,7 @@ export const filters = [ { key: FilterKey.CLICK, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetOperators.concat(clickSelectorOperators), @@ -100,7 +101,7 @@ export const filters = [ { key: FilterKey.INPUT, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Text Input', placeholder: 'Enter input label name', operator: 'is', @@ -111,7 +112,7 @@ export const filters = [ { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Visited URL', placeholder: 'Enter path', operator: 'is', @@ -122,7 +123,7 @@ export const filters = [ { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'Custom Events', placeholder: 'Enter event key', operator: 'is', @@ -134,14 +135,14 @@ export const filters = [ { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, operator: 'is', label: 'Network Request', filters: [ { key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with URL', placeholder: 'Enter path or URL', operator: 'is', @@ -151,7 +152,7 @@ export const filters = [ { key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with status code', placeholder: 'Enter status code', operator: '=', @@ -161,7 +162,7 @@ export const filters = [ { key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with method', operator: 'is', placeholder: 'Select method type', @@ -172,7 +173,7 @@ export const filters = [ { key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with duration (ms)', placeholder: 'E.g. 12', operator: '=', @@ -182,7 +183,7 @@ export const filters = [ { key: FilterKey.FETCH_REQUEST_BODY, type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -191,7 +192,7 @@ export const filters = [ { key: FilterKey.FETCH_RESPONSE_BODY, type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -204,7 +205,7 @@ export const filters = [ { key: FilterKey.GRAPHQL, type: FilterType.SUB_FILTERS, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'GraphQL', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -214,7 +215,7 @@ export const filters = [ { key: FilterKey.GRAPHQL_NAME, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with name', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -223,7 +224,7 @@ export const filters = [ { key: FilterKey.GRAPHQL_METHOD, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with method', operator: 'is', operatorOptions: filterOptions.stringOperatorsLimited, @@ -233,7 +234,7 @@ export const filters = [ { key: FilterKey.GRAPHQL_REQUEST_BODY, type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with request body', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -242,7 +243,7 @@ export const filters = [ { key: FilterKey.GRAPHQL_RESPONSE_BODY, type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with response body', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -253,7 +254,7 @@ export const filters = [ { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'State Action', placeholder: 'E.g. 12', operator: 'is', @@ -264,7 +265,7 @@ export const filters = [ { key: FilterKey.ERROR, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'Error Message', placeholder: 'E.g. Uncaught SyntaxError', operator: 'is', @@ -278,7 +279,7 @@ export const filters = [ { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -287,7 +288,7 @@ export const filters = [ { key: FilterKey.DURATION, type: FilterType.DURATION, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), @@ -296,7 +297,7 @@ export const filters = [ { key: FilterKey.TAGGED_ELEMENT, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.AUTOCAPTURE, label: 'Tagged Element', operator: 'is', isEvent: true, @@ -307,7 +308,7 @@ export const filters = [ { key: FilterKey.UTM_SOURCE, type: FilterType.MULTIPLE, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'UTM Source', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -316,7 +317,7 @@ export const filters = [ { key: FilterKey.UTM_MEDIUM, type: FilterType.MULTIPLE, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'UTM Medium', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -325,7 +326,7 @@ export const filters = [ { key: FilterKey.UTM_CAMPAIGN, type: FilterType.MULTIPLE, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'UTM Campaign', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -334,8 +335,8 @@ export const filters = [ { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.USER, - label: 'User Country', + category: FilterCategory.SESSION, + label: 'Country', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', @@ -344,8 +345,8 @@ export const filters = [ { key: FilterKey.USER_CITY, type: FilterType.MULTIPLE, - category: FilterCategory.USER, - label: 'User City', + category: FilterCategory.SESSION, + label: 'City', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', @@ -354,7 +355,7 @@ export const filters = [ { key: FilterKey.USER_STATE, type: FilterType.MULTIPLE, - category: FilterCategory.USER, + category: FilterCategory.SESSION, label: 'State / Province', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), @@ -382,65 +383,11 @@ export const filters = [ icon: 'filters/userid' }, - // PERFORMANCE - { - key: FilterKey.DOM_COMPLETE, - type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, - label: 'DOM Complete', - placeholder: 'Enter path', - operator: 'isAny', - operatorOptions: filterOptions.stringOperatorsPerformance, - source: [], - icon: 'filters/dom-complete', - isEvent: true, - hasSource: true, - sourceOperator: '>=', - sourcePlaceholder: 'E.g. 12', - sourceUnit: 'ms', - sourceType: FilterType.NUMBER, - sourceOperatorOptions: filterOptions.customOperators - }, - { - key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, - type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, - label: 'Largest Contentful Paint', - placeholder: 'Enter path', - operator: 'isAny', - operatorOptions: filterOptions.stringOperatorsPerformance, - source: [], - icon: 'filters/lcpt', - isEvent: true, - hasSource: true, - sourceOperator: '>=', - sourcePlaceholder: 'E.g. 12', - sourceUnit: 'ms', - sourceType: FilterType.NUMBER, - sourceOperatorOptions: filterOptions.customOperators - }, - { - key: FilterKey.TTFB, - type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, - label: 'Time to First Byte', - placeholder: 'Enter path', - operator: 'isAny', - operatorOptions: filterOptions.stringOperatorsPerformance, - source: [], - icon: 'filters/ttfb', - isEvent: true, - hasSource: true, - sourceOperator: '>=', - sourceUnit: 'ms', - sourceType: FilterType.NUMBER, - sourceOperatorOptions: filterOptions.customOperators, - sourcePlaceholder: 'E.g. 12' - }, + { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'Avg CPU Load', placeholder: 'Enter path', operator: 'isAny', @@ -458,7 +405,7 @@ export const filters = [ { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'Avg Memory Usage', placeholder: 'Enter path', operator: 'isAny', @@ -473,21 +420,10 @@ export const filters = [ sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators }, - { - key: FilterKey.FETCH_FAILED, - type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, - label: 'Failed Request', - placeholder: 'Enter path', - operator: 'isAny', - operatorOptions: filterOptions.stringOperatorsPerformance, - icon: 'filters/fetch-failed', - isEvent: true - }, { key: FilterKey.ISSUE, type: FilterType.ISSUE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.ISSUE, label: 'Issue', placeholder: 'Select an issue', operator: 'is', @@ -498,8 +434,8 @@ export const filters = [ { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User OS', + category: FilterCategory.SESSION, + label: 'OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' @@ -507,8 +443,8 @@ export const filters = [ { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User Browser', + category: FilterCategory.SESSION, + label: 'Browser', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/browser' @@ -516,8 +452,8 @@ export const filters = [ { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User Device', + category: FilterCategory.SESSION, + label: 'Device', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/device' @@ -525,7 +461,7 @@ export const filters = [ { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.GEAR, + category: FilterCategory.SESSION, label: 'Platform', operator: 'is', operatorOptions: filterOptions.baseOperators, @@ -535,7 +471,7 @@ export const filters = [ { key: FilterKey.REVID, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, + category: FilterCategory.SESSION, label: 'Version ID', placeholder: 'E.g. v1.0.8', operator: 'is', @@ -552,8 +488,8 @@ export const flagConditionFilters = [ { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User OS', + category: FilterCategory.SESSION, + label: 'OS', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/os' @@ -561,8 +497,8 @@ export const flagConditionFilters = [ { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User Browser', + category: FilterCategory.SESSION, + label: 'Browser', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/browser' @@ -570,8 +506,8 @@ export const flagConditionFilters = [ { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, - category: FilterCategory.GEAR, - label: 'User Device', + category: FilterCategory.SESSION, + label: 'Device', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/device' @@ -579,7 +515,7 @@ export const flagConditionFilters = [ { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, - category: FilterCategory.USER, + category: FilterCategory.SESSION, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, @@ -588,8 +524,8 @@ export const flagConditionFilters = [ { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.USER, - label: 'User Country', + category: FilterCategory.SESSION, + label: 'Country', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', @@ -598,8 +534,8 @@ export const flagConditionFilters = [ { key: FilterKey.USER_CITY, type: FilterType.MULTIPLE, - category: FilterCategory.USER, - label: 'User City', + category: FilterCategory.SESSION, + label: 'City', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/country', @@ -608,7 +544,7 @@ export const flagConditionFilters = [ { key: FilterKey.USER_STATE, type: FilterType.MULTIPLE, - category: FilterCategory.USER, + category: FilterCategory.SESSION, label: 'State / Province', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), @@ -638,7 +574,7 @@ export const conditionalFilters = [ { key: FilterKey.CLICK, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Click', operator: 'on', operatorOptions: filterOptions.targetConditional, @@ -648,7 +584,7 @@ export const conditionalFilters = [ { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Visited URL', placeholder: 'Enter path', operator: 'is', @@ -659,7 +595,7 @@ export const conditionalFilters = [ { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'Custom Events', placeholder: 'Enter event key', operator: 'is', @@ -670,14 +606,14 @@ export const conditionalFilters = [ { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, operator: 'is', label: 'Network Request', filters: [ { key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with URL', placeholder: 'Enter path or URL', operator: 'is', @@ -687,7 +623,7 @@ export const conditionalFilters = [ { key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with status code', placeholder: 'Enter status code', operator: '=', @@ -697,7 +633,7 @@ export const conditionalFilters = [ { key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with method', operator: 'is', placeholder: 'Select method type', @@ -708,7 +644,7 @@ export const conditionalFilters = [ { key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with duration (ms)', placeholder: 'E.g. 12', operator: '=', @@ -722,7 +658,7 @@ export const conditionalFilters = [ { key: FilterKey.ERROR, type: FilterType.MULTIPLE, - category: FilterCategory.TECHNICAL, + category: FilterCategory.DEVTOOLS, label: 'Error Message', placeholder: 'E.g. Uncaught SyntaxError', operator: 'is', @@ -733,7 +669,7 @@ export const conditionalFilters = [ { key: FilterKey.DURATION, type: FilterType.DURATION, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), @@ -769,7 +705,7 @@ export const mobileConditionalFilters = [ { key: FilterKey.DURATION, type: FilterType.DURATION, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.SESSION, label: 'Duration', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is']), @@ -779,14 +715,14 @@ export const mobileConditionalFilters = [ { key: FilterKey.FETCH, type: FilterType.SUB_FILTERS, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.DEVTOOLS, operator: 'is', label: 'Network Request', filters: [ { key: FilterKey.FETCH_URL, type: FilterType.MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with URL', placeholder: 'Enter path or URL', operator: 'is', @@ -796,7 +732,7 @@ export const mobileConditionalFilters = [ { key: FilterKey.FETCH_STATUS_CODE, type: FilterType.NUMBER_MULTIPLE, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with status code', placeholder: 'Enter status code', operator: '=', @@ -806,7 +742,7 @@ export const mobileConditionalFilters = [ { key: FilterKey.FETCH_METHOD, type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with method', operator: 'is', placeholder: 'Select method type', @@ -817,7 +753,7 @@ export const mobileConditionalFilters = [ { key: FilterKey.FETCH_DURATION, type: FilterType.NUMBER, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'with duration (ms)', placeholder: 'E.g. 12', operator: '=', @@ -831,7 +767,7 @@ export const mobileConditionalFilters = [ { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.DEVTOOLS, label: 'Custom Events', placeholder: 'Enter event key', operator: 'is', @@ -842,7 +778,7 @@ export const mobileConditionalFilters = [ { key: 'thermalState', type: FilterType.MULTIPLE_DROPDOWN, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'Device Thermal State', placeholder: 'Pick an option', operator: 'is', @@ -858,7 +794,7 @@ export const mobileConditionalFilters = [ { key: 'mainThreadCPU', type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'Main CPU Load %', placeholder: '0 .. 100', operator: '=', @@ -868,7 +804,7 @@ export const mobileConditionalFilters = [ { key: 'viewComponent', type: FilterType.STRING, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.AUTOCAPTURE, label: 'View on screen', placeholder: 'View Name', operator: 'is', @@ -898,7 +834,7 @@ export const mobileConditionalFilters = [ { key: 'logEvent', type: FilterType.STRING, - category: FilterCategory.RECORDING_ATTRIBUTES, + category: FilterCategory.DEVTOOLS, label: 'Log in console', placeholder: 'logged value', operator: 'is', @@ -908,7 +844,7 @@ export const mobileConditionalFilters = [ { key: 'clickEvent', type: FilterType.STRING, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.AUTOCAPTURE, label: 'Tap on view', placeholder: 'View Name', operator: 'is', @@ -918,7 +854,7 @@ export const mobileConditionalFilters = [ { key: 'memoryUsage', type: FilterType.STRING, - category: FilterCategory.PERFORMANCE, + category: FilterCategory.DEVTOOLS, label: 'Memory usage %', placeholder: '0 .. 100', operatorOptions: filterOptions.customOperators, @@ -938,7 +874,7 @@ export const nonConditionalFlagFilters = filters.filter(i => { export const clickmapFilter = { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, - category: FilterCategory.INTERACTIONS, + category: FilterCategory.SESSION, label: 'Visited URL', placeholder: 'Enter URL or path', operator: filterOptions.pageUrlOperators[0].value, operatorOptions: filterOptions.pageUrlOperators, @@ -959,9 +895,8 @@ const mapLiveFilters = (list) => { const obj = {}; list.forEach(filter => { if ( - filter.category !== FilterCategory.INTERACTIONS && - filter.category !== FilterCategory.TECHNICAL && - filter.category !== FilterCategory.PERFORMANCE && + filter.category !== FilterCategory.AUTOCAPTURE && + filter.category !== FilterCategory.DEVTOOLS && filter.key !== FilterKey.DURATION && filter.key !== FilterKey.REFERRER && filter.key !== FilterKey.TAGGED_ELEMENT