Merge lp:~bcsaller/juju-gui/renderBundle2 into lp:~bcsaller/juju-gui/charmFind

[Benjamin Saller]

Bundle Topology

Provide a reusable view of topologies with a much more
limited and non-interactive service module. The tests show
how this works but don't wire the view into any current
UI which comes later.

https://codereview.appspot.com/13245045/

[Benjamin Saller (bcsaller)]

Reviewers: mp+182516_code.launchpad.net,

Message:
Please take a look.

Description:
Bundle Topology

Provide a reusable view of topologies with a much more
limited and non-interactive service module. The tests show
how this works but don't wire the view into any current
UI which comes later.

https://code.launchpad.net/~bcsaller/juju-gui/renderBundle2/+merge/182516

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/app.js
   M app/assets/javascripts/d3-components.js
   M app/config-debug.js
   M app/config-prod.js
   M app/index.html
   M app/models/charm.js
   M app/models/model-controller.js
   M app/models/models.js
   M app/modules-debug.js
   M app/store/charm.js
   M app/store/env/env.js
   M app/store/env/fakebackend.js
   M app/store/env/go.js
   M app/store/env/python.js
   M app/store/env/sandbox.js
   M app/subapps/browser/browser.js
   M app/subapps/browser/templates/editorial.handlebars
   M app/subapps/browser/views/editorial.js
   M app/subapps/browser/views/minimized.js
   M app/subapps/browser/views/view.js
   D app/templates/category-icons.partial
   M app/templates/ghost-config-viewlet.handlebars
   M app/templates/inspector-header.handlebars
   M app/templates/service-config-wrapper.handlebars
   M app/templates/service-constraints-viewlet.partial
   M app/templates/service-overview-constraints.handlebars
   M app/views/charm-panel.js
   M app/views/charm.js
   M app/views/environment.js
   M app/views/ghost-inspector.js
   M app/views/inspector.js
   A app/views/topology/bundle.js
   M app/views/topology/relation.js
   M app/views/topology/topology.js
   M app/views/utils.js
   M app/views/viewlets/inspector-header.js
   M app/views/viewlets/service-constraints.js
   M app/views/viewlets/service-ghost.js
   M app/widgets/viewmode-controls.js
   M lib/views/browser/charm-full.less
   M lib/views/browser/charm-token.less
   M lib/views/juju-inspector.less
   A test/data/wp-deployer.yaml
   M test/index.html
   M test/test_app.js
   M test/test_browser_app.js
   M test/test_browser_editorial.js
   M test/test_charm_panel.js
   M test/test_charm_store.js
   M test/test_charm_view.js
   M test/test_endpoints.js
   M test/test_env.js
   M test/test_env_go.js
   M test/test_env_python.js
   M test/test_fakebackend.js
   M test/test_ghost_inspector.js
   M test/test_inspector_constraints.js
   M test/test_inspector_overview.js
   M test/test_inspector_settings.js
   M test/test_login.js
   M test/test_model.js
   M test/test_model_controller.js
   M test/test_notifications.js
   M test/test_sandbox_go.js
   M test/test_sandbox_python.js
   M test/test_service_config_view.js
   M test/test_service_view.js
   M test/test_startup.js.bottom
   M test/test_topology.js
   M test/test_unit_view.js
   M test/test_viewlet_manager.js
   M test/test_viewmode_controls_widget.js
   M test/test_websocket_logging.js

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/13245045/

[Benjamin Saller (bcsaller)]

diff is totally broken, I'll try to repair this.

https://codereview.appspot.com/13245045/

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/13245045/

[lp:~bcsaller/juju-gui/renderBundle2]

980. By Benjamin Saller on 2013-08-28

merge trunk

[Benjamin Saller (bcsaller)]

Please take a look.

https://codereview.appspot.com/13245045/

[Benjamin Saller (bcsaller)]

After repeated attempts this is still not getting a proper diff for me.

bzr diff -r ancestor:../path/to/trunk

will show it though.

Sorry and thanks.

https://codereview.appspot.com/13245045/

[lp:~bcsaller/juju-gui/renderBundle2]

981. By Benjamin Saller on 2013-08-30

more tests

982. By Benjamin Saller on 2013-08-30

missing file

983. By Benjamin Saller on 2013-08-30

lint, docs, various cleanups

Unmerged revisions

983. By Benjamin Saller on 2013-08-30

lint, docs, various cleanups

982. By Benjamin Saller on 2013-08-30

missing file

981. By Benjamin Saller on 2013-08-30

more tests

980. By Benjamin Saller on 2013-08-28

merge trunk

979. By Benjamin Saller on 2013-08-27

clean up diff, spotchecks

978. By Benjamin Saller on 2013-08-27

lint+

977. By Benjamin Saller on 2013-08-27

touchups

976. By Benjamin Saller on 2013-08-27

merge trunk

975. By Benjamin Saller on 2013-08-27

wip

974. By Benjamin Saller on 2013-08-26

wip

=== modified file 'app/app.js'
--- app/app.js	2013-08-12 19:24:55 +0000
+++ app/app.js	2013-08-30 19:48:17 +0000
@@ -39,7 +39,8 @@
   var juju = Y.namespace('juju'),
       models = Y.namespace('juju.models'),
       views = Y.namespace('juju.views'),
-      utils = views.utils;
+      utils = views.utils,
+      widgets = Y.namespace('juju.widgets');
 
   /**
    * The main app class.
@@ -398,7 +399,8 @@
 
       // Set up a new modelController instance.
       this.modelController = new juju.ModelController({
-        db: this.db
+        db: this.db,
+        store: this.get('store')
       });
 
       // Update the on-screen environment name provided in the configuration,
@@ -1082,7 +1084,6 @@
       this.db.environment.set('defaultSeries', evt.newVal);
     },
 
-
     /**
       Display the Environment Name.
 
@@ -1126,10 +1127,71 @@
           // route on root namespaced paths and this check will no longer
           // be needed
           this.renderEnvironment = false;
+
+          // XXX bug:1217383
+          // We're hiding the subapp from view, but people want to be able to
+          // click on the viewmode controls. We handle that here as a temp
+          // hack until the old :gui: views are gone and we've moved to the
+          // serviceInspector. Then the browser will always be around and can
+          // handle this widget for us. This is horrible and we know it. When
+          // the idea of 'hidden' is removed with the old views this hack will
+          // go away with it.
+          if (!this._controlEvents || this._controlEvents.length === 0) {
+            this._controls = new widgets.ViewmodeControls({
+              currentViewmode: subapps.charmbrowser._viewState.viewmode
+            });
+            this._controls.render();
+            this._controlEvents = [];
+            this._controlEvents.push(
+                this._controls.on(
+                    this._controls.EVT_FULLSCREEN,
+                    function(ev) {
+                      // Navigate away from anything in :gui: and to the
+                      // /fullscreen in :charmbrowser:
+                      this._controls._updateActiveNav('fullscreen');
+                      this.navigate(this.nsRouter.url({
+                        gui: '/',
+                        charmbrowser: '/fullscreen'
+                      }), { overrideAllNamespaces: true });
+
+                    }, this
+                )
+            );
+            this._controlEvents.push(
+                this._controls.on(
+                    this._controls.EVT_SIDEBAR,
+                    function(ev) {
+                      // Navigate away from anything in :gui: and to the
+                      // /sidebar in :charmbrowser:
+                      this._controls._updateActiveNav('sidebar');
+                      this.navigate(this.nsRouter.url({
+                        gui: '/',
+                        charmbrowser: '/sidebar'
+                      }), { overrideAllNamespaces: true });
+                    }, this
+                )
+            );
+          }
+
         } else {
           charmbrowser.hidden = false;
           this.renderEnvironment = true;
+
+          // XXX bug:1217383
+          // Destroy the controls widget we might have had around for a bit.
+          if (this._controlEvents) {
+            this._controlEvents.forEach(function(ev) {
+              ev.detach();
+            });
+            // reset the list to no events.
+            this._controlEvents = [];
+          }
+
+          if (this._controls) {
+            this._controls.destroy();
+          }
         }
+
         charmbrowser.updateVisible();
       }
 
@@ -1444,6 +1506,8 @@
     'model-controller',
     'FileSaver',
     'juju-inspector-widget',
-    'juju-ghost-inspector'
+    '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-30 19:48:17 +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;
       }
@@ -520,7 +523,15 @@
     }
   }, {
     ATTRS: {
-      container: {}
+      container: {},
+      /**
+       Boolean indicating if bind should be allowed to actually
+       bind events for the component.
+
+       @property {Boolean} interactive
+       @default true
+       */
+      interactive: {value: true}
     }
 
   });
 
=== modified file 'app/config-debug.js'
--- app/config-debug.js	2013-08-14 14:34:19 +0000
+++ app/config-debug.js	2013-08-30 19:48:17 +0000
@@ -40,7 +40,7 @@
   socket_port: 8081,
   user: 'admin',
   password: 'admin',
-  apiBackend: 'python', // Value can be 'python' or 'go'.
+  apiBackend: 'go', // Value can be 'python' or 'go'.
   sandbox: true,
   // When in sandbox mode should we create events to simulate a live env.
   // You can also use the :flags:/simulateEvents feature flag.
 
=== modified file 'app/config-prod.js'
--- app/config-prod.js	2013-07-31 13:20:37 +0000
+++ app/config-prod.js	2013-08-30 19:48:17 +0000
@@ -40,7 +40,7 @@
   socket_port: 8081,
   user: undefined,
   password: undefined,
-  apiBackend: 'python', // Value can be 'python' or 'go'.
+  apiBackend: 'go', // Value can be 'python' or 'go'.
   sandbox: false,
   // When in sandbox mode should we create events to simulate a live env.
   // You can also use the :flags:/simulateEvents feature flag.
 
=== modified file 'app/index.html'
--- app/index.html	2013-08-01 23:47:57 +0000
+++ app/index.html	2013-08-30 19:48:17 +0000
@@ -82,7 +82,7 @@
             <div class="header">
               <div class="error">
                 <span><i class="sprite alert_icon2"></i>
-                <h4>Your browser is not fully supported</h4></span>
+                <h4>Your browser is not supported</h4></span>
               </div>
             </div>
             <p>
@@ -213,8 +213,8 @@
       };
 
       isBrowserSupported = function(agent) {
-        // At the moment Chrome and Firefox are supported.
-        return (/Chrome|Firefox/.test(agent));
+        // Latest Chrome, Firefox, IE10 are supported
+        return (/Chrome|Firefox|MSIE\ 10/.test(agent));
       };
 
       displayBrowserWarning = function() {
 
=== modified file 'app/models/charm.js'
--- app/models/charm.js	2013-08-21 16:02:10 +0000
+++ app/models/charm.js	2013-08-30 19:48:17 +0000
@@ -30,7 +30,7 @@
   var RECENT_DAYS = 30;
 
   var models = Y.namespace('juju.models');
-  var charmIdRe = /^(?:(\w+):)?(?:~(\S+)\/)?(\w+)\/(\S+?)-(\d+)$/;
+  var charmIdRe = /^(?:(\w+):)?(?:~(\S+)\/)?(\w+)\/(\S+?)-(\d+|HEAD)$/;
   var idElements = ['scheme', 'owner', 'series', 'package_name', 'revision'];
   var simpleCharmIdRe = /^(?:(\w+):)?(?!:~)(\w+)$/;
   var simpleIdElements = ['scheme', 'package_name'];
 
=== modified file 'app/models/model-controller.js'
--- app/models/model-controller.js	2013-05-17 14:51:05 +0000
+++ app/models/model-controller.js	2013-08-30 19:48:17 +0000
@@ -82,7 +82,7 @@
             if (charm && charm.loaded) {
               resolve(charm);
             } else {
-              charm = db.charms.add({id: charmId}).load(env,
+              charm = db.charms.add({url: charmId}).load(env,
                   // If views are bound to the charm model, firing "update" is
                   // unnecessary, and potentially even mildly harmful.
                   function(err, data) {
@@ -144,6 +144,7 @@
     getServiceWithCharm: function(serviceId) {
       var db = this.get('db'),
           env = this.get('env'),
+          store = this.get('store'),
           mController = this;
 
       return this._getPromise(
@@ -151,7 +152,21 @@
           function(resolve, reject) {
             mController.getService(serviceId).then(function(service) {
               mController.getCharm(service.get('charm')).then(function(charm) {
-                resolve({service: service, charm: charm});
+                // Check if a newer charm is available for this service so that
+                // we can offer it as an upgrade.
+                // XXX Makyo Aug. 20 - Remove feature flag when upgradecharm
+                // feature lands.
+                if (charm.get('scheme') === 'cs' &&
+                    window.flags.upgradeCharm) {
+                  store.promiseUpgradeAvailability(charm, db.charms)
+                    .then(function(latestId) {
+                        service.set('upgrade_available', !!latestId);
+                        service.set('upgrade_to', latestId);
+                        resolve({service: service, charm: charm});
+                      }, reject);
+                } else {
+                  resolve({service: service, charm: charm});
+                }
               }, reject);
             }, reject);
           });
@@ -160,6 +175,15 @@
   }, {
     ATTRS: {
       /**
+        Reference to the client db.
+
+        @attribute db
+        @type {Y.Base}
+        @default undefined
+      */
+      db: {},
+
+      /**
         Reference to the client env.
 
         @attribute env
@@ -169,13 +193,13 @@
       env: {},
 
       /**
-        Reference to the client db.
+        Reference to the client charm store.
 
-        @attribute db
-        @type {Y.Base}
+        @attribute store
+        @type {Charmworld2}
         @default undefined
       */
-      db: {}
+      store: {}
     }
   });
 
 
=== modified file 'app/models/models.js'
--- app/models/models.js	2013-08-21 16:02:10 +0000
+++ app/models/models.js	2013-08-30 19:48:17 +0000
@@ -196,6 +196,25 @@
         value: ALIVE
       },
       unit_count: {},
+
+      /**
+        Whether or not an upgrade is available.
+
+        @attribute upgrade_available
+        @type {boolean}
+        @default false
+      */
+      upgrade_available: {
+        value: false
+      },
+
+      /**
+        The latest charm URL that the service can be upgraded to.
+
+        @attribute upgrade_to
+        @type {string}
+      */
+      upgrade_to: {},
       aggregated_status: {}
     }
   });
 
=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-08-19 15:53:41 +0000
+++ app/modules-debug.js	2013-08-30 19:48:17 +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'
         },
 
=== modified file 'app/store/charm.js'
--- app/store/charm.js	2013-08-21 16:02:10 +0000
+++ app/store/charm.js	2013-08-30 19:48:17 +0000
@@ -212,6 +212,31 @@
     },
 
     /**
+      Promises to return the latest charm ID for a given charm if a newer one
+      exists; this also caches the newer charm if one is available.
+
+      @method promiseUpgradeAvailability
+      @param {Charm} charm an existing charm potentially in need of an upgrade.
+      @param {ModelList} cache a local cache of browser charms.
+      @return {Promise} with an id or undefined.
+    */
+    promiseUpgradeAvailability: function(charm, cache) {
+      // Get the charm's store ID, then replace the version number
+      // with '-HEAD' to retrieve the latest version of the charm.
+      var storeId = charm.get('storeId').replace(/-\d+$/, '-HEAD');
+      return this.promiseCharm(storeId, cache)
+        .then(function(latest) {
+            var latestVersion = parseInt(latest.charm.id.split('-').pop(), 10),
+               currentVersion = parseInt(charm.get('revision'), 10);
+            if (latestVersion > currentVersion) {
+              return latest.charm.id;
+            }
+          }, function(e) {
+            throw e;
+          });
+    },
+
+    /**
      * Api call to search charms
      *
      * @method search
 
=== modified file 'app/store/env/env.js'
--- app/store/env/env.js	2013-05-17 14:51:05 +0000
+++ app/store/env/env.js	2013-08-30 19:48:17 +0000
@@ -26,8 +26,8 @@
 
 YUI.add('juju-env', function(Y) {
 
-  // Default to the Python environment.
-  var DEFAULT_BACKEND = 'python';
+  // Default to the Go environment.
+  var DEFAULT_BACKEND = 'go';
 
   /**
    * Create and return a store environment suitable for connecting to the
 
=== modified file 'app/store/env/fakebackend.js'
--- app/store/env/fakebackend.js	2013-08-13 16:22:03 +0000
+++ app/store/env/fakebackend.js	2013-08-30 19:48:17 +0000
@@ -368,11 +368,17 @@
           throw e;
         }
       }
+
+      var constraints = {};
+      if (options.constraints) {
+        constraints = options.constraints;
+      }
+
       var service = this.db.services.add({
         id: options.name,
         name: options.name,
         charm: charm.get('id'),
-        constraints: {},
+        constraints: constraints,
         exposed: false,
         subordinate: charm.get('is_subordinate'),
         config: options.config
 
=== modified file 'app/store/env/go.js'
--- app/store/env/go.js	2013-08-13 18:25:46 +0000
+++ app/store/env/go.js	2013-08-30 19:48:17 +0000
@@ -119,6 +119,8 @@
 
   Y.extend(GoEnvironment, environments.BaseEnvironment, {
 
+    genericConstraints: ['cpu-power', 'cpu-cores', 'mem', 'arch'],
+
     /**
      * Go environment constructor.
      *
@@ -273,7 +275,11 @@
      */
     login: function() {
       // If the user is already authenticated there is nothing to do.
-      if (this.userIsAuthenticated || this.pendingLoginResponse) {
+      if (this.userIsAuthenticated) {
+        this.fire('login', {data: {result: true}});
+        return;
+      }
+      if (this.pendingLoginResponse) {
         return;
       }
       var credentials = this.getCredentials();
@@ -337,17 +343,31 @@
          configuration options. Only one of `config` and `config_raw` should be
          provided, though `config_raw` takes precedence if it is given.
        @param {Integer} num_units The number of units to be deployed.
+       @param {Object} constraints The machine constraints to use in the
+         object format key: value.
        @param {Function} callback A callable that must be called once the
          operation is performed.
        @return {undefined} Sends a message to the server only.
      */
     deploy: function(charm_url, service_name, config, config_raw, num_units,
-                     callback) {
+                     constraints, callback) {
       var intermediateCallback = null;
       if (callback) {
         intermediateCallback = Y.bind(this.handleDeploy, this,
             callback, service_name, charm_url);
       }
+
+      if (constraints) {
+        // If the constraints is a function (this arg position used to be a
+        // callback) then log it out to the console to fix it.
+        if (typeof constraints === 'function') {
+          console.error('Constraints need to be an object not a function');
+          console.warn(constraints);
+        }
+      } else {
+        constraints = {};
+      }
+
       this._send_rpc(
           { Type: 'Client',
             Request: 'ServiceDeploy',
@@ -355,6 +375,7 @@
               ServiceName: service_name,
               Config: stringifyObjectValues(config),
               ConfigYAML: config_raw,
+              Constraints: constraints,
               CharmUrl: charm_url,
               NumUnits: num_units
             }
@@ -868,9 +889,6 @@
       }, intermediateCallback);
     },
 
-    // The constraints that the backend understands.  Used to generate forms.
-    genericConstraints: ['cpu-power', 'cpu-cores', 'mem', 'arch'],
-
     /**
        Change the constraints of the given service.
 
 
=== modified file 'app/store/env/python.js'
--- app/store/env/python.js	2013-06-24 14:56:21 +0000
+++ app/store/env/python.js	2013-08-30 19:48:17 +0000
@@ -255,13 +255,18 @@
      * @return {undefined} Sends a message to the server only.
      */
     deploy: function(charm_url, service_name, config, config_raw, num_units,
-                     callback) {
+                     constraints, callback) {
+      if (!constraints) {
+        constraints = {};
+      }
+
       this._send_rpc(
           { op: 'deploy',
             service_name: service_name,
             config: config,
             config_raw: config_raw,
             charm_url: charm_url,
+            constraints: constraints,
             num_units: num_units},
           callback, true);
     },
 
=== modified file 'app/store/env/sandbox.js'
--- app/store/env/sandbox.js	2013-08-14 19:15:01 +0000
+++ app/store/env/sandbox.js	2013-08-30 19:48:17 +0000
@@ -482,6 +482,7 @@
         name: data.service_name,
         config: data.config,
         configYAML: data.config_raw,
+        constraints: data.constraints,
         unitCount: data.num_units
       });
     },
@@ -784,7 +785,6 @@
     @return {undefined} Nothing.
     */
     receive: function(data) {
-      console.log('client message', data);
       if (this.connected) {
         var client = this.get('client');
         this['handle' + data.Type + data.Request](data,
@@ -995,10 +995,12 @@
       var callback = Y.bind(function(result) {
         this._basicReceive(data, client, result);
       }, this);
+
       state.deploy(data.Params.CharmUrl, callback, {
         name: data.Params.ServiceName,
         config: data.Params.Config,
         configYAML: data.Params.ConfigYAML,
+        constraints: data.Params.Constraints,
         unitCount: data.Params.NumUnits
       });
     },
@@ -1300,6 +1302,7 @@
     'base',
     'js-yaml',
     'json-parse',
+    'juju-env-go',
     'timers'
   ]
 });
 
=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-08-15 15:40:05 +0000
+++ app/subapps/browser/browser.js	2013-08-30 19:48:17 +0000
@@ -51,8 +51,34 @@
     _cleanOldViews: function(newViewMode) {
       if (this._hasStateChanged('viewmode') && this._oldState.viewmode) {
         var viewAttr = '_' + this._oldState.viewmode;
-        this[viewAttr].destroy();
-        delete this[viewAttr];
+        if (this[viewAttr]) {
+          this[viewAttr].destroy();
+          delete this[viewAttr];
+        }
+      }
+    },
+
+    /**
+     * Destroy and remove any lingering views.
+     *
+     * Make sure they don't linger and hold UX bound events on us when they
+     * should be gone.
+     *
+     * @method _clearViews
+     *
+     */
+    _clearViews: function() {
+      if (this._sidebar) {
+        this._sidebar.destroy();
+        delete this._sidebar;
+      }
+      if (this._minimized) {
+        this._minimized.destroy();
+        delete this._minimized;
+      }
+      if (this._fullscreen) {
+        this._fullscreen.destroy();
+        delete this._fullscreen;
       }
     },
 
@@ -88,7 +114,6 @@
      */
     _getStateUrl: function(change) {
       var urlParts = [];
-      this._oldState = this._viewState;
 
       // If there are changes to the filters, we need to update our filter
       // object first, and then generate a new query string for the state to
@@ -485,6 +510,7 @@
         viewmode: null
       };
       this._viewState = Y.merge(this._oldState, {});
+      this._clearViews();
     },
 
     /**
@@ -576,17 +602,6 @@
         // Add any sidebar charms to the running cache.
         this._cache = Y.merge(this._cache, ev.cache);
       }, this);
-      this._editorial.on(this._editorial.EV_CATEGORY_LINK_CLICKED,
-          function(ev) {
-            var change = {
-              search: true,
-              filter: {
-                categories: [ev.category]
-              }
-            };
-            this.fire('viewNavigate', {change: change});
-          });
-
       this._editorial.render(this._cache.interesting);
       this._editorial.addTarget(this);
     },
@@ -644,7 +659,12 @@
       // If we've switched to viewmode fullscreen, we need to render it.
       // We know the viewmode is already fullscreen because we're in this
       // function.
-      if (this._hasStateChanged('viewmode')) {
+      var forceFullscreen = false;
+      if (!this._fullscreen) {
+        forceFullscreen = true;
+      }
+
+      if (this._hasStateChanged('viewmode') || forceFullscreen) {
         var extraCfg = {};
         if (this._viewState.search || this._viewState.charmID) {
           extraCfg.withHome = true;
@@ -730,8 +750,14 @@
        @param {function} next callable for the next route in the chain.
      */
     sidebar: function(req, res, next) {
+      // If we've gone from no _sidebar to having one, then force editorial to
+      // render.
+      var forceSidebar = false;
+      if (!this._sidebar) {
+        forceSidebar = true;
+      }
       // If we've switched to viewmode sidebar, we need to render it.
-      if (this._hasStateChanged('viewmode')) {
+      if (this._hasStateChanged('viewmode') || forceSidebar) {
         this._sidebar = new views.Sidebar(
             this._getViewCfg({
               container: this.get('container')
@@ -759,9 +785,7 @@
         }
 
         this.renderSearchResults(req, res, next);
-      }
-
-      if (this._shouldShowEditorial()) {
+      } else if (this._shouldShowEditorial() || forceSidebar) {
         // Showing editorial implies that other sidebar content is destroyed.
         if (this._search) {
           this._search.destroy();
@@ -770,6 +794,7 @@
         this.renderEditorial(req, res, next);
       }
 
+
       // If we've changed the charmID or the viewmode has changed and we have
       // a charmID, render charmDetails.
       if (this._shouldShowCharm()) {
@@ -863,6 +888,8 @@
           this[viewmode](req, res, next);
         }
       } else {
+        // Update the app state even though we're not showing anything.
+        this._saveState();
         // Let the next route go on.
         next();
       }
@@ -920,6 +947,8 @@
       if (!this.hidden) {
         this[viewmode](req, res, next);
       } else {
+        // Update the app state even though we're not showing anything.
+        this._saveState();
         // Let the next route go on.
         next();
       }
@@ -965,6 +994,8 @@
       if (!this.hidden) {
         this[req.params.viewmode](req, res, next);
       } else {
+        // Update the app state even though we're not showing anything.
+        this._saveState();
         // Let the next route go on.
         next();
       }
@@ -992,6 +1023,7 @@
       if (this.hidden) {
         browser.hide();
         minview.hide();
+        this._clearViews();
       } else {
         if (this._viewState.viewmode === 'minimized') {
           minview.show();
 
=== modified file 'app/subapps/browser/templates/editorial.handlebars'
--- app/subapps/browser/templates/editorial.handlebars	2013-07-17 18:27:38 +0000
+++ app/subapps/browser/templates/editorial.handlebars	2013-08-30 19:48:17 +0000
@@ -21,7 +21,6 @@
     <div class="featured"></div>
     <div class="popular"></div>
     <div class="new"></div>
-    {{> category-icons }}
 
     {{#if isFullscreen}}
         </div>
 
=== modified file 'app/subapps/browser/views/editorial.js'
--- app/subapps/browser/views/editorial.js	2013-07-12 16:46:15 +0000
+++ app/subapps/browser/views/editorial.js	2013-08-30 19:48:17 +0000
@@ -41,7 +41,6 @@
    */
   ns.EditorialView = Y.Base.create('browser-view-sidebar', ns.CharmResults, [],
       {
-        EV_CATEGORY_LINK_CLICKED: 'category-link-clicked',
         template: views.Templates.editorial,
 
         // How many of each charm container do we show by default.
@@ -69,33 +68,6 @@
         },
 
         /**
-           Binds clicks on the category links in the editorial view and fires
-           that information to any listeners.
-
-           @private
-           @method _bindCategoryLinks
-         */
-        _bindCategoryLinks: function() {
-          var categories = Y.one('#category-links');
-          if (categories) {
-            categories.delegate('click', function(ev) {
-              // A link has been clicked, we need to kill the navigation
-              // event.
-              ev.halt();
-              var category = ev.currentTarget.getData('link');
-              var change = {
-                search: true,
-                filter: {
-                  categories: [category],
-                  replace: true
-                }
-              };
-              this.fire('viewNavigate', {change: change});
-            }, 'a', this);
-          }
-        },
-
-        /**
            Renders the editorial, "interesting" data to the view.
 
            @private
@@ -195,9 +167,6 @@
           cache.charms.add(popularCharms);
           cache.charms.add(featuredCharms);
           this.fire(this.EV_CACHE_UPDATED, {cache: cache});
-
-          // Bind the category links, which now exist
-          this._bindCategoryLinks();
         },
 
         /**
 
=== modified file 'app/subapps/browser/views/minimized.js'
--- app/subapps/browser/views/minimized.js	2013-08-02 15:34:18 +0000
+++ app/subapps/browser/views/minimized.js	2013-08-30 19:48:17 +0000
@@ -29,7 +29,6 @@
 YUI.add('subapp-browser-minimized', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
       views = Y.namespace('juju.views');
-
   /**
    * The minimized state view.
    *
@@ -37,7 +36,9 @@
    * @extends {Y.View}
    *
    */
-  ns.MinimizedView = Y.Base.create('browser-view-minimized', Y.View, [], {
+  ns.MinimizedView = Y.Base.create('browser-view-minimized', Y.View, [
+    Y.juju.widgets.ViewmodeControlsViewExtension
+  ], {
     template: views.Templates.minimized,
 
     events: {
@@ -47,15 +48,13 @@
     },
 
     /**
-     * Toggle the visibility of the browser. Bound to nav controls in the
-     * view, however this will be expanded to be controlled from the new
-     * constant nav menu outside of the view once it's completed.
+     * Toggle the visibility of the browser.
      *
-     * @method _toggle_sidebar
+     * @method _toggleMinimized
      * @param {Event} ev event to trigger the toggle.
      *
      */
-    _toggleViewState: function(ev) {
+    _toggleMinimized: function(ev) {
       ev.halt();
 
       this.get('container').hide();
@@ -88,6 +87,13 @@
       var tpl = this.template(),
           tplNode = Y.Node.create(tpl);
       this.get('container').setHTML(tplNode);
+      // Make sure the controls starts out setting the correct active state
+      // based on the current viewmode for our View.
+      this.controls = new Y.juju.widgets.ViewmodeControls({
+        currentViewmode: this.get('oldViewMode')
+      });
+      this.controls.render();
+      this._bindViewmodeControls(this.controls);
     }
 
   }, {
@@ -116,6 +122,7 @@
     'base',
     'juju-templates',
     'juju-views',
-    'view'
+    'view',
+    'viewmode-controls'
   ]
 });
 
=== modified file 'app/subapps/browser/views/view.js'
--- app/subapps/browser/views/view.js	2013-08-08 15:17:01 +0000
+++ app/subapps/browser/views/view.js	2013-08-30 19:48:17 +0000
@@ -40,7 +40,8 @@
    *
    */
   ns.MainView = Y.Base.create('browser-view-mainview', Y.View, [
-    Y.Event.EventTracker
+    Y.Event.EventTracker,
+    Y.juju.widgets.ViewmodeControlsViewExtension
   ], {
 
     /**
@@ -85,20 +86,6 @@
      */
     _bindSearchWidgetEvents: function() {
       var container = this.get('container');
-      this.addEvent(
-          this.controls.on(
-              this.controls.EVT_TOGGLE_VIEWABLE, this._toggleBrowser, this)
-      );
-
-      this.addEvent(
-          this.controls.on(
-              this.controls.EVT_FULLSCREEN, this._goFullscreen, this)
-      );
-      this.addEvent(
-          this.controls.on(
-              this.controls.EVT_SIDEBAR, this._goSidebar, this)
-      );
-
       if (this.search) {
         this.addEvent(
             this.search.on(
@@ -106,7 +93,6 @@
         );
       }
 
-
       if (this.search) {
         this.addEvent(
             this.search.on(
@@ -137,6 +123,7 @@
           }
         }, this);
       }
+      this._bindViewmodeControls(this.controls);
     },
 
     /**
@@ -233,11 +220,13 @@
        view, however this will be expanded to be controlled from the new
        constant nav menu outside of the view once it's completed.
 
-       @method _toggle_sidebar
+       This is called by the ViewmodeControlsViewExtension.
+
+       @method _toggleMinimized
        @param {Event} ev event to trigger the toggle.
 
      */
-    _toggleBrowser: function(ev) {
+    _toggleMinimized: function(ev) {
       ev.halt();
 
       this.fire('viewNavigate', {
@@ -248,44 +237,9 @@
     },
 
     /**
-      Upon clicking the browser icon make sure we re-route to the
-      new form of the UX.
-
-      @method _goFullscreen
-      @param {Event} ev the click event handler on the button.
-
-     */
-    _goFullscreen: function(ev) {
-      ev.halt();
-      this.fire('viewNavigate', {
-        change: {
-          viewmode: 'fullscreen'
-        }
-      });
-    },
-
-    /**
-      Upon clicking the build icon make sure we re-route to the
-      new form of the UX.
-
-      @method _goSidebar
-      @param {Event} ev the click event handler on the button.
-
-     */
-    _goSidebar: function(ev) {
-      ev.halt();
-      this.fire('viewNavigate', {
-        change: {
-          viewmode: 'sidebar'
-        }
-      });
-    },
-
-    /**
      * Destroy this view and clear from the dom world.
      *
      * @method destructor
-     *
      */
     destructor: function() {
       // Clean up any details view we might have hanging around.
 
=== removed file 'app/templates/category-icons.partial'
--- app/templates/category-icons.partial	2013-07-10 08:10:08 +0000
+++ app/templates/category-icons.partial	1970-01-01 00:00:00 +0000
@@ -1,57 +0,0 @@
-<div id="category-links" class="categories">
-    {{#unless isFullscreen}}
-        <h3 class="section-title">
-            Browse by category
-        </h3>
-    {{/unless}}
-    <ul>
-        <li>
-            <a data-link="databases" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-database.svg"
-                    alt="Databases" />
-                <span>Databases</span>
-            </a>
-        </li>
-        <li>
-            <a data-link="file-servers" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-file-server.svg"
-                    alt="File Servers" />
-                <span>File Servers</span>
-            </a>
-        </li>
-        <li>
-            <a data-link="applications" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-application.svg"
-                    alt="Applications" />
-                <span>Applications</span>
-            </a>
-        </li>
-        <li>
-            <a data-link="cache-proxy" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-cache-proxy.svg"
-                    alt="Cache/Proxy" />
-                <span>Cache/Proxy</span>
-            </a>
-        </li>
-        <li>
-            <a data-link="app-servers" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-app-server.svg"
-                    alt="App Servers" />
-                <span>App Servers</span>
-            </a>
-        </li>
-        <li>
-            <a data-link="misc" href="">
-                <img
-                    src="/juju-ui/assets/images/non-sprites/category_icons/category-misc.svg"
-                    alt="Miscellaneous" />
-                <span>Miscellaneous</span>
-            </a>
-        </li>
-    </ul>
-</div>
 
=== modified file 'app/templates/ghost-config-viewlet.handlebars'
--- app/templates/ghost-config-viewlet.handlebars	2013-08-08 00:06:48 +0000
+++ app/templates/ghost-config-viewlet.handlebars	2013-08-30 19:48:17 +0000
@@ -8,6 +8,17 @@
     </div>
   </div>
   {{/unless}}
+
+  {{#if constraints}}
+  <!-- Service Constraints added in -->
+  <div class="ghost-config-wrapper service-constraints">
+    <div class="ghost-config-header">Constraints</div>
+    <div class="ghost-config-content use-defaults">
+      {{> service-constraints-viewlet}}
+    </div>
+  </div>
+  {{/if}}
+
   {{#if settings}}
   <!-- Service configuration form -->
   <div class="ghost-config-wrapper service-configuration">
@@ -35,4 +46,5 @@
     </div>
   </div>
   {{/if}}
+
 </div>
 
=== modified file 'app/templates/inspector-header.handlebars'
--- app/templates/inspector-header.handlebars	2013-07-25 19:15:42 +0000
+++ app/templates/inspector-header.handlebars	2013-08-30 19:48:17 +0000
@@ -1,6 +1,8 @@
 <header>
   <div class="service-charm">
-    <div class="charm-icon" data-bind="icon"></div>
+    <div class="icon">
+      <img src="{{icon}}" alt="{{name}} icon" class="icon">
+    </div>
     <div class="details-wrapper">
       {{#if ghost}}
         <input type="text" class="service-name config-field" name="service-name" value="{{package_name}}"><br />
 
=== renamed file 'app/templates/viewlet-manager.handlebars' => 'app/templates/service-config-wrapper.handlebars'
=== modified file 'app/templates/service-constraints-viewlet.partial'
--- app/templates/service-constraints-viewlet.partial	2013-08-05 02:08:41 +0000
+++ app/templates/service-constraints-viewlet.partial	2013-08-30 19:48:17 +0000
@@ -1,6 +1,6 @@
 {{#constraints}}
-  <div class="control-group settings-wrapper">
-   <div class="control-label" for="{{name}}">{{title}}</div>
+  <div class="settings-wrapper">
+   <label for="{{name}}">{{title}}</label>
     <div>
       <input class="constraint-field" type="text" name="{{name}}"
           value="{{value}}" data-bind="constraints.{{name}}" />
 
=== modified file 'app/templates/service-overview-constraints.handlebars'
--- app/templates/service-overview-constraints.handlebars	2013-08-20 15:27:44 +0000
+++ app/templates/service-overview-constraints.handlebars	2013-08-30 19:48:17 +0000
@@ -1,25 +1,30 @@
 <span>Scale up with the following constraints?</span>
-<span class="constraint-details">
-  {{#if cpu}}
-    {{cpu}}Ghz
-  {{else}}
-    Default CPU
-  {{/if}}
-  &nbsp;
-  {{#if mem}}
-    {{mem}}GB
-  {{else}}
-    Default Mem
-  {{/if}}
-  &nbsp;
-  {{#if arch}}
-    {{arch}}
-  {{else}}
-    Default Arch
-  {{/if}}
+<span class="constraint-details hide-on-edit">
+  {{#srvConstraints}}
+    {{#if cpu}}
+      {{cpu}}Ghz
+    {{else}}
+      Default CPU
+    {{/if}}
+    &nbsp;
+    {{#if mem}}
+      {{mem}}GB
+    {{else}}
+      Default Mem
+    {{/if}}
+    &nbsp;
+    {{#if arch}}
+      {{arch}}
+    {{else}}
+      Default Arch
+    {{/if}}
+  {{/srvConstraints}}
 </span>
 <div class="edit-constraints-wrapper">
-  <a class="edit-constraints">Edit</a>
+  <a class="edit-constraints hide-on-edit">Edit</a>
+  <div class="editable-constraints" style="display: none;">
+    {{> service-constraints-viewlet}}
+  </div>
 </div>
 <div class="overview-constraints"></div>
 <div class="inspector-buttons">
 
=== modified file 'app/views/charm-panel.js'
--- app/views/charm-panel.js	2013-08-14 15:52:29 +0000
+++ app/views/charm-panel.js	2013-08-30 19:48:17 +0000
@@ -632,7 +632,7 @@
           }
           numUnits = charm.get('is_subordinate') ? 0 : parseInt(numUnits, 10);
           env.deploy(url, serviceName, config, this.configFileContent,
-              numUnits, function(ev) {
+              numUnits, null, function(ev) {
                 if (ev.err) {
                   console.log(url + ' deployment failed', ev.err);
                   db.notifications.add(
 
=== modified file 'app/views/charm.js'
--- app/views/charm.js	2013-08-09 20:52:35 +0000
+++ app/views/charm.js	2013-08-30 19:48:17 +0000
@@ -153,6 +153,9 @@
           charmId,
           serviceName,
           config,
+          null,
+          null,
+          null,
           Y.bind(this._deployCallback, this)
       );
     },
 
=== modified file 'app/views/environment.js'
--- app/views/environment.js	2013-08-21 15:47:36 +0000
+++ app/views/environment.js	2013-08-30 19:48:17 +0000
@@ -194,7 +194,7 @@
                 },
                 '.cancel-num-units': { click: '_closeUnitConfirm'},
                 '.confirm-num-units': { click: '_confirmUnitChange'},
-                'a.edit-constraints': { click: '_editUnitConstraints'},
+                'a.edit-constraints': { click: '_showEditUnitConstraints'},
                 // Settings viewlet.
                 'input.expose-toggle': { click: 'toggleExpose' },
                 '.config-file .fakebutton': { click: 'handleFileClick'},
@@ -216,7 +216,7 @@
                 'unitDetails',
                 'inspectorHeader'
               ],
-              template: Y.juju.views.Templates['viewlet-manager']
+              template: Y.juju.views.Templates['service-config-wrapper']
             },
             configGhost: {
               // controller will show the first one in this array by default
 
=== modified file 'app/views/ghost-inspector.js'
--- app/views/ghost-inspector.js	2013-08-14 15:31:50 +0000
+++ app/views/ghost-inspector.js	2013-08-30 19:48:17 +0000
@@ -121,13 +121,22 @@
             container, '.service-config .config-field');
       }
 
+      // Deploy needs constraints in simple key:value object.
+      var constraints = utils.getElementsValuesMapping(
+          container, '.constraint-field');
+
       options.env.deploy(
           model.get('id'),
           serviceName,
           config,
           this.viewletManager.configFileContent,
           numUnits,
-          Y.bind(this._deployCallbackHandler, this, serviceName, config));
+          constraints,
+          Y.bind(this._deployCallbackHandler,
+                 this,
+                 serviceName,
+                 config,
+                 constraints));
     },
 
     /**
@@ -225,10 +234,10 @@
 
       @method _deployCallbackHandler
       @param {String} serviceName The service name.
-      @param {Object} config The configuration oject of the service.
+      @param {Object} config The configuration object of the service.
       @param {Y.EventFacade} e The event facade from the deploy event.
     */
-    _deployCallbackHandler: function(serviceName, config, e) {
+    _deployCallbackHandler: function(serviceName, config, constraints, e) {
       var options = this.options,
           db = options.db,
           ghostService = options.ghostService;
@@ -283,7 +292,8 @@
         id: serviceName,
         pending: false,
         loading: false,
-        config: config
+        config: config,
+        constraints: constraints
       });
 
       this.closeInspector();
@@ -291,4 +301,7 @@
 
   };
 
+}, '0.1.0', {
+  requires: [
+  ]
 });
 
=== modified file 'app/views/inspector.js'
--- app/views/inspector.js	2013-08-16 20:29:39 +0000
+++ app/views/inspector.js	2013-08-30 19:48:17 +0000
@@ -123,10 +123,14 @@
     */
     _confirmUnitConstraints: function(requestedUnitCount) {
       var container = this.viewletManager.viewlets.overview.container,
+          genericConstraints = this.options.env.genericConstraints,
           confirm = container.one('.unit-constraints-confirm'),
-          constraints = this.model.get('constraints') || {};
+          srvConstraints = this.model.get('constraints') || {};
 
-      confirm.setHTML(Templates['service-overview-constraints'](constraints));
+      confirm.setHTML(Templates['service-overview-constraints']({
+        srvConstraints: srvConstraints,
+        constraints: utils.getConstraints(srvConstraints, genericConstraints)
+      }));
       confirm.removeClass('closed');
     },
 
@@ -145,7 +149,10 @@
         this.resetUnits();
       }
 
+      // editing class added if the user clicked 'edit'
+      confirm.removeClass('editing');
       confirm.addClass('closed');
+      this.overviewConstraintsEdit = false;
     },
 
     /**
@@ -156,8 +163,19 @@
     */
     _confirmUnitChange: function(e) {
       e.halt();
-      var container = this.viewletManager.viewlets.overview.container;
-      this._modifyUnits(container.one('input.num-units-control').get('value'));
+      var container = this.viewletManager.viewlets.overview.container,
+          unitCount = container.one('input.num-units-control').get('value'),
+          service = this.model;
+
+      // If the user chose to edit the constraints
+      if (this.overviewConstraintsEdit) {
+        var constraints = utils.getElementsValuesMapping(
+                                  container, '.constraint-field');
+        var cb = Y.bind(this._modifyUnits, this, unitCount);
+        this.options.env.set_constraints(service.get('id'), constraints, cb);
+      } else {
+        this._modifyUnits(unitCount);
+      }
       this._closeUnitConfirm();
     },
 
@@ -165,11 +183,15 @@
       Shows the unit constraints when the user wants to edit them
       while increasing the total number of units
 
-      @method _editUnitConstraints
+      @method _showEditUnitConstraints
     */
-    _editUnitConstraints: function() {
-      // show constraints viewlet on overview page to allow the user to
-      // edit them without changing viewlets.
+    _showEditUnitConstraints: function(e) {
+      e.halt();
+      var container = this.viewletManager.viewlets.overview.container;
+      container.all('.hide-on-edit').hide();
+      container.one('.editable-constraints').show();
+      container.one('.unit-constraints-confirm').addClass('editing');
+      this.overviewConstraintsEdit = true;
     },
 
     _modifyUnits: function(requested_unit_count) {
@@ -181,6 +203,7 @@
         container = this.get('container');
         env = this.get('env');
       }
+
       var service = this.model || this.get('model');
       var unit_count = service.get('unit_count');
       var field = container.one('.num-units-control');
 
=== 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-30 19:48:17 +0000
@@ -0,0 +1,368 @@
+/*
+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,
+                                   [views.ServiceModuleCommon], {
+
+        /**
+      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');
+          var 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-30 19:48:17 +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/service.js'
--- app/views/topology/service.js	2013-08-21 16:02:10 +0000
+++ app/views/topology/service.js	2013-08-30 19:48:17 +0000
@@ -33,35 +33,303 @@
       d3ns = Y.namespace('d3'),
       Templates = views.Templates;
 
-  /**
-   * Manage service rendering and events.
-   *
-   * ## Emitted events:
-   *
-   * - *clearState:* clear all possible states that the environment view can be
-   *   in as it pertains to actions (building a relation, viewing
-   *   a service menu, etc.)
-   * - *snapToService:* fired when mousing over a service, causing the pending
-   *   relation dragline to snap to the service rather than
-   *   following the mouse.
-   * - *snapOutOfService:* fired when mousing out of a service, causing the
-   *   pending relation line to follow the mouse again.
-   * - *addRelationDrag:*
-   * - *addRelationDragStart:*
-   * - *addRelationDragEnd:* fired when creating a relation through the long-
-   *   click process, when moving the cursor over the environment, and when
-   *   dropping the endpoint on a valid service.
-   * - *cancelRelationBuild:* fired when dropping a pending relation line
-   *   started through the long-click method somewhere other than a valid
-   *   service.
-   * - *serviceMoved:* fired when a service block is dragged so that relation
-   *   endpoints can follow it.
-   * - *navigateTo:* fired when clicking the "View Service" menu item or when
-   *   double-clicking a service.
-   *
-   * @class ServiceModule
+  var ServiceModuleCommon = function() {};
+  /**
+    Sync view models with current db.models.
+
+    @method updateData
+  */
+  ServiceModuleCommon.prototype.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;});
+  };
+
+  /**
+      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
+     */
+  ServiceModuleCommon.prototype.updateServiceNodes = function(node) {
+    if (node.empty()) {
+      return;
+    }
+    var self = this,
+        topo = this.get('component'),
+        landscape = topo.get('landscape'),
+        service_scale = this.service_scale,
+        service_scale_width = this.service_scale_width,
+        service_scale_height = this.service_scale_height;
+
+    // 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 there are no annotations or the service is being dragged
+      if (!annotations || service.inDrag === views.DRAG_ACTIVE) {
+        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)) {
+        // Delete gui-x and gui-y from annotations as we use the values.
+        // This is to prevent deltas coming in on a service while it is
+        // being dragged from resetting its position during the drag.
+
+        delete annotations['gui-x'];
+        delete annotations['gui-y'];
+        // Only update position if we're not already in a drag state (the
+        // current drag supercedes any previous annotations).
+        if (!d.inDrag) {
+          self.drag.call(this, d, self, {x: x, y: y},
+              self.get('useTransitions'));
+        }
+      }});
+
+    // 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 = 190; return box.w;},
+      'height': function(box) { box.h = 190; return box.h;}
+    });
+
+    node.select('.service-block-image').each(function(d) {
+      var curr_node = d3.select(this);
+      var curr_href = curr_node.attr('xlink:href');
+      var new_href = d.subordinate ?
+          '/juju-ui/assets/svgs/sub_module.svg' :
+          '/juju-ui/assets/svgs/service_module.svg';
+
+      // Only set 'xlink:href' if not already set to the new value,
+      // thus avoiding redundant requests to the server. #1182135
+      if (curr_href !== new_href) {
+        curr_node.attr({'xlink:href': new_href});
+      }
+      curr_node.attr({
+        'width': d.w,
+        'height': d.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});
+
+    // Landscape badge
+    if (landscape) {
+      node.each(function(d) {
+        var landscapeAsset;
+        var securityBadge = landscape.getLandscapeBadge(
+            d.model, 'security', 'round');
+        var rebootBadge = landscape.getLandscapeBadge(
+            d.model, 'reboot', 'round');
+
+        if (securityBadge && rebootBadge) {
+          landscapeAsset =
+              '/juju-ui/assets/images/landscape_restart_round.png';
+        } else if (securityBadge) {
+          landscapeAsset =
+              '/juju-ui/assets/images/landscape_security_round.png';
+        } else if (rebootBadge) {
+          landscapeAsset =
+              '/juju-ui/assets/images/landscape_restart_round.png';
+        }
+        if (landscapeAsset === undefined) {
+          // Remove any existing badge.
+          d3.select(this).select('.landscape-badge').remove();
+        } else {
+          var existing = Y.one(this).one('.landscape-badge'),
+              curr_href, target;
+
+          if (!existing) {
+            existing = d3.select(this).append('image');
+            existing.attr({
+              'class': 'landscape-badge',
+              'width': 32,
+              'height': 32
+            });
+          }
+          existing = d3.select(this).select('.landscape-badge');
+          existing.attr({
+            'x': 13,
+            'y': 79
+          });
+
+          // Only set 'xlink:href' if not already set to the new value,
+          // thus avoiding redundant requests to the server. #1182135
+          curr_href = existing.attr('xlink:href');
+          if (curr_href !== landscapeAsset) {
+            existing.attr({'xlink:href': landscapeAsset});
+          }
+        }
+      });
+    }
+    // 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;
+        }
+        });
+    node.select('.charm-label')
+                    .attr({'style': function(d) {
+          // Programmatically size the font.
+          // Number derived from service assets:
+          // font-size 16px when asset is 224px.
+          return 'font-size:' + d.h *
+              (charm_label_size / service_height) + 'px';
+        },
+        'x': function(d) { return d.w / 2;},
+        'y': function(d) {
+          // Number derived from service assets:
+          // padding-top: 118px when asset is 224px.
+          return d.h * (charm_label_padding / service_height) - d.h *
+              (charm_label_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
+          });
+    });
+
+    // Remove exposed indicator from nodes that are no longer exposed.
+    node.filter(function(d) {
+      return !d.exposed &&
+          !d3.select(this)
+                      .select('.exposed-indicator').empty();
+    }).select('.exposed-indicator').remove();
+
+    // Adds the relative health in the form of a percentage bar.
+    node.each(function(d) {
+      var status_graph = d3.select(this).select('.statusbar');
+      var status_bar = status_graph.property('status_bar');
+      if (status_bar && !d.subordinate) {
+        status_bar.update(d.aggregated_status);
+      }
+    });
+  };
+  views.ServiceModuleCommon = ServiceModuleCommon;
+
+  /**
+    Manage service rendering and events.
+
+    ## Emitted events:
+
+    - *clearState:* clear all possible states that the environment view can be
+      in as it pertains to actions (building a relation, viewing
+      a service menu, etc.)
+    - *snapToService:* fired when mousing over a service, causing the pending
+      relation dragline to snap to the service rather than
+      following the mouse.
+    - *snapOutOfService:* fired when mousing out of a service, causing the
+      pending relation line to follow the mouse again.
+    - *addRelationDrag:*
+    - *addRelationDragStart:*
+    - *addRelationDragEnd:* fired when creating a relation through the long-
+      click process, when moving the cursor over the environment, and when
+      dropping the endpoint on a valid service.
+    - *cancelRelationBuild:* fired when dropping a pending relation line
+      started through the long-click method somewhere other than a valid
+      service.
+    - *serviceMoved:* fired when a service block is dragged so that relation
+      endpoints can follow it.
+    - *navigateTo:* fired when clicking the "View Service" menu item or when
+      double-clicking a service.
+
+    @class ServiceModule
    */
-  var ServiceModule = Y.Base.create('ServiceModule', d3ns.Module, [], {
+  var ServiceModule = Y.Base.create('ServiceModule', d3ns.Module, [
+    ServiceModuleCommon], {
     events: {
       scene: {
         '.service': {
@@ -192,14 +460,15 @@
     */
     _attachDragEvents: function() {
       var container = this.get('container'),
-          ZP = '.zoom-plane',
-          EC = 'i.sprite.empty_canvas';
+              ZP = '.zoom-plane',
+              EC = 'i.sprite.empty_canvas';
 
       container.delegate('drop', this.canvasDropHandler, ZP, this);
       container.delegate('dragenter', this._ignore, ZP, this);
       container.delegate('dragover', this._ignore, ZP, this);
 
-      // allows the user to drop the charm on the 'drop here' help text in IE10.
+      // allows the user to drop the charm on the 'drop here' help text in
+      // IE10.
       container.delegate('drop', this.canvasDropHandler, EC, this);
       container.delegate('dragenter', this._ignore, EC, this);
       container.delegate('dragover', this._ignore, EC, this);
@@ -225,7 +494,7 @@
     */
     attachTouchstartEvents: function(data, node) {
       var topo = this.get('component'),
-          yuiNode = Y.Node(node);
+              yuiNode = Y.Node(node);
 
       // Do not attach the event to the ghost nodes
       if (!d3.select(node).classed('pending')) {
@@ -244,9 +513,9 @@
       // To execute the serviceClick method under the same context as
       // click we call it under the touch target context
       var node = e.currentTarget.getDOMNode(),
-          box = d3.select(node).datum();
-      // If we're dragging with two fingers, ignore this as a tap and let drag
-      // take over.
+              box = d3.select(node).datum();
+      // If we're dragging with two fingers, ignore this as a tap and let
+      // drag take over.
       if (e.touches.length > 1) {
         box.tapped = false;
         return;
@@ -284,9 +553,9 @@
           return;
         }
       } else {
-        // Touch events will also fire a click event about 300ms later. If this
-        // event isn't ignored, the service menu will disappear 300ms after it
-        // appears, so set a flag to ignore that event.
+        // Touch events will also fire a click event about 300ms later. If
+        // this event isn't ignored, the service menu will disappear 300ms
+        // after it appears, so set a flag to ignore that event.
         box.ignoreNextClick = true;
       }
 
@@ -298,8 +567,8 @@
       // If the service box is pending, ensure that the charm panel is
       // visible, but don't do anything else.
       if (box.pending && !window.flags.serviceInspector) {
-        // Prevent the clickoutside event from firing and immediately closing
-        // the panel.
+        // Prevent the clickoutside event from firing and immediately
+        // closing the panel.
         d3.event.halt();
         // Ensure service menus are closed.
         topo.fire('clearState');
@@ -327,10 +596,11 @@
         return;
       }
       // Just show the service on double-click.
-      var topo = self.get('component'),
-          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.
+      var topo = self.get('component');
+      var 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.hideServiceMenu();
       self.show_service(service);
     },
@@ -440,7 +710,7 @@
           reader.onload = function(e) {
             // Import each into the environment
             db.importDeployer(jsyaml.safeLoad(e.target.result),
-                              store, {useGhost: false})
+                store, {useGhost: false})
                               .then(function() {
                   notifications.add({
                     title: 'Imported Environment',
@@ -468,14 +738,15 @@
         // required to position the service in the proper y position.
         var dropXY = [evt.clientX, (evt.clientY - 71)];
 
-        // Take the x,y offset (translation) of the topology view into account.
+        // Take the x,y offset (translation) of the topology view into
+        // account.
         Y.Array.each(dropXY, function(_, index) {
           ghostAttributes.coordinates[index] =
               (dropXY[index] - translation[index]) / scale;
         });
         if (dragData.dataType === 'charm-token-drag-and-drop') {
-          // The charm data was JSON encoded because the dataTransfer mechanism
-          // only allows for string values.
+          // The charm data was JSON encoded because the dataTransfer
+          // mechanism only allows for string values.
           var charmData = Y.JSON.parse(dragData.charmData);
           // Add the icon url to the ghost attributes for the ghost icon
           ghostAttributes.icon = dragData.iconSrc;
@@ -494,7 +765,7 @@
      */
     clearStateHandler: function() {
       var container = this.get('container'),
-          topo = this.get('component');
+              topo = this.get('component');
       container.all('.environment-menu.active').removeClass('active');
       this.hideServiceMenu();
     },
@@ -568,7 +839,7 @@
       context.longClickTimer = Y.later(750, this, function(d, e) {
         // Provide some leeway for accidental dragging.
         if ((Math.abs(box.x - box.oldX) + Math.abs(box.y - box.oldY)) /
-            2 > 5) {
+                2 > 5) {
           return;
         }
 
@@ -598,29 +869,6 @@
         context.longClickTimer.cancel();
       }
     },
-    /*
-     * 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;});
-    },
-
     /**
      * Handle drag events for a service.
      *
@@ -650,17 +898,17 @@
       }
       else {
 
-        // If the service hasn't been dragged (in the case of long-click to add
-        // relation, or a double-fired event) or the old and new coordinates
-        // are the same, exit.
+        // If the service hasn't been dragged (in the case of long-click to
+        // add relation, or a double-fired event) or the old and new
+        // coordinates are the same, exit.
         if (!box.inDrag ||
-            (box.oldX === box.x &&
-             box.oldY === box.y)) {
+                (box.oldX === box.x &&
+                box.oldY === box.y)) {
           return;
         }
 
-        // If the service is still pending, persist x/y coordinates in order
-        // to set them as annotations when the service is created.
+        // If the service is still pending, persist x/y coordinates in
+        // order to set them as annotations when the service is created.
         if (box.pending) {
           box.model.set('hasBeenPositioned', true);
           box.model.set('x', box.x);
@@ -681,21 +929,21 @@
     },
 
     /**
-     * Specialized drag event handler
-     * when called as an event handler it
-     * Allows optional extra param, pos
-     * which when used overrides the mouse
-     * handling. This method can then be
-     * though of as 'drag to position'.
-     *
-     * @method drag
-     * @param {Box} d viewModel BoundingBox.
-     * @param {ServiceModule} self ServiceModule.
-     * @param {Object} pos (optional) containing x/y numbers.
-     * @param {Boolean} includeTransition (optional) Use transition to drag.
-     *
-     * [At the time of this writing useTransition works in practice but
-     * introduces a timing issue in the tests.]
+      Specialized drag event handler
+      when called as an event handler it
+      Allows optional extra param, pos
+      which when used overrides the mouse
+      handling. This method can then be
+      though of as 'drag to position'.
+
+      @method drag
+      @param {Box} d viewModel BoundingBox.
+      @param {ServiceModule} self ServiceModule.
+      @param {Object} pos (optional) containing x/y numbers.
+      @param {Boolean} includeTransition (optional) Use transition to drag.
+
+      [At the time of this writing useTransition works in practice but
+      introduces a timing issue in the tests.]
      */
     drag: function(box, self, pos, includeTransition) {
       if (box.tapped) {
@@ -711,9 +959,9 @@
       if (self.longClickTimer) {
         self.longClickTimer.cancel();
       }
-      // Translate the service (and, potentially, menu).
-      // If a position was provided, update the box's coordinates and the
-      // selection's bound data.
+      // Translate the service (and, potentially, menu).  If a position was
+      // provided, update the box's coordinates and the selection's bound
+      // data.
       if (pos) {
         box.x = pos.x;
         box.y = pos.y;
@@ -726,8 +974,8 @@
 
       if (includeTransition) {
         selection = selection.transition()
-                             .duration(500)
-                             .ease('elastic');
+        .duration(500)
+        .ease('elastic');
       }
 
       selection.attr('transform', function(d, i) {
@@ -739,7 +987,7 @@
 
       // Remove any active menus.
       self.get('container').all('.environment-menu.active')
-          .removeClass('active');
+      .removeClass('active');
       if (box.inDrag === views.DRAG_START) {
         self.hideServiceMenu();
         box.inDrag = views.DRAG_ACTIVE;
@@ -749,12 +997,12 @@
       topo.fire('serviceMoved', { service: box });
     },
 
-    /*
-     * Attempt to reuse as much of the existing graph and view models
-     * as possible to re-render the graph.
-     *
-     * @method update
-     */
+    /**
+      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'),
@@ -776,18 +1024,18 @@
 
       if (!this.tree) {
         this.tree = d3.layout.unscaledPack()
-                      .size([width, height])
-                      .value(function(d) {
-                          return Math.max(d.unit_count, 1);
-                        })
-                      .padding(300);
+        .size([width, height])
+        .value(function(d) {
+              return Math.max(d.unit_count, 1);
+            })
+        .padding(300);
       }
 
       if (!this.dragBehavior) {
         this.dragBehavior = d3.behavior.drag()
-            .on('dragstart', function(d) { self.dragstart.call(this, d, self);})
-            .on('drag', function(d) { self.drag.call(this, d, self);})
-            .on('dragend', function(d) { self.dragend.call(this, d, self);});
+        .on('dragstart', function(d) { self.dragstart.call(this, d, self);})
+        .on('drag', function(d) { self.drag.call(this, d, self);})
+        .on('dragend', function(d) { self.dragend.call(this, d, self);});
       }
 
       //Process any changed data.
@@ -798,16 +1046,15 @@
       var node = this.node;
 
       // Rerun the pack layout.
-      // Pack doesn't honor existing positions and will
-      // re-layout the entire graph. As a short term work
-      // around we layout only new nodes. This has the side
-      // effect that service blocks can overlap and will
-      // be fixed later.
+      // Pack doesn't honor existing positions and will re-layout the
+      // entire graph. As a short term work around we layout only new
+      // nodes. This has the side effect that service blocks can overlap
+      // and will be fixed later.
       var vertices;
       var new_services = Y.Object.values(topo.service_boxes)
-                          .filter(function(boundingBox) {
-                            return !Y.Lang.isNumber(boundingBox.x);
-                          });
+      .filter(function(boundingBox) {
+            return !Y.Lang.isNumber(boundingBox.x);
+          });
       if (new_services.length > 0) {
         // If the there is only one new service and it's pending (as in, it was
         // added via the charm panel as a ghost), position it intelligently and
@@ -816,16 +1063,19 @@
         // in the case of opening an unannotated environment for the first
         // time).
         var pendingServicePlaced = false;
-        if (new_services.length === 1 && new_services[0].model.get('pending')) {
+        if (new_services.length === 1 &&
+            new_services[0].model.get('pending')) {
           pendingServicePlaced = true;
           // Get a coordinate outside the cluster of existing services.
           var coords = topo.servicePointOutside();
-          // Set the coordinates on both the box model and the service model.
+          // Set the coordinates on both the box model and the service
+          // model.
           new_services[0].x = coords[0];
           new_services[0].y = coords[1];
           new_services[0].model.set('x', coords[0]);
           new_services[0].model.set('y', coords[1]);
-          // This ensures that the x/y coordinates will be saved as annotations.
+          // This ensures that the x/y coordinates will be saved as
+          // annotations.
           new_services[0].model.set('hasBeenPositioned', true);
           // Set the centroid to the new service's position
           topo.centroid = coords;
@@ -833,8 +1083,8 @@
         } else {
           this.tree.nodes({children: new_services});
         }
-        // Update annotations settings position on backend
-        // (but only do this if there is no existing annotations).
+        // Update annotations settings position on backend (but only do
+        // this if there is no existing annotations).
         if (!pendingServicePlaced) {
           vertices = [];
         }
@@ -858,7 +1108,8 @@
         });
       }
       if (!topo.centroid || vertices) {
-        // Find the centroid of our hull of services and inform the topology.
+        // Find the centroid of our hull of services and inform the
+        // topology.
         if (!vertices) {
           vertices = topoUtils.serviceBoxesToVertices(topo.service_boxes);
         }
@@ -866,9 +1117,9 @@
       }
       // enter
       node
-        .enter().append('g')
-        .attr({
-            'pointer-events': 'all', // IE doesn't drag properly without this.
+      .enter().append('g')
+      .attr({
+            'pointer-events': 'all', // IE needs this.
             'class': function(d) {
               return (d.subordinate ? 'subordinate ' : '') +
                   (d.pending ? 'pending ' : '') + 'service';
@@ -882,18 +1133,18 @@
 
       // Remove old nodes.
       node.exit()
-          .each(function(d) {
+        .each(function(d) {
             delete topo.service_boxes[d.id];
           })
-          .remove();
+        .remove();
     },
 
     /**
-      Pans the environment view to the center all the services on the canvas.
+    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.
+    @method panToCenter
+    @param {object} evt The event fired.
+    @return {undefined} Side effects only.
     */
     panToCenter: function(evt) {
       var topo = this.get('component');
@@ -902,15 +1153,15 @@
     },
 
     /**
-      Given a set of vertices, find the centroid and pan to that location.
+    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.
+    @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);
+              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.
@@ -950,13 +1201,13 @@
       node.append('image')
        .classed('service-icon', true)
        .attr({
-            'xlink:href': function(d) {
-              return d.icon;
-            },
-            width: 96,
-            height: 96,
-            transform: 'translate(47, 50)'
-          });
+                'xlink:href': function(d) {
+                  return d.icon;
+                },
+                width: 96,
+                height: 96,
+                transform: 'translate(47, 50)'
+              });
       node.append('text').append('tspan')
         .attr('class', 'name')
         .text(function(d) {return d.displayName; });
@@ -985,249 +1236,6 @@
       });
     },
 
-    /**
-     * 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'),
-          service_scale = this.service_scale,
-          service_scale_width = this.service_scale_width,
-          service_scale_height = this.service_scale_height;
-
-      // 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 there are no annotations or the service is being dragged
-        if (!annotations || service.inDrag === views.DRAG_ACTIVE) {
-          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)) {
-          // Delete gui-x and gui-y from annotations as we use the values.
-          // This is to prevent deltas coming in on a service while it is
-          // being dragged from resetting its position during the drag.
-
-          delete annotations['gui-x'];
-          delete annotations['gui-y'];
-          // Only update position if we're not already in a drag state (the
-          // current drag supercedes any previous annotations).
-          if (!d.inDrag) {
-            self.drag.call(this, d, self, {x: x, y: y},
-                           self.get('useTransitions'));
-          }
-        }});
-
-      // 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 = 190; return box.w;},
-        'height': function(box) { box.h = 190; return box.h;}
-      });
-
-      node.select('.service-block-image').each(function(d) {
-        var curr_node = d3.select(this);
-        var curr_href = curr_node.attr('xlink:href');
-        var new_href = d.subordinate ?
-            '/juju-ui/assets/svgs/sub_module.svg' :
-            '/juju-ui/assets/svgs/service_module.svg';
-
-        // Only set 'xlink:href' if not already set to the new value,
-        // thus avoiding redundant requests to the server. #1182135
-        if (curr_href !== new_href) {
-          curr_node.attr({'xlink:href': new_href});
-        }
-        curr_node.attr({
-          'width': d.w,
-          'height': d.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});
-
-      // Landscape badge
-      if (landscape) {
-        node.each(function(d) {
-          var landscapeAsset;
-          var securityBadge = landscape.getLandscapeBadge(
-              d.model, 'security', 'round');
-          var rebootBadge = landscape.getLandscapeBadge(
-              d.model, 'reboot', 'round');
-
-          if (securityBadge && rebootBadge) {
-            landscapeAsset =
-                '/juju-ui/assets/images/landscape_restart_round.png';
-          } else if (securityBadge) {
-            landscapeAsset =
-                '/juju-ui/assets/images/landscape_security_round.png';
-          } else if (rebootBadge) {
-            landscapeAsset =
-                '/juju-ui/assets/images/landscape_restart_round.png';
-          }
-          if (landscapeAsset === undefined) {
-            // Remove any existing badge.
-            d3.select(this).select('.landscape-badge').remove();
-          } else {
-            var existing = Y.one(this).one('.landscape-badge'),
-                curr_href, target;
-
-            if (!existing) {
-              existing = d3.select(this).append('image');
-              existing.attr({
-                'class': 'landscape-badge',
-                'width': 32,
-                'height': 32
-              });
-            }
-            existing = d3.select(this).select('.landscape-badge');
-            existing.attr({
-              'x': 13,
-              'y': 79
-            });
-
-            // Only set 'xlink:href' if not already set to the new value,
-            // thus avoiding redundant requests to the server. #1182135
-            curr_href = existing.attr('xlink:href');
-            if (curr_href !== landscapeAsset) {
-              existing.attr({'xlink:href': landscapeAsset});
-            }
-          }
-        });
-      }
-      // 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;
-          }
-          });
-      node.select('.charm-label')
-        .attr({'style': function(d) {
-            // Programmatically size the font.
-            // Number derived from service assets:
-            // font-size 16px when asset is 224px.
-            return 'font-size:' + d.h *
-                (charm_label_size / service_height) + 'px';
-          },
-          'x': function(d) { return d.w / 2;},
-          'y': function(d) {
-            // Number derived from service assets:
-            // padding-top: 118px when asset is 224px.
-            return d.h * (charm_label_padding / service_height) - d.h *
-                (charm_label_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
-            });
-      });
-
-      // Remove exposed indicator from nodes that are no longer exposed.
-      node.filter(function(d) {
-        return !d.exposed &&
-            !d3.select(this)
-                .select('.exposed-indicator').empty();
-      }).select('.exposed-indicator').remove();
-
-      // Adds the relative health in the form of a percentage bar.
-      node.each(function(d) {
-        var status_graph = d3.select(this).select('.statusbar');
-        var status_bar = status_graph.property('status_bar');
-        if (status_bar && !d.subordinate) {
-          status_bar.update(d.aggregated_status);
-        }
-      });
-    },
-
-
     /*
      * Show/hide/fade selection.
      */
@@ -1245,7 +1253,7 @@
 
     fade: function(evt) {
       var selection = evt.selection,
-          alpha = evt.alpha;
+              alpha = evt.alpha;
       selection.transition()
             .duration(400)
             .attr('opacity', alpha !== undefined && alpha || '0.2');
@@ -1267,20 +1275,20 @@
 
     updateServiceMenuLocation: function() {
       var topo = this.get('component'),
-          container = this.get('container'),
-          cp = container.one('.environment-menu.active'),
-          service = topo.get('active_service'),
-          tr = topo.get('translate'),
-          z = topo.get('scale');
+              container = this.get('container'),
+              cp = container.one('.environment-menu.active'),
+              service = topo.get('active_service'),
+              tr = topo.get('translate'),
+              z = topo.get('scale');
 
       if (service && cp) {
         var cpRect = cp.getDOMNode().getClientRects()[0],
-            cpWidth = cpRect.width,
-            serviceCenter = service.relativeCenter,
-            menuLeft = (service.x * z + tr[0] + serviceCenter[0] * z <
+                cpWidth = cpRect.width,
+                serviceCenter = service.relativeCenter,
+                menuLeft = (service.x * z + tr[0] + serviceCenter[0] * z <
                         topo.get('width') / 2),
-            cpHeight = cpRect.height,
-            arrowWidth = 16; // Hard coded for now for simplicity.
+                cpHeight = cpRect.height,
+                arrowWidth = 16; // Hard coded for now for simplicity.
 
         if (menuLeft) {
           cp.removeClass('left')
@@ -1298,14 +1306,14 @@
         //   right, and vice versa.
         cp.setStyles({
           'top': (
-              service.y * z + tr[1] +
-              (serviceCenter[1] * z) - (cpHeight / 2)),
+                  service.y * z + tr[1] +
+                  (serviceCenter[1] * z) - (cpHeight / 2)),
           'left': (
               service.x * z +
-              (menuLeft ?
-               service.w * z + arrowWidth :
-               -(cpWidth) - arrowWidth) +
-              tr[0])
+                  (menuLeft ?
+                  service.w * z + arrowWidth :
+                  -(cpWidth) - arrowWidth) +
+                  tr[0])
         });
       }
     },
@@ -1453,7 +1461,7 @@
       // Show dialog.
       this.set('destroy_dialog', views.createModalPanel(
           'Are you sure you want to destroy the service? ' +
-          'This cannot be undone.',
+              'This cannot be undone.',
           '#destroy-modal-panel',
           'Destroy Service',
           Y.bind(function(ev) {
@@ -1471,16 +1479,16 @@
      */
     destroyService: function(btn) {
       var env = this.get('component').get('env'),
-          service = this.get('destroy_service');
+              service = this.get('destroy_service');
       env.destroy_service(service.get('id'),
-                          Y.bind(this._destroyCallback, this,
-                                 service, btn));
+          Y.bind(this._destroyCallback, this,
+              service, btn));
     },
 
     _destroyCallback: function(service, btn, ev) {
       var getModelURL = this.get('component').get('getModelURL'),
-          topo = this.get('component'),
-          db = topo.get('db');
+              topo = this.get('component'),
+              db = topo.get('db');
       if (ev.err) {
         db.notifications.add(
             new models.Notification({
 
=== 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-30 19:48:17 +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();},
 
=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-08-19 20:51:17 +0000
+++ app/views/utils.js	2013-08-30 19:48:17 +0000
@@ -564,11 +564,11 @@
     @property constraintDescriptions
   */
   utils.constraintDescriptions = {
-    arch: {title: 'Architecture'},
-    cpu: {title: 'CPU', unit: 'GHz'},
+    'arch': {title: 'Architecture'},
+    'cpu': {title: 'CPU', unit: 'GHz'},
     'cpu-cores': {title: 'CPU Cores'},
     'cpu-power': {title: 'CPU Power', unit: 'GHz'},
-    mem: {title: 'Memory', unit: 'GB'}
+    'mem': {title: 'Memory', unit: 'GB'}
   };
 
   /**
@@ -1457,10 +1457,11 @@
     debugger;
     /*jshint debug:false */
   });
+
   /*
    * Extension for views to provide an apiFailure method.
    *
-   * @class apiFailure
+   * @class apiFailingView
    */
   utils.apiFailingView = function() {
     this._initAPIFailingView();
 
=== modified file 'app/views/viewlets/inspector-header.js'
--- app/views/viewlets/inspector-header.js	2013-08-12 15:13:17 +0000
+++ app/views/viewlets/inspector-header.js	2013-08-30 19:48:17 +0000
@@ -29,35 +29,22 @@
     name: 'inspectorHeader',
     template: templates['inspector-header'],
     slot: 'header',
-    bindings: {
-      icon: {
-        'update': function(node, value) {
-          // XXX: Icon is only present on services that pass through
-          // the Ghost phase of the GUI. Once we have better integration
-          // with the charm browser API services handling of icon
-          // can be improved.
-          var icon = node.one('img');
-          if (icon === null && value) {
-            node.append('<img>');
-            icon = node.one('img');
-          }
-          if (value) {
-            icon.set('src', value);
-          }
-        }
-      }
-    },
     'render': function(model, viewContainerAttrs) {
       this.container = Y.Node.create(this.templateWrapper);
       var pojoModel = model.getAttrs();
       if (pojoModel.scheme) {
         pojoModel.ghost = true;
       }
+      // If this is a service, the id is the service.charm.
       if (pojoModel.charm) {
         pojoModel.charmUrl = pojoModel.charm;
       } else {
+        // If this is a charm model, just use the id.
         pojoModel.charmUrl = pojoModel.id;
       }
+      // Manually add the icon url for the charm since we don't have access to
+      // the browser handlebars helper at this location.
+      pojoModel.icon = viewContainerAttrs.store.iconpath(pojoModel.charmUrl);
       this.container.setHTML(this.template(pojoModel));
     }
   };
 
=== modified file 'app/views/viewlets/service-constraints.js'
--- app/views/viewlets/service-constraints.js	2013-08-19 16:58:14 +0000
+++ app/views/viewlets/service-constraints.js	2013-08-30 19:48:17 +0000
@@ -58,6 +58,7 @@
     }
 
   };
+
 }, '0.0.1', {
   requires: [
     'node',
 
=== modified file 'app/views/viewlets/service-ghost.js'
--- app/views/viewlets/service-ghost.js	2013-08-08 17:30:58 +0000
+++ app/views/viewlets/service-ghost.js	2013-08-30 19:48:17 +0000
@@ -43,27 +43,34 @@
         }
       }
     },
-    'render': function(model) {
+    'render': function(model, viewletMgrAttrs) {
       this.container = Y.Node.create(this.templateWrapper);
 
       // This is to allow for data binding on the ghost settings
       // while using a shared template across both inspectors
-      var options = model.getAttrs();
+      var templateOptions = model.getAttrs();
 
       // XXX - Jeff
       // not sure this should be done like this
       // but this will allow us to use the old template.
-      options.settings = utils.extractServiceSettings(options.options);
+      templateOptions.settings = utils.extractServiceSettings(
+          templateOptions.options);
+
+      templateOptions.constraints = utils.getConstraints(
+          // no current constraints in play.
+          {},
+          viewletMgrAttrs.env.genericConstraints);
 
       // Signalling to the shared templates that this is the ghost view.
-      options.ghost = true;
-      this.container.setHTML(this.template(options));
+      templateOptions.ghost = true;
+      this.container.setHTML(this.template(templateOptions));
 
-      this.container.all('textarea.config-field')
-        .plug(plugins.ResizingTextarea,
-              { max_height: 200,
-                min_height: 18,
-                single_line: 18});
+      var ResizingTextarea = plugins.ResizingTextArea;
+      this.container.all('textarea.config-field').plug(ResizingTextarea, {
+        max_height: 200,
+        min_height: 18,
+        single_line: 18
+      });
     }
   };
 
 
=== modified file 'app/widgets/viewmode-controls.js'
--- app/widgets/viewmode-controls.js	2013-07-15 13:17:42 +0000
+++ app/widgets/viewmode-controls.js	2013-08-30 19:48:17 +0000
@@ -142,6 +142,16 @@
       );
 
       this._updateActiveNav(this.get('currentViewmode'));
+      this.on('destroy', function(ev) {
+        // We don't actually want the widget to remove any DOM. Just run our
+        // unbinding of events for us.
+        ev.halt();
+        this._events.forEach(function(e) {
+          e.detach();
+        });
+        this._events = [];
+      }, this);
+
     },
 
     /**
@@ -189,6 +199,83 @@
     }
   });
 
+  /**
+   * Extension for views to provide viewmode controls.
+   *
+   * @class viewmodeControllingView
+   */
+  ns.ViewmodeControlsViewExtension = function() {};
+  ns.ViewmodeControlsViewExtension.prototype = {
+    /**
+     * Binds the viewmode controls on the page to the viewmode change events.
+     *
+     * @method _bindViewmodeControls
+     * @param {Y.Widget} controls The viewmode control widget.
+     */
+    _bindViewmodeControls: function(controls) {
+      this._fullscreen = controls.on(
+          controls.EVT_FULLSCREEN, this._goFullscreen, this);
+      this._sidebar = controls.on(
+          controls.EVT_SIDEBAR, this._goSidebar, this);
+      this._minimized = controls.on(
+          controls.EVT_TOGGLE_VIEWABLE, this._toggleMinimized, this);
+      this._destroyMe = this.on('destroy', function() {
+        // Unbind the View events listening for events from the widget.
+        this._fullscreen.detach();
+        this._sidebar.detach();
+        this._minimized.detach();
+        // Including this event.
+        this._destroyMe.detach();
+        // Finally, make sure we run destroy on the widget itself to unbind
+        // it's own events.
+        controls.destroy();
+      });
+    },
+
+    /**
+      Upon clicking the browser icon make sure we re-route to the
+      new form of the UX.
+
+      @method _goFullscreen
+      @param {Event} ev the click event handler on the button.
+
+     */
+    _goFullscreen: function(ev) {
+      ev.halt();
+      this.fire('viewNavigate', {
+        change: {
+          viewmode: 'fullscreen'
+        }
+      });
+    },
+
+    /**
+      Upon clicking the build icon make sure we re-route to the
+      new form of the UX.
+
+      @method _goSidebar
+      @param {Event} ev the click event handler on the button.
+
+     */
+    _goSidebar: function(ev) {
+      ev.halt();
+      this.fire('viewNavigate', {
+        change: {
+          viewmode: 'sidebar'
+        }
+      });
+    },
+
+    /**
+     * Place holder to toggle the minimized view; in minimized this should show
+     * sidebar, in sidebar this should show minimized.
+     * @method _toggleMinimized
+     * @param {Event} ev event to trigger the toggle.
+     *
+     */
+    _toggleMinimized: function(ev) {}
+  };
+
 }, '0.1.0', {
   requires: [
     'base',
 
=== modified file 'docs/d3-component-framework.rst'
--- docs/d3-component-framework.rst	2013-01-15 14:39:44 +0000
+++ docs/d3-component-framework.rst	2013-08-30 19:48:17 +0000
@@ -117,6 +117,11 @@
 module declaration, but a module writer must understand them all to properly use
 the framework.
 
+When a Component is created it can be in either an interactive or
+non-interactive state. This is controlled through a Boolean 'interactive'
+attribute which defaults to true. When false events will not be bound and this
+section can be skipped.
+
 When modules are added, three sets of declarative events are bound. This is
 done by including in the module an events object with the following (each
 optional) sections::
 
=== modified file 'lib/views/browser/charm-full.less'
--- lib/views/browser/charm-full.less	2013-08-13 00:35:01 +0000
+++ lib/views/browser/charm-full.less	2013-08-30 19:48:17 +0000
@@ -86,7 +86,6 @@
             float: left;
         }
         .charm-icon,
-        .category-icon,
         img.icon {
             width: 120px;
             height: 120px;
 
=== modified file 'lib/views/browser/charm-token.less'
--- lib/views/browser/charm-token.less	2013-08-09 14:28:06 +0000
+++ lib/views/browser/charm-token.less	2013-08-30 19:48:17 +0000
@@ -13,15 +13,12 @@
             min-width: 200px;
 
             .charm-icon,
-            .category-icon,
             .icon {
                 margin-right: 12px;
                 position: relative;
             }
             .charm-icon,
             .charm-icon img,
-            .category-icon,
-            .category-icon img,
             .icon,
             .icon img {
                 width: 48px;
@@ -39,15 +36,12 @@
         }
         &.small {
             .charm-icon,
-            .category-icon,
             .icon {
                 margin-right: 10px;
                 position: relative;
             }
             .charm-icon,
             .charm-icon img,
-            .category-icon,
-            .category-icon img,
             .icon,
             .icon img {
                 width: 50px;
@@ -67,15 +61,12 @@
         }
         &.large {
             .charm-icon,
-            .category-icon,
             .icon {
                 margin-right: 16px;
                 position: relative;
             }
             .charm-icon,
             .charm-icon img,
-            .category-icon,
-            .category-icon img,
             .icon,
             .icon img {
                 width: 96px;
 
=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less	2013-08-21 03:20:46 +0000
+++ lib/views/juju-inspector.less	2013-08-30 19:48:17 +0000
@@ -41,7 +41,7 @@
         position: absolute;
         top: 20px;
         bottom: @navbar-bottom-height + 20px;
-        right: @inspector-width + 35px;
+        right: @inspector-width + 71px;
         overflow-y: auto;
         overflow-x: hidden;
         width: @bws-panel-width;
@@ -115,7 +115,7 @@
         .create-border-radius(@border-radius);
         position: absolute;
         top: 20px;
-        right: 35px;
+        right: 70px;
         width: @inspector-width;
         min-height: 250px;
         border: 0;
@@ -248,6 +248,9 @@
                 padding-left: 10px;
                 cursor: pointer;
             }
+            .editable-constraints {
+                padding-left: 10px;
+            }
             .unit-constraints-confirm {
                 overflow: hidden;
                 height: 130px;
@@ -272,6 +275,9 @@
             .unit-constraints-confirm.closed {
                 height: 0;
             }
+            .unit-constraints-confirm.editing {
+                height: 300px;
+            }
         }
 
         .settings-wrapper {
@@ -290,6 +296,9 @@
             textarea {
                 width: 100%;
             }
+            input[type=text] {
+                width: 150px;
+            }
             .settings-description {
                 font-size: 12px;
 
@@ -389,7 +398,7 @@
         }
 
         /* Resetting panel styles. Can be removed after old inspector styles are
-           removed. */
+           removed. (ServiceInspector) */
         .charm-panel-configure {
             background: transparent;
             float: none;
@@ -468,11 +477,11 @@
                     input.service-name {
                         width: 125px;
                     }
-                    .charm-icon {
+                    .icon {
                         width: 64px;
                         height: 64px;
                         margin-right: 1em;
-                        background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
+
                         img {
                             /* bootstrap sets this to middle */
                             vertical-align: baseline;
@@ -582,8 +591,7 @@
                 font-size: 18px;
                 padding-left: 0;
             }
-            .settings-wrapper,
-            .control-group {
+            .settings-wrapper {
                 position: relative;
                 padding: 0 10px;
 
 
=== 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-30 19:48:17 +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/index.html'
--- test/index.html	2013-08-06 04:35:06 +0000
+++ test/index.html	2013-08-30 19:48:17 +0000
@@ -32,7 +32,7 @@
         should = chai.should();
     mocha.reporter('html');
     mocha.ui('bdd');
-    mocha.setup({ignoreLeaks: false, timeout: 10000})
+    mocha.setup({ignoreLeaks: false, timeout: 10000});
   </script>
 
   <!-- Load up YUI base, app modules, and test utils -->
@@ -56,6 +56,7 @@
   <script src="test_browser_models.js"></script>
   <script src="test_browser_search_view.js"></script>
   <script src="test_browser_search_widget.js"></script>
+  <script src="test_bundle_module.js"></script>
   <script src="test_charm_configuration.js"></script>
   <script src="test_charm_container.js"></script>
   <script src="test_charm_panel.js"></script>
 
=== modified file 'test/test_app.js'
--- test/test_app.js	2013-07-31 14:30:47 +0000
+++ test/test_app.js	2013-08-30 19:48:17 +0000
@@ -160,7 +160,7 @@
 
     it('should be able to route objects to internal URLs', function() {
       constructAppInstance({
-        env: juju.newEnvironment({ conn: new utils.SocketStub() })
+        env: juju.newEnvironment({conn: new utils.SocketStub()}, 'python')
       });
       // Take handles to database objects and ensure we can route to the view
       // needed to show them.
@@ -241,6 +241,14 @@
         })
       });
 
+      // XXX bug:1217383
+      // Force an app._controlEvents so that we don't try to bind viewmode
+      // controls.
+      var fakeEv = {
+        detach: function() {}
+      };
+      app._controlEvents = [fakeEv, fakeEv];
+
       var checkUrls = [{
         url: ':gui:/service/memcached/',
         hidden: true
@@ -329,6 +337,12 @@
       return app;
     };
 
+    // Ensure the given message is a login request.
+    var assertIsLogin = function(message) {
+      assert.equal('Admin', message.Type);
+      assert.equal('Login', message.Request);
+    };
+
     it('avoids trying to login if the env is not connected', function(done) {
       var app = makeApp(false); // Create a disconnected app.
       app.after('ready', function() {
@@ -341,7 +355,7 @@
       var app = makeApp(true); // Create a connected app.
       app.after('ready', function() {
         assert.equal(1, conn.messages.length);
-        assert.equal('login', conn.last_message().op);
+        assertIsLogin(conn.last_message());
         done();
       });
     });
@@ -360,21 +374,22 @@
     it('displays the login view if credentials are not valid', function(done) {
       var app = makeApp(true); // Create a connected app.
       app.after('ready', function() {
-        // Mimic a login failed response.
-        conn.msg({op: 'login', result: false});
+        app.env.login();
+        // Mimic a login failed response assuming login is the first request.
+        conn.msg({RequestId: 1, Error: 'Invalid user or password'});
         assert.equal(1, conn.messages.length);
-        assert.equal('login', conn.last_message().op);
+        assertIsLogin(conn.last_message());
         assert.equal(LOGIN_VIEW_NAME, app.get('activeView').name);
         done();
       });
     });
 
-    it('login method hanlder is called after successful login', function(done) {
+    it('login method handler is called after successful login', function(done) {
       var oldOnLogin = Y.juju.App.onLogin;
       Y.juju.App.prototype.onLogin = function(e) {
         assert.equal(conn.messages.length, 1);
-        assert.equal(conn.last_message().op, 'login');
-        assert.equal(e.data.result, true);
+        assertIsLogin(conn.last_message());
+        assert.isTrue(e.data.result, true);
         Y.juju.App.onLogin = oldOnLogin;
         done();
       };
@@ -391,7 +406,7 @@
       app.after('ready', function() {
         env.connect();
         assert.equal(1, conn.messages.length);
-        assert.equal('login', conn.last_message().op);
+        assertIsLogin(conn.last_message());
         done();
       });
     });
@@ -403,10 +418,8 @@
         // Disconnect and reconnect the WebSocket.
         conn.transient_close();
         conn.open();
-        assert.equal(2, conn.messages.length);
-        Y.each(conn.messages, function(message) {
-          assert.equal('login', message.op);
-        });
+        assert.equal(1, conn.messages.length);
+        assertIsLogin(conn.last_message());
         done();
       });
     });
 
=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-08-19 17:15:16 +0000
+++ test/test_browser_app.js	2013-08-30 19:48:17 +0000
@@ -181,6 +181,54 @@
   })();
 
   (function() {
+    describe('browser minimzed view', function() {
+      var Y, browser, container, view, views, Minimized;
+
+      before(function(done) {
+        Y = YUI(GlobalConfig).use(
+            'juju-browser',
+            'juju-models',
+            'juju-views',
+            'juju-tests-utils',
+            'subapp-browser-minimized',
+            function(Y) {
+              browser = Y.namespace('juju.browser');
+              views = Y.namespace('juju.browser.views');
+              Minimized = views.MinimizedView;
+              done();
+            });
+      });
+
+      beforeEach(function() {
+        container = Y.namespace('juju-tests.utils').makeContainer('container');
+        addBrowserContainer(Y, container);
+        // Mock out a dummy location for the Store used in view instances.
+        window.juju_config = {
+          charmworldURL: 'http://localhost'
+        };
+      });
+
+      afterEach(function() {
+        view.destroy();
+        Y.one('#subapp-browser').remove(true);
+        delete window.juju_config;
+        container.remove(true);
+      });
+
+      it('toggles to sidebar', function(done) {
+        var container = Y.one('#subapp-browser');
+        view = new Minimized();
+        view.on('viewNavigate', function(ev) {
+          assert(ev.change.viewmode === 'sidebar');
+          done();
+        });
+        view.render(container);
+        view.controls._toggleViewable({halt: function() {}});
+      });
+    });
+  })();
+
+  (function() {
     describe('browser sidebar view', function() {
       var Y, browser, container, view, views, Sidebar;
 
@@ -332,13 +380,14 @@
 
   (function() {
     describe('browser app', function() {
-      var Y, app, browser, Charmworld2, next;
+      var Y, app, browser, Charmworld2, container, next;
 
       before(function(done) {
         Y = YUI(GlobalConfig).use(
             'app-subapp-extension',
             'juju-browser',
             'juju-charm-store',
+            'juju-tests-utils',
             'juju-views',
             'subapp-browser', function(Y) {
               browser = Y.namespace('juju.subapps');
@@ -353,12 +402,16 @@
         window.juju_config = {
           charmworldURL: 'http://localhost'
         };
+        container = Y.namespace('juju-tests.utils').makeContainer('container');
+        addBrowserContainer(Y, container);
+
       });
 
       afterEach(function() {
         if (app) {
           app.destroy();
         }
+        container.remove(true);
         window.juju_config = undefined;
       });
 
@@ -383,6 +436,28 @@
         assert.isTrue(called);
       });
 
+      it('resets using initState', function() {
+        app = new browser.Browser();
+        var mockView = {
+          destroy: function() {}
+        };
+        app._sidebar = mockView;
+        app._minimized = mockView;
+        app._fullscreen = mockView;
+
+        // Setup some previous state to check for clearing.
+        app._oldState.viewmode = 'fullscreen';
+        app._viewState.viewmode = 'sidebar';
+
+        app.initState();
+
+        assert.equal(app._sidebar, undefined, 'sidebar is removed');
+        assert.equal(app._fullscreen, undefined, 'fullscreen is removed');
+        assert.equal(app._minimized, undefined, 'minimized is removed');
+        assert.equal(app._oldState.viewmode, null, 'old state is reset');
+        assert.equal(app._viewState.viewmode, null, 'view state is reset');
+      });
+
       it('correctly strips viewmode from the charmID', function() {
         app = new browser.Browser();
         var paths = [
@@ -609,6 +684,7 @@
             'app-subapp-extension',
             'juju-views',
             'juju-browser',
+            'juju-tests-utils',
             'subapp-browser', function(Y) {
               browser = Y.namespace('juju.subapps');
 
@@ -723,6 +799,8 @@
       it('resets filters when navigating away from search', function() {
         browser._viewState.search = true;
         browser._filter.set('text', 'foo');
+        // Set the state before changing up.
+        browser._saveState();
         browser._getStateUrl({search: false});
         assert.equal('', browser._filter.get('text'));
       });
@@ -1143,6 +1221,18 @@
 
       it('when hidden the browser avoids routing', function() {
         browser.hidden = true;
+        // XXX bug:1217383
+        // We also want to verify that the old views are cleared to avoid
+        // having hidden views doing UX work for us.
+        var hitCount = 0;
+        var mockView = {
+          destroy: function() {
+            hitCount = hitCount + 1;
+          }
+        };
+        browser._sidebar = mockView;
+        browser._minimized = mockView;
+        browser._fullscreen = mockView;
 
         var req = {
           path: '/minimized',
@@ -1161,6 +1251,13 @@
 
         minNode.getComputedStyle('display').should.eql('none');
         browserNode.getComputedStyle('display').should.eql('none');
+
+        assert.equal(hitCount, 3);
+
+        // The view state needs to also be sync'd and updated even though
+        // we're hidden so that we can detect changes in the app state across
+        // requests while hidden.
+        assert.equal(browser._oldState.viewmode, 'minimized');
       });
 
       it('knows when the search cache should be updated', function() {
@@ -1169,16 +1266,19 @@
           'querystring': 'text=apache'
         });
         assert.isTrue(browser._searchChanged());
+        browser._saveState();
         browser._getStateUrl({
           'search': true,
           'querystring': 'text=apache'
         });
         assert.isFalse(browser._searchChanged());
+        browser._saveState();
         browser._getStateUrl({
           'search': true,
           'querystring': 'text=ceph'
         });
         assert.isTrue(browser._searchChanged());
+        browser._saveState();
       });
 
       it('permits a filter clear command', function() {
 
=== modified file 'test/test_browser_editorial.js'
--- test/test_browser_editorial.js	2013-07-16 19:05:46 +0000
+++ test/test_browser_editorial.js	2013-08-30 19:48:17 +0000
@@ -140,26 +140,6 @@
       assert(node.all('.yui3-charmtoken-hidden').size() === 14);
     });
 
-    it('does a search when a category link is clicked', function(done) {
-      view = new EditorialView({
-        renderTo: Y.one('.bws-content')
-      });
-      var results = {
-        featuredCharms: [],
-        newCharms: [],
-        popularCharms: []
-      };
-      view.on('viewNavigate', function(ev) {
-        assert.isTrue(ev.change.search);
-        assert.equal(1, ev.change.filter.categories.length);
-        assert.equal('databases', ev.change.filter.categories[0]);
-        assert.equal(ev.change.filter.replace, true);
-        done();
-      });
-      view.render(results);
-      Y.one('#category-links').one('a').simulate('click');
-    });
-
     it('clicking a charm navigates for fullscreen', function(done) {
       fakeStore = new Y.juju.Charmworld2({});
       fakeStore.set('datasource', {
 
=== added file 'test/test_bundle_module.js'
--- test/test_bundle_module.js	1970-01-01 00:00:00 +0000
+++ test/test_bundle_module.js	2013-08-30 19:48:17 +0000
@@ -0,0 +1,98 @@
+/*
+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';
+
+describe('bundle module', function() {
+  var db, juju, models, utils, views, Y, bundleModule;
+  var bundle, container, fakeStore;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use([
+      'juju-topology',
+      'juju-view-bundle',
+      'juju-charm-store',
+      'juju-models',
+      'juju-tests-utils'
+    ],
+    function(Y) {
+      juju = Y.namespace('juju');
+      models = Y.namespace('juju.models');
+      utils = Y.namespace('juju-tests.utils');
+      views = Y.namespace('juju.views');
+      done();
+    });
+  });
+
+  beforeEach(function() {
+    container = utils.makeContainer();
+    db = new models.Database();
+  });
+
+  afterEach(function() {
+    if (container) { container.remove(true); }
+    if (bundle) { bundle.destroy(); }
+
+  });
+
+  function promiseBundle() {
+    db.environment.set('defaultSeries', 'precise');
+    var fakeStore = utils.makeFakeStore(db.charms);
+    fakeStore.iconpath = function() { return 'fake.svg'; };
+
+    return db.importDeployer(
+        jsyaml.safeLoad(utils.loadFixture('data/wp-deployer.yaml')),
+        fakeStore, {useGhost: true, targetBundle: 'wordpress-prod'})
+        .then(function() {
+          bundle = new views.BundleTopology({
+            db: db,
+            container: container,
+            store: fakeStore
+          }).render();
+          bundleModule = bundle.topology.modules.BundleModule;
+          bundleModule.set('useTransitions', false);
+          return bundle;
+        });
+  }
+
+  it('should create a proper service for each model', function(done) {
+    promiseBundle()
+    .then(function(bundle) {
+          // The size of the element should reflect the passed in params
+          var svg = d3.select(container.getDOMNode()).select('svg');
+          assert.equal(svg.attr('width'), 640);
+          assert.equal(svg.attr('height'), 480);
+
+          // We should have the two rendered services
+          assert.equal(container.all('.service').size(), 2);
+          assert.deepEqual(container.all('tspan.name').get('text'),
+              ['mysql', 'wordpress']);
+          var service = svg.select('.service');
+          assert.equal(service.attr('width'), '96');
+          assert.equal(service.attr('transform'), 'translate(115,89)');
+
+
+          container.remove(true);
+          bundle.destroy();
+          done();
+        }).then(undefined, done);
+
+  });
+
+});
+
 
=== modified file 'test/test_charm_panel.js'
--- test/test_charm_panel.js	2013-08-12 14:58:23 +0000
+++ test/test_charm_panel.js	2013-08-30 19:48:17 +0000
@@ -118,7 +118,8 @@
       serviceName = 'membase';
       // Mock the relevant environment calls.
       env = {
-        deploy: function(url, service, config, config_raw, units, callback) {
+        deploy: function(url, service, config, config_raw, units,
+                         constraints, callback) {
           callback({err: false});
         },
         update_annotations: function(service, type, annotations, callback) {
 
=== modified file 'test/test_charm_store.js'
--- test/test_charm_store.js	2013-08-21 16:02:10 +0000
+++ test/test_charm_store.js	2013-08-30 19:48:17 +0000
@@ -21,15 +21,17 @@
 (function() {
 
   describe('juju Charmworld2 api', function() {
-    var Y, models, conn, env, app, container, data, juju;
+    var Y, models, conn, env, app, container, data, juju, utils;
 
     before(function(done) {
       Y = YUI(GlobalConfig).use(
           'datasource-local', 'json-stringify', 'juju-charm-store',
           'datasource-io', 'io', 'array-extras', 'juju-charm-models',
+          'juju-tests-utils',
           function(Y) {
             juju = Y.namespace('juju');
             models = Y.namespace('juju.models');
+            utils = Y.namespace('juju-tests').utils;
             done();
           });
     });
@@ -210,6 +212,33 @@
       assert.equal(api.normalizeCharmId('cs:precise/wordpress-10'),
           'precise/wordpress-10');
     });
+
+    it('finds upgrades for charms - upgrade available', function(done) {
+      var store = utils.makeFakeStore();
+      var charm = new models.BrowserCharm({url: 'cs:precise/wordpress-10'});
+      store.promiseUpgradeAvailability(charm)
+        .then(function(upgrade) {
+            assert.equal(upgrade, 'precise/wordpress-15');
+            done();
+          }, function(error) {
+            assert.isTrue(false, 'We should not get here');
+            done();
+          });
+    });
+
+    it('finds upgrades for charms - no upgrade available', function(done) {
+      var store = utils.makeFakeStore();
+      var charm = new models.BrowserCharm({url: 'cs:precise/wordpress-15'});
+      store.promiseUpgradeAvailability(charm)
+        .then(function(upgrade) {
+            assert.isUndefined(upgrade);
+            done();
+          }, function(error) {
+            assert.isTrue(false, 'We should not get here');
+            done();
+          });
+    });
+
   });
 
 })();
 
=== modified file 'test/test_charm_view.js'
--- test/test_charm_view.js	2013-07-26 22:05:56 +0000
+++ test/test_charm_view.js	2013-08-30 19:48:17 +0000
@@ -138,14 +138,12 @@
       });
       var deployInput = charmView.get('container').one('#charm-deploy');
       deployInput.after('click', function() {
-        var msg = conn.last_message(),
-            charm = charmResults.charm,
-            expected = charm.series + '/' + charm.name;
+        var msg = conn.last_message();
         // Ensure the websocket received the `deploy` message.
-        msg.op.should.equal('deploy');
-        msg.charm_url.should.contain(expected);
+        assert.equal('ServiceDeploy', msg.Request);
+        assert.equal(charmResults.charm.id, msg.Params.CharmUrl);
         // A click to the deploy button redirects to the root page.
-        redirected.should.equal(true);
+        assert.isTrue(redirected);
         done();
       });
       deployInput.simulate('click');
@@ -164,8 +162,8 @@
       // Assertions are in a callback, so set them up first.
       deployButton.after('click', function() {
         var msg = conn.last_message();
-        assert.equal(msg.op, 'deploy');
-        assert.equal(msg.service_name, serviceName);
+        assert.equal('ServiceDeploy', msg.Request);
+        assert.equal(serviceName, msg.Params.ServiceName);
         done();
       });
       var serviceNameField = container.one('#service-name');
@@ -188,9 +186,10 @@
       // Assertions are in a callback, so set them up first.
       deployButton.after('click', function() {
         var msg = conn.last_message();
-        assert.equal(msg.op, 'deploy');
-        assert.property(msg.config, 'option0');
-        assert.equal(msg.config.option0, option0Value);
+        assert.equal('ServiceDeploy', msg.Request);
+        var config = msg.Params.Config;
+        assert.property(config, 'option0');
+        assert.equal(option0Value, config.option0);
         done();
       });
       container.one('#input-option0').set('value', option0Value);
@@ -225,7 +224,7 @@
       // Assertions are in a callback, so set them up first.
       deployButton.after('click', function() {
         var msg = conn.last_message();
-        assert.equal(msg.op, 'deploy');
+        assert.equal('ServiceDeploy', msg.Request);
         done();
       });
       deployButton.simulate('click');
 
=== modified file 'test/test_endpoints.js'
--- test/test_endpoints.js	2013-08-09 14:44:16 +0000
+++ test/test_endpoints.js	2013-08-30 19:48:17 +0000
@@ -378,6 +378,7 @@
 
   it('should update endpoints map when non-pending services are added',
      function(done) {
+       var store = utils.makeFakeStore();
        var service_name = 'wordpress';
        var charm_id = 'cs:precise/wordpress-2';
        app.db.charms.add({id: charm_id});
@@ -388,6 +389,7 @@
          id: service_name,
          pending: true,
          loaded: true,
+         store: store,
          charm: charm_id});
 
        controller.on('endpointMapAdded', function() {
@@ -535,7 +537,13 @@
     });
   });
 
-  it('should not call get_service when a pending service is added',
+  // Ensure the last message in the connection is a ServiceGet request.
+  var assertServiceGetCalled = function() {
+    assert.equal(1, conn.messages.length);
+    assert.equal('ServiceGet', conn.last_message().Request);
+  };
+
+  it('should not call ServiceGet when a pending service is added',
      function() {
        var charm_id = 'cs:precise/wordpress-2';
        app.db.services.add({
@@ -545,7 +553,7 @@
        assert.equal(0, conn.messages.length);
      });
 
-  it('should call get_service when non-pending services are added',
+  it('should call ServiceGet when non-pending services are added',
      function() {
        var service_name = 'wordpress';
        var charm_id = 'cs:precise/wordpress-2';
@@ -558,11 +566,10 @@
          charm: charm_id});
        var svc = app.db.services.getById(service_name);
        svc.set('pending', false);
-       assert.equal(1, conn.messages.length);
-       assert.equal('get_service', conn.last_message().op);
+       assertServiceGetCalled();
      });
 
-  it('should call get_service when a service\'s charm changes', function() {
+  it('should call ServiceGet when a service\'s charm changes', function() {
     var service_name = 'wordpress';
     var charm_id = 'cs:precise/wordpress-2';
     var charm = app.db.charms.add({id: charm_id});
@@ -572,15 +579,13 @@
       id: service_name,
       pending: false,
       charm: charm_id});
-    assert.equal(1, conn.messages.length);
-    assert.equal('get_service', conn.last_message().op);
+    assertServiceGetCalled();
     var svc = app.db.services.getById(service_name);
     charm_id = 'cs:precise/wordpress-3';
     var charm2 = app.db.charms.add({id: charm_id, loaded: true});
     destroyMe.push(charm2);
     svc.set('charm', charm_id);
-    assert.equal(1, conn.messages.length);
-    assert.equal('get_service', conn.last_message().op);
+    assertServiceGetCalled();
   });
 
 });
 
=== modified file 'test/test_env.js'
--- test/test_env.js	2013-07-25 16:59:30 +0000
+++ test/test_env.js	2013-08-30 19:48:17 +0000
@@ -43,12 +43,12 @@
 
     it('returns the default env if none is specified', function() {
       var env = juju.newEnvironment({});
-      assert.equal('python-env', env.name);
+      assert.equal('go-env', env.name);
     });
 
     it('returns the default env if an invalid one is specified', function() {
       var env = juju.newEnvironment({}, 'invalid-api-backend');
-      assert.equal('python-env', env.name);
+      assert.equal('go-env', env.name);
     });
 
     it('sets up the env using the provided options', function() {
 
=== modified file 'test/test_env_go.js'
--- test/test_env_go.js	2013-06-12 18:11:05 +0000
+++ test/test_env_go.js	2013-08-30 19:48:17 +0000
@@ -55,6 +55,7 @@
 
   });
 
+
   describe('Go Juju JSON replacer', function() {
     var cleanUpJSON, Y;
 
@@ -417,6 +418,7 @@
         Request: 'ServiceDeploy',
         Params: {
           Config: {},
+          Constraints: {},
           CharmUrl: 'precise/mysql'
         },
         RequestId: 1
@@ -432,6 +434,7 @@
         Params: {
           // Configuration values are sent as strings.
           Config: {debug: 'true', logo: 'example.com/mylogo.png'},
+          Constraints: {},
           CharmUrl: 'precise/mediawiki'
         },
         RequestId: 1
@@ -450,6 +453,7 @@
         Request: 'ServiceDeploy',
         Params: {
           Config: {},
+          Constraints: {},
           ConfigYAML: config_raw,
           CharmUrl: 'precise/mysql'
         },
@@ -460,15 +464,29 @@
       assert.deepEqual(expected, msg);
     });
 
+    it('successfully deploys a service with constraints', function() {
+      var constraints = {
+        'cpu-cores': 1,
+        'cpu-power': 0,
+        'mem': '512M',
+        'arch': 'i386'
+      };
+      env.deploy('precise/mediawiki', null, null, null, 1, constraints);
+      msg = conn.last_message();
+      assert.deepEqual(msg.Params.Constraints, constraints);
+    });
+
     it('successfully deploys a service storing charm data', function() {
       var charm_url;
       var err;
       var service_name;
-      env.deploy('precise/mysql', 'mysql', null, null, null, function(data) {
-        charm_url = data.charm_url;
-        err = data.err;
-        service_name = data.service_name;
-      });
+      env.deploy(
+          'precise/mysql', 'mysql', null, null, null, null, function(data) {
+            charm_url = data.charm_url;
+            err = data.err;
+            service_name = data.service_name;
+          }
+      );
       // Mimic response.
       conn.msg({
         RequestId: 1,
@@ -481,9 +499,11 @@
 
     it('handles failed service deploy', function() {
       var err;
-      env.deploy('precise/mysql', 'mysql', null, null, null, function(data) {
-        err = data.err;
-      });
+      env.deploy(
+          'precise/mysql', 'mysql', null, null, null, null, function(data) {
+            err = data.err;
+          }
+      );
       // Mimic response.
       conn.msg({
         RequestId: 1,
 
=== modified file 'test/test_env_python.js'
--- test/test_env_python.js	2013-05-17 14:51:05 +0000
+++ test/test_env_python.js	2013-08-30 19:48:17 +0000
@@ -37,7 +37,7 @@
             testUtils = Y.namespace('juju-tests.utils');
             conn = new testUtils.SocketStub();
             juju = Y.namespace('juju');
-            env = juju.newEnvironment({conn: conn});
+            env = juju.newEnvironment({conn: conn}, 'python');
             env.connect();
             conn.open();
             done();
@@ -70,6 +70,17 @@
       msg.config_raw.should.equal(config_raw);
     });
 
+    it('successfully deploys a service with constraints', function() {
+      var constraints = {
+        'cpu': 1,
+        'mem': '512M',
+        'arch': 'i386'
+      };
+      env.deploy('precise/mysql', null, null, null, 1, constraints);
+      msg = conn.last_message();
+      assert.deepEqual(msg.constraints, constraints);
+    });
+
     it('can add a unit', function() {
       env.add_unit('mysql', 3);
       msg = conn.last_message();
@@ -442,7 +453,7 @@
 
     it('denies deploying a charm if the GUI is read-only', function() {
       assertOperationDenied(
-          'deploy', ['cs:precise/haproxy', 'haproxy', {}, null, 3]);
+          'deploy', ['cs:precise/haproxy', 'haproxy', {}, null, 3, null]);
     });
 
     it('denies exposing a service if the GUI is read-only', function() {
 
=== modified file 'test/test_fakebackend.js'
--- test/test_fakebackend.js	2013-07-30 21:00:47 +0000
+++ test/test_fakebackend.js	2013-08-30 19:48:17 +0000
@@ -134,7 +134,9 @@
         pending: false,
         life: 'alive',
         subordinate: false,
-        unit_count: undefined
+        unit_count: undefined,
+        upgrade_available: false,
+        upgrade_to: undefined
       });
       var units = fakebackend.db.units.get_units_for_service(service);
       assert.lengthOf(units, 1);
@@ -143,6 +145,30 @@
       assert.equal(units[0].service, 'wordpress');
     });
 
+    it('deploys a charm with constraints', function() {
+      var options = {
+        constraints: {
+          cpu: 1,
+          mem: '4G',
+          arch: 'i386'
+        }
+      };
+      assert.isNull(
+          fakebackend.db.charms.getById('cs:precise/wordpress-15'));
+      fakebackend.deploy('cs:precise/wordpress-15', callback, options);
+      var service = fakebackend.db.services.getById('wordpress');
+      assert.isObject(
+          service,
+          'Null returend when a service was expected.');
+      assert.strictEqual(service, result.service);
+      var attrs = service.getAttrs();
+      var deployedConstraints = attrs.constraints;
+      assert.deepEqual(
+          options.constraints,
+          deployedConstraints
+      );
+    });
+
     it('rejects names that duplicate an existing service', function() {
       fakebackend.deploy('cs:precise/wordpress-15', callback);
       assert.isUndefined(result.error);
 
=== modified file 'test/test_ghost_inspector.js'
--- test/test_ghost_inspector.js	2013-08-15 00:40:51 +0000
+++ test/test_ghost_inspector.js	2013-08-30 19:48:17 +0000
@@ -70,8 +70,8 @@
     service = db.services.ghostService(charm);
 
     var fakeStore = new Y.juju.Charmworld2({});
-    fakeStore.iconpath = function() {
-      return 'charm icon url';
+    fakeStore.iconpath = function(id) {
+      return '/icon/' + id;
     };
 
     view = new jujuViews.environment({
@@ -118,6 +118,14 @@
         serviceNameInput.set('value', 'foo');
       });
 
+  it('displays the charms icon when rendered', function() {
+    inspector = setUpInspector();
+    var icon = container.one('.icon img');
+
+    // The icon url is from the fakestore we manually defined.
+    assert.equal(icon.getAttribute('src'), '/icon/cs:precise/mediawiki-8');
+  });
+
   it('deploys a service with the specified unit count & config', function() {
     inspector = setUpInspector();
     env.connect();
@@ -129,16 +137,74 @@
     vmContainer.one('.viewlet-manager-footer button.confirm').simulate('click');
 
     var message = env.ws.last_message();
-    assert.equal(message.num_units, numUnits);
-    assert.equal(message.op, 'deploy');
-    assert.equal(message.service_name, 'mediawiki');
-    assert.deepEqual(message.config, {
+    var params = message.Params;
+    var config = {
       admins: '',
-      debug: false,
+      debug: 'false',
       logo: '',
       name: 'foo',
       skin: 'vector'
-    });
+    };
+    assert.equal('ServiceDeploy', message.Request);
+    assert.equal('mediawiki', params.ServiceName);
+    assert.equal(numUnits, params.NumUnits);
+    assert.deepEqual(config, params.Config);
+  });
+
+  it('presents the contraints to the user in python env', function() {
+    // Create our own env to make sure we know which backend we're creating it
+    // against.
+    env.destroy();
+    env = juju.newEnvironment({conn: conn}, 'python');
+    inspector = setUpInspector();
+    var constraintsNode = container.all('.service-constraints');
+    assert.equal(constraintsNode.size(), 1);
+
+    var inputNodes = container.all('.service-constraints input');
+    assert.equal(inputNodes.size(), 3);
+  });
+
+  it('presents the contraints to the user in go env', function() {
+    // Create our own env to make sure we know which backend we're creating it
+    // against.
+    env.destroy();
+    env = juju.newEnvironment({conn: conn}, 'go');
+    inspector = setUpInspector();
+    var constraintsNode = container.all('.service-constraints');
+    assert.equal(constraintsNode.size(), 1);
+
+    var inputNodes = container.all('.service-constraints input');
+    assert.equal(inputNodes.size(), 4);
+  });
+
+  it('deploys with constraints in python env', function() {
+    env.destroy();
+    env = juju.newEnvironment({conn: conn}, 'python');
+    inspector = setUpInspector();
+    env.connect();
+    var vmContainer = inspector.viewletManager.get('container');
+
+    vmContainer.one('input[name=cpu]').set('value', 2);
+    // Called the deploy button, but the css if confirm.
+    vmContainer.one('.viewlet-manager-footer button.confirm').simulate('click');
+
+    var message = env.ws.last_message();
+    assert.equal(message.constraints.cpu, '2');
+  });
+
+  it('deploys with constraints in go env', function() {
+    env.destroy();
+    env = juju.newEnvironment({conn: conn}, 'go');
+    inspector = setUpInspector();
+    env.connect();
+    var vmContainer = inspector.viewletManager.get('container');
+
+    vmContainer.one('input[name=cpu-power]').set('value', 2);
+    // Called the deploy button, but the css if confirm.
+    vmContainer.one('.viewlet-manager-footer button.confirm').simulate('click');
+
+    var message = env.ws.last_message();
+    assert.equal(message.Params.Constraints['cpu-power'], '2');
   });
 
   it('disables and resets input fields when \'use default config\' is active',
 
=== modified file 'test/test_inspector_constraints.js'
--- test/test_inspector_constraints.js	2013-08-19 21:07:02 +0000
+++ test/test_inspector_constraints.js	2013-08-30 19:48:17 +0000
@@ -85,14 +85,15 @@
     return inspector;
   };
 
-  // Create a fake response from the API server.
+  // Create a fake response from the juju-core API server.
   var makeResponse = function(service, error) {
-    return {
-      err: error,
-      op: 'set_constraints',
-      request_id: 1,
-      service_name: service.get('id')
-    };
+    var response = {RequestId: 1};
+    if (error) {
+      response.Error = 'bad wolf';
+    } else {
+      response.Response = {};
+    }
+    return response;
   };
 
   // Retrieve and return the constraints viewlet.
@@ -131,7 +132,7 @@
     var constraintDescriptions = viewUtils.constraintDescriptions;
 
     Y.Array.each(env.genericConstraints, function(key) {
-      var node = container.one('div[for=' + key + '].control-label');
+      var node = container.one('label[for=' + key + ']');
       var expectedTitle = constraintDescriptions[key].title;
       assert.strictEqual(expectedTitle, node.getHTML());
     });
@@ -156,7 +157,7 @@
   });
 
   it('can save constraints', function() {
-    var expected = {arch: 'amd64', cpu: 'photon', mem: '1 teraflop'};
+    var expected = {arch: 'amd64', 'cpu-power': 100, mem: 4};
     // Change values in the form.
     Y.Object.each(expected, function(value, key) {
       var node = container.one('input[name=' + key + '].constraint-field');
@@ -167,14 +168,10 @@
     saveButton.simulate('click');
     var lastMessage = env.ws.last_message();
     // The set_constraint API method is correctly called.
-    assert.equal('set_constraints', lastMessage.op);
+    assert.equal('SetServiceConstraints', lastMessage.Request);
     // The expected constraints are passed in the API call.
     var obtained = Object.create(null);
-    Y.Array.each(lastMessage.constraints, function(value) {
-      var pair = value.split('=');
-      obtained[pair[0]] = pair[1];
-    });
-    assert.deepEqual(expected, obtained);
+    assert.deepEqual(expected, lastMessage.Params.Constraints);
   });
 
   it('handles error responses from the environment', function() {
 
=== modified file 'test/test_inspector_overview.js'
--- test/test_inspector_overview.js	2013-08-19 15:14:33 +0000
+++ test/test_inspector_overview.js	2013-08-30 19:48:17 +0000
@@ -20,7 +20,9 @@
 describe('Inspector Overview', function() {
 
   var view, service, db, models, utils, juju, env, conn, container,
-      inspector, Y, jujuViews, ENTER, charmConfig;
+      inspector, Y, jujuViews, ENTER, charmConfig,
+
+      client, backendJuju, state;
 
   before(function(done) {
     var requires = ['juju-gui', 'juju-views', 'juju-tests-utils',
@@ -60,6 +62,16 @@
     env.destroy();
     container.remove(true);
     window.flags = {};
+
+    if (client) {
+      client.destroy();
+    }
+    if (backendJuju) {
+      backendJuju.destroy();
+    }
+    if (state) {
+      state.destroy();
+    }
   });
 
   var setUpInspector = function() {
@@ -78,8 +90,8 @@
       ['unit', 'add', {id: 'mediawiki/2', agent_state: 'pending'}]
     ]}});
     var fakeStore = new Y.juju.Charmworld2({});
-    fakeStore.iconpath = function() {
-      return 'charm icon url';
+    fakeStore.iconpath = function(id) {
+      return '/icon/' + id;
     };
     view = new jujuViews.environment({
       container: container,
@@ -96,6 +108,14 @@
     return inspector;
   };
 
+  it('should show the proper icon based off the charm model', function() {
+    inspector = setUpInspector();
+    var icon = container.one('.icon img');
+
+    // The icon url comes from the fake store and the service charm attribute.
+    assert.equal(icon.getAttribute('src'), '/icon/precise/mediawiki-4');
+  });
+
   it('should start with the proper number of units shown in the text field',
      function() {
        inspector = setUpInspector();
@@ -110,8 +130,9 @@
        control.set('value', 1);
        control.simulate('keydown', { keyCode: ENTER }); // Simulate Enter.
        var message = conn.last_message();
-       message.op.should.equal('remove_units');
-       message.unit_names.should.eql(['mediawiki/2', 'mediawiki/1']);
+       assert.equal('DestroyServiceUnits', message.Request);
+       assert.deepEqual(
+       ['mediawiki/2', 'mediawiki/1'], message.Params.UnitNames);
      });
 
   it('should not do anything if requested is < 1',
@@ -132,10 +153,39 @@
        control.simulate('keydown', { keyCode: ENTER });
        // confirm the 'please confirm constraints' dialogue
        container.one('.confirm-num-units').simulate('click');
-       var message = conn.last_message();
-       message.op.should.equal('add_unit');
-       message.service_name.should.equal('mediawiki');
-       message.num_units.should.equal(4);
+       assert.equal(container.one('.unit-constraints-confirm')
+                       .one('span:first-child')
+                       .getHTML(), 'Scale up with the following constraints?');
+       var message = conn.last_message();
+       assert.equal('AddServiceUnits', message.Request);
+       assert.equal('mediawiki', message.Params.ServiceName);
+       assert.equal(4, message.Params.NumUnits);
+     });
+
+  it('should set the constraints before deploying any more units',
+     function() {
+       setUpInspector(true);
+       var control = container.one('.num-units-control');
+       control.set('value', 7);
+       control.simulate('keydown', { keyCode: ENTER });
+       var editConstraintsButton = container.one('.edit-constraints');
+       editConstraintsButton.simulate('click');
+       // It should be hidden after being clicked to display the constraints
+       assert.equal(editConstraintsButton.getStyle('display'), 'none');
+       var constraintsWrapper = container.one('.editable-constraints');
+       assert.equal(constraintsWrapper.getStyle('display'), 'block');
+       var constraints = {arch: 'amd64', 'cpu-cores': 4, mem: 8};
+       Y.Object.each(constraints, function(value, key) {
+          var node = constraintsWrapper.one('input[name=' + key + ']');
+          node.set('value', value);
+       });
+
+       // confirm the 'please confirm constraints' dialogue
+       container.one('.confirm-num-units').simulate('click');
+       var message = conn.last_message();
+       assert.equal('SetServiceConstraints', message.Request);
+       assert.equal('mediawiki', message.Params.ServiceName);
+       assert.deepEqual(constraints, message.Params.Constraints);
      });
 
   it('generates a proper statuses object', function() {
@@ -283,15 +333,14 @@
 
       unit.simulate('click');
       retryButton.simulate('click');
-      var msg = env.ws.last_message();
 
-      assert.deepEqual(msg, {
-        op: 'resolved',
-        unit_name: 'mediawiki/7',
-        relation_name: null,
-        retry: false,
-        request_id: 1
-      });
+      var expected = {
+        Params: {Retry: false, UnitName: 'mediawiki/7'},
+        Request: 'Resolved',
+        RequestId: 1,
+        Type: 'Client'
+      };
+      assert.deepEqual(expected, env.ws.last_message());
     });
 
     it('sends the retry command to the env for the selected unit', function() {
@@ -311,15 +360,14 @@
 
       unit.simulate('click');
       retryButton.simulate('click');
-      var msg = env.ws.last_message();
 
-      assert.deepEqual(msg, {
-        op: 'resolved',
-        unit_name: 'mediawiki/7',
-        relation_name: null,
-        retry: true,
-        request_id: 1
-      });
+      var expected = {
+        Params: {Retry: true, UnitName: 'mediawiki/7'},
+        Request: 'Resolved',
+        RequestId: 1,
+        Type: 'Client'
+      };
+      assert.deepEqual(expected, env.ws.last_message());
     });
 
     it('generates the button display map for each unit category', function() {
 
=== modified file 'test/test_inspector_settings.js'
--- test/test_inspector_settings.js	2013-08-15 15:37:52 +0000
+++ test/test_inspector_settings.js	2013-08-30 19:48:17 +0000
@@ -307,7 +307,8 @@
     input.set('value', 'foo');
 
     button.simulate('click');
-    assert.equal(env.ws.last_message().config.admins, 'foo');
+    var message = env.ws.last_message();
+    assert.equal('foo', message.Params.Config.admins);
     assert.equal(button.getHTML(), 'Save Changes');
   });
 
 
=== modified file 'test/test_login.js'
--- test/test_login.js	2013-05-17 14:51:05 +0000
+++ test/test_login.js	2013-08-30 19:48:17 +0000
@@ -45,26 +45,25 @@
     });
 
     test('the user is initially assumed to be unauthenticated', function() {
-      assert.equal(env.userIsAuthenticated, false);
+      assert.isFalse(env.userIsAuthenticated);
     });
 
     test('successful login event marks user as authenticated', function() {
-      var evt = {data: {op: 'login', result: true}};
-      env.handleLoginEvent(evt);
-      assert.equal(env.userIsAuthenticated, true);
+      var data = {Response: {}};
+      env.handleLogin(data);
+      assert.isTrue(env.userIsAuthenticated);
     });
 
     test('unsuccessful login event keeps user unauthenticated', function() {
-      var evt = {data: {op: 'login'}};
-      env.handleLoginEvent(evt);
-      assert.equal(env.userIsAuthenticated, false);
+      var data = {Error: 'who are you?'};
+      env.handleLogin(data);
+      assert.isFalse(env.userIsAuthenticated);
     });
 
     test('bad credentials are removed', function() {
-      var evt = {data: {op: 'login'}};
-      env.handleLoginEvent(evt);
-      var credentials = env.getCredentials();
-      assert.equal(credentials, null);
+      var data = {Error: 'who are you?'};
+      env.handleLogin(data);
+      assert.isNull(env.getCredentials());
     });
 
     test('credentials passed to the constructor are stored', function() {
@@ -93,11 +92,12 @@
     });
 
     test('with credentials set, login() sends an RPC message', function() {
-      env.setCredentials({ user: 'user', password: 'password' });
+      env.setCredentials({user: 'user', password: 'password'});
       env.login();
-      assert.equal(conn.last_message().op, 'login');
-      assert.equal(conn.last_message().user, 'user');
-      assert.equal(conn.last_message().password, 'password');
+      var message = conn.last_message();
+      assert.equal('Login', message.Request);
+      assert.equal('user', message.Params.AuthTag);
+      assert.equal('password', message.Params.Password);
     });
 
   });
@@ -143,9 +143,10 @@
       container.appendChild('<input/>').set('type', 'password').set(
           'value', 'password');
       loginView.login(ev);
-      assert.equal(conn.last_message().op, 'login');
-      assert.equal(conn.last_message().user, 'user');
-      assert.equal(conn.last_message().password, 'password');
+      var message = conn.last_message();
+      assert.equal('Login', message.Request);
+      assert.equal('user', message.Params.AuthTag);
+      assert.equal('password', message.Params.Password);
     });
 
     test('the view render method adds the login form', function() {
 
=== modified file 'test/test_model.js'
--- test/test_model.js	2013-08-21 16:02:10 +0000
+++ test/test_model.js	2013-08-30 19:48:17 +0000
@@ -522,7 +522,7 @@
   it('must send request to juju environment for local charms', function() {
     var charm = new models.BrowserCharm({id: 'local:precise/foo-4'}).load(env);
     assert(!charm.loaded);
-    conn.last_message().op.should.equal('get_charm');
+    assert.equal('CharmInfo', conn.last_message().Request);
   });
 
   it('must handle success from local charm request', function(done) {
@@ -530,57 +530,47 @@
         env,
         function(err, response) {
           assert(!err);
-          charm.get('summary').should.equal('wowza');
+          assert.equal('wowza', charm.get('summary'));
           assert(charm.loaded);
           done();
         });
-    var response = conn.last_message();
-    response.result = { summary: 'wowza' };
-    env.dispatch_result(response);
-    // The test in the callback above should run.
-  });
-
-  it('parses the old charm model options location correctly', function(done) {
-    var charm = new models.BrowserCharm({id: 'local:precise/foo-4'}).load(
-        env,
-        function(err, response) {
-          assert(!err);
-          // This checks to make sure the parse mechanism is working properly
-          // for both the old ane new charm browser.
-          assert.equal(charm.get('options').default_log['default'], 'global');
-          done();
-        });
-    var response = conn.last_message();
-    response.result = {
-      config: {
-        options: {
-          default_log: {
-            'default': 'global',
-            description: 'Default log',
-            type: 'string'
-          }}}};
-    env.dispatch_result(response);
-  });
-
-  it('parses the new charm model options location correctly', function(done) {
-    var charm = new models.BrowserCharm({id: 'local:precise/foo-4'}).load(
-        env,
-        function(err, response) {
-          assert(!err);
-          // This checks to make sure the parse mechanism is working properly
-          // for both the old ane new charm browser.
-          assert.equal(charm.get('options').default_log['default'], 'global');
-          done();
-        });
-    var response = conn.last_message();
-    response.result = {
-      options: {
-        default_log: {
-          'default': 'global',
-          description: 'Default log',
-          type: 'string'
-        }}};
-    env.dispatch_result(response);
+    var response = {
+      RequestId: conn.last_message().RequestId,
+      Response: {Meta: {Summary: 'wowza'}, Config: {}}
+    };
+    env.dispatch_result(response);
+    // The test in the callback above should run.
+  });
+
+  it('parses charm model options correctly', function(done) {
+    var charm = new models.BrowserCharm({id: 'local:precise/foo-4'}).load(
+        env,
+        function(err, response) {
+          assert(!err);
+          // This checks to make sure the parse mechanism is working properly
+          // for both the old ane new charm browser.
+          var option = charm.get('options').default_log;
+          assert.equal('global', option['default']);
+          assert.equal('Default log', option.description);
+          done();
+        });
+    var response = {
+      RequestId: conn.last_message().RequestId,
+      Response: {
+        Meta: {},
+        Config: {
+          Options: {
+            default_log: {
+              Default: 'global',
+              Description: 'Default log',
+              Type: 'string'
+            }
+          }
+        }
+      }
+    };
+    env.dispatch_result(response);
+    // The test in the callback above should run.
   });
 
   it('must handle failure from local charm request', function(done) {
@@ -592,8 +582,10 @@
           assert(!charm.loaded);
           done();
         });
-    var response = conn.last_message();
-    response.err = true;
+    var response = {
+      RequestId: conn.last_message().RequestId,
+      Error: 'error'
+    };
     env.dispatch_result(response);
     // The test in the callback above should run.
   });
 
=== modified file 'test/test_model_controller.js'
--- test/test_model_controller.js	2013-08-12 14:56:38 +0000
+++ test/test_model_controller.js	2013-08-30 19:48:17 +0000
@@ -20,7 +20,7 @@
 
 describe('Model Controller Promises', function() {
   var modelController, yui, env, db, conn, environment, load, serviceError,
-      getService, cleanups, aEach;
+      getService, cleanups, aEach, utils;
 
   before(function(done) {
     YUI(GlobalConfig).use(
@@ -31,12 +31,13 @@
           load = Y.juju.models.BrowserCharm.prototype.load;
           getService = environments.PythonEnvironment.prototype.get_service;
           aEach = Y.Array.each;
+          utils = Y.namespace('juju-tests.utils');
           done();
         });
   });
 
   beforeEach(function() {
-    conn = new yui['juju-tests'].utils.SocketStub();
+    conn = new utils.SocketStub();
     environment = env = yui.juju.newEnvironment(
         {conn: conn});
     db = new yui.juju.models.Database();
@@ -56,6 +57,7 @@
     yui.Array.each(cleanups, function(cleanup) {
       cleanup();
     });
+    window.flags = {};
   });
 
   /**
@@ -91,7 +93,7 @@
     @static
   */
   function clobberGetService() {
-    yui.juju.environments.PythonEnvironment.prototype.get_service = function(
+    yui.juju.environments.GoEnvironment.prototype.get_service = function(
         serviceName, callback) {
       assert(typeof serviceName, 'string');
       // This is to test the error reject path of the getService tests
@@ -244,4 +246,30 @@
               done();
             });
       });
+
+  it('can check for available upgrades', function(done) {
+    clobberLoad();
+    clobberGetService();
+    var serviceId = 'wordpress',
+        charmId = 'cs:precise/wordpress-7';
+    db.services.add({
+      id: serviceId,
+      loaded: true,
+      charm: charmId
+    });
+    window.flags.upgradeCharm = true;
+    modelController.set('store', utils.makeFakeStore());
+    var promise = modelController.getServiceWithCharm(serviceId);
+    promise.then(
+        function(result) {
+          var service = db.services.getById(serviceId);
+          assert(service.get('upgrade_available'), true);
+          assert(service.get('upgrade_to'), 'precise/wordpress-15');
+          done();
+        },
+        function() {
+          assert.fail('This should not have failed.');
+          done();
+        });
+  });
 });
 
=== modified file 'test/test_notifications.js'
--- test/test_notifications.js	2013-07-31 14:30:47 +0000
+++ test/test_notifications.js	2013-08-30 19:48:17 +0000
@@ -263,7 +263,7 @@
     var container = Y.Node.create(
         '<div id="test" class="container"></div>'),
         conn = new(Y.namespace('juju-tests.utils')).SocketStub(),
-        env = juju.newEnvironment({conn: conn});
+        env = juju.newEnvironment({conn: conn}, 'python');
     app = new Y.juju.App({
       env: env,
       container: container,
@@ -307,7 +307,7 @@
         var container = Y.Node.create(
            '<div id="test" class="container"></div>');
         var conn = new(Y.namespace('juju-tests.utils')).SocketStub();
-        var env = juju.newEnvironment({conn: conn});
+        var env = juju.newEnvironment({conn: conn}, 'python');
         env.connect();
         app = new Y.juju.App({
           env: env,
 
=== modified file 'test/test_sandbox_go.js'
--- test/test_sandbox_go.js	2013-08-14 19:15:01 +0000
+++ test/test_sandbox_go.js	2013-08-30 19:48:17 +0000
@@ -277,6 +277,32 @@
           {llama: 'pajama'},
           null,
           1,
+          null,
+          callback);
+    });
+
+    it('can deploy with constraints', function(done) {
+      var constraints = {
+        'cpu-cores': 1,
+        'cpu-power': 0,
+        'mem': '512M',
+        'arch': 'i386'
+      };
+
+      env.connect();
+      // We begin logged in.  See utils.makeFakeBackend.
+      var callback = function(result) {
+        var service = state.db.services.getById('kumquat');
+        assert.deepEqual(service.get('constraints'), constraints);
+        done();
+      };
+      env.deploy(
+          'cs:precise/wordpress-15',
+          'kumquat',
+          {llama: 'pajama'},
+          null,
+          1,
+          constraints,
           callback);
     });
 
@@ -288,8 +314,8 @@
             result.err, 'A service with this name already exists.');
         done();
       };
-      env.deploy('cs:precise/wordpress-15', undefined, undefined, undefined, 1,
-          callback);
+      env.deploy('cs:precise/wordpress-15', undefined, undefined, undefined,
+                 1, null, callback);
     });
 
     it('can destroy a service', function(done) {
@@ -609,6 +635,7 @@
           {llama: 'pajama'},
           null,
           1,
+          null,
           localCb);
     }
 
@@ -661,6 +688,7 @@
           {llama: 'pajama'},
           null,
           1,
+          null,
           localCb);
     }
 
@@ -904,19 +932,23 @@
 
     it('can add a relation (integration)', function(done) {
       env.connect();
-      env.deploy('cs:precise/wordpress-15', null, null, null, 1, function() {
-        env.deploy('cs:precise/mysql-26', null, null, null, 1, function() {
-          var endpointA = ['wordpress', {name: 'db', role: 'client'}],
-              endpointB = ['mysql', {name: 'db', role: 'server'}];
-          env.add_relation(endpointA, endpointB, function(recData) {
-            assert.equal(recData.err, undefined);
-            assert.equal(recData.endpoint_a, 'wordpress:db');
-            assert.equal(recData.endpoint_b, 'mysql:db');
-            assert.isObject(recData.result);
-            done();
-          });
-        });
-      });
+      env.deploy(
+          'cs:precise/wordpress-15', null, null, null, 1, null, function() {
+            env.deploy(
+                'cs:precise/mysql-26', null, null, null, 1, null, function() {
+                  var endpointA = ['wordpress', {name: 'db', role: 'client'}],
+                      endpointB = ['mysql', {name: 'db', role: 'server'}];
+                  env.add_relation(endpointA, endpointB, function(recData) {
+                    assert.equal(recData.err, undefined);
+                    assert.equal(recData.endpoint_a, 'wordpress:db');
+                    assert.equal(recData.endpoint_b, 'mysql:db');
+                    assert.isObject(recData.result);
+                    done();
+                  });
+                }
+            );
+          }
+      );
     });
 
     it('is able to add a relation with a subordinate service', function(done) {
@@ -1020,20 +1052,26 @@
 
     it('can remove a relation(integration)', function(done) {
       env.connect();
-      env.deploy('cs:precise/wordpress-15', null, null, null, 1, function() {
-        env.deploy('cs:precise/mysql-26', null, null, null, 1, function() {
-          var endpointA = ['wordpress', {name: 'db', role: 'client'}],
-              endpointB = ['mysql', {name: 'db', role: 'server'}];
-          env.add_relation(endpointA, endpointB, function() {
-            env.remove_relation(endpointA, endpointB, function(recData) {
-              assert.equal(recData.err, undefined);
-              assert.equal(recData.endpoint_a, 'wordpress:db');
-              assert.equal(recData.endpoint_b, 'mysql:db');
-              done();
-            });
-          });
-        });
-      });
+      env.deploy(
+          'cs:precise/wordpress-15', null, null, null, 1, null, function() {
+            env.deploy(
+                'cs:precise/mysql-26', null, null, null, 1, null, function() {
+                  var endpointA = ['wordpress', {name: 'db', role: 'client'}],
+                      endpointB = ['mysql', {name: 'db', role: 'server'}];
+                  env.add_relation(endpointA, endpointB, function() {
+                    env.remove_relation(
+                        endpointA, endpointB, function(recData) {
+                          assert.equal(recData.err, undefined);
+                          assert.equal(recData.endpoint_a, 'wordpress:db');
+                          assert.equal(recData.endpoint_b, 'mysql:db');
+                          done();
+                        }
+                    );
+                  });
+                }
+            );
+          }
+      );
     });
 
   });
 
=== modified file 'test/test_sandbox_python.js'
--- test/test_sandbox_python.js	2013-07-30 21:00:47 +0000
+++ test/test_sandbox_python.js	2013-08-30 19:48:17 +0000
@@ -154,6 +154,7 @@
             {llama: 'pajama'},
             null,
             1,
+            null,
             localCb);
       });
       env.connect();
@@ -209,6 +210,7 @@
             {llama: 'pajama'},
             null,
             1,
+            null,
             localCb);
       });
       env.connect();
@@ -383,6 +385,7 @@
             {llama: 'pajama'},
             null,
             1,
+            null,
             callback);
       });
       env.connect();