From 7e40b8ab09d6d605307342fbfa21129ca15ff055 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 10 Dec 2014 15:25:40 +0100 Subject: web: implement settings store, modularize store --- web/src/js/actions.js | 16 ++--- web/src/js/components/eventlog.jsx.js | 39 +++++++----- web/src/js/components/mainview.jsx.js | 2 +- web/src/js/components/proxyapp.jsx.js | 33 ++++++---- web/src/js/store/settingstore.js | 28 --------- web/src/js/store/store.js | 115 +++++++++++++++++++++++----------- web/src/js/store/view.js | 18 +++++- 7 files changed, 147 insertions(+), 104 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 82fbcdca..2c4183e4 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -4,14 +4,9 @@ var ActionTypes = { CONNECTION_CLOSE: "connection_close", CONNECTION_ERROR: "connection_error", - // Settings - UPDATE_SETTINGS: "update_settings", - - // EventLog + // Stores + SETTINGS_STORE: "settings", EVENT_STORE: "events", - ADD_EVENT: "add_event", - - // Flow FLOW_STORE: "flows", }; @@ -42,13 +37,14 @@ var ConnectionActions = { var SettingsActions = { update: function (settings) { - settings = _.merge({}, SettingsStore.getAll(), settings); + //TODO: Update server. //Facebook Flux: We do an optimistic update on the client already. AppDispatcher.dispatchViewAction({ - type: ActionTypes.UPDATE_SETTINGS, - settings: settings + type: ActionTypes.SETTINGS_STORE, + cmd: StoreCmds.UPDATE, + data: settings }); } }; diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js index 3bd188ea..7ef369f8 100644 --- a/web/src/js/components/eventlog.jsx.js +++ b/web/src/js/components/eventlog.jsx.js @@ -25,22 +25,29 @@ var LogMessage = React.createClass({ var EventLogContents = React.createClass({ mixins: [AutoScrollMixin, VirtualScrollMixin], - getInitialState: function(){ - var store = new EventLogStore(); - var view = new StoreView(store, function(entry){ - return this.props.filter[entry.level]; - }.bind(this)); - view.addListener("add recalculate", this.onEventLogChange); + getInitialState: function () { return { - store: store, - view: view, log: [] }; }, + componentWillMount: function () { + this.openView(this.props.eventStore); + }, componentWillUnmount: function () { - this.state.view.removeListener("add recalculate", this.onEventLogChange); + this.closeView(); + }, + openView: function (store) { + var view = new StoreView(store, function (entry) { + return this.props.filter[entry.level]; + }.bind(this)); + this.setState({ + view: view + }); + + view.addListener("add recalculate", this.onEventLogChange); + }, + closeView: function () { this.state.view.close(); - this.state.store.close(); }, onEventLogChange: function () { this.setState({ @@ -48,9 +55,13 @@ var EventLogContents = React.createClass({ }); }, componentWillReceiveProps: function (nextProps) { - if(nextProps.filter !== this.props.filter){ + if (nextProps.filter !== this.props.filter) { this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update. - this.state.view.recalculate(this.state.store._list); + this.state.view.recalculate(this.props.eventStore.list); + } + if (nextProps.eventStore !== this.props.eventStore) { + this.closeView(); + this.openView(nextProps.eventStore); } }, getDefaultProps: function () { @@ -60,7 +71,7 @@ var EventLogContents = React.createClass({ placeholderTagName: "div" }; }, - renderRow: function(elem){ + renderRow: function (elem) { return ; }, render: function () { @@ -130,7 +141,7 @@ var EventLog = React.createClass({ - + ); } diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index 570962e0..17a024ee 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -56,7 +56,7 @@ var MainView = React.createClass({ } }, selectFlowRelative: function (shift) { - var flows = this.state.view.flows; + var flows = this.state.view.list; var index; if (!this.getParams().flowId) { if (shift > 0) { diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js index e2b32e55..20162ad1 100644 --- a/web/src/js/components/proxyapp.jsx.js +++ b/web/src/js/components/proxyapp.jsx.js @@ -8,27 +8,38 @@ var Reports = React.createClass({ var ProxyAppMain = React.createClass({ getInitialState: function () { + var eventStore = new EventLogStore(); + var flowStore = new FlowStore(); + var settings = new SettingsStore(); + + // Default Settings before fetch + _.extend(settings.dict,{ + showEventLog: true + }); return { - settings: SettingsStore.getAll(), - flowStore: new FlowStore() + settings: settings, + flowStore: flowStore, + eventStore: eventStore }; }, componentDidMount: function () { - SettingsStore.addListener("change", this.onSettingsChange); + this.state.settings.addListener("recalculate", this.onSettingsChange); }, componentWillUnmount: function () { - SettingsStore.removeListener("change", this.onSettingsChange); + this.state.settings.removeListener("recalculate", this.onSettingsChange); }, - onSettingsChange: function () { - this.setState({settings: SettingsStore.getAll()}); + onSettingsChange: function(){ + this.setState({ + settings: this.state.settings + }); }, render: function () { var eventlog; - if (this.state.settings.showEventLog) { + if (this.state.settings.dict.showEventLog) { eventlog = [ , - + ]; } else { eventlog = null; @@ -36,10 +47,10 @@ var ProxyAppMain = React.createClass({ return (
-
- +
+ {eventlog} -
); } diff --git a/web/src/js/store/settingstore.js b/web/src/js/store/settingstore.js index 7eef9b8f..e69de29b 100644 --- a/web/src/js/store/settingstore.js +++ b/web/src/js/store/settingstore.js @@ -1,28 +0,0 @@ -function _SettingsStore() { - EventEmitter.call(this); - - //FIXME: What do we do if we haven't requested anything from the server yet? - this.settings = { - version: "0.12", - showEventLog: true, - mode: "transparent", - }; -} -_.extend(_SettingsStore.prototype, EventEmitter.prototype, { - getAll: function () { - return this.settings; - }, - handle: function (action) { - switch (action.type) { - case ActionTypes.UPDATE_SETTINGS: - this.settings = action.settings; - this.emit("change"); - break; - default: - return; - } - } -}); - -var SettingsStore = new _SettingsStore(); -AppDispatcher.register(SettingsStore.handle.bind(SettingsStore)); diff --git a/web/src/js/store/store.js b/web/src/js/store/store.js index da288a5d..0f94e496 100644 --- a/web/src/js/store/store.js +++ b/web/src/js/store/store.js @@ -1,65 +1,68 @@ -function Store() { - this._views = []; +function ListStore() { + EventEmitter.call(this); this.reset(); } -_.extend(Store.prototype, { +_.extend(ListStore.prototype, EventEmitter.prototype, { add: function (elem) { if (elem.id in this._pos_map) { return; } - - this._pos_map[elem.id] = this._list.length; - this._list.push(elem); - for (var i = 0; i < this._views.length; i++) { - this._views[i].add(elem); - } + this._pos_map[elem.id] = this.list.length; + this.list.push(elem); + this.emit("add", elem); }, update: function (elem) { if (!(elem.id in this._pos_map)) { return; } - - this._list[this._pos_map[elem.id]] = elem; - for (var i = 0; i < this._views.length; i++) { - this._views[i].update(elem); - } + this.list[this._pos_map[elem.id]] = elem; + this.emit("update", elem); }, remove: function (elem_id) { if (!(elem.id in this._pos_map)) { return; } - - this._list.splice(this._pos_map[elem_id], 1); + this.list.splice(this._pos_map[elem_id], 1); this._build_map(); - for (var i = 0; i < this._views.length; i++) { - this._views[i].remove(elem_id); - } + this.emit("remove", elem_id); }, reset: function (elems) { - this._list = elems || []; + this.list = elems || []; this._build_map(); - for (var i = 0; i < this._views.length; i++) { - this._views[i].recalculate(this._list); - } + this.emit("recalculate", this.list); }, _build_map: function () { this._pos_map = {}; - for (var i = 0; i < this._list.length; i++) { - var elem = this._list[i]; + for (var i = 0; i < this.list.length; i++) { + var elem = this.list[i]; this._pos_map[elem.id] = i; } }, get: function (elem_id) { - return this._list[this._pos_map[elem_id]]; + return this.list[this._pos_map[elem_id]]; }, - index: function(elem_id) { + index: function (elem_id) { return this._pos_map[elem_id]; } }); -function LiveStore(type) { - Store.call(this); +function DictStore() { + EventEmitter.call(this); + this.reset(); +} +_.extend(DictStore.prototype, EventEmitter.prototype, { + update: function (dict) { + _.merge(this.dict, dict); + this.emit("recalculate", this.dict); + }, + reset: function (dict) { + this.dict = dict || {}; + this.emit("recalculate", this.dict); + } +}); + +function LiveStoreMixin(type) { this.type = type; this._updates_before_fetch = undefined; @@ -73,7 +76,7 @@ function LiveStore(type) { this.fetch(); } } -_.extend(LiveStore.prototype, Store.prototype, { +_.extend(LiveStoreMixin.prototype, { handle: function (event) { if (event.type === ActionTypes.CONNECTION_OPEN) { return this.fetch(); @@ -92,18 +95,28 @@ _.extend(LiveStore.prototype, Store.prototype, { close: function () { AppDispatcher.unregister(this.handle); }, - fetch: function () { + fetch: function (data) { console.log("fetch " + this.type); if (this._fetchxhr) { this._fetchxhr.abort(); } - this._fetchxhr = $.getJSON("/" + this.type, this.handle_fetch.bind(this)); - this._updates_before_fetch = []; // (JS: empty array is true) + this._updates_before_fetch = []; // (JS: empty array is true) + if (data) { + this.handle_fetch(data); + } else { + this._fetchxhr = $.getJSON("/" + this.type) + .done(function (message) { + this.handle_fetch(message.data); + }.bind(this)) + .fail(function () { + EventLogActions.add_event("Could not fetch " + this.type); + }.bind(this)); + } }, handle_fetch: function (data) { this._fetchxhr = false; console.log(this.type + " fetched.", this._updates_before_fetch); - this.reset(data.list); + this.reset(data); var updates = this._updates_before_fetch; this._updates_before_fetch = false; for (var i = 0; i < updates.length; i++) { @@ -112,12 +125,40 @@ _.extend(LiveStore.prototype, Store.prototype, { }, }); +function LiveListStore(type) { + ListStore.call(this); + LiveStoreMixin.call(this, type); +} +_.extend(LiveListStore.prototype, ListStore.prototype, LiveStoreMixin.prototype); + +function LiveDictStore(type) { + DictStore.call(this); + LiveStoreMixin.call(this, type); +} +_.extend(LiveDictStore.prototype, DictStore.prototype, LiveStoreMixin.prototype); + function FlowStore() { - return new LiveStore(ActionTypes.FLOW_STORE); + return new LiveListStore(ActionTypes.FLOW_STORE); } +function SettingsStore() { + return new LiveDictStore(ActionTypes.SETTINGS_STORE); +} function EventLogStore() { - return new LiveStore(ActionTypes.EVENT_STORE); -} \ No newline at end of file + LiveListStore.call(this, ActionTypes.EVENT_STORE); +} +_.extend(EventLogStore.prototype, LiveListStore.prototype, { + fetch: function(){ + LiveListStore.prototype.fetch.apply(this, arguments); + + // Make sure to display updates even if fetching all events failed. + // This way, we can send "fetch failed" log messages to the log. + if(this._fetchxhr){ + this._fetchxhr.fail(function(){ + this.handle_fetch(null); + }.bind(this)); + } + } +}); \ No newline at end of file diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js index 261429b2..56bc4dbd 100644 --- a/web/src/js/store/view.js +++ b/web/src/js/store/view.js @@ -13,13 +13,25 @@ function StoreView(store, filt, sortfun) { sortfun = sortfun || default_sort; this.store = store; - this.store._views.push(this); - this.recalculate(this.store._list, filt, sortfun); + + this.add = this.add.bind(this); + this.update = this.update.bind(this); + this.remove = this.remove.bind(this); + this.recalculate = this.recalculate.bind(this); + this.store.addListener("add", this.add); + this.store.addListener("update", this.update); + this.store.addListener("remove", this.remove); + this.store.addListener("recalculate", this.recalculate); + + this.recalculate(this.store.list, filt, sortfun); } _.extend(StoreView.prototype, EventEmitter.prototype, { close: function () { - this.store._views = _.without(this.store._views, this); + this.store.removeListener("add", this.add); + this.store.removeListener("update", this.update); + this.store.removeListener("remove", this.remove); + this.store.removeListener("recalculate", this.recalculate); }, recalculate: function (elems, filt, sortfun) { if (filt) { -- cgit v1.2.3