Basic conversion: browserified web app now works.

18 files changed, 185 insertions, 47 deletions

diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 7f4fd0b0..6dc11825 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -108,4 +108,10 @@ Query = {
     FILTER: "f",
     HIGHLIGHT: "h",
     SHOW_EVENTLOG: "e"
+};
+
+module.exports = {
+    ActionTypes: ActionTypes,
+    ConnectionActions: ConnectionActions
+
 };
\ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 5146cb46..f2ddc2ae 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,7 +1,15 @@
+
+var React = require("react");
+var ReactRouter = require("react-router");
+var $ = require("jquery");
+
+var Connection = require("./connection");
+var proxyapp = require("./components/proxyapp.jsx.js");
+
 $(function () {
     window.ws = new Connection("/updates");
 
-    ReactRouter.run(routes, function (Handler) {
+    ReactRouter.run(proxyapp.routes, function (Handler) {
         React.render(<Handler/>, document.body);
     });
 });
\ No newline at end of file
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 594d1a0e..0f91bde1 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -34,11 +34,11 @@ var FlowDetailNav = React.createClass({
 
         var acceptButton = null;
         if(flow.intercepted){
-            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />
+            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />;
         }
         var revertButton = null;
         if(flow.modified){
-            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />
+            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />;
         }
 
         return (
diff --git a/web/src/js/components/flowtable-columns.jsx.js b/web/src/js/components/flowtable-columns.jsx.js
index 9162e077..39c4bd8d 100644
--- a/web/src/js/components/flowtable-columns.jsx.js
+++ b/web/src/js/components/flowtable-columns.jsx.js
@@ -1,3 +1,7 @@
+var React = require("react");
+var flowutils = require("../flow/utils.js");
+var utils = require("../utils.js");
+
 var TLSColumn = React.createClass({
     statics: {
         renderTitle: function () {
@@ -29,7 +33,7 @@ var IconColumn = React.createClass({
 
         var icon;
         if (flow.response) {
-            var contentType = ResponseUtils.getContentType(flow.response);
+            var contentType = flowutils.ResponseUtils.getContentType(flow.response);
 
             //TODO: We should assign a type to the flow somewhere else.
             if (flow.response.code == 304) {
@@ -120,7 +124,7 @@ var SizeColumn = React.createClass({
         if (flow.response) {
             total += flow.response.contentLength || 0;
         }
-        var size = formatSize(total);
+        var size = utils.formatSize(total);
         return <td className="col-size">{size}</td>;
     }
 });
@@ -136,7 +140,7 @@ var TimeColumn = React.createClass({
         var flow = this.props.flow;
         var time;
         if (flow.response) {
-            time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
+            time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start));
         } else {
             time = "...";
         }
@@ -154,3 +158,7 @@ var all_columns = [
     SizeColumn,
     TimeColumn];
 
+
+module.exports = all_columns;
+
+
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index a3a37c40..90eebbc1 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -1,3 +1,8 @@
+var React = require("react");
+var utils = require("./utils.jsx.js");
+var VirtualScrollMixin = require("./virtualscroll.jsx.js");
+var flowtable_columns = require("./flowtable-columns.jsx.js");
+
 var FlowRow = React.createClass({
     render: function () {
         var flow = this.props.flow;
@@ -52,10 +57,10 @@ var FlowTableHead = React.createClass({
 var ROW_HEIGHT = 32;
 
 var FlowTable = React.createClass({
-    mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin],
+    mixins: [utils.StickyHeadMixin, utils.AutoScrollMixin, VirtualScrollMixin],
     getInitialState: function () {
         return {
-            columns: all_columns
+            columns: flowtable_columns
         };
     },
     componentWillMount: function () {
@@ -127,3 +132,5 @@ var FlowTable = React.createClass({
         );
     }
 });
+
+module.exports = FlowTable;
diff --git a/web/src/js/components/footer.jsx.js b/web/src/js/components/footer.jsx.js
index 52d52e0f..d04fb615 100644
--- a/web/src/js/components/footer.jsx.js
+++ b/web/src/js/components/footer.jsx.js
@@ -1,3 +1,5 @@
+var React = require("react");
+
 var Footer = React.createClass({
     render: function () {
         var mode = this.props.settings.mode;
@@ -11,3 +13,5 @@ var Footer = React.createClass({
         );
     }
 });
+
+module.exports = Footer;
\ No newline at end of file
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index 6470aec5..d9fd9ab0 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -1,3 +1,8 @@
+var React = require("react");
+var $ = require("jquery");
+
+var utils = require("./utils.jsx.js");
+
 var FilterDocs = React.createClass({
     statics: {
         xhr: false,
@@ -148,7 +153,7 @@ var FilterInput = React.createClass({
 });
 
 var MainMenu = React.createClass({
-    mixins: [Navigation, State],
+    mixins: [utils.Navigation, utils.State],
     statics: {
         title: "Start",
         route: "flows"
@@ -205,7 +210,7 @@ var ViewMenu = React.createClass({
         title: "View",
         route: "flows"
     },
-    mixins: [Navigation, State],
+    mixins: [utils.Navigation, utils.State],
     toggleEventLog: function () {
         var d = {};
 
@@ -334,7 +339,7 @@ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
 
 
 var Header = React.createClass({
-    mixins: [Navigation],
+    mixins: [utils.Navigation],
     getInitialState: function () {
         return {
             active: header_entries[0]
@@ -377,3 +382,8 @@ var Header = React.createClass({
         );
     }
 });
+
+
+module.exports = {
+    Header: Header
+}
\ No newline at end of file
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index af65ca1e..85ca36bb 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -1,5 +1,13 @@
+var React = require("react");
+
+var utils = require("./utils.jsx.js");
+var views = require("../store/view.js");
+var Filt = require("../filt/filt.js");
+FlowTable = require("./flowtable.jsx.js");
+
+
 var MainView = React.createClass({
-    mixins: [Navigation, State],
+    mixins: [utils.Navigation, utils.State],
     getInitialState: function () {
         this.onQueryChange(Query.FILTER, function () {
             this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
@@ -37,7 +45,7 @@ var MainView = React.createClass({
         }
     },
     openView: function (store) {
-        var view = new StoreView(store, this.getViewFilt(), this.getViewSort());
+        var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
         this.setState({
             view: view
         });
@@ -217,4 +225,6 @@ var MainView = React.createClass({
             </div>
         );
     }
-});
\ No newline at end of file
+});
+
+module.exports = MainView;
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index 92fc0e49..2431ad46 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -1,3 +1,14 @@
+var React = require("react");
+var ReactRouter = require("react-router");
+var _ = require("lodash");
+
+var utils = require("./utils.jsx.js");
+var MainView = require("./mainview.jsx.js");
+var Footer = require("./footer.jsx.js");
+var header = require("./header.jsx.js");
+var store = require("../store/store.js");
+
+
 //TODO: Move out of here, just a stub.
 var Reports = React.createClass({
     render: function () {
@@ -7,11 +18,11 @@ var Reports = React.createClass({
 
 
 var ProxyAppMain = React.createClass({
-    mixins: [State],
+    mixins: [utils.State],
     getInitialState: function () {
-        var eventStore = new EventLogStore();
-        var flowStore = new FlowStore();
-        var settings = new SettingsStore();
+        var eventStore = new store.EventLogStore();
+        var flowStore = new store.FlowStore();
+        var settings = new store.SettingsStore();
 
         // Default Settings before fetch
         _.extend(settings.dict,{
@@ -48,7 +59,7 @@ var ProxyAppMain = React.createClass({
 
         return (
             <div id="container">
-                <Header settings={this.state.settings.dict}/>
+                <header.Header settings={this.state.settings.dict}/>
                 <RouteHandler settings={this.state.settings.dict} flowStore={this.state.flowStore}/>
                 {eventlog}
                 <Footer settings={this.state.settings.dict}/>
@@ -72,4 +83,9 @@ var routes = (
         <Route name="reports" handler={Reports}/>
         <Redirect path="/" to="flows" />
     </Route>
-);
\ No newline at end of file
+);
+
+module.exports = {
+    routes: routes
+};
+
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 1714bfa9..9afcfbc7 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -1,3 +1,7 @@
+var React = require("react");
+var ReactRouter = require("react-router");
+var _ = require("lodash");
+
 //React utils. For other utilities, see ../utils.js
 
 // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example)
@@ -181,4 +185,12 @@ var Splitter = React.createClass({
             </div>
         );
     }
-});
\ No newline at end of file
+});
+
+module.exports = {
+    State: State,
+    Navigation: Navigation,
+    StickyHeadMixin: StickyHeadMixin,
+    AutoScrollMixin: AutoScrollMixin,
+    Splitter: Splitter
+}
\ No newline at end of file
diff --git a/web/src/js/components/virtualscroll.jsx.js b/web/src/js/components/virtualscroll.jsx.js
index 4f946cb4..956e1a0b 100644
--- a/web/src/js/components/virtualscroll.jsx.js
+++ b/web/src/js/components/virtualscroll.jsx.js
@@ -1,3 +1,5 @@
+var React = require("react");
+
 var VirtualScrollMixin = {
     getInitialState: function () {
         return {
@@ -78,4 +80,6 @@ var VirtualScrollMixin = {
             viewport.scrollTop = row_bottom - viewport.offsetHeight;
         }
     },
-};
\ No newline at end of file
+};
+
+module.exports  = VirtualScrollMixin;
\ No newline at end of file
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index 6ca353b3..85514c3c 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -1,24 +1,28 @@
-function Connection(url) {
 
+var actions = require("./actions.js");
+
+function Connection(url) {
     if (url[0] === "/") {
         url = location.origin.replace("http", "ws") + url;
     }
 
     var ws = new WebSocket(url);
     ws.onopen = function () {
-        ConnectionActions.open();
+        actions.ConnectionActions.open();
     };
     ws.onmessage = function (message) {
         var m = JSON.parse(message.data);
         AppDispatcher.dispatchServerAction(m);
     };
     ws.onerror = function () {
-        ConnectionActions.error();
+        actions.ConnectionActions.error();
         EventLogActions.add_event("WebSocket connection error.");
     };
     ws.onclose = function () {
-        ConnectionActions.close();
+        actions.ConnectionActions.close();
         EventLogActions.add_event("WebSocket connection closed.");
     };
     return ws;
-}
\ No newline at end of file
+}
+
+module.exports = Connection;
\ No newline at end of file
diff --git a/web/src/js/dispatcher.js b/web/src/js/dispatcher.js
index 860ade9f..9a5dd3dd 100644
--- a/web/src/js/dispatcher.js
+++ b/web/src/js/dispatcher.js
@@ -33,3 +33,7 @@ AppDispatcher.dispatchServerAction = function (action) {
     action.source = PayloadSources.SERVER;
     this.dispatch(action);
 };
+
+module.exports = {
+    AppDispatcher: AppDispatcher
+};
\ No newline at end of file
diff --git a/web/src/js/filt/filt.js b/web/src/js/filt/filt.js
index 0d93b767..095081ac 100644
--- a/web/src/js/filt/filt.js
+++ b/web/src/js/filt/filt.js
@@ -1,3 +1,4 @@
+/* jshint ignore:start */
 Filt = (function() {
   /*
    * Generated by PEG.js 0.8.0.
@@ -278,11 +279,11 @@ Filt = (function() {
           expectedDescs[i] = expected[i].description;
         }
 
-        expectedDesc = (expected.length > 1
+        expectedDesc = expected.length > 1
           ? expectedDescs.slice(0, -1).join(", ")
               + " or "
               + expectedDescs[expected.length - 1]
-          : expectedDescs[0]);
+          : expectedDescs[0];
 
         foundDesc = found ? "\"" + stringEscape(found) + "\"" : "end of input";
 
@@ -1769,4 +1770,7 @@ Filt = (function() {
     SyntaxError: SyntaxError,
     parse:       parse
   };
-})();
\ No newline at end of file
+})();
+/* jshint ignore:end */
+
+module.exports = Filt;
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index 113f0b1a..50305482 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -1,3 +1,5 @@
+var _ = require("lodash");
+
 var _MessageUtils = {
     getContentType: function (message) {
         return this.get_first_header(message, /^Content-Type$/i);
@@ -54,4 +56,9 @@ var RequestUtils = _.extend(_MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(_MessageUtils, {});
\ No newline at end of file
+var ResponseUtils = _.extend(_MessageUtils, {});
+
+
+module.exports = {
+    ResponseUtils: ResponseUtils
+}
\ No newline at end of file
diff --git a/web/src/js/store/store.js b/web/src/js/store/store.js
index ce5c0338..60913ca6 100644
--- a/web/src/js/store/store.js
+++ b/web/src/js/store/store.js
@@ -1,8 +1,17 @@
+
+var _ = require("lodash");
+var $ = require("jquery");
+
+var utils = require("../utils.js");
+var actions = require("../actions.js");
+var dispatcher = require("../dispatcher.js");
+
+
 function ListStore() {
-    EventEmitter.call(this);
+    utils.EventEmitter.call(this);
     this.reset();
 }
-_.extend(ListStore.prototype, EventEmitter.prototype, {
+_.extend(ListStore.prototype, utils.EventEmitter.prototype, {
     add: function (elem) {
         if (elem.id in this._pos_map) {
             return;
@@ -48,10 +57,10 @@ _.extend(ListStore.prototype, EventEmitter.prototype, {
 
 
 function DictStore() {
-    EventEmitter.call(this);
+    utils.EventEmitter.call(this);
     this.reset();
 }
-_.extend(DictStore.prototype, EventEmitter.prototype, {
+_.extend(DictStore.prototype, utils.EventEmitter.prototype, {
     update: function (dict) {
         _.merge(this.dict, dict);
         this.emit("recalculate");
@@ -69,7 +78,7 @@ function LiveStoreMixin(type) {
     this._fetchxhr = false;
 
     this.handle = this.handle.bind(this);
-    AppDispatcher.register(this.handle);
+    dispatcher.AppDispatcher.register(this.handle);
 
     // Avoid double-fetch on startup.
     if (!(window.ws && window.ws.readyState === WebSocket.CONNECTING)) {
@@ -78,7 +87,7 @@ function LiveStoreMixin(type) {
 }
 _.extend(LiveStoreMixin.prototype, {
     handle: function (event) {
-        if (event.type === ActionTypes.CONNECTION_OPEN) {
+        if (event.type === actions.ActionTypes.CONNECTION_OPEN) {
             return this.fetch();
         }
         if (event.type === this.type) {
@@ -93,7 +102,7 @@ _.extend(LiveStoreMixin.prototype, {
         }
     },
     close: function () {
-        AppDispatcher.unregister(this.handle);
+        dispatcher.AppDispatcher.unregister(this.handle);
     },
     fetch: function (data) {
         console.log("fetch " + this.type);
@@ -139,15 +148,15 @@ _.extend(LiveDictStore.prototype, DictStore.prototype, LiveStoreMixin.prototype)
 
 
 function FlowStore() {
-    return new LiveListStore(ActionTypes.FLOW_STORE);
+    return new LiveListStore(actions.ActionTypes.FLOW_STORE);
 }
 
 function SettingsStore() {
-    return new LiveDictStore(ActionTypes.SETTINGS_STORE);
+    return new LiveDictStore(actions.ActionTypes.SETTINGS_STORE);
 }
 
 function EventLogStore() {
-    LiveListStore.call(this, ActionTypes.EVENT_STORE);
+    LiveListStore.call(this, actions.ActionTypes.EVENT_STORE);
 }
 _.extend(EventLogStore.prototype, LiveListStore.prototype, {
     fetch: function(){
@@ -161,4 +170,11 @@ _.extend(EventLogStore.prototype, LiveListStore.prototype, {
             }.bind(this));
         }
     }
-});
\ No newline at end of file
+});
+
+
+module.exports = {
+    EventLogStore: EventLogStore,
+    SettingsStore: SettingsStore,
+    FlowStore: FlowStore
+};
\ No newline at end of file
diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js
index 9619f994..e96d1bcc 100644
--- a/web/src/js/store/view.js
+++ b/web/src/js/store/view.js
@@ -1,3 +1,7 @@
+var _ = require("lodash");
+
+var utils = require("../utils.js");
+
 function SortByStoreOrder(elem) {
     return this.store.index(elem.id);
 }
@@ -8,7 +12,7 @@ var default_filt = function(elem){
 };
 
 function StoreView(store, filt, sortfun) {
-    EventEmitter.call(this);
+    utils.EventEmitter.call(this);
     filt = filt || default_filt;
     sortfun = sortfun || default_sort;
 
@@ -26,7 +30,7 @@ function StoreView(store, filt, sortfun) {
     this.recalculate(filt, sortfun);
 }
 
-_.extend(StoreView.prototype, EventEmitter.prototype, {
+_.extend(StoreView.prototype, utils.EventEmitter.prototype, {
     close: function () {
         this.store.removeListener("add", this.add);
         this.store.removeListener("update", this.update);
@@ -96,4 +100,8 @@ _.extend(StoreView.prototype, EventEmitter.prototype, {
             }
         }
     }
-});
\ No newline at end of file
+});
+
+module.exports = {
+    StoreView: StoreView
+};
\ No newline at end of file
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index a8565243..0371810c 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -1,3 +1,6 @@
+var $ = require("jquery");
+
+
 var Key = {
     UP: 38,
     DOWN: 40,
@@ -88,7 +91,7 @@ function getCookie(name) {
 var xsrf = $.param({_xsrf: getCookie("_xsrf")});
 
 //Tornado XSRF Protection.
-jQuery.ajaxPrefilter(function (options) {
+$.ajaxPrefilter(function (options) {
     if (["post", "put", "delete"].indexOf(options.type.toLowerCase()) >= 0 && options.url[0] === "/") {
         if (options.data) {
             options.data += ("&" + xsrf);
@@ -103,4 +106,11 @@ $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
     console.error(message, arguments);
     EventLogActions.add_event(thrownError + ": " + message);
     window.alert(message);
-});
\ No newline at end of file
+});
+
+module.exports = {
+    EventEmitter: EventEmitter,
+    formatSize: formatSize,
+    formatTimeDelta: formatTimeDelta,
+    formatTimeStamp: formatTimeStamp
+};
\ No newline at end of file