web: fight against react-router

3 files changed, 33 insertions, 9 deletions

diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 6d46cd2e..5727ec75 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/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) {
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index a23afa9b..b181b670 100644
--- a/web/src/js/components/header.jsx.js
+++ b/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>
         );
     }
@@ -70,19 +94,19 @@ var FileMenu = React.createClass({
             });
         }
     },
-    handleNewClick: function(e){
+    handleNewClick: function (e) {
         e.preventDefault();
         console.error("unimplemented: handleNewClick");
     },
-    handleOpenClick: function(e){
+    handleOpenClick: function (e) {
         e.preventDefault();
         console.error("unimplemented: handleOpenClick");
     },
-    handleSaveClick: function(e){
+    handleSaveClick: function (e) {
         e.preventDefault();
         console.error("unimplemented: handleSaveClick");
     },
-    handleShutdownClick: function(e){
+    handleShutdownClick: function (e) {
         e.preventDefault();
         console.error("unimplemented: handleShutdownClick");
     },
@@ -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 () {
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 17a024ee..6e216b6a 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/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) {