format javascript

15 files changed, 259 insertions, 241 deletions

diff --git a/web/gulpfile.js b/web/gulpfile.js
index 3aebcd95..6f72016b 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -98,7 +98,7 @@ gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]);
 gulp.task("jshint", function () {
     return gulp.src(["src/js/**"])
         .pipe(dont_break_on_errors())
-        .pipe(react({harmony: true}))
+        .pipe(react({harmony: false /* Do not do Harmony transformation for JSHint */}))
         .pipe(jshint())
         .pipe(jshint.reporter("jshint-stylish"))
 });
diff --git a/web/src/css/app.less b/web/src/css/app.less
index ce9d9149..a5ff516d 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -1,10 +1,10 @@
 // www.paulirish.com/2012/box-sizing-border-box-ftw/
 html {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 *, *:before, *:after {
-	box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 @import (less) "layout.less";
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
index 8ad304aa..6b0c0e61 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -1,22 +1,22 @@
 .eventlog {
 
-	flex: 0 0 auto;
+    flex: 0 0 auto;
 
-	pre {
-		margin: 0;
-		border-radius: 0;
-		height: 200px;
-		overflow: auto;
-	}
+    pre {
+        margin: 0;
+        border-radius: 0;
+        height: 200px;
+        overflow: auto;
+    }
 
-	.close-button {
-		float: right;
-		margin: -9px;
-		padding: 4px;
-		cursor: pointer;
-		color: grey;
-		&:hover {
-			color: black;
-		}
-	}
+    .close-button {
+        float: right;
+        margin: -9px;
+        padding: 4px;
+        cursor: pointer;
+        color: grey;
+        &:hover {
+            color: black;
+        }
+    }
 }
\ No newline at end of file
diff --git a/web/src/css/footer.less b/web/src/css/footer.less
index be7a1d76..c041a022 100644
--- a/web/src/css/footer.less
+++ b/web/src/css/footer.less
@@ -1,4 +1,4 @@
 footer {
-	box-shadow: 0 -1px 3px lightgray;
-	padding: 0px 10px 3px;
+    box-shadow: 0 -1px 3px lightgray;
+    padding: 0px 10px 3px;
 }
\ No newline at end of file
diff --git a/web/src/js/Connection.es6.js b/web/src/js/Connection.es6.js
index 05d86c93..7250dd39 100644
--- a/web/src/js/Connection.es6.js
+++ b/web/src/js/Connection.es6.js
@@ -5,11 +5,9 @@ class _Connection {
         }
         this.root = root;
     }
-
     init() {
         this.openWebSocketConnection();
     }
-
     openWebSocketConnection() {
         this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
         var ws = this.ws;
@@ -19,7 +17,6 @@ class _Connection {
         ws.onerror = this.onerror.bind(this);
         ws.onclose = this.onclose.bind(this);
     }
-
     onopen(open) {
         console.log("onopen", this, arguments);
     }
@@ -33,6 +30,5 @@ class _Connection {
     onclose(close) {
         console.log("onclose", this, arguments);
     }
-
 }
 var Connection = new _Connection();
\ No newline at end of file
diff --git a/web/src/js/Dispatcher.es6.js b/web/src/js/Dispatcher.es6.js
index 6ac17f9f..f1f36cc8 100644
--- a/web/src/js/Dispatcher.es6.js
+++ b/web/src/js/Dispatcher.es6.js
@@ -1,40 +1,35 @@
 const PayloadSources = {
-  VIEW_ACTION: "VIEW_ACTION",
-  SERVER_ACTION: "SERVER_ACTION"
+    VIEW_ACTION: "VIEW_ACTION",
+    SERVER_ACTION: "SERVER_ACTION"
 };
 
 class Dispatcher {
-
-  constructor() {
-    this.callbacks = [];
-  }
-
-  register(callback){
-    this.callbacks.push(callback);
-  }
-
-  unregister(callback){
-    var index = this.callbacks.indexOf(f);
-    if (index >= 0) {
-      this.callbacks.splice(this.callbacks.indexOf(f), 1);
+    constructor() {
+        this.callbacks = [];
+    }
+    register(callback) {
+        this.callbacks.push(callback);
+    }
+    unregister(callback) {
+        var index = this.callbacks.indexOf(f);
+        if (index >= 0) {
+            this.callbacks.splice(this.callbacks.indexOf(f), 1);
+        }
+    }
+    dispatch(payload) {
+        console.debug("dispatch", payload);
+        this.callbacks.forEach((callback) => {
+            callback(payload);
+        });
     }
-  }
-
-  dispatch(payload){
-    console.debug("dispatch", payload);
-    this.callbacks.forEach((callback) => {
-        callback(payload);
-    });
-  }
-
 }
 
 AppDispatcher = new Dispatcher();
-AppDispatcher.dispatchViewAction = function(action){
-  action.actionSource = PayloadSources.VIEW_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchViewAction = function(action) {
+    action.actionSource = PayloadSources.VIEW_ACTION;
+    this.dispatch(action);
 };
-AppDispatcher.dispatchServerAction = function(action){
-  action.actionSource = PayloadSources.SERVER_ACTION;
-  this.dispatch(action);
+AppDispatcher.dispatchServerAction = function(action) {
+    action.actionSource = PayloadSources.SERVER_ACTION;
+    this.dispatch(action);
 };
\ No newline at end of file
diff --git a/web/src/js/actions.es6.js b/web/src/js/actions.es6.js
index 6b3a5870..55cb4552 100644
--- a/web/src/js/actions.es6.js
+++ b/web/src/js/actions.es6.js
@@ -1,17 +1,17 @@
 var ActionTypes = {
-  SETTINGS_UPDATE: "SETTINGS_UPDATE",
-  EVENTLOG_ADD: "EVENTLOG_ADD"
+    SETTINGS_UPDATE: "SETTINGS_UPDATE",
+    EVENTLOG_ADD: "EVENTLOG_ADD"
 };
 
 var SettingsActions = {
-  update(settings) {
-  	settings = _.merge({}, SettingsStore.getAll(), settings);
-  	//TODO: Update server.
+    update(settings) {
+        settings = _.merge({}, SettingsStore.getAll(), settings);
+        //TODO: Update server.
 
-  	//Facebook Flux: We do an optimistic update on the client already.
-    AppDispatcher.dispatchViewAction({
-      actionType: ActionTypes.SETTINGS_UPDATE,
-      settings: settings
-    });
-  }
+        //Facebook Flux: We do an optimistic update on the client already.
+        AppDispatcher.dispatchViewAction({
+            actionType: ActionTypes.SETTINGS_UPDATE,
+            settings: settings
+        });
+    }
 };
\ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 2049ef25..3af4c79c 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,6 +1,6 @@
-$(function(){
+$(function() {
 
-  Connection.init();
-  app = React.renderComponent(ProxyApp, document.body);
+    Connection.init();
+    app = React.renderComponent(ProxyApp, document.body);
 
 });
\ No newline at end of file
diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js
index 3a7dedc8..6c7a7c58 100644
--- a/web/src/js/components/EventLog.react.js
+++ b/web/src/js/components/EventLog.react.js
@@ -1,37 +1,37 @@
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({
-	getInitialState(){
-		return {
-			log: []
-		};
-	},
-	componentDidMount(){
-		this.log = EventLogStore.getView();
-		this.log.addListener("change",this.onEventLogChange);
-	},
-	componentWillUnmount(){
-		this.log.removeListener("change",this.onEventLogChange);
-		this.log.close();
-	},
-	onEventLogChange(){
-		this.setState({
-			log: this.log.getAll()
-		});
-	},
-	close(){
-		SettingsActions.update({
-			showEventLog: false
-		});
-	},
-    render(){
-    	var messages = this.state.log.map(row => <div key={row.id}>{row.message}</div>);
+    getInitialState() {
+        return {
+            log: []
+        };
+    },
+    componentDidMount() {
+        this.log = EventLogStore.getView();
+        this.log.addListener("change", this.onEventLogChange);
+    },
+    componentWillUnmount() {
+        this.log.removeListener("change", this.onEventLogChange);
+        this.log.close();
+    },
+    onEventLogChange() {
+        this.setState({
+            log: this.log.getAll()
+        });
+    },
+    close() {
+        SettingsActions.update({
+            showEventLog: false
+        });
+    },
+    render() {
+        var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
         return (
             <div className="eventlog">
-            <pre>
-            <i className="fa fa-close close-button" onClick={this.close}></i>
-            {messages}
-            </pre>
+                <pre>
+                    <i className="fa fa-close close-button" onClick={this.close}></i>
+                    {messages}
+                </pre>
             </div>
         );
     }
diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js
index 41202463..0131d350 100644
--- a/web/src/js/components/Header.react.js
+++ b/web/src/js/components/Header.react.js
@@ -7,21 +7,23 @@ var MainMenu = React.createClass({
         });
     },
     render(){
-        return <div>
-            <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+        return (
+            <div>
+                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
                 <i className="fa fa-database"></i> Display Event Log
-            </button>
-            </div>;
+                </button>
+            </div>
+        );
     }
 });
 var ToolsMenu = React.createClass({
     render(){
-        return (<div>Tools Menu</div>);
+        return <div>Tools Menu</div>;
     }
 });
 var ReportsMenu = React.createClass({
     render(){
-        return (<div>Reports Menu</div>);
+        return <div>Reports Menu</div>;
     }
 });
 
@@ -58,7 +60,6 @@ var Header = React.createClass({
     handleFileClick(){
         console.log("File click");
     },
-
     render(){
         var header = [];
         for(var item in _Header_Entries){
@@ -82,6 +83,7 @@ var Header = React.createClass({
                 <div className="menu">
                     { menu }
                 </div>
-            </header>);
+            </header>
+        );
     }
 });
\ No newline at end of file
diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js
index fc21ecd8..01adb089 100644
--- a/web/src/js/components/ProxyApp.react.js
+++ b/web/src/js/components/ProxyApp.react.js
@@ -2,46 +2,46 @@
 
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
-   render(){
-       return (<div>Report Editor</div>);
-   }
+    render(){
+        return <div>Report Editor</div>;
+    }
 });
 
 
 
 var ProxyAppMain = React.createClass({
     getInitialState(){
-      return { settings: SettingsStore.getAll() };
+        return { settings: SettingsStore.getAll() };
     },
     componentDidMount(){
-      SettingsStore.addListener("change", this.onSettingsChange);
+        SettingsStore.addListener("change", this.onSettingsChange);
     },
     componentWillUnmount(){
-      SettingsStore.removeListener("change", this.onSettingsChange);
+        SettingsStore.removeListener("change", this.onSettingsChange);
     },
     onSettingsChange(){
-      console.log("onSettingsChange");
-      this.setState({settings: SettingsStore.getAll()});
+        console.log("onSettingsChange");
+        this.setState({settings: SettingsStore.getAll()});
     },
     render() {
-      return (
-        <div id="container">
-          <Header settings={this.state.settings}/>
-          <div id="main"><this.props.activeRouteHandler/></div>
-          {this.state.settings.showEventLog ? <EventLog/> : null}
-          <Footer/>
-        </div>
-      );
+        return (
+            <div id="container">
+            <Header settings={this.state.settings}/>
+            <div id="main"><this.props.activeRouteHandler/></div>
+            {this.state.settings.showEventLog ? <EventLog/> : null}
+            <Footer/>
+            </div>
+            );
     }
 });
 
 
 var ProxyApp = (
-  <ReactRouter.Routes location="hash">
-    <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
-        <ReactRouter.Route name="main" handler={TrafficTable}/>
-        <ReactRouter.Route name="reports" handler={Reports}/>
-        <ReactRouter.Redirect to="main"/>
-    </ReactRouter.Route>
-  </ReactRouter.Routes>
+    <ReactRouter.Routes location="hash">
+        <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
+            <ReactRouter.Route name="main" handler={TrafficTable}/>
+            <ReactRouter.Route name="reports" handler={Reports}/>
+            <ReactRouter.Redirect to="main"/>
+        </ReactRouter.Route>
+    </ReactRouter.Routes>
 );
diff --git a/web/src/js/components/TrafficTable.react.js b/web/src/js/components/TrafficTable.react.js
index d6a4f200..7e9e26e3 100644
--- a/web/src/js/components/TrafficTable.react.js
+++ b/web/src/js/components/TrafficTable.react.js
@@ -1,31 +1,34 @@
 /** @jsx React.DOM */
 
 var TrafficTable = React.createClass({
-    getInitialState: function(){
+    getInitialState() {
         return {
             flows: []
         };
     },
-    componentDidMount(){
+    componentDidMount() {
         //this.flowStore = FlowStore.getView();
         //this.flowStore.addListener("change",this.onFlowChange);
     },
-    componentWillUnmount(){
+    componentWillUnmount() {
         //this.flowStore.removeListener("change",this.onFlowChange);
         //this.flowStore.close();
     },
-    onFlowChange(){
+    onFlowChange() {
         this.setState({
             //flows: this.flowStore.getAll()
         });
     },
-    render: function () {
-       /*var flows = this.state.flows.map(function(flow){
-           return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
-       }); *//**/
-       x = "Flow";
-       i = 12;
-       while(i--) x += x;
-       return <div><pre>{x}</pre></div>;
-   }
+    render() {
+        /*var flows = this.state.flows.map(function(flow){
+        return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+        }); */
+        //Dummy Text for layout testing
+        x = "Flow";
+        i = 12;
+        while (i--) x += x;
+        return ( 
+            <div><pre> { x } </pre></div> 
+        );
+    }
 });
\ No newline at end of file
diff --git a/web/src/js/stores/EventLogStore.es6.js b/web/src/js/stores/EventLogStore.es6.js
index 55401690..e470f44f 100644
--- a/web/src/js/stores/EventLogStore.es6.js
+++ b/web/src/js/stores/EventLogStore.es6.js
@@ -1,67 +1,84 @@
-class EventLogView extends EventEmitter {
-	constructor(store, live){
-		super();
-		this._store = store;
-		this.live = live;
-		this.log = [];
+//
+// We have an EventLogView and an EventLogStore:
+// The basic architecture is that one can request views on the event log
+// from the store, which returns a view object and then deals with getting the data required for the view.
+// The view object is accessed by React components and distributes updates etc.
+//
+// See also: components/EventLog.react.js
 
-		this.add = this.add.bind(this);
+class EventLogView extends EventEmitter {
+    constructor(store, live) {
+        super();
+        this._store = store;
+        this.live = live;
+        this.log = [];
 
-		if(live){
-			this._store.addListener("new_entry", this.add);
-		}
-		
-	}
-	close() {
-		this._store.removeListener("new_entry", this.add);
-	}
-	getAll() {
-		return this.log;
-	}
+        this.add = this.add.bind(this);
 
-	add(entry){
-		this.log.push(entry);
-		this.emit("change");
-	}
-	add_bulk(messages){
-		var log = messages;
-		var last_id = log[log.length-1].id;
-		var to_add = _.filter(this.log, entry => entry.id > last_id);
-		this.log = log.concat(to_add);
-		this.emit("change");
-	}
+        if (live) {
+            this._store.addListener("new_entry", this.add);
+        }
+    }
+    close() {
+        this._store.removeListener("new_entry", this.add);
+    }
+    getAll() {
+        return this.log;
+    }
+    add(entry) {
+        this.log.push(entry);
+        this.emit("change");
+    }
+    add_bulk(messages) {
+        var log = messages;
+        var last_id = log[log.length - 1].id;
+        var to_add = _.filter(this.log, entry => entry.id > last_id);
+        this.log = log.concat(to_add);
+        this.emit("change");
+    }
 }
 
 class _EventLogStore extends EventEmitter {
-	getView(since){
-		var view = new EventLogView(this, !since);
-
-		//TODO: Really do bulk retrieval of last messages.
+    getView(since) {
+        var view = new EventLogView(this, !since);
 
-		window.setTimeout(function(){
-			view.add_bulk([
-				{ id:1, message: "Hello World"},
-				{ id:2, message: "I was already transmitted as an event."}
-				]);
-		}, 100);
+        //TODO: Really do bulk retrieval of last messages.
+        window.setTimeout(function() {
+            view.add_bulk([{
+                id: 1,
+                message: "Hello World"
+            }, {
+                id: 2,
+                message: "I was already transmitted as an event."
+            }]);
+        }, 100);
 
-		var id = 2;
-		view.add({id:id++, message: "I was already transmitted as an event."});
-		view.add({id:id++, message: "I was only transmitted as an event before the bulk was added.."});
-		window.setInterval(function(){
-			view.add({id: id++, message: "."});
-		}, 1000);
-		return view;
-	}
-	handle(action) {
-		switch (action.actionType) {
-			case ActionTypes.EVENTLOG_ADD:
-				this.emit("new_message", action.message);
-				break;
-			default:
-				return;
-		}
-	}
+        var id = 2;
+        view.add({
+            id: id++,
+            message: "I was already transmitted as an event."
+        });
+        view.add({
+            id: id++,
+            message: "I was only transmitted as an event before the bulk was added.."
+        });
+        window.setInterval(function() {
+            view.add({
+                id: id++,
+                message: "."
+            });
+        }, 1000);
+        return view;
+    }
+    handle(action) {
+        switch (action.actionType) {
+            case ActionTypes.EVENTLOG_ADD:
+                this.emit("new_message", action.message);
+                break;
+            default:
+                return;
+        }
+    }
 }
 var EventLogStore = new _EventLogStore();
 AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
\ No newline at end of file
diff --git a/web/src/js/stores/SettingsStore.es6.js b/web/src/js/stores/SettingsStore.es6.js
index dea4597c..2743161e 100644
--- a/web/src/js/stores/SettingsStore.es6.js
+++ b/web/src/js/stores/SettingsStore.es6.js
@@ -1,21 +1,26 @@
 class _SettingsStore extends EventEmitter {
-	constructor() {
-		super();
-		this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere.
-	}
-	getAll() {
-		return this.settings;
-	}
-	handle(action) {
-		switch (action.actionType) {
-			case ActionTypes.SETTINGS_UPDATE:
-				this.settings = action.settings;
-				this.emit("change");
-				break;
-			default:
-				return;
-		}
-	}
+    constructor() {
+        super();
+
+        //FIXME: What do we do if we haven't requested anything from the server yet?
+        this.settings = {
+            version: "0.12",
+            showEventLog: true
+        }; 
+    }
+    getAll() {
+        return this.settings;
+    }
+    handle(action) {
+        switch (action.actionType) {
+            case ActionTypes.SETTINGS_UPDATE:
+                this.settings = action.settings;
+                this.emit("change");
+                break;
+            default:
+                return;
+        }
+    }
 }
 var SettingsStore = new _SettingsStore();
-AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
+AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
\ No newline at end of file
diff --git a/web/src/js/stores/base.es6.js b/web/src/js/stores/base.es6.js
index d5d0c7ab..1dc4ca2f 100644
--- a/web/src/js/stores/base.es6.js
+++ b/web/src/js/stores/base.es6.js
@@ -1,26 +1,26 @@
 class EventEmitter {
-	constructor() {
-		this.listeners = {};
-	}
-	emit(event) {
-		if (!(event in this.listeners)) {
-			return;
-		}
-		this.listeners[event].forEach(function(listener) {
-			listener.apply(this, arguments);
-		}.bind(this));
-	}
-	addListener(event, f) {
-		this.listeners[event] = this.listeners[event] || [];
-		this.listeners[event].push(f);
-	}
-	removeListener(event, f) {
-		if (!(event in this.listeners)) {
-			return false;
-		}
-		var index = this.listeners[event].indexOf(f);
-		if (index >= 0) {
-			this.listeners[event].splice(index, 1);
-		}
-	}
+    constructor() {
+        this.listeners = {};
+    }
+    emit(event) {
+        if (!(event in this.listeners)) {
+            return;
+        }
+        this.listeners[event].forEach(function(listener) {
+            listener.apply(this, arguments);
+        }.bind(this));
+    }
+    addListener(event, f) {
+        this.listeners[event] = this.listeners[event] || [];
+        this.listeners[event].push(f);
+    }
+    removeListener(event, f) {
+        if (!(event in this.listeners)) {
+            return false;
+        }
+        var index = this.listeners[event].indexOf(f);
+        if (index >= 0) {
+            this.listeners[event].splice(index, 1);
+        }
+    }
 }
\ No newline at end of file