89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { fetchList } from 'Duck/sessions';
|
|
import { connect } from 'react-redux';
|
|
import { NoContent, Loader } from 'UI';
|
|
import { List, Map } from 'immutable';
|
|
import SessionItem from 'Shared/SessionItem';
|
|
import withPermissions from 'HOCs/withPermissions'
|
|
import { KEYS } from 'Types/filter/customFilter';
|
|
import { applyFilter, addAttribute } from 'Duck/filters';
|
|
import Filter from 'Types/filter';
|
|
|
|
const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
|
|
|
|
interface Props {
|
|
loading: Boolean,
|
|
list?: List<any>,
|
|
fetchList: (params) => void,
|
|
applyFilter: () => void,
|
|
filters: Filter
|
|
addAttribute: (obj) => void,
|
|
}
|
|
|
|
function LiveSessionList(props: Props) {
|
|
const { loading, list, filters } = props;
|
|
var timeoutId;
|
|
const hasUserFilter = filters && filters.filters.map(i => i.key).includes(KEYS.USERID);
|
|
|
|
useEffect(() => {
|
|
props.fetchList(filters.toJS());
|
|
timeout();
|
|
return () => {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [])
|
|
|
|
const onUserClick = (userId, userAnonymousId) => {
|
|
if (userId) {
|
|
props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId })
|
|
} else {
|
|
props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId })
|
|
}
|
|
|
|
props.applyFilter()
|
|
}
|
|
|
|
const timeout = () => {
|
|
timeoutId = setTimeout(() => {
|
|
props.fetchList(filters.toJS());
|
|
timeout();
|
|
}, AUTOREFRESH_INTERVAL);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<NoContent
|
|
title={"No live sessions."}
|
|
subtext={
|
|
<span>
|
|
See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> if you haven't yet done so.
|
|
</span>
|
|
}
|
|
image={<img src="/img/live-sessions.png" style={{ width: '70%', marginBottom: '30px' }}/>}
|
|
show={ !loading && list && list.size === 0}
|
|
>
|
|
<Loader loading={ loading }>
|
|
{list && list.map(session => (
|
|
<SessionItem
|
|
key={ session.sessionId }
|
|
session={ session }
|
|
live
|
|
hasUserFilter={hasUserFilter}
|
|
onUserClick={onUserClick}
|
|
/>
|
|
))}
|
|
</Loader>
|
|
</NoContent>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default withPermissions(['ASSIST_LIVE'])(connect(
|
|
(state) => ({
|
|
list: state.getIn(['sessions', 'liveSessions']),
|
|
loading: state.getIn([ 'sessions', 'loading' ]),
|
|
filters: state.getIn([ 'filters', 'appliedFilter' ]),
|
|
}),
|
|
{
|
|
fetchList, applyFilter, addAttribute }
|
|
)(LiveSessionList));
|