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

feat(ui) - fixes

Browse source
This commit is contained in:
Shekar Siri 2022-02-09 16:41:53 +01:00
parent d38185eb7a
commit a950a505d9
6 changed files with 87 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,6 @@ import { fetchList as fetchFunnelsList } from 'Duck/funnels';
import { defaultFilters, preloadedFilters } from 'Types/filter';
import { KEYS } from 'Types/filter/customFilter';
import SessionList from './SessionList';
import FunnelList from 'Components/Funnels/FunnelList';
import stl from './bugFinder.css';
import { fetchList as fetchSiteList } from 'Duck/site';
import withLocationHandlers from "HOCs/withLocationHandlers";
@ -84,21 +83,22 @@ export default class BugFinder extends React.PureComponent {
state = {showRehydratePanel: false}
constructor(props) {
super(props);
// props.fetchFavoriteSessionList();
// TODO should cache the response
props.fetchSources().then(() => {
defaultFilters[6] = {
category: 'Collaboration',
type: 'CUSTOM',
keys: this.props.sources.filter(({type}) => type === 'collaborationTool').map(({ label, key }) => ({ type: 'CUSTOM', source: key, label: label, key, icon: 'integrations/' + key, isFilter: false })).toJS()
};
defaultFilters[7] = {
category: 'Logging Tools',
type: 'ERROR',
keys: this.props.sources.filter(({type}) => type === 'logTool').map(({ label, key }) => ({ type: 'ERROR', source: key, label: label, key, icon: 'integrations/' + key, isFilter: false })).toJS()
};
});
// props.fetchFavoriteSessionList();
// TODO should cache the response
// props.fetchSources().then(() => {
// defaultFilters[6] = {
// category: 'Collaboration',
// type: 'CUSTOM',
// keys: this.props.sources.filter(({type}) => type === 'collaborationTool').map(({ label, key }) => ({ type: 'CUSTOM', source: key, label: label, key, icon: 'integrations/' + key, isFilter: false })).toJS()
// };
// defaultFilters[7] = {
// category: 'Logging Tools',
// type: 'ERROR',
// keys: this.props.sources.filter(({type}) => type === 'logTool').map(({ label, key }) => ({ type: 'ERROR', source: key, label: label, key, icon: 'integrations/' + key, isFilter: false })).toJS()
// };
// });
// // TODO should cache the response
props.fetchIntegrationVariables().then(() => {
defaultFilters[5] = {
category: 'Metadata',
@ -125,28 +125,28 @@ export default class BugFinder extends React.PureComponent {
this.setState({ showRehydratePanel: !this.state.showRehydratePanel })
}
fetchPreloadedFilters = () => {
this.props.fetchFilterVariables('filterValues').then(function() {
const { filterValues } = this.props;
const keys = [
{key: KEYS.USER_OS, label: 'OS'},
{key: KEYS.USER_BROWSER, label: 'Browser'},
{key: KEYS.USER_DEVICE, label: 'Device'},
{key: KEYS.REFERRER, label: 'Referrer'},
{key: KEYS.USER_COUNTRY, label: 'Country'},
]
if (filterValues && filterValues.size != 0) {
keys.forEach(({key, label}) => {
const _keyFilters = filterValues.get(key)
if (key === KEYS.USER_COUNTRY) {
preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, actualValue: countries[item], isFilter: true})));
} else {
preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, isFilter: true})));
}
})
}
}.bind(this));
}
// fetchPreloadedFilters = () => {
// this.props.fetchFilterVariables('filterValues').then(function() {
// const { filterValues } = this.props;
// const keys = [
// {key: KEYS.USER_OS, label: 'OS'},
// {key: KEYS.USER_BROWSER, label: 'Browser'},
// {key: KEYS.USER_DEVICE, label: 'Device'},
// {key: KEYS.REFERRER, label: 'Referrer'},
// {key: KEYS.USER_COUNTRY, label: 'Country'},
// ]
// if (filterValues && filterValues.size != 0) {
// keys.forEach(({key, label}) => {
// const _keyFilters = filterValues.get(key)
// if (key === KEYS.USER_COUNTRY) {
// preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, actualValue: countries[item], isFilter: true})));
// } else {
// preloadedFilters.push(_keyFilters.map(item => ({label, type: key, key, value: item, isFilter: true})));
// }
// })
// }
// }.bind(this));
// }
setActiveTab = tab => {
this.props.setActiveTab(tab);
@ -175,7 +175,6 @@ export default class BugFinder extends React.PureComponent {
<MainSearchBar />
<SessionSearch />
</div>
{ activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
{ activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }
{ activeTab.type === 'live' && <LiveSessionList /> }
</div>

21
frontend/app/components/BugFinder/SessionList/SessionList.js
View file

@ -1,12 +1,10 @@
import { connect } from 'react-redux';
import { Loader, NoContent, Message, Icon, Button, LoadMoreButton } from 'UI';
import { Loader, NoContent, Button, LoadMoreButton } from 'UI';
import { applyFilter, addAttribute, addEvent } from 'Duck/filters';
import { fetchSessions } from 'Duck/search';
import SessionItem from 'Shared/SessionItem';
import SessionListHeader from './SessionListHeader';
// import { KEYS } from 'Types/filter/customFilter';
import { addFilter } from 'Duck/search';
import { filtersMap } from 'Types/filter/newFilter';
import { addFilterByKeyAndValue } from 'Duck/search';
import { FilterKey } from 'Types/filter/filterType';
const ALL = 'all';
@ -27,7 +25,7 @@ var timeoutId;
addAttribute,
addEvent,
fetchSessions,
addFilter,
addFilterByKeyAndValue,
})
export default class SessionList extends React.PureComponent {
state = {
@ -47,20 +45,11 @@ export default class SessionList extends React.PureComponent {
addPage = () => this.setState({ showPages: this.state.showPages + 1 })
onUserClick = (userId, userAnonymousId) => {
let userFilter = filtersMap[FilterKey.USERID];
if (userId) {
userFilter = filtersMap[FilterKey.USERID];
userFilter.value = [userId];
// userFilter = { label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId }
// this.props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId })
this.props.addFilterByKeyAndValue(FilterKey.USERID, userId);
} else {
userFilter = filtersMap[FilterKey.USERANONYMOUSID];
userFilter.value = [userAnonymousId];
// this.props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId })
this.props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
}
this.props.addFilter(userFilter);
// this.props.applyFilter()
}
timeout = () => {

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

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import cn from 'classnames';
import stl from './FilterModal.css';
import { filtersMap, getMetaDataFilter } from 'Types/filter/newFilter';
import { FilterKey, FilterType } from 'Types/filter/filterType';
// import { FilterKey, FilterType } from 'Types/filter/filterType';
interface Props {
filters: any,
@ -25,7 +25,7 @@ function FilterModal(props: Props) {
fetchingFilterSearchList,
searchQuery = '',
} = props;
const hasFilerSearchList = filterSearchList && Object.keys(filterSearchList).length > 0;
// const hasFilerSearchList = filterSearchList && Object.keys(filterSearchList).length > 0;
const hasSearchQuery = searchQuery && searchQuery.length > 0;
const showSearchList = isMainSearch && searchQuery.length > 0;

144
frontend/app/constants/filterOptions.js
View file

@ -1,124 +1,36 @@
export const options = [
{
key: 'is',
text: 'is',
value: 'is'
},
{
key: 'isAny',
text: 'is any',
value: 'isAny'
}, {
key: 'isNot',
text: 'is not',
value: 'isNot'
}, {
key: 'startsWith',
text: 'starts with',
value: 'startsWith'
}, {
key: 'endsWith',
text: 'ends with',
value: 'endsWith'
}, {
key: 'contains',
text: 'contains',
value: 'contains'
}, {
key: 'notContains',
text: 'not contains',
value: 'notContains'
}, {
key: 'hasAnyValue',
text: 'has any value',
value: 'hasAnyValue'
}, {
key: 'hasNoValue',
text: 'has no value',
value: 'hasNoValue'
},
{
key: 'isSignedUp',
text: 'is signed up',
value: 'isSignedUp'
}, {
key: 'notSignedUp',
text: 'not signed up',
value: 'notSignedUp'
},
{
key: 'before',
text: 'before',
value: 'before'
}, {
key: 'after',
text: 'after',
value: 'after'
}, {
key: 'on',
text: 'on',
value: 'on'
}, {
key: 'notOn',
text: 'not on',
value: 'notOn'
}, {
key: 'inRage',
text: 'in rage',
value: 'inRage'
}, {
key: 'notInRage',
text: 'not in rage',
value: 'notInRage'
}, {
key: 'withinLast',
text: 'within last',
value: 'withinLast'
}, {
key: 'notWithinLast',
text: 'not within last',
value: 'notWithinLast'
},
{
key: 'greaterThan',
text: 'greater than',
value: 'greaterThan'
}, {
key: 'lessThan',
text: 'less than',
value: 'lessThan'
}, {
key: 'equal',
text: 'equal',
value: 'equal'
}, {
key: 'not equal',
text: 'not equal',
value: 'not equal'
},
{
key: 'onSelector',
text: 'on selector',
value: 'onSelector'
}, {
key: 'onText',
text: 'on text',
value: 'onText'
}, {
key: 'onComponent',
text: 'on component',
value: 'onComponent'
},
{
key: 'onAny',
text: 'on any',
value: 'onAny'
}
{ key: 'on', text: 'on', value: 'on' },
{ key: 'notOn', text: 'not on', value: 'notOn' },
{ key: 'onAny', text: 'on any', value: 'onAny' },
{ key: 'is', text: 'is', value: 'is' },
{ key: 'isAny', text: 'is any', value: 'isAny' },
{ key: 'isNot', text: 'is not', value: 'isNot' },
{ key: 'startsWith', text: 'starts with', value: 'startsWith' },
{ key: 'endsWith', text: 'ends with', value: 'endsWith' },
{ key: 'contains', text: 'contains', value: 'contains' },
{ key: 'notContains', text: 'not contains', value: 'notContains' },
{ key: 'hasAnyValue', text: 'has any value', value: 'hasAnyValue' },
{ key: 'hasNoValue', text: 'has no value', value: 'hasNoValue' },
{ key: 'isSignedUp', text: 'is signed up', value: 'isSignedUp' },
{ key: 'notSignedUp', text: 'not signed up', value: 'notSignedUp' },
{ key: 'before', text: 'before', value: 'before' },
{ key: 'after', text: 'after', value: 'after' },
{ key: 'inRage', text: 'in rage', value: 'inRage' },
{ key: 'notInRage', text: 'not in rage', value: 'notInRage' },
{ key: 'withinLast', text: 'within last', value: 'withinLast' },
{ key: 'notWithinLast', text: 'not within last', value: 'notWithinLast' },
{ key: 'greaterThan', text: 'greater than', value: 'greaterThan' },
{ key: 'lessThan', text: 'less than', value: 'lessThan' },
{ key: 'equal', text: 'equal', value: 'equal' },
{ key: 'not equal', text: 'not equal', value: 'not equal' },
{ key: 'onSelector', text: 'on selector', value: 'onSelector' },
{ key: 'onText', text: 'on text', value: 'onText' },
{ key: 'onComponent', text: 'on component', value: 'onComponent' },
];
const filterKeys = ['is', 'isNot'];
const stringFilterKeys = ['is', 'isAny', 'isNot', 'contains', 'startsWith', 'endsWith', 'notContains'];
const targetFilterKeys = ['on', 'notOn', 'onAny'];
const targetFilterKeys = ['on', 'notOn', 'onAny', 'contains', 'startsWith', 'endsWith', 'notContains'];
const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];

16
frontend/app/duck/search.js
View file

@ -8,6 +8,7 @@ import { errors as errorsRoute, isRoute } from "App/routes";
import { fetchList as fetchSessionList } from './sessions';
import { fetchList as fetchErrorsList } from './errors';
import { FilterCategory, FilterKey } from '../types/filter/filterType';
import { filtersMap } from 'Types/filter/newFilter';
const ERRORS_ROUTE = errorsRoute();
@ -204,16 +205,27 @@ export const clearSearch = () => (dispatch, getState) => {
});
}
const checkFilterValue = (value) => {
return Array.isArray(value) ? (value.length === 0 ? [""] : value) : [value];
}
export const addFilter = (filter) => (dispatch, getState) => {
filter.value = Array.isArray(filter.value) ? (filter.value.length === 0 ? [""] : filter.value) : [filter.value];
filter.value = checkFilterValue(filter.value);
const instance = getState().getIn([ 'search', 'instance']);
const filters = instance.filters.push(filter);
return dispatch(edit(instance.set('filters', filters)));
}
export const addFilterByKeyAndValue = (key, value) => (dispatch, getState) => {
let defaultFilter = filtersMap[key];
defaultFilter.value = value;
dispatch(addFilter(defaultFilter));
}
export const editSavedSearch = instance => {
return {
type: EDIT_SAVED_SEARCH,
instance,
}
};
};

2
frontend/app/types/customMetric.js
View file

@ -29,7 +29,7 @@ export default Record({
name: 'Series',
viewType: 'lineChart',
series: List(),
isPublic: false,
isPublic: true,
startDate: '',
endDate: '',
active: true,