web: move eventlog state out of settings

libmproxy/web/app.py

@@ -67,7 +67,6 @@ class Settings(tornado.web.RequestHandler):
     def get(self):
         self.write(dict(
             data=dict(
-                showEventLog=True,
                 intercept=self.application.state.intercept_txt
             )
         ))

libmproxy/web/static/css/app.css

@@ -164,10 +164,10 @@ header .menu {
   background-color: rgba(193, 215, 235, 0.5) !important;
 }
 .flow-table tr.highlighted {
-  background-color: rgba(255, 204, 0, 0.4) !important;
+  background-color: rgba(255, 204, 0, 0.4);
 }
 .flow-table tr.highlighted:nth-child(even) {
-  background-color: rgba(255, 204, 0, 0.5) !important;
+  background-color: rgba(255, 204, 0, 0.5);
 }
 .flow-table td {
   overflow: hidden;

libmproxy/web/static/js/app.js

@@ -239,12 +239,14 @@ var SettingsActions = {
             data: settings
         });
 
+        /*
         //Facebook Flux: We do an optimistic update on the client already.
         AppDispatcher.dispatchViewAction({
             type: ActionTypes.SETTINGS_STORE,
             cmd: StoreCmds.UPDATE,
             data: settings
         });
+        */
     }
 };
 
@@ -263,9 +265,30 @@ var EventLogActions = {
     }
 };
 
+var FlowActions = {
+    accept: function (flow) {
+        jQuery.post("/flows/" + flow.id + "/accept");
+    },
+    accept_all: function(){
+        jQuery.post("/flows/accept");
+    },
+
+    update: function (flow) {
+        AppDispatcher.dispatchViewAction({
+            type: ActionTypes.FLOW_STORE,
+            cmd: StoreCmds.UPDATE,
+            data: flow
+        });
+    },
+    clear: function(){
+        jQuery.post("/clear");
+    }
+};
+
 Query = {
     FILTER: "f",
-    HIGHLIGHT: "h"
+    HIGHLIGHT: "h",
+    SHOW_EVENTLOG: "e"
 };
 Filt = (function() {
   /*
@@ -2704,12 +2727,18 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
         route: "flows"
     },
     toggleEventLog: function () {
-        SettingsActions.update({
+        var d = {};
-            showEventLog: !this.props.settings.showEventLog
+
-        });
+        if(this.getQuery()[Query.SHOW_EVENTLOG]){
+            d[Query.SHOW_EVENTLOG] = undefined;
+        } else {
+            d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
+        }
+
+        this.setQuery(d);
     },
     clearFlows: function () {
-        jQuery.post("/clear");
+        FlowActions.clear();
     },
     onFilterChange: function (val) {
         var d = {};
@@ -2728,10 +2757,13 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
         var filter = this.getQuery()[Query.FILTER] || "";
         var highlight = this.getQuery()[Query.HIGHLIGHT] || "";
         var intercept = this.props.settings.intercept || "";
+        var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
 
         return (
             React.createElement("div", null, 
-                React.createElement("button", {className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, 
+                React.createElement("button", {
+                    className: "btn " + (showEventLog ? "btn-primary" : "btn-default"), 
+                    onClick: this.toggleEventLog}, 
                     React.createElement("i", {className: "fa fa-database"}), 
                 " Display Event Log"
                 ), 
@@ -3694,9 +3726,9 @@ var MainView = React.createClass({displayName: 'MainView',
                 break;
             case Key.A:
                 if (e.shiftKey) {
-                    $.post("/flows/accept");
+                    FlowActions.accept_all();
                 } else if(this.getSelected()) {
-                    $.post("/flows/" + this.getSelected().id + "/accept");
+                    FlowActions.accept(this.getSelected());
                 }
                 break;
             default:
@@ -3853,9 +3885,9 @@ var EventLog = React.createClass({displayName: 'EventLog',
         };
     },
     close: function () {
-        SettingsActions.update({
+        var d = {};
-            showEventLog: false
+        d[Query.SHOW_EVENTLOG] = undefined;
-        });
+        this.setQuery(d);
     },
     toggleLevel: function (level) {
         var filter = _.extend({}, this.state.filter);
@@ -3903,6 +3935,7 @@ var Reports = React.createClass({displayName: 'Reports',
 
 
 var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
+    mixins: [State],
     getInitialState: function () {
         var eventStore = new EventLogStore();
         var flowStore = new FlowStore();
@@ -3910,7 +3943,6 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
 
         // Default Settings before fetch
         _.extend(settings.dict,{
-            showEventLog: true
         });
         return {
             settings: settings,
@@ -3933,7 +3965,7 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
     render: function () {
 
         var eventlog;
-        if (this.state.settings.dict.showEventLog) {
+        if (this.getQuery()[Query.SHOW_EVENTLOG]) {
             eventlog = [
                 React.createElement(Splitter, {key: "splitter", axis: "y"}),
                 React.createElement(EventLog, {key: "eventlog", eventStore: this.state.eventStore})

web/src/css/flowtable.less

@@ -27,10 +27,10 @@
 			background-color: hsla(209, 52%, 84%, 0.5) !important;
 		}
 		&.highlighted {
-			background-color: hsla(48, 100%, 50%, 0.4) !important;
+			background-color: hsla(48, 100%, 50%, 0.4);
 		}
 		&.highlighted:nth-child(even) {
-			background-color: hsla(48, 100%, 50%, 0.5) !important;
+			background-color: hsla(48, 100%, 50%, 0.5);
 		}
 	}
 

web/src/js/actions.js

@@ -44,12 +44,14 @@ var SettingsActions = {
             data: settings
         });
 
+        /*
         //Facebook Flux: We do an optimistic update on the client already.
         AppDispatcher.dispatchViewAction({
             type: ActionTypes.SETTINGS_STORE,
             cmd: StoreCmds.UPDATE,
             data: settings
         });
+        */
     }
 };
 
@@ -68,7 +70,28 @@ var EventLogActions = {
     }
 };
 
+var FlowActions = {
+    accept: function (flow) {
+        jQuery.post("/flows/" + flow.id + "/accept");
+    },
+    accept_all: function(){
+        jQuery.post("/flows/accept");
+    },
+
+    update: function (flow) {
+        AppDispatcher.dispatchViewAction({
+            type: ActionTypes.FLOW_STORE,
+            cmd: StoreCmds.UPDATE,
+            data: flow
+        });
+    },
+    clear: function(){
+        jQuery.post("/clear");
+    }
+};
+
 Query = {
     FILTER: "f",
-    HIGHLIGHT: "h"
+    HIGHLIGHT: "h",
+    SHOW_EVENTLOG: "e"
 };

web/src/js/components/eventlog.jsx.js

@@ -119,9 +119,9 @@ var EventLog = React.createClass({
         };
     },
     close: function () {
-        SettingsActions.update({
+        var d = {};
-            showEventLog: false
+        d[Query.SHOW_EVENTLOG] = undefined;
-        });
+        this.setQuery(d);
     },
     toggleLevel: function (level) {
         var filter = _.extend({}, this.state.filter);

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

@@ -115,12 +115,18 @@ var MainMenu = React.createClass({
         route: "flows"
     },
     toggleEventLog: function () {
-        SettingsActions.update({
+        var d = {};
-            showEventLog: !this.props.settings.showEventLog
+
-        });
+        if(this.getQuery()[Query.SHOW_EVENTLOG]){
+            d[Query.SHOW_EVENTLOG] = undefined;
+        } else {
+            d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
+        }
+
+        this.setQuery(d);
     },
     clearFlows: function () {
-        jQuery.post("/clear");
+        FlowActions.clear();
     },
     onFilterChange: function (val) {
         var d = {};
@@ -139,10 +145,13 @@ var MainMenu = React.createClass({
         var filter = this.getQuery()[Query.FILTER] || "";
         var highlight = this.getQuery()[Query.HIGHLIGHT] || "";
         var intercept = this.props.settings.intercept || "";
+        var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
 
         return (
             <div>
-                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+                <button
+                    className={"btn " + (showEventLog ? "btn-primary" : "btn-default")}
+                    onClick={this.toggleEventLog}>
                     <i className="fa fa-database"></i>
                 &nbsp;Display Event Log
                 </button>

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

@@ -145,9 +145,9 @@ var MainView = React.createClass({
                 break;
             case Key.A:
                 if (e.shiftKey) {
-                    $.post("/flows/accept");
+                    FlowActions.accept_all();
                 } else if(this.getSelected()) {
-                    $.post("/flows/" + this.getSelected().id + "/accept");
+                    FlowActions.accept(this.getSelected());
                 }
                 break;
             default:

web/src/js/components/proxyapp.jsx.js

@@ -7,6 +7,7 @@ var Reports = React.createClass({
 
 
 var ProxyAppMain = React.createClass({
+    mixins: [State],
     getInitialState: function () {
         var eventStore = new EventLogStore();
         var flowStore = new FlowStore();
@@ -14,7 +15,6 @@ var ProxyAppMain = React.createClass({
 
         // Default Settings before fetch
         _.extend(settings.dict,{
-            showEventLog: true
         });
         return {
             settings: settings,
@@ -37,7 +37,7 @@ var ProxyAppMain = React.createClass({
     render: function () {
 
         var eventlog;
-        if (this.state.settings.dict.showEventLog) {
+        if (this.getQuery()[Query.SHOW_EVENTLOG]) {
             eventlog = [
                 <Splitter key="splitter" axis="y"/>,
                 <EventLog key="eventlog" eventStore={this.state.eventStore}/>