diff options
author | Maximilian Hils <git@maximilianhils.com> | 2014-09-19 01:35:36 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2014-09-19 01:35:36 +0200 |
commit | b0374710e4ef934c2ae9b416e5c981e04ed776ed (patch) | |
tree | 732772d4cbd11562f728c27370185abaad1f026e /web/src/js/components | |
parent | 390a435ac4b5ce78b1aa32b4b048318c5ef0ba03 (diff) | |
download | mitmproxy-b0374710e4ef934c2ae9b416e5c981e04ed776ed.tar.gz mitmproxy-b0374710e4ef934c2ae9b416e5c981e04ed776ed.tar.bz2 mitmproxy-b0374710e4ef934c2ae9b416e5c981e04ed776ed.zip |
start to fill detailpane
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/flowdetail.jsx.js | 48 | ||||
-rw-r--r-- | web/src/js/components/flowtable-columns.jsx.js | 25 |
2 files changed, 67 insertions, 6 deletions
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js index acf5e6f4..744901be 100644 --- a/web/src/js/components/flowdetail.jsx.js +++ b/web/src/js/components/flowdetail.jsx.js @@ -23,21 +23,59 @@ var FlowDetailNav = React.createClass({ } }); +var Headers = React.createClass({ + render: function(){ + var rows = this.props.message.headers.map(function(header){ + return ( + <tr> + <td className="header-name">{header[0]}</td> + <td className="header-value">{header[1]}</td> + </tr> + ); + }) + return ( + <table className="header-table"> + <tbody> + {rows} + </tbody> + </table> + ); + } +}) + var FlowDetailRequest = React.createClass({ render: function(){ - return <div>request</div>; + var flow = this.props.flow; + var url = <code>{ RequestUtils.pretty_url(flow.request) }</code>; + var content = null; + if(flow.request.contentLength > 0){ + content = "Request Content Size: "+ formatSize(flow.request.contentLength); + } else { + content = <div className="alert alert-info">No Content</div>; + } + + //TODO: Styling + + return ( + <section> + {url} + <Headers message={flow.request}/> + <hr/> + {content} + </section> + ); } }); var FlowDetailResponse = React.createClass({ render: function(){ - return <div>response</div>; + return <section>response</section>; } }); var FlowDetailConnectionInfo = React.createClass({ render: function(){ - return <div>details</div>; + return <section>details</section>; } }); @@ -54,8 +92,8 @@ var FlowDetail = React.createClass({ var Tab = tabs[this.props.active]; return ( <div className="flow-detail" onScroll={this.adjustHead}> - <FlowDetailNav active={this.props.active} selectTab={this.props.selectTab}/> - <Tab/> + <FlowDetailNav ref="head" active={this.props.active} selectTab={this.props.selectTab}/> + <Tab flow={this.props.flow}/> </div> ); } diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js index 0eb9966c..01130bc1 100644 --- a/web/src/js/components/flowtable-columns.jsx.js +++ b/web/src/js/components/flowtable-columns.jsx.js @@ -77,6 +77,22 @@ var StatusColumn = React.createClass({ }); +var SizeColumn = React.createClass({ + statics: { + renderTitle: function(){ + return <th key="size" className="col-size">Size</th>; + } + }, + render: function(){ + var flow = this.props.flow; + var size = formatSize( + flow.request.contentLength + + (flow.response.contentLength || 0)); + return <td className="col-size">{size}</td>; + } +}); + + var TimeColumn = React.createClass({ statics: { renderTitle: function(){ @@ -96,5 +112,12 @@ var TimeColumn = React.createClass({ }); -var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn, TimeColumn]; +var all_columns = [ + TLSColumn, + IconColumn, + PathColumn, + MethodColumn, + StatusColumn, + SizeColumn, + TimeColumn]; |