From fcf80e4b769b7e687e06776aef55eadaf76e248c Mon Sep 17 00:00:00 2001 From: sylenien Date: Wed, 2 Nov 2022 10:44:58 +0100 Subject: [PATCH] change(ui): change types for api --- .../Session_/BugReport/BugReportModal.tsx | 9 +- .../components/StepsComponents/EventStep.tsx | 4 +- .../components/StepsComponents/SubModal.tsx | 35 ++++---- .../StepsComponents/SubModalItems.tsx | 5 +- .../components/StepsComponents/XRay.tsx | 3 + .../components/Session_/BugReport/types.ts | 82 +++++++++++++++---- .../shared/SessionItem/SessionItem.tsx | 2 +- frontend/app/date.ts | 6 ++ frontend/app/mstore/bugReportStore.ts | 20 ++++- 9 files changed, 126 insertions(+), 40 deletions(-) diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx index bd6baf1dc..07d6d2104 100644 --- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx +++ b/frontend/app/components/Session_/BugReport/BugReportModal.tsx @@ -4,7 +4,7 @@ import { countries } from 'App/constants'; import { useStore } from 'App/mstore'; import { Button } from 'UI'; import { session as sessionRoute } from 'App/routes'; -import { ReportDefaults, EnvData } from './types'; +import { ReportDefaults, EnvData, Activity } from './types'; import Session from './components/Session'; import MetaInfo from './components/MetaInfo'; import Title from './components/Title'; @@ -160,6 +160,13 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps, } // buildText(); buildPng(); + + const activity = { + network: xrayProps.resourceList, + console: xrayProps.exceptionsList, + clickRage: xrayProps.eventsList.filter((item: any) => item.type === 'CLICKRAGE'), + } + bugReportStore.composeReport(activity as unknown as Activity) }); }); }; diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx index d5d47cfc3..2ed6cff5c 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx +++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx @@ -5,8 +5,8 @@ import { Step as IStep } from '../../types'; const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'Visited' }; import { useStore } from 'App/mstore'; import cn from 'classnames'; -import { Duration } from 'luxon'; import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems'; +import { durationFromMs } from 'App/date' const SUBSTEP = { network: NetworkComp, @@ -54,7 +54,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?: {/* @ts-ignore */}
- {Duration.fromMillis(step.time).toFormat('hh:mm:ss')} + {durationFromMs(step.time)}
{/* @ts-ignore */}
{STEP_NAMES[step.type]}
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx index 5677e5f0f..6b1ebec48 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx +++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx @@ -61,14 +61,18 @@ function ModalContent(props: Props) {
- {list.map((item) => ( - - {/* @ts-ignore */} - - - ))} + {list.length > 0 ? ( + list.map((item) => ( + + {/* @ts-ignore */} + + + )) + ) : ( +
No items to show.
+ )}
@@ -80,12 +84,12 @@ function ModalActions() { const { bugReportStore } = useStore(); const removeModal = () => { - bugReportStore.toggleSubStepModal(false, bugReportStore.subModalType, undefined) - } + bugReportStore.toggleSubStepModal(false, bugReportStore.subModalType, undefined); + }; const saveChoice = () => { - bugReportStore.saveSubItems() - removeModal() - } + bugReportStore.saveSubItems(); + removeModal(); + }; return (
-
@@ -154,7 +155,7 @@ function SubModal(props: ModalProps) { return (
(ogStr.length > 60 ? ogStr.slice(0, 60) + '.. export const NetworkComp = ({ item }: { item: INetworkReq }) => (
-
{item.time}
+
{durationFromMs(item.time)}
{safeStr(item.url)}
@@ -75,7 +76,7 @@ export const NoteItem = observer(({ item }: { item: INoteItem }) => { export const ErrorComp = ({ item }: { item: IError }) => (
-
{item.time}
+
{durationFromMs(item.time)}
{item.name ?
{item.name}
: null}
{safeStr(item.message)}
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx index 838cf1e2b..d3f2772b6 100644 --- a/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx +++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/XRay.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Duration } from 'luxon'; import { observer } from 'mobx-react-lite'; +import { toJS } from 'mobx' import { Icon } from 'UI'; import { useStore } from 'App/mstore'; import { INDEXES } from 'App/constants/zindex'; @@ -35,6 +36,8 @@ function XRay({ xrayProps, timePointer, stepPickRadius, clearEventSelection, set CLICKRAGE: eventsList.filter((item: any) => item.type === 'CLICKRAGE'), }; + console.log(JSON.stringify(resources.CLICKRAGE, undefined, 2)) + const pickEventRadius = (e: React.MouseEvent) => { e.stopPropagation(); diff --git a/frontend/app/components/Session_/BugReport/types.ts b/frontend/app/components/Session_/BugReport/types.ts index 2b3e3a8ad..eb2b2a9d7 100644 --- a/frontend/app/components/Session_/BugReport/types.ts +++ b/frontend/app/components/Session_/BugReport/types.ts @@ -1,16 +1,5 @@ import { SeverityLevels } from 'App/mstore/bugReportStore'; -import { SubItem, INoteItem, IError, INetworkReq } from './components/StepsComponents/SubModalItems'; - -export interface BugReportPdf extends ReportDefaults { - title: string; - comment?: string; - severity: SeverityLevels; - steps: Step[]; - activity: { - network: INetworkReq[]; - console: IError[]; - }; -} +import { SubItem } from './components/StepsComponents/SubModalItems'; export interface ReportDefaults { author: string; @@ -25,6 +14,72 @@ export interface ReportDefaults { }; } +export interface BugReportPdf extends ReportDefaults { + title: string; + comment?: string; + severity: SeverityLevels; + steps: Step[]; + activity: Activity +} + +export interface Activity { + network: NetworkEvent[]; + console: Exception[]; + clickRage: ClickRage[]; +}; + +interface Event { + time: number; + key: string; +} + +interface NetworkEvent extends Event { + decodedBodySize: number | null; + duration: number | null; + encodedBodySize: number | null; + headerSize: number | null; + index?: number; + method: string; + name: string; + payload: string; + response: string; + responseBodySize: number; + score: number; + status: string; + success: boolean; + timewidth: number; + timings: Record; + ttfb: number; + type: string; + url: string; +} + +interface Exception extends Event { + errorId: string; + function: string; + key: string; + message: string; + messageId: number; + name: string; + projectId: number; + sessionId: number; + source: string; + timestamp: number; +} + +interface ClickRage extends Event { + type: 'CLICKRAGE'; + label: string + targetContent: string, + target: { + key: string, + path: string, + label: string | null + }, + count: number +} + + export interface EnvData { Browser: string; OS: string; @@ -33,14 +88,13 @@ export interface EnvData { Resolution: string; } - export interface Step { key: string; type: string; time: number; details: string; icon: string; - substeps?: SubItem[] + substeps?: SubItem[]; } export interface Note { diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 7b66a6bd9..9acdc3a7c 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import cn from 'classnames'; import { CountryFlag, Avatar, TextEllipsis, Label, Icon } from 'UI'; import { useStore } from 'App/mstore'; diff --git a/frontend/app/date.ts b/frontend/app/date.ts index 59704ad2d..3403abfd6 100644 --- a/frontend/app/date.ts +++ b/frontend/app/date.ts @@ -24,6 +24,12 @@ export function durationFromMsFormatted(ms: number): string { return durationFormatted(Duration.fromMillis(ms || 0)); } +export function durationFromMs(ms: number): string { + const dur = Duration.fromMillis(ms) + + return dur.toFormat('hh:mm:ss') +} + export const durationFormattedFull = (duration: Duration): string => { if (duration.as('minutes') < 1) { // show in seconds let d = duration.toFormat('s'); diff --git a/frontend/app/mstore/bugReportStore.ts b/frontend/app/mstore/bugReportStore.ts index 1f6b20ceb..69685ef62 100644 --- a/frontend/app/mstore/bugReportStore.ts +++ b/frontend/app/mstore/bugReportStore.ts @@ -1,5 +1,5 @@ import { makeAutoObservable } from 'mobx'; -import { BugReportPdf, ReportDefaults, Step } from 'Components/Session_/BugReport/types'; +import { BugReportPdf, ReportDefaults, Step, Activity } from 'Components/Session_/BugReport/types'; import { SubItem } from 'App/components/Session_/BugReport/components/StepsComponents/SubModalItems'; export enum SeverityLevels { @@ -77,13 +77,27 @@ export default class BugReportStore { this.bugReport = Object.assign(this.bugReport || {}, defaults); } + composeReport(activity: Activity) { + const reportObj = { + title: this.reportTitle, + comment: this.comment, + severity: this.severity, + steps: this.chosenEventSteps, + activity + } + this.bugReport = Object.assign(this.bugReport, reportObj) + + console.log(JSON.stringify(this.bugReport, undefined, 2)) + return this.bugReport + } + setDefaultSteps(steps: Step[]) { this.sessionEventSteps = steps; } setSteps(steps: Step[]) { this.chosenEventSteps = steps.map(step => ({ ...step, substeps: undefined })); - this.pickedSubItems = undefined; + this.pickedSubItems = new Map(); } removeStep(step: Step) { @@ -107,7 +121,7 @@ export default class BugReportStore { } isSubItemChecked(item: SubItem) { - return this.pickedSubItems.has(item.key) + return this.pickedSubItems?.get(item.key) !== undefined } saveSubItems() {