Basic conversion: browserified web app now works.

9 files changed, 92 insertions, 21 deletions

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