var FlowDetailNav = React.createClass({
render: function () {
var items = this.props.tabs.map(function (e) {
var str = e.charAt(0).toUpperCase() + e.slice(1);
var className = this.props.active === e ? "active" : "";
var onClick = function (e) {
this.props.selectTab(e);
e.preventDefault();
}.bind(this);
return {str};
}.bind(this));
return (
);
}
});
var Headers = React.createClass({
render: function () {
var rows = this.props.message.headers.map(function (header, i) {
return (
{header[0] + ":"}
{header[1]}
);
});
return (
{rows}
);
}
});
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 =
No Content
;
}
//TODO: Styling
return (
{ first_line }
{content}
);
}
});
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 =
No Content
;
}
//TODO: Styling
return (
{ first_line }
{content}
);
}
});
var TimeStamp = React.createClass({
render: function () {
if (!this.props.t) {
//should be return null, but that triggers a React bug.
return
;
}
});
var ConnectionInfo = React.createClass({
render: function () {
var conn = this.props.conn;
var address = conn.address.address.join(":");
var sni =
; //should be null, but that triggers a React bug.
if (conn.sni) {
sni =
TLS SNI:
{conn.sni}
;
}
return (
Address:
{address}
{sni}
);
}
});
var CertificateInfo = React.createClass({
render: function () {
//TODO: We should fetch human-readable certificate representation
// from the server
var flow = this.props.flow;
var client_conn = flow.client_conn;
var server_conn = flow.server_conn;
var preStyle = {maxHeight: 100};
return (
);
}
});
var FlowDetailConnectionInfo = React.createClass({
render: function () {
var flow = this.props.flow;
var client_conn = flow.client_conn;
var server_conn = flow.server_conn;
return (
Client Connection
Server Connection
);
}
});
var tabs = {
request: FlowDetailRequest,
response: FlowDetailResponse,
details: FlowDetailConnectionInfo
};
var FlowDetail = React.createClass({
getDefaultProps: function () {
return {
tabs: ["request", "response", "details"]
};
},
mixins: [StickyHeadMixin, ReactRouter.Navigation, ReactRouter.State],
nextTab: function (i) {
var currentIndex = this.props.tabs.indexOf(this.props.active);
// JS modulo operator doesn't correct negative numbers, make sure that we are positive.
var nextIndex = (currentIndex + i + this.props.tabs.length) % this.props.tabs.length;
this.selectTab(this.props.tabs[nextIndex]);
},
selectTab: function (panel) {
this.replaceWith(
"flow",
{
flowId: this.getParams().flowId,
detailTab: panel
}
);
},
render: function () {
var flow = JSON.stringify(this.props.flow, null, 2);
var Tab = tabs[this.props.active];
return (