From acdd182754625fabcfc2c6ed4bdad8a63bce8ad6 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 16 Sep 2014 00:05:06 +0200 Subject: [PATCH] web: implement EventLogStore --- libmproxy/web/static/js/app.js | 257 ++++++++++---------- web/.jshintrc | 3 +- web/gulpfile.js | 1 - web/src/js/Connection.es6.js | 23 +- web/src/js/Dispatcher.es6.js | 4 + web/src/js/actions.es6.js | 7 +- web/src/js/app.js | 1 + web/src/js/components/EventLog.react.js | 21 +- web/src/js/components/Header.react.js | 14 +- web/src/js/components/ProxyApp.react.js | 16 +- web/src/js/components/TrafficTable.react.js | 33 +-- web/src/js/stores/EventLogStore.es6.js | 79 ++++-- web/src/js/stores/SettingsStore.es6.js | 23 +- web/src/js/stores/base.es6.js | 2 +- 14 files changed, 266 insertions(+), 218 deletions(-) diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 72bb5ff81..92d6c4c84 100644 --- a/libmproxy/web/static/js/app.js +++ b/libmproxy/web/static/js/app.js @@ -34,14 +34,21 @@ AppDispatcher.dispatchViewAction = function(action){ action.actionSource = PayloadSources.VIEW_ACTION; this.dispatch(action); }; +AppDispatcher.dispatchServerAction = function(action){ + action.actionSource = PayloadSources.SERVER_ACTION; + this.dispatch(action); +}; var ActionTypes = { SETTINGS_UPDATE: "SETTINGS_UPDATE", - LOG_ADD: "LOG_ADD" + EVENTLOG_ADD: "EVENTLOG_ADD" }; var SettingsActions = { update:function(settings) { - settings = _.merge({}, SettingsStore.getSettings(), 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 @@ -57,7 +64,7 @@ var SettingsActions = { return; } this.listeners[event].forEach(function(listener) { - listener(event, this); + listener.apply(this, arguments); }.bind(this)); }; EventEmitter.prototype.addListener=function(event, f) {"use strict"; @@ -76,11 +83,10 @@ var SettingsActions = { for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_SettingsStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;_SettingsStore.prototype=Object.create(____SuperProtoOfEventEmitter);_SettingsStore.prototype.constructor=_SettingsStore;_SettingsStore.__superConstructor__=EventEmitter; function _SettingsStore() {"use strict"; - /*jshint validthis: true */ EventEmitter.call(this); this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere. } - _SettingsStore.prototype.getSettings=function() {"use strict"; + _SettingsStore.prototype.getAll=function() {"use strict"; return this.settings; }; _SettingsStore.prototype.handle=function(action) {"use strict"; @@ -97,39 +103,65 @@ for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(Even var SettingsStore = new _SettingsStore(); AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); - -var SettingsMixin = { - getInitialState:function(){ - return { - settings: SettingsStore.getSettings() - }; - }, - componentDidMount:function(){ - SettingsStore.addListener("change", this._onSettingsChange); - }, - componentWillUnmount:function(){ - SettingsStore.removeListener("change", this._onSettingsChange); - }, - _onSettingsChange:function(){ - this.setState({ - settings: SettingsStore.getSettings() - }); - } -}; -for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_EventLogStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;_EventLogStore.prototype=Object.create(____SuperProtoOfEventEmitter);_EventLogStore.prototype.constructor=_EventLogStore;_EventLogStore.__superConstructor__=EventEmitter; - function _EventLogStore() {"use strict"; - /*jshint validthis: true */ +for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){EventLogView[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}var ____SuperProtoOfEventEmitter=EventEmitter===null?null:EventEmitter.prototype;EventLogView.prototype=Object.create(____SuperProtoOfEventEmitter);EventLogView.prototype.constructor=EventLogView;EventLogView.__superConstructor__=EventEmitter; + function EventLogView(store, live){"use strict"; EventEmitter.call(this); + this.$EventLogView_store = store; + this.live = live; this.log = []; + + this.add = this.add.bind(this); + + if(live){ + this.$EventLogView_store.addListener("new_entry", this.add); + } + } - _EventLogStore.prototype.getAll=function() {"use strict"; + EventLogView.prototype.close=function() {"use strict"; + this.$EventLogView_store.removeListener("new_entry", this.add); + }; + EventLogView.prototype.getAll=function() {"use strict"; return this.log; }; + + EventLogView.prototype.add=function(entry){"use strict"; + this.log.push(entry); + this.emit("change"); + }; + EventLogView.prototype.add_bulk=function(messages){"use strict"; + var log = messages; + var last_id = log[log.length-1].id; + var to_add = _.filter(this.log, function(entry) {return entry.id > last_id;}); + this.log = log.concat(to_add); + this.emit("change"); + }; + + +for(EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(EventEmitter____Key)){_EventLogStore[EventEmitter____Key]=EventEmitter[EventEmitter____Key];}}_EventLogStore.prototype=Object.create(____SuperProtoOfEventEmitter);_EventLogStore.prototype.constructor=_EventLogStore;_EventLogStore.__superConstructor__=EventEmitter;function _EventLogStore(){"use strict";if(EventEmitter!==null){EventEmitter.apply(this,arguments);}} + _EventLogStore.prototype.getView=function(since){"use strict"; + var view = new EventLogView(this, !since); + + //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; + }; _EventLogStore.prototype.handle=function(action) {"use strict"; switch (action.actionType) { - case ActionTypes.LOG_ADD: - this.log.push(action.message); - this.emit("change"); + case ActionTypes.EVENTLOG_ADD: + this.emit("new_message", action.message); break; default: return; @@ -139,36 +171,19 @@ for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(Even var EventLogStore = new _EventLogStore(); AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); - -var EventLogMixin = { - getInitialState:function(){ - return { - log: EventLog.getAll() - }; - }, - componentDidMount:function(){ - SettingsStore.addListener("change", this._onEventLogChange); - }, - componentWillUnmount:function(){ - SettingsStore.removeListener("change", this._onEventLogChange); - }, - _onEventLogChange:function(){ - this.setState({ - log: EventLog.getAll() - }); - } -}; - - function Connection(root){"use strict"; - if(!root){ + function _Connection(root) {"use strict"; + if (!root) { root = location.origin + "/api/v1"; } this.root = root; - this.openWebSocketConnection(); } - Connection.prototype.openWebSocketConnection=function(){"use strict"; - this.ws = new WebSocket(this.root.replace("http","ws") + "/ws"); + _Connection.prototype.init=function() {"use strict"; + this.openWebSocketConnection(); + }; + + _Connection.prototype.openWebSocketConnection=function() {"use strict"; + this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws"); var ws = this.ws; ws.onopen = this.onopen.bind(this); @@ -177,67 +192,33 @@ var EventLogMixin = { ws.onclose = this.onclose.bind(this); }; - Connection.prototype.onopen=function(open){"use strict"; + _Connection.prototype.onopen=function(open) {"use strict"; console.log("onopen", this, arguments); }; - Connection.prototype.onmessage=function(message){"use strict"; + _Connection.prototype.onmessage=function(message) {"use strict"; + //AppDispatcher.dispatchServerAction(...); console.log("onmessage", this, arguments); }; - Connection.prototype.onerror=function(error){"use strict"; + _Connection.prototype.onerror=function(error) {"use strict"; console.log("onerror", this, arguments); }; - Connection.prototype.onclose=function(close){"use strict"; + _Connection.prototype.onclose=function(close) {"use strict"; console.log("onclose", this, arguments); }; - - - function Connection(root){"use strict"; - if(!root){ - root = location.origin + "/api/v1"; - } - this.root = root; - this.openWebSocketConnection(); - } - - Connection.prototype.openWebSocketConnection=function(){"use strict"; - this.ws = new WebSocket(this.root.replace("http","ws") + "/ws"); - var ws = this.ws; - - ws.onopen = this.onopen.bind(this); - ws.onmessage = this.onmessage.bind(this); - ws.onerror = this.onerror.bind(this); - ws.onclose = this.onclose.bind(this); - }; - - Connection.prototype.onopen=function(open){"use strict"; - console.log("onopen", this, arguments); - }; - Connection.prototype.onmessage=function(message){"use strict"; - console.log("onmessage", this, arguments); - }; - Connection.prototype.onerror=function(error){"use strict"; - console.log("onerror", this, arguments); - }; - Connection.prototype.onclose=function(close){"use strict"; - console.log("onclose", this, arguments); - }; - - - +var Connection = new _Connection(); /** @jsx React.DOM */ var MainMenu = React.createClass({displayName: 'MainMenu', - mixins: [SettingsMixin], - handleSettingsChange:function() { + toggleEventLog:function() { SettingsActions.update({ - showEventLog: !this.state.settings.showEventLog + showEventLog: !this.props.settings.showEventLog }); }, render:function(){ return React.DOM.div(null, - React.DOM.button({className: "btn " + (this.state.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.handleSettingsChange}, + React.DOM.button({className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog}, React.DOM.i({className: "fa fa-database"}), " Display Event Log" ) ); @@ -274,7 +255,6 @@ var _Header_Entries = { }; var Header = React.createClass({displayName: 'Header', - mixins: [SettingsMixin], getInitialState:function(){ return { active: "main" @@ -297,11 +277,13 @@ var Header = React.createClass({displayName: 'Header', onClick: this.handleClick.bind(this, item)}, _Header_Entries[item].title)); } - var menu = _Header_Entries[this.state.active].menu(); + var menu = _Header_Entries[this.state.active].menu({ + settings: this.props.settings + }); return ( React.DOM.header(null, React.DOM.div({className: "title-bar"}, - "mitmproxy ", this.state.settings.version + "mitmproxy ", this.props.settings.version ), React.DOM.nav(null, React.DOM.a({href: "#", className: "special", onClick: this.handleFileClick}, " File "), @@ -316,36 +298,29 @@ var Header = React.createClass({displayName: 'Header', /** @jsx React.DOM */ var TrafficTable = React.createClass({displayName: 'TrafficTable', - /*getInitialState: function(){ + 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(); + componentDidMount:function(){ + //this.flowStore = FlowStore.getView(); + //this.flowStore.addListener("change",this.onFlowChange); }, - onFlowsChange: function(event, flows){ - //this.setState({flows: flows.getAll()}); + componentWillUnmount:function(){ + //this.flowStore.removeListener("change",this.onFlowChange); + //this.flowStore.close(); + }, + onFlowChange:function(){ + this.setState({ + //flows: this.flowStore.getAll() + }); }, render: function () { /*var flows = this.state.flows.map(function(flow){ return
{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}
; }); *//**/ - x = "WTF"; + x = "Flow"; i = 12; while(i--) x += x; return React.DOM.div(null, React.DOM.pre(null, x)); @@ -354,17 +329,36 @@ var TrafficTable = React.createClass({displayName: 'TrafficTable', /** @jsx React.DOM */ var EventLog = React.createClass({displayName: 'EventLog', + getInitialState:function(){ + return { + log: [] + }; + }, + componentDidMount:function(){ + this.log = EventLogStore.getView(); + this.log.addListener("change",this.onEventLogChange); + }, + componentWillUnmount:function(){ + this.log.removeListener("change",this.onEventLogChange); + this.log.close(); + }, + onEventLogChange:function(){ + this.setState({ + log: this.log.getAll() + }); + }, close:function(){ SettingsActions.update({ showEventLog: false }); }, render:function(){ + var messages = this.state.log.map(function(row) {return React.DOM.div({key: row.id}, row.message);}); return ( React.DOM.div({className: "eventlog"}, React.DOM.pre(null, React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), - "much log." + messages ) ) ); @@ -393,11 +387,23 @@ var Reports = React.createClass({displayName: 'Reports', var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain', - mixins: [SettingsMixin], + getInitialState:function(){ + return { settings: SettingsStore.getAll() }; + }, + componentDidMount:function(){ + SettingsStore.addListener("change", this.onSettingsChange); + }, + componentWillUnmount:function(){ + SettingsStore.removeListener("change", this.onSettingsChange); + }, + onSettingsChange:function(){ + console.log("onSettingsChange"); + this.setState({settings: SettingsStore.getAll()}); + }, render:function() { return ( React.DOM.div({id: "container"}, - Header(null), + Header({settings: this.state.settings}), React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), this.state.settings.showEventLog ? EventLog(null) : null, Footer(null) @@ -419,6 +425,7 @@ var ProxyApp = ( $(function(){ + Connection.init(); app = React.renderComponent(ProxyApp, document.body); }); diff --git a/web/.jshintrc b/web/.jshintrc index acdf04d33..d5eae0737 100644 --- a/web/.jshintrc +++ b/web/.jshintrc @@ -1,4 +1,5 @@ { "loopfunc": true, - "esnext": true + "esnext": true, + "validthis": true } \ No newline at end of file diff --git a/web/gulpfile.js b/web/gulpfile.js index 939f4fcc6..3aebcd954 100644 --- a/web/gulpfile.js +++ b/web/gulpfile.js @@ -38,7 +38,6 @@ var path = { 'js/stores/SettingsStore.es6.js', 'js/stores/EventLogStore.es6.js', 'js/Connection.es6.js', - 'js/connection.es6.js', 'js/components/Header.react.js', 'js/components/TrafficTable.react.js', 'js/components/EventLog.react.js', diff --git a/web/src/js/Connection.es6.js b/web/src/js/Connection.es6.js index 9daa82e2d..05d86c93a 100644 --- a/web/src/js/Connection.es6.js +++ b/web/src/js/Connection.es6.js @@ -1,14 +1,17 @@ -class Connection { - constructor(root){ - if(!root){ +class _Connection { + constructor(root) { + if (!root) { root = location.origin + "/api/v1"; } this.root = root; + } + + init() { this.openWebSocketConnection(); } - openWebSocketConnection(){ - this.ws = new WebSocket(this.root.replace("http","ws") + "/ws"); + openWebSocketConnection() { + this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws"); var ws = this.ws; ws.onopen = this.onopen.bind(this); @@ -17,17 +20,19 @@ class Connection { ws.onclose = this.onclose.bind(this); } - onopen(open){ + onopen(open) { console.log("onopen", this, arguments); } - onmessage(message){ + onmessage(message) { + //AppDispatcher.dispatchServerAction(...); console.log("onmessage", this, arguments); } - onerror(error){ + onerror(error) { console.log("onerror", this, arguments); } - onclose(close){ + 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 9bf708780..6ac17f9f8 100644 --- a/web/src/js/Dispatcher.es6.js +++ b/web/src/js/Dispatcher.es6.js @@ -33,4 +33,8 @@ AppDispatcher = new Dispatcher(); AppDispatcher.dispatchViewAction = function(action){ action.actionSource = PayloadSources.VIEW_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 b67700748..6b3a58709 100644 --- a/web/src/js/actions.es6.js +++ b/web/src/js/actions.es6.js @@ -1,11 +1,14 @@ var ActionTypes = { SETTINGS_UPDATE: "SETTINGS_UPDATE", - LOG_ADD: "LOG_ADD" + EVENTLOG_ADD: "EVENTLOG_ADD" }; var SettingsActions = { update(settings) { - settings = _.merge({}, SettingsStore.getSettings(), 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 diff --git a/web/src/js/app.js b/web/src/js/app.js index 2e4557afa..2049ef25b 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -1,5 +1,6 @@ $(function(){ + 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 0ecf40b1b..3a7dedc8f 100644 --- a/web/src/js/components/EventLog.react.js +++ b/web/src/js/components/EventLog.react.js @@ -1,17 +1,36 @@ /** @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 =>
{row.message}
); return ( 
             
-            much log.
+            {messages}
); diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js index d1f18a821..412024638 100644 --- a/web/src/js/components/Header.react.js +++ b/web/src/js/components/Header.react.js @@ -1,15 +1,14 @@ /** @jsx React.DOM */ var MainMenu = React.createClass({ - mixins: [SettingsMixin], - handleSettingsChange() { + toggleEventLog() { SettingsActions.update({ - showEventLog: !this.state.settings.showEventLog + showEventLog: !this.props.settings.showEventLog }); }, render(){ return
-
; @@ -46,7 +45,6 @@ var _Header_Entries = { }; var Header = React.createClass({ - mixins: [SettingsMixin], getInitialState(){ return { active: "main" @@ -69,11 +67,13 @@ var Header = React.createClass({ onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }); } - var menu = _Header_Entries[this.state.active].menu(); + var menu = _Header_Entries[this.state.active].menu({ + settings: this.props.settings + }); return (
- mitmproxy { this.state.settings.version } + mitmproxy { this.props.settings.version }