web: display flow connection info

libmproxy/console/help.py

@@ -24,7 +24,7 @@ class HelpView(urwid.ListBox):
 
         text.append(urwid.Text([("head", "\n\nMovement:\n")]))
         keys = [
-            ("j, k", "up, down"),
+            ("j, k", "down, up"),
             ("h, l", "left, right (in some contexts)"),
             ("space", "page down"),
             ("pg up/down", "page up/down"),

libmproxy/web/static/css/app.css

@@ -204,18 +204,22 @@ header .menu {
   word-break: break-all;
   padding-left: 0;
 }
-.header-table {
+.flow-detail table {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   width: 100%;
   table-layout: fixed;
   word-break: break-all;
 }
-.header-table tr {
+.flow-detail table tr {
   border-top: 1px solid #f7f7f7;
 }
-.header-table td {
+.flow-detail table td {
   vertical-align: top;
 }
+.connection-table td:first-child {
+  width: 33%;
+  padding-right: 1em;
+}
 .header-table .header-name {
   width: 33%;
   padding-right: 1em;

libmproxy/web/static/js/app.js

@@ -29,16 +29,34 @@ 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();
 };
 const PayloadSources = {
     VIEW: "view",
@@ -441,9 +459,9 @@ var Connection = new _Connection(location.origin + "/updates");
 
 var Splitter = React.createClass({displayName: 'Splitter',
     getDefaultProps: function () {
-    return {
+        return {
-        axis: "x"
+            axis: "x"
-        }
+        };
     },
     getInitialState: function(){
         return {
@@ -661,25 +679,32 @@ var IconColumn = React.createClass({displayName: 'IconColumn',
     },
     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) {
+        if(flow.response){
-            icon = "resource-icon-not-modified"
+            var contentType = ResponseUtils.getContentType(flow.response);
-        } else if(300 <= flow.response.code && flow.response.code < 400) {
+
-            icon = "resource-icon-redirect";
+            //TODO: We should assign a type to the flow somewhere else.
-        } else if(contentType.indexOf("image") >= 0) {
+            var icon;
-            icon = "resource-icon-image";
+            if(flow.response.code == 304) {
-        } else if (contentType.indexOf("javascript") >= 0) {
+                icon = "resource-icon-not-modified";
-            icon = "resource-icon-js";
+            } else if(300 <= flow.response.code && flow.response.code < 400) {
-        } else if (contentType.indexOf("css") >= 0) {
+                icon = "resource-icon-redirect";
-            icon = "resource-icon-css";
+            } else if(contentType.indexOf("image") >= 0) {
-        } else if (contentType.indexOf("html") >= 0) {
+                icon = "resource-icon-image";
-            icon = "resource-icon-document";
+            } else if (contentType.indexOf("javascript") >= 0) {
-        } else {
+                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 React.DOM.td({className: "col-icon"}, React.DOM.div({className: icon}));
     }
@@ -756,7 +781,7 @@ var TimeColumn = React.createClass({displayName: 'TimeColumn',
         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 = "...";
         }
@@ -815,7 +840,7 @@ var FlowTableBody = React.createClass({displayName: 'FlowTableBody',
                             selectFlow: this.props.selectFlow}
                             );
         }.bind(this));
-        return React.DOM.tbody({onKeyDown: this.props.onKeyDown, tabIndex: "0"}, rows);
+        return React.DOM.tbody(null, rows);
     }
 });
 
@@ -846,45 +871,6 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
             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 (
             React.DOM.div({className: "flow-table", onScroll: this.adjustHead}, 
@@ -895,8 +881,7 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
                                    flows: this.props.flows, 
                                    selected: this.props.selected, 
                                    selectFlow: this.props.selectFlow, 
-                                   columns: this.state.columns, 
+                                   columns: this.state.columns})
-                                   onKeyDown: this.onKeyDown})
                 )
             )
             );
@@ -908,7 +893,7 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
 var FlowDetailNav = React.createClass({displayName: 'FlowDetailNav',
     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(){
@@ -933,11 +918,11 @@ var Headers = React.createClass({displayName: 'Headers',
         var rows = this.props.message.headers.map(function(header){
             return (
                 React.DOM.tr(null, 
-                    React.DOM.td({className: "header-name"}, header[0]), 
+                    React.DOM.td({className: "header-name"}, header[0]+":"), 
                     React.DOM.td({className: "header-value"}, header[1])
                 )
             );
-        })
+        });
         return (
             React.DOM.table({className: "header-table"}, 
                 React.DOM.tbody(null, 
@@ -946,7 +931,7 @@ var Headers = React.createClass({displayName: 'Headers',
             )
         );
     }
-})
+});
 
 var FlowDetailRequest = React.createClass({displayName: 'FlowDetailRequest',
     render: function(){
@@ -1004,9 +989,106 @@ var FlowDetailResponse = React.createClass({displayName: 'FlowDetailResponse',
     }
 });
 
+var TimeStamp = React.createClass({displayName: 'TimeStamp',
+    render: function() {
+        var ts, delta;
+
+        if(!this.props.t && this.props.optional){
+            //should be return null, but that triggers a React bug.
+            return React.DOM.tr(null);
+        } 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 = React.DOM.span({className: "text-muted"}, "(" + delta + ")");
+            } else {
+                delta = null;
+            }
+        }
+
+        return React.DOM.tr(null, React.DOM.td(null, this.props.title + ":"), React.DOM.td(null, ts, " ", delta));
+    }
+});
+
+var ConnectionInfo = React.createClass({displayName: 'ConnectionInfo',
+
+    render: function() {
+        var conn = this.props.conn;
+        var address = conn.address.address.join(":");
+
+        var sni = React.DOM.tr({key: "sni"}); //should be null, but that triggers a React bug.
+        if(conn.sni){
+            sni = React.DOM.tr({key: "sni"}, React.DOM.td(null, React.DOM.abbr({title: "TLS Server Name Indication"}, "TLS SNI:")), React.DOM.td(null, conn.sni));
+        }
+        return (
+            React.DOM.table({className: "connection-table"}, 
+                React.DOM.tbody(null, 
+                    React.DOM.tr({key: "address"}, React.DOM.td(null, "Address:"), React.DOM.td(null, address)), 
+                    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})
+                )
+            )
+        );
+    }
+});
+
+var CertificateInfo = React.createClass({displayName: 'CertificateInfo',
+    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 (
+            React.DOM.div(null, 
+            client_conn.cert ? React.DOM.h4(null, "Client Certificate") : null, 
+            client_conn.cert ? React.DOM.pre(null, client_conn.cert) : null, 
+
+            server_conn.cert ? React.DOM.h4(null, "Server Certificate") : null, 
+            server_conn.cert ? React.DOM.pre(null, server_conn.cert) : null
+            )
+        );
+    }
+});
+
 var FlowDetailConnectionInfo = React.createClass({displayName: 'FlowDetailConnectionInfo',
     render: function(){
-        return React.DOM.section(null, "details");
+        var flow = this.props.flow;
+        var client_conn = flow.client_conn;
+        var server_conn = flow.server_conn;
+        return (
+            React.DOM.section(null, 
+
+            React.DOM.h4(null, "Client Connection"), 
+            ConnectionInfo({conn: client_conn}), 
+
+            React.DOM.h4(null, "Server Connection"), 
+            ConnectionInfo({conn: server_conn}), 
+
+            CertificateInfo({flow: flow})
+
+            )
+        );
     }
 });
 
@@ -1017,13 +1099,27 @@ var tabs = {
 };
 
 var FlowDetail = React.createClass({displayName: 'FlowDetail',
+    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 (
             React.DOM.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})
             )
             );
@@ -1051,6 +1147,15 @@ var MainView = React.createClass({displayName: 'MainView',
             flows: this.flowStore.getAll()
         });
     },
+    selectDetailTab: function(panel) {
+        ReactRouter.replaceWith(
+            "flow",
+            {
+                flowId: this.props.params.flowId,
+                detailTab: panel
+            }
+        );
+    },
     selectFlow: function(flow) {
         if(flow){
             ReactRouter.replaceWith(
@@ -1065,19 +1170,65 @@ var MainView = React.createClass({displayName: 'MainView',
             ReactRouter.replaceWith("flows");
         }
     },
-    selectDetailTab: function(panel) {
+    selectFlowRelative: function(i){
-        ReactRouter.replaceWith(
+        var index;
-            "flow", 
+        if(!this.props.params.flowId){
-            {
+            if(i > 0){
-                flowId: this.props.params.flowId,
+                index = this.state.flows.length-1;
-                detailTab: panel
+            } 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", 
@@ -1085,15 +1236,17 @@ var MainView = React.createClass({displayName: 'MainView',
                             selectTab: this.selectDetailTab, 
                             active: this.props.params.detailTab})
             );
+        } else {
+            details = null;
         }
 
         return (
-            React.DOM.div({className: "main-view"}, 
+            React.DOM.div({className: "main-view", onKeyDown: this.onKeyDown, tabIndex: "0"}, 
                 FlowTable({ref: "flowTable", 
                            flows: this.state.flows, 
                            selectFlow: this.selectFlow, 
                            selected: selected}), 
-                Splitter(null), 
+                 details ? Splitter(null) : null, 
                 details
             )
         );

web/src/css/flowdetail.less

@@ -22,7 +22,7 @@
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-.header-table {
+.flow-detail table {
     .monospace();
     width: 100%;
     table-layout: fixed;
@@ -41,7 +41,16 @@
         //overflow: hidden;
         //text-overflow: ellipsis;
     }
+}
 
+.connection-table {
+    td:first-child {
+        width: 33%;
+        padding-right: 1em;
+    }
+}
+
+.header-table {
     .header-name {
         width: 33%;
         padding-right: 1em;

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>
             );

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) {
+        if(flow.response){
-            icon = "resource-icon-not-modified"
+            var contentType = ResponseUtils.getContentType(flow.response);
-        } else if(300 <= flow.response.code && flow.response.code < 400) {
+
-            icon = "resource-icon-redirect";
+            //TODO: We should assign a type to the flow somewhere else.
-        } else if(contentType.indexOf("image") >= 0) {
+            var icon;
-            icon = "resource-icon-image";
+            if(flow.response.code == 304) {
-        } else if (contentType.indexOf("javascript") >= 0) {
+                icon = "resource-icon-not-modified";
-            icon = "resource-icon-js";
+            } else if(300 <= flow.response.code && flow.response.code < 400) {
-        } else if (contentType.indexOf("css") >= 0) {
+                icon = "resource-icon-redirect";
-            icon = "resource-icon-css";
+            } else if(contentType.indexOf("image") >= 0) {
-        } else if (contentType.indexOf("html") >= 0) {
+                icon = "resource-icon-image";
-            icon = "resource-icon-document";
+            } else if (contentType.indexOf("javascript") >= 0) {
-        } else {
+                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 = "...";
         }

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}
+                                   columns={this.state.columns}/>
-                                   onKeyDown={this.onKeyDown}/>
                 </table>
             </div>
             );

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) {
+    selectFlowRelative: function(i){
-        ReactRouter.replaceWith(
+        var index;
-            "flow", 
+        if(!this.props.params.flowId){
-            {
+            if(i > 0){
-                flowId: this.props.params.flowId,
+                index = this.state.flows.length-1;
-                detailTab: panel
+            } 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>
         );

web/src/js/components/utils.jsx.js

@@ -4,9 +4,9 @@
 
 var Splitter = React.createClass({
     getDefaultProps: function () {
-    return {
+        return {
-        axis: "x"
+            axis: "x"
-        }
+        };
     },
     getInitialState: function(){
         return {

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();
 };