web addon: add connection info

web/client/src/App.tsx

@@ -16,7 +16,6 @@ import { ConnectionManager, IConnection } from './lib/connection'
 interface IState {
   flows: Flow[]
   flow: Flow | null
-  flowTab: 'Headers' | 'Preview' | 'Response'
   wsStatus: 'open' | 'close' | 'connecting'
 }
 
@@ -43,7 +42,6 @@ class App extends React.Component<IProps, IState> {
     this.state = {
       flows: this.flowMgr.showList(),
       flow: null,
-      flowTab: 'Headers', // Headers, Preview, Response
       wsStatus: 'close',
     }
 
@@ -110,9 +108,10 @@ class App extends React.Component<IProps, IState> {
       // console.log('msg:', msg)
 
       if (msg.type === MessageType.CONN) {
-        this.connMgr.set(msg.id, msg.content as IConnection)
+        this.connMgr.add(msg.id, msg.content as IConnection)
+        this.setState({ flows: this.state.flows })
       } else if (msg.type === MessageType.REQUEST) {
-        const flow = new Flow(msg)
+        const flow = new Flow(msg, this.connMgr)
         this.flowMgr.add(flow)
 
         let shouldScroll = false

web/client/src/components/ViewFlow.tsx

@@ -91,7 +91,26 @@ class ViewFlow extends React.Component<Iprops, IState> {
     const { flow } = this.props
     if (!flow) return null
 
-    return <div>detail todo</div>
+    const conn = flow.getConn()
+    if (!conn) return null
+
+    return (
+      <div>
+        <div className="header-block">
+          <p>Server Connection</p>
+          <div className="header-block-content">
+            <p>Address: {conn.serverConn.address}</p>
+            <p>Resolved Address: {conn.serverConn.peername}</p>
+          </div>
+        </div>
+        <div className="header-block">
+          <p>Client Connection</p>
+          <div className="header-block-content">
+            <p>Address: {conn.clientConn.address}</p>
+          </div>
+        </div>
+      </div>
+    )
   }
 
   render() {

web/client/src/lib/connection.ts

@@ -1,5 +1,4 @@
 export interface IConnection {
-  id: string
   clientConn: {
     id: string
     tls: boolean
@@ -23,7 +22,7 @@ export class ConnectionManager {
     return this._map.get(id)
   }
 
-  set(id: string, conn: IConnection) {
+  add(id: string, conn: IConnection) {
     this._map.set(id, conn)
   }
 

web/client/src/lib/flow.ts

@@ -1,3 +1,4 @@
+import type { ConnectionManager, IConnection } from './connection'
 import { IMessage, MessageType } from './message'
 import { arrayBufferToBase64, bufHexView, getSize, isTextBody } from './utils'
 
@@ -73,7 +74,10 @@ export class Flow {
   private _previewRequestBody: IPreviewBody | null = null
   private _hexviewResponseBody: string | null = null
 
-  constructor(msg: IMessage) {
+  private connMgr: ConnectionManager;
+  private conn: IConnection | undefined;
+
+  constructor(msg: IMessage, connMgr: ConnectionManager) {
     this.no = ++Flow.curNo
     this.id = msg.id
     this.waitIntercept = msg.waitIntercept
@@ -89,6 +93,8 @@ export class Flow {
     this._isTextResponse = null
     this._requestBody = null
     this._responseBody = null
+
+    this.connMgr = connMgr
   }
 
   public addRequestBody(msg: IMessage): Flow {
@@ -248,6 +254,12 @@ export class Flow {
     this._hexviewResponseBody = bufHexView(this.response.body)
     return this._hexviewResponseBody
   }
+
+  public getConn(): IConnection | undefined {
+    if (this.conn) return this.conn
+    this.conn = this.connMgr.get(this.connId)
+    return this.conn
+  }
 }
 
 export class FlowManager {