Support layouts in layouts

Create a Panel class to handle all layout
Move view creation into its own file
Dynamically convert all configs into panels

Author: jjasonclark

lib/dashboard.js

@@ -2,7 +2,6 @@
 
 var _ = require("lodash");
 var blessed = require("blessed");
-
 var HelpView = require("./views/help");
 var generateLayouts = require("./generate-layouts");
 var LogProvider = require("./providers/log-provider");
@@ -14,8 +13,7 @@ var THROTTLE_TIMEOUT = 150;
 
 var Dashboard = function Dashboard(options) {
   this.options = options || {};
-  this.views = {};
-  this.settings = options.settings;
+  this.settings = this.options.settings;
 
   this.screen = blessed.screen({
     smartCSR: true,
@@ -32,21 +30,19 @@ var Dashboard = function Dashboard(options) {
 
 Dashboard.prototype._createViews = function () {
   this.layouts = generateLayouts(this.options.layoutsFile);
-  this.views = [];
 
   // container prevents stream view scrolling from interfering with side views
   this.container = blessed.box();
   this.screen.append(this.container);
-
-  this.helpView = new HelpView({
-    parent: this.container
-  });
-
-  this.gotoTimeView = new GotoTimeView({
-    metricsProvider: this.metricsProvider,
+  this.viewOptions = {
+    screen: this.screen,
     parent: this.container,
-    screen: this.screen
-  });
+    logProvider: this.logProvider,
+    metricsProvider: this.metricsProvider
+  };
+
+  this.helpView = new HelpView(this.viewOptions);
+  this.gotoTimeView = new GotoTimeView(this.viewOptions);
 
   this._showLayout(0);
 };
@@ -126,31 +122,15 @@ Dashboard.prototype._showLayout = function (id) {
   if (this.currentLayout === id) {
     return;
   }
-  _.each(this.views, function (view) {
-    view.destroy();
-  });
 
-  this.views = [];
-
-  _.each(this.layouts[id], function (layoutConfig) {
-    var View = views.getConstructor(layoutConfig.view);
-
-    if (View) {
-      if (this.settings[layoutConfig.view.type]) {
-        layoutConfig = _.merge(layoutConfig, {
-          view: this.settings[layoutConfig.view.type]
-        });
-      }
-      var view = new View({
-        parent: this.container,
-        logProvider: this.logProvider,
-        metricsProvider: this.metricsProvider,
-        layoutConfig: layoutConfig
-      });
-
-      this.views.push(view);
-    }
-  }.bind(this));
+  // Remove current layout
+  if (this.panel) {
+    this.panel.destroy();
+    delete this.panel;
+  }
+
+  // create new layout
+  this.panel = views.create(this.layouts[id], this.viewOptions, this.settings);
 
   this.currentLayout = id;
   this.helpView.node.setFront();

lib/generate-layouts.js

@@ -1,112 +1,11 @@
 "use strict";
+
 var _ = require("lodash");
 var assert = require("assert");
 var path = require("path");
 var defaultLayoutConfig = require("./default-layout-config");
 var validate = require("jsonschema").validate;
 var layoutConfigSchema = require("./layout-config-schema.json");
-/* eslint-disable no-magic-numbers */
-
-// Each layout consists of vertical panels, that contains its position and horizontal views.
-// Flex-like positions of panels and views defined by 'grow' and 'size' parameters.
-// View or panel with 'size' has exactly <size> height or width respectively.
-// View or panel with 'grow' fills <grow> part of the residuary space (it works like flex-grow).
-// By default, position = { grow: 1 }
-
-var normalizePosition = function (position) {
-  if (!_.has(position, "grow") && !_.has(position, "size")) {
-    position = { grow: 1 };
-  }
-
-  return position;
-};
-
-var concatPosition = function (position1, position2) {
-  position1 = normalizePosition(position1);
-  position2 = normalizePosition(position2);
-
-  return {
-    grow: (position1.grow || 0) + (position2.grow || 0),
-    size: (position1.size || 0) + (position2.size || 0)
-  };
-};
-
-var getSummaryPosition = function (items) {
-  return items.map(function (item) { return item.position; })
-    .reduce(concatPosition, { grow: 0, size: 0 });
-};
-
-var getSize = function (parentSize, itemPosition) {
-  var position = normalizePosition(itemPosition.position);
-  if (_.has(position, "size")) {
-    return position.size;
-  }
-
-  // Prevent last growing view from overflowing screen
-  var round = itemPosition.offset.grow + position.grow === itemPosition.summary.grow ?
-    Math.floor : Math.ceil;
-
-  return round(
-    (parentSize - itemPosition.summary.size) * position.grow / itemPosition.summary.grow
-  );
-};
-
-var getOffset = function (parentSize, itemPosition) {
-  return itemPosition.summary.grow ? Math.ceil(
-    itemPosition.offset.size +
-    (parentSize - itemPosition.summary.size) * itemPosition.offset.grow / itemPosition.summary.grow
-  ) : 0;
-};
-
-var createViewLayout = function (view, viewPosition, panelPosition) {
-  return {
-    view: view,
-    getPosition: function (parent) {
-      return {
-        width: getSize(parent.width, panelPosition),
-        height: getSize(parent.height, viewPosition),
-        left: getOffset(parent.width, panelPosition),
-        top: getOffset(parent.height, viewPosition)
-      };
-    }
-  };
-};
-
-var createPanelLayout = function (panelPosition, views) {
-  var viewSummaryPosition = getSummaryPosition(views);
-  var offsetPosition = { size: 0, grow: 0 };
-
-  return views.map(function (view) {
-    var viewPosition = {
-      summary: viewSummaryPosition,
-      offset: offsetPosition,
-      position: view.position
-    };
-
-    offsetPosition = concatPosition(view.position, offsetPosition);
-
-    return createViewLayout(view, viewPosition, panelPosition);
-  });
-};
-
-var createLayout = function (panelsConfig) {
-  var panelSummaryPosition = getSummaryPosition(panelsConfig);
-  var offsetPosition = { size: 0, grow: 0 };
-
-  return panelsConfig.reduce(function (layouts, panelConfig) {
-    var panelPosition = {
-      summary: panelSummaryPosition,
-      offset: offsetPosition,
-      position: panelConfig.position
-    };
-
-    var viewLayouts = createPanelLayout(panelPosition, panelConfig.views);
-
-    offsetPosition = concatPosition(panelConfig.position, offsetPosition);
-
-    return layouts.concat(viewLayouts);
-  }, []);
-};
 
 module.exports = function generateLayouts(layoutsFile) {
   var layoutConfig = defaultLayoutConfig;
@@ -125,5 +24,13 @@ module.exports = function generateLayouts(layoutsFile) {
     );
   }
 
-  return layoutConfig.map(createLayout);
+  return layoutConfig.map(function (layouts) {
+    return {
+      view: {
+        type: "panel",
+        views: layouts.map(function (config) { return _.merge(config, { type: "panel" }); })
+      },
+      getPosition: _.identity
+    };
+  });
 };

lib/views/index.js

@@ -1,21 +1,34 @@
 "use strict";
 
+var _ = require("lodash");
 var StreamView = require("./stream-view");
 var EventLoopView = require("./eventloop-view");
 var MemoryGaugeView = require("./memory-gauge-view");
 var MemoryGraphView = require("./memory-graph-view");
 var CpuView = require("./cpu-view");
 var BaseView = require("./base-view");
+var Panel = require("./panel");
 
 var VIEW_MAP = {
   log: StreamView,
   cpu: CpuView,
   memory: MemoryGaugeView,
   memoryGraph: MemoryGraphView,
-  eventLoop: EventLoopView
+  eventLoop: EventLoopView,
+  panel: Panel
+};
+
+// Customize view types based on a settings class
+var applyCustomizations = function (customizations, layoutConfig) {
+  var customization = customizations[layoutConfig.view.type];
+  if (!customization) {
+    return layoutConfig;
+  }
+  return _.merge(layoutConfig, { view: customization });
 };
 
 var getConstructor = function (options) {
+  options = options || {};
   if (VIEW_MAP[options.type]) {
     return VIEW_MAP[options.type];
   } else if (options.module) {
@@ -25,6 +38,23 @@ var getConstructor = function (options) {
   return null;
 };
 
-module.exports = {
-  getConstructor: getConstructor
+/**
+ * Creates a view
+ *
+ * @param {Object} layoutConfig raw layout { type, views, position }
+ * @param {Object} options startup options for views
+ * @param {Object} customizations view type customiztaions
+ *
+ * @returns {Object} created view oject
+ */
+module.exports.create = function create(layoutConfig, options, customizations) {
+  var customized = applyCustomizations(customizations, layoutConfig);
+  var viewOptions = Object.assign({}, options, {
+    layoutConfig: customized,
+    creator: function (layout) {
+      return create(layout, options, customizations);
+    }
+  });
+  var View = getConstructor(customized.view);
+  return View ? new View(viewOptions) : null;
 };