Customizable layouts

bin/nodejs-dashboard.js

@@ -18,9 +18,9 @@ program.option("-e, --eventdelay [ms]",
  "Minimum threshold for event loop reporting, default 10ms",
   config.BLOCKED_THRESHOLD);
 
-program.option("-i, --interleave, default false",
- "Interleave stderr/stdout output",
- config.INTERLEAVE);
+program.option("-l, --layouts [file]",
+ "Path to file with layouts",
+ config.LAYOUTS);
 
 program.option("-p, --port [port]",
  "Socket listener port",
@@ -67,7 +67,7 @@ var dashboard = new Dashboard({
   appName: appName,
   program: program,
   scrollback: program.scrollback,
-  interleave: program.interleave
+  layoutsFile: program.layouts
 });
 
 server.on("connection", function (socket) {

lib/config.js

@@ -10,5 +10,5 @@ module.exports = {
   BLOCKED_THRESHOLD: 10,
   BLOCKED_THRESHOLD_KEY: pkg.name + "_BLOCKED_THRESHOLD",
   SCROLLBACK: 1000,
-  INTERLEAVE: false
+  LAYOUTS: ""
 };

lib/dashboard.js

@@ -8,7 +8,7 @@ var EventLoopView = require("./views/eventloop-view");
 var MemoryView = require("./views/memory-view");
 var CpuView = require("./views/cpu-view");
 var HelpView = require("./views/help");
-var layouts = require("./layouts");
+var generateLayouts = require("./generate-layouts");
 
 var Dashboard = function Dashboard(options) {
   this.options = options || {};
@@ -25,36 +25,36 @@ var Dashboard = function Dashboard(options) {
 };
 
 Dashboard.prototype._createViews = function () {
-  var config = layouts[0];
+  this.layouts = generateLayouts(this.options.layoutsFile);
+  var config = this.layouts[0];
 
   // container prevents stream view scrolling from interfering with side views
   this.container = blessed.box();
   this.screen.append(this.container);
 
-  if (this.options.interleave) {
-    this.views.stdouterr = new StreamView({
-      parent: this.container,
-      scrollback: this.options.scrollback,
-      events: ["stdout", "stderr"],
-      color: "light-blue",
-      layoutConfig: config.stdouterr
-    });
-  } else {
-    this.views.stdout = new StreamView({
-      parent: this.container,
-      scrollback: this.options.scrollback,
-      events: ["stdout"],
-      color: "green",
-      layoutConfig: config.stdout
-    });
-    this.views.stderr = new StreamView({
-      parent: this.container,
-      scrollback: this.options.scrollback,
-      events: ["stderr"],
-      color: "red",
-      layoutConfig: config.stderr
-    });
-  }
+  this.views.stdouterr = new StreamView({
+    parent: this.container,
+    scrollback: this.options.scrollback,
+    events: ["stdout", "stderr"],
+    color: "light-blue",
+    layoutConfig: config.stdouterr
+  });
+
+  this.views.stdout = new StreamView({
+    parent: this.container,
+    scrollback: this.options.scrollback,
+    events: ["stdout"],
+    color: "green",
+    layoutConfig: config.stdout
+  });
+
+  this.views.stderr = new StreamView({
+    parent: this.container,
+    scrollback: this.options.scrollback,
+    events: ["stderr"],
+    color: "red",
+    layoutConfig: config.stderr
+  });
 
   this.views.cpu = new CpuView({
     parent: this.container,
@@ -82,7 +82,7 @@ Dashboard.prototype._configureKeys = function () {
 
   this.screen.key(["left", "right"], function (ch, key) {
     var delta = key.name === "left" ? -1 : 1;
-    var target = (this.currentLayout + delta + layouts.length) % layouts.length;
+    var target = (this.currentLayout + delta + this.layouts.length) % this.layouts.length;
     this._showLayout(target);
   }.bind(this));
 
@@ -116,17 +116,18 @@ Dashboard.prototype._showLayout = function (id) {
     return;
   }
   _.each(this.views, function (v) {
-    v.node.hide();
+    if (v.setLayout) {
+      v.setLayout();
+    }
   });
-  _.each(layouts[id], function (config, viewName) {
+  _.each(this.layouts[id], function (config, viewName) {
     var view = this.views[viewName];
     if (!view) {
       return;
     }
     if (view.setLayout) {
       view.setLayout(config);
     }
-    view.node.show();
   }.bind(this));
   this.currentLayout = id;
   this.screen.render();

lib/views/base-line-graph.js

@@ -15,10 +15,16 @@ var BaseLineGraph = function BaseLineGraph(options) {
 
   this.unit = options.unit || "";
 
-  this.maxLimit = this.layoutConfig.limit;
-  this.values = _.times(this.layoutConfig.limit, _.constant(0));
+  this.values = [];
+  if (this.layoutConfig) {
+    this.maxLimit = this.layoutConfig.limit;
+    this.values = _.times(this.layoutConfig.limit, _.constant(0));
+  }
+
+  this._remountOnResize = true;
 
   this._createGraph(options);
+
   this.parent.screen.on("metrics", this.onEvent.bind(this));
 };
 
@@ -28,18 +34,6 @@ BaseLineGraph.prototype.onEvent = function () {
   throw new Error("BaseLineGraph onEvent should be overwritten");
 };
 
-BaseLineGraph.prototype.recalculatePosition = function () {
-  var newPosition = this.getPosition();
-  if (_.isEqual(this.node.position, newPosition)) {
-    return;
-  }
-  this.node.position = newPosition;
-  // force line graph to re-render with new position
-  this.parent.remove(this.node);
-  this.parent.append(this.node);
-  this.node.setBack();
-};
-
 BaseLineGraph.prototype.setLayout = function (layoutConfig) {
   this.layoutConfig = layoutConfig;
   this._handleLimitChanged();
@@ -48,10 +42,14 @@ BaseLineGraph.prototype.setLayout = function (layoutConfig) {
 
 // Should be called by child's onEvent handler
 BaseLineGraph.prototype.update = function (value, highwater) {
+  if (!this.layoutConfig) {
+    return;
+  }
+
   this.values.shift();
   this.values.push(value);
 
-  this.series.y = this.values.slice(-1 * this.layoutConfig.limit);
+  this.series.y = this._getYAxis();
 
   if (this.highwaterSeries) {
     this.highwaterSeries.y = _.times(this.layoutConfig.limit, _.constant(highwater));
@@ -65,14 +63,23 @@ BaseLineGraph.prototype.update = function (value, highwater) {
 };
 
 BaseLineGraph.prototype._getXAxis = function () {
+  if (!this.layoutConfig) {
+    return [];
+  }
   return _.reverse(_.times(this.layoutConfig.limit, String));
 };
 
+BaseLineGraph.prototype._getYAxis = function () {
+  if (!this.layoutConfig) {
+    return [];
+  }
+  return this.values.slice(-1 * this.layoutConfig.limit);
+};
+
 BaseLineGraph.prototype._createGraph = function (options) {
   this.node = contrib.line({
     label: util.format(" %s ", this.label),
     border: "line",
-    position: this.getPosition(this.parent),
     numYLabels: 4,
     maxY: options.maxY,
     showLegend: false,
@@ -84,9 +91,11 @@ BaseLineGraph.prototype._createGraph = function (options) {
     }
   });
 
+  this.recalculatePosition();
+
   this.series = {
     x: this._getXAxis(),
-    y: this.values.slice(-1 * this.layoutConfig.limit)
+    y: this._getYAxis()
   };
 
   if (options.highwater) {
@@ -103,7 +112,7 @@ BaseLineGraph.prototype._createGraph = function (options) {
 };
 
 BaseLineGraph.prototype._handleLimitChanged = function () {
-  if (this.series.x.length === this.layoutConfig.limit) {
+  if (!this.layoutConfig || this.series.x.length === this.layoutConfig.limit) {
     return;
   }
   this.maxLimit = Math.max(this.layoutConfig.limit, this.maxLimit);

lib/views/base-view.js

@@ -5,21 +5,37 @@ var _ = require("lodash");
 
 var BaseView = function BaseView(options) {
   assert(options.parent, "View requires parent");
-  assert(options.layoutConfig && _.isFunction(options.layoutConfig.getPosition),
-    "View requires layoutConfig option with getPosition function");
 
   this.parent = options.parent;
   this.layoutConfig = options.layoutConfig;
 
   this.parent.screen.on("resize", this.recalculatePosition.bind(this));
+
+  this._remountOnResize = false;
 };
 
 BaseView.prototype.getPosition = function () {
   return this.layoutConfig.getPosition(this.parent);
 };
 
 BaseView.prototype.recalculatePosition = function () {
-  this.node.position = this.getPosition();
+  if (!this.layoutConfig) {
+    this.node.hide();
+    return;
+  }
+
+  var newPosition = this.getPosition();
+
+  if (!_.isEqual(this.node.position, newPosition)) {
+    this.node.position = this.getPosition();
+
+    if (this._remountOnResize) {
+      this.parent.remove(this.node);
+      this.parent.append(this.node);
+    }
+  }
+  this.node.setBack();
+  this.node.show();
 };
 
 BaseView.prototype.setLayout = function (layoutConfig) {

lib/views/memory-view.js

@@ -14,7 +14,6 @@ var MemoryView = function MemoryView(options) {
 
   this.node = blessed.box({
     label: " memory ",
-    position: this.getPosition(),
     border: "line",
     style: {
       border: {
@@ -23,6 +22,10 @@ var MemoryView = function MemoryView(options) {
     }
   });
 
+  this._remountOnResize = true;
+
+  this.recalculatePosition();
+
   this.heapGauge = contrib.gauge({ label: "heap" });
   this.node.append(this.heapGauge);