aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js')
-rw-r--r--web/src/js/actions.js35
-rw-r--r--web/src/js/app.js7
-rw-r--r--web/src/js/components/flowdetail.jsx.js2
-rw-r--r--web/src/js/components/mainview.jsx.js2
-rw-r--r--web/src/js/connection.js52
-rw-r--r--web/src/js/stores/flowstore.js69
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]);
}
},
});
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-27 09:00:04 +0000