Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-29 02:57:19 +00:00
Code Issues Projects Releases Wiki Activity

web: implement EventLogStore

Browse Source
This commit is contained in:
Maximilian Hils 2014-09-16 00:05:06 +02:00
parent 1d9b1f79a1
commit acdd182754
14 changed files with 266 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
libmproxy/web/static/js/app.js
View File

@ -34,14 +34,21 @@ AppDispatcher.dispatchViewAction = function(action){
action.actionSource = PayloadSources.VIEW_ACTION; action.actionSource = PayloadSources.VIEW_ACTION;
this.dispatch(action); this.dispatch(action);
}; };
AppDispatcher.dispatchServerAction = function(action){
action.actionSource = PayloadSources.SERVER_ACTION;
this.dispatch(action);
};
var ActionTypes = { var ActionTypes = {
SETTINGS_UPDATE: "SETTINGS_UPDATE", SETTINGS_UPDATE: "SETTINGS_UPDATE",
LOG_ADD: "LOG_ADD" EVENTLOG_ADD: "EVENTLOG_ADD"
}; };
var SettingsActions = { var SettingsActions = {
update:function(settings) { 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({ AppDispatcher.dispatchViewAction({
actionType: ActionTypes.SETTINGS_UPDATE, actionType: ActionTypes.SETTINGS_UPDATE,
settings: settings settings: settings
@ -57,7 +64,7 @@ var SettingsActions = {
return; return;
} }
this.listeners[event].forEach(function(listener) { this.listeners[event].forEach(function(listener) {
listener(event, this); listener.apply(this, arguments);
}.bind(this)); }.bind(this));
}; };
EventEmitter.prototype.addListener=function(event, f) {"use strict"; 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; 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"; function _SettingsStore() {"use strict";
/*jshint validthis: true */
EventEmitter.call(this); EventEmitter.call(this);
this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere. 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; return this.settings;
}; };
_SettingsStore.prototype.handle=function(action) {"use strict"; _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(); var SettingsStore = new _SettingsStore();
AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
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;
var SettingsMixin = { function EventLogView(store, live){"use strict";
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 */
EventEmitter.call(this); EventEmitter.call(this);
this.$EventLogView_store = store;
this.live = live;
this.log = []; 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; 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"; _EventLogStore.prototype.handle=function(action) {"use strict";
switch (action.actionType) { switch (action.actionType) {
case ActionTypes.LOG_ADD: case ActionTypes.EVENTLOG_ADD:
this.log.push(action.message); this.emit("new_message", action.message);
this.emit("change");
break; break;
default: default:
return; return;
@ -139,36 +171,19 @@ for(var EventEmitter____Key in EventEmitter){if(EventEmitter.hasOwnProperty(Even
var EventLogStore = new _EventLogStore(); var EventLogStore = new _EventLogStore();
AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
function _Connection(root) {"use strict";
var EventLogMixin = { if (!root) {
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){
root = location.origin + "/api/v1"; root = location.origin + "/api/v1";
} }
this.root = root; this.root = root;
this.openWebSocketConnection();
} }
Connection.prototype.openWebSocketConnection=function(){"use strict"; _Connection.prototype.init=function() {"use strict";
this.ws = new WebSocket(this.root.replace("http","ws") + "/ws"); this.openWebSocketConnection();
};
_Connection.prototype.openWebSocketConnection=function() {"use strict";
this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
var ws = this.ws; var ws = this.ws;
ws.onopen = this.onopen.bind(this); ws.onopen = this.onopen.bind(this);
@ -177,67 +192,33 @@ var EventLogMixin = {
ws.onclose = this.onclose.bind(this); 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); 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); console.log("onmessage", this, arguments);
}; };
Connection.prototype.onerror=function(error){"use strict"; _Connection.prototype.onerror=function(error) {"use strict";
console.log("onerror", this, arguments); console.log("onerror", this, arguments);
}; };
Connection.prototype.onclose=function(close){"use strict"; _Connection.prototype.onclose=function(close) {"use strict";
console.log("onclose", this, arguments); console.log("onclose", this, arguments);
}; };
var Connection = new _Connection();
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);
};
/** @jsx React.DOM */ /** @jsx React.DOM */
var MainMenu = React.createClass({displayName: 'MainMenu', var MainMenu = React.createClass({displayName: 'MainMenu',
mixins: [SettingsMixin], toggleEventLog:function() {
handleSettingsChange:function() {
SettingsActions.update({ SettingsActions.update({
showEventLog: !this.state.settings.showEventLog showEventLog: !this.props.settings.showEventLog
}); });
}, },
render:function(){ render:function(){
return React.DOM.div(null, 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" React.DOM.i({className: "fa fa-database"}), " Display Event Log"
) )
); );
@ -274,7 +255,6 @@ var _Header_Entries = {
}; };
var Header = React.createClass({displayName: 'Header', var Header = React.createClass({displayName: 'Header',
mixins: [SettingsMixin],
getInitialState:function(){ getInitialState:function(){
return { return {
active: "main" active: "main"
@ -297,11 +277,13 @@ var Header = React.createClass({displayName: 'Header',
onClick: this.handleClick.bind(this, item)}, _Header_Entries[item].title)); 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 ( return (
React.DOM.header(null, React.DOM.header(null,
React.DOM.div({className: "title-bar"}, React.DOM.div({className: "title-bar"},
"mitmproxy ", this.state.settings.version "mitmproxy ", this.props.settings.version
), ),
React.DOM.nav(null, React.DOM.nav(null,
React.DOM.a({href: "#", className: "special", onClick: this.handleFileClick}, " File "), React.DOM.a({href: "#", className: "special", onClick: this.handleFileClick}, " File "),
@ -316,36 +298,29 @@ var Header = React.createClass({displayName: 'Header',
/** @jsx React.DOM */ /** @jsx React.DOM */
var TrafficTable = React.createClass({displayName: 'TrafficTable', var TrafficTable = React.createClass({displayName: 'TrafficTable',
/*getInitialState: function(){ getInitialState: function(){
return { return {
flows: [] flows: []
}; };
},*/ },
componentDidMount: function () { componentDidMount:function(){
/*var flowStore = new DummyFlowStore([]); //this.flowStore = FlowStore.getView();
this.setState({flowStore: flowStore}); //this.flowStore.addListener("change",this.onFlowChange);
},
flowStore.addChangeListener(this.onFlowsChange); componentWillUnmount:function(){
//this.flowStore.removeListener("change",this.onFlowChange);
$.getJSON("/flows.json").success(function (flows) { //this.flowStore.close();
flows.forEach(function (flow, i) { },
window.setTimeout(function () { onFlowChange:function(){
flowStore.addFlow(flow); this.setState({
}, _.random(i*400,i*400+1000)); //flows: this.flowStore.getAll()
}); });
}.bind(this));*/
},
componentWillUnmount: function(){
//this.state.flowStore.close();
},
onFlowsChange: function(event, flows){
//this.setState({flows: flows.getAll()});
}, },
render: function () { render: function () {
/*var flows = this.state.flows.map(function(flow){ /*var flows = this.state.flows.map(function(flow){
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>; return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); *//**/ }); *//**/
x = "WTF"; x = "Flow";
i = 12; i = 12;
while(i--) x += x; while(i--) x += x;
return React.DOM.div(null, React.DOM.pre(null, x)); return React.DOM.div(null, React.DOM.pre(null, x));
@ -354,17 +329,36 @@ var TrafficTable = React.createClass({displayName: 'TrafficTable',
/** @jsx React.DOM */ /** @jsx React.DOM */
var EventLog = React.createClass({displayName: 'EventLog', 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(){ close:function(){
SettingsActions.update({ SettingsActions.update({
showEventLog: false showEventLog: false
}); });
}, },
render:function(){ render:function(){
var messages = this.state.log.map(function(row) {return React.DOM.div({key: row.id}, row.message);});
return ( return (
React.DOM.div({className: "eventlog"}, React.DOM.div({className: "eventlog"},
React.DOM.pre(null, React.DOM.pre(null,
React.DOM.i({className: "fa fa-close close-button", onClick: this.close}), 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', 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() { render:function() {
return ( return (
React.DOM.div({id: "container"}, React.DOM.div({id: "container"},
Header(null), Header({settings: this.state.settings}),
React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)), React.DOM.div({id: "main"}, this.props.activeRouteHandler(null)),
this.state.settings.showEventLog ? EventLog(null) : null, this.state.settings.showEventLog ? EventLog(null) : null,
Footer(null) Footer(null)
@ -419,6 +425,7 @@ var ProxyApp = (
$(function(){ $(function(){
Connection.init();
app = React.renderComponent(ProxyApp, document.body); app = React.renderComponent(ProxyApp, document.body);
}); });

3
web/.jshintrc
View File

@ -1,4 +1,5 @@
{ {
"loopfunc": true, "loopfunc": true,
"esnext": true "esnext": true,
"validthis": true
} }

1
web/gulpfile.js
View File

@ -38,7 +38,6 @@ var path = {
'js/stores/SettingsStore.es6.js', 'js/stores/SettingsStore.es6.js',
'js/stores/EventLogStore.es6.js', 'js/stores/EventLogStore.es6.js',
'js/Connection.es6.js', 'js/Connection.es6.js',
'js/connection.es6.js',
'js/components/Header.react.js', 'js/components/Header.react.js',
'js/components/TrafficTable.react.js', 'js/components/TrafficTable.react.js',
'js/components/EventLog.react.js', 'js/components/EventLog.react.js',

23
web/src/js/Connection.es6.js
View File

@ -1,14 +1,17 @@
class Connection { class _Connection {
constructor(root){ constructor(root) {
if(!root){ if (!root) {
root = location.origin + "/api/v1"; root = location.origin + "/api/v1";
} }
this.root = root; this.root = root;
}
init() {
this.openWebSocketConnection(); this.openWebSocketConnection();
} }
openWebSocketConnection(){ openWebSocketConnection() {
this.ws = new WebSocket(this.root.replace("http","ws") + "/ws"); this.ws = new WebSocket(this.root.replace("http", "ws") + "/ws");
var ws = this.ws; var ws = this.ws;
ws.onopen = this.onopen.bind(this); ws.onopen = this.onopen.bind(this);
@ -17,17 +20,19 @@ class Connection {
ws.onclose = this.onclose.bind(this); ws.onclose = this.onclose.bind(this);
} }
onopen(open){ onopen(open) {
console.log("onopen", this, arguments); console.log("onopen", this, arguments);
} }
onmessage(message){ onmessage(message) {
//AppDispatcher.dispatchServerAction(...);
console.log("onmessage", this, arguments); console.log("onmessage", this, arguments);
} }
onerror(error){ onerror(error) {
console.log("onerror", this, arguments); console.log("onerror", this, arguments);
} }
onclose(close){ onclose(close) {
console.log("onclose", this, arguments); console.log("onclose", this, arguments);
} }
} }
var Connection = new _Connection();

4
web/src/js/Dispatcher.es6.js
View File

@ -34,3 +34,7 @@ AppDispatcher.dispatchViewAction = function(action){
action.actionSource = PayloadSources.VIEW_ACTION; action.actionSource = PayloadSources.VIEW_ACTION;
this.dispatch(action); this.dispatch(action);
}; };
AppDispatcher.dispatchServerAction = function(action){
action.actionSource = PayloadSources.SERVER_ACTION;
this.dispatch(action);
};

7
web/src/js/actions.es6.js
View File

@ -1,11 +1,14 @@
var ActionTypes = { var ActionTypes = {
SETTINGS_UPDATE: "SETTINGS_UPDATE", SETTINGS_UPDATE: "SETTINGS_UPDATE",
LOG_ADD: "LOG_ADD" EVENTLOG_ADD: "EVENTLOG_ADD"
}; };
var SettingsActions = { var SettingsActions = {
update(settings) { 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({ AppDispatcher.dispatchViewAction({
actionType: ActionTypes.SETTINGS_UPDATE, actionType: ActionTypes.SETTINGS_UPDATE,
settings: settings settings: settings

1
web/src/js/app.js
View File

@ -1,5 +1,6 @@
$(function(){ $(function(){
Connection.init();
app = React.renderComponent(ProxyApp, document.body); app = React.renderComponent(ProxyApp, document.body);
}); });

21
web/src/js/components/EventLog.react.js
View File

@ -1,17 +1,36 @@
/** @jsx React.DOM */ /** @jsx React.DOM */
var EventLog = React.createClass({ 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(){ close(){
SettingsActions.update({ SettingsActions.update({
showEventLog: false showEventLog: false
}); });
}, },
render(){ render(){
var messages = this.state.log.map(row => <div key={row.id}>{row.message}</div>);
return ( return (
<div className="eventlog"> <div className="eventlog">
<pre> <pre>
<i className="fa fa-close close-button" onClick={this.close}></i> <i className="fa fa-close close-button" onClick={this.close}></i>
much log. {messages}
</pre> </pre>
</div> </div>
); );

14
web/src/js/components/Header.react.js
View File

@ -1,15 +1,14 @@
/** @jsx React.DOM */ /** @jsx React.DOM */
var MainMenu = React.createClass({ var MainMenu = React.createClass({
mixins: [SettingsMixin], toggleEventLog() {
handleSettingsChange() {
SettingsActions.update({ SettingsActions.update({
showEventLog: !this.state.settings.showEventLog showEventLog: !this.props.settings.showEventLog
}); });
}, },
render(){ render(){
return <div> return <div>
<button className={"btn " + (this.state.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.handleSettingsChange}> <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
<i className="fa fa-database"></i> Display Event Log <i className="fa fa-database"></i> Display Event Log
</button> </button>
</div>; </div>;
@ -46,7 +45,6 @@ var _Header_Entries = {
}; };
var Header = React.createClass({ var Header = React.createClass({
mixins: [SettingsMixin],
getInitialState(){ getInitialState(){
return { return {
active: "main" active: "main"
@ -69,11 +67,13 @@ var Header = React.createClass({
onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>); onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>);
} }
var menu = _Header_Entries[this.state.active].menu(); var menu = _Header_Entries[this.state.active].menu({
settings: this.props.settings
});
return ( return (
<header> <header>
<div className="title-bar"> <div className="title-bar">
mitmproxy { this.state.settings.version } mitmproxy { this.props.settings.version }
</div> </div>
<nav> <nav>
<a href="#" className="special" onClick={this.handleFileClick}> File </a> <a href="#" className="special" onClick={this.handleFileClick}> File </a>

16
web/src/js/components/ProxyApp.react.js
View File

@ -10,11 +10,23 @@ var Reports = React.createClass({
var ProxyAppMain = React.createClass({ var ProxyAppMain = React.createClass({
mixins: [SettingsMixin], getInitialState(){
return { settings: SettingsStore.getAll() };
},
componentDidMount(){
SettingsStore.addListener("change", this.onSettingsChange);
},
componentWillUnmount(){
SettingsStore.removeListener("change", this.onSettingsChange);
},
onSettingsChange(){
console.log("onSettingsChange");
this.setState({settings: SettingsStore.getAll()});
},
render() { render() {
return ( return (
<div id="container"> <div id="container">
<Header/> <Header settings={this.state.settings}/>
<div id="main"><this.props.activeRouteHandler/></div> <div id="main"><this.props.activeRouteHandler/></div>
{this.state.settings.showEventLog ? <EventLog/> : null} {this.state.settings.showEventLog ? <EventLog/> : null}
<Footer/> <Footer/>

35
web/src/js/components/TrafficTable.react.js
View File

@ -1,36 +1,29 @@
/** @jsx React.DOM */ /** @jsx React.DOM */
var TrafficTable = React.createClass({ var TrafficTable = React.createClass({
/*getInitialState: function(){ getInitialState: function(){
return { return {
flows: [] flows: []
}; };
},*/ },
componentDidMount: function () { componentDidMount(){
/*var flowStore = new DummyFlowStore([]); //this.flowStore = FlowStore.getView();
this.setState({flowStore: flowStore}); //this.flowStore.addListener("change",this.onFlowChange);
},
flowStore.addChangeListener(this.onFlowsChange); componentWillUnmount(){
//this.flowStore.removeListener("change",this.onFlowChange);
$.getJSON("/flows.json").success(function (flows) { //this.flowStore.close();
flows.forEach(function (flow, i) { },
window.setTimeout(function () { onFlowChange(){
flowStore.addFlow(flow); this.setState({
}, _.random(i*400,i*400+1000)); //flows: this.flowStore.getAll()
}); });
}.bind(this));*/
},
componentWillUnmount: function(){
//this.state.flowStore.close();
},
onFlowsChange: function(event, flows){
//this.setState({flows: flows.getAll()});
}, },
render: function () { render: function () {
/*var flows = this.state.flows.map(function(flow){ /*var flows = this.state.flows.map(function(flow){
return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>; return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
}); *//**/ }); *//**/
x = "WTF"; x = "Flow";
i = 12; i = 12;
while(i--) x += x; while(i--) x += x;
return <div><pre>{x}</pre></div>; return <div><pre>{x}</pre></div>;

77
web/src/js/stores/EventLogStore.es6.js
View File

@ -1,17 +1,62 @@
class _EventLogStore extends EventEmitter { class EventLogView extends EventEmitter {
constructor() { constructor(store, live){
/*jshint validthis: true */
super(); super();
this._store = store;
this.live = live;
this.log = []; this.log = [];
this.add = this.add.bind(this);
if(live){
this._store.addListener("new_entry", this.add);
}
}
close() {
this._store.removeListener("new_entry", this.add);
} }
getAll() { getAll() {
return this.log; 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.
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) { handle(action) {
switch (action.actionType) { switch (action.actionType) {
case ActionTypes.LOG_ADD: case ActionTypes.EVENTLOG_ADD:
this.log.push(action.message); this.emit("new_message", action.message);
this.emit("change");
break; break;
default: default:
return; return;
@ -20,23 +65,3 @@ class _EventLogStore extends EventEmitter {
} }
var EventLogStore = new _EventLogStore(); var EventLogStore = new _EventLogStore();
AppDispatcher.register(EventLogStore.handle.bind(EventLogStore)); AppDispatcher.register(EventLogStore.handle.bind(EventLogStore));
var EventLogMixin = {
getInitialState(){
return {
log: EventLog.getAll()
};
},
componentDidMount(){
SettingsStore.addListener("change", this._onEventLogChange);
},
componentWillUnmount(){
SettingsStore.removeListener("change", this._onEventLogChange);
},
_onEventLogChange(){
this.setState({
log: EventLog.getAll()
});
}
};

23
web/src/js/stores/SettingsStore.es6.js
View File

@ -1,10 +1,9 @@
class _SettingsStore extends EventEmitter { class _SettingsStore extends EventEmitter {
constructor() { constructor() {
/*jshint validthis: true */
super(); super();
this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere. this.settings = { version: "0.12", showEventLog: true }; //FIXME: Need to get that from somewhere.
} }
getSettings() { getAll() {
return this.settings; return this.settings;
} }
handle(action) { handle(action) {
@ -20,23 +19,3 @@ class _SettingsStore extends EventEmitter {
} }
var SettingsStore = new _SettingsStore(); var SettingsStore = new _SettingsStore();
AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); AppDispatcher.register(SettingsStore.handle.bind(SettingsStore));
var SettingsMixin = {
getInitialState(){
return {
settings: SettingsStore.getSettings()
};
},
componentDidMount(){
SettingsStore.addListener("change", this._onSettingsChange);
},
componentWillUnmount(){
SettingsStore.removeListener("change", this._onSettingsChange);
},
_onSettingsChange(){
this.setState({
settings: SettingsStore.getSettings()
});
}
};

2
web/src/js/stores/base.es6.js
View File

@ -7,7 +7,7 @@ class EventEmitter {
return; return;
} }
this.listeners[event].forEach(function(listener) { this.listeners[event].forEach(function(listener) {
listener(event, this); listener.apply(this, arguments);
}.bind(this)); }.bind(this));
} }
addListener(event, f) { addListener(event, f) {