feat: network latency view

src/capturer/index.js

@@ -17,14 +17,13 @@ const startCapturing = () => {
       const msg = {
         time: new Date().toLocaleString().split(' ')[1],
         type: message.type,
+        serviceMethod: message.serviceMethod,
       };
 
       if (msg.type === 'sendNotification') {
-        msg.serviceMethod = message.serviceMethod;
         msg.arguments = message.arguments;
       } else if (msg.type === 'sendRequest') {
         msg.requestId = message.requestId;
-        msg.serviceMethod = message.serviceMethod;
         msg.arguments = message.arguments;
       } else if (msg.type === 'requestResult') {
         msg.requestId = message.requestId;
@@ -35,11 +34,9 @@ const startCapturing = () => {
           msg.error = message.error;
         }
       } else if (msg.type === 'onNotification') {
-        msg.serviceMethod = message.serviceMethod;
         msg.arguments = message.arguments;
       } else if (msg.type === 'onRequest') {
         msg.requestId = message.requestId;
-        msg.serviceMethod = message.serviceMethod;
         msg.arguments = message.arguments;
       } else if (msg.type === 'onRequestResult') {
         msg.requestId = message.requestId;
@@ -62,6 +59,8 @@ const stopCapturing = () => {
       delete window.__opensumi_devtools.messages;
     if (window.__opensumi_devtools.capture)
       delete window.__opensumi_devtools.capture;
+    if (window.__opensumi_devtools.latency)
+      delete window.__opensumi_devtools.latency;
   });
 };
 
@@ -79,4 +78,12 @@ const getMessages = () => {
   });
 };
 
-export { startCapturing, stopCapturing, getMessages };
+const getLatency = () => {
+  return evalInWindow(() => {
+    return window.__opensumi_devtools.latency;
+  }).then((latency) => {
+    return latency;
+  });
+};
+
+export { startCapturing, stopCapturing, getMessages, getLatency };

src/ui/MessagesView/MessagesView.jsx

@@ -10,14 +10,20 @@ import DataGrid from 'react-data-grid';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import './react-tabs.scss';
 import JsonView from 'react-json-view';
-import { startCapturing, stopCapturing, getMessages } from '../../capturer';
+import {
+  startCapturing,
+  stopCapturing,
+  getMessages,
+  getLatency,
+} from '../../capturer';
 import { updateMessages, getParsedMessage } from './messagesHelper';
 import { generateColumns } from './columnsHelper';
 import './MessagesView.scss';
-import NetSpeedView from './NetSpeedView';
 import NoMessageSelectedView from './NoMessageSelectedView';
+import NetSpeedView from './NetSpeedView';
+import NetLatencyView from './NetLatencyView';
 
-const INTERVAL = 500;
+const INTERVAL = 1000;
 
 const FilterContext = createContext(undefined);
 
@@ -42,6 +48,7 @@ const MessagesView = () => {
     send: 0, // the unit is bytes/s
     receive: 0,
   });
+  const [latency, setLatency] = useState(null);
   const [isCompact, setIsCompact] = useState(false);
 
   const timer = useRef(null);
@@ -61,6 +68,7 @@ const MessagesView = () => {
   useEffect(() => {
     setCompactMode();
     window.addEventListener('resize', setCompactMode);
+    toggleCapturing();
   }, []);
 
   // run if autoScroll or bottomRow changes
@@ -155,6 +163,17 @@ const MessagesView = () => {
     setSelectedRow(null);
   };
 
+  const updateLatency = () => {
+    getLatency()
+      .then((latency) => {
+        setLatency(latency);
+      })
+      .catch((error) => {
+        console.error('Getting latency failed!');
+        console.error(error.stack || error);
+      });
+  };
+
   const toggleCapturing = () => {
     if (capturing === true) {
       stopCapturing()
@@ -166,6 +185,7 @@ const MessagesView = () => {
             send: 0,
             receive: 0,
           });
+          setLatency(null);
         })
         .catch((error) => {
           console.error('Stoping capturing failed!');
@@ -175,7 +195,10 @@ const MessagesView = () => {
       startCapturing()
         .then(() => {
           setCapturing(true);
-          timer.current = setInterval(() => addMessages(), INTERVAL);
+          timer.current = setInterval(() => {
+            addMessages();
+            updateLatency();
+          }, INTERVAL);
         })
         .catch((error) => {
           console.error('Starting capturing failed!');
@@ -247,7 +270,9 @@ const MessagesView = () => {
           </button>
           <button className="toolbar-button" onClick={clearFilters}>
             <span className="toolbar-icon icon-reset"></span>
-            {isCompact ? null : <span className="toolbar-text">Reset Filters</span>}
+            {isCompact ? null : (
+              <span className="toolbar-text">Reset Filters</span>
+            )}
           </button>
           <button
             className={`toolbar-button ${
@@ -256,7 +281,9 @@ const MessagesView = () => {
             onClick={toggleShouldParseExtProtocol}
           >
             <span className="toolbar-icon icon-braces"></span>
-            {isCompact ? null : <span className="toolbar-text">Parse ExtProtocol</span>}
+            {isCompact ? null : (
+              <span className="toolbar-text">Parse ExtProtocol</span>
+            )}
           </button>
         </div>
         <div className="netbar">
@@ -265,6 +292,7 @@ const MessagesView = () => {
             upload={netspeed.send}
             download={netspeed.receive}
           />
+          <NetLatencyView capturing={capturing} latency={latency} />
         </div>
       </div>
       <ResizableTable>

src/ui/MessagesView/MessagesView.scss

@@ -20,6 +20,16 @@
   justify-content: flex-end;
   flex-wrap: nowrap;
   gap: 5px;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(225, 236, 244, 1) 100%
+  );
+  // disable text selection
+  -webkit-user-select: none; /* Safari */
+  user-select: none; /* Standard syntax */
 }
 
 .toolbar-button {

src/ui/MessagesView/NetLatencyView.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './NetLatencyView.scss';
+
+const NetLatencyView = ({ capturing, latency }) => {
+  if (!capturing) return null;
+
+  if (latency === null || typeof latency === 'undefined') {
+    latency = '-·-';
+  } else if (latency > 999) {
+    latency = '999+';
+  }
+
+  return (
+    <div className="netlatency">
+      <div>
+        <span>{latency}</span>
+      </div>
+      <div>
+        <span>ms</span>
+      </div>
+    </div>
+  );
+};
+
+export default NetLatencyView;

src/ui/MessagesView/NetLatencyView.scss

@@ -0,0 +1,7 @@
+.netlatency {
+  width: 30px;
+  color: #39739d;
+  font-size: 12px;
+  transform: scale(0.8);
+  text-align: center;
+}

src/ui/MessagesView/NetSpeedView.jsx

@@ -8,16 +8,14 @@ const NetSpeedView = ({ capturing, upload, download }) => {
   const downloadSpeed = format(download / 1000);
 
   return (
-    <div className="netspeed-container">
-      <div className="netspeed-content">
-        <div>
-          <span className='netspeed-icon icon-upload'></span>
-          <span>{uploadSpeed.number}</span> <span>{uploadSpeed.unit}</span>
-        </div>
-        <div>
-          <span className='netspeed-icon icon-download'></span>
-          <span>{downloadSpeed.number}</span> <span>{downloadSpeed.unit}</span>
-        </div>
+    <div className="netspeed">
+      <div>
+        <span className="netspeed-icon icon-upload"></span>
+        <span>{uploadSpeed.number}</span> <span>{uploadSpeed.unit}</span>
+      </div>
+      <div>
+        <span className="netspeed-icon icon-download"></span>
+        <span>{downloadSpeed.number}</span> <span>{downloadSpeed.unit}</span>
       </div>
     </div>
   );

src/ui/MessagesView/NetSpeedView.scss

@@ -1,21 +1,8 @@
-.netspeed-container {
-  background: rgb(2, 0, 36);
-  background: linear-gradient(
-    90deg,
-    rgba(2, 0, 36, 1) 0%,
-    rgba(255, 255, 255, 1) 0%,
-    rgba(225, 236, 244, 1) 100%
-  );
-  // disable text selection
-  -webkit-user-select: none; /* Safari */
-  user-select: none; /* Standard syntax */
-}
-
-.netspeed-content {
+.netspeed {
   width: 90px;
   color: #39739d;
   font-size: 12px;
-  transform: scale(0.8) translateX(7px);
+  transform: scale(0.8) translateX(16px);
   text-align: right;
 }
 

src/ui/MessagesView/messagesHelper.js

@@ -14,7 +14,12 @@ const updateMessages = (oldMessages, newRawMessages) => {
   // the corresponding sendRequest/onRequest row should be updated
   const updatedMessages = oldMessages.concat();
 
-  newRawMessages.forEach((message) => {
+  for (const message of newRawMessages) {
+    // ignore rtt messages
+    if (message.serviceMethod === 'ConnectionBackServicePath:$measure') {
+      continue;
+    }
+
     const msg = {
       time: message.time,
       type: message.type,
@@ -143,7 +148,7 @@ const updateMessages = (oldMessages, newRawMessages) => {
     } else {
       newMessages.push(msg);
     }
-  });
+  }
 
   return {
     updatedMessages,