Merge branch 'master' of ssh.github.com:cortesi/mitmproxy

web/bower.json

@@ -17,7 +17,7 @@
         "path": "src/vendor",
         "sources": {
             "lodash": "bower_components/lodash/dist/lodash.js",
-            "react": "bower_components/react/react-with-addons.js",
+            "react": ["bower_components/react/react-with-addons.js", "bower_components/react/JSXTransformer.js"],
             "react-bootstrap": "bower_components/react-bootstrap/react-bootstrap.js"
         }
     }

web/gulpfile.js

@@ -6,12 +6,21 @@ var jshint = require("gulp-jshint");
 var less = require("gulp-less");
 var livereload = require("gulp-livereload");
 var minifyCSS = require('gulp-minify-css');
+var notify = require("gulp-notify");
 var plumber = require("gulp-plumber");
+var qunit = require("gulp-qunit");
 var react = require("gulp-react");
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 
 
+var dont_break_on_errors = function(){
+    return plumber(function(error){
+        notify.onError("Error: <%= error.message %>").apply(this, arguments);
+        this.emit('end');
+    });
+};
+
 var path = {
     dist: "../libmproxy/web/",
     js: {
@@ -43,7 +52,7 @@ gulp.task("fonts", function () {
 
 function styles(files, dev) {
     return (gulp.src(files, {base: "src", cwd: "src"})
-        .pipe(plumber())
+        .pipe(dont_break_on_errors())
         .pipe(dev ? sourcemaps.init() : gutil.noop())
         .pipe(less())
         .pipe(dev ? sourcemaps.write(".", {sourceRoot: "/static"}) : gutil.noop())
@@ -62,7 +71,7 @@ gulp.task("styles-prod", ["styles-app-prod", "styles-vendor-prod"]);
 
 function scripts(files, filename, dev) {
     return gulp.src(files, {base: "src", cwd: "src"})
-        .pipe(plumber())
+        .pipe(dont_break_on_errors())
         .pipe(dev ? sourcemaps.init() : gutil.noop())
         .pipe(react({harmony: true}))
         .pipe(concat(filename))
@@ -80,7 +89,7 @@ gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]);
 
 gulp.task("jshint", function () {
     return gulp.src(["src/js/**"])
-        .pipe(plumber())
+        .pipe(dont_break_on_errors())
         .pipe(react({harmony: true}))
         .pipe(jshint())
         .pipe(jshint.reporter("jshint-stylish"))
@@ -92,6 +101,11 @@ gulp.task("html", function () {
         .pipe(livereload({ auto: false }));
 });
 
+gulp.task('test', function() {
+    return gulp.src('src/test.html')
+        .pipe(qunit({verbose: true}));
+});
+
 common = ["fonts", "html", "jshint"];
 gulp.task("dev", common.concat(["styles-dev", "scripts-dev"]));
 gulp.task("prod", common.concat(["styles-prod", "scripts-prod"]));

web/package.json

@@ -22,7 +22,9 @@
     "gulp-less": "^1.3.5",
     "gulp-livereload": "^2.1.1",
     "gulp-minify-css": "^0.3.8",
+    "gulp-notify": "^1.6.0",
     "gulp-plumber": "^0.6.5",
+    "gulp-qunit": "^0.3.3",
     "gulp-react": "^1.0.1",
     "gulp-sourcemaps": "^1.1.5",
     "gulp-uglify": "^1.0.1",

web/src/css/app.less

@@ -9,4 +9,5 @@ html {
 
 @import (less) "layout.less";
 @import (less) "header.less";
-@import (less) "footer.less";
+@import (less) "footer.less";
+

web/src/css/footer.less

@@ -1,4 +1,4 @@
 footer {
   padding: 0 10px;
-  text-align: center;
+  //text-align: center;
 }

web/src/js/datastructures.es6.js

@@ -1,26 +1,26 @@
 class EventEmitter {
     constructor(){
-        this._listeners = {};
+        this.listeners = {};
     }
     emit(event){
-        if(!(event in this._listeners)){
+        if(!(event in this.listeners)){
             return;
         }
-        this._listeners[event].forEach(function (listener) {
+        this.listeners[event].forEach(function (listener) {
             listener(event, this);
         }.bind(this));
     }
     addListener(event, f){
-        this._listeners[event] = this._listeners[event] || [];
-        this._listeners[event].push(f);
+        this.listeners[event] = this.listeners[event] || [];
+        this.listeners[event].push(f);
     }
     removeListener(event, f){
-        if(!(event in this._listeners)){
+        if(!(event in this.listeners)){
             return false;
         }
-        var index = this._listeners.indexOf(f);
+        var index = this.listeners.indexOf(f);
         if (index >= 0) {
-            this._listeners.splice(this._listeners.indexOf(f), 1);
+            this.listeners.splice(this.listeners.indexOf(f), 1);
         }
     }
 }
@@ -31,13 +31,17 @@ class FlowStore extends EventEmitter{
     constructor() {
         super();
         this.flows = [];
-        this._listeners = [];
     }
 
     getAll() {
         return this.flows;
     }
 
+    close(){
+        console.log("FlowStore.close()");
+        this.listeners = [];
+    }
+
     emitChange() {
         return this.emit(FLOW_CHANGED);
     }
@@ -57,14 +61,14 @@ class DummyFlowStore extends FlowStore {
         this.flows = flows;
     }
 
-    addFlow(f) {
-        this.flows.push(f);
+    addFlow(flow) {
+        this.flows.push(flow);
         this.emitChange();
     }
 }
 
 
-var SETTINGS_CHANGED = "settings.change";
+var SETTINGS_CHANGED = "settings.changed";
 
 class Settings extends EventEmitter {
     constructor(){

web/src/js/mitmproxy.react.js

@@ -9,16 +9,13 @@ var App = React.createClass({
     },
     componentDidMount: function () {
         //TODO: Replace DummyStore with real settings over WS (https://facebook.github.io/react/tips/initial-ajax.html)
-        //TODO: Is there a sensible place where we can store this?
-        var settings = new DummySettings({
+        var settingsStore = new DummySettings({
             version: "0.12"
         });
-        settings.addChangeListener(this._onSettingsChange);
-
-        //This would be async in some way or another.
-        this._onSettingsChange(null, settings);
+        this.setState({settingsStore: settingsStore});
+        settingsStore.addChangeListener(this.onSettingsChange);
     },
-    _onSettingsChange: function(event, settings){
+    onSettingsChange: function(event, settings){
         this.setState({settings: settings.getAll()});
     },
     render: function () {
@@ -34,12 +31,39 @@ var App = React.createClass({
     }
 });
 
-var Traffic = React.createClass({
-   render: function(){
-       var json = JSON.stringify(this.props, null, 4);
-       var i = 5;
-       while(i--) json += json;
-       return (<pre>{json}</pre>);
+var TrafficTable = React.createClass({
+    getInitialState: function(){
+        return {
+            flows: []
+        };
+    },
+    componentDidMount: function () {
+        var flowStore = new DummyFlowStore([]);
+        this.setState({flowStore: flowStore});
+
+        flowStore.addChangeListener(this.onFlowsChange);
+
+        $.getJSON("/flows.json").success(function (flows) {
+
+            flows.forEach(function (flow, i) {
+                window.setTimeout(function () {
+                    flowStore.addFlow(flow);
+                }, _.random(i*400,i*400+1000));
+            });
+
+        }.bind(this));
+    },
+    componentWillUnmount: function(){
+        this.state.flowStore.close();
+    },
+    onFlowsChange: function(event, flows){
+       this.setState({flows: flows.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>;
+       });
+       return <pre>{flows}</pre>;
    }
 });
 
@@ -52,7 +76,7 @@ var Reports = React.createClass({
 var routes = (
   <ReactRouter.Routes location="hash">
     <ReactRouter.Route name="app" path="/" handler={App}>
-        <ReactRouter.Route name="main" handler={Traffic}/>
+        <ReactRouter.Route name="main" handler={TrafficTable}/>
         <ReactRouter.Route name="reports" handler={Reports}/>
         <ReactRouter.Redirect to="main"/>
     </ReactRouter.Route>

web/src/js/tests.js

@@ -1,5 +1,3 @@
-
-
 QUnit.test("example test", function (assert) {
     assert.ok(true);
 });

web/src/test.html

@@ -3,18 +3,15 @@
 <head>
   <meta charset="utf-8">
   <title>Unit Tests</title>
-  <link rel="stylesheet" href="vendor/qunit/qunit/qunit.css" type="text/css" />
-
+  <link rel="stylesheet" href="vendor/qunit/qunit.css" type="text/css" />
+  <script src="vendor/qunit/qunit.js"></script>
+  <script src="vendor/react/JSXTransformer.js"></script>
   <script src="vendor/jquery/jquery.js"></script>
-  <script src="vendor/underscore/underscore.js"></script>
-  <script src="vendor/lodash/dist/lodash.js"></script>
-  <script src="js/datastructures.es6.js"></script>
-  <script src="js/scurve.js"></script>
-  <script src="js/entropy.js"></script>
-  <script src="js/orders.js"></script>
-  <script src="js/fileview_jsx.js"></script>
+  <script src="vendor/lodash/lodash.js"></script>
+
+  <script type="text/jsx#harmony=true" src="js/datastructures.es6.js"></script>
+
 
-  <script src="vendor/qunit/qunit/qunit.js"></script>
   <script src="js/tests.js"></script>
 </head>
 <body>