Merge lp:~rharding/juju-gui/bundle-progress into lp:juju-gui/experimental

[Richard Harding]

Add support for watching progress of bundle import

- Change the bundle-import-extension to a helpers lib that doesn't need to be
mixed in. It didn't need any state info.
- Move everyone to going through the single deployBundle function in the
helpers vs their own calls to the env.deployerImport
- Provide the ability to start a watch on a deployment.
- Add the methods to update with new notifications on each change to the watch
status of the import.
- Start a new test file for the bundle-import-helpers tests
- Remove the dupe idea of adding import notifications from the view utils,
it's part of the helpers.

QA
----

There are four QA methods that need testing as there are four ways to deploy
a bundle in the code. In order to QA you need to bring up a live environment.
I suggest that you use `juju quickstart` without any parameters to bring up
the environment.

Once it's up, you need to change the source to this branch with:

juju set juju-gui juju-gui-source='lp:~rharding/juju-gui/bundle-progress'

Now this takes a while. I found the best way to monitor it was to

juju ssh juju-gui/0
watch 'ps aux | grep config'

You then need to wait for the config-changed hook to finish running.

Once the config change hook is done, you can start to QA the four methods of
deploying a bundle.

1. Search for 'jorge' in the browser and drag-n-drop the discource bundle onto
the canvas.
2. Search for 'jorge' and click on the discourse bundle to view the details.
Then click on the deploy button and press "Yes I'm sure".
3. Use the import icon to import a local bundle file.
4. Drag-n-Drop a bundle file onto the canvas.

In each test case, what you're watching for are notifications that the bundle
has been requested, started, and completed. If the bundle is large the final
step might take a while.

Let me know if you've got any questions or issues qa'ing.

https://codereview.appspot.com/26290043/

[Richard Harding (rharding)]

Reviewers: mp+195084_code.launchpad.net,

Message:
Please take a look.

Description:
Add support for watching progress of bundle import

- Change the bundle-import-extension to a helpers lib that doesn't need
to be
mixed in. It didn't need any state info.
- Move everyone to going through the single deployBundle function in the
helpers vs their own calls to the env.deployerImport
- Provide the ability to start a watch on a deployment.
- Add the methods to update with new notifications on each change to the
watch
status of the import.
- Start a new test file for the bundle-import-helpers tests
- Remove the dupe idea of adding import notifications from the view
utils,
it's part of the helpers.

https://code.launchpad.net/~rharding/juju-gui/bundle-progress/+merge/195084

(do not edit description out of merge proposal)

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

Affected files (+609, -129 lines):
   A [revision details]
   M app/app.js
   M app/assets/javascripts/bundle-import-helpers.js
   M app/modules-debug.js
   M app/store/env/go.js
   M app/views/topology/service.js
   M app/views/utils.js
   M bin/merge-files
   M test/index.html
   A test/test_bundle_import_helpers.js
   M test/test_env_go.js
   M test/test_service_module.js
   M test/test_utils.js

[lp:~rharding/juju-gui/bundle-progress]

1203. By Richard Harding on 2013-11-14

Add some debugging info

1204. By Richard Harding on 2013-11-14

Bind to the right callbacks dummy

1205. By Richard Harding on 2013-11-14

Update the deployBundle helper passed to subapp/views

1206. By Richard Harding on 2013-11-14

doh

1207. By Richard Harding on 2013-11-14

Update the deploy helper from the app.js

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[lp:~rharding/juju-gui/bundle-progress]

1208. By Richard Harding on 2013-11-14

Remove alerts used for debuggin

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[lp:~rharding/juju-gui/bundle-progress]

1209. By Richard Harding on 2013-11-14

Add error case for the watcher change

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[lp:~rharding/juju-gui/bundle-progress]

1210. By Richard Harding on 2013-11-14

Add a test for the failure

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[lp:~rharding/juju-gui/bundle-progress]

1211. By Richard Harding on 2013-11-14

Move the watch to the right section

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[Jeff Pihach (hatch)]

This is looking really good I have some small comments mostly related to
naming but I think that we need some integration tests for the go
sandbox.

Do we have a story for the fakebackend for this functionality or if it's
simply supposed to go unanswered?

I'm curious as to why we can't initiate a watch rpc call and then have
the guiserver send fake deltas down for us to react to, this would get
rid of calling 'next' and essentially long-polling for updates. I'm sure
there is a good reason for it I just don't know what it is :)

https://codereview.appspot.com/26290043/diff/60001/app/app.js
File app/app.js (right):

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode43
app/app.js:43: importHelpers = juju.BundleImport;
I'd probably change this to be something like `bundleHelpers`

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode583
app/app.js:583: env,
this.env and this.db are available here because the callback is scoped
to app.js so you don't need the references above

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode598
app/app.js:598: cfg.deployBundle = function(bundle) {
if you use .bind() for this function you do not need to maintain the
reference above for env, db

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js
File app/assets/javascripts/bundle-import-helpers.js (right):

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js#newcode55
app/assets/javascripts/bundle-import-helpers.js:55:
ns.BundleImport._watchDeployment(result.DeploymentId, env, db);
When I see utility methods that are directly tied together this it makes
me think this is a class trying really hard to be a utility object.
Everything in this object is directly related to a single instance but
instead of relying on that instance everything needs to be passed
around. I don't see the advantage to this structure vs relying on the
primary instance.

For testing you could unit test the class simply by creating an instance
of it with stubbed env/db like you do now. If you didn't want to create
a new class this would be handled by converting it to an extension and
then testing would be the same technique as prev mentioned.

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js#newcode105
app/assets/javascripts/bundle-import-helpers.js:105:
ns.BundleImport.deployBundle(
I know this is repurposed but it feels like we are duplicating work here
just to supply different notification messages. I'd try to move these to
be handled in the deployBundle method, or offload both notifications to
a separate showNotification(file Boolean) {} method

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js#newcode188
app/assets/javascripts/bundle-import-helpers.js:188:
_processWatchDeploymentUpdates: function(watchId, env, db) {
this is really a watchDeploymentUpdates method

https://codereview.appspot.com/26290043/diff/60001/app/store/env/go.js
File app/store/env/go.js (right):

https://codereview.appspot.com/26290043/diff/60001/app/store/env/go.js#newcode...

[Richard Harding (rharding)]

On 2013/11/14 21:30:52, jeff.pihach wrote:
> This is looking really good I have some small comments mostly related
to naming
> but I think that we need some integration tests for the go sandbox.

Thanks, I should have brought this up. The next card is to figure out
how to implement this in the sandbox. This branch is purely about making
it work for users in a live environment.

> Do we have a story for the fakebackend for this functionality or if
it's simply
> supposed to go unanswered?

That is for the follow up card. My first instinct is to not show all of
these notifications to the sandbox user, but only the final "Competed"
one.

> I'm curious as to why we can't initiate a watch rpc call and then have
the
> guiserver send fake deltas down for us to react to, this would get rid
of
> calling 'next' and essentially long-polling for updates. I'm sure
there is a
> good reason for it I just don't know what it is :)

I'll ask around on this one. Not sure about the delta stuff myself.

> https://codereview.appspot.com/26290043/diff/60001/app/app.js
> File app/app.js (right):

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode43
> app/app.js:43: importHelpers = juju.BundleImport;
> I'd probably change this to be something like `bundleHelpers`

Sure thing, thanks.

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode583
> app/app.js:583: env,
> this.env and this.db are available here because the callback is scoped
to app.js
> so you don't need the references above

The trouble is that these callbacks get bound in the go env wrappings
and I preferred to be explicit. I'll test it out and make sure, but then
add a comment/note.

https://codereview.appspot.com/26290043/diff/60001/app/app.js#newcode598
> app/app.js:598: cfg.deployBundle = function(bundle) {
> if you use .bind() for this function you do not need to maintain the
reference
> above for env, db

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js
> File app/assets/javascripts/bundle-import-helpers.js (right):

https://codereview.appspot.com/26290043/diff/60001/app/assets/javascripts/bundle-import-helpers.js#newcode55
> app/assets/javascripts/bundle-import-helpers.js:55:
> ns.BundleImport._watchDeployment(result.DeploymentId, env, db);
> When I see utility methods that are directly tied together this it
makes me
> think this is a class trying really hard to be a utility object.
Everything in
> this object is directly related to a single instance but instead of
relying on
> that instance everything needs to be passed around. I don't see the
advantage to
> this structure vs relying on the primary instance.

> For testing you could unit test the class simply by creating an
instance of it
> with stubbed env/db like you do now. If you didn't want to create a
new class
> this would be handled by converting it to an extension and then
testing would be
> the same technique as prev mentioned.

I thought about a class but then I stopped since this makes testing
really easy. Passing in arguments ftw which allowed me to write a
specific test case for the update method without dealing with anything
else. They al...

[lp:~rharding/juju-gui/bundle-progress]

1212. By Richard Harding on 2013-11-15

Sync from laptop

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/26290043/

[Jeff Pihach (hatch)]

LGTM no qa yet

https://codereview.appspot.com/26290043/

[lp:~rharding/juju-gui/bundle-progress]

1213. By Richard Harding on 2013-11-15

Add debug info

1214. By Richard Harding on 2013-11-15

Fix debugging code

1215. By Richard Harding on 2013-11-15

Make the error check more explicit

[Jeff Pihach (hatch)]

QA OK Let-r-rip!

https://codereview.appspot.com/26290043/

[Madison Scott-Clary (makyo)]

LGTM! Thanks!

https://codereview.appspot.com/26290043/

[Richard Harding (rharding)]

*** Submitted:

Add support for watching progress of bundle import

- Change the bundle-import-extension to a helpers lib that doesn't need
to be
mixed in. It didn't need any state info.
- Move everyone to going through the single deployBundle function in the
helpers vs their own calls to the env.deployerImport
- Provide the ability to start a watch on a deployment.
- Add the methods to update with new notifications on each change to the
watch
status of the import.
- Start a new test file for the bundle-import-helpers tests
- Remove the dupe idea of adding import notifications from the view
utils,
it's part of the helpers.

QA
----

There are four QA methods that need testing as there are four ways to
deploy
a bundle in the code. In order to QA you need to bring up a live
environment.
I suggest that you use `juju quickstart` without any parameters to bring
up
the environment.

Once it's up, you need to change the source to this branch with:

juju set juju-gui
juju-gui-source='lp:~rharding/juju-gui/bundle-progress'

Now this takes a while. I found the best way to monitor it was to

juju ssh juju-gui/0
watch 'ps aux | grep config'

You then need to wait for the config-changed hook to finish running.

Once the config change hook is done, you can start to QA the four
methods of
deploying a bundle.

1. Search for 'jorge' in the browser and drag-n-drop the discource
bundle onto
the canvas.
2. Search for 'jorge' and click on the discourse bundle to view the
details.
Then click on the deploy button and press "Yes I'm sure".
3. Use the import icon to import a local bundle file.
4. Drag-n-Drop a bundle file onto the canvas.

In each test case, what you're watching for are notifications that the
bundle
has been requested, started, and completed. If the bundle is large the
final
step might take a while.

Let me know if you've got any questions or issues qa'ing.

R=jeff.pihach, matthew.scott
CC=
https://codereview.appspot.com/26290043

https://codereview.appspot.com/26290043/

=== modified file 'app/app.js'
--- app/app.js	2013-11-12 21:05:13 +0000
+++ app/app.js	2013-11-15 19:04:35 +0000
@@ -39,8 +39,8 @@
   var juju = Y.namespace('juju'),
       models = Y.namespace('juju.models'),
       views = Y.namespace('juju.views'),
-      utils = views.utils,
-      widgets = Y.namespace('juju.widgets');
+      widgets = Y.namespace('juju.widgets'),
+      importHelpers = juju.BundleHelpers;
 
   /**
    * The main app class.
@@ -51,8 +51,7 @@
                                                   Y.juju.SubAppRegistration,
                                                   Y.juju.NSRouter,
                                                   Y.juju.Cookies,
-                                                  Y.juju.GhostDeployer,
-                                                  Y.juju.BundleImport], {
+                                                  Y.juju.GhostDeployer], {
 
     /*
       Extension properties
@@ -566,6 +565,7 @@
 
       var importNode = Y.one('#import-trigger');
       var importFileInput = Y.one('.import-export input[type=file]');
+
       // Tests won't have this node.
       if (importNode && importFileInput) {
         importNode.on('click', function(e) {
@@ -575,8 +575,11 @@
         });
 
         importFileInput.on('change', function(e) {
-          this.sendToDeployer(this.env, this.db,
-                              e.currentTarget.get('files')._nodes);
+          importHelpers.deployBundleFiles(
+              e.currentTarget.get('files')._nodes,
+              this.env,
+              this.db
+          );
         }, this);
       }
 
@@ -587,7 +590,22 @@
       // from the Y.juju.GhostDeployer extension
       cfg.deployService = Y.bind(this.deployService, this);
 
-      cfg.deployBundle = this.deployBundle.bind(this);
+      // Provide the bundle deployment helper to the subapps and views to
+      // access in case of an UX interaction that triggers a bundle deploy.
+      // Grab a reference of these for the nested event calls below.
+      var env = this.env;
+      var db = this.db;
+      cfg.deployBundle = function(bundle) {
+        // The other views will hand us an Object vs a YAML string. The import
+        // helpers want the yaml string instead.
+        importHelpers.deployBundle(
+            Y.JSON.stringify({
+              bundle: bundle
+            }),
+            env,
+            db
+        );
+      };
 
       // Watch specific things, (add units), remove db.update above
       // Note: This hides under the flag as tests don't properly clean
@@ -630,21 +648,6 @@
     },
 
     /**
-      Calls the deployer import method with the bundle data
-      to deploy the bundle to the environment.
-
-      @method deployBundle
-      @param {Object} bundle Bundle data.
-    */
-    deployBundle: function(bundle) {
-      var notifications = this.db.notifications;
-      this.env.deployerImport(
-          Y.JSON.stringify({
-            bundle: bundle
-          }), null, Y.bind(utils.deployBundleCallback, null, notifications));
-    },
-
-    /**
     Export the YAML for this environment.
 
     @method exportYAML
@@ -1349,6 +1352,7 @@
     'app-base',
     'app-transitions',
     'base',
+    'bundle-import-helpers',
     'node',
     'model',
     'app-cookies-extension',
@@ -1364,7 +1368,6 @@
     'juju-ghost-inspector',
     'juju-view-bundle',
     'viewmode-controls',
-    'help-dropdown',
-    'bundle-import-extension'
+    'help-dropdown'
   ]
 });

=== renamed file 'app/assets/javascripts/bundle-import-extension.js' => 'app/assets/javascripts/bundle-import-helpers.js'
--- app/assets/javascripts/bundle-import-extension.js	2013-11-07 15:52:10 +0000
+++ app/assets/javascripts/bundle-import-helpers.js	2013-11-15 19:04:35 +0000
@@ -18,13 +18,71 @@
 
 'use strict';
 
-YUI.add('bundle-import-extension', function(Y) {
-
-  function BundleImport() {}
-
-  BundleImport.prototype = {
-
-    sendToDeployer: function(env, db, fileSources) {
+YUI.add('bundle-import-helpers', function(Y) {
+  var ns = Y.namespace('juju');
+
+  ns.BundleHelpers = {
+    /**
+      Calls the deployer import method with the bundle data
+      to deploy the bundle to the environment.
+
+      @method deployBundle
+      @param {Object} bundle Bundle data.
+      @param {Environment} env Environment with access to the bundle back end.
+      calls.
+      @param {Database} db The app Database with access to the NotificationList.
+    */
+    deployBundle: function(bundle, env, db, customCallback) {
+      var notifications = db.notifications;
+
+      var defaultCallback = function(result) {
+        if (result.err) {
+          console.log('bundle import failed:', result.err);
+          notifications.add({
+            title: 'Bundle deployment failed',
+            message: 'Unable to deploy the bundle. The server returned the ' +
+                'following error: ' + result.err,
+            level: 'error'
+          });
+        } else {
+          notifications.add({
+            title: 'Bundle deployment requested',
+            message: 'Bundle deployment request successful. The full ' +
+                'deployment can take some time to complete',
+            level: 'important'
+          });
+
+          ns.BundleHelpers._watchDeployment(result.DeploymentId, env, db);
+        }
+      };
+
+      if (Y.Lang.isFunction(env.deployerImport)) {
+        env.deployerImport(
+            bundle,
+            null,
+            customCallback ? customCallback : defaultCallback
+        );
+      } else {
+        notifications.add({
+          title: 'Bundle deployment not available.',
+          message: 'Bundle deployments are not currently available for your' +
+              'environment.',
+          level: 'error'
+        });
+      }
+    },
+
+    /**
+      Deploy one or more files, generally from the import file picker
+      utility.
+
+      @method deployBundleFiles
+      @param {Array} fileSources The list of files from the import control.
+      @param {Environment} env Environment with access to the bundle back end.
+      calls.
+      @param {Database} db The app Database with access to the NotificationList.
+     */
+    deployBundleFiles: function(fileSources, env, db) {
       var notifications = db.notifications;
       if (!Y.Lang.isFunction(env.deployerImport)) {
         // Notify the user that their environment is too old and return.
@@ -37,37 +95,151 @@
         });
         return;
       }
+
       // Handle dropping Deployer files on the canvas.
       Y.Array.each(fileSources, function(file) {
         var reader = new FileReader();
+
+        // Once the file has been loaded, deploy it.
         reader.onload = function(e) {
-          // Import each into the environment
-          env.deployerImport(e.target.result, null, function(result) {
-            if (!result.err) {
-              notifications.add({
-                title: 'Imported Deployer file',
-                message: 'Import from "' + file.name + '" successful. This ' +
-                    'can take some time to complete.',
-                level: 'important'
-              });
-            } else {
-              console.warn('import failed', file, result);
-              notifications.add({
-                title: 'Import Environment Failed',
-                message: 'Import from "' + file.name +
-                    '" failed.<br/>' + result.err,
-                level: 'error'
-              });
-            }
-          });
+          ns.BundleHelpers.deployBundle(
+              e.target.result,
+              env,
+              db,
+              function(result) {
+                if (!result.err) {
+
+                  notifications.add({
+                    title: 'Imported Deployer file',
+                    message: 'Import from "' + file.name +
+                        '" successful. This ' +
+                        'can take some time to complete.',
+                    level: 'important'
+                  });
+
+                  ns.BundleHelpers._watchDeployment(
+                      result.DeploymentId, env, db);
+
+                } else {
+                  console.warn('import failed', file, result);
+                  notifications.add({
+                    title: 'Import Environment Failed',
+                    message: 'Import from "' + file.name +
+                        '" failed.<br/>' + result.err,
+                    level: 'error'
+                  });
+                }
+              }
+          );
         };
+
+        // Start the loading process.
         reader.readAsText(file);
       });
+    },
+
+    /**
+      Watch a deployment for changes and notify the user of updates.
+
+      @method watchDeployment
+      @param {Integer} deploymentId The ID returned from the deployment call.
+      @param {Environment} env The environment so that we can call the back
+      end.
+      @param {Database} db The db which contains the NotificationList used
+      for adding notifications to the system.
+     */
+    _watchDeployment: function(deploymentId, env, db) {
+      var notifications = db.notifications;
+
+      // First generate a watch.
+      env.deployerWatch(deploymentId, function(data) {
+        if (data.err) {
+          notifications.add({
+            title: 'Unable to watch status of import.',
+            message: 'Attempting to watch the deployment failed: ' +
+                data.err,
+            level: 'error'
+          });
+        } else {
+          ns.BundleHelpers._watchDeploymentUpdates(
+              data.WatchId, env, db);
+        }
+      });
+    },
+
+    /**
+      Once we've got a Watch, we need to continue to call Next on it to
+      receive updates. Watch the deployment until it's either completed or
+      we've gotten an error.
+
+      This will make nested calls upon each update from the server and could
+      be a potential point for recursive callback issues. It appears that we
+      should only get a couple of levels deep in the notification stack and
+      will be safe.
+
+      @method watchDeployment
+      @param {Integer} watchId The ID of the Watcher from the watchDeployment
+      call.
+      @param {Environment} env The environment so that we can call the
+      back end.
+      @param {Database} db The db which contains the NotificationList used
+      for adding notifications to the system.
+     */
+    _watchDeploymentUpdates: function(watchId, env, db) {
+      var notifications = db.notifications;
+
+      var processUpdate = function(data) {
+        if (data.err) {
+          notifications.add({
+            title: 'Error watching deployment',
+            message: 'The watch of the deployment errored:' +
+                data.err,
+            level: 'error'
+          });
+
+          // Break the loop of calling for the next update from the server.
+          return;
+
+        } else {
+          // Just grab the latest change and notify the user of the
+          // status.
+          var newChange = data.Changes[0];
+          // The change could be the result of an error.
+          if (newChange.Error !== undefined) {
+            notifications.add({
+              title: 'Updated status for deployment: ' +
+                  newChange.DeploymentId,
+              message: 'The deployment errored: ' +
+                  newChange.Error,
+              level: 'error'
+            });
+          } else {
+            notifications.add({
+              title: 'Updated status for deployment: ' +
+                  newChange.DeploymentId,
+              message: 'The deployment is currently: ' +
+                  newChange.Status,
+              level: 'important'
+            });
+          }
+
+          // If the status is 'completed' then we're done watching this.
+          if (newChange.Status === 'completed') {
+            // There's nothing else to see here.
+            return;
+          } else {
+            env.deployerWatchUpdate(watchId, processUpdate);
+          }
+        }
+      };
+
+      // Make the first call to the env and the processUpdate callback will
+      // handle re-calling on each update.
+      env.deployerWatchUpdate(watchId, processUpdate);
     }
+
   };
 
-  Y.namespace('juju').BundleImport = BundleImport;
-
-
+}, '0.1.0', {
+  requires: []
 });
-

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-11-12 15:53:05 +0000
+++ app/modules-debug.js	2013-11-15 19:04:35 +0000
@@ -181,8 +181,8 @@
           fullpath: '/juju-ui/assets/javascripts/app-cookies-extension.js'
         },
 
-        'bundle-import-extension': {
-          fullpath: '/juju-ui/assets/javascripts/bundle-import-extension.js'
+        'bundle-import-helpers': {
+          fullpath: '/juju-ui/assets/javascripts/bundle-import-helpers.js'
         },
 
         'view-dropdown-extension': {

=== modified file 'app/store/env/go.js'
--- app/store/env/go.js	2013-10-14 19:38:47 +0000
+++ app/store/env/go.js	2013-11-15 19:04:35 +0000
@@ -496,6 +496,97 @@
       userCallback(transformedData);
     },
 
+    /**
+      Register a Watch with the deployment specified.
+
+      The callback will receive an {Object} An object with err, and the
+      generated WatchId.  .
+
+      @method deployerWatch
+      @param {Integer} deploymentId The ID of the deployment from the
+      original deployment call.
+      @param {Function} callback A user callback to return the response data
+      to.
+     */
+    deployerWatch: function(deploymentId, callback) {
+      var intermediateCallback;
+      if (callback) {
+        intermediateCallback = Y.bind(this.handleDeployerWatch,
+                                      this, callback);
+      }
+      this._send_rpc({
+        Type: 'Deployer',
+        Request: 'Watch',
+        Params: {
+          DeploymentId: deploymentId
+        }
+      }, intermediateCallback);
+
+    },
+
+    /**
+      Callback to process the environments response to requested a watcher for
+      the deployment specified above.
+
+      @method handleDeployerWatch
+      @param {Function} userCallback The original callback to the
+      deployerWatch function.
+      @param {Object} data The servers response to the deployerWatch call.
+     */
+    handleDeployerWatch: function(userCallback, data) {
+      var transformedData = {
+        err: data.Error,
+        WatchId: data.Response.WatcherId
+      };
+      userCallback(transformedData);
+    },
+
+    /**
+      Wait for an update to a deployer watch created earlier.
+
+      Note: This returns once the server has something to update on. It might
+      wait a while.
+
+      The callback will receive an {Object} An object with err, and the
+      list of Changes.
+
+      @method deployerWatchUpdate
+      @param {Integer} watchId The ID of the watcher created in depployWatch.
+      @param {Function} callback The caller's callback function to process
+      the response.
+     */
+    deployerWatchUpdate: function(watchId, callback) {
+      var intermediateCallback;
+      if (callback) {
+        intermediateCallback = Y.bind(this.handleDeployerWatchUpdate,
+                                      this, callback);
+      }
+
+      this._send_rpc({
+        Type: 'Deployer',
+        Request: 'Next',
+        Params: {
+          WatcherId: watchId
+        }
+      }, intermediateCallback);
+    },
+
+    /**
+      Wrapper for the deployerWatchUpdate call.
+
+      @method handleDeployerWatchUpdate
+      @param {Function} userCallback The original callback to the
+      deployerWatchUpdate function.
+      @param {Object} data The servers response to the deployerWatchUpdate
+      call.
+     */
+    handleDeployerWatchUpdate: function(userCallback, data) {
+      var transformedData = {
+        err: data.Error,
+        Changes: data.Response.Changes
+      };
+      userCallback(transformedData);
+    },
 
     /**
        Deploy a charm.

=== modified file 'app/views/topology/service.js'
--- app/views/topology/service.js	2013-11-11 18:00:20 +0000
+++ app/views/topology/service.js	2013-11-15 19:04:35 +0000
@@ -26,12 +26,12 @@
  */
 
 YUI.add('juju-topology-service', function(Y) {
-  var views = Y.namespace('juju.views'),
+  var d3ns = Y.namespace('d3'),
+      importHelpers = Y.namespace('juju').BundleHelpers,
       models = Y.namespace('juju.models'),
+      topoUtils = Y.namespace('juju.topology.utils'),
       utils = Y.namespace('juju.views.utils'),
-      topoUtils = Y.namespace('juju.topology.utils'),
-      d3ns = Y.namespace('d3'),
-      Templates = views.Templates;
+      views = Y.namespace('juju.views');
 
   var ServiceModuleCommon = function() {};
   /**
@@ -285,8 +285,8 @@
     @class ServiceModule
    */
   var ServiceModule = Y.Base.create('ServiceModule', d3ns.Module, [
-    ServiceModuleCommon,
-    Y.juju.BundleImport], {
+    ServiceModuleCommon
+  ], {
     events: {
       scene: {
         '.service': {
@@ -639,10 +639,8 @@
       var fileSources = dataTransfer.files;
       var env = topo.get('env');
       var db = topo.get('db');
-      var notifications = db.notifications;
       if (fileSources && fileSources.length) {
-        // provided by bundle-import-extension.js
-        this.sendToDeployer(env, db, fileSources);
+        importHelpers.sendToDeployer(fileSources, env, db);
       } else {
         // Handle dropping charm/bundle tokens from the left side bar.
         var dragData = JSON.parse(dataTransfer.getData('Text'));
@@ -673,11 +671,13 @@
             // data, so we wrap the entity data in a mapping.  The deployer
             // format is YAML, but JSON is a subset of YAML, so we can just
             // encode it this way.
-            env.deployerImport(
+            importHelpers.deployBundle(
                 Y.JSON.stringify({
                   bundle: entityData.data
-                }), null,
-                Y.bind(utils.deployBundleCallback, null, notifications));
+                }),
+                env,
+                db
+            );
           }
         }
       }
@@ -1299,6 +1299,6 @@
     'juju-models',
     'juju-env',
     'unscaled-pack-layout',
-    'bundle-import-extension'
+    'bundle-import-helpers'
   ]
 });

=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-11-06 14:44:35 +0000
+++ app/views/utils.js	2013-11-15 19:04:35 +0000
@@ -1789,24 +1789,6 @@
     return charmIcons;
   };
 
-  utils.deployBundleCallback = function(notifications, result) {
-    if (result.err) {
-      console.log('bundle import failed:', result.err);
-      notifications.add({
-        title: 'Bundle Deployment Failed',
-        message: 'Unable to deploy the bundle. The server returned the ' +
-            'following error: ' + result.err,
-        level: 'error'
-      });
-      return;
-    }
-    notifications.add({
-      title: 'Bundle Deployment Requested',
-      message: 'Bundle deployment request successful. The full ' +
-          'deployment can take some time to complete',
-      level: 'important'
-    });
-  };
 
 }, '0.1.0', {
   requires: [

=== modified file 'bin/merge-files'
--- bin/merge-files	2013-11-12 15:53:05 +0000
+++ bin/merge-files	2013-11-15 19:04:35 +0000
@@ -88,7 +88,7 @@
   filesToLoad.js.push.apply(filesToLoad.js, [
     'app/assets/javascripts/app-subapp-extension.js',
     'app/assets/javascripts/app-cookies-extension.js',
-    'app/assets/javascripts/bundle-import-extension.js',
+    'app/assets/javascripts/bundle-import-helpers.js',
     'app/assets/javascripts/view-dropdown-extension.js',
     'app/assets/javascripts/d3-components.js',
     'app/assets/javascripts/d3.min.js',

=== modified file 'test/index.html'
--- test/index.html	2013-11-12 20:28:43 +0000
+++ test/index.html	2013-11-15 19:04:35 +0000
@@ -58,6 +58,7 @@
   <script src="test_browser_search_widget.js"></script>
   <script src="test_bundle_details_view.js"></script>
   <script src="test_bundle_module.js"></script>
+  <script src="test_bundle_import_helpers.js"></script>
   <script src="test_charmworld.js"></script>
   <script src="test_token_container.js"></script>
   <script src="test_token.js"></script>

=== added file 'test/test_bundle_import_helpers.js'
--- test/test_bundle_import_helpers.js	1970-01-01 00:00:00 +0000
+++ test/test_bundle_import_helpers.js	2013-11-15 19:04:35 +0000
@@ -0,0 +1,303 @@
+/*
+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';
+
+(function() {
+
+  describe('bundle-import-helpers', function() {
+    var db, env, ns, Y;
+
+    before(function(done) {
+      Y = YUI(GlobalConfig).use('bundle-import-helpers', function(Y) {
+        ns = Y.namespace('juju');
+        done();
+      });
+    });
+
+    beforeEach(function() {
+      db = {
+        notifications: {
+          add: function(info) {
+
+          }
+        }
+      };
+
+      env = {};
+    });
+
+    afterEach(function() {
+      db = undefined;
+      env = undefined;
+    });
+
+    it('errors when the env does not support deployer', function(done) {
+      db.notifications.add = function(info) {
+        assert.equal(info.level, 'error');
+        assert.notEqual(info.title.indexOf('not available'), -1);
+        done();
+      };
+
+      // Start the process by deploying the bundle.
+      ns.BundleHelpers.deployBundle('test bundle', env, db);
+    });
+
+    it('errors when the bundle import fails from the env', function(done) {
+      db.notifications.add = function(info) {
+        assert.equal(info.level, 'error');
+        assert.notEqual(info.title.indexOf('deployment failed'), -1);
+        done();
+      };
+
+      env.deployerImport = function(bundle, name, callback) {
+        callback({
+          err: 'Abort abort!'
+        });
+      };
+
+      // Start the process by deploying the bundle.
+      ns.BundleHelpers.deployBundle('test bundle', env, db);
+    });
+
+    it('provides deployBundle helper for working through env', function(done) {
+      // Watch the notification for the message that we're hitting the default
+      // callback.
+      var hitNotifications = false;
+      db.notifications.add = function(info) {
+        hitNotifications = true;
+        assert.equal(info.level, 'important');
+        assert.notEqual(info.title.indexOf('requested'), -1);
+      };
+
+      // Stub out the env call to make sure we check the params and call the
+      // provided callback.
+      env.deployerImport = function(bundle, name, callback) {
+        assert.equal(bundle, 'test bundle');
+        assert.equal(
+            name, null, 'The name is not currently supported or passed.');
+        // This is the default callback from the deployBundle method.
+        callback({
+          err: undefined,
+          DeploymentId: 10
+        });
+      };
+
+      // A watch should be created in the process of submitting the deployment
+      // once there's an ID.
+      var _watchDeployment = ns.BundleHelpers._watchDeployment;
+      ns.BundleHelpers._watchDeployment = function(id, env, db) {
+        assert.equal(id, 10);
+        // At this point we've checked the env call, the notification is
+        // correct, and now that we've requested a watcher with the right id.
+        ns.BundleHelpers._watchDeployment = _watchDeployment;
+
+        // Make sure we did in fact post our notification to the user.
+        assert.equal(hitNotifications, true);
+        done();
+      };
+
+      // Start the process by deploying the bundle.
+      ns.BundleHelpers.deployBundle('test bundle', env, db);
+    });
+
+    it('provides a notification when a deploy watch updates', function(done) {
+      var watchId = 1;
+      var callNumber = 0;
+
+      // This will get called twice. First with an update that it was
+      // scheduled, then with a second call that it's complete which stops
+      // the look in the watch.
+      db.notifications.add = function(info) {
+        if (callNumber === 0) {
+          assert.equal('Updated status for deployment: 42', info.title);
+          assert.equal(info.level, 'important');
+          assert.isTrue(info.message.indexOf('scheduled') !== -1, info.message);
+        } else {
+          assert.equal(info.level, 'important');
+          assert.isTrue(info.message.indexOf('completed') !== -1, info.message);
+          done();
+        }
+        callNumber = callNumber + 1;
+      };
+
+      var called = false;
+      env.deployerWatchUpdate = function(watchId, callback) {
+        if (!called) {
+          called = true;
+          callback({
+            err: undefined,
+            Changes: [
+              // Copied right from the docs of the charm.
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080066,
+                'Queue': 2},
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080062,
+                'Queue': 1},
+              {'DeploymentId': 42, 'Status': 'started', 'Time': 1377080000,
+                'Queue': 0}
+            ]
+          });
+        } else {
+          // Make that this is done now.
+          callback({
+            err: undefined,
+            Changes: [
+              // Copied right from the docs of the charm.
+              {'DeploymentId': 42, 'Status': 'completed', 'Time': 1377080066,
+                'Queue': 2},
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080062,
+                'Queue': 1},
+              {'DeploymentId': 42, 'Status': 'started', 'Time': 1377080000,
+                'Queue': 0}
+            ]
+          });
+        }
+      };
+
+      // Testing  private method is evil, but it does a decent amount of
+      // work and we want the aid in debugging issues.
+      ns.BundleHelpers._watchDeploymentUpdates(
+          watchId,
+          env,
+          db
+      );
+    });
+
+    it('provides a error when the deploy watch says so', function(done) {
+      var watchId = 1;
+
+      // This will get called twice. First with an update that it was
+      // scheduled, then with a second call that it's complete which stops
+      // the look in the watch.
+      db.notifications.add = function(info) {
+        assert.equal(info.level, 'error');
+        assert.isTrue(info.message.indexOf('boom') !== -1, info.message);
+        done();
+      };
+
+      env.deployerWatchUpdate = function(watchId, callback) {
+        callback({
+          err: undefined,
+          Changes: [
+            // Copied right from the docs of the charm.
+            {'DeploymentId': 42, 'Status': 'completed', 'Time': 1377080066,
+              'Queue': 2, 'Error': 'Deploy go boom!'},
+            {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080062,
+              'Queue': 1},
+            {'DeploymentId': 42, 'Status': 'started', 'Time': 1377080000,
+              'Queue': 0}
+          ]
+        });
+      };
+
+      // Testing  private method is evil, but it does a decent amount of
+      // work and we want the aid in debugging issues.
+      ns.BundleHelpers._watchDeploymentUpdates(
+          watchId,
+          env,
+          db
+      );
+    });
+
+
+    it('the stack of deploy to watch integrate', function(done) {
+      // By stubbing only the env calls to behave properly, we should be able to
+      // verify that the bundle-import-helpers stack up and call in proper
+      // succession to get a deployment id, then a watcher id, then the watch
+      // status updates, and then completes.
+
+      // Stub out the env call to make sure we check the params and call the
+      // provided callback.
+      env.deployerImport = function(bundle, name, callback) {
+        callback({
+          err: undefined,
+          DeploymentId: 10
+        });
+      };
+
+      env.deployerWatch = function(deploymentId, callback) {
+        callback({
+          WatchId: 1
+        });
+      };
+
+      var updated = false;
+      env.deployerWatchUpdate = function(watchId, callback) {
+        if (!updated) {
+          updated = true;
+          callback({
+            err: undefined,
+            Changes: [
+              // Copied right from the docs of the charm.
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080066,
+                'Queue': 2},
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080062,
+                'Queue': 1},
+              {'DeploymentId': 42, 'Status': 'started', 'Time': 1377080000,
+                'Queue': 0}
+            ]
+          });
+        } else {
+          // Make that this is done now.
+          callback({
+            err: undefined,
+            Changes: [
+              // Copied right from the docs of the charm.
+              {'DeploymentId': 42, 'Status': 'completed', 'Time': 1377080066,
+                'Queue': 2},
+              {'DeploymentId': 42, 'Status': 'scheduled', 'Time': 1377080062,
+                'Queue': 1},
+              {'DeploymentId': 42, 'Status': 'started', 'Time': 1377080000,
+                'Queue': 0}
+            ]
+          });
+        }
+      };
+
+      // We'll be called several times.
+      // 1. Deployment Requested.
+      // 2. Watching will pass without a notification.
+      // 3. The status will first be scheduled.
+      // 4. The status will be completed.
+      var called = 0;
+      db.notifications.add = function(info) {
+        switch (called) {
+          case 0:
+            assert.notEqual(
+                info.title.indexOf('requested'), -1, 'not requested');
+            break;
+          case 1:
+            assert.notEqual(
+                info.message.indexOf('scheduled'), -1, 'not scheduled');
+            break;
+          case 2:
+            assert.notEqual(
+                info.message.indexOf('completed'), -1, 'not completed');
+            done();
+            break;
+        }
+        called = called + 1;
+      };
+
+      // Start the process by deploying the bundle.
+      ns.BundleHelpers.deployBundle('test bundle', env, db);
+
+    });
+
+  });
+})();

=== modified file 'test/test_env_go.js'
--- test/test_env_go.js	2013-09-27 08:09:27 +0000
+++ test/test_env_go.js	2013-11-15 19:04:35 +0000
@@ -325,6 +325,7 @@
       });
     });
 
+
     describe('Deployer support', function() {
       it('sends the correct messages on deployer imports', function() {
         env.deployerImport('YAML BLOB');
@@ -351,6 +352,35 @@
         };
         assert.deepEqual(expected, last_message);
       });
+
+      it('builds a proper watch request', function() {
+        env.deployerWatch(2);
+        var last_message = conn.last_message();
+        var expected = {
+          Type: 'Deployer',
+          Request: 'Watch',
+          RequestId: 1,
+          Params: {
+            DeploymentId: 2
+          }
+        };
+        assert.deepEqual(expected, last_message);
+      });
+
+      it('builds a proper watch next request', function() {
+        env.deployerWatchUpdate(5);
+        var last_message = conn.last_message();
+        var expected = {
+          Type: 'Deployer',
+          Request: 'Next',
+          RequestId: 1,
+          Params: {
+            WatcherId: 5
+          }
+        };
+        assert.deepEqual(expected, last_message);
+      });
+
     });
 
     it('sends the correct expose message', function() {

=== modified file 'test/test_service_module.js'
--- test/test_service_module.js	2013-11-05 18:10:05 +0000
+++ test/test_service_module.js	2013-11-15 19:04:35 +0000
@@ -328,10 +328,15 @@
           }
         };
 
-    view.topo.set('env', {deployerImport: function(deployerData) {
+    // mock out the Y.BundleHelpers call.
+    var _deployBundle = juju.BundleHelpers.deployBundle;
+    juju.BundleHelpers.deployBundle = function(deployerData, env, db) {
       assert.include(deployerData, 'BUNDLE DATA');
+      // Restore the deployBundle call for future tests.
+      juju.BundleHelpers.deployBundle = _deployBundle;
       done();
-    }});
+    };
+
     serviceModule.set('component', view.topo);
     serviceModule.canvasDropHandler(fakeEventObject);
   });

=== modified file 'test/test_utils.js'
--- test/test_utils.js	2013-11-06 14:39:56 +0000
+++ test/test_utils.js	2013-11-15 19:04:35 +0000
@@ -1451,43 +1451,4 @@
     });
   });
 
-  describe('utils.deployBundleCallback', function() {
-    var utils, Y;
-
-    before(function(done) {
-      Y = YUI(GlobalConfig).use('juju-view-utils', function(Y) {
-        utils = Y.juju.views.utils;
-        done();
-      });
-    });
-
-    it('adds a notification if bundle import is successful', function(done) {
-      var expected = {
-        title: 'Bundle Deployment Requested',
-        message: 'Bundle deployment request successful. The full deployment ' +
-            'can take some time to complete',
-        level: 'important'
-      };
-      utils.deployBundleCallback({
-        add: function(notification) {
-          assert.deepEqual(notification, expected);
-          done();
-        }}, {});
-    });
-
-    it('adds a notification if a deployment error occurs', function(done) {
-      var expected = {
-        title: 'Bundle Deployment Failed',
-        message: 'Unable to deploy the bundle. The server returned the ' +
-            'following error: bad wolf',
-        level: 'error'
-      };
-      utils.deployBundleCallback({
-        add: function(notification) {
-          assert.deepEqual(notification, expected);
-          done();
-        }}, {err: 'bad wolf'});
-    });
-  });
-
 })();