start of developing server side for options (#1155)

* added UI for options menu

* update UI for options menu

* update UI for options v2

* update UI for options v2

* added new btn class

* little changes

* little changes

* merge

* deleted branch

* change menu button class

* added option route + added very incomplete handler class

* moved options to settings

* added toggleinputbutton

* changed options menu

* added option for stream large bodies, but no working

* added option for stream large bodies, but no working

4 files changed, 159 insertions, 56 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index 065471d1..b1bd9c04 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -18,6 +18,7 @@ header {
 
 .filter-input {
     .make-sm-column(3, @menu-row-gutter-width);
+    margin-bottom:5px;
 }
 
 .filter-input .popover {
@@ -32,6 +33,19 @@ header {
     }
 }
 
-.menu .btn {
-    margin: 2px 2px 2px 2px;
+.menu .toggle-btn {
+    .make-xs-column(4, @menu-row-gutter-width);
+    .make-sm-column(3, @menu-row-gutter-width);
+    .make-lg-column(2, @menu-row-gutter-width);
+    margin-bottom:5px;
+}
+
+.menu .toggle-btn .btn {
+    width: 100%;
+}
+
+.menu .toggle-input-btn {
+    .make-sm-column(6, @menu-row-gutter-width);
+    .make-lg-column(4, @menu-row-gutter-width);
+    margin-bottom:5px;
 }
\ No newline at end of file
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index b257b82c..87c34ffc 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import {Key} from "../utils.js";
 import _ from "lodash"
 
 export var Splitter = React.createClass({
@@ -107,14 +108,55 @@ export var Splitter = React.createClass({
     }
 });
 
-export const ToggleComponent = (props) =>
-    <div
-      className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
-      onClick={props.onToggleChanged}>
-      <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span>
-    </div>
+export const ToggleButton = (props) =>
+    <div className="input-group toggle-btn">
+        <div
+        className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
+        onClick={props.onToggleChanged}>
+        <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}>&nbsp;{props.name}</span>
+        </div>
+    </div>;
 
-ToggleComponent.propTypes = {
+ToggleButton.propTypes = {
     name: React.PropTypes.string.isRequired,
     onToggleChanged: React.PropTypes.func.isRequired
+};
+
+export class ToggleInputButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {txt: props.txt};
+    }
+
+    render() {
+        return (
+            <div className="input-group toggle-input-btn">
+                <span
+                    className="input-group-btn"
+                    onClick={() => this.props.onToggleChanged(this.state.txt)}>
+                    <div className={"btn  " + (this.props.checked ? "btn-primary" : "btn-default")}>
+                        <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/>
+                        &nbsp;{this.props.name}
+                    </div>
+                </span>
+                <input
+                    className="form-control"
+                    placeholder={this.props.placeholder}
+                    disabled={this.props.checked}
+                    value={this.state.txt}
+                    type={this.props.inputType}
+                    onChange={e => this.setState({txt: e.target.value})}
+                    onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/>
+            </div>
+        );
+    }
 }
+
+ToggleInputButton.propTypes = {
+    name: React.PropTypes.string.isRequired,
+    txt: React.PropTypes.string.isRequired,
+    onToggleChanged: React.PropTypes.func.isRequired
+};
+
+
+
diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js
index e2d96288..8fe1081b 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,4 +1,5 @@
 import React from "react";
+import {formatSize} from "../utils.js"
 import {SettingsState} from "./common.js";
 
 Footer.propTypes = {
@@ -6,7 +7,7 @@ Footer.propTypes = {
 };
 
 export default function Footer({ settings }) {
-    const {mode, intercept} = settings;
+    const {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream} = settings;
     return (
         <footer>
             {mode && mode != "regular" && (
@@ -15,6 +16,35 @@ export default function Footer({ settings }) {
             {intercept && (
                 <span className="label label-success">Intercept: {intercept}</span>
             )}
+            {showhost && (
+                <span className="label label-success">showhost</span>
+            )}
+            {no_upstream_cert && (
+                <span className="label label-success">no-upstream-cert</span>
+            )}
+             {rawtcp && (
+                <span className="label label-success">raw-tcp</span>
+            )}
+            {!http2 && (
+                <span className="label label-success">no-http2</span>
+            )}
+            {anticache && (
+                <span className="label label-success">anticache</span>
+            )}
+            {anticomp  && (
+                <span className="label label-success">anticomp</span>
+            )}
+            {stickyauth && (
+                <span className="label label-success">stickyauth: {stickyauth}</span>
+            )}
+            {stickycookie && (
+                <span className="label label-success">stickycookie: {stickycookie}</span>
+            )}
+            {stream && (
+                <span className="label label-success">stream: {formatSize(stream)}</span>
+            )}
+
+
         </footer>
     );
 }
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 555babbb..643659c3 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -4,9 +4,10 @@ import $ from "jquery";
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
-import {ToggleComponent} from "./common.js";
+import {ToggleInputButton, ToggleButton} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
+import {SettingsState} from "./common.js";
 
 var FilterDocs = React.createClass({
     statics: {
@@ -237,57 +238,74 @@ var ViewMenu = React.createClass({
     render: function () {
       var showEventLog = this.props.query[Query.SHOW_EVENTLOG];
       return (
-        <div>
-          <ToggleComponent
-            checked={showEventLog}
-            name = "Show Eventlog"
-            onToggleChanged={this.toggleEventLog}/>
-        </div>
+          <div>
+            <div className="menu-row">
+              <ToggleButton
+                checked={showEventLog}
+                name = "Show Eventlog"
+                onToggleChanged={this.toggleEventLog}/>
+            </div>
+            <div className="clearfix"></div>
+          </div>
       );
     }
 });
 
-
-class OptionMenu extends React.Component{
-    static title = "Options";
-    constructor(props){
-      super(props);
-      this.state = {
-        options :
-        [
-          {name: "--host", checked: true},
-          {name: "--no-upstream-cert", checked: false},
-          {name: "--http2", checked: false},
-          {name: "--anticache", checked: false},
-          {name: "--anticomp", checked: false},
-          {name: "--stickycookie", checked: true},
-          {name: "--stickyauth", checked: false},
-          {name: "--stream", checked: false}
-        ]
-      }
-    }
-    setOption(entry){
-      console.log(entry.name);//TODO: get options from outside and remove state
-      entry.checked = !entry.checked;
-      this.setState({options: this.state.options});
-    }
-    render() {
-      return (
+export const OptionMenu = (props) => {
+    const {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickycookie, stickyauth, stream} = props.settings;
+    return (
         <div>
-          {this.state.options.map((entry, i) => {
-            return (
-              <ToggleComponent
-                key={i}
-                checked={entry.checked}
-                name = {entry.name}
-                onToggleChanged={() => this.setOption(entry)}/>
-            );
-          })}
+            <div className="menu-row">
+                <ToggleButton name="showhost"
+                              checked={showhost}
+                              onToggleChanged={() => SettingsActions.update({showhost: !showhost})}
+                />
+                <ToggleButton name="no_upstream_cert"
+                              checked={no_upstream_cert}
+                              onToggleChanged={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
+                />
+                <ToggleButton name="rawtcp"
+                              checked={rawtcp}
+                              onToggleChanged={() => SettingsActions.update({rawtcp: !rawtcp})}
+                />
+                <ToggleButton name="http2"
+                              checked={http2}
+                              onToggleChanged={() => SettingsActions.update({http2: !http2})}
+                />
+                <ToggleButton name="anticache"
+                              checked={anticache}
+                              onToggleChanged={() => SettingsActions.update({anticache: !anticache})}
+                />
+                <ToggleButton name="anticomp"
+                              checked={anticomp}
+                              onToggleChanged={() => SettingsActions.update({anticomp: !anticomp})}
+                />
+                <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+                    checked={Boolean(stickyauth)}
+                    txt={stickyauth || ""}
+                    onToggleChanged={txt => SettingsActions.update({stickyauth: (!stickyauth ? txt : null)})}
+                />
+                <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+                    checked={Boolean(stickycookie)}
+                    txt={stickycookie || ""}
+                    onToggleChanged={txt => SettingsActions.update({stickycookie: (!stickycookie ? txt : null)})}
+                />
+                <ToggleInputButton name="stream" placeholder="stream..."
+                    checked={Boolean(stream)}
+                    txt={stream || ""}
+                    inputType = "number"
+                    onToggleChanged={txt => SettingsActions.update({stream: (!stream ? txt : null)})}
+                />
+            </div>
+            <div className="clearfix"/>
         </div>
-      );
-    }
-}
+    );
+};
+OptionMenu.title = "Options";
 
+OptionMenu.propTypes = {
+    settings: React.PropTypes.object.isRequired
+};
 
 var ReportsMenu = React.createClass({
     statics: {
@@ -428,7 +446,6 @@ export var Header = React.createClass({
                 </nav>
                 <div className="menu">
                     <this.state.active
-                        ref="active"
                         settings={this.props.settings}
                         updateLocation={this.props.updateLocation}
                         query={this.props.query}