Merge lp:~hatch/juju-gui/bundle-detail-view into lp:juju-gui/experimental

[Jeff Pihach]

WIP - Bundle details view

This is a WIP fist pass for the bundle details view. Because there is
no way to access this from the application you can access it by
using the following URL:

http://localhost:8888/bundle/~bac/wiki/3/wiki/:flags:/charmworldv3/

Unfortunately the rename caused the diff to go wonky so the additions
in charmworld.js were the bundle and _bundle functions.

https://codereview.appspot.com/14153043/

[Jeff Pihach (hatch)]

Reviewers: mp+188456_code.launchpad.net,

Message:
Please take a look.

Description:
WIP - Bundle details view

This is a WIP fist pass for the bundle details view. Because there is
no way to access this from the application you can access it by
using the following URL:

http://localhost:8888/bundle/~bac/wiki/3/wiki/:flags:/charmworldv3/

https://code.launchpad.net/~hatch/juju-gui/bundle-detail-view/+merge/188456

(do not edit description out of merge proposal)

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

Affected files (+857, -797 lines):
   A [revision details]
   M app/modules-debug.js
   D app/store/charm.js
   A app/store/charmworld.js
   M app/subapps/browser/browser.js
   M app/subapps/browser/views/charm.js
   M app/templates/bundle.handlebars
   M undocumented

[lp:~hatch/juju-gui/bundle-detail-view]

1100. By Jeff Pihach on 2013-09-30

renaming back to attempt to get a proper diff

1101. By Jeff Pihach on 2013-09-30

bzr rename

[Jeff Pihach (hatch)]

Please take a look.

https://codereview.appspot.com/14153043/

[Richard Harding (rharding)]

I think this is exactly on the right path. I'd tweak a few things. I
think the View can be a bit simpler by dealing with a single ATTR for a
model instance or a token id and that logic should be pushed to the
store. That way all those decisions are made there.

We can chat about details later but looks good and thanks for working on
getting this into play.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js
File app/store/charmworld.js (right):

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode34
app/store/charmworld.js:34: juju.charmworld = ns;
ns is already defined? why do we need juju.charmworld

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode234
app/store/charmworld.js:234: Public method to make an API call to fetch
a bundle from Charmworld.
don't need "Public method" we already can tell that.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode242
app/store/charmworld.js:242: bundle: function(bundleID, callbacks,
bindScope) {
if you compare this to the charm call, there's some work we could do
here around the caching. We should add support for caching details as we
do in the charms so that subsequent calls will be instantly available.
The cache is maintained by the store instance I think as I know it's
shared around both Browser and main app code.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode247
app/store/charmworld.js:247: API call to fetch a charm's details.
bundle's details.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode273
app/store/charmworld.js:273: promiseCharm: function(charmId, cache,
defaultSeries) {
should we have a promiseBundle? This came after the original charm call
and maybe working with a promise from the start would be nice here?

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode383
app/store/charmworld.js:383: iconpath: function(charmID) {
did you verify this works for bundle ids?

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode415
app/store/charmworld.js:415: buildCategoryIconPath: function(categoryID)
{
any calls to this are hints that we need to look for the later check for
using the default charm icon and add a check for default bundle icon.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode509
app/store/charmworld.js:509: related: function(charmID, callbacks,
bindScope) {
we'll need a bundle related method as well. Per the call with Gary
today, related bundles are lists of other bundles in the same basket as
the current one.

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (right):

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/browser.js#newcode924
app/subapps/browser/browser.js:924: if (idBits.length > 1) {
I'm assuming existing tests pass with this change?

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/14153043/diff/...

[Jeff Pihach (hatch)]

Thanks for the review. Replies are below - lets chat in the morning and
then I will start a few real branches to tackle these changes.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js
File app/store/charmworld.js (right):

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode34
app/store/charmworld.js:34: juju.charmworld = ns;
Not sure, this was from the old code.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode242
app/store/charmworld.js:242: bundle: function(bundleID, callbacks,
bindScope) {
Right, I wasn't sure how the cache was implemented so I left it out at
this point to get a functional example asap.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode273
app/store/charmworld.js:273: promiseCharm: function(charmId, cache,
defaultSeries) {
I agree, as I was reading through this stuff it would be great if we
only used the promises for charms and bundles.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode383
app/store/charmworld.js:383: iconpath: function(charmID) {
It does not so I removed it from the template - atm it looks like we
only have default icons, but will confirm in the am.

https://codereview.appspot.com/14153043/diff/4001/app/store/charmworld.js#newcode509
app/store/charmworld.js:509: related: function(charmID, callbacks,
bindScope) {
Hmm good call - that can be a follow-up

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (right):

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/browser.js#newcode924
app/subapps/browser/browser.js:924: if (idBits.length > 1) {
You bet - I haven't manually checked the validity of all the paths yet
but all of the tests pass and qa was ok.

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js#newcode36
app/subapps/browser/views/charm.js:36: ns.BrowserCharmView =
Y.Base.create('browser-view-charmview', Y.View, [
We were trying to come up with a good name :)

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js#newcode762
app/subapps/browser/views/charm.js:762: _renderBundleView:
function(bundle) {
It's definitely missing a lot of logic :) It's still a WIP - but we also
don't have UX for this view yet so any effort spent here might be wasted
- we can talk in the am.

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js#newcode781
app/subapps/browser/views/charm.js:781: charmID = this.get('charmID'),
Yeah I had intended on renaming this assuming the impl made sense.

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js#newcode786
app/subapps/browser/views/charm.js:786: if (this.get('charm')) {
I was also thinking of something similar but I didn't want to modify
that deep for this prototype

https://codereview.appspot.com/14153043/diff/4001/app/subapps/browser/views/charm.js#newcode793
app/subapps/brows...

Unmerged revisions

1101. By Jeff Pihach on 2013-09-30

bzr rename

1100. By Jeff Pihach on 2013-09-30

renaming back to attempt to get a proper diff

1099. By Jeff Pihach on 2013-09-30

added renamed file

1098. By Jeff Pihach on 2013-09-30

first pass at adding a bundle view handling

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-09-27 16:26:18 +0000
+++ app/modules-debug.js	2013-09-30 21:13:03 +0000
@@ -371,7 +371,7 @@
         },
 
         'juju-charm-store': {
-          fullpath: '/juju-ui/store/charm.js'
+          fullpath: '/juju-ui/store/charmworld.js'
         },
 
         'juju-websocket-logging': {

=== removed file 'app/store/charm.js'
--- app/store/charm.js	2013-09-27 14:15:38 +0000
+++ app/store/charm.js	1970-01-01 00:00:00 +0000
@@ -1,769 +0,0 @@
-/*
-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 Charmworld API datastore class.
- *
- * @module store
- * @submodule store.charm
- */
-
-YUI.add('juju-charm-store', function(Y) {
-  var juju = Y.namespace('juju'),
-      ns = Y.namespace('juju.charmworld'),
-      models = Y.namespace('juju.models');
-
-  // Make Y.juju.charmworld refernce the "juju.charmworld" namespace.
-  juju.charmworld = ns;
-
-  ns.ApiHelper = Y.Base.create('ApiHelper', Y.Base, [], {
-
-    /**
-      Initializer for the class.
-
-      @method initializer
-      @param {Object} cfg The configuration for the API interface.
-      @return {undefined} Nothing.
-    */
-    initializer: function(cfg) {
-      this.sendRequest = cfg.sendRequest;
-    },
-
-    /**
-      Send a request and handle the response from the API.
-
-      @method makeRequest
-      @param {Object} args any query params and arguments required.
-      @return {undefined} Nothing.
-    */
-    makeRequest: function(apiEndpoint, callbacks, args) {
-      // Any query string args need to be put onto the endpoint for calling.
-      if (args) {
-        apiEndpoint = apiEndpoint + '?' + Y.QueryString.stringify(args);
-      }
-
-      this.sendRequest({
-        request: apiEndpoint,
-        callback: {
-          success: function(io_request) {
-            var res = Y.JSON.parse(
-                io_request.response.results[0].responseText
-                );
-            callbacks.success(res);
-          },
-
-          'failure': function(io_request) {
-            var respText = io_request.response.results[0].responseText,
-                res;
-            if (respText) {
-              res = Y.JSON.parse(respText);
-            }
-            callbacks.failure(res, io_request);
-          }
-        }
-      });
-    },
-
-    /**
-      Normalize a charm name so we can request its full data. Charm lookup
-      requires a very specific form of the charm identifier.
-
-      series/charm-revision
-
-      where revision can currently (API v2) be any numeric placeholder.
-
-      @method normalizeCharmId
-      @param {String} charmId to normalize.
-      @param {String} [defaultSeries='precise'] The series to use if none is
-        specified in the charm ID.
-      @return {String} normalized id.
-    */
-    normalizeCharmId: function(charmId, defaultSeries) {
-      var result = charmId;
-      if (/^(cs:|local:)/.exec(result)) {
-        result = result.slice(result.indexOf(':') + 1);
-      }
-
-      if (result.indexOf('/') === -1) {
-        if (!defaultSeries) {
-          console.warn('No default series provided when normalizing charm ' +
-              'ID.  Using "precise".');
-          defaultSeries = 'precise';
-        }
-        result = defaultSeries + '/' + result;
-      }
-      return result;
-    }
-
-  }, {
-    ATTRS: {
-    }
-  });
-
-  /**
-   * Charmworld API version 3 interface.
-   *
-   * @class APIv3
-   * @extends {Base}
-   *
-   */
-  ns.APIv3 = Y.Base.create('APIv3', Y.Base, [], {
-    _apiRoot: 'api/3',
-
-    /**
-      * Send the actual request and handle response from the API.
-      *
-      * @method _makeRequest
-      * @param {Object} args any query params and arguments required.
-      * @private
-      *
-      */
-    _makeRequest: function(apiEndpoint, callbacks, args) {
-      // If we're in the noop state, just call the error callback.
-      if (this.get('noop')) {
-        callbacks.failure('noop failure');
-        return;
-      }
-      // Delegate the request making to the helper object.
-      this.apiHelper.makeRequest(apiEndpoint, callbacks, args);
-    },
-
-    /**
-     * API call to fetch autocomplete suggestions based on the current term.
-     *
-     * @method autocomplete
-     * @param {Object} query the filters data object for search.
-     * @param {Object} filters the filters data object for search.
-     * @param {Object} callbacks the success/failure callbacks to use.
-     * @param {Object} bindScope the scope of *this* in the callbacks.
-     */
-    autocomplete: function(filters, callbacks, bindScope) {
-      var endpoint = 'search';
-      // Force that this is an autocomplete call to perform matching on the
-      // start of names vs a fulltext search.
-      filters.autocomplete = 'true';
-      filters.limit = 5;
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks, filters);
-    },
-
-
-    /**
-     * API call to fetch a charm's details.
-     *
-     * @method charm
-     * @param {String} charmID the charm to fetch.
-     * @param {Object} callbacks the success/failure callbacks to use.
-     * @param {Object} bindScope the scope of *this* in the callbacks.
-     *
-     */
-    _charm: function(charmID, callbacks, bindScope) {
-      var endpoint = 'charm/' + charmID;
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-
-      this._makeRequest(endpoint, callbacks);
-    },
-
-    /**
-     * API call to fetch a charm's details, with an optional local cache.
-     *
-     * @method charmWithCache
-     * @param {String} charmID The charm to fetch This is the fully qualified
-     *   charm name in the format scheme:series/charm-revision.
-     * @param {Object} callbacks The success/failure callbacks to use.
-     * @param {Object} bindScope The scope of "this" in the callbacks.
-     * @param {ModelList} [cache] a local cache of browser charms.
-     * @param {String} [defaultSeries='precise'] The series to use if none is
-     *  specified in the charm ID.
-     */
-    charm: function(charmID, callbacks, bindScope, cache, defaultSeries) {
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-      }
-      if (cache) {
-        var charm = cache.getById(charmID);
-        if (charm) {
-          // If the charm was found in the cache, then we can declare success
-          // without ever making a request to charmworld.
-          Y.soon(function() {
-            // Since there wasn't really a request, there is no data, so we
-            // pass an empty object as the "data" parameter.
-            callbacks.success({}, charm);
-          });
-          return;
-        } else {
-          var successCB = callbacks.success;
-          callbacks.success = function(data) {
-            var charm = new Y.juju.models.Charm(data.charm);
-            if (data.metadata) {
-              charm.set('metadata', data.metadata);
-            }
-            cache.add(charm);
-            successCB(data, charm);
-          };
-        }
-      }
-      this._charm(this.apiHelper.normalizeCharmId(charmID, defaultSeries),
-                  callbacks, bindScope);
-    },
-
-    /**
-     Like the "charm" method but returning a Promise.
-
-     @method promiseCharm
-     @param {String} charmId The ID of the charm to fetch.
-     @param {ModelList} cache A local cache of browser charms.
-     @param {String} [defaultSeries='precise'] The series to use if none is
-       specified in the charm ID.
-     @return {Promise} Returns a promise. Triggered with the result of calling
-       this.charm.
-    */
-    promiseCharm: function(charmId, cache, defaultSeries) {
-      var self = this;
-      return Y.Promise(function(resolve, reject) {
-        self.charm(charmId, { 'success': resolve, 'failure': reject },
-            self, cache, defaultSeries);
-      });
-    },
-
-    /**
-      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} A promise for a newer charm ID or undefined.
-    */
-    promiseUpgradeAvailability: function(charm, cache) {
-      // Get the charm's store ID, then remove the version number to retrieve
-      // the latest version of the charm.
-      var storeId, revision;
-      if (charm instanceof Y.Model) {
-        storeId = charm.get('storeId');
-        revision = parseInt(charm.get('revision'), 10);
-      } else {
-        storeId = charm.url;
-        revision = parseInt(charm.revision, 10);
-      }
-      storeId = storeId.replace(/-\d+$/, '');
-      // XXX By using a cache we hide charm versions that have become available
-      // since we last requested the most recent version.
-      return this.promiseCharm(storeId, cache)
-        .then(function(latest) {
-            var latestVersion = parseInt(latest.charm.id.split('-').pop(), 10);
-            if (latestVersion > revision) {
-              return latest.charm.id;
-            }
-          }, function(e) {
-            throw e;
-          });
-    },
-
-    /**
-     * API call to search charms
-     *
-     * @method search
-     * @param {Object} filters the filters data object for search.
-     * @param {Object} callbacks the success/failure callbacks to use.
-     * @param {Object} bindScope the scope of *this* in the callbacks.
-     */
-    search: function(filters, callbacks, bindScope) {
-      var endpoint = 'search';
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks, filters);
-    },
-
-    /**
-     * Fetch the contents of a charm's file.
-     *
-     * @method file
-     * @param {String} charmID The id of the charm's file we want.
-     * @param {String} filename The path/name of the file to fetch content.
-     * @param {Object} callbacks The success/failure callbacks.
-     * @param {Object} bindScope The scope for this in the callbacks.
-     *
-     */
-    file: function(charmID, filename, callbacks, bindScope) {
-      // If we're in the noop state, just call the error callback.
-      if (this.get('noop')) {
-        callbacks.failure('noop failure');
-        return;
-      }
-
-      var endpoint = 'charm/' + charmID + '/file/' + filename;
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-
-      this.get('datasource').sendRequest({
-        request: endpoint,
-        callback: {
-          success: function(io_request) {
-            callbacks.success(io_request.response.results[0].responseText);
-          },
-          'failure': function(io_request) {
-            var respText = io_request.response.results[0].responseText,
-                res;
-            if (respText) {
-              res = Y.JSON.parse(respText);
-            }
-            callbacks.failure(res, io_request);
-          }
-        }
-      });
-    },
-
-    /**
-      Generate the API path to a charm icon.
-      This is useful when generating links and references in HTML to the
-      charm's icon and is constructing the correct icon based on reviewed
-      status and categories on the charm.
-
-      @method iconpath
-      @param {String} charmID The id of the charm to grab the icon for.
-      @return {String} The URL of the charm's icon.
-     */
-    iconpath: function(charmID) {
-      // If this is a local charm, then we need use a hard coded path to the
-      // default icon since we cannot fetch its category data or its own
-      // icon.
-      // XXX: #1202703 - this is a short term fix for the bug. Need longer
-      // term solution.
-      if (charmID.indexOf('local:') === 0) {
-        return this.get('apiHost') +
-            'static/img/charm_160.svg';
-
-      } else {
-        // Get the charm ID from the service.  In some cases, this will be
-        // the charm URL with a protocol, which will need to be removed.
-        // The following regular expression removes everything up to the
-        // colon portion of the quote and leaves behind a charm ID.
-        charmID = charmID.replace(/^[^:]+:/, '');
-        return this.get('apiHost') + [
-          this._apiRoot,
-          'charm',
-          charmID,
-          'file',
-          'icon.svg'].join('/');
-      }
-    },
-
-    /**
-     * Generate the url to an icon for the category specified.
-     *
-     * @method buildCategoryIconPath
-     * @param {String} categoryID the id of the category to load an icon for.
-     *
-     */
-    buildCategoryIconPath: function(categoryID) {
-      return [
-        this.get('apiHost'),
-        'static/img/category-',
-        categoryID,
-        '-bw.svg'
-      ].join('');
-    },
-
-    /**
-     * Load the QA data for a specific charm.
-     *
-     * @method qa
-     * @param {String} charmID The charm to fetch QA data for.
-     * @param {Object} callbacks The success/failure callbacks to use.
-     * @param {Object} bindScope The scope for 'this' in the callbacks.
-     *
-     */
-    qa: function(charmID, callbacks, bindScope) {
-      var endpoint = 'charm/' + charmID + '/qa';
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks);
-    },
-
-    /**
-     * Given a result list, append metadata is appended to the charm or bundle
-     * as the 'metadata' attribute and convert to objects.
-     *
-     * @method transformResults
-     * @param {Object} JSON decoded data from response.
-     * @return {Array} List of charm and bundle objects.
-     *
-     */
-    transformResults: function(data) {
-      // Append the metadata to the actual token object.
-      var token;
-      var tokens;
-      tokens = Y.Array.map(data, function(entity) {
-        if (Y.Lang.isValue(entity.charm)) {
-          token = new Y.juju.models.Charm(entity.charm);
-        } else {
-          token = new Y.juju.models.Bundle(entity.bundle);
-        }
-        if (entity.metadata) {
-          token.set('metadata', entity.metadata);
-        }
-        return token;
-      });
-      return tokens;
-    },
-
-    /**
-     * Initialize the API helper. Constructs a reusable datasource for all
-     * calls.
-     *
-     * @method initializer
-     * @param {Object} cfg configuration object.
-     *
-     */
-    initializer: function(cfg) {
-      // XXX This isn't set on initial load so we have to manually hit the
-      // setter to get datasource filled in. Must be a better way.
-      this.set('apiHost', cfg.apiHost);
-    },
-
-    /**
-     * Fetch the interesting landing content from the charmworld API.
-     *
-     * @method interesting
-     * @return {Object} data loaded from the API call.
-     *
-     */
-    interesting: function(callbacks, bindScope) {
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-
-      this._makeRequest('search/interesting', callbacks);
-    },
-
-    /**
-      Fetch the related charm info from the charmworld API.
-
-      @method related
-      @param {String} charmID The charm to find related charms for.
-      @param {Object} callbacks The success/failure callbacks to use.
-      @param {Object} bindscope An object scope to perform callbacks in.
-      @return {Object} data loaded from the API call.
-
-     */
-    related: function(charmID, callbacks, bindScope) {
-      var endpoint = 'charm/' + charmID + '/related';
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks);
-    }
-  }, {
-    ATTRS: {
-      /**
-       * Required attribute for the host to talk to for API calls.
-       *
-       * @attribute apiHost
-       * @default undefined
-       * @type {String}
-       *
-       */
-      apiHost: {
-        required: true,
-        setter: function(val) {
-          if (val && !val.match(/\/$/)) {
-            val = val + '/';
-          }
-          // Make sure we update the datasource if our apiHost changes.
-          var source = val + this._apiRoot + '/';
-          this.set('datasource', new Y.DataSource.IO({ source: source }));
-          return val;
-        }
-      },
-
-      /**
-       * Auto constructed datasource object based on the apiHost attribute.
-       * @attribute datasource
-       * @type {Datasource}
-       *
-       */
-      datasource: {
-        setter: function(datasource) {
-          // Construct an API helper using the new datasource.
-          this.apiHelper = new ns.ApiHelper({
-            sendRequest: Y.bind(datasource.sendRequest, datasource)
-          });
-          return datasource;
-        }
-      },
-
-      /**
-        If there's no config we end up setting noop on the store so that tests
-        that don't need to worry about the browser can safely ignore it.
-
-        We do log a console error, so those will occur on these tests to help
-        make it easy to catch an issue when you don't mean to noop the store.
-
-        @attribute noop
-        @default false
-        @type {Boolean}
-
-       */
-      noop: {
-        value: false
-      }
-    }
-  });
-
-  /**
-   * Charmworld API version 2 interface.
-   *
-   * @class APIv2
-   * @extends {APIv3}
-   *
-   * This class inherits from the v3 version of the API so that removing v2
-   * once it is no longer needed will be easy (just delete this class, the one
-   * or two places it is referenced in the code, and its associated tests).
-   *
-   */
-  ns.APIv2 = Y.Base.create('APIv2', ns.APIv3, [], {
-    _apiRoot: 'api/2',
-
-    /**
-     * API call to fetch autocomplete suggestions based on the current term.
-     *
-     * @method autocomplete
-     * @param {Object} query the filters data object for search.
-     * @param {Object} filters the filters data object for search.
-     * @param {Object} callbacks the success/failure callbacks to use.
-     * @param {Object} bindScope the scope of *this* in the callbacks.
-     */
-    autocomplete: function(filters, callbacks, bindScope) {
-      var endpoint = 'charms';
-      // Force that this is an autocomplete call to perform matching on the
-      // start of names vs a fulltext search.
-      filters.autocomplete = 'true';
-      filters.limit = 5;
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks, filters);
-    },
-
-    /**
-     * API call to fetch a charm's details, with an optional local cache.
-     *
-     * @method charmWithCache
-     * @param {String} charmID The charm to fetch This is the fully qualified
-     *   charm name in the format scheme:series/charm-revision.
-     * @param {Object} callbacks The success/failure callbacks to use.
-     * @param {Object} bindScope The scope of "this" in the callbacks.
-     * @param {ModelList} [cache] a local cache of browser charms.
-     * @param {String} [defaultSeries='precise'] The series to use if none is
-     *  specified in the charm ID.
-     */
-    charm: function(charmID, callbacks, bindScope, cache, defaultSeries) {
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-      }
-      if (cache) {
-        var charm = cache.getById(charmID);
-        if (charm) {
-          // If the charm was found in the cache, then we can declare success
-          // without ever making a request to charmworld.
-          Y.soon(function() {
-            // Since there wasn't really a request, there is no data, so we
-            // pass an empty object as the "data" parameter.
-            callbacks.success({}, charm);
-          });
-          return;
-        } else {
-          var successCB = callbacks.success;
-          callbacks.success = function(data) {
-            var charm = new Y.juju.models.Charm(data.charm);
-            if (data.metadata) {
-              charm.set('metadata', data.metadata);
-            }
-            cache.add(charm);
-            successCB(data, charm);
-          };
-        }
-      }
-      charmID = this.apiHelper.normalizeCharmId(charmID, defaultSeries);
-      // If the charm ID does not have a revision number (or "HEAD"), add one.
-      if (/\-(\d+|HEAD)/.exec(charmID) === null) {
-        // Add in a revision placeholder.  Any value will do, v2 of the
-        // charmworld API ignores revision numbers.
-        charmID = charmID + '-1';
-      }
-      this._charm(charmID, callbacks, bindScope);
-    },
-
-    /**
-      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} A promise for a newer charm 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, revision;
-      if (charm instanceof Y.Model) {
-        storeId = charm.get('storeId');
-        revision = parseInt(charm.get('revision'), 10);
-      } else {
-        storeId = charm.url;
-        revision = parseInt(charm.revision, 10);
-      }
-      storeId = storeId.replace(/-\d+$/, '-HEAD');
-      // XXX By using a cache we hide charm versions that have become available
-      // since we last requested the most recent version.
-      return this.promiseCharm(storeId, cache)
-        .then(function(latest) {
-            var latestVersion = parseInt(latest.charm.id.split('-').pop(), 10);
-            if (latestVersion > revision) {
-              return latest.charm.id;
-            }
-          }, function(e) {
-            throw e;
-          });
-    },
-
-    /**
-     * API call to search charms
-     *
-     * @method search
-     * @param {Object} filters the filters data object for search.
-     * @param {Object} callbacks the success/failure callbacks to use.
-     * @param {Object} bindScope the scope of *this* in the callbacks.
-     */
-    search: function(filters, callbacks, bindScope) {
-      var endpoint = 'charms';
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-      this._makeRequest(endpoint, callbacks, filters);
-    },
-
-    /**
-      Generate the API path to a charm icon.
-      This is useful when generating links and references in HTML to the
-      charm's icon and is constructing the correct icon based on reviewed
-      status and categories on the charm.
-
-      @method iconpath
-      @param {String} charmID The id of the charm to grab the icon for.
-      @return {String} The URL of the charm's icon.
-     */
-    iconpath: function(charmID) {
-      // If this is a local charm, then we need use a hard coded path to the
-      // default icon since we cannot fetch its category data or its own
-      // icon.
-      // XXX: #1202703 - this is a short term fix for the bug. Need longer
-      // term solution.
-      if (charmID.indexOf('local:') === 0) {
-        return this.get('apiHost') +
-            'static/img/charm_160.svg';
-
-      } else {
-        // Get the charm ID from the service.  In some cases, this will be
-        // the charm URL with a protocol, which will need to be removed.
-        // The following regular expression removes everything up to the
-        // colon portion of the quote and leaves behind a charm ID.
-        charmID = charmID.replace(/^[^:]+:/, '');
-        return this.get('apiHost') + [
-          this._apiRoot,
-          'charm',
-          charmID,
-          'icon.svg'].join('/');
-      }
-    },
-
-    /**
-     * Given a result list, turn that into an array of charm objects for the
-     * application to use. Metadata is appended to the charm or bundle as the
-     * 'metadata' attribute.
-     *
-     * @method transformResults
-     * @param {Object} JSON decoded data from response.
-     * @return {Array} List of charm objects.
-     *
-     */
-    transformResults: function(data) {
-      // Remove non-charms (bundles) from the data.
-      data = Y.Array.filter(data, function(charmData) {
-        return Y.Lang.isValue(charmData.charm);
-      });
-      // Append the metadata to the actual charm object.
-      data = Y.Array.map(data, function(charmData) {
-        var charm = new Y.juju.models.Charm(charmData.charm);
-        if (charmData.metadata) {
-          charm.set('metadata', charmData.metadata);
-        }
-        return charm;
-      });
-      return data;
-    },
-
-    /**
-     * Fetch the interesting landing content from the charmworld API.
-     *
-     * @method interesting
-     * @return {Object} data loaded from the API call.
-     *
-     */
-    interesting: function(callbacks, bindScope) {
-      if (bindScope) {
-        callbacks.success = Y.bind(callbacks.success, bindScope);
-        callbacks.failure = Y.bind(callbacks.failure, bindScope);
-      }
-
-      this._makeRequest('charms/interesting', callbacks);
-    }
-  }, {
-    ATTRS: {}
-  });
-
-}, '0.1.0', {
-  requires: [
-    'datasource-io',
-    'json-parse',
-    'juju-charm-models',
-    'juju-bundle-models',
-    'promise',
-    'querystring-stringify'
-  ]
-});

=== added file 'app/store/charmworld.js'
--- app/store/charmworld.js	1970-01-01 00:00:00 +0000
+++ app/store/charmworld.js	2013-09-30 21:13:03 +0000
@@ -0,0 +1,798 @@
+/*
+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 Charmworld API datastore class.
+ *
+ * @module store
+ * @submodule store.charm
+ */
+
+YUI.add('juju-charm-store', function(Y) {
+  var juju = Y.namespace('juju'),
+      ns = Y.namespace('juju.charmworld'),
+      models = Y.namespace('juju.models');
+
+  // Make Y.juju.charmworld reference the "juju.charmworld" namespace.
+  juju.charmworld = ns;
+
+  ns.ApiHelper = Y.Base.create('ApiHelper', Y.Base, [], {
+
+    /**
+      Initializer for the class.
+
+      @method initializer
+      @param {Object} cfg The configuration for the API interface.
+      @return {undefined} Nothing.
+    */
+    initializer: function(cfg) {
+      this.sendRequest = cfg.sendRequest;
+    },
+
+    /**
+      Send a request and handle the response from the API.
+
+      @method makeRequest
+      @param {Object} args any query params and arguments required.
+      @return {undefined} Nothing.
+    */
+    makeRequest: function(apiEndpoint, callbacks, args) {
+      // Any query string args need to be put onto the endpoint for calling.
+      if (args) {
+        apiEndpoint = apiEndpoint + '?' + Y.QueryString.stringify(args);
+      }
+
+      this.sendRequest({
+        request: apiEndpoint,
+        callback: {
+          'success': function(io_request) {
+            var res = Y.JSON.parse(
+                io_request.response.results[0].responseText
+                );
+            callbacks.success(res);
+          },
+
+          'failure': function(io_request) {
+            var respText = io_request.response.results[0].responseText,
+                res;
+            if (respText) {
+              res = Y.JSON.parse(respText);
+            }
+            callbacks.failure(res, io_request);
+          }
+        }
+      });
+    },
+
+    /**
+      Normalize a charm name so we can request its full data. Charm lookup
+      requires a very specific form of the charm identifier.
+
+      series/charm-revision
+
+      where revision can currently (API v2) be any numeric placeholder.
+
+      @method normalizeCharmId
+      @param {String} charmId to normalize.
+      @param {String} [defaultSeries='precise'] The series to use if none is
+        specified in the charm ID.
+      @return {String} normalized id.
+    */
+    normalizeCharmId: function(charmId, defaultSeries) {
+      var result = charmId;
+      if (/^(cs:|local:)/.exec(result)) {
+        result = result.slice(result.indexOf(':') + 1);
+      }
+
+      if (result.indexOf('/') === -1) {
+        if (!defaultSeries) {
+          console.warn('No default series provided when normalizing charm ' +
+              'ID.  Using "precise".');
+          defaultSeries = 'precise';
+        }
+        result = defaultSeries + '/' + result;
+      }
+      return result;
+    }
+
+  }, {
+    ATTRS: {
+    }
+  });
+
+  /**
+   * Charmworld API version 3 interface.
+   *
+   * @class APIv3
+   * @extends {Base}
+   *
+   */
+  ns.APIv3 = Y.Base.create('APIv3', Y.Base, [], {
+    _apiRoot: 'api/3',
+
+    /**
+      * Send the actual request and handle response from the API.
+      *
+      * @method _makeRequest
+      * @param {Object} args any query params and arguments required.
+      * @private
+      *
+      */
+    _makeRequest: function(apiEndpoint, callbacks, args) {
+      // If we're in the noop state, just call the error callback.
+      if (this.get('noop')) {
+        callbacks.failure('noop failure');
+        return;
+      }
+      // Delegate the request making to the helper object.
+      this.apiHelper.makeRequest(apiEndpoint, callbacks, args);
+    },
+
+    /**
+     * API call to fetch autocomplete suggestions based on the current term.
+     *
+     * @method autocomplete
+     * @param {Object} query the filters data object for search.
+     * @param {Object} filters the filters data object for search.
+     * @param {Object} callbacks the success/failure callbacks to use.
+     * @param {Object} bindScope the scope of *this* in the callbacks.
+     */
+    autocomplete: function(filters, callbacks, bindScope) {
+      var endpoint = 'search';
+      // Force that this is an autocomplete call to perform matching on the
+      // start of names vs a fulltext search.
+      filters.autocomplete = 'true';
+      filters.limit = 5;
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks, filters);
+    },
+
+
+    /**
+     * API call to fetch a charm's details.
+     *
+     * @method charm
+     * @param {String} charmID the charm to fetch.
+     * @param {Object} callbacks the success/failure callbacks to use.
+     * @param {Object} bindScope the scope of *this* in the callbacks.
+     *
+     */
+    _charm: function(charmID, callbacks, bindScope) {
+      var endpoint = 'charm/' + charmID;
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+
+      this._makeRequest(endpoint, callbacks);
+    },
+
+    /**
+     * API call to fetch a charm's details, with an optional local cache.
+     *
+     * @method charm
+     * @param {String} charmID The charm to fetch This is the fully qualified
+     *   charm name in the format scheme:series/charm-revision.
+     * @param {Object} callbacks The success/failure callbacks to use.
+     * @param {Object} bindScope The scope of "this" in the callbacks.
+     * @param {ModelList} [cache] a local cache of browser charms.
+     * @param {String} [defaultSeries='precise'] The series to use if none is
+     *  specified in the charm ID.
+     */
+    charm: function(charmID, callbacks, bindScope, cache, defaultSeries) {
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+      }
+      if (cache) {
+        var charm = cache.getById(charmID);
+        if (charm) {
+          // If the charm was found in the cache, then we can declare success
+          // without ever making a request to charmworld.
+          Y.soon(function() {
+            // Since there wasn't really a request, there is no data, so we
+            // pass an empty object as the "data" parameter.
+            callbacks.success({}, charm);
+          });
+          return;
+        } else {
+          var successCB = callbacks.success;
+          callbacks.success = function(data) {
+            var charm = new Y.juju.models.Charm(data.charm);
+            if (data.metadata) {
+              charm.set('metadata', data.metadata);
+            }
+            cache.add(charm);
+            successCB(data, charm);
+          };
+        }
+      }
+      this._charm(this.apiHelper.normalizeCharmId(charmID, defaultSeries),
+                  callbacks, bindScope);
+    },
+
+    /**
+      Public method to make an API call to fetch a bundle from Charmworld.
+
+      @method bundle
+      @param {String} bundleID The bundle to fetch This is the fully qualified
+        bundle id.
+      @param {Object} callbacks The success/failure callbacks to use.
+      @param {Object} bindScope The scope of "this" in the callbacks.
+    */
+    bundle: function(bundleID, callbacks, bindScope) {
+      this._bundle(bundleID, callbacks, bindScope);
+    },
+
+    /**
+      API call to fetch a charm's details.
+
+      @method _bundle
+      @param {String} bundleID the bundle to fetch.
+      @param {Object} callbacks the success/failure callbacks to use.
+      @param {Object} bindScope the scope of *this* in the callbacks.
+    */
+    _bundle: function(bundleID, callbacks, bindScope) {
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(bundleID, callbacks);
+    },
+
+    /**
+     Like the "charm" method but returning a Promise.
+
+     @method promiseCharm
+     @param {String} charmId The ID of the charm to fetch.
+     @param {ModelList} cache A local cache of browser charms.
+     @param {String} [defaultSeries='precise'] The series to use if none is
+       specified in the charm ID.
+     @return {Promise} Returns a promise. Triggered with the result of calling
+       this.charm.
+    */
+    promiseCharm: function(charmId, cache, defaultSeries) {
+      var self = this;
+      return Y.Promise(function(resolve, reject) {
+        self.charm(charmId, { 'success': resolve, 'failure': reject },
+            self, cache, defaultSeries);
+      });
+    },
+
+    /**
+      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} A promise for a newer charm ID or undefined.
+    */
+    promiseUpgradeAvailability: function(charm, cache) {
+      // Get the charm's store ID, then remove the version number to retrieve
+      // the latest version of the charm.
+      var storeId, revision;
+      if (charm instanceof Y.Model) {
+        storeId = charm.get('storeId');
+        revision = parseInt(charm.get('revision'), 10);
+      } else {
+        storeId = charm.url;
+        revision = parseInt(charm.revision, 10);
+      }
+      storeId = storeId.replace(/-\d+$/, '');
+      // XXX By using a cache we hide charm versions that have become available
+      // since we last requested the most recent version.
+      return this.promiseCharm(storeId, cache)
+        .then(function(latest) {
+            var latestVersion = parseInt(latest.charm.id.split('-').pop(), 10);
+            if (latestVersion > revision) {
+              return latest.charm.id;
+            }
+          }, function(e) {
+            throw e;
+          });
+    },
+
+    /**
+     * API call to search charms
+     *
+     * @method search
+     * @param {Object} filters the filters data object for search.
+     * @param {Object} callbacks the success/failure callbacks to use.
+     * @param {Object} bindScope the scope of *this* in the callbacks.
+     */
+    search: function(filters, callbacks, bindScope) {
+      var endpoint = 'search';
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks, filters);
+    },
+
+    /**
+     * Fetch the contents of a charm's file.
+     *
+     * @method file
+     * @param {String} charmID The id of the charm's file we want.
+     * @param {String} filename The path/name of the file to fetch content.
+     * @param {Object} callbacks The success/failure callbacks.
+     * @param {Object} bindScope The scope for this in the callbacks.
+     *
+     */
+    file: function(charmID, filename, callbacks, bindScope) {
+      // If we're in the noop state, just call the error callback.
+      if (this.get('noop')) {
+        callbacks.failure('noop failure');
+        return;
+      }
+
+      var endpoint = 'charm/' + charmID + '/file/' + filename;
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+
+      this.get('datasource').sendRequest({
+        request: endpoint,
+        callback: {
+          'success': function(io_request) {
+            callbacks.success(io_request.response.results[0].responseText);
+          },
+          'failure': function(io_request) {
+            var respText = io_request.response.results[0].responseText,
+                res;
+            if (respText) {
+              res = Y.JSON.parse(respText);
+            }
+            callbacks.failure(res, io_request);
+          }
+        }
+      });
+    },
+
+    /**
+      Generate the API path to a charm icon.
+      This is useful when generating links and references in HTML to the
+      charm's icon and is constructing the correct icon based on reviewed
+      status and categories on the charm.
+
+      @method iconpath
+      @param {String} charmID The id of the charm to grab the icon for.
+      @return {String} The URL of the charm's icon.
+     */
+    iconpath: function(charmID) {
+      // If this is a local charm, then we need use a hard coded path to the
+      // default icon since we cannot fetch its category data or its own
+      // icon.
+      // XXX: #1202703 - this is a short term fix for the bug. Need longer
+      // term solution.
+      if (charmID.indexOf('local:') === 0) {
+        return this.get('apiHost') +
+            'static/img/charm_160.svg';
+
+      } else {
+        // Get the charm ID from the service.  In some cases, this will be
+        // the charm URL with a protocol, which will need to be removed.
+        // The following regular expression removes everything up to the
+        // colon portion of the quote and leaves behind a charm ID.
+        charmID = charmID.replace(/^[^:]+:/, '');
+        return this.get('apiHost') + [
+          this._apiRoot,
+          'charm',
+          charmID,
+          'file',
+          'icon.svg'].join('/');
+      }
+    },
+
+    /**
+     * Generate the url to an icon for the category specified.
+     *
+     * @method buildCategoryIconPath
+     * @param {String} categoryID the id of the category to load an icon for.
+     *
+     */
+    buildCategoryIconPath: function(categoryID) {
+      return [
+        this.get('apiHost'),
+        'static/img/category-',
+        categoryID,
+        '-bw.svg'
+      ].join('');
+    },
+
+    /**
+     * Load the QA data for a specific charm.
+     *
+     * @method qa
+     * @param {String} charmID The charm to fetch QA data for.
+     * @param {Object} callbacks The success/failure callbacks to use.
+     * @param {Object} bindScope The scope for 'this' in the callbacks.
+     *
+     */
+    qa: function(charmID, callbacks, bindScope) {
+      var endpoint = 'charm/' + charmID + '/qa';
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks);
+    },
+
+    /**
+     * Given a result list, append metadata is appended to the charm or bundle
+     * as the 'metadata' attribute and convert to objects.
+     *
+     * @method transformResults
+     * @param {Object} JSON decoded data from response.
+     * @return {Array} List of charm and bundle objects.
+     *
+     */
+    transformResults: function(data) {
+      // Append the metadata to the actual token object.
+      var token;
+      var tokens;
+      tokens = Y.Array.map(data, function(entity) {
+        if (Y.Lang.isValue(entity.charm)) {
+          token = new Y.juju.models.Charm(entity.charm);
+        } else {
+          token = new Y.juju.models.Bundle(entity.bundle);
+        }
+        if (entity.metadata) {
+          token.set('metadata', entity.metadata);
+        }
+        return token;
+      });
+      return tokens;
+    },
+
+    /**
+     * Initialize the API helper. Constructs a reusable datasource for all
+     * calls.
+     *
+     * @method initializer
+     * @param {Object} cfg configuration object.
+     *
+     */
+    initializer: function(cfg) {
+      // XXX This isn't set on initial load so we have to manually hit the
+      // setter to get datasource filled in. Must be a better way.
+      this.set('apiHost', cfg.apiHost);
+    },
+
+    /**
+     * Fetch the interesting landing content from the charmworld API.
+     *
+     * @method interesting
+     * @return {Object} data loaded from the API call.
+     *
+     */
+    interesting: function(callbacks, bindScope) {
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+
+      this._makeRequest('search/interesting', callbacks);
+    },
+
+    /**
+      Fetch the related charm info from the charmworld API.
+
+      @method related
+      @param {String} charmID The charm to find related charms for.
+      @param {Object} callbacks The success/failure callbacks to use.
+      @param {Object} bindscope An object scope to perform callbacks in.
+      @return {Object} data loaded from the API call.
+
+     */
+    related: function(charmID, callbacks, bindScope) {
+      var endpoint = 'charm/' + charmID + '/related';
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks);
+    }
+  }, {
+    ATTRS: {
+      /**
+       * Required attribute for the host to talk to for API calls.
+       *
+       * @attribute apiHost
+       * @default undefined
+       * @type {String}
+       *
+       */
+      apiHost: {
+        required: true,
+        'setter': function(val) {
+          if (val && !val.match(/\/$/)) {
+            val = val + '/';
+          }
+          // Make sure we update the datasource if our apiHost changes.
+          var source = val + this._apiRoot + '/';
+          this.set('datasource', new Y.DataSource.IO({ source: source }));
+          return val;
+        }
+      },
+
+      /**
+       * Auto constructed datasource object based on the apiHost attribute.
+       * @attribute datasource
+       * @type {Datasource}
+       *
+       */
+      datasource: {
+        'setter': function(datasource) {
+          // Construct an API helper using the new datasource.
+          this.apiHelper = new ns.ApiHelper({
+            sendRequest: Y.bind(datasource.sendRequest, datasource)
+          });
+          return datasource;
+        }
+      },
+
+      /**
+        If there's no config we end up setting noop on the store so that tests
+        that don't need to worry about the browser can safely ignore it.
+
+        We do log a console error, so those will occur on these tests to help
+        make it easy to catch an issue when you don't mean to noop the store.
+
+        @attribute noop
+        @default false
+        @type {Boolean}
+
+       */
+      noop: {
+        value: false
+      }
+    }
+  });
+
+  /**
+   * Charmworld API version 2 interface.
+   *
+   * @class APIv2
+   * @extends {APIv3}
+   *
+   * This class inherits from the v3 version of the API so that removing v2
+   * once it is no longer needed will be easy (just delete this class, the one
+   * or two places it is referenced in the code, and its associated tests).
+   *
+   */
+  ns.APIv2 = Y.Base.create('APIv2', ns.APIv3, [], {
+    _apiRoot: 'api/2',
+
+    /**
+     * API call to fetch autocomplete suggestions based on the current term.
+     *
+     * @method autocomplete
+     * @param {Object} query the filters data object for search.
+     * @param {Object} filters the filters data object for search.
+     * @param {Object} callbacks the success/failure callbacks to use.
+     * @param {Object} bindScope the scope of *this* in the callbacks.
+     */
+    autocomplete: function(filters, callbacks, bindScope) {
+      var endpoint = 'charms';
+      // Force that this is an autocomplete call to perform matching on the
+      // start of names vs a fulltext search.
+      filters.autocomplete = 'true';
+      filters.limit = 5;
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks, filters);
+    },
+
+    /**
+     * API call to fetch a charm's details, with an optional local cache.
+     *
+     * @method charmWithCache
+     * @param {String} charmID The charm to fetch This is the fully qualified
+     *   charm name in the format scheme:series/charm-revision.
+     * @param {Object} callbacks The success/failure callbacks to use.
+     * @param {Object} bindScope The scope of "this" in the callbacks.
+     * @param {ModelList} [cache] a local cache of browser charms.
+     * @param {String} [defaultSeries='precise'] The series to use if none is
+     *  specified in the charm ID.
+     */
+    charm: function(charmID, callbacks, bindScope, cache, defaultSeries) {
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+      }
+      if (cache) {
+        var charm = cache.getById(charmID);
+        if (charm) {
+          // If the charm was found in the cache, then we can declare success
+          // without ever making a request to charmworld.
+          Y.soon(function() {
+            // Since there wasn't really a request, there is no data, so we
+            // pass an empty object as the "data" parameter.
+            callbacks.success({}, charm);
+          });
+          return;
+        } else {
+          var successCB = callbacks.success;
+          callbacks.success = function(data) {
+            var charm = new Y.juju.models.Charm(data.charm);
+            if (data.metadata) {
+              charm.set('metadata', data.metadata);
+            }
+            cache.add(charm);
+            successCB(data, charm);
+          };
+        }
+      }
+      charmID = this.apiHelper.normalizeCharmId(charmID, defaultSeries);
+      // If the charm ID does not have a revision number (or "HEAD"), add one.
+      if (/\-(\d+|HEAD)/.exec(charmID) === null) {
+        // Add in a revision placeholder.  Any value will do, v2 of the
+        // charmworld API ignores revision numbers.
+        charmID = charmID + '-1';
+      }
+      this._charm(charmID, callbacks, bindScope);
+    },
+
+    /**
+      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} A promise for a newer charm 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, revision;
+      if (charm instanceof Y.Model) {
+        storeId = charm.get('storeId');
+        revision = parseInt(charm.get('revision'), 10);
+      } else {
+        storeId = charm.url;
+        revision = parseInt(charm.revision, 10);
+      }
+      storeId = storeId.replace(/-\d+$/, '-HEAD');
+      // XXX By using a cache we hide charm versions that have become available
+      // since we last requested the most recent version.
+      return this.promiseCharm(storeId, cache)
+        .then(function(latest) {
+            var latestVersion = parseInt(latest.charm.id.split('-').pop(), 10);
+            if (latestVersion > revision) {
+              return latest.charm.id;
+            }
+          }, function(e) {
+            throw e;
+          });
+    },
+
+    /**
+     * API call to search charms
+     *
+     * @method search
+     * @param {Object} filters the filters data object for search.
+     * @param {Object} callbacks the success/failure callbacks to use.
+     * @param {Object} bindScope the scope of *this* in the callbacks.
+     */
+    search: function(filters, callbacks, bindScope) {
+      var endpoint = 'charms';
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+      this._makeRequest(endpoint, callbacks, filters);
+    },
+
+    /**
+      Generate the API path to a charm icon.
+      This is useful when generating links and references in HTML to the
+      charm's icon and is constructing the correct icon based on reviewed
+      status and categories on the charm.
+
+      @method iconpath
+      @param {String} charmID The id of the charm to grab the icon for.
+      @return {String} The URL of the charm's icon.
+     */
+    iconpath: function(charmID) {
+      // If this is a local charm, then we need use a hard coded path to the
+      // default icon since we cannot fetch its category data or its own
+      // icon.
+      // XXX: #1202703 - this is a short term fix for the bug. Need longer
+      // term solution.
+      if (charmID.indexOf('local:') === 0) {
+        return this.get('apiHost') +
+            'static/img/charm_160.svg';
+
+      } else {
+        // Get the charm ID from the service.  In some cases, this will be
+        // the charm URL with a protocol, which will need to be removed.
+        // The following regular expression removes everything up to the
+        // colon portion of the quote and leaves behind a charm ID.
+        charmID = charmID.replace(/^[^:]+:/, '');
+        return this.get('apiHost') + [
+          this._apiRoot,
+          'charm',
+          charmID,
+          'icon.svg'].join('/');
+      }
+    },
+
+    /**
+     * Given a result list, turn that into an array of charm objects for the
+     * application to use. Metadata is appended to the charm or bundle as the
+     * 'metadata' attribute.
+     *
+     * @method transformResults
+     * @param {Object} JSON decoded data from response.
+     * @return {Array} List of charm objects.
+     *
+     */
+    transformResults: function(data) {
+      // Remove non-charms (bundles) from the data.
+      data = Y.Array.filter(data, function(charmData) {
+        return Y.Lang.isValue(charmData.charm);
+      });
+      // Append the metadata to the actual charm object.
+      data = Y.Array.map(data, function(charmData) {
+        var charm = new Y.juju.models.Charm(charmData.charm);
+        if (charmData.metadata) {
+          charm.set('metadata', charmData.metadata);
+        }
+        return charm;
+      });
+      return data;
+    },
+
+    /**
+     * Fetch the interesting landing content from the charmworld API.
+     *
+     * @method interesting
+     * @return {Object} data loaded from the API call.
+     *
+     */
+    interesting: function(callbacks, bindScope) {
+      if (bindScope) {
+        callbacks.success = Y.bind(callbacks.success, bindScope);
+        callbacks.failure = Y.bind(callbacks.failure, bindScope);
+      }
+
+      this._makeRequest('charms/interesting', callbacks);
+    }
+  }, {
+    ATTRS: {}
+  });
+
+}, '0.1.0', {
+  requires: [
+    'datasource-io',
+    'json-parse',
+    'juju-charm-models',
+    'juju-bundle-models',
+    'promise',
+    'querystring-stringify'
+  ]
+});

=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-09-17 13:27:43 +0000
+++ app/subapps/browser/browser.js	2013-09-30 21:13:03 +0000
@@ -921,8 +921,7 @@
       var idBits = req.path.replace(/^\//, '').replace(/\/$/, '').split('/'),
           id = null;
 
-      if ((idBits.length === 3 && idBits[0][0] === '~') || // new charms
-          (idBits.length === 2)) {                         // reviewed charms
+      if (idBits.length > 1) {
         id = this._stripViewMode(req.path);
       }
       if (!id) {

=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-09-24 15:34:52 +0000
+++ app/subapps/browser/views/charm.js	2013-09-30 21:13:03 +0000
@@ -39,7 +39,8 @@
     views.utils.apiFailingView
   ], {
 
-    template: views.Templates.browser_charm,
+    charmTemplate: views.Templates.browser_charm,
+    bundleTemplate: views.Templates.bundle,
     qatemplate: views.Templates.browser_qa,
 
     /**
@@ -706,7 +707,7 @@
         tplData.provides = false;
       }
 
-      var tpl = this.template(tplData);
+      var tpl = this.charmTemplate(tplData);
       var tplNode = container.setHTML(tpl);
 
       // Set the content then update the container so that it reload
@@ -752,35 +753,68 @@
     },
 
     /**
+      Handles rendering the bundle view into the view's container and then
+      appending that container into the DOM.
+
+      @method _renderBundleView
+      @param {Y.Model} bundle the bundle model.
+    */
+    _renderBundleView: function(bundle) {
+      var template = this.bundleTemplate(bundle.getAttrs());
+      var container = this.get('container').setHTML(template);
+      this.get('renderTo').setHTML(container);
+    },
+
+    /**
        Render out the view to the DOM.
 
-       The View might be given either a charmID, which means go fetch the
-       charm data, or a charm model instance, in which case the view has the
+       The View might be given either a charmID, or bundleID, which means go
+       fetch the data, or a charm model instance, in which case the view has the
        data it needs to render.
 
        @method render
 
      */
     render: function() {
-      var isFullscreen = this.get('isFullscreen');
-      this.showIndicator(this.get('renderTo'));
+      var isFullscreen = this.get('isFullscreen'),
+          renderTo = this.get('renderTo'),
+          charmID = this.get('charmID'),
+          charmworld = this.get('store');
+
+      this.showIndicator(renderTo);
 
       if (this.get('charm')) {
         this._renderCharmView(this.get('charm'), isFullscreen);
-        this.hideIndicator(this.get('renderTo'));
+        this.hideIndicator(renderTo);
+      } else if (this.get('bundle')) {
+        this._renderBundleView(this.get('bundle'), isFullscreen);
+        this.hideIndicator(renderTo);
       } else {
-        this.get('store').charm(this.get('charmID'), {
-          'success': function(data) {
-            var charm = new models.Charm(data.charm);
-            if (data.metadata) {
-              charm.set('metadata', data.metadata);
-            }
-            this.set('charm', charm);
-            this._renderCharmView(this.get('charm'), isFullscreen);
-            this.hideIndicator(this.get('renderTo'));
-          },
-          'failure': this.apiFailure
-        }, this);
+        if (charmID.indexOf('bundle') === -1) {
+          charmworld.charm(this.get('charmID'), {
+            'success': function(data) {
+              var charm = new models.Charm(data.charm);
+              if (data.metadata) {
+                charm.set('metadata', data.metadata);
+              }
+              this.set('charm', charm);
+              this._renderCharmView(this.get('charm'), isFullscreen);
+              this.hideIndicator(renderTo);
+            },
+            'failure': this.apiFailure
+          }, this);
+        } else {
+          charmworld.bundle(charmID, {
+            'success': function(data) {
+              var bundle = new models.Bundle(data);
+              this.set('bundle', bundle);
+              this._renderBundleView(bundle);
+              this.hideIndicator(renderTo);
+            },
+            'failure': this.apiFailure
+          }, this);
+        }
+
       }
     }
   }, {

=== modified file 'app/templates/bundle.handlebars'
--- app/templates/bundle.handlebars	2013-09-26 03:50:03 +0000
+++ app/templates/bundle.handlebars	2013-09-30 21:13:03 +0000
@@ -4,7 +4,7 @@
             <div class="header">
                 <a href="" class="back icon"></a>
                 <div class="block-icon">
-                    <img src="{{charmIconPath storeId}}" alt="{{ name }} icon" class="icon">
+                    <img src="{{storeId}}" alt="{{ name }} icon" class="icon">
                 </div>
                 <div class="details">
                     <h1>{{ name }}</h1>
@@ -96,7 +96,7 @@
                                                 <span class="date">
                                                     {{prettyDate}}
                                                 </span>
-                                                <strong>{{author.name}}</strong> 
+                                                <strong>{{author.name}}</strong>
                                                 <span class="respect-whitespace">{{message}}</span> -
                                                 <a href="{{ revnoLink }}">
                                                     REVNO{{revno}}

=== modified file 'undocumented'
--- undocumented	2013-09-30 17:47:40 +0000
+++ undocumented	2013-09-30 21:13:03 +0000
@@ -4,10 +4,6 @@
 app/app.js:214 "callback"
 app/app.js:225 "callback"
 app/app.js:239 "callback"
-app/store/charm.js:518 "setter"
-app/store/charm.js:65 "success"
-app/store/charm.js:500 "setter"
-app/store/charm.js:329 "success"
 app/store/notifications.js:167 "level"
 app/store/notifications.js:50 "title"
 app/store/notifications.js:156 "title"