change(ui) - disable assist sort when there are no meta options to choose
This commit is contained in:
Shekar Siri
parent
737c334a39
commit
62dfc6fede
1 changed files with 170 additions and 154 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { NoContent, Loader, Pagination } from 'UI';
|
||||
import { NoContent, Loader, Pagination, Popup } from 'UI';
|
||||
import { List } from 'immutable';
|
||||
import SessionItem from 'Shared/SessionItem';
|
||||
import withPermissions from 'HOCs/withPermissions'
|
||||
import withPermissions from 'HOCs/withPermissions';
|
||||
import { KEYS } from 'Types/filter/customFilter';
|
||||
import { applyFilter } from 'Duck/liveSearch';
|
||||
import { FilterKey } from 'App/types/filter/filterType';
|
||||
|
|
@ -12,175 +12,191 @@ import Select from 'Shared/Select';
|
|||
import SortOrderButton from 'Shared/SortOrderButton';
|
||||
import { capitalize } from 'App/utils';
|
||||
import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
|
||||
import cn from 'classnames';
|
||||
|
||||
const AUTOREFRESH_INTERVAL = .5 * 60 * 1000
|
||||
const AUTOREFRESH_INTERVAL = 0.5 * 60 * 1000;
|
||||
const PER_PAGE = 10;
|
||||
|
||||
interface Props {
|
||||
loading: boolean,
|
||||
metaListLoading: boolean
|
||||
list: List<any>,
|
||||
// fetchLiveList: () => Promise<void>,
|
||||
applyFilter: (filter: any) => void,
|
||||
filter: any,
|
||||
// addAttribute: (obj: any) => void,
|
||||
addFilterByKeyAndValue: (key: FilterKey, value: string) => void,
|
||||
updateCurrentPage: (page: number) => void,
|
||||
currentPage: number,
|
||||
totla: number,
|
||||
metaList: any,
|
||||
sort: any,
|
||||
total: number,
|
||||
loading: boolean;
|
||||
metaListLoading: boolean;
|
||||
list: List<any>;
|
||||
// fetchLiveList: () => Promise<void>,
|
||||
applyFilter: (filter: any) => void;
|
||||
filter: any;
|
||||
// addAttribute: (obj: any) => void,
|
||||
addFilterByKeyAndValue: (key: FilterKey, value: string) => void;
|
||||
updateCurrentPage: (page: number) => void;
|
||||
currentPage: number;
|
||||
totla: number;
|
||||
metaList: any;
|
||||
sort: any;
|
||||
total: number;
|
||||
}
|
||||
|
||||
function LiveSessionList(props: Props) {
|
||||
const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props;
|
||||
var timeoutId: any;
|
||||
const { filters } = filter;
|
||||
const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
|
||||
const sortOptions = metaList.map((i: any) => ({
|
||||
label: capitalize(i), value: i
|
||||
})).toJS();
|
||||
const { loading, metaListLoading, filter, list, currentPage, total, metaList = [], sort } = props;
|
||||
var timeoutId: any;
|
||||
const { filters } = filter;
|
||||
const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
|
||||
const sortOptions = metaList
|
||||
.map((i: any) => ({
|
||||
label: capitalize(i),
|
||||
value: i,
|
||||
}))
|
||||
.toJS();
|
||||
|
||||
// useEffect(() => {
|
||||
// if (metaListLoading || metaList.size === 0 || !!filter.sort) return;
|
||||
// useEffect(() => {
|
||||
// if (metaListLoading || metaList.size === 0 || !!filter.sort) return;
|
||||
|
||||
// if (sortOptions[0]) {
|
||||
// props.applyFilter({ sort: sortOptions[0].value });
|
||||
// }
|
||||
// }, [metaListLoading]);
|
||||
// if (sortOptions[0]) {
|
||||
// props.applyFilter({ sort: sortOptions[0].value });
|
||||
// }
|
||||
// }, [metaListLoading]);
|
||||
|
||||
// useEffect(() => {
|
||||
// const filteredSessions = filters.size > 0 ? props.list.filter(session => {
|
||||
// let hasValidFilter = true;
|
||||
// filters.forEach(filter => {
|
||||
// if (!hasValidFilter) return;
|
||||
// useEffect(() => {
|
||||
// const filteredSessions = filters.size > 0 ? props.list.filter(session => {
|
||||
// let hasValidFilter = true;
|
||||
// filters.forEach(filter => {
|
||||
// if (!hasValidFilter) return;
|
||||
|
||||
// const _values = filter.value.filter(i => i !== '' && i !== null && i !== undefined).map(i => i.toLowerCase());
|
||||
// if (filter.key === FilterKey.USERID) {
|
||||
// const _userId = session.userId ? session.userId.toLowerCase() : '';
|
||||
// hasValidFilter = _values.length > 0 ? (_values.includes(_userId) && hasValidFilter) || _values.some(i => _userId.includes(i)) : hasValidFilter;
|
||||
// }
|
||||
// if (filter.category === FilterCategory.METADATA) {
|
||||
// const _source = session.metadata[filter.key] ? session.metadata[filter.key].toLowerCase() : '';
|
||||
// hasValidFilter = _values.length > 0 ? (_values.includes(_source) && hasValidFilter) || _values.some(i => _source.includes(i)) : hasValidFilter;
|
||||
// }
|
||||
// })
|
||||
// return hasValidFilter;
|
||||
// }) : props.list;
|
||||
// setSessions(filteredSessions);
|
||||
// }, [filters, list]);
|
||||
// const _values = filter.value.filter(i => i !== '' && i !== null && i !== undefined).map(i => i.toLowerCase());
|
||||
// if (filter.key === FilterKey.USERID) {
|
||||
// const _userId = session.userId ? session.userId.toLowerCase() : '';
|
||||
// hasValidFilter = _values.length > 0 ? (_values.includes(_userId) && hasValidFilter) || _values.some(i => _userId.includes(i)) : hasValidFilter;
|
||||
// }
|
||||
// if (filter.category === FilterCategory.METADATA) {
|
||||
// const _source = session.metadata[filter.key] ? session.metadata[filter.key].toLowerCase() : '';
|
||||
// hasValidFilter = _values.length > 0 ? (_values.includes(_source) && hasValidFilter) || _values.some(i => _source.includes(i)) : hasValidFilter;
|
||||
// }
|
||||
// })
|
||||
// return hasValidFilter;
|
||||
// }) : props.list;
|
||||
// setSessions(filteredSessions);
|
||||
// }, [filters, list]);
|
||||
|
||||
useEffect(() => {
|
||||
props.applyFilter({ ...filter});
|
||||
timeout();
|
||||
return () => {
|
||||
clearTimeout(timeoutId)
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
props.applyFilter({ ...filter });
|
||||
timeout();
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onUserClick = (userId: string, userAnonymousId: string) => {
|
||||
if (userId) {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
|
||||
} else {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
|
||||
}
|
||||
}
|
||||
const onUserClick = (userId: string, userAnonymousId: string) => {
|
||||
if (userId) {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
|
||||
} else {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
|
||||
}
|
||||
};
|
||||
|
||||
const onSortChange = ({ value }: any) => {
|
||||
props.applyFilter({ sort: value.value });
|
||||
}
|
||||
const onSortChange = ({ value }: any) => {
|
||||
props.applyFilter({ sort: value.value });
|
||||
};
|
||||
|
||||
const timeout = () => {
|
||||
timeoutId = setTimeout(() => {
|
||||
props.applyFilter({ ...filter});
|
||||
timeout();
|
||||
}, AUTOREFRESH_INTERVAL);
|
||||
}
|
||||
const timeout = () => {
|
||||
timeoutId = setTimeout(() => {
|
||||
props.applyFilter({ ...filter });
|
||||
timeout();
|
||||
}, AUTOREFRESH_INTERVAL);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex mb-6 justify-between items-end">
|
||||
<div className="flex items-baseline">
|
||||
<h3 className="text-2xl capitalize">
|
||||
<span>Live Sessions</span>
|
||||
<span className="ml-2 font-normal color-gray-medium">{total}</span>
|
||||
</h3>
|
||||
return (
|
||||
<div>
|
||||
<div className="flex mb-6 justify-between items-end">
|
||||
<div className="flex items-baseline">
|
||||
<h3 className="text-2xl capitalize">
|
||||
<span>Live Sessions</span>
|
||||
<span className="ml-2 font-normal color-gray-medium">{total}</span>
|
||||
</h3>
|
||||
|
||||
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter }) } />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center ml-6 mr-4">
|
||||
<span className="mr-2 color-gray-medium">Sort By</span>
|
||||
<Select
|
||||
plain
|
||||
right
|
||||
options={sortOptions}
|
||||
// defaultValue={sort.field}
|
||||
onChange={onSortChange}
|
||||
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
|
||||
/>
|
||||
</div>
|
||||
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
|
||||
</div>
|
||||
</div>
|
||||
<Loader loading={ loading }>
|
||||
<NoContent
|
||||
title={"No live sessions."}
|
||||
subtext={
|
||||
<span>
|
||||
See how to setup the <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'Assist'}</a> plugin, if you haven’t done that already.
|
||||
</span>
|
||||
}
|
||||
image={<img src="/assets/img/live-sessions.png"
|
||||
style={{ width: '70%', marginBottom: '30px' }}/>}
|
||||
show={ !loading && list.size === 0}
|
||||
>
|
||||
<div className="bg-white p-3 rounded border">
|
||||
|
||||
{list.map(session => (
|
||||
<>
|
||||
<SessionItem
|
||||
key={ session.sessionId }
|
||||
session={ session }
|
||||
live
|
||||
hasUserFilter={hasUserFilter}
|
||||
onUserClick={onUserClick}
|
||||
metaList={metaList}
|
||||
/>
|
||||
<div className="border-b" />
|
||||
</>
|
||||
))}
|
||||
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
onPageChange={(page: any) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
/>
|
||||
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center ml-6 mr-4">
|
||||
<span className="mr-2 color-gray-medium">Sort By</span>
|
||||
<Popup
|
||||
content="No metadata available to sort"
|
||||
disabled={sortOptions.length > 0}
|
||||
>
|
||||
<div className={ cn("flex items-center", { 'disabled': sortOptions.length === 0})} >
|
||||
<Select
|
||||
plain
|
||||
right
|
||||
options={sortOptions}
|
||||
// defaultValue={sort.field}
|
||||
onChange={onSortChange}
|
||||
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
|
||||
/>
|
||||
<div className="mx-2" />
|
||||
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
|
||||
</div>
|
||||
</Popup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
</div>
|
||||
)
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
title={'No live sessions.'}
|
||||
subtext={
|
||||
<span>
|
||||
See how to setup the{' '}
|
||||
<a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">
|
||||
{'Assist'}
|
||||
</a>{' '}
|
||||
plugin, if you haven’t done that already.
|
||||
</span>
|
||||
}
|
||||
image={<img src="/assets/img/live-sessions.png" style={{ width: '70%', marginBottom: '30px' }} />}
|
||||
show={!loading && list.size === 0}
|
||||
>
|
||||
<div className="bg-white p-3 rounded border">
|
||||
{list.map((session) => (
|
||||
<>
|
||||
<SessionItem
|
||||
key={session.sessionId}
|
||||
session={session}
|
||||
live
|
||||
hasUserFilter={hasUserFilter}
|
||||
onUserClick={onUserClick}
|
||||
metaList={metaList}
|
||||
/>
|
||||
<div className="border-b" />
|
||||
</>
|
||||
))}
|
||||
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
onPageChange={(page: any) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default withPermissions(['ASSIST_LIVE'])(connect(
|
||||
(state: any) => ({
|
||||
list: state.getIn(['liveSearch', 'list']),
|
||||
loading: state.getIn([ 'liveSearch', 'fetchList', 'loading' ]),
|
||||
metaListLoading: state.getIn([ 'customFields', 'fetchRequest', 'loading' ]),
|
||||
filter: state.getIn([ 'liveSearch', 'instance' ]),
|
||||
total: state.getIn([ 'liveSearch', 'total' ]),
|
||||
currentPage: state.getIn(["liveSearch", "currentPage"]),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
||||
sort: state.getIn(['liveSearch', 'sort']),
|
||||
}),
|
||||
{
|
||||
applyFilter,
|
||||
addFilterByKeyAndValue,
|
||||
updateCurrentPage,
|
||||
}
|
||||
)(LiveSessionList));
|
||||
export default withPermissions(['ASSIST_LIVE'])(
|
||||
connect(
|
||||
(state: any) => ({
|
||||
list: state.getIn(['liveSearch', 'list']),
|
||||
loading: state.getIn(['liveSearch', 'fetchList', 'loading']),
|
||||
metaListLoading: state.getIn(['customFields', 'fetchRequest', 'loading']),
|
||||
filter: state.getIn(['liveSearch', 'instance']),
|
||||
total: state.getIn(['liveSearch', 'total']),
|
||||
currentPage: state.getIn(['liveSearch', 'currentPage']),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
||||
sort: state.getIn(['liveSearch', 'sort']),
|
||||
}),
|
||||
{
|
||||
applyFilter,
|
||||
addFilterByKeyAndValue,
|
||||
updateCurrentPage,
|
||||
}
|
||||
)(LiveSessionList)
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue