feature(ui) - toastr

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -6,15 +6,16 @@ import { toggleChatWindow } from 'Duck/sessions';
 import { connectPlayer } from 'Player/store';
 import ChatWindow from '../../ChatWindow';
 import { callPeer } from 'Player'
-import { CallingState } from 'Player/MessageDistributor/managers/AssistManager';
-
+import { CallingState, ConnectionStatus } from 'Player/MessageDistributor/managers/AssistManager';
+import { toast } from 'react-toastify';
 interface Props {
   userId: String,
   toggleChatWindow: (state) => void,
-  calling: CallingState
+  calling: CallingState,
+  peerConnectionStatus: ConnectionStatus
 }
 
-function AssistActions({ toggleChatWindow, userId, calling }: Props) {
+function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus }: Props) {
   const [showChat, setShowChat] = useState(false)
   const [ incomeStream, setIncomeStream ] = useState<MediaStream | null>(null);
   const [ localStream, setLocalStream ] = useState<MediaStream | null>(null);
@@ -27,11 +28,13 @@ function AssistActions({ toggleChatWindow, userId, calling }: Props) {
   function onClose(stream) {    
     stream.getTracks().forEach(t=>t.stop());
   }
+
   function onReject() {
-    console.log("Rejected");
+    toast.info(`Call was rejected.`);
   }
-  function onError() {
-    console.log("Something went wrong");
+  
+  function onError() {    
+    toast.error(`Something went wrong!`);
   }
 
   function call() { 
@@ -82,5 +85,6 @@ function AssistActions({ toggleChatWindow, userId, calling }: Props) {
 const con = connect(null, { toggleChatWindow })
 
 export default con(connectPlayer(state => ({
-  calling: state.calling
+  calling: state.calling,
+  peerConnectionStatus: state.peerConnectionStatus,
 }))(AssistActions))

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -95,8 +95,7 @@ function getStorageName(type) {
   showExceptions: state.exceptionsList.length > 0,
   showLongtasks: state.longtasksList.length > 0,
 }))
-@connect((state, props) => ({
-  showDevTools: state.getIn([ 'user', 'account', 'appearance', 'sessionsDevtools' ]),
+@connect((state, props) => ({  
   fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
   bottomBlock: state.getIn([ 'components', 'player', 'bottomBlock' ]),
   showStorage: props.showStorage || !state.getIn(['components', 'player', 'hiddenHints', 'storage']),
@@ -117,7 +116,7 @@ export default class Controls extends React.Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    if (nextProps.showDevTools !== this.props.showDevTools ||
+    if (
       nextProps.fullscreen !== this.props.fullscreen ||
       nextProps.bottomBlock !== this.props.bottomBlock ||
       nextProps.endTime !== this.props.endTime ||
@@ -217,8 +216,7 @@ export default class Controls extends React.Component {
   }
 
   render() {
-    const {
-      showDevTools,
+    const {      
       bottomBlock,
       toggleBottomBlock,
       live,
@@ -303,7 +301,7 @@ export default class Controls extends React.Component {
                 </React.Fragment>
               }
               <div className={ styles.divider } />
-              { showDevTools &&
+              { !live &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(NETWORK) }
@@ -335,7 +333,7 @@ export default class Controls extends React.Component {
                   icon="vendors/graphql"
                 />
               }
-              { !live && showStorage && showDevTools &&
+              { !live && showStorage &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(STORAGE) }
@@ -345,7 +343,7 @@ export default class Controls extends React.Component {
                   icon={ getStorageIconName(storageType) }
                 />
               }
-              { showDevTools &&
+              { 
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(CONSOLE) }
@@ -356,7 +354,7 @@ export default class Controls extends React.Component {
                   hasErrors={ logRedCount > 0 }
                 />
               }
-              { !live && showExceptions && showDevTools &&
+              { showExceptions &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(EXCEPTIONS) }
@@ -367,7 +365,7 @@ export default class Controls extends React.Component {
                   hasErrors={ exceptionsCount > 0 }
                 />
               }
-              { showDevTools && showStack &&
+              { showStack &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(STACKEVENTS) }
@@ -378,7 +376,7 @@ export default class Controls extends React.Component {
                   hasErrors={ stackRedCount > 0 }
                 />
               }
-              { !live && showProfiler && showDevTools &&
+              { !live && showProfiler &&
                 <ControlButton
                   disabled={ disabled }
                   onClick={ () => toggleBottomBlock(PROFILER) }
@@ -388,13 +386,16 @@ export default class Controls extends React.Component {
                   icon="code"
                 />
               }              
-              <ControlButton
-                disabled={ disabled }
-                onClick={ () => toggleBottomBlock(PERFORMANCE) }
-                active={ bottomBlock === PERFORMANCE }
-                label="Performance"
-                icon="tachometer-slow"
-              />
+              {
+                !live && 
+                <ControlButton
+                  disabled={ disabled }
+                  onClick={ () => toggleBottomBlock(PERFORMANCE) }
+                  active={ bottomBlock === PERFORMANCE }
+                  label="Performance"
+                  icon="tachometer-slow"
+                />
+              }
               { !live && showLongtasks &&
                 <ControlButton
                   disabled={ disabled }

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -64,8 +64,7 @@ const getPointerIcon = (type) => {
   fetchList: state.fetchList,
 }))
 @connect(state => ({
-  issues: state.getIn([ 'sessions', 'current', 'issues' ]),
-  showDevTools: state.getIn([ 'user', 'account', 'appearance', 'sessionsDevtools' ]),
+  issues: state.getIn([ 'sessions', 'current', 'issues' ]),  
   clickRageTime: state.getIn([ 'sessions', 'current', 'clickRage' ]) &&
     state.getIn([ 'sessions', 'current', 'clickRageTime' ]),
   returningLocationTime: state.getIn([ 'sessions', 'current', 'returningLocation' ]) &&
@@ -102,8 +101,7 @@ export default class Timeline extends React.PureComponent {
       live,
       logList,
       exceptionsList,
-      resourceList,
-      showDevTools,
+      resourceList,      
       clickRageTime,
       stackList,
       fetchList,
@@ -255,7 +253,7 @@ export default class Timeline extends React.PureComponent {
                 }
               />
              */ }
-            { showDevTools && exceptionsList
+            { exceptionsList
               .map(e => (
                 <div
                   key={ e.key }
@@ -297,7 +295,7 @@ export default class Timeline extends React.PureComponent {
                 // />
               ))
             }
-            { showDevTools && logList
+            { logList
               .map(l => l.isRed() && (
                 <div
                   key={ l.key }
@@ -352,7 +350,7 @@ export default class Timeline extends React.PureComponent {
                 // />
               ))
             }
-            { showDevTools && resourceList
+            { resourceList
               .filter(r => r.isRed() || r.isYellow())
               .map(r => (
                 <div
@@ -402,7 +400,7 @@ export default class Timeline extends React.PureComponent {
                 // />
               ))
             }
-            { showDevTools && fetchList
+            { fetchList
               .filter(e => e.isRed())
               .map(e => (
                 <div
@@ -443,7 +441,7 @@ export default class Timeline extends React.PureComponent {
                 // />
               ))
             }
-            { showDevTools && stackList
+            { stackList
               .filter(e => e.isRed())
               .map(e => (
                 <div