aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components
diff options
context:
space:
mode:
authorMaximilian Hils <git@maximilianhils.com>2014-09-19 01:35:36 +0200
committerMaximilian Hils <git@maximilianhils.com>2014-09-19 01:35:36 +0200
commitb0374710e4ef934c2ae9b416e5c981e04ed776ed (patch)
tree732772d4cbd11562f728c27370185abaad1f026e /web/src/js/components
parent390a435ac4b5ce78b1aa32b4b048318c5ef0ba03 (diff)
downloadmitmproxy-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.js48
-rw-r--r--web/src/js/components/flowtable-columns.jsx.js25
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];