connect eventlog events to ui

11 files changed, 46 insertions, 53 deletions

diff --git a/web/gulpfile.js b/web/gulpfile.js
index 4130012f..be44081d 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -32,6 +32,7 @@ var path = {
             'vendor/react-bootstrap/react-bootstrap.js'
         ],
         app: [
+            'js/utils.js',
             'js/dispatcher.js',
             'js/actions.js',
             'js/stores/base.js',
diff --git a/web/src/css/eventlog.less b/web/src/css/eventlog.less
index 6b0c0e61..993304cf 100644
--- a/web/src/css/eventlog.less
+++ b/web/src/css/eventlog.less
@@ -2,21 +2,9 @@
 
     flex: 0 0 auto;
 
-    pre {
-        margin: 0;
-        border-radius: 0;
-        height: 200px;
-        overflow: auto;
-    }
-
-    .close-button {
-        float: right;
-        margin: -9px;
-        padding: 4px;
-        cursor: pointer;
-        color: grey;
-        &:hover {
-            color: black;
-        }
-    }
+    margin: 0;
+    border-radius: 0;
+    height: 200px;
+    overflow: auto;
+    overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 35cb83da..e55a1d16 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -1,6 +1,6 @@
 var ActionTypes = {
-    SETTINGS_UPDATE: "SETTINGS_UPDATE",
-    EVENTLOG_ADD: "EVENTLOG_ADD"
+    UPDATE_SETTINGS: "update_settings",
+    ADD_EVENT: "add_event"
 };
 
 var SettingsActions = {
@@ -10,7 +10,7 @@ var SettingsActions = {
 
         //Facebook Flux: We do an optimistic update on the client already.
         AppDispatcher.dispatchViewAction({
-            actionType: ActionTypes.SETTINGS_UPDATE,
+            type: ActionTypes.UPDATE_SETTINGS,
             settings: settings
         });
     }
diff --git a/web/src/js/components/eventlog.jsx b/web/src/js/components/eventlog.jsx
index 340de8bd..32fc01ee 100644
--- a/web/src/js/components/eventlog.jsx
+++ b/web/src/js/components/eventlog.jsx
@@ -1,6 +1,7 @@
 /** @jsx React.DOM */
 
 var EventLog = React.createClass({
+    mixins:[AutoScrollMixin],
     getInitialState: function () {
         return {
             log: []
@@ -25,15 +26,9 @@ var EventLog = React.createClass({
         });
     },
     render: function () {
-        //var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
-        var messages = [];
-        return (
-            <div className="eventlog">
-                <pre>
-                    <i className="fa fa-close close-button" onClick={this.close}></i>
-                    {messages}
-                </pre>
-            </div>
-            );
+        var messages = this.state.log.map(function(row) {
+            return (<div key={row.id}>{row.message}</div>);
+        });
+        return <pre className="eventlog">{messages}</pre>;
     }
 });
diff --git a/web/src/js/components/proxyapp.jsx b/web/src/js/components/proxyapp.jsx
index fff1d8d0..2f1a9861 100644
--- a/web/src/js/components/proxyapp.jsx
+++ b/web/src/js/components/proxyapp.jsx
@@ -27,7 +27,7 @@ var ProxyAppMain = React.createClass({
             <div id="container">
                 <Header settings={this.state.settings}/>
                 <div id="main"><this.props.activeRouteHandler/></div>
-                    {this.state.settings.showEventLog ? <EventLog/> : null}
+                {this.state.settings.showEventLog ? <EventLog/> : null}
                 <Footer settings={this.state.settings}/>
             </div>
             );
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index a4369b5a..5d464e52 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -19,14 +19,7 @@ _Connection.prototype.onopen = function (open) {
 _Connection.prototype.onmessage = function (message) {
     //AppDispatcher.dispatchServerAction(...);
     var m = JSON.parse(message.data);
-    switch (m.type){
-        case "flow":
-            console.log("flow", m.data);
-            break;
-        case "event":
-            console.log("event", m.data.message)
-            break;
-    }
+    AppDispatcher.dispatchServerAction(m);
 };
 _Connection.prototype.onerror = function (error) {
     console.log("onerror", this, arguments);
diff --git a/web/src/js/dispatcher.js b/web/src/js/dispatcher.js
index 028ac4dc..65c4a4a0 100644
--- a/web/src/js/dispatcher.js
+++ b/web/src/js/dispatcher.js
@@ -1,6 +1,6 @@
 const PayloadSources = {
-    VIEW_ACTION: "VIEW_ACTION",
-    SERVER_ACTION: "SERVER_ACTION"
+    VIEW: "view",
+    SERVER: "server"
 };
 
 
@@ -26,10 +26,10 @@ Dispatcher.prototype.dispatch = function (payload) {
 
 AppDispatcher = new Dispatcher();
 AppDispatcher.dispatchViewAction = function (action) {
-    action.actionSource = PayloadSources.VIEW_ACTION;
+    action.source = PayloadSources.VIEW;
     this.dispatch(action);
 };
 AppDispatcher.dispatchServerAction = function (action) {
-    action.actionSource = PayloadSources.SERVER_ACTION;
+    action.source = PayloadSources.SERVER;
     this.dispatch(action);
 };
diff --git a/web/src/js/stores/base.js b/web/src/js/stores/base.js
index 9a2dbd64..952fa847 100644
--- a/web/src/js/stores/base.js
+++ b/web/src/js/stores/base.js
@@ -5,8 +5,9 @@ EventEmitter.prototype.emit = function (event) {
     if (!(event in this.listeners)) {
         return;
     }
+    var args = Array.prototype.slice.call(arguments, 1);
     this.listeners[event].forEach(function (listener) {
-        listener.apply(this, arguments);
+        listener.apply(this, args);
     }.bind(this));
 };
 EventEmitter.prototype.addListener = function (event, f) {
diff --git a/web/src/js/stores/eventlogstore.js b/web/src/js/stores/eventlogstore.js
index 54c45939..976f7524 100644
--- a/web/src/js/stores/eventlogstore.js
+++ b/web/src/js/stores/eventlogstore.js
@@ -7,19 +7,19 @@
 // See also: components/EventLog.react.js
 function EventLogView(store, live) {
     EventEmitter.call(this);
-    this.$EventLogView_store = store;
+    this._store = store;
     this.live = live;
     this.log = [];
 
     this.add = this.add.bind(this);
 
     if (live) {
-        this.$EventLogView_store.addListener("new_entry", this.add);
+        this._store.addListener(ActionTypes.ADD_EVENT, this.add);
     }
 }
 _.extend(EventLogView.prototype, EventEmitter.prototype, {
     close: function () {
-        this.$EventLogView_store.removeListener("new_entry", this.add);
+        this._store.removeListener(ActionTypes.ADD_EVENT, this.add);
     },
     getAll: function () {
         return this.log;
@@ -46,7 +46,8 @@ function _EventLogStore() {
 _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
     getView: function (since) {
         var view = new EventLogView(this, !since);
-
+        return view;
+        /*
         //TODO: Really do bulk retrieval of last messages.
         window.setTimeout(function () {
             view.add_bulk([
@@ -77,11 +78,12 @@ _.extend(_EventLogStore.prototype, EventEmitter.prototype, {
             });
         }, 1000);
         return view;
+        */
     },
     handle: function (action) {
-        switch (action.actionType) {
-            case ActionTypes.EVENTLOG_ADD:
-                this.emit("new_message", action.message);
+        switch (action.type) {
+            case ActionTypes.ADD_EVENT:
+                this.emit(ActionTypes.ADD_EVENT, action.data);
                 break;
             default:
                 return;
diff --git a/web/src/js/stores/settingstore.js b/web/src/js/stores/settingstore.js
index 0ba7d800..7eef9b8f 100644
--- a/web/src/js/stores/settingstore.js
+++ b/web/src/js/stores/settingstore.js
@@ -13,8 +13,8 @@ _.extend(_SettingsStore.prototype, EventEmitter.prototype, {
         return this.settings;
     },
     handle: function (action) {
-        switch (action.actionType) {
-            case ActionTypes.SETTINGS_UPDATE:
+        switch (action.type) {
+            case ActionTypes.UPDATE_SETTINGS:
                 this.settings = action.settings;
                 this.emit("change");
                 break;
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
new file mode 100644
index 00000000..39ad92fb
--- /dev/null
+++ b/web/src/js/utils.js
@@ -0,0 +1,13 @@
+// http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example)
+var AutoScrollMixin = {
+    componentWillUpdate: function () {
+        var node = this.getDOMNode();
+        this._shouldScrollBottom = node.scrollTop + node.clientHeight === node.scrollHeight;
+    },
+    componentDidUpdate: function () {
+        if (this._shouldScrollBottom) {
+            var node = this.getDOMNode();
+            node.scrollTop = node.scrollHeight;
+        }
+    },
+};