web: fight against react-router

libmproxy/web/static/css/app.css

@@ -206,6 +206,8 @@ header .menu {
   padding: 4px 8px;
   border-radius: 5px;
   word-break: break-all;
+  max-height: 100px;
+  overflow-y: auto;
 }
 .flow-detail table {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

web/src/css/flowdetail.less

@@ -24,6 +24,8 @@
         padding: 4px 8px;
         border-radius: 5px;
         word-break: break-all;
+        max-height: 100px;
+        overflow-y: auto;
     }
 }
 

web/src/js/actions.js

@@ -63,3 +63,7 @@ var EventLogActions = {
         });
     }
 };
+
+Query = {
+    FILTER: "f"
+};

web/src/js/components/flowdetail.jsx.js

@@ -294,7 +294,7 @@ var allTabs = {
 };
 
 var FlowDetail = React.createClass({
-    mixins: [StickyHeadMixin, ReactRouter.Navigation, ReactRouter.State],
+    mixins: [StickyHeadMixin, Navigation, State],
     getTabs: function (flow) {
         var tabs = [];
         ["request", "response", "error"].forEach(function (e) {

web/src/js/components/header.jsx.js

@@ -1,4 +1,13 @@
 var MainMenu = React.createClass({
+    mixins: [Navigation, State],
+    getInitialState: function(){
+        this.onQueryChange(Query.FILTER, function(oldVal, nextVal){
+            this.setState({filter: nextVal});
+        }.bind(this));
+        return {
+            filter: this.getQuery()[Query.FILTER]
+        };
+    },
     statics: {
         title: "Traffic",
         route: "flows"
@@ -11,6 +20,13 @@ var MainMenu = React.createClass({
     clearFlows: function () {
         $.post("/flows/clear");
     },
+    setFilter: function(e){
+        e.preventDefault();
+        this.setQuery(Query.FILTER, this.state.filter);
+    },
+    onFilterChange: function(e){
+        this.setState({filter: e.target.value});
+    },
     render: function () {
         return (
             <div>
@@ -23,6 +39,14 @@ var MainMenu = React.createClass({
                     <i className="fa fa-eraser"></i>
                 &nbsp;Clear Flows
                 </button>
+                &nbsp;
+                <form className="form-inline" onSubmit={this.setFilter} style={{display:"inline-block"}}>
+                    <input type="text" placeholder="filter expression"
+                        onChange={this.onFilterChange} value={this.state.filter}
+                        className="form-control"
+                    />
+                    </form>
+
             </div>
         );
     }
@@ -129,7 +153,7 @@ var header_entries = [MainMenu, ToolsMenu, ReportsMenu];
 
 
 var Header = React.createClass({
-    mixins: [ReactRouter.Navigation],
+    mixins: [Navigation],
     getInitialState: function () {
         return {
             active: header_entries[0]
@@ -137,7 +161,7 @@ var Header = React.createClass({
     },
     handleClick: function (active, e) {
         e.preventDefault();
-        this.transitionTo(active.route);
+        this.replaceWith(active.route);
         this.setState({active: active});
     },
     render: function () {

web/src/js/components/mainview.jsx.js

@@ -1,5 +1,5 @@
 var MainView = React.createClass({
-    mixins: [ReactRouter.Navigation, ReactRouter.State],
+    mixins: [Navigation, State],
     getInitialState: function () {
         return {
             flows: []
@@ -52,7 +52,7 @@ var MainView = React.createClass({
             );
             this.refs.flowTable.scrollIntoView(flow);
         } else {
-            this.replaceWith("flows");
+            this.replaceWith("flows", {});
         }
     },
     selectFlowRelative: function (shift) {

web/src/js/utils.js

@@ -23,6 +23,50 @@ var StickyHeadMixin = {
 };
 
 
+var Navigation = _.extend({}, ReactRouter.Navigation, {
+    setQuery: function (k, v) {
+        var q = this.context.getCurrentQuery();
+        q[k] = v;
+        this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
+    },
+    replaceWith: function(routeNameOrPath, params, query) {
+        if(routeNameOrPath === undefined){
+            routeNameOrPath = this.context.getCurrentPath();
+        }
+        if(params === undefined){
+            params = this.context.getCurrentParams();
+        }
+        if(query === undefined){
+            query = this.context.getCurrentQuery();
+        }
+        ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query);
+    }
+});
+
+var State = _.extend({}, ReactRouter.State, {
+    getInitialState: function () {
+        this._query = this.context.getCurrentQuery();
+        this._queryWatches = [];
+        return null;
+    },
+    onQueryChange: function (key, callback) {
+        this._queryWatches.push({
+            key: key,
+            callback: callback
+        });
+    },
+    componentWillReceiveProps: function (nextProps, nextState) {
+        var q = this.context.getCurrentQuery();
+        for (var i = 0; i < this._queryWatches.length; i++) {
+            var watch = this._queryWatches[i];
+            if (this._query[watch.key] !== q[watch.key]) {
+                watch.callback(this._query[watch.key], q[watch.key], watch.key);
+            }
+        }
+        this._query = q;
+    }
+});
+
 var Key = {
     UP: 38,
     DOWN: 40,