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

feat(ui) - session list - tabs and settings

Browse source
This commit is contained in:
Shekar Siri 2022-08-01 17:47:09 +02:00
parent b66923a468
commit b36a0a09ea
4 changed files with 60 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
View file

@ -6,14 +6,25 @@ import SelectDateRange from 'Shared/SelectDateRange';
import SessionTags from '../SessionTags';
import { connect } from 'react-redux';
import SessionSort from '../SessionSort';
import cn from 'classnames';
import { setActiveTab } from 'Duck/search';
import SessionSettingButton from '../SessionSettingButton';
interface Props {
listCount: number;
filter: any;
isBookmark: any;
isEnterprise: boolean;
applyFilter: (filter: any) => void;
setActiveTab: (tab: any) => void;
}
function SessionHeader(props: Props) {
const { listCount, filter: { startDate, endDate, rangeValue } } = props;
const {
listCount,
filter: { startDate, endDate, rangeValue },
isBookmark,
isEnterprise,
} = props;
const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
const onDateChange = (e: any) => {
@ -23,17 +34,30 @@ function SessionHeader(props: Props) {
return (
<div className="flex items-center p-4 justify-between">
<div className="flex items-center">
<div className="mr-3 text-lg">
<span className="font-bold">Sessions</span> <span className="color-gray-medium ml-2">{listCount}</span>
<div className="flex items-center justify-between">
<div className="mr-3 text-lg flex items-center">
<div
className={cn('py-3 cursor-pointer mr-4 ', { 'border-b color-teal border-teal': !isBookmark })}
onClick={() => props.setActiveTab({ type: 'all' })}
>
<span className="font-bold">Sessions</span> <span className="color-gray-medium ml-2">{listCount}</span>
</div>
<div
className={cn('py-3 cursor-pointer', { 'border-b color-teal border-teal': isBookmark })}
onClick={() => props.setActiveTab({ type: 'bookmark' })}
>
<span className="font-bold">{`${isEnterprise ? 'Vault' : 'Bookmarks'}`}</span>
</div>
</div>
<SessionTags />
</div>
<div className="flex items-center">
{!isBookmark && <SessionTags />}
<div className="mx-4" />
<SelectDateRange period={period} onChange={onDateChange} right={true} />
<div className="mx-2" />
<SessionSort />
<SessionSettingButton />
</div>
</div>
);
@ -43,6 +67,8 @@ export default connect(
(state: any) => ({
filter: state.getIn(['search', 'instance']),
listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
isBookmark: state.getIn(['search', 'activeTab', 'type']) === 'bookmark',
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
}),
{ applyFilter }
{ applyFilter, setActiveTab }
)(SessionHeader);

20
frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx Normal file
View file

@ -0,0 +1,20 @@
import { useModal } from 'App/components/Modal';
import React from 'react';
import SessionSettings from 'Shared/SessionSettings';
import { Button } from 'UI';
function SessionSettingButton(props: any) {
const { showModal } = useModal();
const handleClick = () => {
showModal(<SessionSettings />, { right: true });
};
return (
<div className="cursor-pointer ml-4" onClick={handleClick}>
<Button icon="sliders" variant="text" />
</div>
);
}
export default SessionSettingButton;

1
frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './SessionSettingButton';

14
frontend/app/types/session/issue.js
View file

@ -8,13 +8,13 @@ export const issues_types = List([
{ 'type': 'click_rage', 'visible': true, 'order': 2, 'name': 'Click Rage', 'icon': 'funnel/emoji-angry' },
{ 'type': 'crash', 'visible': true, 'order': 3, 'name': 'Crashes', 'icon': 'funnel/file-earmark-break' },
{ 'type': 'memory', 'visible': true, 'order': 4, 'name': 'High Memory', 'icon': 'funnel/sd-card' },
{ 'type': 'vault', 'visible': true, 'order': 5, 'name': 'Vault', 'icon': 'safe' },
{ 'type': 'bookmark', 'visible': true, 'order': 5, 'name': 'Bookmarks', 'icon': 'safe' },
{ 'type': 'bad_request', 'visible': true, 'order': 1, 'name': 'Bad Requests', 'icon': 'funnel/file-medical-alt' },
{ 'type': 'missing_resource', 'visible': true, 'order': 2, 'name': 'Missing Images', 'icon': 'funnel/image' },
{ 'type': 'dead_click', 'visible': true, 'order': 4, 'name': 'Dead Clicks', 'icon': 'funnel/dizzy' },
{ 'type': 'cpu', 'visible': true, 'order': 6, 'name': 'High CPU', 'icon': 'funnel/cpu' },
{ 'type': 'custom', 'visible': false, 'order': 8, 'name': 'Custom', 'icon': 'funnel/exclamation-circle' }
// { 'type': 'vault', 'visible': true, 'order': 5, 'name': 'Vault', 'icon': 'safe' },
// { 'type': 'bookmark', 'visible': true, 'order': 5, 'name': 'Bookmarks', 'icon': 'safe' },
// { 'type': 'bad_request', 'visible': true, 'order': 1, 'name': 'Bad Requests', 'icon': 'funnel/file-medical-alt' },
// { 'type': 'missing_resource', 'visible': true, 'order': 2, 'name': 'Missing Images', 'icon': 'funnel/image' },
// { 'type': 'dead_click', 'visible': true, 'order': 4, 'name': 'Dead Clicks', 'icon': 'funnel/dizzy' },
// { 'type': 'cpu', 'visible': true, 'order': 6, 'name': 'High CPU', 'icon': 'funnel/cpu' },
// { 'type': 'custom', 'visible': false, 'order': 8, 'name': 'Custom', 'icon': 'funnel/exclamation-circle' }
]).map(Watchdog)
export const issues_types_map = {}