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

change(ui): path analysis issues card

Browse source
This commit is contained in:
Shekar Siri 2024-07-03 17:05:15 +02:00
parent c6c46c6486
commit c66acd6b21
4 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import { Icon } from 'UI';
import Issue from 'App/mstore/types/issue';
import { List } from 'antd';
interface Props {
issue: Issue;
@ -9,19 +10,15 @@ interface Props {
function CardIssueItem(props: Props) {
const { issue } = props;
return (
<div className='flex items-center py-2 hover:bg-active-blue cursor-pointer'>
<div className='mr-auto flex items-center'>
<div className='flex items-center justify-center flex-shrink-0 mr-3 relative'>
<Icon name={issue.icon} size='24' className='z-10 inset-0' style={{fill: issue.color }}/>
</div>
<div className='flex-1 overflow-hidden'>
{issue.name}
<span className='color-gray-medium mx-2'>{issue.source}</span>
</div>
</div>
<>
<List.Item.Meta
title={issue.name}
description={<div className="text-nowrap truncate">{issue.source}</div>}
avatar={<Icon name={issue.icon} size="24" />}
/>
<div>{issue.sessionCount}</div>
</div>
</>
);
}
export default CardIssueItem;
export default CardIssueItem;

19
frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
View file

@ -9,6 +9,7 @@ import CardIssueItem from './CardIssueItem';
import SessionsModal from '../SessionsModal';
import { useModal } from 'App/components/Modal';
import Issue from 'App/mstore/types/issue';
import { List } from 'antd';
function CardIssues() {
const { metricStore, dashboardStore } = useStore();
@ -109,11 +110,19 @@ function CardIssues() {
<Loader loading={loading}>
<NoContent show={data.issues.length == 0} title="No data!">
{data.issues.map((item: any, index: any) => (
<div onClick={() => handleClick(item)} key={index}>
<CardIssueItem issue={item} />
</div>
))}
{/*{data.issues.map((item: any, index: any) => (*/}
{/* <div onClick={() => handleClick(item)} key={index}>*/}
{/* <CardIssueItem issue={item} />*/}
{/* </div>*/}
{/*))}*/}
<List
itemLayout="horizontal"
dataSource={data.issues}
renderItem={(item: any) => (
<List.Item onClick={() => handleClick(item)}>
<CardIssueItem issue={item} />
</List.Item>
)}/>
</NoContent>
</Loader>

2
frontend/app/mstore/types/funnelIssue.ts
View file

@ -71,4 +71,4 @@ const getIconDetails = (type) => {
icon: 'info',
color: 'red'
}
}
}

32
frontend/app/mstore/types/issue.ts
View file

@ -1,18 +1,18 @@
const ISSUE_MAP: any = {
dead_click: { name: 'Dead Click', icon: 'funnel/emoji-dizzy-fill', color: '#9C001F' },
rage_click: { name: 'Rage Click', icon: 'funnel/emoji-angry-fill', color: '#CC0000' },
click_rage: { name: 'Click Rage', icon: 'funnel/emoji-angry-fill', color: '#CC0000' },
excessive_scrolling: { name: 'Excessive Scrolling', icon: 'funnel/mouse', color: '#D3545F' },
bad_request: { name: 'Bad Request', icon: 'funnel/patch-exclamation-fill', color: '#D70072' },
missing_resource: { name: 'Missing Resource', icon: 'funnel/image-fill', color: '#B89C50' },
memory: { name: 'Memory', icon: 'funnel/cpu-fill', color: '#8A5A83' },
cpu: { name: 'CPU', icon: 'funnel/hdd-fill', color: '#8A5A83' },
slow_resource: { name: 'Slow Resource', icon: 'funnel/hourglass-top', color: '#8B006D' },
slow_page_load: { name: 'Slow Page Load', icon: 'funnel/hourglass-top', color: '#8B006D' },
custom_event_error: { name: 'Custom Event Error', icon: 'funnel/exclamation-circle-fill', color: '#BF6C00' },
custom: { name: 'Custom', icon: 'funnel/exclamation-circle-fill', color: '#BF6C00' },
crash: { name: 'Crash', icon: 'funnel/file-x', color: '#BF2D00' },
js_exception: { name: 'JS Exception', icon: 'funnel/exclamation-circle', color: '#BF2D00' },
dead_click: { name: 'Dead Click', icon: 'color/issues/dead_click', color: '#9C001F' },
rage_click: { name: 'Rage Click', icon: 'color/issues/click_rage', color: '#CC0000' },
click_rage: { name: 'Click Rage', icon: 'color/issues/click_rage', color: '#CC0000' },
excessive_scrolling: { name: 'Excessive Scrolling', icon: 'color/issues/mouse', color: '#D3545F' },
bad_request: { name: 'Bad Request', icon: 'color/issues/patch-exclamation-fill', color: '#D70072' },
missing_resource: { name: 'Missing Resource', icon: 'color/issues/image-fill', color: '#B89C50' },
memory: { name: 'Memory', icon: 'color/issues/cpu-fill', color: '#8A5A83' },
cpu: { name: 'CPU', icon: 'color/issues/hdd-fill', color: '#8A5A83' },
slow_resource: { name: 'Slow Resource', icon: 'color/issues/hourglass-top', color: '#8B006D' },
slow_page_load: { name: 'Slow Page Load', icon: 'color/issues/hourglass-top', color: '#8B006D' },
custom_event_error: { name: 'Custom Event Error', icon: 'color/issues/exclamation-circle-fill', color: '#BF6C00' },
custom: { name: 'Custom', icon: 'color/issues/exclamation-circle-fill', color: '#BF6C00' },
crash: { name: 'Crash', icon: 'color/issues/file-x', color: '#BF2D00' },
js_exception: { name: 'JS Exception', icon: 'color/issues/exclamation-circle', color: '#BF2D00' },
mouse_thrashing: { name: 'Mouse Thrashing', icon: 'event/mouse_thrashing', color: '#D3545F' },
};
@ -37,9 +37,9 @@ export default class Issue {
this.type = json.name;
this.name = ISSUE_MAP[json.name].name || '';
this.sessionCount = json.sessionCount;
this.icon = ISSUE_MAP[json.name].icon || '';
this.icon = `color/issues/${json.name}`;
this.source = json.value || json.source || '';
this.color = ISSUE_MAP[json.name].color || '';
return this;
}
}
}