diff --git a/addon/web/client/src/App.css b/addon/web/client/src/App.css index 2be344b..b08d9c6 100644 --- a/addon/web/client/src/App.css +++ b/addon/web/client/src/App.css @@ -12,11 +12,17 @@ margin-right: 20px; } + .main-table-wrap tbody tr.tr-selected { background-color: rgb(35, 118, 229); color: white; } +.main-table-wrap tbody tr.tr-wait-intercept { + background-color: rgb(216, 110, 83); + color: white; +} + .flow-detail { position: fixed; top: 0; @@ -31,6 +37,10 @@ word-break: break-all; } +.flow-detail .header-tabs { + display: flex; +} + .flow-detail .header-tabs span { display: inline-block; line-height: 1; @@ -42,6 +52,10 @@ border-bottom: 2px rgb(35, 118, 229) solid; } +.flow-detail .header-tabs .flow-wait-area button { + margin-left: 10px; +} + /* .flow-detail .header-block { margin: 20px; } */ diff --git a/addon/web/client/src/App.js b/addon/web/client/src/App.js index f31add4..1cc2421 100644 --- a/addon/web/client/src/App.js +++ b/addon/web/client/src/App.js @@ -27,25 +27,26 @@ const getSize = response => { } const parseMessage = data => { - if (data.byteLength < 38) return null - const meta = new Int8Array(data.slice(0, 2)) + if (data.byteLength < 39) return null + const meta = new Int8Array(data.slice(0, 3)) const version = meta[0] if (version !== 1) return null const type = meta[1] if (![1, 2, 3].includes(type)) return null - const id = new TextDecoder().decode(data.slice(2, 38)) + const id = new TextDecoder().decode(data.slice(3, 39)) const resp = { type: ['request', 'response', 'responseBody'][type-1], id, + waitIntercept: meta[2] === 1, } - if (data.byteLength === 38) return resp + if (data.byteLength === 39) return resp if (type === 3) { - resp.content = data.slice(38) + resp.content = data.slice(39) return resp } - let content = new TextDecoder().decode(data.slice(38)) + let content = new TextDecoder().decode(data.slice(39)) try { content = JSON.parse(content) } catch (err) { @@ -64,11 +65,12 @@ const parseMessage = data => { */ const buildMessage = (messageType, id, content) => { content = new TextEncoder().encode(content) - const data = new Uint8Array(38 + content.byteLength) + const data = new Uint8Array(39 + content.byteLength) data[0] = 1 data[1] = messageType - data.set(new TextEncoder().encode(id), 2) - data.set(content, 38) + data[2] = 0 + data.set(new TextEncoder().encode(id), 3) + data.set(content, 39) return data } @@ -84,6 +86,9 @@ class App extends React.Component { flow: null, flowTab: 'Headers', // Headers, Preview, Response + + interceptUriInputing: '', + interceptUri: '', } this.ws = null } @@ -120,19 +125,21 @@ class App extends React.Component { console.log('msg:', msg) if (msg.type === 'request') { - const flow = { id: msg.id, request: msg.content } + const flow = { id: msg.id, request: msg.content, waitIntercept: msg.waitIntercept } this.flowMgr.add(flow) this.setState({ flows: this.flowMgr.showList() }) } else if (msg.type === 'response') { const flow = this.flowMgr.get(msg.id) if (!flow) return + flow.waitIntercept = msg.waitIntercept flow.response = msg.content this.setState({ flows: this.state.flows }) } else if (msg.type === 'responseBody') { const flow = this.flowMgr.get(msg.id) if (!flow || !flow.response) return + flow.waitIntercept = msg.waitIntercept flow.response.body = msg.content this.setState({ flows: this.state.flows }) } @@ -159,6 +166,18 @@ class App extends React.Component { { this.setState({ flowTab: 'Headers' }) }}>Headers { this.setState({ flowTab: 'Preview' }) }}>Preview { this.setState({ flowTab: 'Response' }) }}>Response + { + !flow.waitIntercept ? null : +
{f.no} | {host} | {path} |