Toggle Protocols

data/actions/config.js

@@ -0,0 +1,24 @@
+/* See license.txt for terms of usage */
+
+define(function(require, exports/*, module*/) {
+
+"use strict";
+
+const types = {
+  UPDATE_CONFIG: "UPDATE_CONFIG",
+}
+
+function updateConfig(key, newValue) {
+  var data = {
+    key,
+    newValue
+  };
+
+  return { type: types.UPDATE_CONFIG, data };
+}
+
+// Exports from this module
+exports.updateConfig = updateConfig;
+exports.types = types;
+});
+

data/components/frame-list.js

@@ -82,7 +82,8 @@ var FrameList = React.createClass({
         key: "frame-" + frame.id,
         frame: frame,
         selection: this.props.selection,
-        dispatch: this.props.dispatch
+        dispatch: this.props.dispatch,
+        config: this.props.config
       }));
     }
 
@@ -156,40 +157,37 @@ var FrameBubble = React.createFactory(React.createClass({
     // Render inline frame preview. There is just one preview displayed
     var preview;
 
-    if (!preview && frame.socketIo) {
+    if (this.props.config.enableSocketIo !== false && frame.socketIo) {
       preview = TreeView({
         key: "preview-socketio",
         // We only show the data that is deemed interesting for the user in the
         // inline previews, not the socketIO metadata
         data: {"Socket IO": frame.socketIo.data},
         mode: "tiny"
       });
-    }
-
-    if (!preview && frame.sockJs) {
+    } else if (this.props.config.enableSockJs !== false && frame.sockJs) {
       preview = TreeView({
         key: "preview-sockjs",
         data: {"SockJS": frame.sockJs},
         mode: "tiny"
       });
-    }
-
-    if (!preview && frame.json) {
+    } else if (this.props.config.enableJson !== false && frame.json) {
       preview = TreeView({
         key: "preview-json",
         data: {"JSON": frame.json},
         mode: "tiny"
       });
-    }
+    } else if (this.props.config.enableMqtt !== false && frame.mqtt) {
 
-    if (!preview && frame.mqtt) {
       var mqtt = frame.mqtt;
       op = "MQTT " + mqtt.cmd;
+
       if (mqtt.cmd === "publish") {
         payload = mqtt.topic;
       } else {
         payload = mqtt.messageId || mqtt.clientId || mqtt.returnCode;
       }
+
       preview = TreeView({
         key: "preview-mqtt",
         data: {"MQTT": mqtt},

data/components/frame-table.js

@@ -57,7 +57,8 @@ var FrameTable = React.createClass({
       key: frame.id,
       selection: this.props.selection,
       frame: frame,
-      dispatch: this.props.dispatch
+      dispatch: this.props.dispatch,
+      config: this.props.config
     }));
 
     // Render summary info
@@ -166,24 +167,24 @@ var FrameRow = React.createFactory(React.createClass({
     var payload;
 
     // Test support for inline previews.
-    if (frame.socketIo) {
+    if (this.props.config.enableSocketIo !== false && frame.socketIo) {
       payload = TreeView({
         key: "preview-socketio",
         // We only show the data that is deemed interesting for the user in the
         // inline previews, not the socketIO metadata
         data: {"Socket IO": frame.socketIo.data},
       });
-    } else if (frame.sockJs) {
+    } else if (this.props.config.enableSockJs !== false && frame.sockJs) {
       payload = TreeView({
         key: "preview-sockjs",
         data: {"SockJS": frame.sockJs},
       });
-    } else if (frame.json) {
+    } else if (this.props.config.enableJson !== false && frame.json) {
       payload = TreeView({
         key: "preview-json",
         data: {"JSON": frame.json},
       });
-    } else if (frame.mqtt) {
+    } else if (this.props.config.enableMqtt !== false && frame.mqtt) {
       payload = TreeView({
         key: "preview-mqtt",
         data: {"MQTT": frame.mqtt},

data/containers/app.js

@@ -101,6 +101,7 @@ var App = React.createClass({
 function mapStateToProps(state) {
   return {
     frames: state.frames,
+    config: state.config,
     selection: state.frames.selection,
     perspective: state.perspective
   };

data/reducers/config.js

@@ -0,0 +1,26 @@
+/* See license.txt for terms of usage */
+
+define(function(require, exports/*, module*/) {
+
+"use strict";
+
+const { types } = require("../actions/config");
+
+const initialState = {};
+
+function config(state = initialState, action) {
+  switch (action.type) {
+  case types.UPDATE_CONFIG:
+    state[action.data.key] = action.data.newValue;
+
+    return state;
+
+  default:
+    return state;
+  }
+}
+
+// Exports from this module
+exports.config = config;
+});
+

data/reducers/index.js

@@ -10,10 +10,12 @@ const { combineReducers } = require("redux");
 // WebSockets Monitor
 const { frames } = require("./frames");
 const { perspective } = require("./perspective");
+const { config } = require("./config");
 
 var rootReducer = combineReducers({
   frames,
-  perspective
+  perspective,
+  config
 });
 
 // Exports from this module

data/view.js

@@ -21,8 +21,10 @@ const { App } = createFactories(require("./containers/app"));
 const { configureStore } = require("./store/configure-store");
 const { addFrames, filterFrames, clear } = require("./actions/frames");
 const { showTableView, showListView } = require("./actions/perspective");
+const { updateConfig } = require("./actions/config");
 
-var store = configureStore();
+/** Redux store, populated on view initialize */
+var store;
 
 /**
  * This object represents a view that is responsible for rendering
@@ -53,6 +55,18 @@ var WebSocketsView = createView(PanelView,
 
     // Render the top level application component.
     this.content = document.getElementById("content");
+
+    // Initialize the redux store with user preferences
+    store = configureStore({
+      config: {
+        enableSocketIo: Options.get("enableSocketIo"),
+        enableSockJs: Options.get("enableSockJs"),
+        enableJson: Options.get("enableJson"),
+        enableMqtt: Options.get("enableMqtt"),
+      }
+    });
+
+    // Render the app
     this.theApp = ReactDOM.render(Provider({store: store},
       App(config)
     ), this.content);
@@ -152,15 +166,27 @@ var WebSocketsView = createView(PanelView,
 
   onPrefChanged: function(event) {
     var prefName = event.prefName;
-    if (prefName != "tabularView") {
-      return;
-    }
 
-    // Update the way how frames are displayed.
-    if (event.newValue) {
-      store.dispatch(showTableView());
-    } else {
-      store.dispatch(showListView());
+    switch (prefName) {
+      case "tabularView":
+
+        // Update the way how frames are displayed.
+        if (event.newValue) {
+          store.dispatch(showTableView());
+        } else {
+          store.dispatch(showListView());
+        }
+        break;
+      case "enableSocketIo":
+      case "enableSockJs":
+      case "enableJson":
+      case "enableMqtt":
+
+        // Place protocol toggle prefs into config store
+        store.dispatch(updateConfig(prefName, event.newValue));
+        break;
+      default:
+        break;
     }
   }
 });

lib/wsm-panel.js

@@ -228,6 +228,10 @@ const WsmPanel = Class(
   // Socket.IO Parser
 
   decodeSocketIoPacket: function(data) {
+    if (!prefs.enableSocketIo) {
+      return;
+    }
+
     let result;
     try {
       var decoder = new socketIoParser.Decoder();
@@ -251,13 +255,21 @@ const WsmPanel = Class(
    * Parse Sock.JS
    */
   decodeSockJsPacket: function(data) {
+    if (!prefs.enableSockJs) {
+      return;
+    }
+
     return sockJsParser.parse(data);
   },
 
   /**
    * Parse JSON
    */
   decodeJsonPacket: function(data) {
+    if (!prefs.enableJson) {
+      return;
+    }
+
     try {
       return JSON.parse(data);
     } catch (err) {
@@ -286,18 +298,22 @@ const WsmPanel = Class(
    * Parse MQTT using mqtt-packet parser
    */
   decodeMqttPacket: function(data) {
+    if (!prefs.enableMqtt) {
+      return;
+    }
+
     try {
       var parser = mqttParser();
       // View binary ACString input data as bytes
-      var buffer = new Buffer(data, 'binary');
+      var buffer = new Buffer(data, "binary");
       var result = null;
 
-      parser.on('packet', function(packet) {
+      parser.on("packet", function(packet) {
         // Assume there's only one MQTT packet in the Websocket frame
         result = packet;
       });
 
-      parser.on('error', function(packet) {
+      parser.on("error", function(packet) {
         // TODO: should we display an error somewhere?
       });
 
@@ -307,7 +323,7 @@ const WsmPanel = Class(
       if (result.cmd === "publish") {
         // Try to decode the payload binary buffer
         try {
-          result.payload = result.payload.toString('utf8');
+          result.payload = result.payload.toString("utf8");
           result.payload = JSON.parse(result.payload);
         } catch (err) {
         }

package.json

@@ -43,6 +43,35 @@
       "description": "Display sent and received frames in tabular format",
       "type": "bool",
       "value": true
+    },
+    {
+      "name": "enableSocketIo",
+      "title": "Socket.IO support",
+      "description": "Parse Socket.IO frames",
+      "type": "bool",
+      "value": true
+    },
+    {
+      "name": "enableSockJs",
+      "title": "SockJS support",
+      "description": "Parse SockJS frames",
+      "type": "bool",
+      "value": true
+    },
+    {
+      "name": "enableJson",
+      "title": "JSON support",
+      "description": "Parse JSON frames",
+      "type": "bool",
+      "value": true
+    },
+    {
+      "name": "enableMqtt",
+      "title": "MQTT support",
+      "description": "Parse MQTT frames",
+      "type": "bool",
+      "value": true
     }
+
   ]
 }