From 1e59348fbbdd58db58241117db6082d86d2beb48 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 18 May 2021 18:18:57 +0530 Subject: [PATCH] change: timeline issue pointers and static issue types --- .../BugFinder/SessionsMenu/SessionsMenu.js | 5 ++- .../Session_/Player/Controls/Timeline.js | 26 ++++++++++++ frontend/app/svg/icons/funnel/cpu.svg | 3 ++ frontend/app/svg/icons/funnel/dizzy.svg | 1 + frontend/app/svg/icons/funnel/emoji-angry.svg | 4 ++ .../svg/icons/funnel/file-earmark-break.svg | 3 ++ frontend/app/svg/icons/funnel/image.svg | 4 ++ frontend/app/svg/icons/funnel/sd-card.svg | 5 ++- frontend/app/types/session/issue.js | 42 +++++++++++++++++++ frontend/app/types/session/session.js | 9 +++- frontend/app/types/watchdog.js | 12 +----- 11 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 frontend/app/svg/icons/funnel/cpu.svg create mode 100644 frontend/app/svg/icons/funnel/dizzy.svg create mode 100644 frontend/app/svg/icons/funnel/emoji-angry.svg create mode 100644 frontend/app/svg/icons/funnel/file-earmark-break.svg create mode 100644 frontend/app/svg/icons/funnel/image.svg create mode 100644 frontend/app/types/session/issue.js diff --git a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js index c29cdd6a5..289dfdcaa 100644 --- a/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js +++ b/frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js @@ -6,6 +6,7 @@ import stl from './sessionMenu.css'; import { fetchList, fetchWatchdogStatus } from 'Duck/watchdogs'; import { setActiveFlow, clearEvents } from 'Duck/filters'; import { setActiveTab } from 'Duck/sessions'; +import { issues_types } from 'Types/session/issue' function SessionsMenu(props) { const { @@ -62,7 +63,7 @@ function SessionsMenu(props) { /> - { watchdogs.filter(item => item.visible).map(item => ( + { issues_types.filter(item => item.visible).map(item => ( ({ - watchdogs: state.getIn(['watchdogs', 'list']).sortBy(i => i.order), + // watchdogs: state.getIn(['watchdogs', 'list']).sortBy(i => i.order), activeTab: state.getIn([ 'sessions', 'activeTab' ]), keyMap: state.getIn([ 'sessions', 'keyMap' ]), wdTypeCount: state.getIn([ 'sessions', 'wdTypeCount' ]), diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js index f17b37bf7..3589be148 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.js +++ b/frontend/app/components/Session_/Player/Controls/Timeline.js @@ -24,6 +24,8 @@ const getPointerIcon = (type) => { case 'dead_click': return 'funnel/dizzy'; + case 'click_rage': + return 'funnel/dizzy'; case 'excessive_scrolling': return 'funnel/mouse'; case 'bad_request': @@ -61,6 +63,7 @@ const getPointerIcon = (type) => { fetchList: state.fetchList, })) @connect(state => ({ + issues: state.getIn([ 'sessions', 'current', 'issues' ]), showDevTools: state.getIn([ 'user', 'account', 'appearance', 'sessionsDevtools' ]), clickRageTime: state.getIn([ 'sessions', 'current', 'clickRage' ]) && state.getIn([ 'sessions', 'current', 'clickRageTime' ]), @@ -95,6 +98,7 @@ export default class Timeline extends React.PureComponent { clickRageTime, stackList, fetchList, + issues } = this.props; const scale = 100 / endTime; @@ -124,6 +128,28 @@ export default class Timeline extends React.PureComponent { /> )) } + { + issues.map(iss => ( +
+ + { iss.name } +
+ } + /> + + )) + } { events.filter(e => e.type === TYPES.CLICKRAGE).map(e => (
+ + \ No newline at end of file diff --git a/frontend/app/svg/icons/funnel/dizzy.svg b/frontend/app/svg/icons/funnel/dizzy.svg new file mode 100644 index 000000000..4f026cd64 --- /dev/null +++ b/frontend/app/svg/icons/funnel/dizzy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/app/svg/icons/funnel/emoji-angry.svg b/frontend/app/svg/icons/funnel/emoji-angry.svg new file mode 100644 index 000000000..e9c147cb9 --- /dev/null +++ b/frontend/app/svg/icons/funnel/emoji-angry.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/funnel/file-earmark-break.svg b/frontend/app/svg/icons/funnel/file-earmark-break.svg new file mode 100644 index 000000000..244e6b211 --- /dev/null +++ b/frontend/app/svg/icons/funnel/file-earmark-break.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/funnel/image.svg b/frontend/app/svg/icons/funnel/image.svg new file mode 100644 index 000000000..36bd4649f --- /dev/null +++ b/frontend/app/svg/icons/funnel/image.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/funnel/sd-card.svg b/frontend/app/svg/icons/funnel/sd-card.svg index 8d4991cb1..4e55e699b 100644 --- a/frontend/app/svg/icons/funnel/sd-card.svg +++ b/frontend/app/svg/icons/funnel/sd-card.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/frontend/app/types/session/issue.js b/frontend/app/types/session/issue.js new file mode 100644 index 000000000..5a699c235 --- /dev/null +++ b/frontend/app/types/session/issue.js @@ -0,0 +1,42 @@ +import Record from 'Types/Record'; +import { List } from 'immutable'; +import Watchdog from 'Types/watchdog' + +export const issues_types = List([ + { 'type': 'js_exception', 'visible': true, 'order': 0, 'name': 'Errors', 'icon': 'funnel/exclamation-circle' }, + { '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': 'click_rage', 'visible': true, 'order': 3, 'name': 'Click Rage', 'icon': 'funnel/dizzy' }, + { 'type': 'dead_click', 'visible': true, 'order': 4, 'name': 'Dead Clicks', 'icon': 'funnel/emoji-angry' }, + { 'type': 'memory', 'visible': true, 'order': 5, 'name': 'High Memory', 'icon': 'funnel/sd-card' }, + { 'type': 'cpu', 'visible': true, 'order': 6, 'name': 'High CPU', 'icon': 'funnel/cpu' }, + { 'type': 'crash', 'visible': true, 'order': 7, 'name': 'Crashes', 'icon': 'funnel/file-earmark-break' } +]).map(Watchdog) + +export const issues_types_map = {} +issues_types.forEach(i => { + issues_types_map[i.type] = { type: i.type, visible: i.visible, order: i.order, name: i.name, } +}); + +export default Record({ + issueId: undefined, + name: '', + visible: true, + sessionId: undefined, + time: undefined, + seqIndex: undefined, + payload: {}, + projectId: undefined, + type: '', + contextString: '', + context: '', + icon: 'info' +}, { + idKey: 'issueId', + fromJS: ({ type, ...rest }) => ({ + ...rest, + type, + icon: issues_types_map[type].icon, + name: issues_types_map[type].name, + }), +}); diff --git a/frontend/app/types/session/session.js b/frontend/app/types/session/session.js index daa2f4ae0..132afcc7d 100644 --- a/frontend/app/types/session/session.js +++ b/frontend/app/types/session/session.js @@ -7,7 +7,7 @@ import StackEvent from './stackEvent'; import Resource from './resource'; import CustomField from './customField'; import SessionError from './error'; - +import Issue from './issue'; const SOURCE_JS = 'js_exception'; @@ -66,6 +66,7 @@ export default Record({ errorsCount: 0, watchdogs: [], issueTypes: [], + issues: [], userDeviceHeapSize: 0, userDeviceMemorySize: 0, errors: List(), @@ -80,6 +81,7 @@ export default Record({ projectId, errors, stackEvents = [], + issues = [], ...session }) => { const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration); @@ -109,6 +111,10 @@ export default Record({ .map(se => StackEvent({ ...se, time: se.timestamp - startedAt })); const exceptions = List(errors) .map(SessionError) + + const issuesList = List(issues) + .map(e => Issue({ ...e, time: e.timestamp - startedAt })) + return { ...session, isIOS: session.platform === "ios", @@ -128,6 +134,7 @@ export default Record({ userNumericHash: hashString(session.userId || session.userAnonymousId || session.userUuid || ""), userDisplayName: session.userId || session.userAnonymousId || 'Anonymous User', firstResourceTime, + issues: issuesList, }; }, idKey: "sessionId", diff --git a/frontend/app/types/watchdog.js b/frontend/app/types/watchdog.js index 76d874c64..fdc30dfb2 100644 --- a/frontend/app/types/watchdog.js +++ b/frontend/app/types/watchdog.js @@ -22,7 +22,6 @@ const WATCHDOG_TYPES = [ ] export const names = { - // 'all' : { label: 'All', icon: 'all' }, 'js_exception' : { label: 'JS Exceptions', icon: 'funnel/exclamation-circle' }, 'bad_request': { label: 'Bad Request', icon: 'funnel/patch-exclamation-fill' }, 'missing_resource': { label: 'Missing Resources', icon: 'funnel/image-fill' }, @@ -33,13 +32,6 @@ export const names = { 'cpu': { label: 'CPU', icon: 'funnel/hdd-fill' }, 'dead_click': { label: 'Dead Click', icon: 'funnel/emoji-dizzy-fill' }, 'custom': { label: 'Custom', icon: 'funnel/exclamation-circle-fill' }, - - // 'errors' : { label: 'Errors', icon: 'console/error' }, - // 'missing_image': { label: 'Missing Images', icon: 'image' }, - // 'slow_session': { label: 'Slow Sessions', icon: 'turtle' }, - // 'high_engagement': { label: 'High Engagements', icon: 'high-engagement' }, - // 'performance_issues': { label: 'Mem/CPU Issues', icon: 'tachometer-slowest' }, - // 'default': { label: 'Default', icon: 'window-alt' }, } const CONJUGATED_ISSUE_TYPES = { @@ -93,8 +85,6 @@ export default Record({ } }, fromJS: (item) => ({ - ...item, - name: item.name, - icon: names[item.type] ? names[item.type].icon : 'turtle' + ...item }), });