From 102bd075689892b06765fb857c89604fe9cf33e5 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 17 Sep 2014 17:30:19 +0200 Subject: implement FlowStore basics --- web/src/js/actions.js | 22 +++++- web/src/js/components/eventlog.jsx | 11 ++- web/src/js/components/flowtable.jsx | 121 +++++++++++++++++++++++++++++++++ web/src/js/components/proxyapp.jsx | 2 +- web/src/js/components/traffictable.jsx | 34 --------- web/src/js/connection.js | 2 + web/src/js/stores/flowstore.js | 74 ++++++++++++++++++++ 7 files changed, 228 insertions(+), 38 deletions(-) create mode 100644 web/src/js/components/flowtable.jsx delete mode 100644 web/src/js/components/traffictable.jsx create mode 100644 web/src/js/stores/flowstore.js (limited to 'web/src/js') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index e55a1d16..43fbfb14 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -1,6 +1,13 @@ var ActionTypes = { + //Settings UPDATE_SETTINGS: "update_settings", - ADD_EVENT: "add_event" + + //EventLog + ADD_EVENT: "add_event", + + //Flow + ADD_FLOW: "add_flow", + UPDATE_FLOW: "update_flow", }; var SettingsActions = { @@ -15,3 +22,16 @@ var SettingsActions = { }); } }; + +var EventLogActions = { + add_event: function(message, level){ + AppDispatcher.dispatchViewAction({ + type: ActionTypes.ADD_EVENT, + data: { + message: message, + level: level || "info", + source: "ui" + } + }); + } +}; \ No newline at end of file diff --git a/web/src/js/components/eventlog.jsx b/web/src/js/components/eventlog.jsx index 32fc01ee..df212177 100644 --- a/web/src/js/components/eventlog.jsx +++ b/web/src/js/components/eventlog.jsx @@ -27,8 +27,15 @@ var EventLog = React.createClass({ }, render: function () { var messages = this.state.log.map(function(row) { - return (
{row.message}
); + var indicator = null; + if(row.source === "ui"){ + indicator = ; + } + return ( +
+ { indicator } {row.message} +
); }); return 
{messages}
; } -}); +}); \ No newline at end of file diff --git a/web/src/js/components/flowtable.jsx b/web/src/js/components/flowtable.jsx new file mode 100644 index 00000000..5e9f6718 --- /dev/null +++ b/web/src/js/components/flowtable.jsx @@ -0,0 +1,121 @@ +/** @jsx React.DOM */ + +var FlowRow = React.createClass({ + render: function(){ + var flow = this.props.flow; + var columns = this.props.columns.map(function(column){ + return column({flow: flow}); + }.bind(this)); + return {columns}; + } +}); + +var FlowTableHead = React.createClass({ + render: function(){ + var columns = this.props.columns.map(function(column){ + return column.renderTitle(); + }.bind(this)); + return {columns}; + } +}); + +var FlowTableBody = React.createClass({ + render: function(){ + var rows = this.props.flows.map(function(flow){ + return + }.bind(this)); + return {rows}; + } +}); + +var PathColumn = React.createClass({ + statics: { + renderTitle: function(){ + return Path; + } + }, + render: function(){ + var flow = this.props.flow; + return {flow.request.scheme + "://" + flow.request.host + flow.request.path}; + } +}); +var MethodColumn = React.createClass({ + statics: { + renderTitle: function(){ + return Method; + } + }, + render: function(){ + var flow = this.props.flow; + return {flow.request.method}; + } +}); +var StatusColumn = React.createClass({ + statics: { + renderTitle: function(){ + return Status; + } + }, + render: function(){ + var flow = this.props.flow; + var status; + if(flow.response){ + status = flow.response.code + " " + flow.response.msg; + } else { + status = null; + } + return {status}; + } +}); +var TimeColumn = React.createClass({ + statics: { + renderTitle: function(){ + return Time; + } + }, + render: function(){ + var flow = this.props.flow; + var time; + if(flow.response){ + time = Math.round(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))+"ms"; + } else { + time = "..."; + } + return {time}; + } +}); + +var all_columns = [PathColumn, MethodColumn, StatusColumn, TimeColumn]; + +var FlowTable = React.createClass({ + getInitialState: function () { + return { + flows: [], + columns: all_columns + }; + }, + componentDidMount: function () { + this.flowStore = FlowStore.getView(); + this.flowStore.addListener("change",this.onFlowChange); + }, + 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}
; + }); + return ( + + + +
+ ); + } +}); diff --git a/web/src/js/components/proxyapp.jsx b/web/src/js/components/proxyapp.jsx index 2f1a9861..63998ffe 100644 --- a/web/src/js/components/proxyapp.jsx +++ b/web/src/js/components/proxyapp.jsx @@ -38,7 +38,7 @@ var ProxyAppMain = React.createClass({ var ProxyApp = ( - + diff --git a/web/src/js/components/traffictable.jsx b/web/src/js/components/traffictable.jsx deleted file mode 100644 index 8071b97e..00000000 --- a/web/src/js/components/traffictable.jsx +++ /dev/null @@ -1,34 +0,0 @@ -/** @jsx React.DOM */ - -var TrafficTable = React.createClass({ - getInitialState: function () { - return { - flows: [] - }; - }, - componentDidMount: function () { - //this.flowStore = FlowStore.getView(); - //this.flowStore.addListener("change",this.onFlowChange); - }, - 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}
; - }); */ - //Dummy Text for layout testing - x = "Flow"; - i = 12; - while (i--) x += x; - return ( -
Flow
- ); - } -}); diff --git a/web/src/js/connection.js b/web/src/js/connection.js index 5d464e52..640e9742 100644 --- a/web/src/js/connection.js +++ b/web/src/js/connection.js @@ -22,9 +22,11 @@ _Connection.prototype.onmessage = function (message) { AppDispatcher.dispatchServerAction(m); }; _Connection.prototype.onerror = function (error) { + EventLogActions.add_event("WebSocket Connection Error."); console.log("onerror", this, arguments); }; _Connection.prototype.onclose = function (close) { + EventLogActions.add_event("WebSocket Connection closed."); console.log("onclose", this, arguments); }; diff --git a/web/src/js/stores/flowstore.js b/web/src/js/stores/flowstore.js new file mode 100644 index 00000000..006eeb24 --- /dev/null +++ b/web/src/js/stores/flowstore.js @@ -0,0 +1,74 @@ +function FlowView(store, live) { + EventEmitter.call(this); + this._store = store; + this.live = live; + this.flows = []; + + this.add = this.add.bind(this); + this.update = this.update.bind(this); + + if (live) { + this._store.addListener(ActionTypes.ADD_FLOW, this.add); + this._store.addListener(ActionTypes.UPDATE_FLOW, this.update); + } +} + +_.extend(FlowView.prototype, EventEmitter.prototype, { + close: function () { + this._store.removeListener(ActionTypes.ADD_FLOW, this.add); + this._store.removeListener(ActionTypes.UPDATE_FLOW, this.update); + }, + getAll: function () { + return this.flows; + }, + add: function (flow) { + return this.update(flow); + }, + add_bulk: function (flows) { + //Treat all previously received updates as newer than the bulk update. + //If they weren't newer, we're about to receive an update for them very soon. + var updates = this.flows; + this.flows = flows; + updates.forEach(function(flow){ + this.update(flow); + }.bind(this)); + }, + update: function(flow){ + console.debug("FIXME: Use UUID"); + var idx = _.findIndex(this.flows, function(f){ + return flow.request.timestamp_start == f.request.timestamp_start + }); + + if(idx < 0){ + this.flows.push(flow); + } else { + this.flows[idx] = flow; + } + this.emit("change"); + }, +}); + + +function _FlowStore() { + EventEmitter.call(this); +} +_.extend(_FlowStore.prototype, EventEmitter.prototype, { + getView: function (since) { + var view = new FlowView(this, !since); + return view; + }, + handle: function (action) { + switch (action.type) { + case ActionTypes.ADD_FLOW: + case ActionTypes.UPDATE_FLOW: + this.emit(action.type, action.data); + break; + default: + return; + } + } +}); + + +var FlowStore = new _FlowStore(); +AppDispatcher.register(FlowStore.handle.bind(FlowStore)); -- cgit v1.2.3