{"version":3,"sources":["flow.js","utils.js","App.js","reportWebVitals.js","index.js"],"names":["FlowManager","this","items","_map","Map","filterText","filterTimer","num","max","filter","item","request","url","includes","no","push","set","id","length","oldest","shift","delete","get","text","callback","clearTimeout","setTimeout","isTextResponse","response","header","test","join","getSize","len","parseInt","body","byteLength","isNaN","toFixed","messageEnum","allMessageBytes","Object","keys","map","k","messageByteMap","reduce","m","buildMessage","messageType","content","TextEncoder","encode","data","Uint8Array","App","props","flowMgr","state","flows","showList","flow","flowTab","interceptUriInputing","interceptUri","ws","initWs","close","host","URL","document","WebSocket","binaryType","onopen","console","log","onclose","onmessage","evt","msg","meta","Int8Array","slice","type","TextDecoder","decode","resp","waitIntercept","JSON","parse","err","parseMessage","add","setState","error","onerror","className","onClick","Button","size","stringify","send","style","padding","method","statusCode","key","clear","Form","Control","placeholder","onChange","e","value","target","changeFilterLazy","display","alignItems","Table","striped","bordered","f","u","path","pathname","search","classNames","renderFlow","React","Component","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.7030457c.chunk.js","sourcesContent":["export class FlowManager {\n  constructor() {\n    this.items = []\n    this._map = new Map()\n    this.filterText = ''\n    this.filterTimer = null\n    this.num = 0\n\n    this.max = 1000\n  }\n\n  showList() {\n    if (!this.filterText) return this.items\n    return this.items.filter(item => {\n      return item.request.url.includes(this.filterText)\n    })\n  }\n\n  add(item) {\n    item.no = ++this.num\n    this.items.push(item)\n    this._map.set(item.id, item)\n    \n    if (this.items.length > this.max) {\n      const oldest = this.items.shift()\n      this._map.delete(oldest.id)\n    }\n  }\n\n  get(id) {\n    return this._map.get(id)\n  }\n\n  changeFilter(text) {\n    this.filterText = text\n  }\n\n  changeFilterLazy(text, callback) {\n    if (this.filterTimer) {\n      clearTimeout(this.filterTimer)\n      this.filterTimer = null\n    }\n\n    this.filterTimer = setTimeout(() => {\n      this.filterText = text\n      callback()\n    }, 300)\n  }\n\n  clear() {\n    this.items = []\n    this._map = new Map()\n  }\n}\n","export const isTextResponse = response => {\n  if (!response) return false\n  if (!response.header) return false\n  if (!response.header['Content-Type']) return false\n\n  return /text|javascript|json/.test(response.header['Content-Type'].join(''))\n}\n\nexport const getSize = response => {\n  if (!response) return '0'\n  if (!response.header) return '0'\n\n  let len\n  if (response.header['Content-Length']) {\n    len = parseInt(response.header['Content-Length'][0])\n  } else if (response && response.body) {\n    len = response.body.byteLength\n  }\n  if (!len) return '0'\n  if (isNaN(len)) return '0'\n  if (len <= 0) return '0'\n  \n  if (len < 1024) return `${len} B`\n  if (len < 1024*1024) return `${(len/1024).toFixed(2)} KB`\n  return `${(len/(1024*1024)).toFixed(2)} MB`\n}\n\nconst messageEnum = {\n  'request': 1,\n  'requestBody': 2,\n  'response': 3,\n  'responseBody': 4,\n}\n\nconst allMessageBytes = Object.keys(messageEnum).map(k => messageEnum[k])\n\nconst messageByteMap = Object.keys(messageEnum).reduce((m, k) => {\n  m[messageEnum[k]] = k\n  return m\n}, {})\n\nexport const parseMessage = data => {\n  if (data.byteLength < 39) return null\n  const meta = new Int8Array(data.slice(0, 3))\n  const version = meta[0]\n  if (version !== 1) return null\n  const type = meta[1]\n  if (!allMessageBytes.includes(type)) return null\n  const id = new TextDecoder().decode(data.slice(3, 39))\n\n  const resp = {\n    type: messageByteMap[type],\n    id,\n    waitIntercept: meta[2] === 1,\n  }\n  if (data.byteLength === 39) return resp\n  if (type === messageEnum['requestBody'] || type === messageEnum['responseBody']) {\n    resp.content = data.slice(39)\n    return resp\n  }\n\n  let content = new TextDecoder().decode(data.slice(39))\n  try {\n    content = JSON.parse(content)\n  } catch (err) {\n    return null\n  }\n\n  resp.content = content\n  return resp\n}\n\n/**\n * \n * @param {number} messageType \n * @param {string} id \n * @param {string} content \n */\nexport const buildMessage = (messageType, id, content) => {\n  content = new TextEncoder().encode(content)\n  const data = new Uint8Array(39 + content.byteLength)\n  data[0] = 1\n  data[1] = messageType\n  data[2] = 0\n  data.set(new TextEncoder().encode(id), 3)\n  data.set(content, 39)\n  return data\n}\n","import React from 'react'\nimport Table from 'react-bootstrap/Table'\nimport Form from 'react-bootstrap/Form'\nimport Button from 'react-bootstrap/Button'\nimport './App.css'\n\nimport { FlowManager } from './flow'\nimport { isTextResponse, getSize, parseMessage, buildMessage } from './utils'\n\nclass App extends React.Component {\n\n  constructor(props) {\n    super(props)\n\n    this.flowMgr = new FlowManager()\n\n    this.state = {\n      flows: this.flowMgr.showList(),\n      flow: null,\n\n      flowTab: 'Headers', // Headers, Preview, Response\n\n      interceptUriInputing: '',\n      interceptUri: '',\n    }\n\n    this.ws = null\n  }\n\n  componentDidMount() {\n    this.initWs()\n  }\n\n  componentWillUnmount() {\n    if (this.ws) {\n      this.ws.close()\n    }\n  }\n\n  initWs() {\n    if (this.ws) return\n\n    let host;\n    if (process.env.NODE_ENV === 'development') {\n      host = 'localhost:9081'\n    } else {\n      host = new URL(document.URL).host\n    }\n    this.ws = new WebSocket(`ws://${host}/echo`)\n    this.ws.binaryType = 'arraybuffer'\n    this.ws.onopen = () => { console.log('OPEN') }\n    this.ws.onclose = () => { console.log('CLOSE') }\n    this.ws.onmessage = evt => {\n      const msg = parseMessage(evt.data)\n      if (!msg) {\n        console.error('parse error:', evt.data)\n        return\n      }\n      // console.log('msg:', msg)\n\n      if (msg.type === 'request') {\n        const flow = { id: msg.id, request: msg.content, waitIntercept: msg.waitIntercept }\n        this.flowMgr.add(flow)\n        this.setState({ flows: this.flowMgr.showList() })\n      }\n      else if (msg.type === 'requestBody') {\n        const flow = this.flowMgr.get(msg.id)\n        if (!flow) return\n        flow.request.body = msg.content\n        this.setState({ flows: this.state.flows })\n      }\n      else if (msg.type === 'response') {\n        const flow = this.flowMgr.get(msg.id)\n        if (!flow) return\n        flow.waitIntercept = msg.waitIntercept\n        flow.response = msg.content\n        this.setState({ flows: this.state.flows })\n      }\n      else if (msg.type === 'responseBody') {\n        const flow = this.flowMgr.get(msg.id)\n        if (!flow || !flow.response) return\n        flow.waitIntercept = msg.waitIntercept\n        flow.response.body = msg.content\n        this.setState({ flows: this.state.flows })\n      }\n    }\n    this.ws.onerror = evt => {\n      console.log('ERROR:', evt)\n    }\n  }\n\n  renderFlow() {\n    const { flow, flowTab } = this.state\n    if (!flow) return null\n\n    const request = flow.request\n    const response = flow.response || {}\n\n    return (\n      <div className=\"flow-detail\">\n        <div className=\"header-tabs\">\n          <span onClick={() => { this.setState({ flow: null }) }}>x</span>\n          <span className={flowTab === 'Headers' ? 'selected' : null} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>\n          <span className={flowTab === 'Preview' ? 'selected' : null} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>\n          <span className={flowTab === 'Response' ? 'selected' : null} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>\n          {\n            !flow.waitIntercept ? null :\n            <div className=\"flow-wait-area\">\n              <Button size=\"sm\" onClick={() => {\n                const msg = buildMessage(11, flow.id, JSON.stringify(flow.request))\n                this.ws.send(msg)\n                flow.waitIntercept = false\n                this.setState({ flows: this.state.flows })\n              }}>Continue</Button>\n              <Button size=\"sm\">Drop</Button>\n            </div>\n          }\n        </div>\n\n        <div style={{ padding: '20px' }}>\n          {\n            !(flowTab === 'Headers') ? null :\n            <div>\n              <div className=\"header-block\">\n                <p>General</p>\n                <div className=\"header-block-content\">\n                  <p>Request URL: {request.url}</p>\n                  <p>Request Method: {request.method}</p>\n                  <p>Status Code: {`${response.statusCode || '(pending)'}`}</p>\n                </div>\n              </div>\n\n              {\n                !(response.header) ? null :\n                <div className=\"header-block\">\n                  <p>Response Headers</p>\n                  <div className=\"header-block-content\">\n                    {\n                      Object.keys(response.header).map(key => {\n                        return (\n                          <p key={key}>{key}: {response.header[key].join(' ')}</p>\n                        )\n                      })\n                    }\n                  </div>\n                </div>\n              }\n\n              <div className=\"header-block\">\n                <p>Request Headers</p>\n                <div className=\"header-block-content\">\n                  {\n                    !(request.header) ? null :\n                    Object.keys(request.header).map(key => {\n                      return (\n                        <p key={key}>{key}: {request.header[key].join(' ')}</p>\n                      )\n                    })\n                  }\n                </div>\n              </div>\n\n              {\n                !(request.body && request.body.byteLength) ? null :\n                <div className=\"header-block\">\n                  <p>Request Body</p>\n                  <div className=\"header-block-content\">\n                    <p>\n                      {\n                        !(isTextResponse(request)) ? \"Not text\" :\n                        new TextDecoder().decode(request.body)\n                      }\n                    </p>\n                  </div>\n                </div>\n              }\n\n            </div>\n          }\n\n          {\n            !(flowTab === 'Response') ? null :\n            !(response.body && response.body.byteLength) ? <div>No response</div> :\n            !(isTextResponse(response)) ? <div>Not text response</div> :\n            <div>\n              {new TextDecoder().decode(response.body)}\n            </div>\n          }\n        </div>\n\n      </div>\n    )\n  }\n  \n  render() {\n    const { flows, interceptUriInputing, interceptUri } = this.state\n    return (\n      <div className=\"main-table-wrap\">\n        <div className=\"top-control\">\n          <div><Button size=\"sm\" onClick={() => {\n            this.flowMgr.clear()\n            this.setState({ flows: this.flowMgr.showList(), flow: null })\n          }}>Clear</Button></div>\n          <div>\n            <Form.Control\n              size=\"sm\" placeholder=\"Filter\"\n              onChange={(e) => {\n                const value = e.target.value\n                this.flowMgr.changeFilterLazy(value, () => {\n                  this.setState({ flows: this.flowMgr.showList() })\n                })\n              }}\n            >\n            </Form.Control>\n          </div>\n\n          <div style={{ display: 'flex', alignItems: 'center' }}>\n            <Form.Control size=\"sm\" placeholder=\"Set interpect\" value={interceptUriInputing} onChange={e => {\n              this.setState({ interceptUriInputing: e.target.value || '' })\n            }}></Form.Control>\n            <Button size=\"sm\" onClick={() => {\n              this.setState({ interceptUri: interceptUriInputing })\n              const msg = buildMessage(21, '00000000-0000-0000-0000-000000000000', interceptUriInputing)\n              this.ws.send(msg)\n             }}>Set</Button>\n            {\n              interceptUri ? <span>{`Intercept:${interceptUri}`}</span> : null\n            }\n          </div>\n        </div>\n\n        <Table striped bordered size=\"sm\">\n          <thead>\n            <tr>\n              <th>No</th>\n              <th>Host</th>\n              <th>Path</th>\n              <th>Method</th>\n              <th>Status</th>\n              <th>Size</th>\n            </tr>\n          </thead>\n          <tbody>\n            {\n              flows.map(f => {\n                const url = f.request.url\n                const u = new URL(url)\n                let host = u.host\n                if (host.length > 35) host = host.slice(0, 35) + '...'\n                let path = u.pathname + u.search\n                if (path.length > 65) path = path.slice(0, 65) + '...'\n\n                const request = f.request\n                const response = f.response || {}\n\n                const classNames = []\n                if (this.state.flow && this.state.flow.id === f.id) classNames.push('tr-selected')\n                if (f.waitIntercept) classNames.push('tr-wait-intercept')\n\n                return (\n                  <tr className={classNames.length ? classNames.join(' ') : null} key={f.id}\n                    onClick={() => {\n                      this.setState({ flow: f })\n                    }}\n                  >\n                    <td>{f.no}</td>\n                    <td>{host}</td>\n                    <td>{path}</td>\n                    <td>{request.method}</td>\n                    <td>{response.statusCode || '(pending)'}</td>\n                    <td>{getSize(response)}</td>\n                  </tr>\n                )\n              })\n            }\n          </tbody>\n        </Table>\n\n        {this.renderFlow()}\n      </div>\n    )\n  }\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry)\n      getFID(onPerfEntry)\n      getFCP(onPerfEntry)\n      getLCP(onPerfEntry)\n      getTTFB(onPerfEntry)\n    })\n  }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""}