Merge pull request #170 from openreplay/ui-fixes

UI Changes and Fixes

frontend/app/components/BugFinder/BugFinder.js

@@ -28,7 +28,7 @@ import NoSessionsMessage from '../shared/NoSessionsMessage';
 import TrackerUpdateMessage from '../shared/TrackerUpdateMessage';
 import LiveSessionList from './LiveSessionList'
 
-const AUTOREFRESH_INTERVAL = 10 * 60 * 1000;
+const AUTOREFRESH_INTERVAL = 1 * 60 * 1000;
 
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;

frontend/app/components/Session/RightBlock.tsx

@@ -37,7 +37,7 @@ export default function RightBlock() {
           onClick={ (tab) => setActiveTab(tab) }
           border={ true }
         />
-        <div className="absolute right-0 top-0 mt-4 pr-4">{ <NewBadge />}</div>
+        <div className="absolute" style={{ left: '160px', top: '13px' }}>{ <NewBadge />}</div>
       </div>
       {
         renderActiveTab(activeTab)       

frontend/app/components/Session_/EventsBlock/EventsBlock.js

@@ -42,7 +42,9 @@ export default class EventsBlock extends React.PureComponent {
     this.props.setEventFilter({ query: value, filter })    
     
     setTimeout(() => {      
-      this.scroller.current.scrollToRow(0);    
+      if (!this.scroller.current) return;
+      
+      this.scroller.current.scrollToRow(0);
     }, 100)
   }
 
@@ -54,7 +56,9 @@ export default class EventsBlock extends React.PureComponent {
     this.scroller.current.forceUpdateGrid();
 
     setTimeout(() => {      
-      this.scroller.current.scrollToRow(0);      
+      if (!this.scroller.current) return;
+      
+      this.scroller.current.scrollToRow(0);
     }, 100)    
   }
 

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -161,7 +161,6 @@ export default class AssistManager {
         if (['peer-unavailable', 'network', 'webrtc'].includes(e.type)) {
           if (this.peer && this.connectionAttempts++ < MAX_RECONNECTION_COUNT) {
             this.setStatus(ConnectionStatus.Connecting);
-            console.log("peerunavailable")
             this.connectToPeer();
           } else {
             this.setStatus(ConnectionStatus.Disconnected);
@@ -175,7 +174,6 @@ export default class AssistManager {
       peer.on("open", () => {
         if (this.peeropened) { return; }
         this.peeropened = true;
-        console.log('peeropen')
         this.connectToPeer();        
       });
     });
@@ -186,11 +184,9 @@ export default class AssistManager {
     if (!this.peer) { return; }
     this.setStatus(ConnectionStatus.Connecting);
     const id = this.peerID;
-    console.log("trying to connect to", id)
     const conn = this.peer.connect(id, { serialization: 'json', reliable: true});
     conn.on('open', () => {
       window.addEventListener("beforeunload", ()=>conn.open &&conn.send("unload"));
-      console.log("peer connected")
       
       let i = 0;
       let firstMessage = true;
@@ -252,7 +248,6 @@ export default class AssistManager {
     const onDataClose = () => {
       this.initiateCallEnd();
       this.setStatus(ConnectionStatus.Connecting);
-      console.log('closed peer conn. Reconnecting...')
       this.connectToPeer();
     }
 
@@ -263,7 +258,6 @@ export default class AssistManager {
     // }, 3000);
     conn.on('close', onDataClose);// Does it work ?
     conn.on("error", (e) => {
-      console.log("PeerJS connection error", e);
       this.setStatus(ConnectionStatus.Error);
     })
   }
@@ -290,12 +284,10 @@ export default class AssistManager {
   private notifyCallEnd() {
     const dataConn = this.dataConnection;
     if (dataConn) {
-      console.log("notifyCallEnd send")
       dataConn.send("call_end");
     }
   }
   private initiateCallEnd = () => {
-    console.log('initiateCallEnd')
     this.forceCallEnd();
     this.notifyCallEnd();
     this.onCallEnd?.();
@@ -349,7 +341,6 @@ export default class AssistManager {
     if (!this.peer || getState().calling !== CallingState.False) { return null; }
     
     update({ calling: CallingState.Requesting });
-    console.log('calling...')
     
     const call =  this.peer.call(this.peerID, localStream);
     call.on('stream', stream => {
@@ -393,12 +384,10 @@ export default class AssistManager {
   }
 
   clear() {
-    console.log('clearing', this.peerID)
     this.initiateCallEnd();
     this.dataCheckIntervalID && clearInterval(this.dataCheckIntervalID);
     if (this.peer) {
       this.peer.connections[this.peerID]?.forEach(c => c.open && c.close());
-      console.log("destroying peer...")
       this.peer.disconnect();
       this.peer.destroy();
       this.peer = null;

frontend/app/types/filter/customFilter.js

@@ -1,7 +1,7 @@
 import Record from 'Types/Record';
 import Target from 'Types/target';
 import { camelCased } from 'App/utils';
-// import { getEventIcon } from 'Types/filter';
+import { getEventIcon } from 'Types/filter';
 
 const CLICK = 'CLICK';
 const INPUT = 'INPUT';
@@ -105,6 +105,6 @@ export default Record({
     operator: event.operator || getOperatorDefault(event.type),
     // value: target ? target.label : event.value,
     value: typeof value === 'string' ? [value] : value,
-    icon: 'filters/metadata'
+    icon: event.type ? getEventIcon(event.type) : 'filters/metadata'
   }),
 })

frontend/app/types/filter/filter.js

@@ -124,6 +124,7 @@ export const getEventIcon = (filter) => {
   type = type || key;
   if (type === KEYS.USER_COUNTRY) return 'map-marker-alt';
   if (type === KEYS.USER_BROWSER) return 'window';
+  if (type === KEYS.USERBROWSER) return 'window';
   if (type === KEYS.PLATFORM) return 'window';
 
   if (type === TYPES.CLICK) return 'filters/click';