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

feat(ui) - custom metrics

Browse source
This commit is contained in:
Shekar Siri 2022-01-24 19:29:27 +05:30
parent af260a7530
commit 5f958ede98
33 changed files with 354 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/BugFinder/BugFinder.js
View file

@ -29,6 +29,7 @@ import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
import SessionSearchField from 'Shared/SessionSearchField'
import SavedSearch from 'Shared/SavedSearch'
import LiveSessionList from './LiveSessionList'
import SessionSearch from 'Shared/SessionSearch';
const weakEqual = (val1, val2) => {
if (!!val1 === false && !!val2 === false) return true;
@ -176,7 +177,8 @@ export default class BugFinder extends React.PureComponent {
<div style={{ width: "70%", marginRight: "10px"}}><SessionSearchField /></div>
<SavedSearch />
</div>
<EventFilter />
<SessionSearch />
{/* <EventFilter /> */}
</div>
{ activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
{ activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }

2
frontend/app/components/shared/FilterDropdown/FilterDropdown.js
View file

@ -27,7 +27,7 @@ const locationOptions = Object.keys(regionLabels).map(k => ({ key: LOCATION, tex
const _filterKeys = [
{ key: 'userId', name: 'User ID', icon: 'user-alt', placeholder: 'Search for User ID' },
{ key: 'userAnonymousId', name: 'User Anonymous ID', icon: 'filters/userid', placeholder: 'Search for User Anonymous ID' },
{ key: 'revId', name: 'Rev ID', icon: 'filters/border-outer', placeholder: 'Search for Rev ID' },
{ key: 'revId', name: 'Rev ID', icon: 'filters/rev-id', placeholder: 'Search for Rev ID' },
{ key: COUNTRY, name: 'Country', icon: 'map-marker-alt', placeholder: 'Search for Country' },
{ key: 'device', name: 'Device', icon: 'device', placeholder: 'Search for Device' },
{ key: 'os', name: 'OS', icon: 'os', placeholder: 'Search for OS' },

21
frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
View file

@ -37,9 +37,8 @@ function FitlerItem(props: Props) {
// onUpdate({ ...filter, value: newValues })
// }
console.log('filter', filter);
const onOperatorChange = (e, { name, value }) => {
console.log('onOperatorChange', name, value)
onUpdate({ ...filter, operator: value })
}
@ -49,23 +48,7 @@ function FitlerItem(props: Props) {
<div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
<FilterSelection filter={filter} onFilterClick={replaceFilter} />
<FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
{/* <div className="grid grid-cols-3 gap-3"> */}
{/* {filter.value && filter.value.map((value, valueIndex) => ( */}
<FilterValue
// showCloseButton={filter.value.length > 1}
// showOrButton={valueIndex === filter.value.length - 1}
filter={filter}
onUpdate={onUpdate}
// key={valueIndex}
// value={value}
// key={filter.key}
// index={valueIndex}
// onAddValue={onAddValue}
// onRemoveValue={(valueIndex) => onRemoveValue(valueIndex)}
// onSelect={(e, item, valueIndex) => onSelect(e, item, valueIndex)}
/>
{/* ))} */}
{/* </div> */}
<FilterValue filter={filter} onUpdate={onUpdate} />
</div>
<div className="flex self-start mt-2">
<div

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

@ -11,6 +11,8 @@ interface Props {
function FilterOperator(props: Props) {
const { filter, onChange, className = '' } = props;
console.log('FilterOperator', filter.operator);
return (
<Dropdown
className={ cn(stl.operatorDropdown, className) }

1
frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
View file

@ -34,6 +34,7 @@ function FilterValue(props: Props) {
const renderValueFiled = (value, valueIndex) => {
switch(filter.type) {
case FilterType.ISSUE:
case FilterType.DROPDOWN:
return (
<FilterValueDropdown
value={value}

4
frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
View file

@ -10,13 +10,15 @@ interface Props {
onChange: (e, { name, value }) => void;
className?: string;
options: any[];
search?: boolean;
}
function FilterValueDropdown(props: Props) {
const { options, onChange, value, className = '' } = props;
const { search = false, options, onChange, value, className = '' } = props;
// const options = []
return (
<Dropdown
search={search}
className={ cn(stl.operatorDropdown, className) }
options={ options }
name="issue_type"

93
frontend/app/components/shared/SessionSearch/SessionSearch.tsx Normal file
View file

@ -0,0 +1,93 @@
import React from 'react';
import FilterList from 'Shared/Filters/FilterList';
import FilterSelection from 'Shared/Filters/FilterSelection';
import SaveFilterButton from 'Shared/SaveFilterButton';
import { connect } from 'react-redux';
import { IconButton, Button } from 'UI';
import { edit } from 'Duck/search';
interface Props {
appliedFilter: any;
edit: typeof edit;
}
function SessionSearch(props) {
const { appliedFilter } = props;
const onAddFilter = (filter) => {
filter.value = [""]
const newFilters = appliedFilter.filter.filters.concat(filter);
props.edit({
...appliedFilter,
filter: {
...appliedFilter.filter,
filters: newFilters,
}
});
}
const onUpdateFilter = (filterIndex, filter) => {
const newFilters = appliedFilter.filter.filters.map((_filter, i) => {
if (i === filterIndex) {
return filter;
} else {
return _filter;
}
});
props.edit({
...appliedFilter.toData(),
filter: {
...appliedFilter.filter,
filters: newFilters,
}
});
}
const onRemoveFilter = (filterIndex) => {
const newFilters = appliedFilter.filter.filters.filter((_filter, i) => {
return i !== filterIndex;
});
props.edit({
...appliedFilter,
filter: {
...appliedFilter.filter,
filters: newFilters,
}
});
}
return (
<div className="border bg-white rounded mt-4">
<div className="p-3">
<FilterList
filters={appliedFilter.filter.filters.toJS()}
onUpdateFilter={onUpdateFilter}
onRemoveFilter={onRemoveFilter}
/>
</div>
<div className="border-t px-3 py-2 flex items-center">
<div>
<FilterSelection
filter={undefined}
onFilterClick={onAddFilter}
>
<IconButton primaryText label="ADD STEP" icon="plus" />
</FilterSelection>
</div>
<div className="ml-auto flex items-center">
<SaveFilterButton />
<Button>CLEAR STEPS</Button>
<Button plain>SAVE FUNNEL</Button>
</div>
</div>
</div>
);
}
export default connect(state => ({
appliedFilter: state.getIn([ 'search', 'instance' ]),
}), { edit })(SessionSearch);
// appliedFilter: state.getIn([ 'filters', 'appliedFilter' ]),

1
frontend/app/components/shared/SessionSearch/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './SessionSearch';

2
frontend/app/duck/index.js
View file

@ -35,6 +35,7 @@ import funnels from './funnels';
import config from './config';
import roles from './roles';
import customMetrics from './customMetrics';
import search from './search';
export default combineReducers({
jwt,
@ -70,6 +71,7 @@ export default combineReducers({
config,
roles,
customMetrics,
search,
...integrations,
...sources,
});

147
frontend/app/duck/search.js Normal file
View file

@ -0,0 +1,147 @@
import { List, Map } from 'immutable';
// import { clean as cleanParams } from 'App/api_client';
import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
import CustomMetric, { FilterSeries } from 'Types/customMetric'
import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
// import { createEdit, createInit } from './funcTools/crud';
import { createRequestReducer, ROOT_KEY } from './funcTools/request';
import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
import Filter from 'Types/filter';
// import filter from 'core-js/fn/array/filter';
// import NewFilter from 'Types/filter/newFilter';
// import Event from 'Types/filter/event';
// import CustomFilter from 'Types/filter/customFilter';
import { errors as errorsRoute, isRoute } from "App/routes";
import { fetchList as fetchSessionList } from './sessions';
import { fetchList as fetchErrorsList } from './errors';
const ERRORS_ROUTE = errorsRoute();
const name = "custom_metric";
const idKey = "metricId";
const FETCH_LIST = fetchListType(name);
const FETCH = fetchType(name);
const SAVE = saveType(name);
const EDIT = editType(name);
const REMOVE = removeType(name);
const UPDATE = `${name}/UPDATE`;
const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
function chartWrapper(chart = []) {
return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
}
// const updateItemInList = createListUpdater(idKey);
// const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
// ? state.mergeIn([ "instance" ], instance)
// : state;
const initialState = Map({
list: List(),
alertMetricId: null,
// instance: null,
instance: FilterSeries({ filter: new Filter({ filters: [] }) }),
});
// Metric - Series - [] - filters
function reducer(state = initialState, action = {}) {
switch (action.type) {
case EDIT:
return state.set('instance', FilterSeries(action.instance));
case success(SAVE):
return state.set([ 'instance' ], CustomMetric(action.data));
case success(REMOVE):
console.log('action', action)
return state.update('list', list => list.filter(item => item.metricId !== action.id));
case success(FETCH):
return state.set("instance", ErrorInfo(action.data));
case success(FETCH_LIST):
const { data } = action;
return state.set("list", List(data.map(CustomMetric)));
}
return state;
}
export default mergeReducers(
reducer,
createRequestReducer({
[ ROOT_KEY ]: FETCH_LIST,
fetch: FETCH,
}),
);
const filterMap = ({value, type, key, operator, source, custom, isEvent }) => ({
value: Array.isArray(value) ? value: [value],
custom,
type: key,
key, operator,
source,
isEvent
});
const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
dispatch(actionCreator(...args));
const filter = getState().getIn([ 'search', 'instance', 'filter' ]).toData();
filter.filters = filter.filters.map(filterMap);
// console.log('filter', filter)
// let filter = appliedFilter
// .update('filters', list => list.map(f => f.set('value', f.value || '*'))
// .map(filterMap));
// const filter.filters = getState().getIn([ 'instance', 'filter' ]).get('filters').map(filterMap).toJS();
return isRoute(ERRORS_ROUTE, window.location.pathname)
? dispatch(fetchErrorsList(filter))
: dispatch(fetchSessionList(filter));
};
export const edit = reduceThenFetchResource((instance) => ({
type: EDIT,
instance,
}));
export const remove = createRemove(name);
// export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
// type: APPLY,
// filter,
// fromUrl,
// }));
export const updateSeries = (index, series) => ({
type: UPDATE,
index,
series,
});
export function fetch(id) {
return {
id,
types: array(FETCH),
call: c => c.get(`/errors/${id}`),
}
}
export function save(instance) {
return {
types: SAVE.array,
call: client => client.post( `/${ name }s`, instance.toSaveData()),
};
}
export function fetchList() {
return {
types: array(FETCH_LIST),
call: client => client.get(`/${name}s`),
};
}
export function setAlertMetricId(id) {
return {
type: SET_ALERT_METRIC_ID,
id,
};
}

3
frontend/app/svg/icons/filters/browser.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-globe" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
frontend/app/svg/icons/filters/clickrage.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-emoji-angry" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zm6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761l2-1zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761l-2-1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 673 B

1
frontend/app/svg/icons/filters/code.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 582 B

4
frontend/app/svg/icons/filters/country.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

7
frontend/app/svg/icons/filters/device.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><path d="M702.5,826.7H598V722.1h107.8v-68.6H78.6V157h816.7v277.7h55.5c3.3,0,9.8,0,13.1,3.3V134.1c0-26.1-19.6-45.7-45.7-45.7H55.7C29.6,88.4,10,108,10,134.1v542.3c0,26.1,19.6,45.7,45.7,45.7h323.4v104.5H255c-22.9,0-42.5,19.6-42.5,42.5c0,22.9,19.6,42.5,42.5,42.5h460.6c-6.5-9.8-9.8-19.6-9.8-29.4v-55.5H702.5z"/><path d="M960.6,457.5H767.9c-16.3,0-29.4,13.1-29.4,29.4v392c0,16.3,13.1,29.4,29.4,29.4h192.7c16.3,0,29.4-13.1,29.4-29.4v-392C990,473.9,976.9,457.5,960.6,457.5z M862.6,892c-6.5,0-13.1-6.5-13.1-13.1s6.5-13.1,13.1-13.1c6.5,0,13.1,6.5,13.1,13.1S869.1,892,862.6,892z M970.4,849.5H754.8V522.9h215.6V849.5z"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
frontend/app/svg/icons/filters/duration.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 429 B

4
frontend/app/svg/icons/filters/error.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 312 B

3
frontend/app/svg/icons/filters/fetch.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-arrow-left-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 411 B

1
frontend/app/svg/icons/filters/graphql.svg Normal file
View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.52 391.6"><title>graphql</title><path d="M356.7,250.2a35,35,0,0,0-9.2-3.67v-93A34.92,34.92,0,1,0,314,95.57l-80.54-46.5a34.9,34.9,0,1,0-68.35-10A35.24,35.24,0,0,0,166.53,49L86,95.53A35.4,35.4,0,0,0,78.1,89.3a34.92,34.92,0,1,0-25.6,64.19v93a34.93,34.93,0,1,0,33.5,58L166.52,351a34.9,34.9,0,1,0,66.61-1.12l80.05-46.22A34.92,34.92,0,1,0,356.7,250.2Zm-262,22a34.46,34.46,0,0,0-9.81-17L190.28,72.62a34.91,34.91,0,0,0,19.47,0l105.4,182.56a34.81,34.81,0,0,0-9.82,17ZM305.79,110a34.83,34.83,0,0,0,25.11,43.4v93.15l-1.35.36L224.13,64.32c.31-.3.63-.61.93-.92ZM174.9,63.36c.33.33.66.66,1,1L70.47,246.94l-1.37-.37V153.41A34.83,34.83,0,0,0,94.19,110Zm50.91,274a34.92,34.92,0,0,0-50.94-.71l-80.6-46.53c.12-.45.25-.9.36-1.35H305.36c.19.77.4,1.53.64,2.29Z" transform="translate(-25.74 -4.2)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 872 B

1
frontend/app/svg/icons/filters/i-cursor.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M96 38.223C75.091 13.528 39.824 1.336 6.191.005 2.805-.129 0 2.617 0 6.006v20.013c0 3.191 2.498 5.847 5.686 5.989C46.519 33.825 80 55.127 80 80v160H38a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h42v160c0 24.873-33.481 46.175-74.314 47.992-3.188.141-5.686 2.797-5.686 5.989v20.013c0 3.389 2.806 6.135 6.192 6.002C40.03 510.658 75.193 498.351 96 473.777c20.909 24.695 56.176 36.887 89.809 38.218 3.386.134 6.191-2.612 6.191-6.001v-20.013c0-3.191-2.498-5.847-5.686-5.989C145.481 478.175 112 456.873 112 432V272h42a6 6 0 0 0 6-6v-20a6 6 0 0 0-6-6h-42V80c0-24.873 33.481-46.175 74.314-47.992 3.188-.142 5.686-2.798 5.686-5.989V6.006c0-3.389-2.806-6.135-6.192-6.002C151.97 1.342 116.807 13.648 96 38.223z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 765 B

4
frontend/app/svg/icons/filters/input.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-input-cursor-text" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/>
<path d="M10 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4v1zM6 5V4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v-1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 867 B

4
frontend/app/svg/icons/filters/link.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 504 B

3
frontend/app/svg/icons/filters/location.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-cursor" viewBox="0 0 16 16">
<path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 325 B

3
frontend/app/svg/icons/filters/os.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.65234375,8.4375 C7.65234375,9.13281598 7.43424697,9.70898209 6.99804688,10.1660156 C6.56184678,10.6230492 5.99609723,10.8515625 5.30078125,10.8515625 C4.61848617,10.8515625 4.06445525,10.6230492 3.63867188,10.1660156 C3.2128885,9.70898209 3,9.13281598 3,8.4375 L3,7.4140625 C3,6.7213507 3.2128885,6.14583563 3.63867188,5.6875 C4.06445525,5.22916437 4.6171841,5 5.296875,5 C5.99219098,5 6.55859156,5.22916437 6.99609375,5.6875 C7.43359594,6.14583563 7.65234375,6.7213507 7.65234375,7.4140625 L7.65234375,8.4375 Z M6.70703125,7.40625 C6.70703125,6.9322893 6.58007939,6.54297027 6.32617188,6.23828125 C6.07226436,5.93359223 5.72916883,5.78125 5.296875,5.78125 C4.88020625,5.78125 4.55078246,5.93359223 4.30859375,6.23828125 C4.06640504,6.54297027 3.9453125,6.9322893 3.9453125,7.40625 L3.9453125,8.4375 C3.9453125,8.91666906 4.06640504,9.30924326 4.30859375,9.61523438 C4.55078246,9.92122549 4.88150832,10.0742188 5.30078125,10.0742188 C5.73567926,10.0742188 6.07877479,9.92187652 6.33007812,9.6171875 C6.58138146,9.31249848 6.70703125,8.91927324 6.70703125,8.4375 L6.70703125,7.40625 Z M11.7617188,9.30859375 C11.7617188,9.0716134 11.673829,8.87760492 11.4980469,8.7265625 C11.3222647,8.57552008 11.011721,8.44010477 10.5664062,8.3203125 C9.93098641,8.153645 9.442059,7.93294408 9.09960938,7.65820312 C8.75715975,7.38346217 8.5859375,7.02343973 8.5859375,6.578125 C8.5859375,6.11978937 8.77538873,5.74218898 9.15429688,5.4453125 C9.53320502,5.14843602 10.0221324,5 10.6210938,5 C11.2460969,5 11.748045,5.16796707 12.1269531,5.50390625 C12.5058613,5.83984543 12.6888021,6.24348723 12.6757812,6.71484375 L12.6679688,6.73828125 L11.7578125,6.73828125 C11.7578125,6.44661313 11.6588552,6.21028736 11.4609375,6.02929688 C11.2630198,5.84830639 10.9804706,5.7578125 10.6132812,5.7578125 C10.2669254,5.7578125 10.000652,5.83333258 9.81445312,5.984375 C9.62825428,6.13541742 9.53515625,6.33072797 9.53515625,6.5703125 C9.53515625,6.78645941 9.6360667,6.96614512 9.83789062,7.109375 C10.0397146,7.25260488 10.3736956,7.3880202 10.8398438,7.515625 C11.451826,7.67968832 11.9166651,7.90624855 12.234375,8.1953125 C12.5520849,8.48437645 12.7109375,8.85286234 12.7109375,9.30078125 C12.7109375,9.77474195 12.5214863,10.1516913 12.1425781,10.4316406 C11.76367,10.7115899 11.2656281,10.8515625 10.6484375,10.8515625 C10.0546845,10.8515625 9.53385641,10.694663 9.0859375,10.3808594 C8.63801859,10.0670557 8.42057285,9.63672148 8.43359375,9.08984375 L8.44140625,9.06640625 L9.35546875,9.06640625 C9.35546875,9.41276215 9.47525922,9.67122311 9.71484375,9.84179688 C9.95442828,10.0123706 10.2656231,10.0976562 10.6484375,10.0976562 C11.0000018,10.0976562 11.2734365,10.0266934 11.46875,9.88476562 C11.6640635,9.74283783 11.7617188,9.55078246 11.7617188,9.30859375 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

0
frontend/app/svg/icons/filters/phone-laptop.svg → frontend/app/svg/icons/filters/platform.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 354 B

After

Width:  |  Height:  |  Size: 354 B

4
frontend/app/svg/icons/filters/referrer.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chat-square-quote" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 693 B

10
frontend/app/svg/icons/filters/resize.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icn_resize" stroke="none" stroke-width="1">
<g id="Group" transform="translate(0.000000, 4.000000)">
<path d="M6.3676531,7.24426522 C6.34293965,7.2140599 6.31488039,7.18662417 6.28398858,7.16245992 C6.0529554,6.98174063 5.71583449,7.01836611 5.53100794,7.24426522 L-0.811179719,14.9958279 C-0.887171026,15.0887062 -0.928571429,15.2041069 -0.928571429,15.3230491 C-0.928571429,15.6123411 -0.688723973,15.8468587 -0.392857143,15.8468587 L12.2915182,15.8468587 C12.4131636,15.8468587 12.5311871,15.8063783 12.6261762,15.7320757 C12.8572094,15.5513564 12.8946673,15.221727 12.7098408,14.9958279 L6.3676531,7.24426522 Z M13.5464859,14.3413855 C14.1009655,15.0190828 13.9885919,16.0079708 13.2954924,16.5501287 C13.010525,16.7730365 12.6564545,16.8944777 12.2915182,16.8944777 L-0.392857143,16.8944777 C-1.28045763,16.8944777 -2,16.1909252 -2,15.3230491 C-2,14.9662225 -1.87579879,14.6200203 -1.64782487,14.3413855 L4.69436279,6.58982279 C5.24884242,5.91212546 6.26020517,5.80224902 6.9533047,6.34440688 C7.04598012,6.41689965 7.13015792,6.49920683 7.20429825,6.58982279 L13.5464859,14.3413855 Z" id="Triangle" fill-rule="nonzero" transform="translate(5.949360, 11.447239) rotate(-90.000000) translate(-5.949360, -11.447239) "></path>
<path d="M24.2839886,7.16245992 C24.0529554,6.98174063 23.7158345,7.01836611 23.5310079,7.24426522 L17.1888203,14.9958279 C17.112829,15.0887062 17.0714286,15.2041069 17.0714286,15.3230491 C17.0714286,15.6123411 17.311276,15.8468587 17.6071429,15.8468587 L30.2915182,15.8468587 C30.4131636,15.8468587 30.5311871,15.8063783 30.6261762,15.7320757 C30.8572094,15.5513564 30.8946673,15.221727 30.7098408,14.9958279 L24.3676531,7.24426522 C24.3429397,7.2140599 24.3148804,7.18662417 24.2839886,7.16245992 Z M31.5464859,14.3413855 C32.1009655,15.0190828 31.9885919,16.0079708 31.2954924,16.5501287 C31.010525,16.7730365 30.6564545,16.8944777 30.2915182,16.8944777 L17.6071429,16.8944777 C16.7195424,16.8944777 16,16.1909252 16,15.3230491 C16,14.9662225 16.1242012,14.6200203 16.3521751,14.3413855 L22.6943628,6.58982279 C23.2488424,5.91212546 24.2602052,5.80224902 24.9533047,6.34440688 C25.0459801,6.41689965 25.1301579,6.49920683 25.2042983,6.58982279 L31.5464859,14.3413855 Z" id="Triangle-Copy" fill-rule="nonzero" transform="translate(23.949360, 11.447239) rotate(90.000000) translate(-23.949360, -11.447239) "></path>
<rect id="Rectangle" x="14.4136458" y="0" width="1.07142857" height="22"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

0
frontend/app/svg/icons/filters/border-outer.svg → frontend/app/svg/icons/filters/rev-id.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 659 B

After

Width:  |  Height:  |  Size: 659 B

3
frontend/app/svg/icons/filters/state-action.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-grid-3x2-gap" viewBox="0 0 16 16">
<path d="M4 4v2H2V4h2zm1 7V9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 5V9a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 4v2H7V4h2zm5 0h-2v2h2V4zM4 9v2H2V9h2zm5 0v2H7V9h2zm5 0v2h-2V9h2zm-3-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 607 B

4
frontend/app/svg/icons/filters/view.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-eye" viewBox="0 0 16 16">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 527 B

9
frontend/app/types/filter/filter.js
View file

@ -34,10 +34,9 @@ export default Record({
rangeValue,
startDate,
endDate,
condition: 'then',
sort: undefined,
order: undefined,
sort: '',
order: '',
viewed: undefined,
consoleLogCount: undefined,
@ -109,8 +108,8 @@ export const defaultFilters = [
{ label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true },
{ label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true },
{ label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true },
{ label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/border-outer', isFilter: true },
{ label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/phone-laptop', isFilter: true }
{ label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true },
{ label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true },
]
},
{

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

@ -5,6 +5,7 @@ export enum FilterType {
DURATION = "DURATION",
MULTIPLE = "MULTIPLE",
COUNTRY = "COUNTRY",
DROPDOWN = "DROPDOWN",
};
export enum FilterKey {

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

@ -1,5 +1,8 @@
import Record from 'Types/Record';
import { FilterType, FilterKey } from './filterType'
import { countries } from 'App/constants';
const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
export const CLICK = 'CLICK';
export const INPUT = 'INPUT';
@ -47,47 +50,6 @@ const ISSUE_OPTIONS = [
{ text: 'Dead Click', value: 'dead_click' },
]
// export const TYPES = {
// ERROR,
// MISSING_RESOURCE,
// SLOW_SESSION,
// CLICK_RAGE,
// CLICK,
// INPUT,
// LOCATION,
// VIEW,
// CONSOLE,
// METADATA,
// CUSTOM,
// URL,
// USER_BROWSER,
// USER_OS,
// USER_DEVICE,
// PLATFORM,
// DURATION,
// REFERRER,
// USER_COUNTRY,
// JOURNEY,
// FETCH,
// GRAPHQL,
// STATEACTION,
// REVID,
// USERANONYMOUSID,
// USERID,
// ISSUE,
// EVENTS_COUNT,
// UTM_SOURCE,
// UTM_MEDIUM,
// UTM_CAMPAIGN,
// DOM_COMPLETE,
// LARGEST_CONTENTFUL_PAINT_TIME,
// TIME_BETWEEN_EVENTS,
// TTFB,
// AVG_CPU_LOAD,
// AVG_MEMORY_USAGE,
// };
const filterKeys = ['is', 'isNot'];
const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
const targetFilterKeys = ['on', 'notOn'];
@ -226,39 +188,39 @@ export const booleanOptions = [
export const filtersMap = {
[FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
[FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
[FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
[FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/input', isEvent: true },
[FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/location', isEvent: true },
[FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
[FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
[FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
[FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/platform' },
[FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
[FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
[FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
[FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
[FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },
[FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/error' },
[FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/fetch' },
[FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/graphql' },
[FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/state-action' },
[FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
[FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
[FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
[FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
// [FilterKey.SLOW_SESSION]: { key: FilterKey.SLOW_SESSION, type: FilterType.BOOLEAN, category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
[FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
// [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
// [FilterKey.CLICK_RAGE]: { key: FilterKey.CLICK_RAGE, type: FilterType.BOOLEAN, category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
[FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'new', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
[FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'javascript', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
// [FilterKey.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
// [FilterKey.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
// [FilterKey.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
@ -281,7 +243,7 @@ export default Record({
isFilter: false,
actualValue: '',
operator: 'is',
operator: 'notOn',
operatorOptions: [],
isEvent: false,
index: 0,
@ -295,7 +257,7 @@ export default Record({
// key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
// label: getLabel(filter),
// target: Target(target),
operator: getOperatorDefault(key),
// operator: getOperatorDefault(key),
// value: target ? target.label : filter.value,
// value: typeof value === 'string' ? [value] : value,
// icon: filter.type ? getfilterIcon(filter.type) : 'filters/metadata'