change(ui): change types for api

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)
       });
     });
   };

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 */}
             <Icon name={step.icon} size={16} color="gray-darkest" className="relative z-10"/>
             <div className="px-2 text-disabled-text rounded bg-light-blue-bg">
-              {Duration.fromMillis(step.time).toFormat('hh:mm:ss')}
+              {durationFromMs(step.time)}
             </div>
             {/* @ts-ignore */}
             <div className="font-semibold">{STEP_NAMES[step.type]}</div>

frontend/app/components/Session_/BugReport/components/StepsComponents/SubModal.tsx

@@ -61,14 +61,18 @@ function ModalContent(props: Props) {
       </div>
       <div
         className="flex flex-col rounded -mx-4 px-4 py-2 bg-white"
-        style={{ height: '90vh', overflowY: 'scroll', maxWidth: '70vw', width: 620 }}
+        style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll', maxWidth: '70vw', width: 620 }}
       >
-        {list.map((item) => (
-          <React.Fragment key={item.key}>
-            {/* @ts-ignore */}
-            <SubItem item={item} />
-          </React.Fragment>
-        ))}
+        {list.length > 0 ? (
+          list.map((item) => (
+            <React.Fragment key={item.key}>
+              {/* @ts-ignore */}
+              <SubItem item={item} />
+            </React.Fragment>
+          ))
+        ) : (
+          <div className="text-2xl font-semibold text-center">No items to show.</div>
+        )}
       </div>
 
       <ModalActionsObs />
@@ -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 (
     <div className="flex items-center gap-2">
       <Button
@@ -95,10 +99,7 @@ function ModalActions() {
       >
         Add Selected
       </Button>
-      <Button
-        variant="text-primary"
-        onClick={removeModal}
-      >
+      <Button variant="text-primary" onClick={removeModal}>
         Cancel
       </Button>
     </div>
@@ -154,7 +155,7 @@ function SubModal(props: ModalProps) {
 
   return (
     <div
-      className="bg-white absolute"
+      className="bg-white fixed"
       style={{
         maxWidth: '70vw',
         overflow: 'hidden',

frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Checkbox } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
+import { durationFromMs } from 'App/date'
 
 interface Item {
   time: number;
@@ -31,7 +32,7 @@ const safeStr = (ogStr: string) => (ogStr.length > 60 ? ogStr.slice(0, 60) + '..
 export const NetworkComp = ({ item }: { item: INetworkReq }) => (
   <div className="flex items-start flex-col z-10">
     <div className="flex items-center gap-2 text-disabled-text">
-      <div>{item.time}</div>
+      <div>{durationFromMs(item.time)}</div>
       <div>{safeStr(item.url)}</div>
     </div>
     <div className="flex items-center gap-2">
@@ -75,7 +76,7 @@ export const NoteItem = observer(({ item }: { item: INoteItem }) => {
 
 export const ErrorComp = ({ item }: { item: IError }) => (
   <div className="flex items-start flex-col z-10">
-    <div className="text-disabled-text">{item.time}</div>
+    <div className="text-disabled-text">{durationFromMs(item.time)}</div>
     {item.name ? <div className="text-red">{item.name}</div> : null}
     <div className="text-secondary">{safeStr(item.message)}</div>
   </div>

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<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
 

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<string, any>;
+  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 {

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';

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');

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() {