blob: e5fe37a03bd587ff03813b90f1b049072da8d8ed (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/** @jsx React.DOM */
var FlowDetailNav = React.createClass({
render: function(){
var items = ["request", "response", "details"].map(function(e){
var str = e.charAt(0).toUpperCase() + e.slice(1);
var className = this.props.active === e ? "active" : "";
var onClick = function(){
this.props.selectTab(e);
return false;
}.bind(this);
return <a key={e}
href="#"
className={className}
onClick={onClick}>{str}</a>;
}.bind(this));
return (
<nav ref="head" className="nav-tabs nav-tabs-sm">
{items}
</nav>
);
}
});
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(){
var flow = this.props.flow;
var first_line = [
flow.request.method,
RequestUtils.pretty_url(flow.request),
"HTTP/"+ flow.response.httpversion.join(".")
].join(" ");
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>
<code>{ first_line }</code>
<Headers message={flow.request}/>
<hr/>
{content}
</section>
);
}
});
var FlowDetailResponse = React.createClass({
render: function(){
var flow = this.props.flow;
var first_line = [
"HTTP/"+ flow.response.httpversion.join("."),
flow.response.code,
flow.response.msg
].join(" ");
var content = null;
if(flow.response.contentLength > 0){
content = "Response Content Size: "+ formatSize(flow.response.contentLength);
} else {
content = <div className="alert alert-info">No Content</div>;
}
//TODO: Styling
return (
<section>
<code>{ first_line }</code>
<Headers message={flow.response}/>
<hr/>
{content}
</section>
);
}
});
var FlowDetailConnectionInfo = React.createClass({
render: function(){
return <section>details</section>;
}
});
var tabs = {
request: FlowDetailRequest,
response: FlowDetailResponse,
details: FlowDetailConnectionInfo
};
var FlowDetail = React.createClass({
mixins: [StickyHeadMixin],
render: function(){
var flow = JSON.stringify(this.props.flow, null, 2);
var Tab = tabs[this.props.active];
return (
<div className="flow-detail" onScroll={this.adjustHead}>
<FlowDetailNav ref="head" active={this.props.active} selectTab={this.props.selectTab}/>
<Tab flow={this.props.flow}/>
</div>
);
}
});
|
