web: display flow connection info

6 files changed, 233 insertions, 80 deletions

diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index e5fe37a0..7c984193 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -3,7 +3,7 @@
 var FlowDetailNav = React.createClass({
     render: function(){
 
-        var items = ["request", "response", "details"].map(function(e){
+        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(){
@@ -28,11 +28,11 @@ var Headers = React.createClass({
         var rows = this.props.message.headers.map(function(header){
             return (
                 <tr>
-                    <td className="header-name">{header[0]}</td>
+                    <td className="header-name">{header[0]+":"}</td>
                     <td className="header-value">{header[1]}</td>
                 </tr>
             );
-        })
+        });
         return (
             <table className="header-table">
                 <tbody>
@@ -41,7 +41,7 @@ var Headers = React.createClass({
             </table>
         );
     }
-})
+});
 
 var FlowDetailRequest = React.createClass({
     render: function(){
@@ -99,9 +99,106 @@ var FlowDetailResponse = React.createClass({
     }
 });
 
+var TimeStamp = React.createClass({
+    render: function() {
+        var ts, delta;
+
+        if(!this.props.t && this.props.optional){
+            //should be return null, but that triggers a React bug.
+            return <tr></tr>;
+        } else if (!this.props.t){
+            ts = "active";
+        } else {
+            ts = (new Date(this.props.t * 1000)).toISOString();
+            ts = ts.replace("T", " ").replace("Z","");
+
+            if(this.props.deltaTo){
+                delta = Math.round((this.props.t-this.props.deltaTo)*1000) + "ms";
+                delta = <span className="text-muted">{"(" + delta + ")"}</span>;
+            } else {
+                delta = null;
+            }
+        }
+
+        return <tr><td>{this.props.title + ":"}</td><td>{ts} {delta}</td></tr>;
+    }
+});
+
+var ConnectionInfo = React.createClass({
+
+    render: function() {
+        var conn = this.props.conn;
+        var address = conn.address.address.join(":");
+
+        var sni = <tr key="sni"></tr>; //should be null, but that triggers a React bug.
+        if(conn.sni){
+            sni = <tr key="sni"><td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td><td>{conn.sni}</td></tr>;
+        }
+        return (
+            <table className="connection-table">
+                <tbody>
+                    <tr key="address"><td>Address:</td><td>{address}</td></tr>
+                    {sni}
+                    <TimeStamp title="Start time"
+                               key="start"
+                               t={conn.timestamp_start} />
+                    <TimeStamp title="TCP Setup"
+                               key="tcpsetup"
+                               t={conn.timestamp_tcp_setup}
+                               deltaTo={conn.timestamp_start}
+                               optional={true} />
+                    <TimeStamp title="SSL handshake"
+                               key="sslsetup"
+                               t={conn.timestamp_ssl_setup}
+                               deltaTo={conn.timestamp_start}
+                               optional={true} />
+                    <TimeStamp title="End time"
+                               key="end"
+                               t={conn.timestamp_end}
+                               deltaTo={conn.timestamp_start} />
+                </tbody>
+            </table>
+        );
+    }
+});
+
+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;
+        return (
+            <div>
+            {client_conn.cert ? <h4>Client Certificate</h4> : null}
+            {client_conn.cert ? <pre>{client_conn.cert}</pre> : null}
+
+            {server_conn.cert ? <h4>Server Certificate</h4> : null}
+            {server_conn.cert ? <pre>{server_conn.cert}</pre> : null}
+            </div>
+        );
+    }
+});
+
 var FlowDetailConnectionInfo = React.createClass({
     render: function(){
-        return <section>details</section>;
+        var flow = this.props.flow;
+        var client_conn = flow.client_conn;
+        var server_conn = flow.server_conn;
+        return (
+            <section>
+
+            <h4>Client Connection</h4>
+            <ConnectionInfo conn={client_conn}/>
+
+            <h4>Server Connection</h4>
+            <ConnectionInfo conn={server_conn}/>
+
+            <CertificateInfo flow={flow}/>
+
+            </section>
+        );
     }
 });
 
@@ -112,13 +209,27 @@ var tabs = {
 };
 
 var FlowDetail = React.createClass({
+    getDefaultProps: function(){
+        return {
+            tabs: ["request","response", "details"]
+        };
+    },
     mixins: [StickyHeadMixin],
+    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.props.selectTab(this.props.tabs[nextIndex]);
+    },
     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}/>
+                <FlowDetailNav ref="head"
+                               tabs={this.props.tabs}
+                               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 676b005b..728bc953 100644
--- a/web/src/js/components/flowtable-columns.jsx.js
+++ b/web/src/js/components/flowtable-columns.jsx.js
@@ -28,25 +28,32 @@ var IconColumn = React.createClass({
     },
     render: function(){
         var flow = this.props.flow;
-        var contentType = ResponseUtils.getContentType(flow.response);
 
-        //TODO: We should assign a type to the flow somewhere else.
         var icon;
-        if(flow.response.code == 304) {
-            icon = "resource-icon-not-modified"
-        } else if(300 <= flow.response.code && flow.response.code < 400) {
-            icon = "resource-icon-redirect";
-        } else if(contentType.indexOf("image") >= 0) {
-            icon = "resource-icon-image";
-        } else if (contentType.indexOf("javascript") >= 0) {
-            icon = "resource-icon-js";
-        } else if (contentType.indexOf("css") >= 0) {
-            icon = "resource-icon-css";
-        } else if (contentType.indexOf("html") >= 0) {
-            icon = "resource-icon-document";
-        } else {
+        if(flow.response){
+            var contentType = ResponseUtils.getContentType(flow.response);
+
+            //TODO: We should assign a type to the flow somewhere else.
+            var icon;
+            if(flow.response.code == 304) {
+                icon = "resource-icon-not-modified";
+            } else if(300 <= flow.response.code && flow.response.code < 400) {
+                icon = "resource-icon-redirect";
+            } else if(contentType.indexOf("image") >= 0) {
+                icon = "resource-icon-image";
+            } else if (contentType.indexOf("javascript") >= 0) {
+                icon = "resource-icon-js";
+            } else if (contentType.indexOf("css") >= 0) {
+                icon = "resource-icon-css";
+            } else if (contentType.indexOf("html") >= 0) {
+                icon = "resource-icon-document";
+            }
+        }
+        if(!icon){
             icon = "resource-icon-plain";
         }
+
+
         icon += " resource-icon";
         return <td className="col-icon"><div className={icon}></div></td>;
     }
@@ -123,7 +130,7 @@ var TimeColumn = React.createClass({
         var flow = this.props.flow;
         var time;
         if(flow.response){
-            time = Math.round(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))+"ms";
+            time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
         } else {
             time = "...";
         }
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 47576d70..146d5264 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -38,7 +38,7 @@ var FlowTableBody = React.createClass({
                             selectFlow={this.props.selectFlow}
                             />;
         }.bind(this));
-        return <tbody onKeyDown={this.props.onKeyDown} tabIndex="0">{rows}</tbody>;
+        return <tbody>{rows}</tbody>;
     }
 });
 
@@ -69,45 +69,6 @@ var FlowTable = React.createClass({
             viewport.scrollTop = flowNode_bottom - viewport.offsetHeight;
         }
     },
-    selectFlowRelative: function(i){
-        var index;
-        if(!this.props.selected){
-            if(i > 0){
-                index = this.props.flows.length-1;
-            } else {
-                index = 0;
-            }
-        } else {
-            index = _.findIndex(this.props.flows, function(f){
-                return f === this.props.selected;
-            }.bind(this));
-            index = Math.min(Math.max(0, index+i), this.props.flows.length-1);
-        }
-        this.props.selectFlow(this.props.flows[index]);
-    },
-    onKeyDown: function(e){
-        switch(e.keyCode){
-            case Key.DOWN:
-                this.selectFlowRelative(+1);
-                break;
-            case Key.UP:
-                this.selectFlowRelative(-1);
-                break;
-            case Key.PAGE_DOWN:
-                this.selectFlowRelative(+10);
-                break;
-            case Key.PAGE_UP:
-                this.selectFlowRelative(-10);
-                break;
-            case Key.ESC:
-                this.props.selectFlow(null);
-                break;
-            default:
-                console.debug("keydown", e.keyCode);
-                return;
-        }
-        return false;
-    },
     render: function () {
         return (
             <div className="flow-table" onScroll={this.adjustHead}>
@@ -118,8 +79,7 @@ var FlowTable = React.createClass({
                                    flows={this.props.flows}
                                    selected={this.props.selected}
                                    selectFlow={this.props.selectFlow}
-                                   columns={this.state.columns}
-                                   onKeyDown={this.onKeyDown}/>
+                                   columns={this.state.columns}/>
                 </table>
             </div>
             );
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 79eb58ea..d521635a 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -20,6 +20,15 @@ var MainView = React.createClass({
             flows: this.flowStore.getAll()
         });
     },
+    selectDetailTab: function(panel) {
+        ReactRouter.replaceWith(
+            "flow",
+            {
+                flowId: this.props.params.flowId,
+                detailTab: panel
+            }
+        );
+    },
     selectFlow: function(flow) {
         if(flow){
             ReactRouter.replaceWith(
@@ -34,19 +43,65 @@ var MainView = React.createClass({
             ReactRouter.replaceWith("flows");
         }
     },
-    selectDetailTab: function(panel) {
-        ReactRouter.replaceWith(
-            "flow", 
-            {
-                flowId: this.props.params.flowId,
-                detailTab: panel
+    selectFlowRelative: function(i){
+        var index;
+        if(!this.props.params.flowId){
+            if(i > 0){
+                index = this.state.flows.length-1;
+            } else {
+                index = 0;
             }
-        );
+        } else {
+            index = _.findIndex(this.state.flows, function(f){
+                return f.id === this.props.params.flowId;
+            }.bind(this));
+            index = Math.min(Math.max(0, index+i), this.state.flows.length-1);
+        }
+        this.selectFlow(this.state.flows[index]);
+    },
+    onKeyDown: function(e){
+        switch(e.keyCode){
+            case Key.K:
+            case Key.UP:
+                this.selectFlowRelative(-1);
+                break;
+            case Key.J:
+            case Key.DOWN:
+                this.selectFlowRelative(+1);
+                break;
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
+                this.selectFlowRelative(+10);
+                break;
+            case Key.PAGE_UP:
+                this.selectFlowRelative(-10);
+                break;
+            case Key.ESC:
+                this.selectFlow(null);
+                break;
+            case Key.H:
+            case Key.LEFT:
+                if(this.refs.flowDetails){
+                    this.refs.flowDetails.nextTab(-1);
+                }
+                break;
+            case Key.L:
+            case Key.TAB:
+            case Key.RIGHT:
+                if(this.refs.flowDetails){
+                    this.refs.flowDetails.nextTab(+1);
+                }
+                break;
+            default:
+                console.debug("keydown", e.keyCode);
+                return;
+        }
+        return false;
     },
     render: function() {
         var selected = _.find(this.state.flows, { id: this.props.params.flowId });
 
-        var details = null;
+        var details;
         if(selected){
             details = (
                 <FlowDetail ref="flowDetails" 
@@ -54,15 +109,17 @@ var MainView = React.createClass({
                             selectTab={this.selectDetailTab}
                             active={this.props.params.detailTab}/>
             );
+        } else {
+            details = null;
         }
 
         return (
-            <div className="main-view">
+            <div className="main-view" onKeyDown={this.onKeyDown} tabIndex="0">
                 <FlowTable ref="flowTable"
                            flows={this.state.flows}
                            selectFlow={this.selectFlow}
                            selected={selected} />
-                <Splitter/>
+                { details ? <Splitter/> : null }
                 {details}
             </div>
         );
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 442bef23..91cb8458 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -4,9 +4,9 @@
 
 var Splitter = React.createClass({
     getDefaultProps: function () {
-    return {
-        axis: "x"
-        }
+        return {
+            axis: "x"
+        };
     },
     getInitialState: function(){
         return {
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index e53097f8..782618c2 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -29,14 +29,32 @@ var Key = {
     LEFT: 37,
     RIGHT: 39,
     ENTER: 13,
-    ESC: 27
+    ESC: 27,
+    TAB: 9,
+    SPACE: 32,
+    J: 74,
+    K: 75,
+    H: 72,
+    L: 76
 };
 
-var formatSize = function (size) {
+var formatSize = function (bytes) {
+    var size = bytes;
     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();
+    return (Math.floor(size * 100) / 100.0).toFixed(2) + prefix.shift();
+};
+
+var formatTimeDelta = function (milliseconds) {
+    var time = milliseconds;
+    var prefix = ["ms", "s", "m", "h"];
+    var div = [1000, 60, 60];
+    while (time >= div[0] && prefix.length > 1) {
+        prefix.shift();
+        time = time / div.shift();
+    }
+    return Math.round(time) + prefix.shift();
 };
\ No newline at end of file