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

feat(ui) - assist ui - wip

Browse source
This commit is contained in:
Shekar Siri 2022-02-22 19:20:39 +01:00
parent 7c9df8c196
commit 914f13f89c
5 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/components/BugFinder/SessionList/SessionListHeader.js
View file

@ -5,6 +5,7 @@ import SortDropdown from '../Filters/SortDropdown';
import DateRange from '../DateRange';
import { TimezoneDropdown } from 'UI';
import { numberWithCommas } from 'App/utils';
import DropdownPlain from 'Shared/DropdownPlain';
const DEFAULT_SORT = 'startTs';
const DEFAULT_ORDER = 'desc';
@ -38,6 +39,17 @@ function SessionListHeader({
</div>
</div>
<div className="flex items-center">
{/* <div className="flex items-center">
<span className="mr-2 color-gray-medium">Session View</span>
<DropdownPlain
options={[
{ text: 'List', value: 'list' },
{ text: 'Grouped', value: 'grouped' }
]}
onChange={() => {}}
value='list'
/>
</div> */}
<div className="flex items-center">
<span className="mr-2 color-gray-medium">Timezone</span>
<TimezoneDropdown />

9
frontend/app/components/Session_/PlayerBlockHeader.js
View file

@ -144,8 +144,13 @@ export default class PlayerBlockHeader extends React.PureComponent {
</>
)}
<SessionMetaList className="" metaList={_metaList} />
<div className={ stl.divider } />
{ live && (
<>
<SessionMetaList className="" metaList={_metaList} />
<div className={ stl.divider } />
</>
)}
<Popup
trigger={(
<IconButton icon="info-circle" primaryText label="More Info" disabled={disabled} />

8
frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
View file

@ -11,11 +11,11 @@ export default function MetaItem(props: Props) {
const { className = '', label, value } = props
return (
<div className={cn("flex items-center rounded", className)}>
<span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "100px"}}>
<TextEllipsis text={label} className="p-0" popupProps={{ size: 'small' }} />
<span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "150px"}}>
<TextEllipsis text={label} className="p-0" popupProps={{ size: 'small', disabled: true }} />
</span>
<span className="rounded-tr rounded-br bg-gray-lightest px-2 color-gray-dark capitalize" style={{ maxWidth: "100px"}}>
<TextEllipsis text={value} className="p-0" popupProps={{ size: 'small' }} />
<span className="rounded-tr rounded-br bg-gray-lightest px-2 color-gray-dark capitalize" style={{ maxWidth: "150px"}}>
<TextEllipsis text={value} className="p-0" popupProps={{ size: 'small', disabled: true }} />
</span>
</div>
)

14
frontend/app/components/shared/SessionItem/SessionItem.js
View file

@ -80,19 +80,19 @@ export default class SessionItem extends React.PureComponent {
<div className="flex items-center pr-2" style={{ width: "30%"}}>
<div><Avatar seed={ userNumericHash } isAssist={isAssist} /></div>
{/* <div className="flex flex-col overflow-hidden color-gray-medium ml-3"> */}
<div style={{ height: "38px" }} className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between">
<div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center">
<div
className={cn({'color-teal cursor-pointer': !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
>
{userDisplayName}
</div>
<div
{/* <div
className="color-gray-medium text-dotted-underline cursor-pointer"
onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
>
{userSessionsCount} Sessions
</div>
</div> */}
</div>
</div>
<div style={{ width: "20%", height: "38px" }} className="px-2 flex flex-col justify-between">
@ -136,12 +136,14 @@ export default class SessionItem extends React.PureComponent {
<div className="flex items-center">
<div className={ stl.playLink } id="play-button" data-viewed={ viewed }>
<Link to={ sessionRoute(sessionId) }>
<Icon name={ viewed ? 'play-fill' : 'play-circle-light' } size="36" color={isAssist ? "tealx" : "teal"} />
<Icon name={ !viewed ? 'play-fill' : 'play-circle-light' } size="42" color={isAssist ? "tealx" : "teal"} />
</Link>
</div>
</div>
</div>
<SessionMetaList className="mt-4" metaList={_metaList} />
{ _metaList.length > 0 && (
<SessionMetaList className="mt-4" metaList={_metaList} />
)}
</div>
);
}

14
frontend/app/duck/sessions.js
View file

@ -270,12 +270,7 @@ function init(session) {
}
export const fetchList = (params = {}, clear = false, live = false) => (dispatch, getState) => {
const activeTab = getState().getIn([ 'sessions', 'activeTab' ]);
return dispatch((activeTab && activeTab.type === 'live' || live )? {
types: FETCH_LIVE_LIST.toArray(),
call: client => client.post('/assist/sessions', params),
} : {
return dispatch({
types: FETCH_LIST.toArray(),
call: client => client.post('/sessions/search2', params),
clear,
@ -283,13 +278,6 @@ export const fetchList = (params = {}, clear = false, live = false) => (dispatch
})
}
// export const fetchLiveList = (id) => (dispatch, getState) => {
// return dispatch({
// types: FETCH_LIVE_LIST.toArray(),
// call: client => client.get('/assist/sessions'),
// })
// }
export function fetchErrorStackList(sessionId, errorId) {
return {
types: FETCH_ERROR_STACK.toArray(),