refactor(player): move log type to player

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Log, LEVEL } from 'Types/session/log';
+import { LogLevel } from 'Player';
 import BottomBlock from '../BottomBlock';
 import { Tabs, Input, Icon, NoContent } from 'UI';
 import cn from 'classnames';
@@ -19,11 +19,11 @@ const WARNINGS = 'WARNINGS';
 const ERRORS = 'ERRORS';
 
 const LEVEL_TAB = {
-  [LEVEL.INFO]: INFO,
-  [LEVEL.LOG]: INFO,
-  [LEVEL.WARNING]: WARNINGS,
-  [LEVEL.ERROR]: ERRORS,
-  [LEVEL.EXCEPTION]: ERRORS,
+  [LogLevel.INFO]: INFO,
+  [LogLevel.LOG]: INFO,
+  [LogLevel.WARNING]: WARNINGS,
+  [LogLevel.ERROR]: ERRORS,
+  [LogLevel.EXCEPTION]: ERRORS,
 };
 
 const TABS = [ALL, ERRORS, WARNINGS, INFO].map((tab) => ({ text: tab, key: tab }));
@@ -36,19 +36,19 @@ function renderWithNL(s = '') {
 
 const getIconProps = (level: any) => {
   switch (level) {
-    case LEVEL.INFO:
-    case LEVEL.LOG:
+    case LogLevel.INFO:
+    case LogLevel.LOG:
       return {
         name: 'console/info',
         color: 'blue2',
       };
-    case LEVEL.WARN:
-    case LEVEL.WARNING:
+    case LogLevel.WARN:
+    case LogLevel.WARNING:
       return {
         name: 'console/warning',
         color: 'red2',
       };
-    case LEVEL.ERROR:
+    case LogLevel.ERROR:
       return {
         name: 'console/error',
         color: 'red',
@@ -81,16 +81,8 @@ function ConsolePanel() {
   const jump = (t: number) => player.jump(t)
   const { logList, exceptionsList, time } = store.get()
 
-  const logExceptions = exceptionsList.map(({ time, errorId, name }: any) =>
-    Log({
-      level: LEVEL.ERROR,
-      value: name,
-      time,
-      errorId,
-    })
-  );
   // @ts-ignore
-  const logs = logList.concat(logExceptions)
+  const logs = logList.concat(exceptionsList)
 
   const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) => {

frontend/app/player/index.ts

@@ -1,6 +1,7 @@
 export * from './web/assist/AssistManager';
 export * from './web/assist/LocalStream';
 export * from './web/WebPlayer';
+export * from './web/types';
 export * from './create';
 
 export type { MarkedTarget } from './web/TargetMarker'

frontend/app/player/web/MessageManager.ts

@@ -4,7 +4,7 @@ import logger from 'App/logger';
 
 import Resource, { TYPES } from 'Types/session/resource';
 import { TYPES as EVENT_TYPES } from 'Types/session/event';
-import { Log } from 'Types/session/log';
+import { Log } from './types';
 
 import { toast } from 'react-toastify';
 
@@ -394,12 +394,10 @@ export default class MessageManager {
       /* Lists: */
       case "console_log":
         if (msg.level === 'debug') break;
-        this.lists.lists.log.append(Log({
-          level: msg.level,
-          value: msg.value,
-          time,
-          index,
-        }))
+        this.lists.lists.log.append(
+          // @ts-ignore : TODO: enums in the message schema
+          Log(msg)
+        )
         break;
       case "fetch":
         this.lists.lists.fetch.append(Resource({

frontend/app/player/web/WebPlayer.ts

@@ -1,3 +1,5 @@
+import { Log, LogLevel } from './types'
+
 import type { Store } from '../common/types'
 import Player, { State as PlayerState } from '../player/Player'
 
@@ -36,7 +38,14 @@ export default class WebPlayer extends Player {
       event: session.events.toJSON(),
       stack: session.stackEvents.toJSON(),
       resource: session.resources.toJSON(),
-      exceptions: session.errors.toJSON(),
+      exceptions: session.errors.toJSON().map(({ time, errorId, name }: any) =>
+        Log({
+          level: LogLevel.ERROR,
+          value: name,
+          time,
+          errorId,
+        })
+      ),
     }
 
     const screen = new Screen()

frontend/app/player/web/types.ts

@@ -0,0 +1,22 @@
+export enum LogLevel {
+  INFO = 'info',
+  LOG = 'log',
+  WARNING = 'warning',
+  WARN = 'warn',
+  ERROR = 'error',
+  EXCEPTION = 'exception',
+}
+
+interface ILog {
+  level: LogLevel
+  value: string
+  time: number
+  index?: number
+  errorId?: string
+}
+
+export const Log = (log: ILog) => ({
+  isRed: () => log.level === LogLevel.EXCEPTION || log.level === LogLevel.ERROR,
+  isYellow: () => log.level === LogLevel.WARNING || log.level === LogLevel.WARN,
+  ...log
+})

frontend/app/types/run/run.js

@@ -4,7 +4,6 @@ import Environment from 'Types/environment';
 import stepFromJS from './step';
 import seleniumStepFromJS from './seleniumStep';
 import Resource from '../session/resource';
-import Log from '../session/log';
 
 export const NOT_FETCHED = undefined;
 export const QUEUED = 'queued';
@@ -45,7 +44,6 @@ class Run extends Record({
   finishedAt: undefined,
   steps: List(),
   resources: [],
-  logs: [],
   seleniumSteps: List(),
   url_browser_logs: undefined,
   url_logs: undefined,
@@ -148,7 +146,6 @@ function fromJS(run = {}) {
     .map(r => r.set("time", r.time - firstResourceTime))
     .sort((r1, r2) => r1.time - r2.time).toArray()
 
-  const logs = List(run.console).map(Log);
   const screenshotUrl = run.screenshot_url ||
     seleniumSteps.find(({ screenshotUrl }) => !!screenshotUrl, null, {}).screenshotUrl;
 
@@ -163,7 +160,6 @@ function fromJS(run = {}) {
     lastExecutedString,
     steps,
     resources,
-    logs,
     seleniumSteps,
     tags,
     environment,

frontend/app/types/session/log.tsx

@@ -1,51 +0,0 @@
-import Record from 'Types/Record';
-
-export const INFO = 'info';
-export const LOG = 'log';
-export const WARNING = 'warning';
-export const WARN = 'warn';
-export const ERROR = 'error';
-export const EXCEPTION = 'exception';
-export const LEVEL = {
-  INFO,
-  LOG,
-  WARNING,
-  WARN,
-  ERROR,
-  EXCEPTION,
-}
-
-export function isRed(log) {
-	return
-}
-
-export default Record({
-  level: '',
-  value: '',
-  time: undefined,
-  index: undefined,
-  errorId: undefined,
-}, {
-	methods: {
-		isRed() {
-			return isRed(this);
-		},
-		isYellow() {
-			return this.level === WARNING || WARN;
-		}
-	}
-});
-
-interface ILog {
-  level: string
-  value: string
-  time: number
-  index?: number
-  errorId?: string
-}
-
-export const Log = (log: ILog) => ({
-  isRed: () => log.level === EXCEPTION || log.level === ERROR,
-  isYellow: () => log.level === WARNING || log.level === WARN,
-  ...log
-})

frontend/app/types/session/session.ts

@@ -2,7 +2,6 @@ import Record from 'Types/Record';
 import { List, Map } from 'immutable';
 import { Duration } from 'luxon';
 import SessionEvent, { TYPES } from './event';
-import Log from './log';
 import StackEvent from './stackEvent';
 import Resource from './resource';
 import SessionError from './error';
@@ -32,7 +31,6 @@ export default Record(
     startedAt: 0,
     duration: 0,
     events: List(),
-    logs: List(),
     stackEvents: List(),
     resources: List(),
     missedResources: List(),
@@ -125,7 +123,6 @@ export default Record(
         .map((r) => r.set('time', r.time - firstResourceTime))
         .sort((r1, r2) => r1.time - r2.time);
       const missedResources = resources.filter(({ success }) => !success);
-      const logs = List(session.logs).map(Log);
 
       const stackEventsList = List(stackEvents)
         .concat(List(session.userEvents))
@@ -156,7 +153,6 @@ export default Record(
         errors: exceptions,
         siteId: projectId,
         events,
-        logs,
         stackEvents: stackEventsList,
         resources,
         missedResources,