16 files changed, 314 insertions, 358 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 965ae9a7..5fae7415 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -1,35 +1,35 @@
-var React = require("react");
-var ReactRouter = require("react-router");
-var _ = require("lodash");
+import React from "react"
+import ReactDOM from "react-dom"
+import _ from "lodash"
 
 // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example)
-var AutoScrollMixin = {
+export var AutoScrollMixin = {
     componentWillUpdate: function () {
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         this._shouldScrollBottom = (
-        node.scrollTop !== 0 &&
-        node.scrollTop + node.clientHeight === node.scrollHeight
+            node.scrollTop !== 0 &&
+            node.scrollTop + node.clientHeight === node.scrollHeight
         );
     },
     componentDidUpdate: function () {
         if (this._shouldScrollBottom) {
-            var node = this.getDOMNode();
+            var node = ReactDOM.findDOMNode(this);
             node.scrollTop = node.scrollHeight;
         }
-    },
+    }
 };
 
 
-var StickyHeadMixin = {
+export var StickyHeadMixin = {
     adjustHead: function () {
         // Abusing CSS transforms to set the element
         // referenced as head into some kind of position:sticky.
-        var head = this.refs.head.getDOMNode();
-        head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)";
+        var head = ReactDOM.findDOMNode(this.refs.head);
+        head.style.transform = "translate(0," + ReactDOM.findDOMNode(this).scrollTop + "px)";
     }
 };
 
-var SettingsState = {
+export var SettingsState = {
     contextTypes: {
         settingsStore: React.PropTypes.object.isRequired
     },
@@ -52,58 +52,48 @@ var SettingsState = {
 };
 
 
-var ChildFocus = {
+export var ChildFocus = {
     contextTypes: {
         returnFocus: React.PropTypes.func
     },
-    returnFocus: function(){
-        React.findDOMNode(this).blur();
+    returnFocus: function () {
+        ReactDOM.findDOMNode(this).blur();
         window.getSelection().removeAllRanges();
         this.context.returnFocus();
     }
 };
 
 
-var Navigation = _.extend({}, ReactRouter.Navigation, {
-    setQuery: function (dict) {
-        var q = this.context.router.getCurrentQuery();
-        for (var i in dict) {
-            if (dict.hasOwnProperty(i)) {
-                q[i] = dict[i] || undefined; //falsey values shall be removed.
-            }
-        }
-        this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q);
+export var Router = {
+    contextTypes: {
+        location: React.PropTypes.object,
+        router: React.PropTypes.object.isRequired
     },
-    replaceWith: function (routeNameOrPath, params, query) {
-        if (routeNameOrPath === undefined) {
-            routeNameOrPath = this.context.router.getCurrentPath();
-        }
-        if (params === undefined) {
-            params = this.context.router.getCurrentParams();
+    updateLocation: function (pathname, queryUpdate) {
+        if (pathname === undefined) {
+            pathname = this.context.location.pathname;
         }
-        if (query === undefined) {
-            query = this.context.router.getCurrentQuery();
+        var query = this.context.location.query;
+        if (queryUpdate !== undefined) {
+            for (var i in queryUpdate) {
+                if (queryUpdate.hasOwnProperty(i)) {
+                    query[i] = queryUpdate[i] || undefined; //falsey values shall be removed.
+                }
+            }
         }
-
-        this.context.router.replaceWith(routeNameOrPath, params, query);
-    }
-});
-
-// react-router is fairly good at changing its API regularly.
-// We keep the old method for now - if it should turn out that their changes are permanent,
-// we may remove this mixin and access react-router directly again.
-var RouterState = _.extend({}, ReactRouter.State, {
+        this.context.router.replace({pathname, query});
+    },
     getQuery: function () {
         // For whatever reason, react-router always returns the same object, which makes comparing
         // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.context.router.getCurrentQuery());
+        return _.clone(this.context.location.query);
     },
-    getParams: function () {
-        return _.clone(this.context.router.getCurrentParams());
+    getParams: function() {
+        return this.props.routeParams;
     }
-});
+};
 
-var Splitter = React.createClass({
+export var Splitter = React.createClass({
     getDefaultProps: function () {
         return {
             axis: "x"
@@ -127,7 +117,7 @@ var Splitter = React.createClass({
         window.addEventListener("dragend", this.onDragEnd);
     },
     onDragEnd: function () {
-        this.getDOMNode().style.transform = "";
+        ReactDOM.findDOMNode(this).style.transform = "";
         window.removeEventListener("dragend", this.onDragEnd);
         window.removeEventListener("mouseup", this.onMouseUp);
         window.removeEventListener("mousemove", this.onMouseMove);
@@ -135,7 +125,7 @@ var Splitter = React.createClass({
     onMouseUp: function (e) {
         this.onDragEnd();
 
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
 
@@ -163,7 +153,7 @@ var Splitter = React.createClass({
         } else {
             dY = e.pageY - this.state.startY;
         }
-        this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)";
+        ReactDOM.findDOMNode(this).style.transform = "translate(" + dX + "px," + dY + "px)";
     },
     onResize: function () {
         // Trigger a global resize event. This notifies components that employ virtual scrolling
@@ -176,7 +166,7 @@ var Splitter = React.createClass({
         if (!this.state.applied) {
             return;
         }
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
 
@@ -206,14 +196,4 @@ var Splitter = React.createClass({
             </div>
         );
     }
-});
-
-module.exports = {
-    ChildFocus: ChildFocus,
-    RouterState: RouterState,
-    Navigation: Navigation,
-    StickyHeadMixin: StickyHeadMixin,
-    AutoScrollMixin: AutoScrollMixin,
-    Splitter: Splitter,
-    SettingsState: SettingsState
-};
-\ No newline at end of file
+});
+\ No newline at end of file
diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js
index f2d44566..c929a244 100644
--- a/web/src/js/components/editor.js
+++ b/web/src/js/components/editor.js
@@ -1,6 +1,7 @@
-var React = require("react");
-var common = require("./common.js");
-var utils = require("../utils.js");
+import React from "react";
+import ReactDOM from 'react-dom';
+import {ChildFocus} from "./common.js";
+import {Key} from "../utils.js";
 
 var contentToHtml = function (content) {
     return _.escape(content);
@@ -98,12 +99,12 @@ var EditorBase = React.createClass({
             range = document.caretRangeFromPoint(e.clientX, e.clientY);
         } else {
             range = document.createRange();
-            range.selectNodeContents(React.findDOMNode(this));
+            range.selectNodeContents(ReactDOM.findDOMNode(this));
         }
 
         this._ignore_events = true;
         this.setState({editable: true}, function () {
-            var node = React.findDOMNode(this);
+            var node = ReactDOM.findDOMNode(this);
             node.blur();
             node.focus();
             this._ignore_events = false;
@@ -117,7 +118,7 @@ var EditorBase = React.createClass({
         // a stop would cause a blur as a side-effect.
         // but a blur event must trigger a stop as well.
         // to fix this, make stop = blur and do the actual stop in the onBlur handler.
-        React.findDOMNode(this).blur();
+        ReactDOM.findDOMNode(this).blur();
         this.props.onStop && this.props.onStop();
     },
     _stop: function (e) {
@@ -126,24 +127,24 @@ var EditorBase = React.createClass({
         }
         console.log("_stop", _.extend({}, e));
         window.getSelection().removeAllRanges(); //make sure that selection is cleared on blur
-        var node = React.findDOMNode(this);
+        var node = ReactDOM.findDOMNode(this);
         var content = this.props.nodeToContent(node);
         this.setState({editable: false});
         this.props.onDone(content);
         this.props.onBlur && this.props.onBlur(e);
     },
     reset: function () {
-        React.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content);
+        ReactDOM.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content);
     },
     onKeyDown: function (e) {
         e.stopPropagation();
         switch (e.keyCode) {
-            case utils.Key.ESC:
+            case Key.ESC:
                 e.preventDefault();
                 this.reset();
                 this.stop();
                 break;
-            case utils.Key.ENTER:
+            case Key.ENTER:
                 if (this.props.submitOnEnter && !e.shiftKey) {
                     e.preventDefault();
                     this.stop();
@@ -154,7 +155,7 @@ var EditorBase = React.createClass({
         }
     },
     onInput: function () {
-        var node = React.findDOMNode(this);
+        var node = ReactDOM.findDOMNode(this);
         var content = this.props.nodeToContent(node);
         this.props.onInput && this.props.onInput(content);
     }
@@ -212,8 +213,8 @@ var ValidateEditor = React.createClass({
 /*
  Text Editor with mitmweb-specific convenience features
  */
-var ValueEditor = React.createClass({
-    mixins: [common.ChildFocus],
+export var ValueEditor = React.createClass({
+    mixins: [ChildFocus],
     propTypes: {
         content: React.PropTypes.string.isRequired,
         onDone: React.PropTypes.func.isRequired,
@@ -228,13 +229,9 @@ var ValueEditor = React.createClass({
         />;
     },
     focus: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onStop: function () {
         this.returnFocus();
     }
-});
-
-module.exports = {
-    ValueEditor: ValueEditor
-};
-\ No newline at end of file
+});
+\ No newline at end of file
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index fea7b247..650f7cd3 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,9 +1,9 @@
-var React = require("react");
-var common = require("./common.js");
-var Query = require("../actions.js").Query;
-var VirtualScrollMixin = require("./virtualscroll.js");
-var views = require("../store/view.js");
-var _ = require("lodash");
+import React from "react"
+import {AutoScrollMixin, Router} from "./common.js"
+import {Query} from "../actions.js"
+import { VirtualScrollMixin } from "./virtualscroll.js"
+import {StoreView} from "../store/view.js"
+import _ from "lodash"
 
 var LogMessage = React.createClass({
     render: function () {
@@ -34,12 +34,12 @@ var EventLogContents = React.createClass({
     contextTypes: {
         eventStore: React.PropTypes.object.isRequired
     },
-    mixins: [common.AutoScrollMixin, VirtualScrollMixin],
+    mixins: [AutoScrollMixin, VirtualScrollMixin],
     getInitialState: function () {
         var filterFn = function (entry) {
             return this.props.filter[entry.level];
         };
-        var view = new views.StoreView(this.context.eventStore, filterFn.bind(this));
+        var view = new StoreView(this.context.eventStore, filterFn.bind(this));
         view.addListener("add", this.onEventLogChange);
         view.addListener("recalculate", this.onEventLogChange);
 
@@ -108,7 +108,7 @@ var ToggleFilter = React.createClass({
 });
 
 var EventLog = React.createClass({
-    mixins: [common.Navigation],
+    mixins: [Router],
     getInitialState: function () {
         return {
             filter: {
@@ -121,7 +121,8 @@ var EventLog = React.createClass({
     close: function () {
         var d = {};
         d[Query.SHOW_EVENTLOG] = undefined;
-        this.setQuery(d);
+
+        this.updateLocation(undefined, d);
     },
     toggleLevel: function (level) {
         var filter = _.extend({}, this.state.filter);
@@ -147,4 +148,4 @@ var EventLog = React.createClass({
     }
 });
 
-module.exports = EventLog;
-\ No newline at end of file
+export default EventLog;
+\ No newline at end of file
diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js
index 74d96216..dbbe8847 100644
--- a/web/src/js/components/flowtable-columns.js
+++ b/web/src/js/components/flowtable-columns.js
@@ -1,7 +1,6 @@
-var React = require("react");
-var RequestUtils = require("../flow/utils.js").RequestUtils;
-var ResponseUtils = require("../flow/utils.js").ResponseUtils;
-var utils = require("../utils.js");
+import React from "react";
+import {RequestUtils, ResponseUtils} from "../flow/utils.js";
+import {formatSize, formatTimeDelta} from "../utils.js";
 
 var TLSColumn = React.createClass({
     statics: {
@@ -156,7 +155,7 @@ var SizeColumn = React.createClass({
         if (flow.response) {
             total += flow.response.contentLength || 0;
         }
-        var size = utils.formatSize(total);
+        var size = formatSize(total);
         return <td className="col-size">{size}</td>;
     }
 });
@@ -179,7 +178,7 @@ var TimeColumn = React.createClass({
         var flow = this.props.flow;
         var time;
         if (flow.response) {
-            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
+            time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
         } else {
             time = "...";
         }
@@ -198,4 +197,4 @@ var all_columns = [
     TimeColumn
 ];
 
-module.exports = all_columns;
+export default all_columns;
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index 609034f6..988d1895 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -1,10 +1,11 @@
-var React = require("react");
-var common = require("./common.js");
-var utils = require("../utils.js");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import {StickyHeadMixin, AutoScrollMixin} from "./common.js";
+import {reverseString} from "../utils.js";
+import _ from "lodash";
 
-var VirtualScrollMixin = require("./virtualscroll.js");
-var flowtable_columns = require("./flowtable-columns.js");
+import { VirtualScrollMixin } from "./virtualscroll.js"
+import flowtable_columns from "./flowtable-columns.js";
 
 var FlowRow = React.createClass({
     render: function () {
@@ -73,7 +74,7 @@ var FlowTableHead = React.createClass({
             sortKeyFun = hasSort && function(){
                 var k = Column.sortKeyFun.apply(this, arguments);
                 if(_.isString(k)){
-                    return utils.reverseString(""+k);
+                    return reverseString(""+k);
                 } else {
                     return -k;
                 }
@@ -107,7 +108,7 @@ var FlowTableHead = React.createClass({
 var ROW_HEIGHT = 32;
 
 var FlowTable = React.createClass({
-    mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin],
+    mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin],
     contextTypes: {
         view: React.PropTypes.object.isRequired
     },
@@ -142,8 +143,8 @@ var FlowTable = React.createClass({
     },
     scrollIntoView: function (flow) {
         this.scrollRowIntoView(
-            this.context.view.index(flow),
-            this.refs.body.getDOMNode().offsetTop
+            this.context.view.indexOf(flow),
+            ReactDOM.findDOMNode(this.refs.body).offsetTop
         );
     },
     renderRow: function (flow) {
@@ -184,4 +185,4 @@ var FlowTable = React.createClass({
     }
 });
 
-module.exports = FlowTable;
+export default FlowTable;
diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
index 63d22c1c..2743eec3 100644
--- a/web/src/js/components/flowview/contentview.js
+++ b/web/src/js/components/flowview/contentview.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var MessageUtils = require("../../flow/utils.js").MessageUtils;
-var utils = require("../../utils.js");
+import {MessageUtils} from "../../flow/utils.js";
+import {formatSize} from "../../utils.js";
 
 var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
 var ViewImage = React.createClass({
@@ -145,7 +145,7 @@ var TooLarge = React.createClass({
         }
     },
     render: function () {
-        var size = utils.formatSize(this.props.message.contentLength);
+        var size = formatSize(this.props.message.contentLength);
         return <div className="alert alert-warning">
             <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
             {size} content size.
@@ -234,4 +234,4 @@ var ContentView = React.createClass({
     }
 });
 
-module.exports = ContentView;
-\ No newline at end of file
+export default ContentView;
+\ No newline at end of file
diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js
index 00e0116c..45fe1292 100644
--- a/web/src/js/components/flowview/details.js
+++ b/web/src/js/components/flowview/details.js
@@ -1,7 +1,7 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var utils = require("../../utils.js");
+import {formatTimeStamp, formatTimeDelta} from "../../utils.js";
 
 var TimeStamp = React.createClass({
     render: function () {
@@ -11,11 +11,11 @@ var TimeStamp = React.createClass({
             return <tr></tr>;
         }
 
-        var ts = utils.formatTimeStamp(this.props.t);
+        var ts = formatTimeStamp(this.props.t);
 
         var delta;
         if (this.props.deltaTo) {
-            delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+            delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = <span className="text-muted">{"(" + delta + ")"}</span>;
         } else {
             delta = null;
@@ -178,4 +178,4 @@ var Details = React.createClass({
     }
 });
 
-module.exports = Details;
-\ No newline at end of file
+export default Details;
+\ No newline at end of file
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
index 739a46dc..47531f58 100644
--- a/web/src/js/components/flowview/index.js
+++ b/web/src/js/components/flowview/index.js
@@ -1,22 +1,21 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
 
-var common = require("../common.js");
-var Nav = require("./nav.js");
-var Messages = require("./messages.js");
-var Details = require("./details.js");
-var Prompt = require("../prompt.js");
+import {Router, StickyHeadMixin} from "../common.js"
+import Nav from "./nav.js";
+import {Request, Response, Error} from "./messages.js";
+import Details from "./details.js";
+import Prompt from "../prompt.js";
 
 
 var allTabs = {
-    request: Messages.Request,
-    response: Messages.Response,
-    error: Messages.Error,
+    request: Request,
+    response: Response,
+    error: Error,
     details: Details
 };
 
 var FlowView = React.createClass({
-    mixins: [common.StickyHeadMixin, common.Navigation, common.RouterState],
+    mixins: [StickyHeadMixin, Router],
     getInitialState: function () {
         return {
             prompt: false
@@ -34,37 +33,28 @@ var FlowView = React.createClass({
     },
     nextTab: function (i) {
         var tabs = this.getTabs(this.props.flow);
-        var currentIndex = tabs.indexOf(this.getActive());
+        var currentIndex = tabs.indexOf(this.props.tab);
         // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
         var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.replaceWith(
-            "flow",
-            {
-                flowId: this.getParams().flowId,
-                detailTab: panel
-            }
-        );
-    },
-    getActive: function(){
-        return this.getParams().detailTab;
+        this.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
     },
     promptEdit: function () {
         var options;
-        switch(this.getActive()){
+        switch (this.props.tab) {
             case "request":
                 options = [
                     "method",
                     "url",
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "header"
                     /*, "content"*/];
                 break;
             case "response":
                 options = [
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "code",
                     "message",
                     "header"
@@ -73,14 +63,14 @@ var FlowView = React.createClass({
             case "details":
                 return;
             default:
-                throw "Unknown tab for edit: " + this.getActive();
+                throw "Unknown tab for edit: " + this.props.tab;
         }
 
         this.setState({
             prompt: {
                 done: function (k) {
                     this.setState({prompt: false});
-                    if(k){
+                    if (k) {
                         this.refs.tab.edit(k);
                     }
                 }.bind(this),
@@ -91,9 +81,9 @@ var FlowView = React.createClass({
     render: function () {
         var flow = this.props.flow;
         var tabs = this.getTabs(flow);
-        var active = this.getActive();
+        var active = this.props.tab;
 
-        if (!_.contains(tabs, active)) {
+        if (tabs.indexOf(active) < 0) {
             if (active === "response" && flow.error) {
                 active = "error";
             } else if (active === "error" && flow.response) {
@@ -113,10 +103,10 @@ var FlowView = React.createClass({
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <Nav ref="head"
-                    flow={flow}
-                    tabs={tabs}
-                    active={active}
-                    selectTab={this.selectTab}/>
+                     flow={flow}
+                     tabs={tabs}
+                     active={active}
+                     selectTab={this.selectTab}/>
                 <Tab ref="tab" flow={flow}/>
                 {prompt}
             </div>
@@ -124,4 +114,4 @@ var FlowView = React.createClass({
     }
 });
 
-module.exports = FlowView;
-\ No newline at end of file
+export default FlowView;
+\ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
index 7ac95d85..2885b3b1 100644
--- a/web/src/js/components/flowview/messages.js
+++ b/web/src/js/components/flowview/messages.js
@@ -1,12 +1,12 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import _ from "lodash";
 
-var common = require("../common.js");
-var actions = require("../../actions.js");
-var flowutils = require("../../flow/utils.js");
-var utils = require("../../utils.js");
-var ContentView = require("./contentview.js");
-var ValueEditor = require("../editor.js").ValueEditor;
+import {FlowActions} from "../../actions.js";
+import {RequestUtils, isValidHttpVersion, parseUrl, parseHttpVersion} from "../../flow/utils.js";
+import {Key, formatTimeStamp} from "../../utils.js";
+import ContentView from "./contentview.js";
+import {ValueEditor} from "../editor.js";
 
 var Headers = React.createClass({
     propTypes: {
@@ -98,17 +98,17 @@ var HeaderEditor = React.createClass({
         return <ValueEditor ref="input" {...this.props} onKeyDown={this.onKeyDown} inline/>;
     },
     focus: function () {
-        this.getDOMNode().focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onKeyDown: function (e) {
         switch (e.keyCode) {
-            case utils.Key.BACKSPACE:
+            case Key.BACKSPACE:
                 var s = window.getSelection().getRangeAt(0);
                 if (s.startOffset === 0 && s.endOffset === 0) {
                     this.props.onRemove(e);
                 }
                 break;
-            case utils.Key.TAB:
+            case Key.TAB:
                 if (!e.shiftKey) {
                     this.props.onTab(e);
                 }
@@ -120,7 +120,7 @@ var HeaderEditor = React.createClass({
 var RequestLine = React.createClass({
     render: function () {
         var flow = this.props.flow;
-        var url = flowutils.RequestUtils.pretty_url(flow.request);
+        var url = RequestUtils.pretty_url(flow.request);
         var httpver = flow.request.http_version;
 
         return <div className="first-line request-line">
@@ -141,31 +141,31 @@ var RequestLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         </div>
     },
     isValidUrl: function (url) {
-        var u = flowutils.parseUrl(url);
+        var u = parseUrl(url);
         return !!u.host;
     },
     onMethodChange: function (nextMethod) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: {method: nextMethod}}
         );
     },
     onUrlChange: function (nextUrl) {
-        var props = flowutils.parseUrl(nextUrl);
+        var props = parseUrl(nextUrl);
         props.path = props.path || "";
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: props}
         );
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {request: {http_version: ver}}
         );
@@ -181,7 +181,7 @@ var ResponseLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         &nbsp;
             <ValueEditor
@@ -193,7 +193,7 @@ var ResponseLine = React.createClass({
         &nbsp;
             <ValueEditor
                 ref="msg"
-                content={flow.response.msg}
+                content={flow.response.reason}
                 onDone={this.onMsgChange}
                 inline/>
         </div>;
@@ -202,28 +202,28 @@ var ResponseLine = React.createClass({
         return /^\d+$/.test(code);
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {response: {http_version: ver}}
         );
     },
     onMsgChange: function (nextMsg) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {msg: nextMsg}}
         );
     },
     onCodeChange: function (nextCode) {
         nextCode = parseInt(nextCode);
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {code: nextCode}}
         );
     }
 });
 
-var Request = React.createClass({
+export var Request = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -255,7 +255,7 @@ var Request = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             request: {
                 headers: nextHeaders
             }
@@ -263,7 +263,7 @@ var Request = React.createClass({
     }
 });
 
-var Response = React.createClass({
+export var Response = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -295,7 +295,7 @@ var Response = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             response: {
                 headers: nextHeaders
             }
@@ -303,7 +303,7 @@ var Response = React.createClass({
     }
 });
 
-var Error = React.createClass({
+export var Error = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -311,16 +311,10 @@ var Error = React.createClass({
                 <div className="alert alert-warning">
                 {flow.error.msg}
                     <div>
-                        <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small>
+                        <small>{ formatTimeStamp(flow.error.timestamp) }</small>
                     </div>
                 </div>
             </section>
         );
     }
 });
-
-module.exports = {
-    Request: Request,
-    Response: Response,
-    Error: Error
-};
diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js
index 46eda707..a12fd1fd 100644
--- a/web/src/js/components/flowview/nav.js
+++ b/web/src/js/components/flowview/nav.js
@@ -1,6 +1,6 @@
-var React = require("react");
+import React from "react";
 
-var actions = require("../../actions.js");
+import {FlowActions} from "../../actions.js";
 
 var NavAction = React.createClass({
     onClick: function (e) {
@@ -38,19 +38,19 @@ var Nav = React.createClass({
 
         var acceptButton = null;
         if(flow.intercepted){
-            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
+            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />;
         }
         var revertButton = null;
         if(flow.modified){
-            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
+            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />;
         }
 
         return (
             <nav ref="head" className="nav-tabs nav-tabs-sm">
                 {tabs}
-                <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
-                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
-                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
+                <NavAction title="[d]elete flow" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)} />
+                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} />
+                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} />
                 {acceptButton}
                 {revertButton}
             </nav>
@@ -58,4 +58,4 @@ var Nav = React.createClass({
     }
 });
 
-module.exports = Nav;
-\ No newline at end of file
+export default Nav;
+\ No newline at end of file
diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js
index 229d691b..415c2577 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var common = require("./common.js");
+import React from "react";
+import {SettingsState} from "./common.js";
 
 var Footer = React.createClass({
-    mixins: [common.SettingsState],
+    mixins: [SettingsState],
     render: function () {
         var mode = this.state.settings.mode;
         var intercept = this.state.settings.intercept;
@@ -16,4 +16,4 @@ var Footer = React.createClass({
     }
 });
 
-module.exports = Footer;
-\ No newline at end of file
+export default Footer;
+\ No newline at end of file
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 998a41df..3833a6ee 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -1,11 +1,12 @@
-var React = require("react");
-var $ = require("jquery");
+import React from "react";
+import ReactDOM from 'react-dom';
+import $ from "jquery";
 
-var Filt = require("../filt/filt.js");
-var utils = require("../utils.js");
-var common = require("./common.js");
-var actions = require("../actions.js");
-var Query = require("../actions.js").Query;
+import Filt from "../filt/filt.js";
+import {Key} from "../utils.js";
+import {Router, SettingsState, ChildFocus} from "./common.js";
+import {SettingsActions, FlowActions} from "../actions.js";
+import {Query} from "../actions.js";
 
 var FilterDocs = React.createClass({
     statics: {
@@ -50,7 +51,7 @@ var FilterDocs = React.createClass({
     }
 });
 var FilterInput = React.createClass({
-    mixins: [common.ChildFocus],
+    mixins: [ChildFocus],
     getInitialState: function () {
         // Consider both focus and mouseover for showing/hiding the tooltip,
         // because onBlur of the input is triggered before the click on the tooltip
@@ -76,26 +77,24 @@ var FilterInput = React.createClass({
     },
     isValid: function (filt) {
         try {
-            Filt.parse(filt || this.state.value);
+            var str = filt || this.state.value;
+            if(str){
+                Filt.parse(filt || this.state.value);
+            }
             return true;
         } catch (e) {
             return false;
         }
     },
     getDesc: function () {
-        var desc;
-        try {
-            desc = Filt.parse(this.state.value).desc;
-        } catch (e) {
-            desc = "" + e;
-        }
-        if (desc !== "true") {
-            return desc;
-        } else {
-            return (
-                <FilterDocs/>
-            );
+        if(this.state.value) {
+            try {
+                return Filt.parse(this.state.value).desc;
+            } catch (e) {
+                return "" + e;
+            }
         }
+        return <FilterDocs/>;
     },
     onFocus: function () {
         this.setState({focus: true});
@@ -110,7 +109,7 @@ var FilterInput = React.createClass({
         this.setState({mousefocus: false});
     },
     onKeyDown: function (e) {
-        if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) {
+        if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) {
             this.blur();
             // If closed using ESC/ENTER, hide the tooltip.
             this.setState({mousefocus: false});
@@ -118,11 +117,11 @@ var FilterInput = React.createClass({
         e.stopPropagation();
     },
     blur: function () {
-        this.refs.input.getDOMNode().blur();
+        ReactDOM.findDOMNode(this.refs.input).blur();
         this.returnFocus();
     },
     select: function () {
-        this.refs.input.getDOMNode().select();
+        ReactDOM.findDOMNode(this.refs.input).select();
     },
     render: function () {
         var isValid = this.isValid();
@@ -159,8 +158,8 @@ var FilterInput = React.createClass({
     }
 });
 
-var MainMenu = React.createClass({
-    mixins: [common.Navigation, common.RouterState, common.SettingsState],
+export var MainMenu = React.createClass({
+    mixins: [Router, SettingsState],
     statics: {
         title: "Start",
         route: "flows"
@@ -168,15 +167,15 @@ var MainMenu = React.createClass({
     onSearchChange: function (val) {
         var d = {};
         d[Query.SEARCH] = val;
-        this.setQuery(d);
+        this.updateLocation(undefined, d);
     },
     onHighlightChange: function (val) {
         var d = {};
         d[Query.HIGHLIGHT] = val;
-        this.setQuery(d);
+        this.updateLocation(undefined, d);
     },
     onInterceptChange: function (val) {
-        actions.SettingsActions.update({intercept: val});
+        SettingsActions.update({intercept: val});
     },
     render: function () {
         var search = this.getQuery()[Query.SEARCH] || "";
@@ -220,7 +219,7 @@ var ViewMenu = React.createClass({
         title: "View",
         route: "flows"
     },
-    mixins: [common.Navigation, common.RouterState],
+    mixins: [Router],
     toggleEventLog: function () {
         var d = {};
 
@@ -230,7 +229,7 @@ var ViewMenu = React.createClass({
             d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
         }
 
-        this.setQuery(d);
+        this.updateLocation(undefined, d);
     },
     render: function () {
         var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
@@ -282,7 +281,7 @@ var FileMenu = React.createClass({
     handleNewClick: function (e) {
         e.preventDefault();
         if (confirm("Delete all flows?")) {
-            actions.FlowActions.clear();
+            FlowActions.clear();
         }
     },
     handleOpenClick: function (e) {
@@ -348,8 +347,8 @@ var FileMenu = React.createClass({
 var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
 
 
-var Header = React.createClass({
-    mixins: [common.Navigation],
+export var Header = React.createClass({
+    mixins: [Router],
     getInitialState: function () {
         return {
             active: header_entries[0]
@@ -357,7 +356,7 @@ var Header = React.createClass({
     },
     handleClick: function (active, e) {
         e.preventDefault();
-        this.replaceWith(active.route);
+        this.updateLocation(active.route);
         this.setState({active: active});
     },
     render: function () {
@@ -391,9 +390,3 @@ var Header = React.createClass({
         );
     }
 });
-
-
-module.exports = {
-    Header: Header,
-    MainMenu: MainMenu
-};
-\ No newline at end of file
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 9ff51dfa..cc1f05ae 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -1,17 +1,16 @@
-var React = require("react");
+import React from "react";
 
-var actions = require("../actions.js");
-var Query = require("../actions.js").Query;
-var utils = require("../utils.js");
-var views = require("../store/view.js");
-var Filt = require("../filt/filt.js");
-
-var common = require("./common.js");
-var FlowTable = require("./flowtable.js");
-var FlowView = require("./flowview/index.js");
+import {FlowActions} from "../actions.js";
+import {Query} from "../actions.js";
+import {Key} from "../utils.js";
+import {StoreView} from "../store/view.js";
+import Filt from "../filt/filt.js";
+import { Router, Splitter} from "./common.js"
+import FlowTable from "./flowtable.js";
+import FlowView from "./flowview/index.js";
 
 var MainView = React.createClass({
-    mixins: [common.Navigation, common.RouterState],
+    mixins: [Router],
     contextTypes: {
         flowStore: React.PropTypes.object.isRequired,
     },
@@ -25,7 +24,7 @@ var MainView = React.createClass({
     },
     getInitialState: function () {
         var sortKeyFun = false;
-        var view = new views.StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
+        var view = new StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
         view.addListener("recalculate", this.onRecalculate);
         view.addListener("add", this.onUpdate);
         view.addListener("update", this.onUpdate);
@@ -42,24 +41,28 @@ var MainView = React.createClass({
     },
     getViewFilt: function () {
         try {
-            var filt = Filt.parse(this.getQuery()[Query.SEARCH] || "");
+            var filtStr = this.getQuery()[Query.SEARCH];
+            var filt = filtStr ? Filt.parse(filtStr) : () => true;
             var highlightStr = this.getQuery()[Query.HIGHLIGHT];
-            var highlight = highlightStr ? Filt.parse(highlightStr) : false;
+            var highlight = highlightStr ? Filt.parse(highlightStr) : () => false;
         } catch (e) {
             console.error("Error when processing filter: " + e);
         }
 
-        return function filter_and_highlight(flow) {
+        var fun = function filter_and_highlight(flow) {
             if (!this._highlight) {
                 this._highlight = {};
             }
-            this._highlight[flow.id] = highlight && highlight(flow);
+            this._highlight[flow.id] = highlight(flow);
             return filt(flow);
         };
+        fun.highlightStr = highlightStr;
+        fun.filtStr = filtStr;
+        return fun;
     },
     componentWillReceiveProps: function (nextProps) {
-        var filterChanged = (this.props.query[Query.SEARCH] !== nextProps.query[Query.SEARCH]);
-        var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
+        var filterChanged = this.state.view.filt.filtStr !== nextProps.location.query[Query.SEARCH];
+        var highlightChanged = this.state.view.filt.highlightStr !== nextProps.location.query[Query.HIGHLIGHT];
         if (filterChanged || highlightChanged) {
             this.state.view.recalculate(this.getViewFilt(), this.state.sortKeyFun);
         }
@@ -90,16 +93,11 @@ var MainView = React.createClass({
     },
     selectFlow: function (flow) {
         if (flow) {
-            this.replaceWith(
-                "flow",
-                {
-                    flowId: flow.id,
-                    detailTab: this.getParams().detailTab || "request"
-                }
-            );
+            var tab = this.getParams().detailTab || "request";
+            this.updateLocation(`/flows/${flow.id}/${tab}`);
             this.refs.flowTable.scrollIntoView(flow);
         } else {
-            this.replaceWith("flows", {});
+            this.updateLocation("/flows");
         }
     },
     selectFlowRelative: function (shift) {
@@ -132,80 +130,80 @@ var MainView = React.createClass({
             return;
         }
         switch (e.keyCode) {
-            case utils.Key.K:
-            case utils.Key.UP:
+            case Key.K:
+            case Key.UP:
                 this.selectFlowRelative(-1);
                 break;
-            case utils.Key.J:
-            case utils.Key.DOWN:
+            case Key.J:
+            case Key.DOWN:
                 this.selectFlowRelative(+1);
                 break;
-            case utils.Key.SPACE:
-            case utils.Key.PAGE_DOWN:
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
                 this.selectFlowRelative(+10);
                 break;
-            case utils.Key.PAGE_UP:
+            case Key.PAGE_UP:
                 this.selectFlowRelative(-10);
                 break;
-            case utils.Key.END:
+            case Key.END:
                 this.selectFlowRelative(+1e10);
                 break;
-            case utils.Key.HOME:
+            case Key.HOME:
                 this.selectFlowRelative(-1e10);
                 break;
-            case utils.Key.ESC:
+            case Key.ESC:
                 this.selectFlow(null);
                 break;
-            case utils.Key.H:
-            case utils.Key.LEFT:
+            case Key.H:
+            case Key.LEFT:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(-1);
                 }
                 break;
-            case utils.Key.L:
-            case utils.Key.TAB:
-            case utils.Key.RIGHT:
+            case Key.L:
+            case Key.TAB:
+            case Key.RIGHT:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.nextTab(+1);
                 }
                 break;
-            case utils.Key.C:
+            case Key.C:
                 if (e.shiftKey) {
-                    actions.FlowActions.clear();
+                    FlowActions.clear();
                 }
                 break;
-            case utils.Key.D:
+            case Key.D:
                 if (flow) {
                     if (e.shiftKey) {
-                        actions.FlowActions.duplicate(flow);
+                        FlowActions.duplicate(flow);
                     } else {
-                        actions.FlowActions.delete(flow);
+                        FlowActions.delete(flow);
                     }
                 }
                 break;
-            case utils.Key.A:
+            case Key.A:
                 if (e.shiftKey) {
-                    actions.FlowActions.accept_all();
+                    FlowActions.accept_all();
                 } else if (flow && flow.intercepted) {
-                    actions.FlowActions.accept(flow);
+                    FlowActions.accept(flow);
                 }
                 break;
-            case utils.Key.R:
+            case Key.R:
                 if (!e.shiftKey && flow) {
-                    actions.FlowActions.replay(flow);
+                    FlowActions.replay(flow);
                 }
                 break;
-            case utils.Key.V:
+            case Key.V:
                 if (e.shiftKey && flow && flow.modified) {
-                    actions.FlowActions.revert(flow);
+                    FlowActions.revert(flow);
                 }
                 break;
-            case utils.Key.E:
+            case Key.E:
                 if (this.refs.flowDetails) {
                     this.refs.flowDetails.promptEdit();
                 }
                 break;
-            case utils.Key.SHIFT:
+            case Key.SHIFT:
                 break;
             default:
                 console.debug("keydown", e.keyCode);
@@ -222,8 +220,12 @@ var MainView = React.createClass({
         var details;
         if (selected) {
             details = [
-                <common.Splitter key="splitter"/>,
-                <FlowView key="flowDetails" ref="flowDetails" flow={selected}/>
+                <Splitter key="splitter"/>,
+                <FlowView
+                    key="flowDetails"
+                    ref="flowDetails"
+                    tab={this.getParams().detailTab}
+                    flow={selected}/>
             ];
         } else {
             details = null;
@@ -241,4 +243,4 @@ var MainView = React.createClass({
     }
 });
 
-module.exports = MainView;
+export default MainView;
diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js
index 121a1170..7b398038 100644
--- a/web/src/js/components/prompt.js
+++ b/web/src/js/components/prompt.js
@@ -1,18 +1,19 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import _ from "lodash";
 
-var utils = require("../utils.js");
-var common = require("./common.js");
+import {Key} from "../utils.js";
+import {ChildFocus} from "./common.js"
 
 var Prompt = React.createClass({
-    mixins: [common.ChildFocus],
+    mixins: [ChildFocus],
     propTypes: {
         options: React.PropTypes.array.isRequired,
         done: React.PropTypes.func.isRequired,
         prompt: React.PropTypes.string
     },
     componentDidMount: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onKeyDown: function (e) {
         e.stopPropagation();
@@ -20,12 +21,12 @@ var Prompt = React.createClass({
         var opts = this.getOptions();
         for (var i = 0; i < opts.length; i++) {
             var k = opts[i].key;
-            if (utils.Key[k.toUpperCase()] === e.keyCode) {
+            if (Key[k.toUpperCase()] === e.keyCode) {
                 this.done(k);
                 return;
             }
         }
-        if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) {
+        if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) {
             this.done(false);
         }
     },
@@ -97,4 +98,4 @@ var Prompt = React.createClass({
     }
 });
 
-module.exports = Prompt;
-\ No newline at end of file
+export default Prompt;
+\ No newline at end of file
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index e766d6e6..24f45ff5 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -1,15 +1,15 @@
-var React = require("react");
-var ReactRouter = require("react-router");
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from "react-dom";
+import _ from "lodash";
 
-var common = require("./common.js");
-var MainView = require("./mainview.js");
-var Footer = require("./footer.js");
-var header = require("./header.js");
-var EventLog = require("./eventlog.js");
-var store = require("../store/store.js");
-var Query = require("../actions.js").Query;
-var Key = require("../utils.js").Key;
+import {Router, Splitter} from "./common.js"
+import MainView from "./mainview.js";
+import Footer from "./footer.js";
+import {Header, MainMenu} from "./header.js";
+import EventLog from "./eventlog.js"
+import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js";
+import {Query} from "../actions.js";
+import {Key} from "../utils.js";
 
 
 //TODO: Move out of here, just a stub.
@@ -21,12 +21,13 @@ var Reports = React.createClass({
 
 
 var ProxyAppMain = React.createClass({
-    mixins: [common.RouterState],
+    mixins: [Router],
     childContextTypes: {
         settingsStore: React.PropTypes.object.isRequired,
         flowStore: React.PropTypes.object.isRequired,
         eventStore: React.PropTypes.object.isRequired,
         returnFocus: React.PropTypes.func.isRequired,
+        location: React.PropTypes.object.isRequired,
     },
     componentDidMount: function () {
         this.focus();
@@ -37,12 +38,13 @@ var ProxyAppMain = React.createClass({
             flowStore: this.state.flowStore,
             eventStore: this.state.eventStore,
             returnFocus: this.focus,
+            location: this.props.location
         };
     },
     getInitialState: function () {
-        var eventStore = new store.EventLogStore();
-        var flowStore = new store.FlowStore();
-        var settingsStore = new store.SettingsStore();
+        var eventStore = new EventLogStore();
+        var flowStore = new FlowStore();
+        var settingsStore = new SettingsStore();
 
         // Default Settings before fetch
         _.extend(settingsStore.dict, {});
@@ -53,16 +55,16 @@ var ProxyAppMain = React.createClass({
         };
     },
     focus: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     getMainComponent: function () {
-        return this.refs.view.refs.__routeHandler__;
+        return this.refs.view;
     },
     onKeydown: function (e) {
 
         var selectFilterInput = function (name) {
             var headerComponent = this.refs.header;
-            headerComponent.setState({active: header.MainMenu}, function () {
+            headerComponent.setState({active: MainMenu}, function () {
                 headerComponent.refs.active.refs[name].select();
             });
         }.bind(this);
@@ -88,18 +90,22 @@ var ProxyAppMain = React.createClass({
     },
     render: function () {
         var eventlog;
-        if (this.getQuery()[Query.SHOW_EVENTLOG]) {
+        if (this.props.location.query[Query.SHOW_EVENTLOG]) {
             eventlog = [
-                <common.Splitter key="splitter" axis="y"/>,
+                <Splitter key="splitter" axis="y"/>,
                 <EventLog key="eventlog"/>
             ];
         } else {
             eventlog = null;
         }
+        var children = React.cloneElement(
+            this.props.children,
+            { ref: "view", location: this.props.location }
+        );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <header.Header ref="header"/>
-                <RouteHandler ref="view" query={this.getQuery()}/>
+                <Header ref="header"/>
+                {children}
                 {eventlog}
                 <Footer/>
             </div>
@@ -108,22 +114,15 @@ var ProxyAppMain = React.createClass({
 });
 
 
-var Route = ReactRouter.Route;
-var RouteHandler = ReactRouter.RouteHandler;
-var Redirect = ReactRouter.Redirect;
-var DefaultRoute = ReactRouter.DefaultRoute;
-var NotFoundRoute = ReactRouter.NotFoundRoute;
-
+import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router";
 
-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" />
+export var app = (
+<ReactRouter history={hashHistory}>
+    <Redirect from="/" to="/flows" />
+    <Route path="/" component={ProxyAppMain}>
+        <Route path="flows" component={MainView}/>
+        <Route path="flows/:flowId/:detailTab" component={MainView}/>
+        <Route path="reports" component={Reports}/>
     </Route>
-);
-
-module.exports = {
-    routes: routes
-};
-\ No newline at end of file
+</ReactRouter>
+);
+\ No newline at end of file
diff --git a/web/src/js/components/virtualscroll.js b/web/src/js/components/virtualscroll.js
index 956e1a0b..f462fdcc 100644
--- a/web/src/js/components/virtualscroll.js
+++ b/web/src/js/components/virtualscroll.js
@@ -1,6 +1,7 @@
-var React = require("react");
+import React from "react";
+import ReactDOM from "react-dom";
 
-var VirtualScrollMixin = {
+export var VirtualScrollMixin = {
     getInitialState: function () {
         return {
             start: 0,
@@ -43,7 +44,7 @@ var VirtualScrollMixin = {
         window.removeEventListener('resize', this.onScroll);
     },
     onScroll: function () {
-        var viewport = this.getDOMNode();
+        var viewport = ReactDOM.findDOMNode(this);
         var top = viewport.scrollTop;
         var height = viewport.offsetHeight;
         var start = Math.floor(top / this.props.rowHeight);
@@ -69,7 +70,7 @@ var VirtualScrollMixin = {
         var row_top = (index * this.props.rowHeight) + head_height;
         var row_bottom = row_top + this.props.rowHeight;
 
-        var viewport = this.getDOMNode();
+        var viewport = ReactDOM.findDOMNode(this);
         var viewport_top = viewport.scrollTop;
         var viewport_bottom = viewport_top + viewport.offsetHeight;
 
@@ -81,5 +82,3 @@ var VirtualScrollMixin = {
         }
     },
 };
-
-module.exports  = VirtualScrollMixin;
-\ No newline at end of file