always use the app dispatcher

6 files changed, 91 insertions, 76 deletions

diff --git a/web/src/js/actions.js b/web/src/js/actions.js
index 3e7510ad..28bb58b8 100644
--- a/web/src/js/actions.js
+++ b/web/src/js/actions.js
@@ -1,13 +1,38 @@
 var ActionTypes = {
-    //Settings
+    // Connection
+    CONNECTION_OPEN: "connection_open",
+    CONNECTION_CLOSE: "connection_close",
+    CONNECTION_ERROR: "connection_error",
+
+    // Settings
     UPDATE_SETTINGS: "update_settings",
 
-    //EventLog
+    // EventLog
     ADD_EVENT: "add_event",
 
-    //Flow
+    // Flow
     ADD_FLOW: "add_flow",
     UPDATE_FLOW: "update_flow",
+    REMOVE_FLOW: "remove_flow",
+    RESET_FLOWS: "reset_flows",
+};
+
+var ConnectionActions = {
+    open: function () {
+        AppDispatcher.dispatchViewAction({
+            type: ActionTypes.CONNECTION_OPEN
+        });
+    },
+    close: function () {
+        AppDispatcher.dispatchViewAction({
+            type: ActionTypes.CONNECTION_CLOSE
+        });
+    },
+    error: function () {
+        AppDispatcher.dispatchViewAction({
+            type: ActionTypes.CONNECTION_ERROR
+        });
+    }
 };
 
 var SettingsActions = {
@@ -23,7 +48,7 @@ var SettingsActions = {
     }
 };
 
-var event_id = 0;
+var EventLogActions_event_id = 0;
 var EventLogActions = {
     add_event: function (message) {
         AppDispatcher.dispatchViewAction({
@@ -31,7 +56,7 @@ var EventLogActions = {
             data: {
                 message: message,
                 level: "web",
-                id: "viewAction-" + event_id++
+                id: "viewAction-" + EventLogActions_event_id++
             }
         });
     }
diff --git a/web/src/js/app.js b/web/src/js/app.js
index b5d50d34..5146cb46 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,10 +1,7 @@
 $(function () {
+    window.ws = new Connection("/updates");
+
     ReactRouter.run(routes, function (Handler) {
         React.render(<Handler/>, document.body);
     });
-    var UpdateConnection = new Connection("/updates");
-    UpdateConnection.onmessage = function (message) {
-        var m = JSON.parse(message.data);
-        AppDispatcher.dispatchServerAction(m);
-    };
 });
\ No newline at end of file
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 2bda5b80..6d46cd2e 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -306,7 +306,7 @@ var FlowDetail = React.createClass({
         return tabs;
     },
     nextTab: function (i) {
-        var tabs = this.getTabs();
+        var tabs = this.getTabs(this.props.flow);
         var currentIndex = tabs.indexOf(this.getParams().detailTab);
         // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
         var nextIndex = (currentIndex + i + tabs.length) % tabs.length;
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index d5066b1a..c7c9ee9b 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -24,7 +24,7 @@ var MainView = React.createClass({
         this.forceUpdate();
         var selected = this.getSelected();
         if(selected){
-            this.refs.flowTable.scrollIntoView();
+            this.refs.flowTable.scrollIntoView(selected);
         }
     },
     onUpdate: function (flow) {
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index d511270d..6ca353b3 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -1,38 +1,24 @@
 function Connection(url) {
-    if (url[0] != "/") {
-        this.url = url;
-    } else {
-        this.url = location.origin.replace("http", "ws") + url;
+
+    if (url[0] === "/") {
+        url = location.origin.replace("http", "ws") + url;
     }
-    var ws = new WebSocket(this.url);
+
+    var ws = new WebSocket(url);
     ws.onopen = function () {
-        this.onopen.apply(this, arguments);
-    }.bind(this);
-    ws.onmessage = function () {
-        this.onmessage.apply(this, arguments);
-    }.bind(this);
+        ConnectionActions.open();
+    };
+    ws.onmessage = function (message) {
+        var m = JSON.parse(message.data);
+        AppDispatcher.dispatchServerAction(m);
+    };
     ws.onerror = function () {
-        this.onerror.apply(this, arguments);
-    }.bind(this);
+        ConnectionActions.error();
+        EventLogActions.add_event("WebSocket connection error.");
+    };
     ws.onclose = function () {
-        this.onclose.apply(this, arguments);
-    }.bind(this);
-    this.ws = ws;
-}
-Connection.prototype.onopen = function (open) {
-    console.debug("onopen", this, arguments);
-};
-Connection.prototype.onmessage = function (message) {
-    console.warn("onmessage (not implemented)", this, message.data);
-};
-Connection.prototype.onerror = function (error) {
-    EventLogActions.add_event("WebSocket Connection Error.");
-    console.debug("onerror", this, arguments);
-};
-Connection.prototype.onclose = function (close) {
-    EventLogActions.add_event("WebSocket Connection closed.");
-    console.debug("onclose", this, arguments);
-};
-Connection.prototype.close = function () {
-    this.ws.close();
-};
\ No newline at end of file
+        ConnectionActions.close();
+        EventLogActions.add_event("WebSocket connection closed.");
+    };
+    return ws;
+}
\ No newline at end of file
diff --git a/web/src/js/stores/flowstore.js b/web/src/js/stores/flowstore.js
index 1034bd53..4110ea7f 100644
--- a/web/src/js/stores/flowstore.js
+++ b/web/src/js/stores/flowstore.js
@@ -1,4 +1,4 @@
-function FlowStore(endpoint) {
+function FlowStore() {
     this._views = [];
     this.reset();
 }
@@ -43,21 +43,46 @@ _.extend(FlowStore.prototype, {
 });
 
 
-function LiveFlowStore(endpoint) {
+function LiveFlowStore() {
     FlowStore.call(this);
     this.updates_before_fetch = undefined;
     this._fetchxhr = false;
-    this.endpoint = endpoint || "/flows";
-    this.conn = new Connection(this.endpoint + "/updates");
-    this.conn.onopen = this._onopen.bind(this);
-    this.conn.onmessage = function (e) {
-        var message = JSON.parse(e.data);
-        this.handle_update(message.type, message.data);
-    }.bind(this);
+
+    this.handle = this.handle.bind(this);
+    AppDispatcher.register(this.handle);
+
+    // Avoid double-fetch on startup.
+    if(!(window.ws && window.ws.readyState === WebSocket.CONNECTING)) {
+        this.fetch();
+    }
 }
 _.extend(LiveFlowStore.prototype, FlowStore.prototype, {
+    handle: function (event) {
+        switch (event.type) {
+            case ActionTypes.CONNECTION_OPEN:
+            case ActionTypes.RESET_FLOWS:
+                this.fetch();
+                break;
+            case ActionTypes.ADD_FLOW:
+            case ActionTypes.UPDATE_FLOW:
+            case ActionTypes.REMOVE_FLOW:
+                if (this.updates_before_fetch) {
+                    console.log("defer update", type, data);
+                    this.updates_before_fetch.push(event);
+                } else {
+                    if(event.type === ActionTypes.ADD_FLOW){
+                        this.add(event.data);
+                    } else if (event.type === ActionTypes.UPDATE_FLOW){
+                        this.update(event.data);
+                    } else {
+                        this.remove(event.data);
+                    }
+                }
+                break;
+        }
+    },
     close: function () {
-        this.conn.close();
+        AppDispatcher.unregister(this.handle);
     },
     add: function (flow) {
         // Make sure that deferred adds don't add an element twice.
@@ -65,32 +90,14 @@ _.extend(LiveFlowStore.prototype, FlowStore.prototype, {
             FlowStore.prototype.add.call(this, flow);
         }
     },
-    _onopen: function () {
-        //Update stream openend, fetch list of flows.
-        console.log("Update Connection opened, fetching flows...");
-        this.fetch();
-    },
     fetch: function () {
+        console.log("fetch");
         if (this._fetchxhr) {
             this._fetchxhr.abort();
         }
-        this._fetchxhr = $.getJSON(this.endpoint, this.handle_fetch.bind(this));
+        this._fetchxhr = $.getJSON("/flows", this.handle_fetch.bind(this));
         this.updates_before_fetch = [];  // (JS: empty array is true)
     },
-    handle_update: function (type, data) {
-        console.log("LiveFlowStore.handle_update", type, data);
-
-        if (type === "reset") {
-            return this.fetch();
-        }
-
-        if (this.updates_before_fetch) {
-            console.log("defer update", type, data);
-            this.updates_before_fetch.push(arguments);
-        } else {
-            this[type](data);
-        }
-    },
     handle_fetch: function (data) {
         this._fetchxhr = false;
         console.log("Flows fetched.", this.updates_before_fetch);
@@ -98,7 +105,7 @@ _.extend(LiveFlowStore.prototype, FlowStore.prototype, {
         var updates = this.updates_before_fetch;
         this.updates_before_fetch = false;
         for (var i = 0; i < updates.length; i++) {
-            this.handle_update.apply(this, updates[i]);
+            this.handle(updates[i]);
         }
     },
 });