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

feat(ui) - filters - filter item add user click

Browse source
This commit is contained in:
Shekar Siri 2022-02-03 17:02:08 +01:00
parent 6ce4b4e4a7
commit 3441efed93
5 changed files with 38 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,10 @@ 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 { KEYS } from 'Types/filter/customFilter';
import { addFilter } from 'Duck/search';
import { filtersMap } from 'Types/filter/newFilter';
import { FilterKey } from 'Types/filter/filterType';
const ALL = 'all';
const PER_PAGE = 10;
@ -18,12 +21,13 @@ var timeoutId;
activeTab: state.getIn([ 'sessions', 'activeTab' ]),
allList: state.getIn([ 'sessions', 'list' ]),
total: state.getIn([ 'sessions', 'total' ]),
filters: state.getIn([ 'filters', 'appliedFilter', 'filters' ]),
filters: state.getIn([ 'search', 'instance', 'filters' ]),
}), {
applyFilter,
addAttribute,
addEvent,
fetchSessions,
addFilter,
})
export default class SessionList extends React.PureComponent {
state = {
@ -43,13 +47,20 @@ 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) {
this.props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: 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 })
} else {
this.props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId })
userFilter = filtersMap[FilterKey.USERANONYMOUSID];
userFilter.value = [userAnonymousId];
// this.props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId })
}
this.props.applyFilter()
this.props.addFilter(userFilter);
// this.props.applyFilter()
}
timeout = () => {
@ -84,8 +95,8 @@ export default class SessionList extends React.PureComponent {
allList,
activeTab
} = this.props;
const hasUserFilter = filters.map(i => i.key).includes(KEYS.USERID);
const _filterKeys = filters.map(i => i.key);
const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
const { showPages } = this.state;
const displayedCount = Math.min(showPages * PER_PAGE, list.size);

4
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
View file

@ -65,7 +65,7 @@
padding: 8px 10px;
cursor: pointer;
border-radius: 3px;
transition: all 0.4s;
/* transition: all 0.4s; */
margin-bottom: 5px;
max-width: 100%;
& .label {
@ -76,6 +76,6 @@
&:hover {
background-color: $gray-lightest;
transition: all 0.2s;
/* transition: all 0.2s; */
}
}

2
frontend/app/components/shared/SaveFunnelButton/SaveFunnelButton.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { IconButton } from 'UI';
import FunnelSaveModal from 'Components/Funnels/FunnelSaveModal';
import FunnelSaveModal from 'App/components/Funnels/FunnelSaveModal';
export default function SaveFunnelButton() {
const [showModal, setshowModal] = useState(false)

16
frontend/app/components/shared/SessionSearch/SessionSearch.tsx
View file

@ -5,12 +5,13 @@ 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';
import { edit, addFilter } from 'Duck/search';
import SaveFunnelButton from '../SaveFunnelButton';
interface Props {
appliedFilter: any;
edit: typeof edit;
addFilter: typeof addFilter;
}
function SessionSearch(props) {
const { appliedFilter } = props;
@ -18,12 +19,13 @@ function SessionSearch(props) {
const hasFilters = appliedFilter.filters.filter(i => !i.isEvent).size > 0;
const onAddFilter = (filter) => {
filter.value = [""]
const newFilters = appliedFilter.filters.concat(filter);
props.edit({
...appliedFilter.filter,
filters: newFilters,
});
props.addFilter(filter);
// filter.value = [""]
// const newFilters = appliedFilter.filters.concat(filter);
// props.edit({
// ...appliedFilter.filter,
// filters: newFilters,
// });
}
const onUpdateFilter = (filterIndex, filter) => {

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

@ -19,6 +19,7 @@ const FETCH = fetchType(name);
const SAVE = saveType(name);
const EDIT = editType(name);
const REMOVE = removeType(name);
const ADD_FILTER = `${name}/ADD_FILTER`;
const APPLY_SAVED_SEARCH = `${name}/APPLY_SAVED_SEARCH`;
const CLEAR_SEARCH = `${name}/CLEAR_SEARCH`;
const UPDATE = `${name}/UPDATE`;
@ -189,4 +190,10 @@ export const clearSearch = () => (dispatch, getState) => {
return dispatch({
type: CLEAR_SEARCH,
});
}
export const addFilter = (filter) => (dispatch, getState) => {
const instance = getState().getIn([ 'search', 'instance']);
const filters = instance.filters.push(filter);
return dispatch(edit(instance.set('filters', filters)));
}