Merge pull request #414 from mitmproxy/flowviews2

Flowviews2

10 files changed, 630 insertions, 313 deletions

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 08a6dfb4..7ef369f8 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -1,10 +1,8 @@
-/** @jsx React.DOM */
-
 var LogMessage = React.createClass({
-    render: function(){
+    render: function () {
         var entry = this.props.entry;
         var indicator;
-        switch(entry.level){
+        switch (entry.level) {
             case "web":
                 indicator = <i className="fa fa-fw fa-html5"></i>;
                 break;
@@ -20,47 +18,79 @@ var LogMessage = React.createClass({
             </div>
         );
     },
-    shouldComponentUpdate: function(){
+    shouldComponentUpdate: function () {
         return false; // log entries are immutable.
     }
 });
 
 var EventLogContents = React.createClass({
-    mixins:[AutoScrollMixin],
+    mixins: [AutoScrollMixin, VirtualScrollMixin],
     getInitialState: function () {
         return {
             log: []
         };
     },
-    componentDidMount: function () {
-        this.log = EventLogStore.getView();
-        this.log.addListener("change", this.onEventLogChange);
+    componentWillMount: function () {
+        this.openView(this.props.eventStore);
     },
     componentWillUnmount: function () {
-        this.log.removeListener("change", this.onEventLogChange);
-        this.log.close();
+        this.closeView();
+    },
+    openView: function (store) {
+        var view = new StoreView(store, function (entry) {
+            return this.props.filter[entry.level];
+        }.bind(this));
+        this.setState({
+            view: view
+        });
+
+        view.addListener("add recalculate", this.onEventLogChange);
+    },
+    closeView: function () {
+        this.state.view.close();
     },
     onEventLogChange: function () {
         this.setState({
-            log: this.log.getAll()
+            log: this.state.view.list
         });
     },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.filter !== this.props.filter) {
+            this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.
+            this.state.view.recalculate(this.props.eventStore.list);
+        }
+        if (nextProps.eventStore !== this.props.eventStore) {
+            this.closeView();
+            this.openView(nextProps.eventStore);
+        }
+    },
+    getDefaultProps: function () {
+        return {
+            rowHeight: 45,
+            rowHeightMin: 15,
+            placeholderTagName: "div"
+        };
+    },
+    renderRow: function (elem) {
+        return <LogMessage key={elem.id} entry={elem}/>;
+    },
     render: function () {
-        var messages = this.state.log.map(function(row) {
-            if(!this.props.filter[row.level]){
-                return null;
-            }
-            return <LogMessage key={row.id} entry={row}/>;
-        }.bind(this));
-        return <pre>{messages}</pre>;
+        var rows = this.renderRows(this.state.log);
+
+        return <pre onScroll={this.onScroll}>
+            { this.getPlaceholderTop(this.state.log.length) }
+            {rows}
+            { this.getPlaceholderBottom(this.state.log.length) }
+        </pre>;
     }
 });
 
 var ToggleFilter = React.createClass({
-    toggle: function(){
+    toggle: function (e) {
+        e.preventDefault();
         return this.props.toggleLevel(this.props.name);
     },
-    render: function(){
+    render: function () {
         var className = "label ";
         if (this.props.active) {
             className += "label-primary";
@@ -75,11 +105,11 @@ var ToggleFilter = React.createClass({
                 {this.props.name}
             </a>
         );
-   } 
+    }
 });
 
 var EventLog = React.createClass({
-    getInitialState: function(){
+    getInitialState: function () {
         return {
             filter: {
                 "debug": false,
@@ -93,11 +123,10 @@ var EventLog = React.createClass({
             showEventLog: false
         });
     },
-    toggleLevel: function(level){
-        var filter = this.state.filter;
+    toggleLevel: function (level) {
+        var filter = _.extend({}, this.state.filter);
         filter[level] = !filter[level];
         this.setState({filter: filter});
-        return false;
     },
     render: function () {
         return (
@@ -112,7 +141,7 @@ var EventLog = React.createClass({
                     </div>
 
                 </div>
-                <EventLogContents filter={this.state.filter}/>
+                <EventLogContents filter={this.state.filter} eventStore={this.props.eventStore}/>
             </div>
         );
     }
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 3ba025a9..6d46cd2e 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -1,34 +1,32 @@
-/** @jsx React.DOM */
-
 var FlowDetailNav = React.createClass({
-    render: function(){
+    render: function () {
 
-        var items = this.props.tabs.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(){
+            var onClick = function (event) {
                 this.props.selectTab(e);
-                return false;
+                event.preventDefault();
             }.bind(this);
             return <a key={e}
-                      href="#" 
-                      className={className}
-                      onClick={onClick}>{str}</a>;
+                href="#"
+                className={className}
+                onClick={onClick}>{str}</a>;
         }.bind(this));
         return (
             <nav ref="head" className="nav-tabs nav-tabs-sm">
                 {items}
             </nav>
         );
-    } 
+    }
 });
 
 var Headers = React.createClass({
-    render: function(){
-        var rows = this.props.message.headers.map(function(header, i){
+    render: function () {
+        var rows = this.props.message.headers.map(function (header, i) {
             return (
                 <tr key={i}>
-                    <td className="header-name">{header[0]+":"}</td>
+                    <td className="header-name">{header[0] + ":"}</td>
                     <td className="header-value">{header[1]}</td>
                 </tr>
             );
@@ -44,16 +42,16 @@ var Headers = React.createClass({
 });
 
 var FlowDetailRequest = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var first_line = [
-                flow.request.method,
-                RequestUtils.pretty_url(flow.request),
-                "HTTP/"+ flow.response.httpversion.join(".")
-            ].join(" ");
+            flow.request.method,
+            RequestUtils.pretty_url(flow.request),
+            "HTTP/" + flow.request.httpversion.join(".")
+        ].join(" ");
         var content = null;
-        if(flow.request.contentLength > 0){
-            content = "Request Content Size: "+ formatSize(flow.request.contentLength);
+        if (flow.request.contentLength > 0) {
+            content = "Request Content Size: " + formatSize(flow.request.contentLength);
         } else {
             content = <div className="alert alert-info">No Content</div>;
         }
@@ -72,16 +70,16 @@ var FlowDetailRequest = React.createClass({
 });
 
 var FlowDetailResponse = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var first_line = [
-                "HTTP/"+ flow.response.httpversion.join("."),
-                flow.response.code,
-                flow.response.msg
-            ].join(" ");
+            "HTTP/" + flow.response.httpversion.join("."),
+            flow.response.code,
+            flow.response.msg
+        ].join(" ");
         var content = null;
-        if(flow.response.contentLength > 0){
-            content = "Response Content Size: "+ formatSize(flow.response.contentLength);
+        if (flow.response.contentLength > 0) {
+            content = "Response Content Size: " + formatSize(flow.response.contentLength);
         } else {
             content = <div className="alert alert-info">No Content</div>;
         }
@@ -99,43 +97,67 @@ var FlowDetailResponse = React.createClass({
     }
 });
 
+var FlowDetailError = React.createClass({
+    render: function () {
+        var flow = this.props.flow;
+        return (
+            <section>
+                <div className="alert alert-warning">
+                {flow.error.msg}
+                    <div><small>{ formatTimeStamp(flow.error.timestamp) }</small></div>
+                </div>
+            </section>
+        );
+    }
+});
+
 var TimeStamp = React.createClass({
-    render: function() {
+    render: function () {
 
-        if(!this.props.t){
+        if (!this.props.t) {
             //should be return null, but that triggers a React bug.
             return <tr></tr>;
         }
 
-        var ts = (new Date(this.props.t * 1000)).toISOString();
-        ts = ts.replace("T", " ").replace("Z","");
+        var ts = formatTimeStamp(this.props.t);
 
         var delta;
-        if(this.props.deltaTo){
-            delta = formatTimeDelta(1000 * (this.props.t-this.props.deltaTo));
+        if (this.props.deltaTo) {
+            delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = <span className="text-muted">{"(" + delta + ")"}</span>;
         } else {
             delta = null;
         }
 
-        return <tr><td>{this.props.title + ":"}</td><td>{ts} {delta}</td></tr>;
+        return <tr>
+            <td>{this.props.title + ":"}</td>
+            <td>{ts} {delta}</td>
+        </tr>;
     }
 });
 
 var ConnectionInfo = React.createClass({
 
-    render: function() {
+    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>;
+        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>
+                    <tr key="address">
+                        <td>Address:</td>
+                        <td>{address}</td>
+                    </tr>
                     {sni}
                 </tbody>
             </table>
@@ -144,7 +166,7 @@ var ConnectionInfo = React.createClass({
 });
 
 var CertificateInfo = React.createClass({
-    render: function(){
+    render: function () {
         //TODO: We should fetch human-readable certificate representation
         // from the server
         var flow = this.props.flow;
@@ -165,7 +187,7 @@ var CertificateInfo = React.createClass({
 });
 
 var Timing = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var sc = flow.server_conn;
         var cc = flow.client_conn;
@@ -218,82 +240,112 @@ var Timing = React.createClass({
         }
 
         //Add unique key for each row.
-        timestamps.forEach(function(e){
+        timestamps.forEach(function (e) {
             e.key = e.title;
         });
 
         timestamps = _.sortBy(timestamps, 't');
 
-        var rows = timestamps.map(function(e){
-            return TimeStamp(e);
+        var rows = timestamps.map(function (e) {
+            return <TimeStamp {...e}/>;
         });
 
         return (
             <div>
-            <h4>Timing</h4>
-            <table className="timing-table">
-                <tbody>
+                <h4>Timing</h4>
+                <table className="timing-table">
+                    <tbody>
                     {rows}
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
             </div>
         );
     }
 });
 
 var FlowDetailConnectionInfo = React.createClass({
-    render: function(){
+    render: function () {
         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>Client Connection</h4>
+                <ConnectionInfo conn={client_conn}/>
 
-            <h4>Server Connection</h4>
-            <ConnectionInfo conn={server_conn}/>
+                <h4>Server Connection</h4>
+                <ConnectionInfo conn={server_conn}/>
 
-            <CertificateInfo flow={flow}/>
+                <CertificateInfo flow={flow}/>
 
-            <Timing flow={flow}/>
+                <Timing flow={flow}/>
 
             </section>
         );
     }
 });
 
-var tabs = {
+var allTabs = {
     request: FlowDetailRequest,
     response: FlowDetailResponse,
+    error: FlowDetailError,
     details: FlowDetailConnectionInfo
 };
 
 var FlowDetail = React.createClass({
-    getDefaultProps: function(){
-        return {
-            tabs: ["request","response", "details"]
-        };
+    mixins: [StickyHeadMixin, ReactRouter.Navigation, ReactRouter.State],
+    getTabs: function (flow) {
+        var tabs = [];
+        ["request", "response", "error"].forEach(function (e) {
+            if (flow[e]) {
+                tabs.push(e);
+            }
+        });
+        tabs.push("details");
+        return tabs;
     },
-    mixins: [StickyHeadMixin],
-    nextTab: function(i) {
-        var currentIndex = this.props.tabs.indexOf(this.props.active);
+    nextTab: function (i) {
+        var tabs = this.getTabs(this.props.flow);
+        var currentIndex = tabs.indexOf(this.getParams().detailTab);
         // 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]);
+        var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
+        this.selectTab(tabs[nextIndex]);
     },
-    render: function(){
-        var flow = JSON.stringify(this.props.flow, null, 2);
-        var Tab = tabs[this.props.active];
+    selectTab: function (panel) {
+        this.replaceWith(
+            "flow",
+            {
+                flowId: this.getParams().flowId,
+                detailTab: panel
+            }
+        );
+    },
+    render: function () {
+        var flow = this.props.flow;
+        var tabs = this.getTabs(flow);
+        var active = this.getParams().detailTab;
+
+        if (!_.contains(tabs, active)) {
+            if (active === "response" && flow.error) {
+                active = "error";
+            } else if (active === "error" && flow.response) {
+                active = "response";
+            } else {
+                active = tabs[0];
+            }
+            this.selectTab(active);
+        }
+
+        var Tab = allTabs[active];
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <FlowDetailNav ref="head"
-                               tabs={this.props.tabs}
-                               active={this.props.active}
-                               selectTab={this.props.selectTab}/>
-                <Tab flow={this.props.flow}/>
+                    tabs={tabs}
+                    active={active}
+                    selectTab={this.selectTab}/>
+                <Tab flow={flow}/>
             </div>
-            );
-    } 
+        );
+    }
 });
\ No newline at end of file
diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js
index b7db71b7..1aa256c4 100644
--- a/web/src/js/components/flowtable-columns.jsx.js
+++ b/web/src/js/components/flowtable-columns.jsx.js
@@ -1,17 +1,14 @@
-/** @jsx React.DOM */
-
-
 var TLSColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="tls" className="col-tls"></th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var ssl = (flow.request.scheme == "https");
         var classes;
-        if(ssl){
+        if (ssl) {
             classes = "col-tls col-tls-https";
         } else {
             classes = "col-tls col-tls-http";
@@ -23,23 +20,23 @@ var TLSColumn = React.createClass({
 
 var IconColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="icon" className="col-icon"></th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
 
         var icon;
-        if(flow.response){
+        if (flow.response) {
             var contentType = ResponseUtils.getContentType(flow.response);
 
             //TODO: We should assign a type to the flow somewhere else.
-            if(flow.response.code == 304) {
+            if (flow.response.code == 304) {
                 icon = "resource-icon-not-modified";
-            } else if(300 <= flow.response.code && flow.response.code < 400) {
+            } else if (300 <= flow.response.code && flow.response.code < 400) {
                 icon = "resource-icon-redirect";
-            } else if(contentType && contentType.indexOf("image") >= 0) {
+            } else if (contentType && contentType.indexOf("image") >= 0) {
                 icon = "resource-icon-image";
             } else if (contentType && contentType.indexOf("javascript") >= 0) {
                 icon = "resource-icon-js";
@@ -49,23 +46,25 @@ var IconColumn = React.createClass({
                 icon = "resource-icon-document";
             }
         }
-        if(!icon){
+        if (!icon) {
             icon = "resource-icon-plain";
         }
 
 
         icon += " resource-icon";
-        return <td className="col-icon"><div className={icon}></div></td>;
+        return <td className="col-icon">
+            <div className={icon}></div>
+        </td>;
     }
 });
 
 var PathColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="path" className="col-path">Path</th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         return <td className="col-path">{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>;
     }
@@ -74,11 +73,11 @@ var PathColumn = React.createClass({
 
 var MethodColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="method" className="col-method">Method</th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         return <td className="col-method">{flow.request.method}</td>;
     }
@@ -87,14 +86,14 @@ var MethodColumn = React.createClass({
 
 var StatusColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="status" className="col-status">Status</th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var status;
-        if(flow.response){
+        if (flow.response) {
             status = flow.response.code;
         } else {
             status = null;
@@ -106,15 +105,15 @@ var StatusColumn = React.createClass({
 
 var SizeColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="size" className="col-size">Size</th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
 
         var total = flow.request.contentLength;
-        if(flow.response){
+        if (flow.response) {
             total += flow.response.contentLength || 0;
         }
         var size = formatSize(total);
@@ -125,14 +124,14 @@ var SizeColumn = React.createClass({
 
 var TimeColumn = React.createClass({
     statics: {
-        renderTitle: function(){
+        renderTitle: function () {
             return <th key="time" className="col-time">Time</th>;
         }
     },
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
         var time;
-        if(flow.response){
+        if (flow.response) {
             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 fc4d8fbc..4b72dd29 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -1,13 +1,11 @@
-/** @jsx React.DOM */
-
 var FlowRow = React.createClass({
-    render: function(){
+    render: function () {
         var flow = this.props.flow;
-        var columns = this.props.columns.map(function(column){
-            return <column key={column.displayName} flow={flow}/>;
+        var columns = this.props.columns.map(function (Column) {
+            return <Column key={Column.displayName} flow={flow}/>;
         }.bind(this));
         var className = "";
-        if(this.props.selected){
+        if (this.props.selected) {
             className += "selected";
         }
         return (
@@ -15,80 +13,97 @@ var FlowRow = React.createClass({
                 {columns}
             </tr>);
     },
-    shouldComponentUpdate: function(nextProps){
-        var isEqual = (
-            this.props.columns.length === nextProps.columns.length && 
-            this.props.selected === nextProps.selected &&
-            this.props.flow.response === nextProps.flow.response);
-        return !isEqual;
+    shouldComponentUpdate: function (nextProps) {
+        return true;
+        // Further optimization could be done here
+        // by calling forceUpdate on flow updates, selection changes and column changes.
+        //return (
+        //(this.props.columns.length !== nextProps.columns.length) ||
+        //(this.props.selected !== nextProps.selected)
+        //);
     }
 });
 
 var FlowTableHead = React.createClass({
-    render: function(){
-        var columns = this.props.columns.map(function(column){
+    render: function () {
+        var columns = this.props.columns.map(function (column) {
             return column.renderTitle();
         }.bind(this));
-        return <thead><tr>{columns}</tr></thead>;
+        return <thead>
+            <tr>{columns}</tr>
+        </thead>;
     }
 });
 
-var FlowTableBody = React.createClass({
-    render: function(){
-        var rows = this.props.flows.map(function(flow){
-            var selected = (flow == this.props.selected);
-            return <FlowRow key={flow.id}
-                            ref={flow.id}
-                            flow={flow}
-                            columns={this.props.columns}
-                            selected={selected}
-                            selectFlow={this.props.selectFlow}
-                            />;
-        }.bind(this));
-        return <tbody>{rows}</tbody>;
-    }
-});
 
+var ROW_HEIGHT = 32;
 
 var FlowTable = React.createClass({
-    mixins: [StickyHeadMixin, AutoScrollMixin],
+    mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin],
     getInitialState: function () {
         return {
             columns: all_columns
         };
     },
-    scrollIntoView: function(flow){
-        // Now comes the fun part: Scroll the flow into the view.
-        var viewport = this.getDOMNode();
-        var flowNode = this.refs.body.refs[flow.id].getDOMNode();
-        var viewport_top = viewport.scrollTop;
-        var viewport_bottom = viewport_top + viewport.offsetHeight;
-        var flowNode_top = flowNode.offsetTop;
-        var flowNode_bottom = flowNode_top + flowNode.offsetHeight;
-
-        // Account for pinned thead by pretending that the flowNode starts
-        // -thead_height pixel earlier.
-        flowNode_top -= this.refs.body.getDOMNode().offsetTop;
-
-        if(flowNode_top < viewport_top){
-            viewport.scrollTop = flowNode_top;
-        } else if(flowNode_bottom > viewport_bottom) {
-            viewport.scrollTop = flowNode_bottom - viewport.offsetHeight;
+    componentWillMount: function () {
+        if (this.props.view) {
+            this.props.view.addListener("add update remove recalculate", this.onChange);
+        }
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.view !== this.props.view) {
+            if (this.props.view) {
+                this.props.view.removeListener("add update remove recalculate");
+            }
+            nextProps.view.addListener("add update remove recalculate", this.onChange);
         }
     },
+    getDefaultProps: function () {
+        return {
+            rowHeight: ROW_HEIGHT
+        };
+    },
+    onScrollFlowTable: function () {
+        this.adjustHead();
+        this.onScroll();
+    },
+    onChange: function () {
+        this.forceUpdate();
+    },
+    scrollIntoView: function (flow) {
+        this.scrollRowIntoView(
+            this.props.view.index(flow),
+            this.refs.body.getDOMNode().offsetTop
+        );
+    },
+    renderRow: function (flow) {
+        var selected = (flow === this.props.selected);
+        return <FlowRow key={flow.id}
+            ref={flow.id}
+            flow={flow}
+            columns={this.state.columns}
+            selected={selected}
+            selectFlow={this.props.selectFlow}
+        />;
+    },
     render: function () {
+        //console.log("render flowtable", this.state.start, this.state.stop, this.props.selected);
+        var flows = this.props.view ? this.props.view.list : [];
+
+        var rows = this.renderRows(flows);
+
         return (
-            <div className="flow-table" onScroll={this.adjustHead}>
+            <div className="flow-table" onScroll={this.onScrollFlowTable}>
                 <table>
                     <FlowTableHead ref="head"
-                                   columns={this.state.columns}/>
-                    <FlowTableBody ref="body"
-                                   flows={this.props.flows}
-                                   selected={this.props.selected}
-                                   selectFlow={this.props.selectFlow}
-                                   columns={this.state.columns}/>
+                        columns={this.state.columns}/>
+                    <tbody ref="body">
+                        { this.getPlaceholderTop(flows.length) }
+                        {rows}
+                        { this.getPlaceholderBottom(flows.length) }
+                    </tbody>
                 </table>
             </div>
-            );
+        );
     }
 });
diff --git a/web/src/js/components/footer.jsx.js b/web/src/js/components/footer.jsx.js
index 9bcbbc2a..73fadef2 100644
--- a/web/src/js/components/footer.jsx.js
+++ b/web/src/js/components/footer.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var Footer = React.createClass({
     render: function () {
         var mode = this.props.settings.mode;
@@ -7,6 +5,6 @@ var Footer = React.createClass({
             <footer>
                 {mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
             </footer>
-            );
+        );
     }
 });
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index 994bc759..a23afa9b 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var MainMenu = React.createClass({
     statics: {
         title: "Traffic",
@@ -10,14 +8,23 @@ var MainMenu = React.createClass({
             showEventLog: !this.props.settings.showEventLog
         });
     },
+    clearFlows: function () {
+        $.post("/flows/clear");
+    },
     render: function () {
         return (
             <div>
                 <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
-                <i className="fa fa-database"></i> Display Event Log
+                    <i className="fa fa-database"></i>
+                &nbsp;Display Event Log
+                </button>
+            &nbsp;
+                <button className="btn btn-default" onClick={this.clearFlows}>
+                    <i className="fa fa-eraser"></i>
+                &nbsp;Clear Flows
                 </button>
             </div>
-            );
+        );
     }
 });
 
@@ -43,53 +50,125 @@ var ReportsMenu = React.createClass({
     }
 });
 
+var FileMenu = React.createClass({
+    getInitialState: function () {
+        return {
+            showFileMenu: false
+        };
+    },
+    handleFileClick: function (e) {
+        e.preventDefault();
+        if (!this.state.showFileMenu) {
+            var close = function () {
+                this.setState({showFileMenu: false});
+                document.removeEventListener("click", close);
+            }.bind(this);
+            document.addEventListener("click", close);
+
+            this.setState({
+                showFileMenu: true
+            });
+        }
+    },
+    handleNewClick: function(e){
+        e.preventDefault();
+        console.error("unimplemented: handleNewClick");
+    },
+    handleOpenClick: function(e){
+        e.preventDefault();
+        console.error("unimplemented: handleOpenClick");
+    },
+    handleSaveClick: function(e){
+        e.preventDefault();
+        console.error("unimplemented: handleSaveClick");
+    },
+    handleShutdownClick: function(e){
+        e.preventDefault();
+        console.error("unimplemented: handleShutdownClick");
+    },
+    render: function () {
+        var fileMenuClass = "dropdown pull-left" + (this.state.showFileMenu ? " open" : "");
+
+        return (
+            <div className={fileMenuClass}>
+                <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                <ul className="dropdown-menu" role="menu">
+                    <li>
+                        <a href="#" onClick={this.handleNewClick}>
+                            <i className="fa fa-fw fa-file"></i>
+                            New
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" onClick={this.handleOpenClick}>
+                            <i className="fa fa-fw fa-folder-open"></i>
+                            Open
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" onClick={this.handleSaveClick}>
+                            <i className="fa fa-fw fa-save"></i>
+                            Save
+                        </a>
+                    </li>
+                    <li role="presentation" className="divider"></li>
+                    <li>
+                        <a href="#" onClick={this.handleShutdownClick}>
+                            <i className="fa fa-fw fa-plug"></i>
+                            Shutdown
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        );
+    }
+});
+
 
 var header_entries = [MainMenu, ToolsMenu, ReportsMenu];
 
 
 var Header = React.createClass({
+    mixins: [ReactRouter.Navigation],
     getInitialState: function () {
         return {
             active: header_entries[0]
         };
     },
-    handleClick: function (active) {
-        ReactRouter.transitionTo(active.route);
+    handleClick: function (active, e) {
+        e.preventDefault();
+        this.transitionTo(active.route);
         this.setState({active: active});
-        return false;
-    },
-    handleFileClick: function () {
-        console.log("File click");
     },
     render: function () {
-        var header = header_entries.map(function(entry, i){
+        var header = header_entries.map(function (entry, i) {
             var classes = React.addons.classSet({
                 active: entry == this.state.active
             });
             return (
-                <a key={i} 
-                   href="#"
-                   className={classes}
-                   onClick={this.handleClick.bind(this, entry)}
+                <a key={i}
+                    href="#"
+                    className={classes}
+                    onClick={this.handleClick.bind(this, entry)}
                 >
                     { entry.title}
                 </a>
-                );
+            );
         }.bind(this));
-        
+
         return (
             <header>
                 <div className="title-bar">
                     mitmproxy { this.props.settings.version }
                 </div>
                 <nav className="nav-tabs nav-tabs-lg">
-                    <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                    <FileMenu/>
                     {header}
                 </nav>
                 <div className="menu">
                     <this.state.active settings={this.props.settings}/>
                 </div>
             </header>
-            );
+        );
     }
 });
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 795b8136..17a024ee 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -1,65 +1,86 @@
-/** @jsx React.DOM */
-
 var MainView = React.createClass({
-    getInitialState: function() {
+    mixins: [ReactRouter.Navigation, ReactRouter.State],
+    getInitialState: function () {
         return {
-            flows: [],
+            flows: []
         };
     },
-    componentDidMount: function () {
-        this.flowStore = FlowStore.getView();
-        this.flowStore.addListener("change",this.onFlowChange);
-    },
-    componentWillUnmount: function () {
-        this.flowStore.removeListener("change",this.onFlowChange);
-        this.flowStore.close();
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.flowStore !== this.props.flowStore) {
+            this.closeView();
+            this.openView(nextProps.flowStore);
+        }
     },
-    onFlowChange: function () {
+    openView: function (store) {
+        var view = new StoreView(store);
         this.setState({
-            flows: this.flowStore.getAll()
+            view: view
         });
+
+        view.addListener("recalculate", this.onRecalculate);
+        view.addListener("add update remove", this.onUpdate);
     },
-    selectDetailTab: function(panel) {
-        ReactRouter.replaceWith(
-            "flow",
-            {
-                flowId: this.props.params.flowId,
-                detailTab: panel
-            }
-        );
+    onRecalculate: function(){
+        this.forceUpdate();
+        var selected = this.getSelected();
+        if(selected){
+            this.refs.flowTable.scrollIntoView(selected);
+        }
+    },
+    onUpdate: function (flow) {
+        if (flow.id === this.getParams().flowId) {
+            this.forceUpdate();
+        }
+    },
+    closeView: function () {
+        this.state.view.close();
+    },
+    componentWillMount: function () {
+        this.openView(this.props.flowStore);
+    },
+    componentWillUnmount: function () {
+        this.closeView();
     },
-    selectFlow: function(flow) {
-        if(flow){
-            ReactRouter.replaceWith(
-                "flow", 
+    selectFlow: function (flow) {
+        if (flow) {
+            this.replaceWith(
+                "flow",
                 {
                     flowId: flow.id,
-                    detailTab: this.props.params.detailTab || "request"
+                    detailTab: this.getParams().detailTab || "request"
                 }
             );
             this.refs.flowTable.scrollIntoView(flow);
         } else {
-            ReactRouter.replaceWith("flows");
+            this.replaceWith("flows");
         }
     },
-    selectFlowRelative: function(i){
+    selectFlowRelative: function (shift) {
+        var flows = this.state.view.list;
         var index;
-        if(!this.props.params.flowId){
-            if(i > 0){
-                index = this.state.flows.length-1;
+        if (!this.getParams().flowId) {
+            if (shift > 0) {
+                index = 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);
+            var currFlowId = this.getParams().flowId;
+            var i = flows.length;
+            while (i--) {
+                if (flows[i].id === currFlowId) {
+                    index = i;
+                    break;
+                }
+            }
+            index = Math.min(
+                Math.max(0, index + shift),
+                flows.length - 1);
         }
-        this.selectFlow(this.state.flows[index]);
+        this.selectFlow(flows[index]);
     },
-    onKeyDown: function(e){
-        switch(e.keyCode){
+    onKeyDown: function (e) {
+        switch (e.keyCode) {
             case Key.K:
             case Key.UP:
                 this.selectFlowRelative(-1);
@@ -80,14 +101,14 @@ var MainView = React.createClass({
                 break;
             case Key.H:
             case Key.LEFT:
-                if(this.refs.flowDetails){
+                if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(-1);
                 }
                 break;
             case Key.L:
             case Key.TAB:
             case Key.RIGHT:
-                if(this.refs.flowDetails){
+                if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(+1);
                 }
                 break;
@@ -95,19 +116,20 @@ var MainView = React.createClass({
                 console.debug("keydown", e.keyCode);
                 return;
         }
-        return false;
+        e.preventDefault();
+    },
+    getSelected: function(){
+        return this.props.flowStore.get(this.getParams().flowId);
     },
-    render: function() {
-        var selected = _.find(this.state.flows, { id: this.props.params.flowId });
+    render: function () {
+        var selected = this.getSelected();
 
         var details;
-        if(selected){
-            details = (
-                <FlowDetail ref="flowDetails" 
-                            flow={selected}
-                            selectTab={this.selectDetailTab}
-                            active={this.props.params.detailTab}/>
-            );
+        if (selected) {
+            details = [
+                <Splitter key="splitter"/>,
+                <FlowDetail key="flowDetails" ref="flowDetails" flow={selected}/>
+            ];
         } else {
             details = null;
         }
@@ -115,10 +137,9 @@ var MainView = React.createClass({
         return (
             <div className="main-view" onKeyDown={this.onKeyDown} tabIndex="0">
                 <FlowTable ref="flowTable"
-                           flows={this.state.flows}
-                           selectFlow={this.selectFlow}
-                           selected={selected} />
-                { details ? <Splitter/> : null }
+                    view={this.state.view}
+                    selectFlow={this.selectFlow}
+                    selected={selected} />
                 {details}
             </div>
         );
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index ff6e8da1..20162ad1 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
     render: function () {
@@ -10,45 +8,67 @@ var Reports = React.createClass({
 
 var ProxyAppMain = React.createClass({
     getInitialState: function () {
-        return { settings: SettingsStore.getAll() };
+        var eventStore = new EventLogStore();
+        var flowStore = new FlowStore();
+        var settings = new SettingsStore();
+
+        // Default Settings before fetch
+        _.extend(settings.dict,{
+            showEventLog: true
+        });
+        return {
+            settings: settings,
+            flowStore: flowStore,
+            eventStore: eventStore
+        };
     },
     componentDidMount: function () {
-        SettingsStore.addListener("change", this.onSettingsChange);
+        this.state.settings.addListener("recalculate", this.onSettingsChange);
     },
     componentWillUnmount: function () {
-        SettingsStore.removeListener("change", this.onSettingsChange);
+        this.state.settings.removeListener("recalculate", this.onSettingsChange);
     },
-    onSettingsChange: function () {
-        this.setState({settings: SettingsStore.getAll()});
+    onSettingsChange: function(){
+        this.setState({
+            settings: this.state.settings
+        });
     },
     render: function () {
+
+        var eventlog;
+        if (this.state.settings.dict.showEventLog) {
+            eventlog = [
+                <Splitter key="splitter" axis="y"/>,
+                <EventLog key="eventlog" eventStore={this.state.eventStore}/>
+            ];
+        } else {
+            eventlog = null;
+        }
+
         return (
             <div id="container">
-                <Header settings={this.state.settings}/>
-                <this.props.activeRouteHandler settings={this.state.settings}/>
-                {this.state.settings.showEventLog ? <Splitter axis="y"/> : null}
-                {this.state.settings.showEventLog ? <EventLog/> : null}
-                <Footer settings={this.state.settings}/>
+                <Header settings={this.state.settings.dict}/>
+                <RouteHandler settings={this.state.settings.dict} flowStore={this.state.flowStore}/>
+                {eventlog}
+                <Footer settings={this.state.settings.dict}/>
             </div>
-            );
+        );
     }
 });
 
 
-var Routes = ReactRouter.Routes;
 var Route = ReactRouter.Route;
+var RouteHandler = ReactRouter.RouteHandler;
 var Redirect = ReactRouter.Redirect;
 var DefaultRoute = ReactRouter.DefaultRoute;
 var NotFoundRoute = ReactRouter.NotFoundRoute;
 
 
-var ProxyApp = (
-    <Routes location="hash">
-        <Route path="/" handler={ProxyAppMain}>
-            <Route name="flows" path="flows" handler={MainView}/>
-            <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
-            <Route name="reports" handler={Reports}/>
-            <Redirect path="/" to="flows" />
-        </Route>
-    </Routes>
-    );
\ No newline at end of file
+var routes = (
+    <Route path="/" handler={ProxyAppMain}>
+        <Route name="flows" path="flows" handler={MainView}/>
+        <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
+        <Route name="reports" handler={Reports}/>
+        <Redirect path="/" to="flows" />
+    </Route>
+);
\ No newline at end of file
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 91cb8458..81ba6b4d 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 //React utils. For other utilities, see ../utils.js
 
 var Splitter = React.createClass({
@@ -8,85 +6,93 @@ var Splitter = React.createClass({
             axis: "x"
         };
     },
-    getInitialState: function(){
+    getInitialState: function () {
         return {
             applied: false,
             startX: false,
             startY: false
         };
     },
-    onMouseDown: function(e){
+    onMouseDown: function (e) {
         this.setState({
             startX: e.pageX,
             startY: e.pageY
         });
-        window.addEventListener("mousemove",this.onMouseMove);
-        window.addEventListener("mouseup",this.onMouseUp);
+        window.addEventListener("mousemove", this.onMouseMove);
+        window.addEventListener("mouseup", this.onMouseUp);
         // Occasionally, only a dragEnd event is triggered, but no mouseUp.
-        window.addEventListener("dragend",this.onDragEnd);
+        window.addEventListener("dragend", this.onDragEnd);
     },
-    onDragEnd: function(){
-        this.getDOMNode().style.transform="";
-        window.removeEventListener("dragend",this.onDragEnd);
-        window.removeEventListener("mouseup",this.onMouseUp);
-        window.removeEventListener("mousemove",this.onMouseMove);
+    onDragEnd: function () {
+        this.getDOMNode().style.transform = "";
+        window.removeEventListener("dragend", this.onDragEnd);
+        window.removeEventListener("mouseup", this.onMouseUp);
+        window.removeEventListener("mousemove", this.onMouseMove);
     },
-    onMouseUp: function(e){
+    onMouseUp: function (e) {
         this.onDragEnd();
 
         var node = this.getDOMNode();
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
 
-        var dX = e.pageX-this.state.startX;
-        var dY = e.pageY-this.state.startY;
+        var dX = e.pageX - this.state.startX;
+        var dY = e.pageY - this.state.startY;
         var flexBasis;
-        if(this.props.axis === "x"){
+        if (this.props.axis === "x") {
             flexBasis = prev.offsetWidth + dX;
         } else {
             flexBasis = prev.offsetHeight + dY;
         }
 
-        prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";   
+        prev.style.flex = "0 0 " + Math.max(0, flexBasis) + "px";
         next.style.flex = "1 1 auto";
 
         this.setState({
             applied: true
         });
+        this.onResize();
     },
-    onMouseMove: function(e){
+    onMouseMove: function (e) {
         var dX = 0, dY = 0;
-        if(this.props.axis === "x"){
-            dX = e.pageX-this.state.startX;
+        if (this.props.axis === "x") {
+            dX = e.pageX - this.state.startX;
         } else {
-            dY = e.pageY-this.state.startY;
+            dY = e.pageY - this.state.startY;
         }
-        this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
+        this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)";
+    },
+    onResize: function () {
+        // Trigger a global resize event. This notifies components that employ virtual scrolling
+        // that their viewport may have changed.
+        window.setTimeout(function () {
+            window.dispatchEvent(new CustomEvent("resize"));
+        }, 1);
     },
-    reset: function(willUnmount) {
+    reset: function (willUnmount) {
         if (!this.state.applied) {
             return;
         }
         var node = this.getDOMNode();
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
-        
+
         prev.style.flex = "";
         next.style.flex = "";
 
-        if(!willUnmount){
+        if (!willUnmount) {
             this.setState({
                 applied: false
             });
         }
-
+        this.onResize();
     },
-    componentWillUnmount: function(){
+    componentWillUnmount: function () {
         this.reset(true);
     },
-    render: function(){
+    render: function () {
         var className = "splitter";
-        if(this.props.axis === "x"){
+        if (this.props.axis === "x") {
             className += " splitter-x";
         } else {
             className += " splitter-y";
@@ -97,4 +103,21 @@ var Splitter = React.createClass({
             </div>
         );
     }
+});
+
+function getCookie(name) {
+    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
+    return r ? r[1] : undefined;
+}
+var xsrf = $.param({_xsrf: getCookie("_xsrf")});
+
+//Tornado XSRF Protection.
+$.ajaxPrefilter(function (options) {
+    if (options.type === "post" && options.url[0] === "/") {
+        if (options.data) {
+            options.data += ("&" + xsrf);
+        } else {
+            options.data = xsrf;
+        }
+    }
 });
\ No newline at end of file
diff --git a/web/src/js/components/virtualscroll.jsx.js b/web/src/js/components/virtualscroll.jsx.js
new file mode 100644
index 00000000..4f946cb4
--- /dev/null
+++ b/web/src/js/components/virtualscroll.jsx.js
@@ -0,0 +1,81 @@
+var VirtualScrollMixin = {
+    getInitialState: function () {
+        return {
+            start: 0,
+            stop: 0
+        };
+    },
+    componentWillMount: function () {
+        if (!this.props.rowHeight) {
+            console.warn("VirtualScrollMixin: No rowHeight specified", this);
+        }
+    },
+    getPlaceholderTop: function (total) {
+        var Tag = this.props.placeholderTagName || "tr";
+        // When a large trunk of elements is removed from the button, start may be far off the viewport.
+        // To make this issue less severe, limit the top placeholder to the total number of rows.
+        var style = {
+            height: Math.min(this.state.start, total) * this.props.rowHeight
+        };
+        var spacer = <Tag key="placeholder-top" style={style}></Tag>;
+
+        if (this.state.start % 2 === 1) {
+            // fix even/odd rows
+            return [spacer, <Tag key="placeholder-top-2"></Tag>];
+        } else {
+            return spacer;
+        }
+    },
+    getPlaceholderBottom: function (total) {
+        var Tag = this.props.placeholderTagName || "tr";
+        var style = {
+            height: Math.max(0, total - this.state.stop) * this.props.rowHeight
+        };
+        return <Tag key="placeholder-bottom" style={style}></Tag>;
+    },
+    componentDidMount: function () {
+        this.onScroll();
+        window.addEventListener('resize', this.onScroll);
+    },
+    componentWillUnmount: function(){
+        window.removeEventListener('resize', this.onScroll);
+    },
+    onScroll: function () {
+        var viewport = this.getDOMNode();
+        var top = viewport.scrollTop;
+        var height = viewport.offsetHeight;
+        var start = Math.floor(top / this.props.rowHeight);
+        var stop = start + Math.ceil(height / (this.props.rowHeightMin || this.props.rowHeight));
+
+        this.setState({
+            start: start,
+            stop: stop
+        });
+    },
+    renderRows: function (elems) {
+        var rows = [];
+        var max = Math.min(elems.length, this.state.stop);
+
+        for (var i = this.state.start; i < max; i++) {
+            var elem = elems[i];
+            rows.push(this.renderRow(elem));
+        }
+        return rows;
+    },
+    scrollRowIntoView: function (index, head_height) {
+
+        var row_top = (index * this.props.rowHeight) + head_height;
+        var row_bottom = row_top + this.props.rowHeight;
+
+        var viewport = this.getDOMNode();
+        var viewport_top = viewport.scrollTop;
+        var viewport_bottom = viewport_top + viewport.offsetHeight;
+
+        // Account for pinned thead
+        if (row_top - head_height < viewport_top) {
+            viewport.scrollTop = row_top - head_height;
+        } else if (row_bottom > viewport_bottom) {
+            viewport.scrollTop = row_bottom - viewport.offsetHeight;
+        }
+    },
+};
\ No newline at end of file