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

change(ui) - sessions empty list icon

Browse source
This commit is contained in:
Shekar Siri 2022-10-26 13:06:25 +02:00
parent 2d0af7c0c2
commit e6b1ed67b2
6 changed files with 181 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

324
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -20,174 +20,188 @@ 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 = [{ label: 'Newest', value: 'timestamp' }].concat(
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 = [{ label: 'Newest', value: 'timestamp' }].concat(
metaList
.map((i: any) => ({
label: capitalize(i),
value: i,
}))
.toJS()
);
useEffect(() => {
if (metaListLoading) return;
const _filter = { ...filter };
if (sortOptions[1] && !filter.sort) {
_filter.sort = sortOptions[1].value;
}
props.applyFilter(_filter);
timeout();
return () => {
clearTimeout(timeoutId);
};
}, [metaListLoading]);
const onUserClick = (userId: string, userAnonymousId: string) => {
if (userId) {
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
} else {
props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
}
useEffect(() => {
if (metaListLoading) return;
const _filter = { ...filter };
if (sortOptions[1] && !filter.sort) {
_filter.sort = sortOptions[1].value;
}
props.applyFilter(_filter);
timeout();
return () => {
clearTimeout(timeoutId);
};
}, [metaListLoading]);
const onSortChange = ({ value }: any) => {
props.applyFilter({ sort: value.value });
};
const onUserClick = (userId: string, userAnonymousId: string) => {
if (userId) {
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
} else {
props.addFilterByKeyAndValue(FilterKey.USERANONYMOUSID, userAnonymousId);
}
};
const timeout = () => {
timeoutId = setTimeout(() => {
props.applyFilter({ ...filter });
timeout();
}, AUTOREFRESH_INTERVAL);
};
const onSortChange = ({ value }: any) => {
props.applyFilter({ sort: value.value });
};
return (
<div>
<div className="bg-white p-3 rounded border">
<div className="flex mb-6 justify-between items-center">
<div className="flex items-baseline">
<h3 className="text-2xl capitalize mr-4">
<span>Live Sessions</span>
{/* <span className="ml-2 font-normal color-gray-medium">{numberWithCommas(total)}</span> */}
</h3>
const timeout = () => {
timeoutId = setTimeout(() => {
props.applyFilter({ ...filter });
timeout();
}, AUTOREFRESH_INTERVAL);
};
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
</div>
<div className="flex items-center">
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Sort By</span>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
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>
</div>
</div>
</div>
<Loader loading={loading}>
<NoContent
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No live sessions found.</div>
</div>
}
subtext={
<div className="text-center flex justify-center items-center flex-col">
<span>
Assist allows you to support your users through live screen viewing and audio/video calls.{' '}
<a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">
{'Learn More'}
</a>
</span>
return (
<div>
<div className="bg-white p-3 rounded border">
<div className="flex mb-6 justify-between items-center">
<div className="flex items-center">
<h3 className="text-2xl capitalize mr-4">
<span>Live Sessions</span>
{/* <span className="ml-2 font-normal color-gray-medium">{numberWithCommas(total)}</span> */}
</h3>
<Button variant="text-primary" className="mt-4" icon="sync-alt" onClick={() => props.applyFilter({ ...filter })}>
Refresh
</Button>
</div>
}
// image={<img src="/assets/img/live-sessions.png" style={{ width: '70%', marginBottom: '30px' }} />}
show={!loading && list.size === 0}
>
<div>
{list.map((session) => (
<React.Fragment key={session.sessionId}>
<SessionItem
session={session}
live
hasUserFilter={hasUserFilter}
onUserClick={onUserClick}
metaList={metaList}
/>
<div className="border-b" />
</React.Fragment>
))}
</div>
<div className={cn("flex items-center justify-between p-5", { disabled: loading })}>
<div>
Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
<span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
<span className="font-medium">{numberWithCommas(total)}</span> sessions.
</div>
<Pagination
page={currentPage}
totalPages={Math.ceil(total / PER_PAGE)}
onPageChange={(page: any) => props.updateCurrentPage(page)}
limit={PER_PAGE}
debounceRequest={500}
/>
</div>
</NoContent>
</Loader>
<LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
</div>
<div className="flex items-center">
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Sort By</span>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
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>
</div>
</div>
</div>
);
<Loader loading={loading}>
<NoContent
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No live sessions found.</div>
</div>
}
subtext={
<div className="text-center flex justify-center items-center flex-col">
<span>
Assist allows you to support your users through live screen viewing and
audio/video calls.{' '}
<a
target="_blank"
className="link"
href="https://docs.openreplay.com/plugins/assist"
>
{'Learn More'}
</a>
</span>
<Button
variant="text-primary"
className="mt-4"
icon="arrow-repeat"
iconSize={20}
onClick={() => props.applyFilter({ ...filter })}
>
Refresh
</Button>
</div>
}
// image={<img src="/assets/img/live-sessions.png" style={{ width: '70%', marginBottom: '30px' }} />}
show={!loading && list.size === 0}
>
<div>
{list.map((session) => (
<React.Fragment key={session.sessionId}>
<SessionItem
session={session}
live
hasUserFilter={hasUserFilter}
onUserClick={onUserClick}
metaList={metaList}
/>
<div className="border-b" />
</React.Fragment>
))}
</div>
<div className={cn('flex items-center justify-between p-5', { disabled: loading })}>
<div>
Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
<span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
<span className="font-medium">{numberWithCommas(total)}</span> sessions.
</div>
<Pagination
page={currentPage}
totalPages={Math.ceil(total / PER_PAGE)}
onPageChange={(page: any) => props.updateCurrentPage(page)}
limit={PER_PAGE}
debounceRequest={500}
/>
</div>
</NoContent>
</Loader>
</div>
</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)
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)
);

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

@ -10,7 +10,7 @@ interface Props {
className?: string;
}
export default function ReloadButton(props: Props) {
const { loading, onClick, iconSize = '14', iconName = 'sync-alt', className = '' } = props;
const { loading, onClick, iconSize = '20', iconName = 'arrow-repeat', className = '' } = props;
return (
<Popup content="Refresh">
<div

3
frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
View file

@ -156,7 +156,8 @@ function SessionList(props: Props) {
<Button
variant="text-primary"
className="mt-4"
icon="sync-alt"
icon="arrow-repeat"
iconSize={20}
onClick={() => props.fetchSessions(null, true)}
>
Refresh

4
frontend/app/components/ui/Button/Button.tsx
View file

@ -11,6 +11,7 @@ interface Props {
variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green'
loading?: boolean;
icon?: string;
iconSize?: number;
rounded?: boolean;
tooltip?: any;
[x: string]: any;
@ -18,6 +19,7 @@ interface Props {
export default (props: Props) => {
const {
icon = '',
iconSize = 18,
className = '',
variant = 'default', // 'default|primary|text|text-primary|text-red|outline',
type = 'button',
@ -79,7 +81,7 @@ export default (props: Props) => {
const render = () => (
<button {...rest} type={type} className={cn(classes, className)}>
{icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size="16" />}
{icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size={iconSize} />}
{loading && (
<div className="absolute flex items-center justify-center inset-0 z-1 rounded">
<CircularLoader />

3
frontend/app/components/ui/SVG.tsx
View file

File diff suppressed because one or more lines are too long

4
frontend/app/svg/icons/arrow-repeat.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 559 B