web addon flow class

addon/web/client/src/App.tsx

@@ -8,12 +8,12 @@ import BreakPoint from './components/BreakPoint'
 import EditFlow from './components/EditFlow'
 
 import { FlowManager } from './flow'
-import { isTextBody, getSize } from './utils'
+import { isTextBody } from './utils'
-import { parseMessage, SendMessageType, buildMessageMeta, IFlow, MessageType, IRequest, IResponse } from './message'
+import { parseMessage, SendMessageType, buildMessageMeta, Flow, MessageType, IResponse } from './message'
 
 interface IState {
-  flows: IFlow[]
+  flows: Flow[]
-  flow: IFlow | null
+  flow: Flow | null
   flowTab: 'Headers' | 'Preview' | 'Response'
 }
 
@@ -68,29 +68,26 @@ class App extends React.Component<any, IState> {
       // console.log('msg:', msg)
 
       if (msg.type === MessageType.REQUEST) {
-        const flow = { id: msg.id, request: msg.content as IRequest, waitIntercept: msg.waitIntercept }
+        const flow = new Flow(msg)
         this.flowMgr.add(flow)
         this.setState({ flows: this.flowMgr.showList() })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
         const flow = this.flowMgr.get(msg.id)
         if (!flow) return
-        flow.waitIntercept = msg.waitIntercept
+        flow.addRequestBody(msg)
-        flow.request.body = msg.content as ArrayBuffer
         this.setState({ flows: this.state.flows })
       }
       else if (msg.type === MessageType.RESPONSE) {
         const flow = this.flowMgr.get(msg.id)
         if (!flow) return
-        flow.waitIntercept = msg.waitIntercept
+        flow.addResponse(msg)
-        flow.response = msg.content as IResponse
         this.setState({ flows: this.state.flows })
       }
       else if (msg.type === MessageType.RESPONSE_BODY) {
         const flow = this.flowMgr.get(msg.id)
         if (!flow || !flow.response) return
-        flow.waitIntercept = msg.waitIntercept
+        flow.addResponseBody(msg)
-        flow.response.body = msg.content as ArrayBuffer
         this.setState({ flows: this.state.flows })
       }
     }
@@ -257,32 +254,24 @@ class App extends React.Component<any, IState> {
           <tbody>
             {
               flows.map(f => {
-                const url = f.request.url
+                const fp = f.preview()
-                const u = new URL(url)
-                let host = u.host
-                if (host.length > 35) host = host.slice(0, 35) + '...'
-                let path = u.pathname + u.search
-                if (path.length > 65) path = path.slice(0, 65) + '...'
-
-                const request = f.request
-                const response: IResponse = (f.response || {}) as any
 
                 const classNames = []
-                if (this.state.flow && this.state.flow.id === f.id) classNames.push('tr-selected')
+                if (this.state.flow && this.state.flow.id === fp.id) classNames.push('tr-selected')
-                if (f.waitIntercept) classNames.push('tr-wait-intercept')
+                if (fp.waitIntercept) classNames.push('tr-wait-intercept')
 
                 return (
-                  <tr className={classNames.length ? classNames.join(' ') : undefined} key={f.id}
+                  <tr className={classNames.length ? classNames.join(' ') : undefined} key={fp.id}
                     onClick={() => {
                       this.setState({ flow: f })
                     }}
                   >
-                    <td>{f.no}</td>
+                    <td>{fp.no}</td>
-                    <td>{host}</td>
+                    <td>{fp.host}</td>
-                    <td>{path}</td>
+                    <td>{fp.path}</td>
-                    <td>{request.method}</td>
+                    <td>{fp.method}</td>
-                    <td>{response.statusCode || '(pending)'}</td>
+                    <td>{fp.statusCode}</td>
-                    <td>{getSize(response)}</td>
+                    <td>{fp.size}</td>
                   </tr>
                 )
               })

addon/web/client/src/components/EditFlow.tsx

@@ -4,7 +4,7 @@ import Modal from 'react-bootstrap/Modal'
 import Form from 'react-bootstrap/Form'
 import Alert from 'react-bootstrap/Alert'
 
-import { SendMessageType, buildMessageEdit, IRequest, IResponse, Header, IFlow } from '../message'
+import { SendMessageType, buildMessageEdit, IRequest, IResponse, Header, Flow } from '../message'
 import { isTextBody } from '../utils'
 
 
@@ -96,7 +96,7 @@ const parseResponse = (content: string): IResponse | undefined => {
 
 
 interface IProps {
-  flow: IFlow
+  flow: Flow
   onChangeRequest: (request: IRequest) => void
   onChangeResponse: (response: IResponse) => void
   onMessage: (msg: ArrayBufferLike) => void

addon/web/client/src/flow.ts

@@ -1,8 +1,8 @@
-import { IFlow } from './message'
+import { Flow } from './message'
 
 export class FlowManager {
-  private items: IFlow[]
+  private items: Flow[]
-  private _map: Map<string, IFlow>
+  private _map: Map<string, Flow>
   private filterText: string
   private filterTimer: number | null
   private num: number
@@ -25,7 +25,7 @@ export class FlowManager {
     })
   }
 
-  add(item: IFlow) {
+  add(item: Flow) {
     item.no = ++this.num
     this.items.push(item)
     this._map.set(item.id, item)

addon/web/client/src/message.ts

@@ -1,3 +1,5 @@
+import { getSize } from './utils'
+
 export enum MessageType {
   REQUEST = 1,
   REQUEST_BODY = 2,
@@ -28,12 +30,84 @@ export interface IMessage {
   content?: ArrayBuffer | IRequest | IResponse
 }
 
-export interface IFlow {
+export class Flow {
-  id: string
+  public no: number
-  no?: number
+  public id: string
-  waitIntercept: boolean
+  public waitIntercept: boolean
-  request: IRequest
+  public request: IRequest
-  response?: IResponse
+  public response: IResponse | null = null
+
+  private url: URL
+  private _host = ''
+  private _path = ''
+  private _size = ''
+
+  public static curNo = 0
+
+  constructor(msg: IMessage) {
+    this.no = ++Flow.curNo
+    this.id = msg.id
+    this.waitIntercept = msg.waitIntercept
+    this.request = msg.content as IRequest
+
+    this.url = new URL(this.request.url)
+  }
+
+  public addRequestBody(msg: IMessage): Flow {
+    this.waitIntercept = msg.waitIntercept
+    this.request.body = msg.content as ArrayBuffer
+    return this
+  }
+
+  public addResponse(msg: IMessage): Flow {
+    this.waitIntercept = msg.waitIntercept
+    this.response = msg.content as IResponse
+    return this
+  }
+
+  public addResponseBody(msg: IMessage): Flow {
+    this.waitIntercept = msg.waitIntercept
+    if (this.response) this.response.body = msg.content as ArrayBuffer
+    return this
+  }
+
+  public preview() {
+    return {
+      no: this.no,
+      id: this.id,
+      waitIntercept: this.waitIntercept,
+      host: this.host,
+      path: this.path,
+      method: this.request.method,
+      statusCode: this.response ? this.response.statusCode : '(pending)',
+      size: this.size,
+    }
+  }
+
+  private get host(): string {
+    if (this._host) return this._host
+    let _host = this.url.host
+    if (_host.length > 35) _host = _host.slice(0, 35) + '...'
+    this._host = _host
+    return _host
+  }
+
+  private get path(): string {
+    if (this._path) return this._path
+    let _path = this.url.pathname + this.url.search
+    if (_path.length > 65) _path = _path.slice(0, 65) + '...'
+    this._path = _path
+    return _path
+  }
+
+  private get size(): string {
+    if (!this.response) return '0'
+    if (!this.response.header) return '0'
+    if (this._size) return this._size
+
+    this._size = getSize(this.response)
+    return this._size
+  }
 }
 
 const allMessageBytes = [
@@ -92,7 +166,7 @@ export enum SendMessageType {
 // type: 11/12/13/14
 // messageEdit
 // version 1 byte + type 1 byte + id 36 byte + header len 4 byte + header content bytes + body len 4 byte + [body content bytes]
-export const buildMessageEdit = (messageType: SendMessageType, flow: IFlow) => {
+export const buildMessageEdit = (messageType: SendMessageType, flow: Flow) => {
   if (messageType === SendMessageType.DROP_REQUEST || messageType === SendMessageType.DROP_RESPONSE) {
     const view = new Uint8Array(38)
     view[0] = 1