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

Merge branch 'sessions-list' into dev

Browse source
This commit is contained in:
Shekar Siri 2022-06-23 11:33:33 +02:00
commit f96100fea9
11 changed files with 114 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -95,42 +95,48 @@ export default class SessionList extends React.PureComponent {
const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
return (
<NoContent
title={<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
{this.getNoContentMessage(activeTab)}
</div>}
// subtext="Please try changing your search parameters."
// animatedIcon="no-results"
show={ !loading && list.size === 0}
subtext={
<div>
<div>Please try changing your search parameters.</div>
</div>
}
>
<Loader loading={ loading }>
{ list.map(session => (
<SessionItem
key={ session.sessionId }
session={ session }
hasUserFilter={hasUserFilter}
onUserClick={this.onUserClick}
metaList={metaList}
lastPlayedSessionId={lastPlayedSessionId}
/>
))}
</Loader>
<div className="w-full flex items-center justify-center py-6">
<Pagination
page={currentPage}
totalPages={Math.ceil(total / PER_PAGE)}
onPageChange={(page) => this.props.updateCurrentPage(page)}
limit={PER_PAGE}
debounceRequest={1000}
/>
<div className="bg-white p-3 rounded border">
<NoContent
title={<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
{this.getNoContentMessage(activeTab)}
</div>}
// subtext="Please try changing your search parameters."
// animatedIcon="no-results"
show={ !loading && list.size === 0}
subtext={
<div>
<div>Please try changing your search parameters.</div>
</div>
}
>
<Loader loading={ loading }>
{ list.map(session => (
<>
<SessionItem
key={ session.sessionId }
session={ session }
hasUserFilter={hasUserFilter}
onUserClick={this.onUserClick}
metaList={metaList}
lastPlayedSessionId={lastPlayedSessionId}
/>
<div className="border-b" />
</>
))}
</Loader>
<div className="w-full flex items-center justify-center py-6">
<Pagination
page={currentPage}
totalPages={Math.ceil(total / PER_PAGE)}
onPageChange={(page) => this.props.updateCurrentPage(page)}
limit={PER_PAGE}
debounceRequest={1000}
/>
</div>
</NoContent>
</div>
</NoContent>
);
}

5
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
View file

@ -16,7 +16,10 @@ function CustomMetricTableSessions(props: Props) {
return useObserver(() => (
<NoContent show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0} size="small">
{metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
<SessionItem session={session} key={session.sessionId} />
<>
<SessionItem session={session} key={session.sessionId} />
<div className="border-b" />
</>
))}
{isEdit && (

7
frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
View file

@ -90,7 +90,7 @@ function WidgetSessions(props: Props) {
)}
</div>
<div className="mt-3">
<div className="mt-3 bg-white p-3 rounded border">
<Loader loading={loading}>
<NoContent
title={
@ -102,7 +102,10 @@ function WidgetSessions(props: Props) {
show={filteredSessions.sessions.length === 0}
>
{filteredSessions.sessions.map((session: any) => (
<SessionItem key={ session.sessionId } session={ session } />
<>
<SessionItem key={ session.sessionId } session={ session } />
<div className="border-b" />
</>
))}
<div className="w-full flex items-center justify-center py-6">

9
frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
View file

@ -36,7 +36,14 @@ class SessionList extends React.PureComponent {
<Icon name="window" size="14" color="gray-medium" marginRight="10" />
<span>{ site.name }</span>
</div>
{ site.sessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
<div className="bg-white p-3 rounded border">
{ site.sessions.map(session => (
<>
<SessionItem key={ session.sessionId } session={ session } />
<div className="border-b" />
</>
)) }
</div>
</div>
)) }
</div>

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

@ -124,40 +124,46 @@ function LiveSessionList(props: Props) {
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
</div>
</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> and ensure you're using tracker-assist <span className="font-medium">v3.5.0</span> or higher.
</span>
}
image={<img src="/assets/img/live-sessions.png"
style={{ width: '70%', marginBottom: '30px' }}/>}
show={ !loading && list.size === 0}
>
<Loader loading={ loading }>
{list.map(session => (
<SessionItem
key={ session.sessionId }
session={ session }
live
hasUserFilter={hasUserFilter}
onUserClick={onUserClick}
metaList={metaList}
/>
))}
title={"No live sessions."}
subtext={
<span>
See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> and ensure you're using tracker-assist <span className="font-medium">v3.5.0</span> or higher.
</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">
<Loader loading={ loading }>
{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>
</Loader>
</NoContent>
<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>
</Loader>
</div>
</NoContent>
</div>
)
}

2
frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
View file

@ -36,7 +36,7 @@ export default function PlayLink(props: Props) {
onMouseEnter={() => toggleHover(true)}
onMouseLeave={() => toggleHover(false)}
>
<Icon name={iconName} size="42" color={isAssist ? "tealx" : "teal"} />
<Icon name={iconName} size={38} color={isAssist ? "tealx" : "teal"} />
</Link>
)
}

19
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -5,6 +5,7 @@ import {
Avatar,
TextEllipsis,
Label,
Icon,
} from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
@ -104,7 +105,7 @@ function SessionItem(props: RouteComponentProps<Props>) {
});
return (
<div className={ cn(stl.sessionItem, "flex flex-col p-3 mb-3") } id="session-item" >
<div className={ cn(stl.sessionItem, "flex flex-col p-2") } id="session-item" >
<div className="flex items-start">
<div className={ cn('flex items-center w-full')}>
<div className="flex items-center pr-2" style={{ width: "30%"}}>
@ -114,36 +115,38 @@ function SessionItem(props: RouteComponentProps<Props>) {
className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, [stl.userName]: !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
>
<TextEllipsis text={userDisplayName} maxWidth={200} popupProps={{ inverted: true, size: 'tiny' }} />
<TextEllipsis text={userDisplayName} maxWidth="200" popupProps={{ inverted: true, size: 'tiny' }} />
</div>
</div>
</div>
<div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
<div>{formatTimeOrDate(startedAt, timezone) }</div>
<div className="flex items-center color-gray-medium">
<div className="flex items-center color-gray-medium py-1">
{!isAssist && (
<>
<div className="color-gray-medium">
<span className="mr-1">{ eventsCount }</span>
<span>{ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' }</span>
</div>
<div className="mx-2 text-4xl">·</div>
<Icon name="circle-fill" size={3} className="mx-4" />
</>
)}
<div>{ live ? <Counter startTime={startedAt} /> : formattedDuration }</div>
</div>
</div>
<div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
<div style={{ height: '21px'}}><CountryFlag country={ userCountry } style={{ paddingTop: '4px' }} label /></div>
<div className="color-gray-medium flex items-center">
<div style={{ height: '21px'}}>
<CountryFlag country={ userCountry } style={{ paddingTop: '4px' }} label />
</div>
<div className="color-gray-medium flex items-center py-1">
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ capitalize(userBrowser) } popupProps={{ inverted: true, size: "tiny" }} />
</span>
<div className="mx-2 text-4xl">·</div>
<Icon name="circle-fill" size={3} className="mx-4" />
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ capitalize(userOs) } popupProps={{ inverted: true, size: "tiny" }} />
</span>
<div className="mx-2 text-4xl">·</div>
<Icon name="circle-fill" size={3} className="mx-4" />
<span className="capitalize" style={{ maxWidth: '70px'}}>
<TextEllipsis text={ capitalize(userDeviceType) } popupProps={{ inverted: true, size: "tiny" }} />
</span>

6
frontend/app/components/shared/SessionItem/sessionItem.module.css
View file

@ -1,8 +1,8 @@
.sessionItem {
background-color: #fff;
user-select: none;
border-radius: 3px;
border: solid thin #EEEEEE;
/* border-radius: 3px; */
/* border: solid thin #EEEEEE; */
transition: all 0.4s;
& .favorite {
@ -14,7 +14,7 @@
&:hover {
background-color: $active-blue;
border: solid thin $active-blue-border;
/* border: solid thin $active-blue-border; */
transition: all 0.2s;
& .playLink {

2
frontend/app/components/ui/Icon/Icon.js
View file

@ -11,7 +11,7 @@ const Icon = ({
color = 'gray-medium',
className = '',
style={},
marginRight,
marginRight = 0,
inline = false,
...props
}) => {

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

@ -306,7 +306,7 @@ const SVG = (props: Props) => {
case 'play-circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zM40 256c0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216zm331.7-18-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM192 335.8V176.9c0-4.7 5.1-7.6 9.1-5.1l134.5 81.7c3.9 2.4 3.8 8.1-.1 10.3L201 341c-4 2.3-9-.6-9-5.2z"/></svg>;
case 'play-fill-new': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/></svg>;
case 'play-fill': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M26 0A26 26 0 1 1 0 26 26 26 0 0 1 26 0Zm0 1.58A24.42 24.42 0 1 0 50.42 26 24.42 24.42 0 0 0 26 1.58Zm10.3 22c2.27 1.36 2.27 3.6 0 5l-13.16 7.79c-2.28 1.36-4.14.44-4.14-2v-16.7c0-2.49 1.86-3.4 4.13-2Z"/></svg>;
case 'play-hover': return <svg width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M21 0a21 21 0 1 1 0 42 21 21 0 0 1 0-42Zm0 1.276a19.724 19.724 0 1 0 0 39.448 19.724 19.724 0 0 0 0-39.448Z"/><circle cx="21" cy="21" r="20"/><path d="M29.32 23.084c1.833-1.13 1.833-2.94 0-4.039l-10.638-6.389c-1.833-1.13-3.336-.395-3.336 1.616V27.76c0 1.971 1.503 2.714 3.344 1.616l10.63-6.292Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h42v42H0z"/></clipPath></defs></svg>;
case 'play-hover': return <svg viewBox="0 0 42 42" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M21 0a21 21 0 1 1 0 42 21 21 0 0 1 0-42Zm0 1.276a19.724 19.724 0 1 0 0 39.448 19.724 19.724 0 0 0 0-39.448Z"/><circle cx="21" cy="21" r="20"/><path d="M29.32 23.084c1.833-1.13 1.833-2.94 0-4.039l-10.638-6.389c-1.833-1.13-3.336-.395-3.336 1.616V27.76c0 1.971 1.503 2.714 3.344 1.616l10.63-6.292Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h42v42H0z"/></clipPath></defs></svg>;
case 'play': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/></svg>;
case 'plus-circle': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>;
case 'plus': return <svg viewBox="0 0 8 8" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4 0a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 4 0Z"/></svg>;

2
frontend/app/svg/icons/play-hover.svg
View file

@ -1,4 +1,4 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="inherit" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 42 42" fill="inherit" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_47)">
<path d="M21 0C25.1534 0 29.2135 1.23163 32.667 3.53914C36.1204 5.84665 38.812 9.1264 40.4015 12.9636C41.9909 16.8009 42.4068 21.0233 41.5965 25.0969C40.7862 29.1705 38.7861 32.9123 35.8492 35.8492C32.9123 38.7861 29.1705 40.7862 25.0969 41.5965C21.0233 42.4068 16.8009 41.9909 12.9636 40.4015C9.1264 38.812 5.84665 36.1204 3.53914 32.667C1.23163 29.2135 0 25.1534 0 21C0 15.4305 2.21249 10.089 6.15076 6.15076C10.089 2.21249 15.4305 0 21 0ZM21 1.27615C17.099 1.27615 13.2856 2.43294 10.042 4.60022C6.79845 6.76751 4.27039 9.84795 2.77754 13.452C1.28469 17.0561 0.894093 21.0219 1.65514 24.8479C2.41619 28.674 4.29471 32.1884 7.05313 34.9469C9.81156 37.7053 13.326 39.5838 17.1521 40.3449C20.9781 41.1059 24.9439 40.7153 28.548 39.2225C32.1521 37.7296 35.2325 35.2015 37.3998 31.958C39.5671 28.7144 40.7238 24.901 40.7238 21C40.7238 18.4098 40.2137 15.845 39.2225 13.452C38.2312 11.059 36.7784 8.88466 34.9469 7.05313C33.1153 5.22161 30.941 3.76876 28.548 2.77754C26.155 1.78633 23.5902 1.27615 21 1.27615Z" />
<circle cx="21" cy="21" r="20" fill="inherit" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB