jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: moveing and renaming filters

Browse source
This commit is contained in:
nick-delirium 2024-12-02 14:34:45 +01:00
parent ce345542a6
commit c5441a45c8
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
6 changed files with 108 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -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) {
<div style={{ minHeight: 240 }}>
{renderChart()}
{metric.metricType === TIMESERIES ? (
<WidgetDatatable data={data} enabledRows={enabledRows} setEnabledRows={setEnabledRows} />
<WidgetDatatable defaultOpen={metric.viewType === 'table'} data={data} enabledRows={enabledRows} setEnabledRows={setEnabledRows} />
) : null}
</div>
</Loader>

3
frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
View file

@ -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<TableProps['columns']>(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([]);

2
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -230,7 +230,7 @@ function FilterModal(props: Props) {
<div
key={key}
onClick={() => 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()}
</div>

5
frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
View file

@ -68,9 +68,8 @@ function FilterSelection(props: Props) {
}}
onClick={() => setShowModal(true)}
>
<div>
{getNewIcon(filter)}
</div>
<div>{getNewIcon(filter)}</div>
<div className={'text-disabled-text'}>{`${filter.category} .`}</div>
<div
className="overflow-hidden whitespace-nowrap text-ellipsis mr-auto truncate"
style={{ textOverflow: 'ellipsis' }}

11
frontend/app/types/filter/filterType.ts
View file

@ -1,11 +1,10 @@
export enum FilterCategory {
INTERACTIONS = 'Interactions',
GEAR = 'Gear',
RECORDING_ATTRIBUTES = 'Recording Attributes',
TECHNICAL = 'Technical',
USER = 'User Identification',
AUTOCAPTURE = 'Autocapture',
DEVTOOLS = 'Devtools',
USER = 'User',
METADATA = 'Metadata',
PERFORMANCE = 'Performance',
SESSION = 'Session',
ISSUE = 'Issue',
}
export const setQueryParamKeyFromFilterkey = (filterKey: string) => {

247
frontend/app/types/filter/newFilter.js
View file

@ -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