131 lines
4.6 KiB
JavaScript
131 lines
4.6 KiB
JavaScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { connect } from 'react-redux';
|
|
import withPageTitle from 'HOCs/withPageTitle';
|
|
import { fetchFavoriteList as fetchFavoriteSessionList } from 'Duck/sessions';
|
|
import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
|
|
import { KEYS } from 'Types/filter/customFilter';
|
|
import SessionList from './SessionList';
|
|
import stl from './bugFinder.module.css';
|
|
import withLocationHandlers from 'HOCs/withLocationHandlers';
|
|
import { fetch as fetchFilterVariables } from 'Duck/sources';
|
|
import { fetchSources } from 'Duck/customField';
|
|
import { setActiveTab } from 'Duck/search';
|
|
import SessionsMenu from './SessionsMenu/SessionsMenu';
|
|
import NoSessionsMessage from 'Shared/NoSessionsMessage';
|
|
import SessionSearch from 'Shared/SessionSearch';
|
|
import MainSearchBar from 'Shared/MainSearchBar';
|
|
import { clearSearch, fetchSessions, addFilterByKeyAndValue } from 'Duck/search';
|
|
import { FilterKey } from 'Types/filter/filterType';
|
|
|
|
const weakEqual = (val1, val2) => {
|
|
if (!!val1 === false && !!val2 === false) return true;
|
|
if (!val1 !== !val2) return false;
|
|
return `${val1}` === `${val2}`;
|
|
};
|
|
|
|
const allowedQueryKeys = [
|
|
'userOs',
|
|
'userId',
|
|
'userBrowser',
|
|
'userDevice',
|
|
'userCountry',
|
|
'startDate',
|
|
'endDate',
|
|
'minDuration',
|
|
'maxDuration',
|
|
'referrer',
|
|
'sort',
|
|
'order',
|
|
];
|
|
|
|
@withLocationHandlers()
|
|
@connect(
|
|
(state) => ({
|
|
filter: state.getIn(['filters', 'appliedFilter']),
|
|
variables: state.getIn(['customFields', 'list']),
|
|
sources: state.getIn(['customFields', 'sources']),
|
|
filterValues: state.get('filterValues'),
|
|
favoriteList: state.getIn(['sessions', 'favoriteList']),
|
|
currentProjectId: state.getIn(['site', 'siteId']),
|
|
sites: state.getIn(['site', 'list']),
|
|
watchdogs: state.getIn(['watchdogs', 'list']),
|
|
activeFlow: state.getIn(['filters', 'activeFlow']),
|
|
sessions: state.getIn(['sessions', 'list']),
|
|
}),
|
|
{
|
|
fetchFavoriteSessionList,
|
|
applyFilter,
|
|
addAttribute,
|
|
fetchFilterVariables,
|
|
fetchSources,
|
|
clearEvents,
|
|
setActiveTab,
|
|
clearSearch,
|
|
fetchSessions,
|
|
addFilterByKeyAndValue,
|
|
}
|
|
)
|
|
@withPageTitle('Sessions - OpenReplay')
|
|
export default class BugFinder extends React.PureComponent {
|
|
state = { showRehydratePanel: false };
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
// 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()
|
|
// };
|
|
// });
|
|
// if (props.sessions.size === 0) {
|
|
// props.fetchSessions();
|
|
// }
|
|
|
|
const queryFilter = this.props.query.all(allowedQueryKeys);
|
|
if (queryFilter.hasOwnProperty('userId')) {
|
|
props.addFilterByKeyAndValue(FilterKey.USERID, queryFilter.userId);
|
|
} else {
|
|
if (props.sessions.size === 0) {
|
|
props.fetchSessions();
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleRehydratePanel = () => {
|
|
this.setState({ showRehydratePanel: !this.state.showRehydratePanel });
|
|
};
|
|
|
|
setActiveTab = (tab) => {
|
|
this.props.setActiveTab(tab);
|
|
};
|
|
|
|
render() {
|
|
const { showRehydratePanel } = this.state;
|
|
|
|
return (
|
|
<div className="page-margin container-90 flex relative">
|
|
<div className="flex-1 flex">
|
|
<div className="side-menu">
|
|
<SessionsMenu onMenuItemClick={this.setActiveTab} toggleRehydratePanel={this.toggleRehydratePanel} />
|
|
</div>
|
|
<div className={cn('side-menu-margined', stl.searchWrapper)}>
|
|
<NoSessionsMessage />
|
|
<div className="mb-5">
|
|
<MainSearchBar />
|
|
<SessionSearch />
|
|
</div>
|
|
<SessionList onMenuItemClick={this.setActiveTab} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|