Merge lp:~rharding/juju-gui/renderBundle2 into lp:juju-gui/experimental

[Richard Harding]

WIP

https://codereview.appspot.com/13361043/

[Richard Harding (rharding)]

Reviewers: mp+182735_code.launchpad.net,

Message:
In general this looks good. Couple of nit-picks below. I'm not
comfortable with so much code dupe between bundle.js and service.js
though so not ok'ing all the way.

https://codereview.appspot.com/13361043/diff/1/app/assets/javascripts/d3-components.js
File app/assets/javascripts/d3-components.js (right):

https://codereview.appspot.com/13361043/diff/1/app/assets/javascripts/d3-components.js#newcode290
app/assets/javascripts/d3-components.js:290: if (this.get('interactive')
=== false) { return; }
what is the interactive attr? I don't see it defined and not following
what this is doing.

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js
File app/views/topology/bundle.js (right):

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js#newcode80
app/views/topology/bundle.js:80: //Process any changed data.
space after the //

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js#newcode87
app/views/topology/bundle.js:87: // enter
enter? more or remove?

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js#newcode92
app/views/topology/bundle.js:92: return (d.subordinate ? 'subordinate '
: '') +
so is this repeated? Can it be shared? A typology.utils helper or
something?

https://codereview.appspot.com/13361043/diff/1/test/test_topology.js
File test/test_topology.js (right):

https://codereview.appspot.com/13361043/diff/1/test/test_topology.js#newcode135
test/test_topology.js:135: // The size of the element shoul reflect teh
passed in params
the

Description:
WIP

https://code.launchpad.net/~rharding/juju-gui/renderBundle2/+merge/182735

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/13361043/

Affected files:
   A [revision details]
   M app/app.js
   M app/assets/javascripts/d3-components.js
   M app/modules-debug.js
   A app/views/topology/bundle.js
   M app/views/topology/relation.js
   M app/views/topology/topology.js
   A test/data/wp-deployer.yaml
   M test/test_topology.js

[Madison Scott-Clary (makyo)]

LGTM, QA okay

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js
File app/views/topology/bundle.js (right):

https://codereview.appspot.com/13361043/diff/1/app/views/topology/bundle.js#newcode38
app/views/topology/bundle.js:38: Manage service rendering and events.
s/service/bundle

https://codereview.appspot.com/13361043/diff/1/test/test_topology.js
File test/test_topology.js (right):

https://codereview.appspot.com/13361043/diff/1/test/test_topology.js#newcode135
test/test_topology.js:135: // The size of the element shoul reflect teh
passed in params
On 2013/08/28 19:47:30, rharding wrote:
> the

should

https://codereview.appspot.com/13361043/

Unmerged revisions

988. By Richard Harding on 2013-08-28

Sync

=== modified file 'app/app.js'
--- app/app.js	2013-08-28 00:28:12 +0000
+++ app/app.js	2013-08-28 19:30:33 +0000
@@ -1507,6 +1507,7 @@
     'FileSaver',
     'juju-inspector-widget',
     'juju-ghost-inspector',
+    'juju-view-bundle',
     'viewmode-controls'
   ]
 });

=== modified file 'app/assets/javascripts/d3-components.js'
--- app/assets/javascripts/d3-components.js	2013-08-08 22:36:30 +0000
+++ app/assets/javascripts/d3-components.js	2013-08-28 19:30:33 +0000
@@ -132,6 +132,7 @@
 
       modEvents = module.events;
       this.events[module.name] = modEvents;
+
       this.bind(module.name);
       module.componentBound();
 
@@ -286,6 +287,7 @@
      * @method bind
      **/
     bind: function(moduleName) {
+      if (this.get('interactive') === false) { return; }
       var eventSet = this.events,
           filtered = {};
 
@@ -319,6 +321,7 @@
           owns = Y.Object.owns,
           module;
 
+      if (this.get('interactive') === false) { return; }
       if (!modEvents || !modEvents.d3) {
         return;
       }

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-08-19 15:53:41 +0000
+++ app/modules-debug.js	2013-08-28 19:30:33 +0000
@@ -226,6 +226,9 @@
           fullpath: '/juju-ui/views/topology/topology.js'
         },
 
+        'juju-view-bundle': {
+          fullpath: '/juju-ui/views/topology/bundle.js'
+        },
         'juju-view-utils': {
           fullpath: '/juju-ui/views/utils.js'
         },

=== added file 'app/views/topology/bundle.js'
--- app/views/topology/bundle.js	1970-01-01 00:00:00 +0000
+++ app/views/topology/bundle.js	2013-08-28 19:30:33 +0000
@@ -0,0 +1,390 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/**
+ * Provide the BundleTopology class.
+ *
+ * @module views
+ * @submodule views.BundleTopology
+ */
+
+YUI.add('juju-view-bundle', function(Y) {
+
+  var juju = Y.namespace('juju'),
+      views = Y.namespace('juju.views'),
+      utils = Y.namespace('juju.views.utils'),
+      models = Y.namespace('juju.models'),
+      d3ns = Y.namespace('d3'),
+      topoUtils = Y.namespace('juju.topology.utils');
+
+  /**
+    Manage service rendering and events.
+
+    @class BundleModule
+   */
+
+  var BundleModule = Y.Base.create('BundleModule', d3ns.Module, [], {
+    /**
+      Sync view models with current db.models.
+
+      @method updateData
+     */
+    updateData: function() {
+      //model data
+      var topo = this.get('component');
+      var vis = topo.vis;
+      var db = topo.get('db');
+      var store = topo.get('store');
+
+      var visibleServices = db.services.visible();
+      views.toBoundingBoxes(this, visibleServices, topo.service_boxes, store);
+      // Break a reference cycle that results in uncollectable objects leaking.
+      visibleServices.reset();
+
+      // Nodes are mapped by modelId tuples.
+      this.node = vis.selectAll('.service')
+                     .data(Y.Object.values(topo.service_boxes),
+                           function(d) {return d.modelId;});
+    },
+
+
+    /**
+      Attempt to reuse as much of the existing graph and view models
+      as possible to re-render the graph.
+
+      @method update
+     */
+    update: function() {
+      var self = this,
+          topo = this.get('component'),
+          width = topo.get('width'),
+          height = topo.get('height');
+
+      //Process any changed data.
+      this.updateData();
+
+      // Generate a node for each service, draw it as a rect with
+      // labels for service and charm.
+      var node = this.node;
+
+      // enter
+      node
+        .enter().append('g')
+        .attr({
+            'class': function(d) {
+              return (d.subordinate ? 'subordinate ' : '') +
+                  (d.pending ? 'pending ' : '') + 'service';
+            },
+            'transform': function(d) { return d.translateStr;}})
+        .call(self.createServiceNode, self);
+
+      // Update all nodes.
+      self.updateServiceNodes(node);
+    },
+
+    /**
+      Fill a service node with empty structures that will be filled out
+      in the update stage.
+
+      @param {object} node the node to construct.
+      @param {object} self reference to the view instance.
+      @return {null} side effects only.
+      @method createServiceNode
+     */
+    createServiceNode: function(node, self) {
+      node.append('image')
+       .classed('service-icon', true)
+       .attr({
+            'xlink:href': function(d) {
+              return d.icon;
+            },
+            width: 96,
+            height: 96
+          });
+      node.append('text').append('tspan')
+        .attr('class', 'name')
+        .text(function(d) {return d.displayName; });
+    },
+
+    /**
+      Fill the empty structures within a service node such that they
+      match the db.
+
+      @param {object} node the collection of nodes to update.
+      @return {null} side effects only.
+      @method updateServiceNodes
+     */
+    updateServiceNodes: function(node) {
+      if (node.empty()) {
+        return;
+      }
+      var self = this,
+          topo = this.get('component'),
+          landscape = topo.get('landscape');
+
+      // Apply Position Annotations
+      // This is done after the services_boxes
+      // binding as the event handler will
+      // use that index.
+      node.each(function(d) {
+        var service = d.model,
+            annotations = service.get('annotations'),
+            x, y;
+
+        if (!annotations) {
+          return;
+        }
+
+        // If there are x/y annotations on the service model and they are
+        // different from the node's current x/y coordinates, update the
+        // node, as the annotations may have been set in another session.
+        x = annotations['gui-x'];
+        y = annotations['gui-y'];
+        if (!d ||
+            (x !== undefined && x !== d.x) ||
+            (y !== undefined && y !== d.y)) {
+          d.x = x;
+          d.y = y;
+          d3.select(this).attr({
+            x: x,
+            y: y,
+            transform: d.translateStr});
+
+        }});
+
+      // Mark subordinates as such.  This is needed for when a new service
+      // is created.
+      node.filter(function(d) {
+        return d.subordinate;
+      }).classed('subordinate', true);
+
+      // Size the node for drawing.
+      node.attr({
+        'width': function(box) { box.w = 96; return box.w;},
+        'height': function(box) { box.h = 96; return box.h;}
+      });
+
+      // Draw a subordinate relation indicator.
+      var subRelationIndicator = node.filter(function(d) {
+        return d.subordinate &&
+            d3.select(this)
+                  .select('.sub-rel-block').empty();
+      })
+        .append('g')
+        .attr('class', 'sub-rel-block')
+        .attr('transform', function(d) {
+            // Position the block so that the relation indicator will
+            // appear at the right connector.
+            return 'translate(' + [d.w, d.h / 2 - 26] + ')';
+          });
+
+      subRelationIndicator.append('image')
+        .attr({'xlink:href': '/juju-ui/assets/svgs/sub_relation.svg',
+            'width': 87,
+            'height': 47});
+      subRelationIndicator.append('text').append('tspan')
+        .attr({'class': 'sub-rel-count',
+            'x': 64,
+            'y': 47 * 0.8});
+
+      // The following are sizes in pixels of the SVG assets used to
+      // render a service, and are used to in calculating the vertical
+      // positioning of text down along the service block.
+      var service_height = 224,
+          name_size = 22,
+          charm_label_size = 16,
+          name_padding = 26,
+          charm_label_padding = 150;
+
+      node.select('.name')
+        .attr({'style': function(d) {
+            // Programmatically size the font.
+            // Number derived from service assets:
+            // font-size 22px when asset is 224px.
+            return 'font-size:' + d.h *
+                (name_size / service_height) + 'px';
+          },
+          'x': function(d) { return d.w / 2; },
+          'y': function(d) {
+            // Number derived from service assets:
+            // padding-top 26px when asset is 224px.
+            return d.h * (name_padding / service_height) + d.h *
+                (name_size / service_height) / 2;
+          }
+          });
+
+      // Show whether or not the service is exposed using an indicator.
+      var exposed = node.filter(function(d) {
+        return d.exposed;
+      });
+      exposed.each(function(d) {
+        var existing = Y.one(this).one('.exposed-indicator');
+        if (!existing) {
+          existing = d3.select(this).append('image')
+        .attr({'class': 'exposed-indicator on',
+                'xlink:href': '/juju-ui/assets/svgs/exposed.svg',
+                'width': 32,
+                'height': 32
+              })
+        .append('title')
+        .text(function(d) {
+                return d.exposed ? 'Exposed' : '';
+              });
+        }
+        existing = d3.select(this).select('.exposed-indicator')
+        .attr({
+              'x': 145,
+              'y': 79
+            });
+      });
+    },
+
+
+    /**
+      Pans the environment view to the center all the services on the canvas.
+
+      @method panToCenter
+      @param {object} evt The event fired.
+      @return {undefined} Side effects only.
+    */
+    panToCenter: function(evt) {
+      var topo = this.get('component');
+      var vertices = topoUtils.serviceBoxesToVertices(topo.service_boxes);
+      this.findAndSetCentroid(vertices);
+    },
+
+    /**
+      Given a set of vertices, find the centroid and pan to that location.
+
+      @method findAndSetCentroid
+      @param {array} vertices A list of vertices in the form [x, y].
+      @return {undefined} Side effects only.
+    */
+    findAndSetCentroid: function(vertices) {
+      var topo = this.get('component'),
+          centroid = topoUtils.centroid(vertices);
+      // The centroid is set on the topology object due to the fact that it is
+      // used as a sigil to tell whether or not to pan to the point after the
+      // first delta.
+      topo.centroid = centroid;
+      topo.fire('panToPoint', {point: topo.centroid});
+    }
+  }, {
+    ATTRS: {
+      /**
+        @property {d3ns.Component} component
+      */
+      component: {}
+    }
+  });
+  views.BundleModule = BundleModule;
+
+  /**
+    Display a Bundle using an internal topology.
+
+    @class BundleTopology
+   */
+  function BundleTopology(options) {
+    // Options and Init
+    var self = this;
+    options = options || {};
+    this.options = options;
+    this._cleanups = [];
+    this.db = options.db;
+    if (!this.db) {
+      this.db = new models.Database();
+      this._cleanups.push(this.db.destroy);
+    }
+    this.store = options.store;
+    if (!this.store) {
+      this.store = new juju.CharmWorld2({});
+      this._cleanups.push(this.store.destroy);
+    }
+    this.container = options.container;
+    if (!this.container) {
+      this.container = Y.Node.create('<div>');
+      this.container.addClass('topology-canvas');
+      this._cleanups.push(function() {
+        self.container.remove(true);
+      });
+    }
+
+    var topo = this.topology = new views.Topology();
+    topo.setAttrs(Y.mix(options, {
+      interactive: false,
+      container: this.container,
+      db: this.db,
+      store: this.store
+    }, true));
+
+    // Service view doesn't support Level Of Detail views.
+    // BundleModule provides an icon centric view
+    // of services till service module can support this directly.
+    topo.addModule(views.BundleModule);
+    topo.addModule(views.RelationModule);
+    topo.addModule(views.PanZoomModule);
+  }
+
+  BundleTopology.prototype.centerViewport = function(scale) {
+    this.topology.modules.PanZoomModule._fire_zoom(scale);
+    // Pan to the centroid of it all after the zoom
+    this.panToCenter();
+    return this;
+  };
+
+  /**
+      Pans the canvas to the center all the services.
+
+      @method panToCenter
+      @param {object} evt The event fired.
+      @return {undefined} Side effects only.
+    */
+  BundleTopology.prototype.panToCenter = function() {
+    var topo = this.topology;
+    var vertices = topoUtils.serviceBoxesToVertices(topo.service_boxes);
+    var centroid = topoUtils.centroid(vertices);
+    this.topology.modules.PanZoomModule.panToPoint({point: centroid});
+  };
+
+
+  BundleTopology.prototype.render = function() {
+    this.topology.render();
+    this.centerViewport(0.66);
+    return this;
+  };
+
+  BundleTopology.prototype.destroy = function() {
+    this._cleanups.forEach(function(cleanupFunc) {
+      cleanupFunc();
+    });
+  };
+
+  views.BundleTopology = BundleTopology;
+
+}, '0.1.0', {
+  requires: [
+    'd3',
+    'd3-components',
+    'juju-charm-store',
+    'juju-models',
+    'juju-topology',
+    'juju-view-utils'
+  ]
+});

=== modified file 'app/views/topology/relation.js'
--- app/views/topology/relation.js	2013-07-03 17:35:21 +0000
+++ app/views/topology/relation.js	2013-08-28 19:30:33 +0000
@@ -178,6 +178,9 @@
       var db = topo.get('db');
       var self = this;
       var relations = db.relations.toArray();
+      if (!relations || relations.length === 0) {
+        return;
+      }
       this.relations = this.decorateRelations(relations);
       this.updateLinks();
       this.updateSubordinateRelationsCount();

=== modified file 'app/views/topology/topology.js'
--- app/views/topology/topology.js	2013-05-17 14:51:05 +0000
+++ app/views/topology/topology.js	2013-08-28 19:30:33 +0000
@@ -49,17 +49,15 @@
    */
   var Topology = Y.Base.create('Topology', d3ns.Component, [], {
     initializer: function(options) {
-      Topology.superclass.constructor.apply(this, arguments);
-      this.options = Y.mix(options || {
+      this.options = Y.mix(options || {}, {
         minZoom: 0.25,
         maxZoom: 2,
         minSlider: 25,
         maxSlider: 200
       });
-
+      Topology.superclass.constructor.apply(this, arguments);
       // Build a service.id -> BoundingBox map for services.
       this.service_boxes = {};
-
       this._subscriptions = [];
     },
 
@@ -111,11 +109,16 @@
       this.computeScales();
 
       // Set up the visualization with a pack layout.
-      svg = d3.select(container.getDOMNode())
-              .selectAll('.topology-canvas')
-              .append('svg:svg')
-              .attr('width', width)
-              .attr('height', height);
+      var canvas = d3.select(container.getDOMNode());
+      var base = canvas.select('.topology-canvas');
+      if (base.empty()) {
+        base = canvas.append('div')
+              .classed('topology-canvas', true);
+      }
+
+      svg = base.append('svg:svg')
+                .attr('width', width)
+                .attr('height', height);
       this.svg = svg;
 
       this.zoomPlane = svg.append('rect')
@@ -209,9 +212,9 @@
         getter: function() {return this.get('size')[1];}
       },
       /*
-       * Scale and translate are managed by an external module
-       * (PanZoom in this case). If that module isn't
-       * loaded nothing will modify these values.
+        Scale and translate are managed by an external module
+        (PanZoom in this case). If that module isn't
+        loaded nothing will modify these values.
        */
       scale: {
         getter: function() {return this.zoom.scale();},

=== added file 'test/data/wp-deployer.yaml'
--- test/data/wp-deployer.yaml	1970-01-01 00:00:00 +0000
+++ test/data/wp-deployer.yaml	2013-08-28 19:30:33 +0000
@@ -0,0 +1,41 @@
+envExport: 
+  series: precise
+  services: 
+    mysql: 
+      charm: "cs:precise/mysql-27"
+      num_units: 1
+      options: 
+        "binlog-format": MIXED
+        "block-size": "5"
+        "dataset-size": "80%"
+        flavor: distro
+        'gui-x': 50
+        'gui-y': 50
+        "ha-bindiface": eth0
+        "ha-mcastport": "5411"
+        "max-connections": "-1"
+        "preferred-storage-engine": InnoDB
+        "query-cache-size": "-1"
+        "query-cache-type": "OFF"
+        "rbd-name": mysql1
+        "tuning-level": safest
+        vip: ""
+        vip_cidr: "24"
+        vip_iface: eth0
+      annotations: 
+        "gui-x": 115
+        "gui-y": 89
+    wordpress: 
+      charm: "cs:precise/wordpress-16"
+      num_units: 1
+      options: 
+        debug: "no"
+        engine: nginx
+        tuning: single
+        "wp-content": ""
+      annotations: 
+        "gui-x": 510
+        "gui-y": 184
+  relations: 
+    - - "wordpress:db"
+      - "mysql:db"

=== modified file 'test/test_topology.js'
--- test/test_topology.js	2013-06-05 13:27:07 +0000
+++ test/test_topology.js	2013-08-28 19:30:33 +0000
@@ -28,6 +28,7 @@
     Y = YUI(GlobalConfig).use(['juju-topology',
                                'd3-components',
                                'juju-tests-utils',
+                               'juju-view-bundle',
                                'node',
                                'node-event-simulate'],
     function(Y) {
@@ -111,4 +112,43 @@
        Y.Lang.isValue(topo.vis).should.equal(true);
      });
 
+  it('should be able to create a bundle display topology', function(done) {
+    container.destroy(true);
+    container = utils.makeContainer();
+
+    db = new models.Database();
+    db.environment.set('defaultSeries', 'precise');
+    var fakeStore = utils.makeFakeStore(db.charms);
+    fakeStore.iconpath = function() { return 'fake.svg'; };
+
+    db.importDeployer(
+        jsyaml.safeLoad(utils.loadFixture('data/wp-deployer.yaml')),
+        fakeStore, {useGhost: true, targetBundle: 'wordpress-prod'})
+    .then(function() {
+          // Init the topo with the db at this point and ...
+          var bundle = new views.BundleTopology({
+            container: container,
+            size: [320, 240],
+            db: db,
+            store: fakeStore}).render();
+
+          // The size of the element shoul reflect teh passed in params
+          var svg = d3.select(container.getDOMNode()).select('svg');
+          assert.equal(svg.attr('width'), 320);
+          assert.equal(svg.attr('height'), 240);
+
+          // We should have the two rendered services
+          assert.equal(container.all('.service').size(), 2);
+          var service = svg.select('.service');
+          assert.equal(service.attr('width'), '96');
+          assert.equal(service.attr('transform'), 'translate(115,89)');
+          // and the one relation between them
+          assert.equal(container.all('.relation').size(), 1);
+
+          container.remove(true);
+          bundle.destroy();
+          done();
+        }).then(undefined, done);
+  });
+
 });