Merge lp:~bcsaller/juju-gui/service-click-actions-begone into lp:~bcsaller/juju-gui/viewmodel-improvements

[Benjamin Saller]

Remove service click actions

This branch builds on the view model improvements to remove service click
actions, simplify the calling convention of methods that lived there and
remove their dependencies on the service_click_actions closure.

https://codereview.appspot.com/7228070/

[Benjamin Saller (bcsaller)]

Reviewers: mp+145866_code.launchpad.net,

Message:
Please take a look.

Description:
Remove service click actions

This branch builds on the view model improvements to remove service
click
actions, simplify the calling convention of methods that lived there and

remove their dependencies on the service_click_actions closure.

https://code.launchpad.net/~bcsaller/juju-gui/service-click-actions-begone/+merge/145866

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/views/topology/service.js
   M test/test_application_notifications.js
   M test/test_environment_view.js
   M test/test_service_module.js
   M undocumented

[lp:~bcsaller/juju-gui/service-click-actions-begone]

356. By Benjamin Saller on 2013-01-31

fix test

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7228070/

[Nicola Larosa (teknico)]

Land as is.

See also some comments below.

https://codereview.appspot.com/7228070/diff/3001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7228070/diff/3001/app/views/topology/service.js#newcode94
app/views/topology/service.js:94: // with this module as self and a box
as its argument.
Why is it called "d" if it's a box?

https://codereview.appspot.com/7228070/diff/3001/app/views/topology/service.js#newcode195
app/views/topology/service.js:195: self.showService(box);
And here we have both a "d" and a "box". Confusing.

https://codereview.appspot.com/7228070/diff/3001/app/views/topology/service.js#newcode203
app/views/topology/service.js:203: destroyServiceClick: function(data,
self) {
Oh, so "d" means "data".

https://codereview.appspot.com/7228070/diff/3001/app/views/topology/service.js#newcode906
app/views/topology/service.js:906: showService: function(d) {
The parameter is intended to be called "box", according to the comment
block right above, and it's probably a good idea.

https://codereview.appspot.com/7228070/diff/3001/test/test_application_notifications.js
File test/test_application_notifications.js (right):

https://codereview.appspot.com/7228070/diff/3001/test/test_application_notifications.js#newcode240
test/test_application_notifications.js:240: // The _destroyCallback args
are: service, view, confirm button, event.
Is this comment still valid?

https://codereview.appspot.com/7228070/

[lp:~bcsaller/juju-gui/service-click-actions-begone]

357. By Benjamin Saller on 2013-02-01

merge trunk with vm improvements

358. By Benjamin Saller on 2013-02-01

complete var rename

359. By Benjamin Saller on 2013-02-01

review change to comment

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7228070/

[Madison Scott-Clary (makyo)]

Two things, one comment in code.

Also encountered: attempting to destroy a service leads to the following
in juju: http://pastebin.ubuntu.com/1597784/ The WS then disconnects and
reconnects, and the dialog is left hanging out in the GUI. Confirmed
that this works in my branch, which I've yet to merge with anything.

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js#newcode342
app/views/topology/service.js:342: box.inDrag = 2;
Line above is still using service_click_actions, throwing an exception
when dragging a service (if it's not caught, relation lines don't move
until annotations come back and things are redrawn).

https://codereview.appspot.com/7228070/

[Benjamin Saller (bcsaller)]

On 2013/02/01 16:41:54, matthew.scott wrote:
> Two things, one comment in code.

> Also encountered: attempting to destroy a service leads to the
following in
> juju: http://pastebin.ubuntu.com/1597784/ The WS then disconnects and
> reconnects, and the dialog is left hanging out in the GUI. Confirmed
that this
> works in my branch, which I've yet to merge with anything.

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js
> File app/views/topology/service.js (right):

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js#newcode342
> app/views/topology/service.js:342: box.inDrag = 2;
> Line above is still using service_click_actions, throwing an exception
when
> dragging a service (if it's not caught, relation lines don't move
until
> annotations come back and things are redrawn).

I wasn't able to reproduce the destroy service issue. I'll resubmit this
with the other fix from the poor merge.

https://codereview.appspot.com/7228070/

[Benjamin Saller (bcsaller)]

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7228070/diff/9001/app/views/topology/service.js#newcode342
app/views/topology/service.js:342: box.inDrag = 2;
On 2013/02/01 16:41:54, matthew.scott wrote:
> Line above is still using service_click_actions, throwing an exception
when
> dragging a service (if it's not caught, relation lines don't move
until
> annotations come back and things are redrawn).

ah, careless merge, thanks

https://codereview.appspot.com/7228070/

[lp:~bcsaller/juju-gui/service-click-actions-begone]

360. By Benjamin Saller on 2013-02-04

fix bad merge

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/7228070/

[Madison Scott-Clary (makyo)]

Land as is, thank you!

https://codereview.appspot.com/7228070/

[Benjamin Saller (bcsaller)]

*** Submitted:

Remove service click actions

This branch builds on the view model improvements to remove service
click
actions, simplify the calling convention of methods that lived there and

remove their dependencies on the service_click_actions closure.

R=teknico, matthew.scott
CC=
https://codereview.appspot.com/7228070

https://codereview.appspot.com/7228070/

=== modified file 'CHANGES.yaml'
--- CHANGES.yaml	2013-01-21 18:48:06 +0000
+++ CHANGES.yaml	2013-02-04 14:37:21 +0000
@@ -7,6 +7,7 @@
 # this data in the GUI itself at some point.  Here's an example of how to
 # write the changes data.
 
+# - unreleased:
 # - 0.5.0:
 #   - Did something
 #   - Did something else
@@ -20,7 +21,12 @@
 # Release identifiers in this file should always be "unreleased" or
 # [NUMBER].[NUMBER].[NUMBER] per http://semver.org/ .
 
-- unrelased:
+- 0.2.0:
+    - Fix a number of bugs and UI misbehaviors.
+    - Switch to a CSS minifier that does not require Java.
+    - Remove login credentials from config.
+    - Improve tests and testing infrastructure.
+    - Improve project and code documentation.
 - 0.1.5:
     - Add support for recess as a CSS linter.  Currently not enabled.
     - Allow login credentials to be placed in config.

=== modified file 'Makefile'
--- Makefile	2013-01-30 17:48:54 +0000
+++ Makefile	2013-02-04 14:37:21 +0000
@@ -151,7 +151,7 @@
 	@echo "docs: generate project and code documentation"
 	@echo "view-docs: generate both doc sets and view them in the browser"
 	@echo "help: this description"
-	@echo "Other, less common targets are available, see Makefile."
+	@echo "Other targets are available, see the Makefile."
 
 build-shared/juju-ui/templates.js: $(TEMPLATE_TARGETS) bin/generateTemplates
 	mkdir -p build-shared/juju-ui/assets
@@ -166,11 +166,17 @@
 view-main-doc: main-doc
 	xdg-open docs/_build/html/index.html
 
+sphinx:
+	@echo "Deprecated. Please run 'make main-doc' or 'make view-main-doc'."
+
 code-doc: yuidoc/index.html
 
 view-code-doc: code-doc
 	xdg-open yuidoc/index.html
 
+yuidoc:
+	@echo "Deprecated. Please run 'make code-doc' or 'make view-code-doc'."
+
 docs: code-doc main-doc
 
 view-docs: docs

=== modified file 'app/app.js'
--- app/app.js	2013-01-31 02:59:16 +0000
+++ app/app.js	2013-02-04 14:37:21 +0000
@@ -365,9 +365,13 @@
         });
       }
 
+      // Regardless of which view we are rendering
+      // update the env view on db change.
+      if (this.views.environment.instance) {
+        this.views.environment.instance.topo.update();
+      }
       // Redispatch to current view to update.
       if (active && active.name === 'EnvironmentView') {
-        active.update();
         active.rendered();
       } else {
         this.dispatch();

=== modified file 'app/views/topology/service.js'
--- app/views/topology/service.js	2013-01-31 02:59:16 +0000
+++ app/views/topology/service.js	2013-02-04 14:37:21 +0000
@@ -52,9 +52,7 @@
         dragstart: 'dragstart',
         drag: 'drag',
         dragend: 'dragend',
-        hideServiceMenu: {callback: function() {
-          this.service_click_actions.hideServiceMenu(null, this);
-        }},
+        hideServiceMenu: 'hideServiceMenu',
         rescaled: 'updateServiceMenuLocation'
       }
     },
@@ -68,19 +66,16 @@
     initializer: function(options) {
       ServiceModule.superclass.constructor.apply(this, arguments);
 
-      // Build a service.id -> BoundingBox map for services.
-      this.service_boxes = {};
-
       // Set a default
       this.set('currentServiceClickAction', 'toggleServiceMenu');
     },
 
-    serviceClick: function(d, context) {
+    serviceClick: function(box, self) {
       // Ignore if we clicked outside the actual service node.
-      var topo = context.get('component');
-      var container = context.get('container');
+      var topo = self.get('component');
+      var container = self.get('container');
       var mouse_coords = d3.mouse(container.one('svg').getDOMNode());
-      if (!d.containsPoint(mouse_coords, topo.zoom)) {
+      if (!box.containsPoint(mouse_coords, topo.zoom)) {
         return;
       }
       // serviceClick is being called after dragend is processed.  In those
@@ -90,26 +85,21 @@
         return;
       }
       // Get the current click action
-      var curr_click_action = context.get('currentServiceClickAction');
-      // Fire the action named in the following scheme:
-      //   service_click_action.<action>
-      // with the service, the SVG node, and the view
-      // as arguments.
-      context.service_click_actions[curr_click_action](
-          d, context, this);
+      var curr_click_action = self.get('currentServiceClickAction');
+      self[curr_click_action](box);
     },
 
-    serviceDblClick: function(d, self) {
+    serviceDblClick: function(box, self) {
       // Just show the service on double-click.
       var topo = self.get('component'),
-          service = d.model;
+          service = box.model;
       // The browser sends a click event right before the dblclick one, and it
       // opens the service menu: close it before moving to the service details.
-      self.service_click_actions.hideServiceMenu(null, self);
-      self.service_click_actions.show_service(service, self);
+      self.hideServiceMenu();
+      self.showService(box);
     },
 
-    serviceMouseEnter: function(d, context) {
+    serviceMouseEnter: function(box, context) {
       var rect = Y.one(this);
       // Do not fire if this service isn't selectable.
       if (!utils.hasSVGClass(rect, 'selectable-service')) {
@@ -120,19 +110,19 @@
       var topo = context.get('component');
       var container = context.get('container');
       var mouse_coords = d3.mouse(container.one('svg').getDOMNode());
-      if (!d.containsPoint(mouse_coords, topo.zoom)) {
+      if (!box.containsPoint(mouse_coords, topo.zoom)) {
         return;
       }
 
-      topo.fire('snapToService', { service: d, rect: rect });
+      topo.fire('snapToService', { service: box, rect: rect });
     },
 
-    serviceMouseLeave: function(d, context) {
+    serviceMouseLeave: function(box, context) {
       // Do not fire if we're within the service box.
       var topo = context.get('component');
       var container = context.get('container');
       var mouse_coords = d3.mouse(container.one('svg').getDOMNode());
-      if (d.containsPoint(mouse_coords, topo.zoom)) {
+      if (box.containsPoint(mouse_coords, topo.zoom)) {
         return;
       }
       var rect = Y.one(this).one('.service-border');
@@ -149,7 +139,7 @@
      * @param {object} context Unused.
      * @return {undefined} Side effects only.
      */
-    serviceMouseMove: function(d, context) {
+    serviceMouseMove: function(box, context) {
       var topo = context.get('component');
       topo.fire('mouseMove');
     },
@@ -159,13 +149,13 @@
      *
      * @method serviceStatusMouseOver
      **/
-    serviceStatusMouseOver: function(d, context) {
+    serviceStatusMouseOver: function(box, context) {
       d3.select(this)
         .select('.unit-count')
         .attr('class', 'unit-count show-count');
     },
 
-    serviceStatusMouseOut: function(d, context) {
+    serviceStatusMouseOut: function(box, context) {
       d3.select(this)
         .select('.unit-count')
         .attr('class', 'unit-count hide-count');
@@ -177,11 +167,11 @@
      *
      * @method canvasClick
      */
-    canvasClick: function(d, self) {
+    canvasClick: function(box, self) {
       var container = self.get('container'),
           topo = self.get('component');
       container.all('.environment-menu.active').removeClass('active');
-      self.service_click_actions.hideServiceMenu(null, self);
+      self.hideServiceMenu();
       topo.fire('clearState');
     },
 
@@ -190,15 +180,12 @@
      *
      * @method viewServiceClick
      */
-    viewServiceClick: function(d, context) {
+    viewServiceClick: function(_, self) {
       // Get the service element
-      var topo = context.get('component');
+      var topo = self.get('component');
       var box = topo.get('active_service');
-      var service = box.model;
-      context.service_click_actions
-             .hideServiceMenu(d, context);
-      context.service_click_actions
-             .show_service(service, context);
+      self.hideServiceMenu();
+      self.showService(box);
     },
 
     /**
@@ -206,23 +193,21 @@
      *
      * @method destroyServiceClick
      */
-    destroyServiceClick: function(data, context) {
+    destroyServiceClick: function(_, self) {
       // Get the service element
-      var topo = context.get('component');
+      var topo = self.get('component');
       var box = topo.get('active_service');
       var service = box;
-      context.service_click_actions
-             .hideServiceMenu(box, context);
-      context.service_click_actions
-             .destroyServiceConfirm(service, context);
+      self.hideServiceMenu(box);
+      self.destroyServiceConfirm(box);
     },
 
-    serviceAddRelMouseDown: function(d, context) {
+    serviceAddRelMouseDown: function(box, self) {
       var evt = d3.event;
-      var topo = context.get('component');
-      context.longClickTimer = Y.later(750, this, function(d, e) {
+      var topo = self.get('component');
+      self.longClickTimer = Y.later(750, this, function(d, e) {
         // Provide some leeway for accidental dragging.
-        if ((Math.abs(d.x - d.oldX) + Math.abs(d.y - d.oldY)) /
+        if ((Math.abs(box.x - box.oldX) + Math.abs(box.y - box.oldY)) /
             2 > 5) {
           return;
         }
@@ -232,14 +217,14 @@
         d3.event = e;
 
         // Start the process of adding a relation
-        topo.fire('addRelationDragStart', {service: d});
-      }, [d, evt], false);
+        topo.fire('addRelationDragStart', {service: box});
+      }, [box, evt], false);
     },
 
-    serviceAddRelMouseUp: function(d, context) {
+    serviceAddRelMouseUp: function(box, self) {
       // Cancel the long-click timer if it exists.
-      if (context.longClickTimer) {
-        context.longClickTimer.cancel();
+      if (self.longClickTimer) {
+        self.longClickTimer.cancel();
       }
     },
     /*
@@ -253,51 +238,45 @@
       var vis = topo.vis;
       var db = topo.get('db');
 
-      views.toBoundingBoxes(this, db.services, this.service_boxes);
-      this.services = Y.Object.values(this.service_boxes);
-
-      // XXX: containment breaking alias, do we need this?
-      topo.service_boxes = this.service_boxes;
+      views.toBoundingBoxes(this, db.services, topo.service_boxes);
 
       // Nodes are mapped by modelId tuples.
       this.node = vis.selectAll('.service')
-                     .data(this.services, function(d) {return d.modelId;});
+                     .data(Y.Object.values(topo.service_boxes),
+                           function(d) {return d.modelId;});
     },
 
     /**
      * Handle drag events for a service.
      *
-     * @param {object} svc A service object.
-     * @param {object} i Unused.
+     * @param {Box} box A bounding box.
+     * @param {Module} self Service Module.
      * @return {undefined} Side effects only.
      * @method dragstart
      */
-    dragstart: function(d, self) {
+    dragstart: function(box, self) {
       var topo = self.get('component');
-      d.oldX = d.x;
-      d.oldY = d.y;
-      d.inDrag = 1;
+      box.oldX = box.x;
+      box.oldY = box.y;
+      box.inDrag = 1;
     },
 
-    dragend: function(d,  self) {
+    dragend: function(box,  self) {
       var topo = self.get('component');
       if (topo.buildingRelation) {
         topo.ignoreServiceClick = true;
         topo.fire('addRelationDragEnd');
-        //d3.event.sourceEvent.preventDefault();
       }
       else {
-        if (!d.inDrag ||
-            (d.oldX === d.x &&
-             d.oldY === d.y)) {
+        if (!box.inDrag ||
+            (box.oldX === box.x &&
+             box.oldY === box.y)) {
           return;
         }
         topo.get('env').update_annotations(
-            d.id, {'gui.x': d.x, 'gui.y': d.y},
+            box.id, {'gui.x': box.x, 'gui.y': box.y},
             function() {
-              d.inDrag = false;
-              //self.drag.call(self.getServiceNode(d.id),
-              //               d, self, {x: d.x, y: d.y}, false);
+              box.inDrag = false;
             });
       }
     },
@@ -319,12 +298,12 @@
      * [At the time of this writing useTransition works in practice but
      * introduces a timing issue in the tests.]
      **/
-    drag: function(d, self, pos, includeTransition) {
+    drag: function(box, self, pos, includeTransition) {
       var topo = self.get('component');
       var selection = d3.select(this);
 
       if (topo.buildingRelation) {
-        topo.fire('addRelationDrag', { box: d });
+        topo.fire('addRelationDrag', { box: box });
         return;
       }
       if (self.longClickTimer) {
@@ -332,13 +311,13 @@
       }
       // Translate the service (and, potentially, menu).
       if (pos) {
-        d.x = pos.x;
-        d.y = pos.y;
+        box.x = pos.x;
+        box.y = pos.y;
         // Explicitly reassign data.
-        selection = selection.data([d]);
+        selection = selection.data([box]);
       } else {
-        d.x += d3.event.dx;
-        d.y += d3.event.dy;
+        box.x += d3.event.dx;
+        box.y += d3.event.dy;
       }
 
       if (includeTransition) {
@@ -350,7 +329,7 @@
       selection.attr('transform', function(d, i) {
         return d.translateStr;
       });
-      if (topo.get('active_service') === d) {
+      if (topo.get('active_service') === box) {
         self.updateServiceMenuLocation();
       }
 
@@ -358,13 +337,13 @@
       self.get('container').all('.environment-menu.active')
           .removeClass('active');
 
-      if (d.inDrag === 1) {
-        self.service_click_actions.hideServiceMenu(null, self);
-        d.inDrag = 2;
+      if (box.inDrag === 1) {
+        self.hideServiceMenu();
+        box.inDrag = 2;
       }
       topo.fire('cancelRelationBuild');
       // Update relation lines for just this service.
-      topo.fire('serviceMoved', { service: d });
+      topo.fire('serviceMoved', { service: box });
     },
 
     /*
@@ -414,9 +393,10 @@
       // around we layout only new nodes. This has the side
       // effect that service blocks can overlap and will
       // be fixed later.
-      var new_services = this.services.filter(function(boundingBox) {
-        return !Y.Lang.isNumber(boundingBox.x);
-      });
+      var new_services = Y.Object.values(topo.service_boxes)
+                          .filter(function(boundingBox) {
+                            return !Y.Lang.isNumber(boundingBox.x);
+                          });
       if (new_services) {
         this.tree.nodes({children: new_services});
       }
@@ -438,7 +418,7 @@
       // Remove old nodes.
       node.exit()
           .each(function(d) {
-            delete self.service_boxes[d.id];
+            delete topo.service_boxes[d.id];
           })
           .remove();
     },
@@ -821,15 +801,16 @@
 
       if (service && cp) {
         var cp_width = cp.getClientRect().width,
-                menu_left = service.x * z + service.w * z / 2 <
-                this.width * z / 2,
-                service_center = service.relativeCenter;
+            menu_left = (service.x * z + service.w * z / 2 <
+                         topo.get('width') * z / 2),
+            service_center = service.relativeCenter;
+
         if (menu_left) {
           cp.removeClass('left')
-                .addClass('right');
+            .addClass('right');
         } else {
           cp.removeClass('right')
-                .addClass('left');
+            .addClass('left');
         }
         // Set the position of the div in the following way:
         // top: aligned to the scaled/panned service minus the
@@ -846,153 +827,144 @@
       }
     },
 
-    /*
-     * Actions to be called on clicking a service.
-     */
-    service_click_actions: {
-      /**
-       * Show (if hidden) or hide (if shown) the service menu.
-       *
-       * @method toggleServiceMenu
-       * @param {object} box The presentation state for the service.
-       * @param {object} view The environment view.
-       * @param {object} context The service context.
-       * @return {undefined} Side effects only.
-       */
-      toggleServiceMenu: function(box, view, context) {
-        var serviceMenu = view.get('container').one('#service-menu');
-
-        if (serviceMenu.hasClass('active') || !box) {
-          this.hideServiceMenu(null, view);
-        } else {
-          this.showServiceMenu(box, view, context);
-        }
-      },
-
-      /**
-       * Show the service menu.
-       *
-       * @method showServiceMenu
-       * @param {object} box The presentation state for the service.
-       * @param {object} module The service module..
-       * @param {object} context The service context.
-       * @return {undefined} Side effects only.
-       */
-      showServiceMenu: function(box, module, context) {
-        var serviceMenu = module.get('container').one('#service-menu');
-        var topo = module.get('component');
-        var service = box.model;
-
-        if (box && !serviceMenu.hasClass('active')) {
-          topo.set('active_service', box);
-          topo.set('active_context', context);
-          serviceMenu.addClass('active');
-          // We do not want the user destroying the Juju GUI service.
-          if (utils.isGuiService(service)) {
-            serviceMenu.one('.destroy-service').addClass('disabled');
-          }
-          module.updateServiceMenuLocation();
-        }
-      },
-
-      /**
-       * Hide the service menu.
-       *
-       * @method hideServiceMenu
-       * @param {object} box The presentation state for the service (unused).
-       * @param {object} module The service module.
-       * @param {object} context The service context (unused).
-       * @return {undefined} Side effects only.
-       */
-      hideServiceMenu: function(box, module, context) {
-        var serviceMenu = module.get('container').one('#service-menu');
-        var topo = module.get('component');
-
-        if (serviceMenu.hasClass('active')) {
-          serviceMenu.removeClass('active');
-          topo.set('active_service', null);
-          topo.set('active_context', null);
-          // Most services can be destroyed via the GUI.
-          serviceMenu.one('.destroy-service').removeClass('disabled');
-        }
-      },
-
-      /*
-       * View a service
-       *
-       * @method show_service
-       */
-      show_service: function(m, context) {
-        var topo = context.get('component');
-        topo.detachContainer();
-        topo.fire('navigateTo', {url: '/service/' + m.get('id') + '/'});
-      },
-
-      /*
-       * Show a dialog before destroying a service
-       *
-       * @method destroyServiceConfirm
-       */
-      destroyServiceConfirm: function(m, view) {
-        // Set service in view.
-        view.set('destroy_service', m.model);
-
-        // Show dialog.
-        view.set('destroy_dialog', views.createModalPanel(
-            'Are you sure you want to destroy the service? ' +
-            'This cannot be undone.',
-            '#destroy-modal-panel',
-            'Destroy Service',
-            Y.bind(function(ev) {
-              ev.preventDefault();
-              var btn = ev.target;
-              btn.set('disabled', true);
-              view.service_click_actions
-              .destroyService(m, view, btn);
-            }, this)));
-      },
-
-      /*
-       * Destroy a service.
-       *
-       * @method destroyService
-       */
-      destroyService: function(m, view, btn) {
-        var env = view.get('component').get('env'),
-            service = view.get('destroy_service');
-        env.destroy_service(service.get('id'),
-                            Y.bind(this._destroyCallback, view,
-                                   service, view, btn));
-      },
-
-      _destroyCallback: function(service, view, btn, ev) {
-        var getModelURL = view.get('component').get('getModelURL'),
-            db = view.get('component').get('db');
-        if (ev.err) {
-          db.notifications.add(
-              new models.Notification({
-                title: 'Error destroying service',
-                message: 'Service name: ' + ev.service_name,
-                level: 'error',
-                link: getModelURL(service),
-                modelId: service
-              }));
-        } else {
-          var relations = db.relations.get_relations_for_service(service);
-          Y.each(relations, function(relation) {
-            relation.destroy();
-          });
-          service.destroy();
-          db.fire('update');
-        }
-        view.get('destroy_dialog').hide();
+    /**
+     * Show (if hidden) or hide (if shown) the service menu.
+     *
+     * @method toggleServiceMenu
+     * @param {object} box The presentation state for the service.
+     * @return {undefined} Side effects only.
+     */
+    toggleServiceMenu: function(box) {
+      var serviceMenu = this.get('container').one('#service-menu');
+
+      if (serviceMenu.hasClass('active') || !box) {
+        this.hideServiceMenu();
+      } else {
+        this.showServiceMenu(box);
+      }
+    },
+    /**
+     * Show the service menu.
+     *
+     * @method showServiceMenu
+     * @param {object} box The presentation state for the service.
+     * @return {undefined} Side effects only.
+     */
+    showServiceMenu: function(box) {
+      var serviceMenu = this.get('container').one('#service-menu');
+      var topo = this.get('component');
+      var service = box.model;
+
+      if (box && !serviceMenu.hasClass('active')) {
+        topo.set('active_service', box);
+        topo.set('active_context', box.node);
+        serviceMenu.addClass('active');
+        // We do not want the user destroying the Juju GUI service.
+        if (utils.isGuiService(service)) {
+          serviceMenu.one('.destroy-service').addClass('disabled');
+        }
+        this.updateServiceMenuLocation();
+      }
+    },
+
+    /**
+     * Hide the service menu.
+     *
+     * @method hideServiceMenu
+     * @return {undefined} Side effects only.
+     */
+    hideServiceMenu: function() {
+      var serviceMenu = this.get('container').one('#service-menu');
+      var topo = this.get('component');
+
+      if (serviceMenu.hasClass('active')) {
+        serviceMenu.removeClass('active');
+        topo.set('active_service', null);
+        topo.set('active_context', null);
+        // Most services can be destroyed via the GUI.
+        serviceMenu.one('.destroy-service').removeClass('disabled');
+      }
+    },
+
+    /*
+     * View a service
+     *
+     * @method showService
+     * @param {Box} box Bound Box of service to navigate to.
+     */
+    showService: function(d) {
+      var topo = this.get('component');
+      topo.detachContainer();
+      topo.fire('navigateTo', {url: '/service/' + d.id + '/'});
+    },
+
+    /*
+     * Show a dialog before destroying a service
+     *
+     * @method destroyServiceConfirm
+     */
+    destroyServiceConfirm: function(d) {
+      // Set service in view.
+      this.set('destroy_service', d.model);
+
+      // Show dialog.
+      this.set('destroy_dialog', views.createModalPanel(
+          'Are you sure you want to destroy the service? ' +
+          'This cannot be undone.',
+          '#destroy-modal-panel',
+          'Destroy Service',
+          Y.bind(function(ev) {
+            ev.preventDefault();
+            var btn = ev.target;
+            btn.set('disabled', true);
+            this._activeButton = btn;
+            this.destroyService(d, btn);
+          }, this)));
+    },
+
+    /*
+     * Destroy a service.
+     *
+     * @method destroyService
+     */
+    destroyService: function(d, btn) {
+      var env = this.get('component').get('env'),
+          service = this.get('destroy_service');
+      env.destroy_service(service.id,
+                          Y.bind(this._destroyCallback, this));
+    },
+
+    _destroyCallback: function(ev) {
+      var getModelURL = this.get('component').get('getModelURL'),
+          service = this.get('destroy_service'),
+          db = this.get('component').get('db');
+
+      if (ev.err) {
+        db.notifications.add(new models.Notification({
+          title: 'Error destroying service',
+          message: 'Service name: ' + ev.service_name,
+          level: 'error',
+          link: getModelURL(service),
+          modelId: service
+        }));
+      } else {
+        var relations = db.relations.get_relations_for_service(service);
+        Y.each(relations, function(relation) {
+          relation.destroy();
+        });
+        service.destroy();
+        db.fire('update');
+      }
+      this.get('destroy_dialog').hide();
+      var btn = this._activeButton;
+      if (btn) {
         btn.set('disabled', false);
+        this._activeButton = undefined;
       }
-
     }
+
   }, {
     ATTRS: {}
-
   });
 
   views.ServiceModule = ServiceModule;

=== modified file 'app/views/topology/topology.js'
--- app/views/topology/topology.js	2013-01-30 12:38:03 +0000
+++ app/views/topology/topology.js	2013-02-04 14:37:21 +0000
@@ -32,6 +32,9 @@
         maxZoom: 200
       });
 
+      // Build a service.id -> BoundingBox map for services.
+      this.service_boxes = {};
+
       this._subscriptions = [];
     },
 

=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-01-31 00:18:46 +0000
+++ app/views/utils.js	2013-02-04 14:37:21 +0000
@@ -607,14 +607,22 @@
   };
 
 
-  /*
-   * Utility class that encapsulates Y.Models and keeps their position
-   * state within an svg canvas.
+  /**
+   * Utility object that encapsulates Y.Models and keeps their position
+   * state within an SVG canvas.
    *
    * As a convenience attributes of the encapsulated model are exposed
    * directly as attributes.
-   */
+   *
+   * @class BoundingBox
+   * @param {Module} module Service module.
+   * @param {Model} model Service model.
+   **/
+
+  // Internal base object
   var _box = {};
+
+  // Internal descriptor generator.
   function positionProp(name) {
     return {
       get: function() {return this['_' + name];},
@@ -625,6 +633,7 @@
     };
   }
 
+  // Box Properties (and methods).
   Object.defineProperties(_box, {
     x: positionProp('x'),
     y: positionProp('y'),
@@ -841,7 +850,7 @@
    * @param {Module} module Typically service module.
    * @param {Model} model Model object.
    * @return {BoundingBox} A Box model.
-   */
+   **/
   function BoundingBox(module, model) {
     var b = Object.create(_box);
     b.module = module;
@@ -858,6 +867,7 @@
    * and will be updated in place by merging changed attribute
    * into the index.
    *
+   * @method toBoundingBoxes
    * @param {ServiceModule} Module holding box canvas and context.
    * @param {ModelList} services Service modellist.
    * @param {Object} existing id:box mapping.
@@ -877,7 +887,6 @@
   };
 
 
-
   /**
    * Decorate a relation with some related/derived data.
    *
@@ -886,7 +895,8 @@
    * @param {Object} source The service from which the relation originates.
    * @param {Object} target The service at which the relation terminates.
    * @return {Object} An object with attributes matching the result of
-   * relation.getAttrs() plus "source", "target", and other convenience data.
+   *                  relation.getAttrs() plus "source", "target",
+   *                  and other convenience data.
    */
   views.DecoratedRelation = function(relation, source, target) {
     var hasRelations = Y.Lang.isValue(relation.endpoints);

=== modified file 'docs/process.rst'
--- docs/process.rst	2013-01-25 15:44:49 +0000
+++ docs/process.rst	2013-02-04 14:37:21 +0000
@@ -89,29 +89,29 @@
 - Run ``python improv.py -f sample.json`` in the ``rapi-rollup`` Juju branch,
   and run ``make server`` with the ``juju-ui`` branch.
 
-  * Do not forget to clear the browser cache: ``index.html`` may be sticking
+  - Do not forget to clear the browser cache: ``index.html`` may be sticking
     around because of the cache.manifest.
-  * Verify that the browser reports no 404s and no Javascript errors in the
+  - Verify that the browser reports no 404s and no Javascript errors in the
     console.
-  * QA the changes if possible, exploring different use cases (and edge cases).
-  * Spend between 60 and 120 seconds exploring the entire app.  Do different
+  - QA the changes if possible, exploring different use cases (and edge cases).
+  - Spend between 60 and 120 seconds exploring the entire app.  Do different
     things every time.  Try to break the app, generally.
 
 - [Once we support multiple browsers, try them all, at least briefly.]
 - Review the diff, including notes from the above as appropriate.
 
-  * Make sure that new code has tests.
-  * Make sure user-facing changes are described in ``CHANGES.yaml``.
-  * Make sure you can understand the new code.  Ask for clarification if
+  - Make sure that new code has tests.
+  - Make sure user-facing changes are described in ``CHANGES.yaml``.
+  - Make sure you can understand the new code.  Ask for clarification if
     necessary.
-  * Consider the advice in this preferred `Software Architecture Cheat Sheet
+  - Consider the advice in this preferred `Software Architecture Cheat Sheet
     <http://gorban.org/post/32873465932/software-architecture-cheat-sheet>`_
-  * Make sure changes to a file correspond to the naming conventions and other
+  - Make sure changes to a file correspond to the naming conventions and other
     stylistic considerations local to that file, and within our project.
-  * Before you ask for a change, think and make sure you cannot compromise
+  - Before you ask for a change, think and make sure you cannot compromise
     reasonably with the coder.  If there is a low importance disagreement, in
     general the coder's position should win.
-  * Only make a rework request if absolutely necessary.  They are very
+  - Only make a rework request if absolutely necessary.  They are very
     expensive in time, money, and morale.  One way to think about it is to
     imagine filing a bug for the problem you see.  Are you confident it is a
     bug?  If not, reconsider.  If it would be a bug, how would you triage it?
@@ -143,54 +143,66 @@
   <https://launchpad.net/juju-gui/stable>.  If the most recent version string
   is ``unreleased``, do the following.
 
-  * Decide what the next version number should be (see `Semantic Versioning
+  - Decide what the next version number should be (see `Semantic Versioning
     <http://semver.org/>`_) and change ``unreleased`` to that value.
-  * Set a bzr tag for the release, e.g.: ``bzr tag 0.1.5``.
-  * Commit to the branch with this checkin message:
+  - Set a bzr tag for the release, e.g.: ``bzr tag 0.1.5``.
+  - Commit to the branch with this checkin message:
     ``bzr commit -m 'Set version for release.'``
-  * Push the branch directly to the parent (``bzr push :parent`` should work).
+  - Push the branch directly to the parent (``bzr push :parent`` should work).
 
 - Run the tests and verify they pass: ``make test-prod`` and then
   ``make test-debug``.
 - Create the tarball: ``FINAL=1 make distfile``.  The process will end by
   reporting the name of the tarball it made.
 - In an empty temporary directory somewhere else on your system, expand the
-  tarball: ``tar xvzf PATH_TO_TARBALL``
-- While still in the directory where you extracted the tar file, change to the
-  ``build-prod`` directory and start a server: ``python -m SimpleHTTPServer
-  8888``.
+  tarball: ``tar xvzf PATH_TO_TARBALL``.
+- Check that read and execute permissions for all are present on all files
+  and directories, especially in the ``node_modules/`` directory.
+- Ensure that the ``build-prod/juju-ui/version.js`` file contains a version
+  string that combines the value in the branch's ``CHANGES.yaml`` with the
+  branch's revno.
+- While still in the directory where you extracted the tar file, run the
+  command: ``NO_BZR=1 make prod``.  Go to the URL shown in the terminal.
 - In Chrome and Firefox, QA the application.  At the very least, load the app,
   open the charm panel, go to an inner page, and make sure there are no 404s
-  or Javascript errors in the console.  We want a real QA script for the
-  future.
+  or Javascript errors in the console.  Ensure that the ``/juju-ui/version.js``
+  URL shows the same version string as before.  We want a real QA script for
+  the future.
+- Also do the same checks after running the command ``NO_BZR=1 make debug``.
 - For now, we will assume you would like to verify the release on the
   Launchpad staging server.  As we become more confident with this process,
   this step may become unnecessary.  In the branch, run ``FINAL=1 make
-  dist``.  This will step you through signing the tarball, connecting
-  to Launchpad, and uploading the release.
+  dist``.  This will step you through signing the tarball, connecting to
+  Launchpad, and uploading the release.
 
-  * Note that you may need to ask the webops to turn off the two-factor
-    authentication on your Launchpad staging account in order for this to
-    work. Go to the ``#launchpad-ops`` channel on the Canonical IRC server and
-    ask something like "webops, could you disable 2FA on my staging account?"
-  * When Launchpad asks you what level of permissions to grant, assuming you
+  - If you have two-factor authentication enabled on Launchpad, the staging
+    server will ask for a one-time password: be sure to have your device
+    available. (If you are a Canonical collaborator, you may try and ask the
+    webops to turn off the two-factor authentication on your Launchpad staging
+    account, but it may not be possible anyway. Go to the ``#u1-as`` channel
+    on the Canonical IRC server and ask something like "webops, could you
+    disable 2FA on my staging account?")
+  - When Launchpad asks you what level of permissions to grant, assuming you
     are running on your own computer that you manage securely, the easiest
     thing to do is hopefully also reasonably safe: accept that the computer
     may perform all actions, indefinitely.
-  * Go to <https://staging.launchpad.net/juju-gui/stable> and verify that you
+  - Go to <https://staging.launchpad.net/juju-gui/stable> and verify that you
     see a new release and a new download file.
-  * Download the file, expand it in a temporary directory, run ``python -m
-    SimpleHTTPServer 8888``, and do a quick double-check in the browser that
-    it is what you expect.  Looking at ``juju-ui/version.js`` should also show
-    you the version you expect.
-  * This is a final release.  Consider asking others to verify the package on
-    staging.
+  - Download the file and compare it to the original tarball in the
+    ``release/`` directory, verifying that they are identical (hint: use the
+    ``cmp`` command).
+  - This is a final release.  Consider asking others to verify the package on
+    staging. If there are problems, you will have to delete the release from
+    staging, fix the problems and restart the process. However, *do not*
+    reuse the version number that you deleted.  A deleted release is dead,
+    not invisible, and the next, fixed release should increase the revision
+    number.
 
 - Now it is time for the actual, real release.  Head back to your branch and
   run ``FINAL=1 PROD=1 make dist``.  The computer will again walk you
-  through the process.
+  through the process and upload the release, this time to production.
 
-  * Note that, one time per computer, you will again have to accept the
+  - Note that, one time per computer, you will again have to accept the
     Launchpadlib security token: In Launchpad, the staging site and the
     production have fully separate databases, including authentication.  What
     is done in production will in many cases eventually be copied over to
@@ -198,14 +210,13 @@
 
 - Go to <https://launchpad.net/juju-gui/stable> and verify that you see
   a new release and a new download file.
-
 - Set the version back to ``unreleased`` by doing the following.
 
-  * Restore ``- unreleased:`` as most recent version string in
+  - Restore ``- unreleased:`` as most recent version string in
     ``CHANGES.yaml``.
-  * Commit to the branch with this checkin message:
+  - Commit to the branch with this checkin message:
     ``bzr commit -m 'Set version back to unreleased.'``
-  * Push the branch directly to the parent (``bzr push :parent`` should work).
+  - Push the branch directly to the parent (``bzr push :parent`` should work).
 
 You are done!
 
@@ -220,46 +231,51 @@
   found on `Launchpad <https://launchpad.net/juju-gui/trunk>`_.
 - Run the tests and verify they pass: ``make test-prod`` and then
   ``make test-debug``.
-- Create the tarball: ``make distfile``.  It will end by reporting the name of
-  the tarball it made.
+- Create the tarball: ``make distfile``.  The process will end by reporting
+  the name of the tarball it made.
 - In an empty temporary directory somewhere else on your system, expand the
   tarball: ``tar xvzf PATH_TO_TARBALL``.
-- Looking at ``build-prod/juju-ui/version.js`` should show you a version string
-  that combines the value in the branch's ``CHANGES.yaml`` with the branch's
-  revno.
-- While still in the directory where you extracted the tar file, change to the
-  ``build-prod`` directory and start a server: ``python -m SimpleHTTPServer
-  8888``.
+- Check that read and execute permissions for all are present on all files
+  and directories, especially in the ``node_modules/`` directory.
+- Ensure that the ``build-prod/juju-ui/version.js`` file contains a version
+  string that combines the value in the branch's ``CHANGES.yaml`` with the
+  branch's revno.
+- While still in the directory where you extracted the tar file, run the
+  command: ``NO_BZR=1 make prod``.  Go to the URL shown in the terminal.
 - In Chrome and Firefox, QA the application.  At the very least, load the app,
   open the charm panel, go to an inner page, and make sure there are no 404s
-  or Javascript errors in the console.  We want a real QA script for the
-  future.
+  or Javascript errors in the console.  Ensure that the ``/juju-ui/version.js``
+  URL shows the same version string as before.  We want a real QA script for
+  the future.
+- Also do the same checks after running the command ``NO_BZR=1 make debug``.
 - For now, we will assume you would like to verify the release on the
   Launchpad staging server.  As we become more confident with this process,
   this step may become unnecessary.  In the branch, run ``make dist``.
   This will step you through signing the tarball, connecting to
   Launchpad, and uploading the release.
 
-  * Note that you may need to ask the webops to turn off the two-factor
-    authentication on your Launchpad staging account in order for this to
-    work. Go to the ``#launchpad-ops`` channel on the Canonical IRC server and
-    ask something like "webops, could you disable 2FA on my staging account?"
-  * When Launchpad asks you what level of permissions to grant, assuming you
+  - If you have two-factor authentication enabled on Launchpad, the staging
+    server will ask for a one-time password: be sure to have your device
+    available. (If you are a Canonical collaborator, you may try and ask the
+    webops to turn off the two-factor authentication on your Launchpad staging
+    account, but it may not be possible anyway. Go to the ``#u1-as`` channel
+    on the Canonical IRC server and ask something like "webops, could you
+    disable 2FA on my staging account?")
+  - When Launchpad asks you what level of permissions to grant, assuming you
     are running on your own computer that you manage securely, the easiest
     thing to do is hopefully also reasonably safe: accept that the computer
     may perform all actions, indefinitely.
-  * Go to <https://staging.launchpad.net/juju-gui/trunk> and verify that you
+  - Go to <https://staging.launchpad.net/juju-gui/trunk> and verify that you
     see a new release and a new download file.
-  * Download the file, expand it in a temporary directory, run ``python -m
-    SimpleHTTPServer 8888``, and do a quick double-check in the browser that
-    it is what you expect.  Looking at ``juju-ui/version.js`` should also show
-    you the version you expect, as seen in the similar earlier step above.
+  - Download the file and compare it to the original tarball in the
+    ``release/`` directory, verifying that they are identical (hint: use the
+    ``cmp`` command).
 
 - Now it is time for the actual, real release.  Head back to your branch and
   run ``PROD=1 make dist``.  The computer will again walk you through the
-  process.
+  process and upload the release.
 
-  * Note that, one time per computer, you will again have to accept the
+  - Note that, one time per computer, you will again have to accept the
     Launchpadlib security token: In Launchpad, the staging site and the
     production have fully separate databases, including authentication.  What
     is done in production will in many cases eventually be copied over to

=== modified file 'lib/server.js'
--- lib/server.js	2012-12-20 21:59:21 +0000
+++ lib/server.js	2013-02-04 14:37:21 +0000
@@ -35,9 +35,6 @@
   console.log('Regenerating Views');
 });
 
-// Handles requests to the root path ('/') my simply sending the 'shell' page
-// which creates the `Y.App` instance.
-
 server.get('/stats/', function(req, res) {
   res.json({
     uptime: process.uptime(),
@@ -61,8 +58,7 @@
 });
 
 server.get('/juju-ui/:file', function(req, res) {
-  var fileName = req.params.file;
-  res.sendfile('build-shared/juju-ui/' + fileName);
+  res.sendfile('build-shared/juju-ui/' + req.params.file);
 });
 
 server.get('/juju-ui/assets/combined-css/:file', function(req, res) {
@@ -73,6 +69,8 @@
   res.sendfile('app/favicon.ico');
 });
 
+// Handles requests to the root ('/') and all other paths by
+// sending the 'shell' page that creates the `Y.App` instance.
 server.get('*', function(req, res) {
   res.sendfile('app/index.html');
 });

=== modified file 'test/test_application_notifications.js'
--- test/test_application_notifications.js	2013-01-23 21:50:57 +0000
+++ test/test_application_notifications.js	2013-02-04 14:37:21 +0000
@@ -237,9 +237,7 @@
         var module = view.topo.modules.ServiceModule;
         // The callback hides the destroy dialog at the end of the process.
         module.set('destroy_dialog', {hide: NO_OP});
-        // The _destroyCallback args are: service, view, confirm button, event.
-        var args = [{}, module, {set: NO_OP}, ERR_EV];
-        module.service_click_actions._destroyCallback.apply(module, args);
+        module._destroyCallback.call(module, ERR_EV);
         assert.equal(1, db.notifications.size());
       });
 

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2013-01-31 02:59:16 +0000
+++ test/test_environment_view.js	2013-02-04 14:37:21 +0000
@@ -665,10 +665,8 @@
          var module = view.topo.modules.RelationModule;
          var sm = view.topo.modules.ServiceModule;
 
-         sm.service_click_actions.toggleServiceMenu(
-             d3.select(service.getDOMNode()).datum(),
-             sm,
-             service);
+         sm.toggleServiceMenu(
+             d3.select(service.getDOMNode()).datum());
          // Mock an event object so that d3.mouse does not throw a NPE.
          d3.event = {};
          add_rel.simulate('click');
@@ -858,12 +856,12 @@
          // Use pos to set b2
          b2.pos = {x: 200, y: 300, w: 100, h: 200};
 
-         // update using property
+         // Update using property.
          b1.x = 100;
          b1.x.should.equal(100);
          b1.px.should.equal(0);
 
-         // update using pos
+         // Update using position.
          b2.pos = {x: 300};
          b2.x.should.equal(300);
          b2.px.should.equal(200);
@@ -875,7 +873,7 @@
 
       b1.modelId.should.equal('service-mediawiki');
 
-      // properties of the model have mapped to the box
+      // Properties of the model have mapped to the box.
       b1.id.should.equal('mediawiki');
       b1.exposed.should.equal(true);
     });

=== modified file 'test/test_service_module.js'
--- test/test_service_module.js	2013-01-31 16:54:09 +0000
+++ test/test_service_module.js	2013-02-04 14:37:21 +0000
@@ -77,7 +77,8 @@
 });
 
 describe('service module events', function() {
-  var db, juju, models, serviceModule, view, viewContainer, views, Y;
+  var db, juju, models, serviceModule, topo,
+      view, viewContainer, views, Y;
   before(function(done) {
     Y = YUI(GlobalConfig).use(['node',
       'juju-models',
@@ -105,7 +106,8 @@
     });
     view.render();
     view.rendered();
-    serviceModule = view.topo.modules.ServiceModule;
+    topo = view.topo;
+    serviceModule = topo.modules.ServiceModule;
   });
 
   afterEach(function() {
@@ -116,44 +118,37 @@
 
   it('should toggle the service menu',
      function() {
-       var box = serviceModule.service_boxes.haproxy;
+       var box = topo.service_boxes.haproxy;
        var menu = viewContainer.one('#service-menu');
        assert.isFalse(menu.hasClass('active'));
-       serviceModule.service_click_actions.toggleServiceMenu(
-           box, serviceModule, serviceModule);
+       serviceModule.toggleServiceMenu(box);
        assert(menu.hasClass('active'));
-       serviceModule.service_click_actions.toggleServiceMenu(
-           box, serviceModule, serviceModule);
+       serviceModule.toggleServiceMenu(box);
        assert.isFalse(menu.hasClass('active'));
      });
 
   it('should show the service menu',
      function() {
-       var box = serviceModule.service_boxes.haproxy;
+       var box = topo.service_boxes.haproxy;
        var menu = viewContainer.one('#service-menu');
        assert.isFalse(menu.hasClass('active'));
-       serviceModule.service_click_actions.showServiceMenu(
-           box, serviceModule, serviceModule);
+       serviceModule.showServiceMenu(box);
        assert(menu.hasClass('active'));
        // Check no-op.
-       serviceModule.service_click_actions.showServiceMenu(
-           box, serviceModule, serviceModule);
+       serviceModule.showServiceMenu(box);
        assert(menu.hasClass('active'));
      });
 
   it('should hide the service menu',
      function() {
-       var box = serviceModule.service_boxes.haproxy;
+       var box = topo.service_boxes.haproxy;
        var menu = viewContainer.one('#service-menu');
-       serviceModule.service_click_actions.showServiceMenu(
-           box, serviceModule, serviceModule);
+       serviceModule.showServiceMenu(box);
        assert(menu.hasClass('active'));
-       serviceModule.service_click_actions.hideServiceMenu(
-           null, serviceModule);
+       serviceModule.hideServiceMenu();
        assert.isFalse(menu.hasClass('active'));
        // Check no-op.
-       serviceModule.service_click_actions.hideServiceMenu(
-           null, serviceModule);
+       serviceModule.hideServiceMenu();
        assert.isFalse(menu.hasClass('active'));
      });
 
@@ -161,7 +156,7 @@
   // Return the service menu.
   var clickService = function(service) {
     // Monkeypatch to avoid the click event handler bailing out early.
-    serviceModule.service_boxes.haproxy.containsPoint = function() {
+    topo.service_boxes.haproxy.containsPoint = function() {
       return true;
     };
     // Click the service.
@@ -241,8 +236,7 @@
     var menu = view.get('container').one('#service-menu');
     view.topo.set('active_service', service);
 
-    serviceModule.service_click_actions
-                 .toggleServiceMenu(box, serviceModule, serviceModule);
+    serviceModule.toggleServiceMenu(box);
     menu.one('.destroy-service').hasClass('disabled').should.equal(true);
   });
 
@@ -256,10 +250,10 @@
         { id: 'wordpress',
           containsPoint: function() { return true; }
         };
-    serviceModule.service_click_actions.fake = function() {
+    serviceModule.fakeAction = function() {
       called = true;
     };
-    serviceModule.set('currentServiceClickAction', 'fake');
+    serviceModule.set('currentServiceClickAction', 'fakeAction');
     topo.ignoreServiceClick = true;
     serviceModule.serviceClick(d, serviceModule);
     assert.isFalse(called);

=== modified file 'undocumented'
--- undocumented	2013-01-31 00:02:54 +0000
+++ undocumented	2013-02-04 14:37:21 +0000
@@ -1,16 +1,16 @@
-app/store/env.js:73 "on_open"
-app/store/env.js:229 "get_service"
-app/store/env.js:115 "_dispatch_event"
-app/store/env.js:79 "on_message"
-app/store/env.js:404 "get_endpoints"
-app/store/env.js:110 "dispatch_result"
-app/store/env.js:309 "status"
-app/store/env.js:75 "on_close"
-app/store/env.js:57 "connect"
-app/store/env.js:34 "initializer"
-app/store/env.js:123 "_dispatch_rpc_result"
-app/store/env.js:52 "destructor"
-app/store/env.js:225 "get_charm"
+app/store/env.js:53 "destructor"
+app/store/env.js:230 "get_service"
+app/store/env.js:74 "on_open"
+app/store/env.js:124 "_dispatch_rpc_result"
+app/store/env.js:76 "on_close"
+app/store/env.js:116 "_dispatch_event"
+app/store/env.js:58 "connect"
+app/store/env.js:35 "initializer"
+app/store/env.js:311 "status"
+app/store/env.js:111 "dispatch_result"
+app/store/env.js:80 "on_message"
+app/store/env.js:226 "get_charm"
+app/store/env.js:406 "get_endpoints"
 app/store/charm.js:24 "find"
 app/store/charm.js:11 "success"
 app/store/charm.js:65 "_normalizeCharms"
@@ -25,69 +25,69 @@
 app/store/notifications.js:25 "message"
 app/store/notifications.js:129 "title"
 app/store/notifications.js:137 "message"
-app/views/utils.js:732 "scale"
+app/views/utils.js:818 "value"
 app/views/utils.js:166 "substitute"
+app/views/utils.js:621 "set"
 app/views/utils.js:251 "hasSVGClass"
-app/views/utils.js:637 "get"
 app/views/utils.js:296 "toggleSVGClass"
-app/views/utils.js:784 "value"
-app/views/utils.js:698 "get"
+app/views/utils.js:710 "get"
 app/views/utils.js:135 "noop"
+app/views/utils.js:791 "value"
 app/views/utils.js:259 "addSVGClass"
+app/views/utils.js:642 "get"
+app/views/utils.js:728 "scale"
+app/views/utils.js:646 "get"
 app/views/utils.js:577 "isFloat"
 app/views/utils.js:218 "renderable_charm"
+app/views/utils.js:726 "value"
 app/views/utils.js:138 "console"
-app/views/utils.js:730 "value"
 app/views/utils.js:113 "noop"
 app/views/utils.js:280 "removeSVGClass"
-app/views/utils.js:714 "get"
 app/views/utils.js:371 "_addAlertMessage"
 app/views/utils.js:228 "humanizeNumber"
+app/views/utils.js:635 "get"
 app/views/utils.js:339 "action"
+app/views/utils.js:658 "get"
 app/views/utils.js:618 "positionProp"
+app/views/utils.js:729 "translate"
+app/views/utils.js:636 "set"
 app/views/utils.js:195 "bindModelView"
 app/views/utils.js:667 "get"
-app/views/utils.js:644 "get"
-app/views/utils.js:622 "set"
+app/views/utils.js:620 "get"
 app/views/utils.js:573 "isInt"
-app/views/utils.js:638 "set"
-app/views/utils.js:822 "value"
 app/views/utils.js:670 "get"
-app/views/utils.js:673 "get"
-app/views/utils.js:749 "get"
-app/views/utils.js:733 "translate"
-app/views/utils.js:681 "get"
-app/views/utils.js:621 "get"
+app/views/utils.js:677 "get"
+app/views/utils.js:650 "set"
+app/views/utils.js:694 "get"
 app/views/utils.js:419 "invokeCallback"
 app/views/utils.js:661 "get"
-app/views/utils.js:653 "set"
 app/views/utils.js:664 "get"
-app/views/utils.js:649 "get"
 app/views/utils.js:132 "native"
-app/views/utils.js:795 "value"
+app/views/utils.js:745 "get"
+app/views/utils.js:780 "value"
 app/views/environment.js:24 "initializer"
-app/views/charm-panel.js:1168 "calculatePanelPosition"
-app/views/charm-panel.js:476 "initializer"
-app/views/charm-panel.js:250 "render"
-app/views/charm-panel.js:901 "onCharmDeployClicked"
-app/views/charm-panel.js:976 "createInstance"
-app/views/charm-panel.js:764 "hideDescription"
-app/views/charm-panel.js:1022 "setPanel"
-app/views/charm-panel.js:332 "showConfiguration"
-app/views/charm-panel.js:1151 "updatePanelPosition"
-app/views/charm-panel.js:1213 "killInstance"
-app/views/charm-panel.js:655 "render"
-app/views/charm-panel.js:1198 "setDefaultSeries"
-app/views/charm-panel.js:195 "mouseleave"
-app/views/charm-panel.js:417 "_showErrors"
-app/views/charm-panel.js:651 "initializer"
-app/views/charm-panel.js:480 "render"
-app/views/charm-panel.js:751 "showDescription"
-app/views/charm-panel.js:725 "_moveTooltip"
-app/views/charm-panel.js:209 "initializer"
-app/views/charm-panel.js:964 "setupOverlay"
-app/views/charm-panel.js:192 "mouseenter"
-app/views/charm-panel.js:1207 "getInstance"
+app/views/charm-panel.js:1209 "setDefaultSeries"
+app/views/charm-panel.js:196 "mouseleave"
+app/views/charm-panel.js:762 "showDescription"
+app/views/charm-panel.js:975 "setupOverlay"
+app/views/charm-panel.js:422 "_showErrors"
+app/views/charm-panel.js:987 "createInstance"
+app/views/charm-panel.js:251 "render"
+app/views/charm-panel.js:1162 "updatePanelPosition"
+app/views/charm-panel.js:193 "mouseenter"
+app/views/charm-panel.js:1224 "killInstance"
+app/views/charm-panel.js:736 "_moveTooltip"
+app/views/charm-panel.js:660 "initializer"
+app/views/charm-panel.js:1218 "getInstance"
+app/views/charm-panel.js:210 "initializer"
+app/views/charm-panel.js:1179 "calculatePanelPosition"
+app/views/charm-panel.js:333 "showConfiguration"
+app/views/charm-panel.js:485 "render"
+app/views/charm-panel.js:481 "initializer"
+app/views/charm-panel.js:664 "render"
+app/views/charm-panel.js:912 "onCharmDeployClicked"
+app/views/charm-panel.js:1033 "setPanel"
+app/views/charm-panel.js:775 "hideDescription"
 app/views/charm.js:32 "render"
 app/views/charm.js:161 "on_results_change"
 app/views/charm.js:118 "render"
@@ -154,65 +154,65 @@
 app/views/topology/panzoom.js:123 "_fire_zoom"
 app/views/topology/panzoom.js:105 "zoom_out"
 app/views/topology/panzoom.js:33 "componentBound"
-app/views/topology/relation.js:836 "relationClick"
-app/views/topology/relation.js:517 "cancelRelationBuild"
-app/views/topology/relation.js:429 "addRelationDragEnd"
-app/views/topology/relation.js:55 "initializer"
-app/views/topology/relation.js:593 "addRelationStart"
-app/views/topology/relation.js:367 "snapOutOfService"
-app/views/topology/relation.js:65 "update"
-app/views/topology/relation.js:274 "addRelButtonClicked"
-app/views/topology/relation.js:237 "drawRelation"
-app/views/topology/relation.js:84 "renderedHandler"
-app/views/topology/relation.js:460 "_removeRelationCallback"
-app/views/topology/relation.js:295 "addRelation"
-app/views/topology/relation.js:174 "drawRelationGroup"
-app/views/topology/relation.js:60 "render"
-app/views/topology/relation.js:689 "addRelationEnd"
-app/views/topology/relation.js:267 "draglineClicked"
-app/views/topology/relation.js:485 "removeRelationConfirm"
-app/views/topology/relation.js:409 "addRelationDrag"
-app/views/topology/relation.js:88 "processRelation"
-app/views/topology/relation.js:772 "subordinateRelationsForService"
-app/views/topology/relation.js:728 "_addRelationCallback"
-app/views/topology/relation.js:605 "ambiguousAddRelationCheck"
-app/views/topology/relation.js:252 "updateSubordinateRelationsCount"
-app/views/topology/relation.js:338 "snapToService"
-app/views/topology/relation.js:779 "subRelBlockMouseEnter"
-app/views/topology/relation.js:383 "addRelationDragStart"
-app/views/topology/relation.js:128 "updateLinks"
-app/views/topology/relation.js:448 "removeRelation"
-app/views/topology/relation.js:788 "subRelBlockMouseLeave"
-app/views/topology/service.js:893 "show_service"
-app/views/topology/service.js:112 "serviceMouseEnter"
-app/views/topology/service.js:731 "hide"
-app/views/topology/service.js:208 "serviceAddRelMouseDown"
-app/views/topology/service.js:130 "serviceMouseLeave"
-app/views/topology/service.js:737 "fade"
-app/views/topology/service.js:166 "serviceStatusMouseOut"
-app/views/topology/service.js:78 "serviceClick"
-app/views/topology/service.js:68 "initializer"
-app/views/topology/service.js:267 "dragend"
-app/views/topology/service.js:227 "serviceAddRelMouseUp"
-app/views/topology/service.js:784 "updateServiceMenuLocation"
-app/views/topology/service.js:725 "show"
-app/views/topology/service.js:102 "serviceDblClick"
-app/views/topology/service.js:924 "destroyService"
-app/views/topology/service.js:359 "update"
-app/views/topology/service.js:902 "destroyServiceConfirm"
-app/views/topology/service.js:236 "updateData"
-app/views/topology/service.js:932 "_destroyCallback"
-app/views/topology/service.js:756 "renderedHandler"
-app/views/topology/topology.js:163 "getter"
-app/views/topology/topology.js:172 "setter"
-app/views/topology/topology.js:159 "getter"
-app/views/topology/topology.js:109 "computeScales"
-app/views/topology/topology.js:176 "getter"
-app/views/topology/topology.js:171 "getter"
-app/views/topology/topology.js:139 "serviceForBox"
-app/views/topology/topology.js:177 "setter"
-app/views/topology/topology.js:26 "initializer"
-app/views/topology/topology.js:63 "renderOnce"
+app/views/topology/relation.js:610 "ambiguousAddRelationCheck"
+app/views/topology/relation.js:522 "cancelRelationBuild"
+app/views/topology/relation.js:260 "updateSubordinateRelationsCount"
+app/views/topology/relation.js:694 "addRelationEnd"
+app/views/topology/relation.js:343 "snapToService"
+app/views/topology/relation.js:372 "snapOutOfService"
+app/views/topology/relation.js:490 "removeRelationConfirm"
+app/views/topology/relation.js:453 "removeRelation"
+app/views/topology/relation.js:73 "update"
+app/views/topology/relation.js:68 "render"
+app/views/topology/relation.js:92 "renderedHandler"
+app/views/topology/relation.js:434 "addRelationDragEnd"
+app/views/topology/relation.js:300 "addRelation"
+app/views/topology/relation.js:63 "initializer"
+app/views/topology/relation.js:843 "relationClick"
+app/views/topology/relation.js:777 "subordinateRelationsForService"
+app/views/topology/relation.js:794 "subRelBlockMouseLeave"
+app/views/topology/relation.js:598 "addRelationStart"
+app/views/topology/relation.js:136 "updateLinks"
+app/views/topology/relation.js:414 "addRelationDrag"
+app/views/topology/relation.js:733 "_addRelationCallback"
+app/views/topology/relation.js:96 "processRelation"
+app/views/topology/relation.js:182 "drawRelationGroup"
+app/views/topology/relation.js:785 "subRelBlockMouseEnter"
+app/views/topology/relation.js:245 "drawRelation"
+app/views/topology/relation.js:272 "draglineClicked"
+app/views/topology/relation.js:279 "addRelButtonClicked"
+app/views/topology/relation.js:388 "addRelationDragStart"
+app/views/topology/relation.js:465 "_removeRelationCallback"
+app/views/topology/service.js:231 "serviceAddRelMouseUp"
+app/views/topology/service.js:917 "destroyServiceConfirm"
+app/views/topology/service.js:164 "serviceStatusMouseOut"
+app/views/topology/service.js:126 "serviceMouseLeave"
+app/views/topology/service.js:948 "_destroyCallback"
+app/views/topology/service.js:745 "show"
+app/views/topology/service.js:76 "serviceClick"
+app/views/topology/service.js:98 "serviceDblClick"
+app/views/topology/service.js:242 "updateData"
+app/views/topology/service.js:66 "initializer"
+app/views/topology/service.js:274 "dragend"
+app/views/topology/service.js:751 "hide"
+app/views/topology/service.js:757 "fade"
+app/views/topology/service.js:108 "serviceMouseEnter"
+app/views/topology/service.js:368 "update"
+app/views/topology/service.js:778 "renderedHandler"
+app/views/topology/service.js:906 "showService"
+app/views/topology/service.js:806 "updateServiceMenuLocation"
+app/views/topology/service.js:941 "destroyService"
+app/views/topology/service.js:212 "serviceAddRelMouseDown"
+app/views/topology/topology.js:28 "initializer"
+app/views/topology/topology.js:178 "getter"
+app/views/topology/topology.js:174 "setter"
+app/views/topology/topology.js:165 "getter"
+app/views/topology/topology.js:141 "serviceForBox"
+app/views/topology/topology.js:179 "setter"
+app/views/topology/topology.js:111 "computeScales"
+app/views/topology/topology.js:161 "getter"
+app/views/topology/topology.js:173 "getter"
+app/views/topology/topology.js:65 "renderOnce"
 app/models/models.js:357 "getNotificationsForModel"
 app/models/models.js:429 "getModelListByModelName"
 app/models/models.js:420 "getModelById"
@@ -239,9 +239,9 @@
 app/models/models.js:338 "trim"
 app/models/endpoints.js:42 "add"
 app/models/endpoints.js:30 "convert"
-app/models/charm.js:157 "validator"
-app/models/charm.js:115 "parse"
-app/models/charm.js:79 "sync"
-app/models/charm.js:131 "compare"
-app/models/charm.js:107 "failure"
-app/models/charm.js:50 "initializer"
+app/models/charm.js:119 "parse"
+app/models/charm.js:135 "compare"
+app/models/charm.js:111 "failure"
+app/models/charm.js:54 "initializer"
+app/models/charm.js:83 "sync"
+app/models/charm.js:161 "validator"