From b0374710e4ef934c2ae9b416e5c981e04ed776ed Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Fri, 19 Sep 2014 01:35:36 +0200
Subject: start to fill detailpane

---
 web/src/js/components/flowdetail.jsx.js        | 48 +++++++++++++++++++++++---
 web/src/js/components/flowtable-columns.jsx.js | 25 +++++++++++++-
 2 files changed, 67 insertions(+), 6 deletions(-)

(limited to 'web/src/js/components')

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];
 
-- 
cgit v1.2.3