feat(ui) - user sesison list modal changes

2022-08-18 17:23:41 +02:00 · 2022-08-18 17:23:41 +02:00 · 1a3335bb59
commit 1a3335bb59
parent fce2776ed9
9 changed files with 334 additions and 127 deletions
--- a/frontend/app/components/Modal/ModalOverlay.tsx
+++ b/frontend/app/components/Modal/ModalOverlay.tsx
@ -4,7 +4,7 @@ import cn from 'classnames';

 function ModalOverlay({ hideModal, children, left = false, right = false }: any) {
    return (
-        <div className="fixed w-full h-screen" style={{ zIndex: 999 }}>
+        <div className="fixed w-full h-screen" style={{ zIndex: 9999 }}>
            <div
                onClick={hideModal}
                className={stl.overlay}
--- a/frontend/app/components/Session/Session.js
+++ b/frontend/app/components/Session/Session.js
@ -9,6 +9,7 @@ import { sessions as sessionsRoute } from 'App/routes';
 import withPermissions from 'HOCs/withPermissions'
 import WebPlayer from './WebPlayer';
 import IOSPlayer from './IOSPlayer';
+import { useStore } from 'App/mstore';

 const SESSIONS_ROUTE = sessionsRoute();

@ -22,6 +23,7 @@ function Session({
 }) {
 	usePageTitle("OpenReplay Session Player");
 	const [ initializing, setInitializing ] = useState(true)
+	const { sessionStore }	= useStore();
 	useEffect(() => {
 		if (sessionId != null) {
 			fetchSession(sessionId)
@ -31,6 +33,10 @@ function Session({
 		setInitializing(false)
 	},[ sessionId ]);

+	useEffect(() => {
+		sessionStore.resetUserFilter();
+	} ,[])
+
 	return (
 		<NoContent
 			show={ hasErrors }
--- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js
@ -1,126 +1,138 @@
-import React, { useState } from 'react'
-import { connect } from 'react-redux'
-import { List } from 'immutable'
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { List } from 'immutable';
 import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
 import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames';
 import { formatTimeOrDate } from 'App/date';
-import { Avatar, TextEllipsis, SlideModal, Popup, CountryFlag, Icon } from 'UI'
-import cn from 'classnames'
-import { withRequest } from 'HOCs'
-import SessionInfoItem from '../../SessionInfoItem'
+import { Avatar, TextEllipsis, SlideModal, Popup, CountryFlag, Icon } from 'UI';
+import cn from 'classnames';
+import { withRequest } from 'HOCs';
+import SessionInfoItem from '../../SessionInfoItem';
 import SessionList from '../Metadata/SessionList';
-import { Tooltip } from 'react-tippy'
+import { Tooltip } from 'react-tippy';
+import { useModal } from 'App/components/Modal';
+import UserSessionsModal from 'Shared/UserSessionsModal';

-function UserCard({
-  className,
-  request,
-  session,
-  width,
-  height,
-  similarSessions,
-  loading,
- }) {
-  const { settingsStore } = useStore();
-  const { timezone } = settingsStore.sessionSettings;
+function UserCard({ className, request, session, width, height, similarSessions, loading }) {
+    const { settingsStore } = useStore();
+    const { timezone } = settingsStore.sessionSettings;

-  const [showUserSessions, setShowUserSessions] = useState(false)
-  const {
-    userBrowser,
-    userDevice,
-    userCountry,
-    userBrowserVersion,
-    userOs,
-    userOsVersion,
-    startedAt,
-    userId,
-    userAnonymousId,
-    userNumericHash,
-    userDisplayName,
-    userDeviceType,
-    revId,
-  } = session;
+    const [showUserSessions, setShowUserSessions] = useState(false);
+    const {
+        userBrowser,
+        userDevice,
+        userCountry,
+        userBrowserVersion,
+        userOs,
+        userOsVersion,
+        startedAt,
+        userId,
+        userAnonymousId,
+        userNumericHash,
+        userDisplayName,
+        userDeviceType,
+        revId,
+    } = session;

-  const hasUserDetails = !!userId || !!userAnonymousId;
-  const showSimilarSessions = () => {
-    setShowUserSessions(true);
-    request({ key: !userId ? 'USERANONYMOUSID' : 'USERID', value: userId || userAnonymousId });
-  }
+    const hasUserDetails = !!userId || !!userAnonymousId;
+    const showSimilarSessions = () => {
+        setShowUserSessions(true);
+        request({ key: !userId ? 'USERANONYMOUSID' : 'USERID', value: userId || userAnonymousId });
+    };

-  const getDimension = (width, height) => {
-    return width && height ? (
-      <div className="flex items-center">
-        { width || 'x' } <Icon name="close" size="12" className="mx-1" /> { height || 'x' }
-      </div>
-    ) : <span className="">Resolution N/A</span>;
-  }
+    const getDimension = (width, height) => {
+        return width && height ? (
+            <div className="flex items-center">
+                {width || 'x'} <Icon name="close" size="12" className="mx-1" /> {height || 'x'}
+            </div>
+        ) : (
+            <span className="">Resolution N/A</span>
+        );
+    };

-  const avatarbgSize = '38px'
-  return (
-    <div className={cn("bg-white flex items-center w-full", className)}>
-      <div className="flex items-center">
-        <Avatar iconSize="23" width={avatarbgSize} height={avatarbgSize} seed={ userNumericHash } />
-        <div className="ml-3 overflow-hidden leading-tight">
-          <TextEllipsis
-            noHint
-            className={ cn("font-medium", { 'color-teal cursor-pointer' : hasUserDetails })}
-            onClick={hasUserDetails ? showSimilarSessions : undefined}
-          >
-            { userDisplayName }
-          </TextEllipsis>
+    const avatarbgSize = '38px';
+    return (
+        <div className={cn('bg-white flex items-center w-full', className)}>
+            <div className="flex items-center">
+                <Avatar iconSize="23" width={avatarbgSize} height={avatarbgSize} seed={userNumericHash} />
+                <div className="ml-3 overflow-hidden leading-tight">
+                    <TextEllipsis
+                        noHint
+                        className={cn('font-medium', { 'color-teal cursor-pointer': hasUserDetails })}
+                        // onClick={hasUserDetails ? showSimilarSessions : undefined}
+                    >
+                        <UserName name={userDisplayName} userId={userId} hash={userNumericHash} />
+                    </TextEllipsis>

-          <div className="text-sm color-gray-medium flex items-center">
-            <span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt, timezone)}</span>
-            <span className="mx-1 font-bold text-xl">&#183;</span>
-            <span>{countries[userCountry]}</span>
-            <span className="mx-1 font-bold text-xl">&#183;</span>
-            <span className='capitalize'>{userBrowser}, {userOs}, {userDevice}</span>
-            <span className="mx-1 font-bold text-xl">&#183;</span>
-            <Tooltip
-                theme='light'
-                delay={0}
-                hideOnClick="persistent"
-                arrow
-                interactive
-                html={(
-                  <div className='text-left'>
-                    <SessionInfoItem comp={<CountryFlag country={ userCountry } />} label={countries[userCountry]} value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span> } />
-                    <SessionInfoItem icon={browserIcon(userBrowser)} label={userBrowser} value={ `v${ userBrowserVersion }` } />
-                    <SessionInfoItem icon={osIcon(userOs)} label={userOs} value={ userOsVersion } />
-                    <SessionInfoItem icon={deviceTypeIcon(userDeviceType)} label={userDeviceType} value={ getDimension(width, height) } isLast={!revId} />
-                    {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
-                  </div>
-                )}
-                position="bottom center"
-                hoverable
-                disabled={false}
-                on="hover"
-            >
-              <span
-                className="color-teal cursor-pointer"
-              >
-                More
-              </span>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
+                    <div className="text-sm color-gray-medium flex items-center">
+                        <span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt, timezone)}</span>
+                        <span className="mx-1 font-bold text-xl">&#183;</span>
+                        <span>{countries[userCountry]}</span>
+                        <span className="mx-1 font-bold text-xl">&#183;</span>
+                        <span className="capitalize">
+                            {userBrowser}, {userOs}, {userDevice}
+                        </span>
+                        <span className="mx-1 font-bold text-xl">&#183;</span>
+                        <Tooltip
+                            theme="light"
+                            delay={0}
+                            hideOnClick="persistent"
+                            arrow
+                            interactive
+                            html={
+                                <div className="text-left">
+                                    <SessionInfoItem
+                                        comp={<CountryFlag country={userCountry} />}
+                                        label={countries[userCountry]}
+                                        value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span>}
+                                    />
+                                    <SessionInfoItem icon={browserIcon(userBrowser)} label={userBrowser} value={`v${userBrowserVersion}`} />
+                                    <SessionInfoItem icon={osIcon(userOs)} label={userOs} value={userOsVersion} />
+                                    <SessionInfoItem
+                                        icon={deviceTypeIcon(userDeviceType)}
+                                        label={userDeviceType}
+                                        value={getDimension(width, height)}
+                                        isLast={!revId}
+                                    />
+                                    {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
+                                </div>
+                            }
+                            position="bottom center"
+                            hoverable
+                            disabled={false}
+                            on="hover"
+                        >
+                            <span className="color-teal cursor-pointer">More</span>
+                        </Tooltip>
+                    </div>
+                </div>
+            </div>

-      <SlideModal
+            {/* <SlideModal
        title={ <div>User Sessions</div> }
        isDisplayed={ showUserSessions }
        content={ showUserSessions && <SessionList similarSessions={ similarSessions } loading={ loading } /> }
        onClose={ () => showUserSessions ? setShowUserSessions(false) : null }
-      />
-    </div>
-  )
+      /> */}
+        </div>
+    );
 }

-const component = React.memo(connect(state => ({ session: state.getIn([ 'sessions', 'current' ]) }))(UserCard))
+const component = React.memo(connect((state) => ({ session: state.getIn(['sessions', 'current']) }))(UserCard));

 export default withRequest({
-	initialData: List(),
-	endpoint: '/metadata/session_search',
-	dataWrapper: data => Object.values(data),
-	dataName: 'similarSessions',
-})(component)
+    initialData: List(),
+    endpoint: '/metadata/session_search',
+    dataWrapper: (data) => Object.values(data),
+    dataName: 'similarSessions',
+})(component);
+
+// inner component
+function UserName({ name, userId, hash }) {
+    const { showModal } = useModal();
+    const onClick = () => {
+        showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true });
+    };
+    return <div onClick={userId ? onClick : () => {}}>{name}</div>;
+}
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@ -50,6 +50,7 @@ interface Props {
    lastPlayedSessionId?: string;
    live?: boolean;
    onClick?: any;
+    compact?: boolean;
 }

 function SessionItem(props: RouteComponentProps & Props) {
@ -65,6 +66,7 @@ function SessionItem(props: RouteComponentProps & Props) {
        metaList = [],
        lastPlayedSessionId,
        onClick = null,
+        compact = false,
    } = props;

    const {
@ -107,24 +109,26 @@ function SessionItem(props: RouteComponentProps & Props) {
        <div className={cn(stl.sessionItem, 'flex flex-col p-2')} id="session-item" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-start">
                <div className={cn('flex items-center w-full')}>
-                    <div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
-                        <div>
-                            <Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
-                        </div>
-                        <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
-                            <div
-                                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="200px" popupProps={{ inverted: true, size: 'tiny' }} />
+                    {!compact && (
+                        <div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
+                            <div>
+                                <Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
+                            </div>
+                            <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
+                                <div
+                                    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="200px" popupProps={{ inverted: true, size: 'tiny' }} />
+                                </div>
                            </div>
                        </div>
-                    </div>
-                    <div style={{ width: '20%' }} className="px-2 flex flex-col justify-between">
+                    )}
+                    <div style={{ width: compact ? '40%' : '20%' }} className="px-2 flex flex-col justify-between">
                        <div>
                            <TextEllipsis text={formatTimeOrDate(startedAt, timezone)} popupProps={{ inverted: true, size: 'tiny' }} />
                        </div>
--- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
+++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
@ -0,0 +1,93 @@
+import React, { useEffect } from 'react';
+import { useStore } from 'App/mstore';
+import Filter from 'Types/filter';
+import { filtersMap } from 'Types/filter/newFilter';
+import { FilterKey } from 'App/types/filter/filterType';
+import { NoContent, Pagination, Loader, Avatar } from 'UI';
+import SessionItem from 'Shared/SessionItem';
+import SelectDateRange from 'Shared/SelectDateRange';
+import Period from 'Types/app/period';
+import { useObserver, observer } from 'mobx-react-lite';
+
+const PER_PAGE = 10;
+interface Props {
+    userId: string;
+    hash: string;
+    name: string;
+}
+function UserSessionsModal(props: Props) {
+    const { userId, hash, name } = props;
+    const { sessionStore } = useStore();
+    const [loading, setLoading] = React.useState(false);
+    const [data, setData] = React.useState<any>({ sessions: [], total: 0 });
+    const filter = useObserver(() => sessionStore.userFilter);
+
+    const onDateChange = (period: any) => {
+        filter.update('period', period);
+    };
+
+    const fetchData = () => {
+        setLoading(true);
+        sessionStore
+            .getSessions(filter)
+            .then(setData)
+            .catch(() => {
+                console.log('error');
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    useEffect(() => {
+        const userFilter = { key: FilterKey.USERID, value: [userId], operator: 'is', isEvent: false };
+        filter.update('filters', [userFilter]);
+    }, []);
+    useEffect(fetchData, [filter.page, filter.startDate, filter.endDate]);
+
+    return (
+        <div className="h-screen overflow-y-auto bg-white" style={{ width: '700px' }}>
+            <div className="flex items-center justify-between w-full px-5 py-3">
+                <div className="text-lg flex items-center">
+                    <Avatar isActive={false} seed={hash} isAssist={false} className={''} />
+                    <div className="ml-3">
+                        {name}'s <span className="color-gray-dark">Sessions</span>
+                    </div>
+                </div>
+                <div>
+                    <SelectDateRange period={filter.period} onChange={onDateChange} right={true} />
+                </div>
+            </div>
+
+            <NoContent show={data.sessions.length === 0} title={<div>No recordings found.</div>}>
+                <div className="border rounded m-5">
+                    <Loader loading={loading}>
+                        {data.sessions.map((session: any) => (
+                            <div className="border-b last:border-none">
+                                <SessionItem key={session.sessionId} session={session} compact={true} />
+                            </div>
+                        ))}
+                    </Loader>
+
+                    <div className="flex items-center justify-between p-5">
+                        <div>
+                            {/* showing x to x of total sessions  */}
+                            Showing <span className="font-medium">{(filter.page - 1) * PER_PAGE + 1}</span> to{' '}
+                            <span className="font-medium">{(filter.page - 1) * PER_PAGE + data.sessions.length}</span> of{' '}
+                            <span className="font-medium">{data.total}</span> sessions.
+                        </div>
+                        <Pagination
+                            page={filter.page}
+                            totalPages={Math.ceil(data.total / PER_PAGE)}
+                            onPageChange={(page) => filter.update('page', page)}
+                            limit={PER_PAGE}
+                            debounceRequest={1000}
+                        />
+                    </div>
+                </div>
+            </NoContent>
+        </div>
+    );
+}
+
+export default observer(UserSessionsModal);
--- a/frontend/app/components/shared/UserSessionsModal/index.ts
+++ b/frontend/app/components/shared/UserSessionsModal/index.ts
@ -0,0 +1 @@
+export { default } from './UserSessionsModal';
--- a/frontend/app/mstore/index.tsx
+++ b/frontend/app/mstore/index.tsx
@ -10,6 +10,7 @@ import SettingsStore from './settingsStore';
 import AuditStore from './auditStore';
 import NotificationStore from './notificationStore';
 import ErrorStore from './errorStore';
+import SessionStore from './sessionStore';

 export class RootStore {
    dashboardStore: IDashboardStore;
@ -21,6 +22,7 @@ export class RootStore {
    auditStore: AuditStore;
    errorStore: ErrorStore;
    notificationStore: NotificationStore
+    sessionStore: SessionStore;

    constructor() {
        this.dashboardStore = new DashboardStore();
@ -32,6 +34,7 @@ export class RootStore {
        this.auditStore = new AuditStore();
        this.errorStore = new ErrorStore();
        this.notificationStore = new NotificationStore();
+        this.sessionStore = new SessionStore();
    }

    initClient() {
--- a/frontend/app/mstore/sessionStore.ts
+++ b/frontend/app/mstore/sessionStore.ts
@ -0,0 +1,79 @@
+import { makeAutoObservable, observable, action } from 'mobx';
+import { sessionService } from 'App/services';
+import { filterMap } from 'Duck/search';
+import Session from './types/session';
+import Record, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
+
+class UserFilter {
+    endDate: number = new Date().getTime();
+    startDate: number = new Date().getTime() - 24 * 60 * 60 * 1000;
+    rangeName: string = LAST_7_DAYS;
+    filters: any = [];
+    page: number = 1;
+    limit: number = 10;
+    period: any = Record({ rangeName: LAST_7_DAYS });
+
+    constructor() {
+        makeAutoObservable(this, {
+            page: observable,
+            update: action,
+        });
+    }
+
+    update(key: string, value: any) {
+        this[key] = value;
+
+        if (key === 'period') {
+            this.startDate = this.period.start;
+            this.endDate = this.period.end;
+        }
+    }
+
+    setFilters(filters: any[]) {
+        this.filters = filters;
+    }
+
+    setPage(page: number) {
+        this.page = page;
+    }
+
+    toJson() {
+        return {
+            endDate: this.period.end,
+            startDate: this.period.start,
+            filters: this.filters.map(filterMap),
+            page: this.page,
+            limit: this.limit,
+        };
+    }
+}
+
+export default class SessionStore {
+    userFilter: UserFilter = new UserFilter();
+
+    constructor() {
+        makeAutoObservable(this, {
+            userFilter: observable,
+        });
+    }
+
+    resetUserFilter() {
+        this.userFilter = new UserFilter();
+    }
+
+    getSessions(filter: any): Promise<any> {
+        return new Promise((resolve, reject) => {
+            sessionService
+                .getSessions(filter.toJson())
+                .then((response: any) => {
+                    resolve({
+                        sessions: response.sessions.map((session: any) => new Session().fromJson(session)),
+                        total: response.total,
+                    });
+                })
+                .catch((error: any) => {
+                    reject(error);
+                });
+        });
+    }
+}
--- a/frontend/app/services/SessionService.ts
+++ b/frontend/app/services/SessionService.ts
@ -1,4 +1,5 @@
 import APIClient from 'App/api_client';
+import { fetchErrorCheck } from 'App/utils';

 export default class SettingsService {
    private client: APIClient;
@ -16,8 +17,16 @@ export default class SettingsService {
    }

    fetchCaptureRate() {
-        return this.client.get('/sample_rate')
-            .then(response => response.json())
-            .then(response => response.data || 0);
+        return this.client
+            .get('/sample_rate')
+            .then((response) => response.json())
+            .then((response) => response.data || 0);
    }
-}
+
+    getSessions(filter: any) {
+        return this.client
+            .post('/sessions/search2', filter)
+            .then(fetchErrorCheck)
+            .then((response) => response.data || []);
+    }
+}
				`@ -0,0 +1 @@`
				`export { default } from './UserSessionsModal';`