import React from "react";
import _ from "lodash";
import {formatTimeStamp, formatTimeDelta} from "../../utils.js";
var TimeStamp = React.createClass({
render: function () {
if (!this.props.t) {
//should be return null, but that triggers a React bug.
return
;
}
var ts = formatTimeStamp(this.props.t);
var delta;
if (this.props.deltaTo) {
delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
delta = {"(" + delta + ")"};
} else {
delta = null;
}
return
{this.props.title + ":"} |
{ts} {delta} |
;
}
});
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 (
);
}
});
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 (
{client_conn.cert ?
Client Certificate
: null}
{client_conn.cert ?
{client_conn.cert}
: null}
{server_conn.cert ?
Server Certificate
: null}
{server_conn.cert ?
{server_conn.cert}
: null}
);
}
});
var Timing = React.createClass({
render: function () {
var flow = this.props.flow;
var sc = flow.server_conn;
var cc = flow.client_conn;
var req = flow.request;
var resp = flow.response;
var timestamps = [
{
title: "Server conn. initiated",
t: sc.timestamp_start,
deltaTo: req.timestamp_start
}, {
title: "Server conn. TCP handshake",
t: sc.timestamp_tcp_setup,
deltaTo: req.timestamp_start
}, {
title: "Server conn. SSL handshake",
t: sc.timestamp_ssl_setup,
deltaTo: req.timestamp_start
}, {
title: "Client conn. established",
t: cc.timestamp_start,
deltaTo: req.timestamp_start
}, {
title: "Client conn. SSL handshake",
t: cc.timestamp_ssl_setup,
deltaTo: req.timestamp_start
}, {
title: "First request byte",
t: req.timestamp_start,
}, {
title: "Request complete",
t: req.timestamp_end,
deltaTo: req.timestamp_start
}
];
if (flow.response) {
timestamps.push(
{
title: "First response byte",
t: resp.timestamp_start,
deltaTo: req.timestamp_start
}, {
title: "Response complete",
t: resp.timestamp_end,
deltaTo: req.timestamp_start
}
);
}
//Add unique key for each row.
timestamps.forEach(function (e) {
e.key = e.title;
});
timestamps = _.sortBy(timestamps, 't');
var rows = timestamps.map(function (e) {
return ;
});
return (
);
}
});
var Details = 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
);
}
});
export default Details;