start to fill detailpane

4 files changed, 125 insertions, 8 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];
 
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
new file mode 100644
index 00000000..b621f06d
--- /dev/null
+++ b/web/src/js/flow/utils.js
@@ -0,0 +1,47 @@
+var _MessageUtils = {
+    getContentType: function (message) {
+        return MessageUtils.getHeader(message, /Content-Type/i);
+    },
+    get_first_header: function (message, regex) {
+        //FIXME: Cache Invalidation.
+        if (!message._headerLookups)
+            Object.defineProperty(message, "_headerLookups", {
+                value: {},
+                configurable: false,
+                enumerable: false,
+                writable: false
+            });
+        if (!(regex in message._headerLookups)) {
+            var header;
+            for (var i = 0; i < message.headers.length; i++) {
+                if (!!message.headers[i][0].match(regex)) {
+                    header = message.headers[i];
+                    break;
+                }
+            }
+            message._headerLookups[regex] = header ? header[1] : undefined;
+        }
+        return message._headerLookups[regex];
+    }
+};
+
+var defaultPorts = {
+    "http": 80,
+    "https": 443
+};
+
+var RequestUtils = _.extend(_MessageUtils, {
+    pretty_host: function (request) {
+        //FIXME: Add hostheader
+        return request.host;
+    },
+    pretty_url: function (request) {
+        var port = "";
+        if (defaultPorts[request.scheme] !== request.port) {
+            port = ":" + request.port;
+        }
+        return request.scheme + "://" + this.pretty_host(request) + port + request.path;
+    }
+});
+
+var ResponseUtils = _.extend(_MessageUtils, {});
\ No newline at end of file
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 947ad5c1..e53097f8 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -13,11 +13,11 @@ var AutoScrollMixin = {
 };
 
 var StickyHeadMixin = {
-    adjustHead: function(){
+    adjustHead: function () {
         // Abusing CSS transforms to set the element
         // referenced as head into some kind of position:sticky.
         var head = this.refs.head.getDOMNode();
-        head.style.transform = "translate(0,"+this.getDOMNode().scrollTop+"px)";
+        head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)";
     }
 };
 
@@ -30,4 +30,13 @@ var Key = {
     RIGHT: 39,
     ENTER: 13,
     ESC: 27
+};
+
+var formatSize = function (size) {
+    var prefix = ["B", "KB", "MB", "GB", "TB"];
+    while (size >= 1024 && prefix.length > 1) {
+        prefix.shift();
+        size = size / 1024;
+    }
+    return (Math.floor(size * 100) / 100.0) + prefix.shift();
 };
\ No newline at end of file