Merge lp:~blake-rouse/maas/new-images-page into lp:~maas-committers/maas/trunk

[Blake Rouse]

Add new maas-boot-images directive and new angular based images page.

The maas-boot-images directive allows the same code to be used both on the images page as well as the first user journey.

This is a whole re-implementation and the new design has a lot more interaction than the previous design, so that is why it is so large. Its also javascript, ;-)

[Lee Trager (ltrager)]

Looks really good so far. I was able to merge lp:~ltrager/maas/use_bootloaders into your branch to test it with the bootloaders.

Couple of things I noticed
1. The bootloaders still show up. In my branch I filter them with BootSourceCache.objects.filter(bootloader_type=None)
2. The other images section lists the images twice, onces with checkboxes, onces without. See http://i.imgur.com/EJOjhpg.png
3. I started with MAAS using the V3 test stream. If I click on the maas.io source the boot source metadata is immediately reloaded. It looks like the region then tries to download the maas.io images(they're at an older version than mine). If I switch back to my custom stream 16.10 is marked 'Queued for deletion.' I see there is a 'connect' button. I think the user should have to click connect before things change. This should prevent downloading the image again if the source is accidentally changed.
4. Sometimes when the page loads its blank or I only see other images. Refreshing fixes this.
5. When I click connect with a custom stream I briefly(only shows for about a second) get an error message saying 'Select atleast one 14.04+ LTS release and architecture' even though I already have 16.04 installed.

[Blake Rouse (blake-rouse)]

> Looks really good so far. I was able to merge lp:~ltrager/maas/use_bootloaders
> into your branch to test it with the bootloaders.

Thanks for looking at it.

>
> Couple of things I noticed
> 1. The bootloaders still show up. In my branch I filter them with
> BootSourceCache.objects.filter(bootloader_type=None)

Ah thats much better. I cannot do that until your branches make it into trunk so I will leave them as so.

> 2. The other images section lists the images twice, onces with checkboxes,
> onces without. See http://i.imgur.com/EJOjhpg.png

This is correct. You select the images you want then save that selection and they will be imported. At the moment yours look wierd and is confusing since you see the bootloaders. With the change above it will make more since.

> 3. I started with MAAS using the V3 test stream. If I click on the maas.io
> source the boot source metadata is immediately reloaded. It looks like the
> region then tries to download the maas.io images(they're at an older version
> than mine). If I switch back to my custom stream 16.10 is marked 'Queued for
> deletion.' I see there is a 'connect' button. I think the user should have to
> click connect before things change. This should prevent downloading the image
> again if the source is accidentally changed.

I think I understand what you are describing and I have cleaned this up. It doesn't actually start downloading. You have to click save selection, for it to be saved.

> 4. Sometimes when the page loads its blank or I only see other images.
> Refreshing fixes this.

Yeah I have fixed this issue.

> 5. When I click connect with a custom stream I briefly(only shows for about a
> second) get an error message saying 'Select atleast one 14.04+ LTS release and
> architecture' even though I already have 16.04 installed.

What you have installed doesn't matter since your on a new stream. You have to make selections for that new source.

[Andres Rodriguez (andreserl)]

I haven't done a full reivew but just have a couple of comments inlien.

review: Abstain

[Andres Rodriguez (andreserl)]

review: Needs Fixing

[Blake Rouse (blake-rouse)]

Fixed and pushed.

[Andres Rodriguez (andreserl)]

I've done testing and filed a couple bugs that cannot be fixed right now but bugs are filed for them. Other than that it looks good to me.

review: Approve

[MAAS Lander (maas-lander)]

The attempt to merge lp:~blake-rouse/maas/new-images-page into lp:maas failed. Below is the output from the failed tests.

Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [94.5 kB]
Hit:2 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial InRelease
Get:3 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates InRelease [95.7 kB]
Hit:4 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease
Get:5 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates/main amd64 Packages [385 kB]
Get:6 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates/universe amd64 Packages [326 kB]
Fetched 901 kB in 0s (2,077 kB/s)
Reading package lists...
sudo DEBIAN_FRONTEND=noninteractive apt-get -y \
    --no-install-recommends install apache2 archdetect-deb authbind avahi-utils bash bind9 bind9utils build-essential bzr bzr-builddeb chromium-browser chromium-chromedriver curl daemontools debhelper dh-apport dh-systemd distro-info dnsutils firefox freeipmi-tools git gjs ipython isc-dhcp-common isc-dhcp-server libjs-angularjs libjs-jquery libjs-jquery-hotkeys libjs-yui3-full libjs-yui3-min libpq-dev make nodejs-legacy npm postgresql pxelinux python3-all python3-apt python3-attr python3-bson python3-convoy python3-crochet python3-cssselect python3-curtin python3-dev python3-distro-info python3-django python3-django-nose python3-django-piston3 python3-dnspython python3-docutils python3-formencode python3-hivex python3-httplib2 python3-jinja2 python3-jsonschema python3-lxml python3-netaddr python3-netifaces python3-novaclient python3-oauth python3-oauthlib python3-openssl python3-paramiko python3-petname python3-pexpect python3-psycopg2 python3-pyinotify python3-pyparsing python3-pyvmomi python3-requests python3-seamicroclient python3-setuptools python3-simplestreams python3-sphinx python3-tempita python3-twisted python3-txtftp python3-tz python3-yaml python3-zope.interface python-bson python-crochet python-django python-django-piston python-djorm-ext-pgarray python-formencode python-lxml python-netaddr python-netifaces python-pocket-lint python-psycopg2 python-simplejson python-tempita python-twisted python-yaml socat syslinux-common tgt ubuntu-cloudimage-keyring wget xvfb
Reading package lists...
Building dependency tree...
Reading state information...
archdetect-deb is already the newest version (1.117ubuntu2).
authbind is already the newest version (2.1.1+nmu1).
avahi-utils is already the newest version (0.6.32~rc+dfsg-1ubuntu2).
build-essential is already the newest version (12.1ubuntu2).
debhelper is already the newest version (9.20160115ubuntu3).
distro-info is already the newest version (0.14build1).
freeipmi-tools is already the newest version (1.4.11-1ubuntu1).
git is already the newest version (1:2.7.4-0ubuntu1).
libjs-angularjs is already the newest version (1.2.28-1ubuntu2).
libjs-jquery is already the newest version (1.11.3+dfsg-4).
libjs-yui3-full is already the newest version (3.5.1-1ubuntu3).
libjs-yui3-min is already the newest version (3.5.1-1ubuntu3).
make is already the newest version (4.1-6).
postgresql is already the newest version (9.5+173).
...

[MAAS Lander (maas-lander)]

The attempt to merge lp:~blake-rouse/maas/new-images-page into lp:maas failed. Below is the output from the failed tests.

Hit:1 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial InRelease
Hit:2 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates InRelease
Hit:3 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease
Get:4 http://security.ubuntu.com/ubuntu xenial-security InRelease [94.5 kB]
Fetched 94.5 kB in 0s (208 kB/s)
Reading package lists...
sudo DEBIAN_FRONTEND=noninteractive apt-get -y \
    --no-install-recommends install apache2 archdetect-deb authbind avahi-utils bash bind9 bind9utils build-essential bzr bzr-builddeb chromium-browser chromium-chromedriver curl daemontools debhelper dh-apport dh-systemd distro-info dnsutils firefox freeipmi-tools git gjs ipython isc-dhcp-common isc-dhcp-server libjs-angularjs libjs-jquery libjs-jquery-hotkeys libjs-yui3-full libjs-yui3-min libpq-dev make nodejs-legacy npm postgresql pxelinux python3-all python3-apt python3-attr python3-bson python3-convoy python3-crochet python3-cssselect python3-curtin python3-dev python3-distro-info python3-django python3-django-nose python3-django-piston3 python3-dnspython python3-docutils python3-formencode python3-hivex python3-httplib2 python3-jinja2 python3-jsonschema python3-lxml python3-netaddr python3-netifaces python3-novaclient python3-oauth python3-oauthlib python3-openssl python3-paramiko python3-petname python3-pexpect python3-psycopg2 python3-pyinotify python3-pyparsing python3-pyvmomi python3-requests python3-seamicroclient python3-setuptools python3-simplestreams python3-sphinx python3-tempita python3-twisted python3-txtftp python3-tz python3-yaml python3-zope.interface python-bson python-crochet python-django python-django-piston python-djorm-ext-pgarray python-formencode python-lxml python-netaddr python-netifaces python-pocket-lint python-psycopg2 python-simplejson python-tempita python-twisted python-yaml socat syslinux-common tgt ubuntu-cloudimage-keyring wget xvfb
Reading package lists...
Building dependency tree...
Reading state information...
archdetect-deb is already the newest version (1.117ubuntu2).
authbind is already the newest version (2.1.1+nmu1).
avahi-utils is already the newest version (0.6.32~rc+dfsg-1ubuntu2).
build-essential is already the newest version (12.1ubuntu2).
debhelper is already the newest version (9.20160115ubuntu3).
distro-info is already the newest version (0.14build1).
freeipmi-tools is already the newest version (1.4.11-1ubuntu1).
git is already the newest version (1:2.7.4-0ubuntu1).
libjs-angularjs is already the newest version (1.2.28-1ubuntu2).
libjs-jquery is already the newest version (1.11.3+dfsg-4).
libjs-yui3-full is already the newest version (3.5.1-1ubuntu3).
libjs-yui3-min is already the newest version (3.5.1-1ubuntu3).
make is already the newest version (4.1-6).
postgresql is already the newest version (9.5+173).
pxelinux is already the newest version (3:6.03+dfsg-11ubuntu1).
python-formencode is already the newest version (1.3.0-0ubuntu5).
python-lxml is already the newest version (3.5.0-1build1).
python-netaddr is already the newest ver...

=== modified file 'src/maasserver/bootresources.py'
--- src/maasserver/bootresources.py	2016-08-31 06:26:21 +0000
+++ src/maasserver/bootresources.py	2016-09-14 21:01:21 +0000
@@ -102,11 +102,13 @@
 from twisted.application.internet import TimerService
 from twisted.internet import reactor
 from twisted.internet.defer import (
+    Deferred,
     DeferredList,
     inlineCallbacks,
 )
 from twisted.protocols.amp import UnhandledCommand
 from twisted.python import log
+from twisted.python.failure import Failure
 
 
 maaslog = get_maas_logger("bootresources")
@@ -799,11 +801,15 @@
                     "Deleting empty resource %s.", resource)
                 resource.delete()
 
-    def finalize(self):
+    def finalize(self, notify=None):
         """Perform the finalization of data into the database.
 
         This will remove the un-needed `BootResource`'s and write the
         file data into the large object store.
+
+        :param notify: Instance of `Deferred` that is called when all the
+            metadata has been downloaded and the image data download has been
+            started.
         """
         # XXX blake_r 2014-10-30 bug=1387133: A scenario can occur where insert
         # never gets called by the writer, causing this method to delete all
@@ -818,12 +824,20 @@
             len(self._content_to_finalize))
         if (self._resources_to_delete == self._init_resources_to_delete and
                 len(self._content_to_finalize) == 0):
-            maaslog.error(
+            error_msg = (
                 "Finalization of imported images skipped, "
-                "or all %s synced images would be deleted.",
-                self._resources_to_delete)
+                "or all %s synced images would be deleted." % (
+                    self._resources_to_delete))
+            maaslog.error(error_msg)
+            if notify is not None:
+                failure = Failure(Exception(error_msg))
+                reactor.callLater(0, notify.errback, failure)
             return
         self.resource_cleaner()
+        # Callback the notify before starting the download of the actual data
+        # for the images.
+        if notify is not None:
+            reactor.callLater(0, notify.callback, None)
         self.perform_write()
         self.resource_set_cleaner()
 
@@ -905,7 +919,8 @@
     writer.sync(reader, rpath)
 
 
-def download_all_boot_resources(sources, product_mapping, store=None):
+def download_all_boot_resources(
+        sources, product_mapping, store=None, notify=None):
     """Downloads all of the boot resources from the sources.
 
     Boot resources are stored into the `BootResource` model.
@@ -914,6 +929,8 @@
         which we should download.
     :param product_mapping: A `ProductMapping` describing the resources to be
         downloaded.
+    :param notify: Instance of `Deferred` that is called when all the metadata
+        has been downloaded and the image data download has been started.
     """
     maaslog.debug("Initializing BootResourceStore.")
     if store is None:
@@ -925,7 +942,7 @@
             source['url'], store, product_mapping,
             keyring_file=source.get('keyring'))
     maaslog.debug("Finalizing BootResourceStore.")
-    store.finalize()
+    store.finalize(notify=notify)
 
 
 def set_global_default_releases():
@@ -959,19 +976,22 @@
 
 
 @asynchronous(timeout=FOREVER)
-def _import_resources():
+def _import_resources(notify=None):
     """Import boot resources.
 
     Pulls the sources from `BootSource`. This only starts the process if
     some SYNCED `BootResource` already exist.
 
     This MUST be called from outside of a database transaction.
+
+    :param notify: Instance of `Deferred` that is called when all the metadata
+        has been downloaded and the image data download has been started.
     """
     # Avoid circular import.
     from maasserver.clusterrpc.boot_images import RackControllersImporter
 
     # Sync boot resources into the region.
-    d = deferToDatabase(_import_resources_with_lock)
+    d = deferToDatabase(_import_resources_with_lock, notify=notify)
 
     def cb_import(_):
         d = deferToDatabase(RackControllersImporter.new)
@@ -988,7 +1008,7 @@
 @synchronous
 @with_connection
 @synchronised(locks.import_images.TRY)  # TRY is important; read docstring.
-def _import_resources_with_lock():
+def _import_resources_with_lock(notify=None):
     """Import boot resources once the `import_images` lock is held.
 
     This should *not* be called in a transaction; it will manage transactions
@@ -999,11 +1019,19 @@
     :raise DatabaseLockNotHeld: If the `import_images` lock cannot be acquired
         at the beginning of this method. This happens quickly because the lock
         is acquired using a TRY variant; see `dblocks`.
+
+    :param notify: Instance of `Deferred` that is called when all the metadata
+        has been downloaded and the image data download has been started.
     """
     assert not in_transaction(), (
         "_import_resources_with_lock() must not be called within a "
         "preexisting transaction; it manages its own.")
 
+    # Make sure that notify is a `Deferred` that has not beed called.
+    if notify is not None:
+        assert isinstance(notify, Deferred), "Notify should be a `Deferred`"
+        assert not notify.called, "Notify should not have already been called."
+
     # Make sure that maas user's GNUPG home directory exists. This is
     # needed for importing of boot resources, which occurs on the region
     # as well as the clusters.
@@ -1033,20 +1061,23 @@
             return
         product_mapping = map_products(image_descriptions)
 
-        download_all_boot_resources(sources, product_mapping)
+        download_all_boot_resources(sources, product_mapping, notify=notify)
         set_global_default_releases()
         maaslog.info(
             "Finished importing of boot images from %d source(s).",
             len(sources))
 
 
-def _import_resources_in_thread():
+def _import_resources_in_thread(notify=None):
     """Import boot resources in a thread managed by Twisted.
 
     Errors are logged. The returned `Deferred` will never errback so it's safe
     to use in a `TimerService`, for example.
+
+    :param notify: Instance of `Deferred` that is called when all the metadata
+        has been downloaded and the image data download has been started.
     """
-    d = deferToDatabase(_import_resources)
+    d = deferToDatabase(_import_resources, notify=notify)
     d.addErrback(_handle_import_failures)
     return d
 
@@ -1062,14 +1093,17 @@
     log.err(failure, "Importing boot resources failed.")
 
 
-def import_resources():
+def import_resources(notify=None):
     """Starts the importing of boot resources.
 
     Note: This function returns immediately. It only starts the process, it
     doesn't wait for it to be finished, as it can take several minutes to
     complete.
+
+    :param notify: Instance of `Deferred` that is called when all the metadata
+        has been downloaded and the image data download has been started.
     """
-    reactor.callFromThread(_import_resources_in_thread)
+    reactor.callFromThread(_import_resources_in_thread, notify=notify)
 
 
 def is_import_resources_running():

=== added file 'src/maasserver/static/js/angular/controllers/images.js'
--- src/maasserver/static/js/angular/controllers/images.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/controllers/images.js	2016-09-14 21:01:21 +0000
@@ -0,0 +1,11 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * MAAS Images Controller
+ */
+
+angular.module('MAAS').controller('ImagesController', [
+    '$rootScope', function($rootScope) {
+        $rootScope.page = "images";
+        $rootScope.title = "Boot Images";
+    }]);

=== added file 'src/maasserver/static/js/angular/directives/boot_images.js'
--- src/maasserver/static/js/angular/directives/boot_images.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/boot_images.js	2016-09-14 21:01:21 +0000
@@ -0,0 +1,744 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Boot images directive.
+*/
+
+angular.module('MAAS').directive('maasBootImagesStatus', [
+    'BootResourcesManager',
+    function(BootResourcesManager) {
+        return {
+            restrict: "E",
+            scope: {},
+            template: [
+                '<p class="page-header__status" ',
+                    'data-ng-if="data.region_import_running">',
+                    '<span class="u-text--loading u-margin--left-small">',
+                        '<i class="icon icon--loading u-animation--spin ',
+                            'u-margin--right-tiny"></i>',
+                        'Step 1/2: Region controller importing',
+                    '</span>',
+                '</p>',
+                '<p class="page-header__status" ',
+                    'data-ng-if="data.rack_import_running">',
+                    '<span class="u-text--loading u-margin--left-small">',
+                        '<i class="icon icon--loading u-animation--spin ',
+                            'u-margin--right-tiny"></i>',
+                        'Step 2/2: Rack controller(s) importing',
+                    '</span>',
+                '</p>'
+            ].join(''),
+            controller: function($scope, $rootScope, $element, $document) {
+                // This controller doesn't start the polling. The
+                // `maasBootImages` controller should be used on the page to
+                // start the polling. This just presents a nice status spinner
+                // when the polling is enabled.
+                $scope.data = BootResourcesManager.getData();
+            }
+        };
+    }]);
+
+angular.module('MAAS').directive('maasBootImages', [
+    '$filter', 'BootResourcesManager', 'UsersManager', 'ManagerHelperService',
+    function($filter, BootResourcesManager,
+        UsersManager, ManagerHelperService) {
+        return {
+            restrict: "E",
+            scope: {
+                design: "=?"
+            },
+            templateUrl: (
+                'static/partials/boot-images.html?v=' + (
+                    MAAS_config.files_version)),
+            controller: function($scope, $rootScope, $element, $document) {
+                $scope.loading = true;
+                $scope.saving = false;
+                $scope.design = $scope.design || 'page';
+                $scope.bootResources = BootResourcesManager.getData();
+                $scope.ubuntuImages = [];
+                $scope.source = {
+                    isNew: false,
+                    tooMany: false,
+                    showingAdvanced: false,
+                    connecting: false,
+                    errorMessage: "",
+                    source_type: 'maas.io',
+                    url: '',
+                    keyring_filename: '',
+                    keyring_data: '',
+                    releases: [],
+                    arches: [],
+                    selections: {
+                        changed: false,
+                        releases: [],
+                        arches: []
+                    }
+                };
+                $scope.otherImages = [];
+                $scope.other = {
+                    changed: false,
+                    images: []
+                };
+                $scope.generatedImages = [];
+                $scope.customImages = [];
+
+                // Return true if the authenticated user is super user.
+                $scope.isSuperUser = function() {
+                    return UsersManager.isSuperUser();
+                };
+
+                // Return the overall title icon.
+                $scope.getTitleIcon = function() {
+                    if($scope.bootResources.resources.length === 0) {
+                        return 'icon--error';
+                    } else {
+                        return 'icon--success';
+                    }
+                };
+
+                // Return true if the mirror path section should be shown.
+                $scope.showMirrorPath = function() {
+                    if($scope.source.source_type === 'custom') {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                };
+
+                // Return true if the advanced options are shown.
+                $scope.isShowingAdvancedOptions = function() {
+                    return $scope.source.showingAdvanced;
+                };
+
+                // Toggle showing the advanced options.
+                $scope.toggleAdvancedOptions = function() {
+                    $scope.source.showingAdvanced = (
+                        !$scope.source.showingAdvanced);
+                };
+
+                // Return true if both keyring options are set.
+                $scope.bothKeyringOptionsSet = function() {
+                    return (
+                        $scope.source.keyring_filename.length > 0 &&
+                        $scope.source.keyring_data.length > 0);
+                };
+
+                // Return true when the connect button for the mirror path
+                // should be shown.
+                $scope.showConnectButton = function() {
+                    return $scope.source.isNew;
+                };
+
+                // Called when the source radio chanaged.
+                $scope.sourceChanged = function() {
+                    var currentSources = $scope.bootResources.ubuntu.sources;
+                    if(currentSources.length === 0) {
+                        $scope.source.isNew = true;
+                    } else {
+                        var prevNew = $scope.source.isNew;
+                        $scope.source.isNew = (
+                            $scope.source.source_type !==
+                            currentSources[0].source_type);
+                        if($scope.source.source_type === 'custom') {
+                            $scope.source.isNew = $scope.source.isNew || (
+                                $scope.source.url !==
+                                currentSources[0].url
+                            );
+                        }
+                        if(prevNew && !$scope.source.isNew) {
+                            // No longer a new source set url and keyring to
+                            // original.
+                            $scope.source.url = currentSources[0].url;
+                            $scope.source.keyring_filename = (
+                                currentSources[0].keyring_filename);
+                            $scope.source.keyring_data = (
+                                currentSources[0].keyring_data);
+                        }
+                        $scope.source.releases = [];
+                        $scope.source.arches = [];
+                        $scope.source.selections = {
+                            changed: false,
+                            releases: [],
+                            arches: []
+                        };
+                    }
+                    $scope.updateSource();
+                    $scope.regenerateUbuntuImages();
+
+                    // When the source is new and its maas.io automatically
+                    // fetch the source information.
+                    if($scope.source.isNew &&
+                        $scope.source.source_type === 'maas.io') {
+                        $scope.connect();
+                    }
+                };
+
+                // Return true when the connect button should be disabled.
+                $scope.isConnectButtonDisabled = function() {
+                    if($scope.source.source_type === 'maas.io') {
+                        return false;
+                    } else {
+                        return ($scope.bothKeyringOptionsSet() ||
+                            $scope.source.url.length === 0 ||
+                            $scope.source.connecting);
+                    }
+                };
+
+                // Return the source parameters.
+                $scope.getSourceParams = function() {
+                    if($scope.source.source_type === 'maas.io') {
+                        return {
+                            source_type: 'maas.io'
+                        };
+                    } else {
+                        return {
+                            source_type: $scope.source.source_type,
+                            url: $scope.source.url,
+                            keyring_filename: $scope.source.keyring_filename,
+                            keyring_data: $scope.source.keyring_data
+                        };
+                    }
+                };
+
+                // Select the default images that should be selected. Current
+                // defaults are '16.04 LTS' and 'amd64'.
+                $scope.selectDefaults = function() {
+                    angular.forEach($scope.source.releases, function(release) {
+                        if(release.name === "xenial") {
+                            $scope.source.selections.releases.push(release);
+                        }
+                    });
+                    angular.forEach($scope.source.arches, function(arch) {
+                        if(arch.name === "amd64") {
+                            $scope.source.selections.arches.push(arch);
+                        }
+                    });
+                };
+
+                // Connected to the simplestreams endpoint. This only gets the
+                // information from the endpoint it does not save it into the
+                // database.
+                $scope.connect = function() {
+                    if($scope.isConnectButtonDisabled()) {
+                        return;
+                    }
+
+                    var source = $scope.getSourceParams();
+                    $scope.source.connecting = true;
+                    $scope.source.releases = [];
+                    $scope.source.arches = [];
+                    $scope.source.selections.changed = true;
+                    $scope.source.selections.releases = [];
+                    $scope.source.selections.arches = [];
+                    $scope.regenerateUbuntuImages();
+                    BootResourcesManager.fetch(source).then(function(data) {
+                        $scope.source.connecting = false;
+                        data = angular.fromJson(data);
+                        $scope.source.releases = data.releases;
+                        $scope.source.arches = data.arches;
+                        $scope.selectDefaults();
+                        $scope.regenerateUbuntuImages();
+                    }, function(error) {
+                        $scope.source.connecting = false;
+                        $scope.source.errorMessage = error;
+                    });
+                };
+
+                // Return true if the connect block should be shown.
+                $scope.showConnectBlock = function() {
+                    return $scope.source.tooMany || (
+                        $scope.source.isNew && !$scope.showSelections());
+                };
+
+                // Return true if the release and architecture selection
+                // should be shown.
+                $scope.showSelections = function() {
+                    return (
+                        $scope.source.releases.length > 0 &&
+                        $scope.source.arches.length > 0);
+                };
+
+                // Return the Ubuntu LTS releases.
+                $scope.getUbuntuLTSReleases = function() {
+                    var releases = $scope.bootResources.ubuntu.releases;
+                    if($scope.source.isNew) {
+                        releases = $scope.source.releases;
+                    }
+                    var filtered = [];
+                    angular.forEach(releases, function(release) {
+                        if(release.title.indexOf('LTS') !== -1) {
+                            filtered.push(release);
+                        }
+                    });
+                    return filtered;
+                };
+
+                // Return the Ubuntu non-LTS releases.
+                $scope.getUbuntuNonLTSReleases = function() {
+                    var releases = $scope.bootResources.ubuntu.releases;
+                    if($scope.source.isNew) {
+                        releases = $scope.source.releases;
+                    }
+                    var filtered = [];
+                    angular.forEach(releases, function(release) {
+                        if(release.title.indexOf('LTS') === -1) {
+                            filtered.push(release);
+                        }
+                    });
+                    return filtered;
+                };
+
+                // Return the available architectures.
+                $scope.getArchitectures = function() {
+                    var arches = $scope.bootResources.ubuntu.arches;
+                    if($scope.source.isNew) {
+                        arches = $scope.source.arches;
+                    }
+                    return arches;
+                };
+
+                // Return true if the source has this selected.
+                $scope.isSelected = function(type, obj) {
+                    return $scope.source.selections[type].indexOf(obj) >= 0;
+                };
+
+                // Toggle the selection of the release or the architecture.
+                $scope.toggleSelection = function(type, obj) {
+                    var idx = $scope.source.selections[type].indexOf(obj);
+                    if(idx === -1) {
+                        $scope.source.selections[type].push(obj);
+                    } else {
+                        $scope.source.selections[type].splice(idx, 1);
+                    }
+                    $scope.source.selections.changed = true;
+                    $scope.regenerateUbuntuImages();
+                };
+
+                // Return true if the images table should be shown.
+                $scope.showImagesTable = function() {
+                    if($scope.ubuntuImages.length > 0) {
+                        return true;
+                    } else {
+                        // Show the images table source has
+                        // releases and architectures.
+                        return (
+                            $scope.source.arches.length > 0 &&
+                            $scope.source.releases.length > 0);
+                    }
+                };
+
+                // Regenerates the Ubuntu images list for the directive.
+                $scope.regenerateUbuntuImages = function() {
+                    var getResource = function() { return null; };
+                    var resources = $scope.bootResources.resources.filter(
+                        function(resource) {
+                            var name_split = resource.name.split('/');
+                            var resource_os = name_split[0];
+                            return (
+                                resource.rtype === 0 &&
+                                resource_os === 'ubuntu');
+                        });
+                    if(!$scope.source.isNew) {
+                        getResource = function(release, arch) {
+                            var i;
+                            for(i = 0; i < resources.length; i++) {
+                                // Only care about Ubuntu images.
+                                var resource = (resources[i]);
+                                var name_split = resource.name.split('/');
+                                var resource_release = name_split[1];
+                                if(resource_release === release &&
+                                    resource.arch === arch) {
+                                    resources.splice(i, 1);
+                                    return resource;
+                                }
+                            }
+                            return null;
+                        };
+                    }
+
+                    // Create the images based on the selections.
+                    $scope.ubuntuImages.length = 0;
+                    angular.forEach($scope.source.selections.releases,
+                        function(release) {
+                            angular.forEach($scope.source.selections.arches,
+                                function(arch) {
+                                    var image = {
+                                        icon: 'icon--status-queued',
+                                        title: release.title,
+                                        arch: arch.title,
+                                        size: '-',
+                                        status: 'Queued for download',
+                                        beingDeleted: false
+                                    };
+                                    var resource = getResource(
+                                        release.name, arch.name);
+                                    if(angular.isObject(resource)) {
+                                        image.icon = (
+                                            'icon--status-' + resource.icon);
+                                        image.size = resource.size;
+                                        image.status = resource.status;
+                                        if(resource.downloading) {
+                                            image.icon += ' u-animation--pulse';
+                                        }
+                                    }
+                                    $scope.ubuntuImages.push(image);
+                                });
+                        });
+
+                    // If not a new source and images remain in resources, then
+                    // those are set to be deleted.
+                    if(!$scope.source.isNew) {
+                        angular.forEach(resources, function(resource) {
+                            var image = {
+                                icon: 'icon--status-failed',
+                                title: resource.title,
+                                arch: resource.arch,
+                                size: resource.size,
+                                status: 'Queued for deletion',
+                                beingDeleted: true
+                            };
+                            $scope.ubuntuImages.push(image);
+                        });
+                    }
+                };
+
+                // Regenerates the other images list for the directive.
+                $scope.regenerateOtherImages = function() {
+                    var isOther = function(resource) {
+                        var name_split = resource.name.split('/');
+                        var resource_os = name_split[0];
+                        return (
+                            resource.rtype === 0 &&
+                            resource_os !== 'ubuntu' &&
+                            resource_os !== 'custom');
+                    };
+                    var resources = (
+                        $scope.bootResources.resources.filter(isOther));
+                    var getResource = function(release, arch) {
+                        var i;
+                        for(i = 0; i < resources.length; i++) {
+                            // Only care about other images. Removing custom,
+                            // bootloaders, and Ubuntu images.
+                            var resource = (resources[i]);
+                            var name_split = resource.name.split('/');
+                            var resource_release = name_split[1];
+                            if(resource_release === release &&
+                                resource.arch === arch) {
+                                resources.splice(i, 1);
+                                return resource;
+                            }
+                        }
+                        return null;
+                    };
+
+                    // Create the images based on the selections.
+                    $scope.otherImages.length = 0;
+                    angular.forEach($scope.other.images,
+                        function(otherImage) {
+                            if(otherImage.checked) {
+                                var name_split = otherImage.name.split('/');
+                                var image = {
+                                    icon: 'icon--status-queued',
+                                    title: otherImage.title,
+                                    arch: name_split[1],
+                                    size: '-',
+                                    status: 'Queued for download',
+                                    beingDeleted: false
+                                };
+                                var resource = getResource(
+                                    name_split[3], name_split[1]);
+                                if(angular.isObject(resource)) {
+                                    image.icon = (
+                                        'icon--status-' + resource.icon);
+                                    image.size = resource.size;
+                                    image.status = resource.status;
+                                    if(resource.downloading) {
+                                        image.icon += ' u-animation--pulse';
+                                    }
+                                }
+                                $scope.otherImages.push(image);
+                            }
+                        });
+
+                    // If not a new source and images remain in resources, then
+                    // those are set to be deleted.
+                    angular.forEach(resources, function(resource) {
+                        var image = {
+                            icon: 'icon--status-failed',
+                            title: resource.title,
+                            arch: resource.arch,
+                            size: resource.size,
+                            status: 'Queued for deletion',
+                            beingDeleted: true
+                        };
+                        $scope.otherImages.push(image);
+                    });
+                };
+
+                // Helper for basic image generation.
+                $scope._regenerateImages = function(rtype, images) {
+                    // Create the generated images list.
+                    images.length = 0;
+                    angular.forEach($scope.bootResources.resources,
+                        function(resource) {
+                            if(resource.rtype === rtype) {
+                                var image = {
+                                    icon: 'icon--status-' + resource.icon,
+                                    title: resource.title,
+                                    arch: resource.arch,
+                                    size: resource.size,
+                                    status: resource.status
+                                };
+                                if(resource.downloading) {
+                                    image.icon += ' u-animation--pulse';
+                                }
+                                images.push(image);
+                            }
+                        });
+                };
+
+                // Regenerates the generated images list for the directive.
+                $scope.regenerateGeneratedImages = function() {
+                    $scope._regenerateImages(1, $scope.generatedImages);
+                };
+
+                // Regenerates the custom images list for the directive.
+                $scope.regenerateCustomImages = function() {
+                    $scope._regenerateImages(2, $scope.customImages);
+                };
+
+                // Returns true if at least one LTS is selected.
+                $scope.ltsIsSelected = function() {
+                    var i;
+                    for(i = 0; i < $scope.ubuntuImages.length; i++) {
+                        // Must have LTS in the title and not being deleted.
+                        if(!$scope.ubuntuImages[i].beingDeleted &&
+                            $scope.ubuntuImages[i].title.indexOf('LTS') >= 0) {
+                            // Must be greater than Ubuntu series 14.
+                            var series = parseInt(
+                                $scope.ubuntuImages[i].title.split('.')[0], 10);
+                            if(series >= 14) {
+                                return true;
+                            }
+                        }
+                    }
+                    return false;
+                };
+
+                // Return true if the stop import button should be shown.
+                $scope.showStopImportButton = function() {
+                    return $scope.bootResources.region_import_running;
+                };
+
+                // Return true if should show save selection button, this
+                // doesn't mean it can actually be clicked.
+                $scope.showSaveSelection = function() {
+                    return $scope.showImagesTable();
+                };
+
+                // Return true if can save the current selection.
+                $scope.canSaveSelection = function() {
+                    return !$scope.saving && $scope.ltsIsSelected();
+                };
+
+                // Return the text for the save selection button.
+                $scope.getSaveSelectionText = function() {
+                    if($scope.saving) {
+                        return "Saving...";
+                    } else {
+                        return "Save selection";
+                    }
+                };
+
+                // Save the selections into boot selections.
+                $scope.saveSelection = function() {
+                    if(!$scope.canSaveSelection()) {
+                        return;
+                    }
+
+                    var params = $scope.getSourceParams();
+                    params.releases = (
+                        $scope.source.selections.releases.map(function(obj) {
+                            return obj.name;
+                        }));
+                    params.arches = (
+                        $scope.source.selections.arches.map(function(obj) {
+                            return obj.name;
+                        }));
+                    $scope.saving = true;
+                    BootResourcesManager.saveUbuntu(params).then(function() {
+                        $scope.saving = false;
+                        $scope.source.isNew = false;
+                        $scope.source.selections.changed = false;
+                        $scope.updateSource();
+                    });
+                };
+
+                // Re-create an array with the new objects using the old
+                // selected array.
+                $scope.getNewSelections = function(newObjs, oldSelections) {
+                    var newSelections = [];
+                    angular.forEach(newObjs, function(obj) {
+                        angular.forEach(oldSelections, function(selection) {
+                            if(obj.name === selection.name) {
+                                newSelections.push(obj);
+                            }
+                        });
+                    });
+                    return newSelections;
+                };
+
+                // Update the source information.
+                $scope.updateSource = function() {
+                    // Do not update if the source is new.
+                    if($scope.source.isNew) {
+                        return;
+                    }
+
+                    var source_len = $scope.bootResources.ubuntu.sources.length;
+                    if(source_len === 0) {
+                        $scope.source.isNew = true;
+                        $scope.source.source_type = 'custom';
+                        $scope.source.errorMessage = (
+                            "Currently no source exists.");
+                    } else if(source_len === 1) {
+                        var source = $scope.bootResources.ubuntu.sources[0];
+                        $scope.source.source_type = source.source_type;
+                        if(source.source_type === "maas.io") {
+                            $scope.source.url = "";
+                            $scope.source.keyring_filename = "";
+                            $scope.source.keyring_data = "";
+                        } else {
+                            $scope.source.url = source.url;
+                            $scope.source.keyring_filename = (
+                                source.keyring_filename);
+                            $scope.source.keyring_data = source.keyring_data;
+                        }
+                        $scope.source.releases = (
+                            $scope.bootResources.ubuntu.releases);
+                        $scope.source.arches = (
+                            $scope.bootResources.ubuntu.arches);
+                        if(!$scope.source.selections.changed) {
+                            // User didn't make a change update to the
+                            // current selections server side.
+                            $scope.source.selections.releases = (
+                                $scope.source.releases.filter(function(obj) {
+                                    return obj.checked;
+                                }));
+                            $scope.source.selections.arches = (
+                                $scope.source.arches.filter(function(obj) {
+                                return obj.checked;
+                            }));
+                        } else {
+                            // Update the objects to be the new objects, with
+                            // the same selections.
+                            $scope.source.selections.releases = (
+                                $scope.getNewSelections(
+                                    $scope.source.releases,
+                                    $scope.source.selections.releases));
+                            $scope.source.selections.arches = (
+                                $scope.getNewSelections(
+                                    $scope.source.arches,
+                                    $scope.source.selections.arches));
+                        }
+                        $scope.regenerateUbuntuImages();
+                    } else {
+                        // Having more than one source prevents modification
+                        // of the sources.
+                        $scope.source.tooMany = true;
+                        $scope.source.releases = (
+                            $scope.bootResources.ubuntu.releases);
+                        $scope.source.arches = (
+                            $scope.bootResources.ubuntu.arches);
+                        $scope.source.selections.releases = (
+                            $scope.source.releases.filter(function(obj) {
+                                return obj.checked;
+                            }));
+                        $scope.source.selections.arches = (
+                            $scope.source.arches.filter(function(obj) {
+                            return obj.checked;
+                        }));
+                        $scope.source.errorMessage = (
+                            "More than one image source exists. UI does not " +
+                            "support modification of sources when more than " +
+                            "one has been defined. Used the API to adjust " +
+                            "your sources.");
+                        $scope.regenerateUbuntuImages();
+                    }
+                };
+
+                // Toggle the selection of other images.
+                $scope.toggleOtherSelection = function(image) {
+                    $scope.other.changed = true;
+                    image.checked = !image.checked;
+                    $scope.regenerateOtherImages();
+                };
+
+                // Save the other image selections into boot selections.
+                $scope.saveOtherSelection = function() {
+                    var params = {
+                        images: $scope.other.images.filter(function(image) {
+                            return image.checked;
+                        }).map(function(image) {
+                            return image.name;
+                        })
+                    };
+                    $scope.saving = true;
+                    BootResourcesManager.saveOther(params).then(function() {
+                        $scope.saving = false;
+                    });
+                };
+
+                // Start polling now that the directive is viewable and ensure
+                // the UserManager is loaded.
+                var ready = 2;
+                BootResourcesManager.startPolling().then(function() {
+                    ready -= 1;
+                    if(ready === 0) {
+                        $scope.loading = false;
+                    }
+                });
+                ManagerHelperService.loadManager(UsersManager).then(function() {
+                    ready -= 1;
+                    if(ready === 0) {
+                        $scope.loading = false;
+                    }
+                });
+
+                // Update the source information with the ubuntu source
+                // information changes.
+                $scope.$watch("bootResources.ubuntu", function() {
+                    if(!angular.isObject($scope.bootResources.ubuntu)) {
+                        return;
+                    }
+                    $scope.updateSource();
+                });
+
+                // Regenerate the images array when the resources change.
+                $scope.$watch("bootResources.resources", function() {
+                    if(!angular.isArray($scope.bootResources.resources)) {
+                        return;
+                    }
+                    $scope.regenerateUbuntuImages();
+                    $scope.regenerateOtherImages();
+                    $scope.regenerateGeneratedImages();
+                    $scope.regenerateCustomImages();
+                });
+
+                $scope.$watch("bootResources.other_images", function() {
+                    if(!angular.isArray($scope.bootResources.other_images)) {
+                        return;
+                    }
+                    if(!$scope.other.changed) {
+                        $scope.other.images = $scope.bootResources.other_images;
+                    }
+                    $scope.regenerateOtherImages();
+                });
+
+                // Stop polling when the directive is destroyed.
+                $scope.$on('$destroy', function() {
+                    BootResourcesManager.stopPolling();
+                });
+            }
+        };
+    }]);

=== added file 'src/maasserver/static/js/angular/directives/tests/test_boot_images.js'
--- src/maasserver/static/js/angular/directives/tests/test_boot_images.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_boot_images.js	2016-09-14 21:01:21 +0000
@@ -0,0 +1,1454 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for boot images directive.
+ */
+
+describe("maasBootImages", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Preload the $templateCache with empty contents. We only test the
+    // controller of the directive, not the template.
+    var $q, $templateCache;
+    beforeEach(inject(function($injector) {
+        $q = $injector.get('$q');
+        $templateCache = $injector.get('$templateCache');
+        $templateCache.put("static/partials/boot-images.html?v=undefined", '');
+    }));
+
+    // Load the required managers.
+    var BootResourcesManager, UsersManager, ManagerHelperService;
+    beforeEach(inject(function($injector) {
+        BootResourcesManager = $injector.get('BootResourcesManager');
+        UsersManager = $injector.get('UsersManager');
+        ManagerHelperService = $injector.get('ManagerHelperService');
+    }));
+
+    // Create a new scope before each test.
+    var $scope;
+    beforeEach(inject(function($rootScope) {
+        $scope = $rootScope.$new();
+    }));
+
+    // Return the compiled directive with the items from the scope.
+    function compileDirective(design) {
+        if(angular.isUndefined(design)) {
+            design = "";
+        }
+        var directive;
+        var html = [
+            '<div>',
+                '<maas-boot-images design="' + design + '"></maas-boot-images>',
+            '</div>'
+            ].join('');
+
+        // Compile the directive.
+        inject(function($compile) {
+            directive = $compile(html)($scope);
+        });
+
+        // Perform the digest cycle to finish the compile.
+        $scope.$digest();
+        return directive.find("maas-boot-images");
+    }
+
+    it("sets initial variables", function() {
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+        expect(scope.loading).toBe(true);
+        expect(scope.saving).toBe(false);
+        expect(scope.design).toBe('page');
+        expect(scope.bootResources).toBe(BootResourcesManager.getData());
+        expect(scope.ubuntuImages).toEqual([]);
+        expect(scope.source).toEqual({
+            isNew: false,
+            tooMany: false,
+            showingAdvanced: false,
+            connecting: false,
+            errorMessage: "",
+            source_type: "maas.io",
+            url: '',
+            keyring_filename: '',
+            keyring_data: '',
+            releases: [],
+            arches: [],
+            selections: {
+                changed: false,
+                releases: [],
+                arches: []
+            }
+        });
+        expect(scope.otherImages).toEqual([]);
+        expect(scope.other).toEqual({
+            changed: false,
+            images: []
+        });
+        expect(scope.generatedImages).toEqual([]);
+        expect(scope.customImages).toEqual([]);
+    });
+
+    it("clears loading once polling and user manager loaded", function() {
+        var pollingDefer = $q.defer();
+        spyOn(BootResourcesManager, "startPolling").and.returnValue(
+            pollingDefer.promise);
+        var managerDefer = $q.defer();
+        spyOn(ManagerHelperService, "loadManager").and.returnValue(
+            managerDefer.promise);
+
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+
+        pollingDefer.resolve();
+        $scope.$digest();
+        managerDefer.resolve();
+        $scope.$digest();
+        expect(scope.loading).toBe(false);
+    });
+
+    it("calls updateSource when ubuntu changes", function() {
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+        spyOn(scope, "updateSource");
+        scope.bootResources.ubuntu = {};
+        $scope.$digest();
+
+        expect(scope.updateSource).toHaveBeenCalled();
+    });
+
+    it("calls all regenerates when resources changes", function() {
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+        spyOn(scope, "regenerateUbuntuImages");
+        spyOn(scope, "regenerateOtherImages");
+        spyOn(scope, "regenerateGeneratedImages");
+        spyOn(scope, "regenerateCustomImages");
+        scope.bootResources.resources = [];
+        $scope.$digest();
+
+        expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        expect(scope.regenerateOtherImages).toHaveBeenCalled();
+        expect(scope.regenerateGeneratedImages).toHaveBeenCalled();
+        expect(scope.regenerateCustomImages).toHaveBeenCalled();
+    });
+
+    it("sets other.images when other_images change", function() {
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+        spyOn(scope, "regenerateOtherImages");
+        var sentinel = [];
+        scope.bootResources.other_images = sentinel;
+        $scope.$digest();
+
+        expect(scope.other.images).toBe(sentinel);
+        expect(scope.regenerateOtherImages).toHaveBeenCalled();
+    });
+
+    it("doesnt sets other.images when other changed", function() {
+        var directive = compileDirective();
+        var scope = directive.isolateScope();
+        spyOn(scope, "regenerateOtherImages");
+        var sentinel = [];
+        scope.bootResources.other_images = sentinel;
+        scope.other.changed = true;
+        $scope.$digest();
+
+        expect(scope.other.images).not.toBe(sentinel);
+        expect(scope.regenerateOtherImages).toHaveBeenCalled();
+    });
+
+    it("stops polling when scope is destroyed", function() {
+        var directive = compileDirective();
+        spyOn(BootResourcesManager, "stopPolling");
+        directive.scope().$destroy();
+        expect(BootResourcesManager.stopPolling).toHaveBeenCalled();
+    });
+
+    describe("isSuperUser", function() {
+
+        it("returns UsersManager.isSuperUser", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+
+            var sentinel = {};
+            spyOn(UsersManager, "isSuperUser").and.returnValue(sentinel);
+            expect(scope.isSuperUser()).toBe(sentinel);
+        });
+    });
+
+    describe("getTitleIcon", function() {
+
+        it("returns error when no resources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            BootResourcesManager._data.resources = [];
+            expect(scope.getTitleIcon()).toBe('icon--error');
+        });
+
+        it("returns success when resources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            BootResourcesManager._data.resources = [{}];
+            expect(scope.getTitleIcon()).toBe('icon--success');
+        });
+    });
+
+    describe("showMirrorPath", function() {
+
+        it("returns true when custom", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            expect(scope.showMirrorPath()).toBe(true);
+        });
+
+        it("returns false when maas.io", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'maas.io';
+            expect(scope.showMirrorPath()).toBe(false);
+        });
+    });
+
+    describe("isShowingAdvancedOptions", function() {
+
+        it("returns showingAdvanced", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var sentinel = {};
+            scope.source.showingAdvanced = sentinel;
+            expect(scope.isShowingAdvancedOptions()).toBe(sentinel);
+        });
+    });
+
+    describe("toggleAdvancedOptions", function() {
+
+        it("inverts showingAdvanced", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.showingAdvanced = false;
+            scope.toggleAdvancedOptions();
+            expect(scope.source.showingAdvanced).toBe(true);
+            scope.toggleAdvancedOptions();
+            expect(scope.source.showingAdvanced).toBe(false);
+        });
+    });
+
+    describe("bothKeyringOptionsSet", function() {
+
+        it("returns false if neither set", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            expect(scope.bothKeyringOptionsSet()).toBe(false);
+        });
+
+        it("returns false if keyring_filename set", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.keyring_filename = makeName("file");
+            expect(scope.bothKeyringOptionsSet()).toBe(false);
+        });
+
+        it("returns false if keyring_data set", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.keyring_data = makeName("data");
+            expect(scope.bothKeyringOptionsSet()).toBe(false);
+        });
+
+        it("returns true if both set set", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.keyring_filename = makeName("file");
+            scope.source.keyring_data = makeName("data");
+            expect(scope.bothKeyringOptionsSet()).toBe(true);
+        });
+    });
+
+    describe("showConnectButton", function() {
+
+        it("returns isNew", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var sentinel = {};
+            scope.source.isNew = sentinel;
+            expect(scope.showConnectButton()).toBe(sentinel);
+        });
+    });
+
+    describe("sourceChanged", function() {
+
+        it("sets isNew if no sources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: []
+                }
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.source.isNew).toBe(true);
+        });
+
+        it("calls connect when no sources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: []
+                }
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.connect).toHaveBeenCalled();
+        });
+
+        it("calls connect when no sources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: []
+                }
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.connect).toHaveBeenCalled();
+        });
+
+        it("calls updateSource and regenerateUbuntuImages", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: []
+                }
+            };
+            spyOn(scope, "connect");
+            spyOn(scope, "updateSource");
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.sourceChanged();
+            expect(scope.updateSource).toHaveBeenCalled();
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("changing to maas.io clears options and selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: [{
+                        source_type: 'custom'
+                    }]
+                }
+            };
+            scope.source.isNew = false;
+            scope.source.source_type = 'maas.io';
+            scope.source.releases = [{}, {}];
+            scope.source.arches = [{}, {}];
+            scope.source.selections = {
+                changed: true,
+                releases: [{}],
+                arches: [{}]
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.source.releases).toEqual([]);
+            expect(scope.source.arches).toEqual([]);
+            expect(scope.source.selections).toEqual({
+                changed: false,
+                releases: [],
+                arches: []
+            });
+        });
+
+        it("changing to custom clears options and selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: [{
+                        source_type: 'maas.io'
+                    }]
+                }
+            };
+            scope.source.isNew = false;
+            scope.source.source_type = 'custom';
+            scope.source.releases = [{}, {}];
+            scope.source.arches = [{}, {}];
+            scope.source.selections = {
+                changed: true,
+                releases: [{}],
+                arches: [{}]
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.source.releases).toEqual([]);
+            expect(scope.source.arches).toEqual([]);
+            expect(scope.source.selections).toEqual({
+                changed: false,
+                releases: [],
+                arches: []
+            });
+        });
+
+        it("changing to custom url clears options and selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources = {
+                resources: [],
+                ubuntu: {
+                    sources: [{
+                        source_type: 'custom',
+                        url: ''
+                    }]
+                }
+            };
+            scope.source.isNew = false;
+            scope.source.source_type = 'custom';
+            scope.source.url = makeName('url');
+            scope.source.releases = [{}, {}];
+            scope.source.arches = [{}, {}];
+            scope.source.selections = {
+                changed: true,
+                releases: [{}],
+                arches: [{}]
+            };
+            spyOn(scope, "connect");
+            scope.sourceChanged();
+            expect(scope.source.releases).toEqual([]);
+            expect(scope.source.arches).toEqual([]);
+            expect(scope.source.selections).toEqual({
+                changed: false,
+                releases: [],
+                arches: []
+            });
+        });
+    });
+
+    describe("isConnectButtonDisabled", function() {
+
+        it("never disabled when maas.io", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'maas.io';
+            expect(scope.isConnectButtonDisabled()).toBe(false);
+        });
+
+        it("disabled when custom and both keyrings are set", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            spyOn(scope, "bothKeyringOptionsSet").and.returnValue(true);
+            expect(scope.isConnectButtonDisabled()).toBe(true);
+        });
+
+        it("disabled when custom and no url", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            scope.source.url = "";
+            expect(scope.isConnectButtonDisabled()).toBe(true);
+        });
+
+        it("disabled when custom connecting", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            scope.source.url = makeName("url");
+            scope.source.connecting = true;
+            expect(scope.isConnectButtonDisabled()).toBe(true);
+        });
+
+        it("enabled when custom and not connecting", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            scope.source.url = makeName("url");
+            scope.source.connecting = false;
+            expect(scope.isConnectButtonDisabled()).toBe(false);
+        });
+    });
+
+    describe("getSourceParams", function() {
+
+        it("maas.io only returns source_type", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'maas.io';
+            expect(scope.getSourceParams()).toEqual({
+                source_type: 'maas.io'
+            });
+        });
+
+        it("custom returns all fields", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.source_type = 'custom';
+            scope.source.url = makeName("url");
+            scope.source.keyring_filename = makeName("keyring_filename");
+            scope.source.keyring_data = makeName("keyring_data");
+            expect(scope.getSourceParams()).toEqual({
+                source_type: 'custom',
+                url: scope.source.url,
+                keyring_filename: scope.source.keyring_filename,
+                keyring_data: scope.source.keyring_data
+            });
+        });
+    });
+
+    describe("selectDefaults", function() {
+
+        it("selects xenial and amd64", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var xenial = {
+                name: 'xenial'
+            };
+            var amd64 = {
+                name: 'amd64'
+            };
+            scope.source.releases = [xenial];
+            scope.source.arches = [amd64];
+            scope.selectDefaults();
+
+            expect(scope.source.selections.releases).toEqual([xenial]);
+            expect(scope.source.selections.arches).toEqual([amd64]);
+        });
+    });
+
+    describe("connect", function() {
+
+        it("does nothing if disabled", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            spyOn(scope, "isConnectButtonDisabled").and.returnValue(true);
+            spyOn(BootResourcesManager, "fetch");
+            scope.connect();
+            expect(BootResourcesManager.fetch).not.toHaveBeenCalled();
+        });
+
+        it("toggles connecting and sets options and defaults", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            spyOn(scope, "isConnectButtonDisabled").and.returnValue(false);
+
+            // Mock the fetch call.
+            var defer = $q.defer();
+            spyOn(BootResourcesManager, "fetch").and.returnValue(defer.promise);
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.connect();
+            expect(scope.source.connecting).toBe(true);
+
+            // Call connect and fake the resolve with mock data.
+            spyOn(scope, "selectDefaults");
+            var release = makeName("release");
+            var arch = makeName("arch");
+            var data = angular.toJson({
+                releases: [{
+                    name: release
+                }],
+                arches: [{
+                    name: arch
+                }]
+            });
+            defer.resolve(data);
+            $scope.$digest();
+
+            expect(scope.source.connecting).toBe(false);
+            expect(scope.source.releases).toEqual([{
+                name: release
+            }]);
+            expect(scope.source.arches).toEqual([{
+                name: arch
+            }]);
+            expect(scope.selectDefaults).toHaveBeenCalled();
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("toggles connecting and sets error", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            spyOn(scope, "isConnectButtonDisabled").and.returnValue(false);
+
+            // Mock the fetch call.
+            var defer = $q.defer();
+            spyOn(BootResourcesManager, "fetch").and.returnValue(defer.promise);
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.connect();
+            expect(scope.source.connecting).toBe(true);
+
+            // Call connect and fake the reject.
+            var error = makeName("error");
+            defer.reject(error);
+            $scope.$digest();
+
+            expect(scope.source.connecting).toBe(false);
+            expect(scope.source.errorMessage).toBe(error);
+        });
+    });
+
+    describe("showConnectBlock", function() {
+
+        it("true if tooMany sources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.tooMany = true;
+            expect(scope.showConnectBlock()).toBe(true);
+        });
+
+        it("true if new and not showing selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.isNew = true;
+            spyOn(scope, "showSelections").and.returnValue(false);
+            expect(scope.showConnectBlock()).toBe(true);
+        });
+
+        it("false if new and showing selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.isNew = true;
+            spyOn(scope, "showSelections").and.returnValue(true);
+            expect(scope.showConnectBlock()).toBe(false);
+        });
+
+        it("false if not new", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.isNew = false;
+            spyOn(scope, "showSelections").and.returnValue(false);
+            expect(scope.showConnectBlock()).toBe(false);
+        });
+    });
+
+    describe("showSelections", function() {
+
+        it("true releases and arches exist", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.releases = [{}];
+            scope.source.arches = [{}];
+            expect(scope.showSelections()).toBe(true);
+        });
+
+        it("false if only releases", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.releases = [{}];
+            scope.source.arches = [];
+            expect(scope.showSelections()).toBe(false);
+        });
+
+        it("false if only arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.source.releases = [];
+            scope.source.arches = [{}];
+            expect(scope.showSelections()).toBe(false);
+        });
+    });
+
+    describe("getUbuntuLTSReleases", function() {
+
+        it("filters bootResources to LTS", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var lts = {
+                title: '16.04 LTS'
+            };
+            var nonLTS = {
+                title: '16.10'
+            };
+            scope.bootResources = {
+                ubuntu: {
+                    releases: [lts, nonLTS]
+                }
+            };
+            expect(scope.getUbuntuLTSReleases()).toEqual([lts]);
+        });
+
+        it("filters new sources to LTS", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var lts = {
+                title: '16.04 LTS'
+            };
+            var nonLTS = {
+                title: '16.10'
+            };
+            scope.bootResources = {
+                ubuntu: {
+                    releases: []
+                }
+            };
+            scope.source.isNew = true;
+            scope.source.releases = [lts, nonLTS];
+            expect(scope.getUbuntuLTSReleases()).toEqual([lts]);
+        });
+    });
+
+    describe("getUbuntuNonLTSReleases", function() {
+
+        it("filters bootResources to non-LTS", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var lts = {
+                title: '16.04 LTS'
+            };
+            var nonLTS = {
+                title: '16.10'
+            };
+            scope.bootResources = {
+                ubuntu: {
+                    releases: [lts, nonLTS]
+                }
+            };
+            expect(scope.getUbuntuNonLTSReleases()).toEqual([nonLTS]);
+        });
+
+        it("filters new sources to non-LTS", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var lts = {
+                title: '16.04 LTS'
+            };
+            var nonLTS = {
+                title: '16.10'
+            };
+            scope.bootResources = {
+                ubuntu: {
+                    releases: []
+                }
+            };
+            scope.source.isNew = true;
+            scope.source.releases = [lts, nonLTS];
+            expect(scope.getUbuntuNonLTSReleases()).toEqual([nonLTS]);
+        });
+    });
+
+    describe("getArchitectures", function() {
+
+        it("returns bootResources arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var arch1 = {};
+            var arch2 = {};
+            scope.bootResources = {
+                ubuntu: {
+                    arches: [arch1, arch2]
+                }
+            };
+            expect(scope.getArchitectures()).toEqual([arch1, arch2]);
+        });
+
+        it("returns new sources arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var arch1 = {};
+            var arch2 = {};
+            scope.bootResources = {
+                ubuntu: {
+                    arches: []
+                }
+            };
+            scope.source.isNew = true;
+            scope.source.arches = [arch1, arch2];
+            expect(scope.getArchitectures()).toEqual([arch1, arch2]);
+        });
+    });
+
+    describe("isSelected", function() {
+
+        it("returns true if in release selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.releases = [obj];
+            expect(scope.isSelected('releases', obj)).toBe(true);
+        });
+
+        it("returns false if not in release selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.releases = [obj];
+            expect(scope.isSelected('releases', {})).toBe(false);
+        });
+
+        it("returns true if in arch selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.arches = [obj];
+            expect(scope.isSelected('arches', obj)).toBe(true);
+        });
+
+        it("returns false if not in arch selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.arches = [obj];
+            expect(scope.isSelected('arches', {})).toBe(false);
+        });
+    });
+
+    describe("toggleSelection", function() {
+
+        it("selects the obj for releases", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.toggleSelection('releases', obj);
+            expect(scope.source.selections.changed).toBe(true);
+            expect(scope.source.selections.releases).toEqual([obj]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("deselects the obj for releases", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.releases = [obj];
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.toggleSelection('releases', obj);
+            expect(scope.source.selections.changed).toBe(true);
+            expect(scope.source.selections.releases).toEqual([]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("selects the obj for arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.toggleSelection('arches', obj);
+            expect(scope.source.selections.changed).toBe(true);
+            expect(scope.source.selections.arches).toEqual([obj]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("deselects the obj for arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var obj = {};
+            scope.source.selections.arches = [obj];
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.toggleSelection('arches', obj);
+            expect(scope.source.selections.changed).toBe(true);
+            expect(scope.source.selections.arches).toEqual([]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+    });
+
+    describe("showImagesTable", function() {
+
+        it("returns true if ubuntuImages exist", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.ubuntuImages = [{}];
+            expect(scope.showImagesTable()).toBe(true);
+        });
+
+        it("returns true source has arches and releases", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.ubuntuImages = [];
+            scope.source.arches = [{}];
+            scope.source.releases = [{}];
+            expect(scope.showImagesTable()).toBe(true);
+        });
+
+        it("returns false no images and no source info", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.ubuntuImages = [];
+            scope.source.arches = [];
+            scope.source.releases = [];
+            expect(scope.showImagesTable()).toBe(false);
+        });
+    });
+
+    describe("regenerateUbuntuImages", function() {
+
+        it("builds images based on selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources.resources = [];
+            var release = {
+                name: makeName("release"),
+                title: makeName("releaseTitle")
+            };
+            var arch = {
+                name: makeName("arch"),
+                title: makeName("archTitle")
+            };
+            scope.source.selections.releases = [release];
+            scope.source.selections.arches = [arch];
+            scope.regenerateUbuntuImages();
+            expect(scope.ubuntuImages).toEqual([{
+                icon: 'icon--status-queued',
+                title: release.title,
+                arch: arch.title,
+                size: '-',
+                status: 'Queued for download',
+                beingDeleted: false
+            }]);
+        });
+
+        it("builds images based on selection and resource", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var release = {
+                name: makeName("release"),
+                title: makeName("releaseTitle")
+            };
+            var arch = {
+                name: makeName("arch"),
+                title: makeName("archTitle")
+            };
+            var icon = makeName("icon");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 0,
+                name: 'ubuntu/' + release.name,
+                arch: arch.name,
+                icon: icon,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.source.selections.releases = [release];
+            scope.source.selections.arches = [arch];
+            scope.regenerateUbuntuImages();
+            expect(scope.ubuntuImages).toEqual([{
+                icon: 'icon--status-' + icon + ' u-animation--pulse',
+                title: release.title,
+                arch: arch.title,
+                size: size,
+                status: status,
+                beingDeleted: false
+            }]);
+        });
+
+        it("marks resource as being deleted", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var release = {
+                name: makeName("release"),
+                title: makeName("releaseTitle")
+            };
+            var arch = {
+                name: makeName("arch"),
+                title: makeName("archTitle")
+            };
+            var icon = makeName("icon");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 0,
+                name: 'ubuntu/' + release.name,
+                title: release.title,
+                arch: arch.name,
+                icon: icon,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.source.selections.releases = [];
+            scope.source.selections.arches = [];
+            scope.regenerateUbuntuImages();
+            expect(scope.ubuntuImages).toEqual([{
+                icon: 'icon--status-failed',
+                title: release.title,
+                arch: arch.name,
+                size: size,
+                status: 'Queued for deletion',
+                beingDeleted: true
+            }]);
+        });
+    });
+
+    describe("regenerateOtherImages", function() {
+
+        it("builds images based on selections", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources.resources = [];
+            var os = makeName("os");
+            var release = makeName("release");
+            var arch = makeName("arch");
+            var name = os + '/' + arch + '/generic/' + release;
+            var image = {
+                name: name,
+                title: makeName("title"),
+                checked: true
+            };
+            scope.other.images = [image];
+            scope.regenerateOtherImages();
+            expect(scope.otherImages).toEqual([{
+                icon: 'icon--status-queued',
+                title: image.title,
+                arch: arch,
+                size: '-',
+                status: 'Queued for download',
+                beingDeleted: false
+            }]);
+        });
+
+        it("builds images based on selection and resource", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var os = makeName("os");
+            var release = makeName("release");
+            var arch = makeName("arch");
+            var name = os + '/' + arch + '/generic/' + release;
+            var image = {
+                name: name,
+                title: makeName("title"),
+                checked: true
+            };
+            var icon = makeName("icon");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 0,
+                name: os + '/' + release,
+                arch: arch,
+                icon: icon,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.other.images = [image];
+            scope.regenerateOtherImages();
+            expect(scope.otherImages).toEqual([{
+                icon: 'icon--status-' + icon + ' u-animation--pulse',
+                title: image.title,
+                arch: arch,
+                size: size,
+                status: status,
+                beingDeleted: false
+            }]);
+        });
+
+        it("marks resource as being deleted", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var os = makeName("os");
+            var release = makeName("release");
+            var arch = makeName("arch");
+            var name = os + '/' + arch + '/generic/' + release;
+            var image = {
+                name: name,
+                title: makeName("title"),
+                checked: false
+            };
+            var icon = makeName("icon");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 0,
+                name: os + '/' + release,
+                title: image.title,
+                arch: arch,
+                icon: icon,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.other.images = [image];
+            scope.regenerateOtherImages();
+            expect(scope.otherImages).toEqual([{
+                icon: 'icon--status-failed',
+                title: image.title,
+                arch: arch,
+                size: size,
+                status: 'Queued for deletion',
+                beingDeleted: true
+            }]);
+        });
+    });
+
+    describe("regenerateGeneratedImages", function() {
+
+        it("builds images based on resource", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var icon = makeName("icon");
+            var title = makeName("title");
+            var arch = makeName("arch");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 1,
+                icon: icon,
+                title: title,
+                arch: arch,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.regenerateGeneratedImages();
+            expect(scope.generatedImages).toEqual([{
+                icon: 'icon--status-' + icon + ' u-animation--pulse',
+                title: title,
+                arch: arch,
+                size: size,
+                status: status
+            }]);
+        });
+    });
+
+    describe("regenerateCustomImages", function() {
+
+        it("builds images based on resource", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var icon = makeName("icon");
+            var title = makeName("title");
+            var arch = makeName("arch");
+            var size = makeName("size");
+            var status = makeName("status");
+            scope.bootResources.resources = [{
+                rtype: 2,
+                icon: icon,
+                title: title,
+                arch: arch,
+                size: size,
+                status: status,
+                downloading: true
+            }];
+            scope.regenerateCustomImages();
+            expect(scope.customImages).toEqual([{
+                icon: 'icon--status-' + icon + ' u-animation--pulse',
+                title: title,
+                arch: arch,
+                size: size,
+                status: status
+            }]);
+        });
+    });
+
+    describe("ltsIsSelected", function() {
+
+        it("returns true if LTS is selected", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                title: '16.04 LTS',
+                beingDeleted: false
+            };
+            scope.ubuntuImages = [image];
+            expect(scope.ltsIsSelected()).toBe(true);
+        });
+
+        it("returns true if 14 series LTS is selected", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                title: '14.04 LTS',
+                beingDeleted: false
+            };
+            scope.ubuntuImages = [image];
+            expect(scope.ltsIsSelected()).toBe(true);
+        });
+
+        it("returns false if LTS is being deleted", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                title: '16.04 LTS',
+                beingDeleted: true
+            };
+            scope.ubuntuImages = [image];
+            expect(scope.ltsIsSelected()).toBe(false);
+        });
+
+        it("returns false if less than 14 series", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                title: '12.04 LTS',
+                beingDeleted: false
+            };
+            scope.ubuntuImages = [image];
+            expect(scope.ltsIsSelected()).toBe(false);
+        });
+    });
+
+    describe("showStopImportButton", function() {
+
+        it("returns region_import_running", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var sentinel = {};
+            scope.bootResources.region_import_running = sentinel;
+            expect(scope.showStopImportButton()).toBe(sentinel);
+        });
+    });
+
+    describe("showSaveSelection", function() {
+
+        it("returns showImagesTable", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var sentinel = {};
+            spyOn(scope, "showImagesTable").and.returnValue(sentinel);
+            expect(scope.showSaveSelection()).toBe(sentinel);
+        });
+    });
+
+    describe("canSaveSelection", function() {
+
+        it("returns false if saving", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.saving = true;
+            expect(scope.canSaveSelection()).toBe(false);
+        });
+
+        it("returns false if not lts selected", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.saving = false;
+            spyOn(scope, "ltsIsSelected").and.returnValue(false);
+            expect(scope.canSaveSelection()).toBe(false);
+        });
+
+        it("returns true if lts selected and not saving", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.saving = false;
+            spyOn(scope, "ltsIsSelected").and.returnValue(true);
+            expect(scope.canSaveSelection()).toBe(true);
+        });
+    });
+
+    describe("getSaveSelectionText", function() {
+
+        it("returns 'Saving...' when saving", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.saving = true;
+            expect(scope.getSaveSelectionText()).toBe('Saving...');
+        });
+
+        it("returns 'Save selection' when not saving", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.saving = false;
+            expect(scope.getSaveSelectionText()).toBe('Save selection');
+        });
+    });
+
+    describe("saveSelection", function() {
+
+        it("passes selected releases and arches", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var defer = $q.defer();
+            spyOn(BootResourcesManager, "saveUbuntu").and.returnValue(
+                defer.promise);
+            spyOn(scope, "canSaveSelection").and.returnValue(true);
+
+            var release = makeName("release");
+            scope.source.selections.releases = [{
+                name: release
+            }];
+            var arch = makeName("arch");
+            scope.source.selections.arches = [{
+                name: arch
+            }];
+            scope.saveSelection();
+
+            expect(scope.saving).toBe(true);
+            expect(BootResourcesManager.saveUbuntu).toHaveBeenCalledWith({
+                source_type: 'maas.io',
+                releases: [release],
+                arches: [arch]
+            });
+        });
+
+        it("clears saving and calls updateSource", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var defer = $q.defer();
+            spyOn(BootResourcesManager, "saveUbuntu").and.returnValue(
+                defer.promise);
+            spyOn(scope, "canSaveSelection").and.returnValue(true);
+
+            var release = makeName("release");
+            scope.source.selections.releases = [{
+                name: release
+            }];
+            var arch = makeName("arch");
+            scope.source.selections.arches = [{
+                name: arch
+            }];
+            scope.source.isNew = true;
+            scope.source.selections.changed = true;
+            spyOn(scope, "updateSource");
+            scope.saveSelection();
+
+            expect(scope.saving).toBe(true);
+            defer.resolve();
+            $scope.$digest();
+            expect(scope.saving).toBe(false);
+            expect(scope.source.isNew).toBe(false);
+            expect(scope.source.selections.changed).toBe(false);
+            expect(scope.updateSource).toHaveBeenCalled();
+        });
+    });
+
+    describe("updateSource", function() {
+
+        it("sets to new and custom when no source", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            scope.bootResources.ubuntu = {
+                sources: []
+            };
+            scope.updateSource();
+            expect(scope.source.isNew).toBe(true);
+            expect(scope.source.source_type).toBe('custom');
+            expect(scope.source.errorMessage).toBe(
+                'Currently no source exists.');
+
+        });
+
+        it("sets releases and arches and selections when source", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var source = {
+                source_type: 'custom',
+                url: makeName('url'),
+                keyring_filename: makeName('keyring_filename'),
+                keyring_data: makeName('keyring_data')
+            };
+            var release = {
+                name: makeName("release"),
+                checked: false
+            };
+            var releaseChecked = {
+                name: makeName("release"),
+                checked: true
+            };
+            var arch = {
+                name: makeName("arch"),
+                checked: false
+            };
+            var archChecked = {
+                name: makeName("arch"),
+                checked: true
+            };
+            scope.bootResources.ubuntu = {
+                sources: [source],
+                releases: [release, releaseChecked],
+                arches: [arch, archChecked]
+            };
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.updateSource();
+            expect(scope.source.isNew).toBe(false);
+            expect(scope.source.source_type).toBe('custom');
+            expect(scope.source.url).toBe(source.url);
+            expect(scope.source.keyring_filename).toBe(source.keyring_filename);
+            expect(scope.source.keyring_data).toBe(source.keyring_data);
+            expect(scope.source.releases).toBe(
+                scope.bootResources.ubuntu.releases);
+            expect(scope.source.arches).toBe(
+                scope.bootResources.ubuntu.arches);
+            expect(scope.source.selections.releases).toEqual([releaseChecked]);
+            expect(scope.source.selections.arches).toEqual([archChecked]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+
+        it("sets tooMany when multiple sources", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var release = {
+                name: makeName("release"),
+                checked: false
+            };
+            var releaseChecked = {
+                name: makeName("release"),
+                checked: true
+            };
+            var arch = {
+                name: makeName("arch"),
+                checked: false
+            };
+            var archChecked = {
+                name: makeName("arch"),
+                checked: true
+            };
+            scope.bootResources.ubuntu = {
+                sources: [{}, {}],
+                releases: [release, releaseChecked],
+                arches: [arch, archChecked]
+            };
+            spyOn(scope, "regenerateUbuntuImages");
+            scope.updateSource();
+            expect(scope.source.isNew).toBe(false);
+            expect(scope.source.tooMany).toBe(true);
+            expect(scope.source.releases).toBe(
+                scope.bootResources.ubuntu.releases);
+            expect(scope.source.arches).toBe(
+                scope.bootResources.ubuntu.arches);
+            expect(scope.source.selections.releases).toEqual([releaseChecked]);
+            expect(scope.source.selections.arches).toEqual([archChecked]);
+            expect(scope.regenerateUbuntuImages).toHaveBeenCalled();
+        });
+    });
+
+    describe("toggleOtherSelection", function() {
+
+        it("toggles checked and sets changed", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                checked: true
+            };
+            spyOn(scope, "regenerateOtherImages");
+            scope.toggleOtherSelection(image);
+            expect(scope.other.changed).toBe(true);
+            expect(image.checked).toBe(false);
+            expect(scope.regenerateOtherImages).toHaveBeenCalled();
+        });
+    });
+
+    describe("saveOtherSelection", function() {
+
+        it("passes correct params and toggles saving", function() {
+            var directive = compileDirective();
+            var scope = directive.isolateScope();
+            var image = {
+                name: makeName("name"),
+                checked: true
+            };
+            scope.other.images = [image];
+            var defer = $q.defer();
+            spyOn(BootResourcesManager, "saveOther").and.returnValue(
+                defer.promise);
+            scope.saveOtherSelection();
+
+            expect(scope.saving).toBe(true);
+            expect(BootResourcesManager.saveOther).toHaveBeenCalledWith({
+                images: [image.name]
+            });
+            defer.resolve();
+            $scope.$digest();
+            expect(scope.saving).toBe(false);
+        });
+    });
+});

=== added file 'src/maasserver/static/js/angular/factories/bootresources.js'
--- src/maasserver/static/js/angular/factories/bootresources.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/factories/bootresources.js	2016-09-14 21:01:21 +0000
@@ -0,0 +1,179 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * MAAS BootResource Manager
+ *
+ * Manager for the boot resources. This manager is unique from all the other
+ * managers because it uses polling instead of having the region push the
+ * information.
+ *
+ * Why is it polling?
+ * The boot resource information is split between the region controller and
+ * all rack controllers. The region controller does not cache any information
+ * about a rack controllers images it contacts the rack as its source of truth.
+ * This means that the client needs to use polling so the region controller
+ * can ask each rack controller what is the status of your images.
+ */
+
+angular.module('MAAS').factory(
+    'BootResourcesManager',
+    ['$q', '$timeout', 'RegionConnection', 'ErrorService',
+    function($q, $timeout, RegionConnection, ErrorService) {
+
+        // Constructor
+        function BootResourcesManager() {
+            // Set true once been loaded the first time.
+            this._loaded = false;
+
+            // Holds the data recieved from polling.
+            this._data = {};
+
+            // Set to true when polling has been enabled.
+            this._polling = false;
+
+            // The next promise for the polling interval.
+            this._nextPromise = null;
+
+            // Amount of time in milliseconds the manager should wait to poll
+            // for new data.
+            this._pollTimeout = 10000;
+
+            // Amount of time in milliseconds the manager should wait to poll
+            // for new data when an error occurs.
+            this._pollErrorTimeout = 500;
+
+            // Amount of time in milliseconds the manager should wait to poll
+            // for new data when the retrieved data is empty.
+            this._pollEmptyTimeout = 3000;
+        }
+
+        // Return the data.
+        BootResourcesManager.prototype.getData = function() {
+            return this._data;
+        };
+
+        // Return true when data has been loaded.
+        BootResourcesManager.prototype.isLoaded = function() {
+            return this._loaded;
+        };
+
+        // Returns true when currently polling.
+        BootResourcesManager.prototype.isPolling = function() {
+            return this._polling;
+        };
+
+        // Starts the polling for data.
+        BootResourcesManager.prototype.startPolling = function() {
+            if(!this._polling) {
+                this._polling = true;
+                return this._poll();
+            } else {
+                return this._nextPromise;
+            }
+        };
+
+        // Stops the polling for data.
+        BootResourcesManager.prototype.stopPolling = function() {
+            this._polling = false;
+            if(angular.isObject(this._nextPromise)) {
+                $timeout.cancel(this._nextPromise);
+                this._nextPromise = null;
+            }
+        };
+
+        // Load the data from the region.
+        BootResourcesManager.prototype._loadData = function(raiseError) {
+            raiseError = raiseError || false;
+            var self = this;
+            return RegionConnection.callMethod("bootresource.poll").then(
+                function(newData) {
+                    angular.copy(angular.fromJson(newData), self._data);
+                    self._loaded = true;
+                    return self._data;
+                }, function(error) {
+                    if(raiseError) {
+                        ErrorService.raiseError(error);
+                    }
+                });
+        };
+
+        // Registers the next polling attempt.
+        BootResourcesManager.prototype._pollAgain = function(timeout) {
+            var self = this;
+            this._nextPromise = $timeout(function() {
+                self._poll();
+            }, timeout);
+            return this._nextPromise;
+        };
+
+        // Polls for the data from the region.
+        BootResourcesManager.prototype._poll = function() {
+            var self = this;
+
+            // Can only poll if connected.
+            if(!RegionConnection.isConnected()) {
+                return this._pollAgain(this._pollErrorTimeout);
+            }
+
+            return this._loadData(false).then(function(newData) {
+                var pollTimeout = self._pollTimeout;
+                if(!angular.isObject(newData) ||
+                    newData.connection_error ||
+                    !angular.isArray(newData.resources) ||
+                    newData.resources.length === 0) {
+                    pollTimeout = self._pollEmptyTimeout;
+                }
+                self._pollAgain(pollTimeout);
+                return newData;
+            }, function(error) {
+                // Don't raise the error, just log it and try again.
+                console.log(error);
+                self._pollAgain(self._pollErrorTimeout);
+            });
+        };
+
+        // Loads the resources. This implemented so the ManagerHelperService
+        // can work on this manager just like all the rest.
+        BootResourcesManager.prototype.loadItems = function() {
+            var defer = $q.defer();
+            this._loadData(true).then(function() {
+                defer.resolve();
+            });
+            return defer.promise;
+        };
+
+        // Does nothing. This implemented so the ManagerHelperService
+        // can work on this manager just like all the rest.
+        BootResourcesManager.prototype.enableAutoReload = function() { };
+
+        // Save the ubuntu options and start the import process.
+        BootResourcesManager.prototype.saveUbuntu = function(params) {
+            var self = this;
+            return RegionConnection.callMethod(
+                "bootresource.save_ubuntu", params).then(
+                    function(newData) {
+                        angular.copy(angular.fromJson(newData), self._data);
+                        self._loaded = true;
+                        return self._data;
+                    });
+        };
+
+        // Save the other images and start the import process.
+        BootResourcesManager.prototype.saveOther = function(params) {
+            var self = this;
+            return RegionConnection.callMethod(
+                "bootresource.save_other", params).then(
+                    function(newData) {
+                        angular.copy(angular.fromJson(newData), self._data);
+                        self._loaded = true;
+                        return self._data;
+                    });
+        };
+
+        // Fetch the releases and arches from the provided source.
+        BootResourcesManager.prototype.fetch = function(source) {
+            return RegionConnection.callMethod("bootresource.fetch", source);
+        };
+
+        return new BootResourcesManager();
+    }]);

=== added file 'src/maasserver/static/js/angular/factories/tests/test_bootresources.js'
--- src/maasserver/static/js/angular/factories/tests/test_bootresources.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/factories/tests/test_bootresources.js	2016-09-14 21:01:21 +0000
@@ -0,0 +1,195 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for BootResourcesManager.
+ */
+
+
+describe("BootResourcesManager", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Grab the needed angular pieces.
+    var $rootScope, $timeout, $q;
+    beforeEach(inject(function($injector) {
+        $rootScope = $injector.get("$rootScope");
+        $timeout = $injector.get("$timeout");
+        $q = $injector.get("$q");
+    }));
+
+    // Load the needed services.
+    var BootResourcesManager, RegionConnection, ErrorService, webSocket;
+    beforeEach(inject(function($injector) {
+        BootResourcesManager = $injector.get("BootResourcesManager");
+        RegionConnection = $injector.get("RegionConnection");
+        ErrorService = $injector.get("ErrorService");
+
+        // Mock buildSocket so an actual connection is not made.
+        webSocket = new MockWebSocket();
+        spyOn(RegionConnection, "buildSocket").and.returnValue(webSocket);
+    }));
+
+    it("sets initial values", function() {
+        expect(BootResourcesManager._loaded).toBe(false);
+        expect(BootResourcesManager._data).toEqual({});
+        expect(BootResourcesManager._polling).toBe(false);
+        expect(BootResourcesManager._nextPromise).toBeNull();
+        expect(BootResourcesManager._pollTimeout).toBe(10000);
+        expect(BootResourcesManager._pollErrorTimeout).toBe(500);
+        expect(BootResourcesManager._pollEmptyTimeout).toBe(3000);
+    });
+
+    describe("getData", function() {
+
+        it("returns _data", function() {
+            expect(BootResourcesManager.getData()).toBe(
+                BootResourcesManager._data);
+        });
+    });
+
+    describe("isLoaded", function() {
+
+        it("returns _loaded", function() {
+            var sentinel = {};
+            BootResourcesManager._loaded = sentinel;
+            expect(BootResourcesManager.isLoaded()).toBe(sentinel);
+        });
+    });
+
+    describe("isPolling", function() {
+
+        it("returns _polling", function() {
+            var sentinel = {};
+            BootResourcesManager._polling = sentinel;
+            expect(BootResourcesManager.isPolling()).toBe(sentinel);
+        });
+    });
+
+    describe("startPolling", function() {
+
+        it("calls _poll and sets polling", function() {
+            var sentinel = {};
+            spyOn(BootResourcesManager, "_poll").and.returnValue(sentinel);
+            expect(BootResourcesManager.startPolling()).toBe(sentinel);
+            expect(BootResourcesManager._polling).toBe(true);
+        });
+
+        it("returns _nextPromise if already polling", function() {
+            var sentinel = {};
+            BootResourcesManager._polling = true;
+            BootResourcesManager._nextPromise = sentinel;
+            spyOn(BootResourcesManager, "_poll");
+            expect(BootResourcesManager.startPolling()).toBe(sentinel);
+            expect(BootResourcesManager._poll).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("stopPolling", function() {
+
+        it("clears _polling and cancels _nextPromise", function() {
+            var sentinel = {};
+            BootResourcesManager._polling = true;
+            BootResourcesManager._nextPromise = sentinel;
+            spyOn($timeout, "cancel");
+            BootResourcesManager.stopPolling();
+            expect($timeout.cancel).toHaveBeenCalledWith(sentinel);
+            expect(BootResourcesManager._nextPromise).toBeNull();
+            expect(BootResourcesManager._polling).toBe(false);
+        });
+    });
+
+    describe("_loadData", function() {
+
+        it("calls bootresource.poll and sets _data", function(done) {
+            var data = BootResourcesManager._data;
+            var defer = $q.defer();
+            spyOn(RegionConnection, "callMethod").and.returnValue(
+                defer.promise);
+
+            var newData = {
+                key: makeName("value")
+            };
+            BootResourcesManager._loadData().then(function(passedData) {
+                expect(BootResourcesManager._loaded).toBe(true);
+                expect(BootResourcesManager._data).toBe(data);
+                expect(BootResourcesManager._data).toBe(passedData);
+                expect(BootResourcesManager._data).toEqual(newData);
+                done();
+            });
+
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "bootresource.poll");
+            defer.resolve(angular.toJson(newData));
+            $rootScope.$digest();
+        });
+    });
+
+    describe("saveUbuntu", function() {
+
+        it("calls bootresource.save_ubuntu and sets _data", function(done) {
+            var data = BootResourcesManager._data;
+            var defer = $q.defer();
+            spyOn(RegionConnection, "callMethod").and.returnValue(
+                defer.promise);
+
+            var newData = {
+                key: makeName("value")
+            };
+            var sentinel = {};
+            BootResourcesManager.saveUbuntu(sentinel).then(function(pData) {
+                expect(BootResourcesManager._loaded).toBe(true);
+                expect(BootResourcesManager._data).toBe(data);
+                expect(BootResourcesManager._data).toBe(pData);
+                expect(BootResourcesManager._data).toEqual(newData);
+                done();
+            });
+
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "bootresource.save_ubuntu", sentinel);
+            defer.resolve(angular.toJson(newData));
+            $rootScope.$digest();
+        });
+    });
+
+    describe("saveOther", function() {
+
+        it("calls bootresource.save_other and sets _data", function(done) {
+            var data = BootResourcesManager._data;
+            var defer = $q.defer();
+            spyOn(RegionConnection, "callMethod").and.returnValue(
+                defer.promise);
+
+            var newData = {
+                key: makeName("value")
+            };
+            var sentinel = {};
+            BootResourcesManager.saveOther(sentinel).then(function(pData) {
+                expect(BootResourcesManager._loaded).toBe(true);
+                expect(BootResourcesManager._data).toBe(data);
+                expect(BootResourcesManager._data).toBe(pData);
+                expect(BootResourcesManager._data).toEqual(newData);
+                done();
+            });
+
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "bootresource.save_other", sentinel);
+            defer.resolve(angular.toJson(newData));
+            $rootScope.$digest();
+        });
+    });
+
+    describe("fetch", function() {
+
+        it("calls bootresource.fetch", function() {
+            var returnSentinel = {};
+            var sourceSentinel = {};
+            spyOn(RegionConnection, "callMethod").and.returnValue(
+                returnSentinel);
+            expect(BootResourcesManager.fetch(sourceSentinel)).toBe(
+                returnSentinel);
+            expect(RegionConnection.callMethod).toHaveBeenCalledWith(
+                "bootresource.fetch", sourceSentinel);
+        });
+    });
+});

=== modified file 'src/maasserver/static/js/angular/maas.js'
--- src/maasserver/static/js/angular/maas.js	2016-07-06 20:09:20 +0000
+++ src/maasserver/static/js/angular/maas.js	2016-09-14 21:01:21 +0000
@@ -54,6 +54,11 @@
                         'static/partials/node-details.html'),
                     controller: 'NodeDetailsController'
                 }).
+                when('/images', {
+                    templateUrl: versionedPath(
+                        'static/partials/images.html'),
+                    controller: 'ImagesController'
+                }).
                 when('/domains', {
                     templateUrl: versionedPath(
                         'static/partials/domains-list.html'),

=== added file 'src/maasserver/static/partials/boot-images.html'
--- src/maasserver/static/partials/boot-images.html	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/partials/boot-images.html	2016-09-14 21:01:21 +0000
@@ -0,0 +1,265 @@
+
+<div data-ng-class="{ 'action-card': design === 'action-card', 'row u-padding--top-large': design === 'page' }" data-ng-if="!loading">
+    <div data-ng-class="{ 'wrapper--inner': design === 'page' }">
+        <h2 data-ng-class="{ 'action-card__title': design === 'action-card' }">
+            <i data-ng-if="design === 'action-card'" class="icon icon--large {$ getTitleIcon() $}"></i> Ubuntu
+        </h2>
+        <div data-ng-class="{ 'action-card__controls': design === 'action-card' }">
+            <p class="u-margin--top-small u-margin--bottom-small" data-ng-if="isSuperUser() && !source.tooMany">
+                Select images and architecture to be imported and kept in sync daily. Images will be available for deploying to machines managed by MAAS.
+            </p>
+            <form class="form">
+                <div data-ng-if="isSuperUser() && !source.tooMany">
+                    <h3>Choose source</h3>
+                    <div class="form__group">
+                        <input type="radio" ng-model="source.source_type" id="source_maas" value="maas.io" data-ng-change="sourceChanged()">
+                        <label for="source_maas" class="u-margin--right">maas.io</label>
+                        <input type="radio" ng-model="source.source_type" id="source_custom" value="custom" data-ng-change="sourceChanged()">
+                        <label for="source_custom">Custom</label>
+                    </div>
+                    <div data-ng-if="showMirrorPath()">
+                        <h3>Mirror URL</h3>
+                        <p>Add the URL you want to use to select your images from.</p>
+                        <div class="u-width--half u-display--inline-block u-float--left">
+                            <div class="form__group">
+                                <input type="text" name="mirrorUrl" placeholder="e.g. http:// or file://"
+                                    data-ng-model="source.url" data-ng-change="sourceChanged()">
+                            </div>
+                            <div data-ng-if="isShowingAdvancedOptions()">
+                                <div class="form__group">
+                                    <label for="keyring_filename" class="form__group--label">Path to the keyring to validate the mirror path.</label>
+                                    <input type="text" name="keyring_filename" placeholder="e.g. /usr/share/keyrings/ubuntu-cloudimage-keyring.gpg"
+                                        data-ng-model="source.keyring_filename"
+                                        data-ng-class="{ 'has-error': bothKeyringOptionsSet() }">
+                                    <ul class="form__error" data-ng-if="bothKeyringOptionsSet()">
+                                        <li class="form__error-item">Cannot set both keyring path and keyring contents.</li>
+                                    </ul>
+                                </div>
+                                <div class="form__group">
+                                    <label for="keyring_data" class="form__group--label">Contents of the keyring to validate the mirror path.</label>
+                                    <textarea name="keyring_data" placeholder="Contents of GPG key"
+                                        data-ng-model="source.keyring_data"
+                                        data-ng-class="{ 'has-error': bothKeyringOptionsSet() }"></textarea>
+                                    <ul class="form__error" data-ng-if="bothKeyringOptionsSet()">
+                                        <li class="form__error-item">Cannot set both keyring path and keyring contents.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="u-width--half u-display--inline-block u-float--left">
+                            <div class="u-display--inline-block u-float--left u-margin--top-tiny u-margin--left">
+                                <i class="icon" data-ng-class="{ 'icon--close': !isShowingAdvancedOptions(), 'icon--open': isShowingAdvancedOptions() }"></i>
+                                <a data-ng-click="toggleAdvancedOptions()" data-ng-if="!isShowingAdvancedOptions()">Show advanced options</a>
+                                <a data-ng-click="toggleAdvancedOptions()" data-ng-if="isShowingAdvancedOptions()">Hide advanced options</a>
+                            </div>
+                            <button class="button--secondary button--inline u-float--right"
+                                data-ng-if="showConnectButton()"
+                                data-ng-disabled="isConnectButtonDisabled()"
+                                data-ng-click="connect()">Connect</button>
+                            <div class="u-clear"></div>
+                        </div>
+                        <div class="u-clear"></div>
+                    </div>
+                </div>
+                <div data-ng-if="showConnectBlock()">
+                    <div class="u-clear"></div>
+                    <div class="u-margin--top-large u-margin--bottom-large u-padding--top-large u-padding--bottom-large">
+                        <p class="text-center" data-ng-if="!source.connecting && source.errorMessage">
+                            <i class="icon icon--warning"></i> {$ source.errorMessage $}
+                            <a data-ng-if="source.source_type === 'maas.io'" data-ng-click="connect()">Retry</a>
+                        </p>
+                        <p class="text-center" data-ng-if="source.connecting">
+                            <i class="icon icon--loading u-animation--spin"></i> Connecting
+                        </p>
+                    </div>
+                </div>
+                <div data-ng-if="isSuperUser() && !source.tooMany && showSelections()">
+                    <div class="u-width--half u-display--inline-block u-float--left">
+                        <h3>Images</h3>
+                        <div class="u-width--half u-display--inline-block u-float--left">
+                            <div class="form__group" data-ng-repeat="release in getUbuntuLTSReleases() | orderBy:'-title'">
+                                <input type="checkbox" id="{$ release.name $}"
+                                    data-ng-checked="isSelected('releases', release)"
+                                    data-ng-click="toggleSelection('releases', release)">
+                                <label for="{$ release.name $}">{$ release.title $}</label>
+                            </div>
+                        </div>
+                        <div class="u-width--half u-display--inline-block u-float--left">
+                            <div class="form__group" data-ng-repeat="release in getUbuntuNonLTSReleases() | orderBy:'-title'">
+                                <input type="checkbox" id="{$ release.name $}"
+                                    data-ng-checked="isSelected('releases', release)"
+                                    data-ng-click="toggleSelection('releases', release)">
+                                <label for="{$ release.name $}">{$ release.title $}</label>
+                            </div>
+                        </div>
+                        <div class="u-clear"></div>
+                    </div>
+                    <div class="u-width--half u-display--inline-block u-float--left">
+                        <h3>Architectures</h3>
+                        <div class="form__group" data-ng-repeat="arch in getArchitectures() | orderBy:'title'">
+                            <input type="checkbox" id="{$ arch.name $}"
+                                data-ng-checked="isSelected('arches', arch)"
+                                data-ng-click="toggleSelection('arches', arch)">
+                            <label for="{$ arch.name $}">{$ arch.title $}</label>
+                        </div>
+                    </div>
+                    <div class="u-clear"></div>
+                </div>
+                <section class="table u-margin--top" data-ng-if="showImagesTable()">
+                    <header class="table__head">
+                        <div class="table__row">
+                            <div class="table__header table-col--25">Release</div>
+                            <div class="table__header table-col--15">Architecture</div>
+                            <div class="table__header table-col--20">Size</div>
+                            <div class="table__header table-col--30">Importing status</div>
+                        </div>
+                    </header>
+                    <main class="table__body">
+                        <div class="table__row table--error" data-ng-if="!ltsIsSelected()">
+                            <div class="table__data table-col--100">
+                                <i class="icon icon--error"></i> Select at least one 14.04+ LTS release and one architecture.
+                            </div>
+                        </div>
+                        <div class="table__row" data-ng-repeat="image in ubuntuImages | orderBy:['-title', 'arch']">
+                            <div class="table__data table-col--2">
+                                <i class="icon {$ image.icon $}"></i>
+                            </div>
+                            <div class="table__data table-col--23">
+                                {$ image.title $}
+                            </div>
+                            <div class="table__data table-col--15">{$ image.arch $}</div>
+                            <div class="table__data table-col--20">{$ image.size $}</div>
+                            <div class="table__data table-col--30">{$ image.status $}</div>
+                        </div>
+                    </main>
+                </section>
+                <div class="twelve-col" data-ng-if="!source.tooMany">
+                    <div class="u-float--right">
+                        <!-- Not supported yet.
+                        <a class="button--base button--inline" data-ng-if="showStopImportButton()">Stop import</a>
+                        -->
+                        <button class="button--secondary button--inline"
+                            data-ng-if="isSuperUser() && showSaveSelection()"
+                            data-ng-disabled="!canSaveSelection()"
+                            data-ng-click="saveSelection()">{$ getSaveSelectionText() $}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<div class="row" data-ng-if="design === 'page' && other.images.length && !source.isNew">
+    <div class="wrapper--inner">
+        <h2>Other Images</h2>
+        <div data-ng-if="isSuperUser() && !source.tooMany">
+            <span class="u-margin--right" data-ng-repeat="image in other.images | orderBy:['-title']">
+                <input type="checkbox" id="{$ image.name $}"
+                    data-ng-checked="image.checked"
+                    data-ng-click="toggleOtherSelection(image)">
+                <label for="{$ image.name $}">{$ image.title $}</label>
+            <span>
+        </div>
+        <section class="table u-margin--top">
+            <header class="table__head">
+                <div class="table__row">
+                    <div class="table__header table-col--25">Release</div>
+                    <div class="table__header table-col--15">Architecture</div>
+                    <div class="table__header table-col--20">Size</div>
+                    <div class="table__header table-col--30">Importing status</div>
+                </div>
+            </header>
+            <main class="table__body">
+                <div class="table__row" data-ng-if="!otherImages.length">
+                    <div class="table__data table-col--100">
+                        No images have been selected for syncing.
+                    </div>
+                </div>
+                <div class="table__row" data-ng-repeat="image in otherImages | orderBy:['-title', 'arch']">
+                    <div class="table__data table-col--2">
+                        <i class="icon {$ image.icon $}"></i>
+                    </div>
+                    <div class="table__data table-col--23">
+                        {$ image.title $}
+                    </div>
+                    <div class="table__data table-col--15">{$ image.arch $}</div>
+                    <div class="table__data table-col--20">{$ image.size $}</div>
+                    <div class="table__data table-col--30">{$ image.status $}</div>
+                </div>
+            </main>
+        </section>
+        <div class="twelve-col" data-ng-if="!source.tooMany">
+            <div class="u-float--right">
+                <button class="button--secondary button--inline"
+                    data-ng-if="isSuperUser()"
+                    data-ng-disabled="saving"
+                    data-ng-click="saveOtherSelection()">{$ getSaveSelectionText() $}</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row" data-ng-if="design === 'page' && generatedImages.length">
+    <div class="wrapper--inner">
+        <h2>Generated Images</h2>
+        <section class="table u-margin--top">
+            <header class="table__head">
+                <div class="table__row">
+                    <div class="table__header table-col--25">Release</div>
+                    <div class="table__header table-col--15">Architecture</div>
+                    <div class="table__header table-col--20">Size</div>
+                    <div class="table__header table-col--30">Importing status</div>
+                </div>
+            </header>
+            <main class="table__body">
+                <div class="table__row" data-ng-if="!generatedImages.length">
+                    <div class="table__data table-col--100">
+                        No images have been uploaded.
+                    </div>
+                </div>
+                <div class="table__row" data-ng-repeat="image in generatedImages | orderBy:['-title', 'arch']">
+                    <div class="table__data table-col--2">
+                        <i class="icon {$ image.icon $}"></i>
+                    </div>
+                    <div class="table__data table-col--23">
+                        {$ image.title $}
+                    </div>
+                    <div class="table__data table-col--15">{$ image.arch $}</div>
+                    <div class="table__data table-col--20">{$ image.size $}</div>
+                    <div class="table__data table-col--30">{$ image.status $}</div>
+                </div>
+            </main>
+        </section>
+    </div>
+</div>
+<div class="row" data-ng-if="design === 'page' && customImages.length">
+    <div class="wrapper--inner">
+        <h2>Custom Images</h2>
+        <section class="table u-margin--top">
+            <header class="table__head">
+                <div class="table__row">
+                    <div class="table__header table-col--25">Release</div>
+                    <div class="table__header table-col--15">Architecture</div>
+                    <div class="table__header table-col--20">Size</div>
+                    <div class="table__header table-col--30">Importing status</div>
+                </div>
+            </header>
+            <main class="table__body">
+                <div class="table__row" data-ng-if="!customImages.length">
+                    <div class="table__data table-col--100">
+                        No images have been uploaded.
+                    </div>
+                </div>
+                <div class="table__row" data-ng-repeat="image in customImages | orderBy:['-title', 'arch']">
+                    <div class="table__data table-col--2">
+                        <i class="icon {$ image.icon $}"></i>
+                    </div>
+                    <div class="table__data table-col--23">
+                        {$ image.title $}
+                    </div>
+                    <div class="table__data table-col--15">{$ image.arch $}</div>
+                    <div class="table__data table-col--20">{$ image.size $}</div>
+                    <div class="table__data table-col--30">{$ image.status $}</div>
+                </div>
+            </main>
+        </section>
+    </div>
+</div>

=== added file 'src/maasserver/static/partials/images.html'
--- src/maasserver/static/partials/images.html	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/partials/images.html	2016-09-14 21:01:21 +0000
@@ -0,0 +1,7 @@
+<header class="page-header margin-bottom">
+    <div class="wrapper--inner">
+        <h1 class="page-header__title">Boot Images</h1>
+        <maas-boot-images-status></maas-boot-images-status>
+    </div>
+</header>
+<maas-boot-images></maas-boot-images>

=== modified file 'src/maasserver/templates/maasserver/base.html'
--- src/maasserver/templates/maasserver/base.html	2016-09-06 15:44:03 +0000
+++ src/maasserver/templates/maasserver/base.html	2016-09-14 21:01:21 +0000
@@ -115,7 +115,7 @@
                         <a class="{% block nav-active-node-list %}{% endblock %}" href="{% url 'index' %}#/nodes">Nodes</a>
                     </li>
                     <li>
-                        <a class="{% block nav-active-images %}{% endblock %}" href="{% url 'images' %}">Images</a>
+                        <a class="{% block nav-active-images %}{% endblock %}" href="{% url 'index' %}#/images">Images</a>
                     </li>
                     <li>
                         <a class="{% block nav-active-domains-list %}{% endblock %}" href="{% url 'index' %}#/domains">DNS</a>

=== modified file 'src/maasserver/templates/maasserver/index.html'
--- src/maasserver/templates/maasserver/index.html	2016-09-06 15:59:15 +0000
+++ src/maasserver/templates/maasserver/index.html	2016-09-14 21:01:21 +0000
@@ -92,7 +92,7 @@
                         <a data-ng-class="{ active: page === 'nodes' }" href="#/nodes">Nodes</a>
                     </li>
                     <li>
-                        <a data-ng-class="{ active: page === 'images' }" href="{% url 'images' %}">Images</a>
+                        <a data-ng-class="{ active: page === 'images' }" href="#/images">Images</a>
                     </li>
                     <li>
                         <a data-ng-class="{ active: page === 'domains' }" href="#/domains">DNS</a>

=== modified file 'src/maasserver/tests/test_bootresources.py'
--- src/maasserver/tests/test_bootresources.py	2016-08-31 06:26:21 +0000
+++ src/maasserver/tests/test_bootresources.py	2016-09-14 21:01:21 +0000
@@ -83,7 +83,9 @@
     get_one,
     post_commit_hooks,
     reload_object,
+    transactional,
 )
+from maasserver.utils.threads import deferToDatabase
 from maasserver.utils.version import get_maas_version_ui
 from maastesting.matchers import (
     MockCalledOnce,
@@ -112,6 +114,7 @@
 )
 from twisted.application.internet import TimerService
 from twisted.internet.defer import (
+    Deferred,
     fail,
     succeed,
 )
@@ -1149,6 +1152,44 @@
                     written_data = stream.read()
                 self.assertEqual(content, written_data)
 
+    @asynchronous(timeout=1)
+    def test_finalize_calls_notify_errback(self):
+
+        @transactional
+        def create_store(testcase):
+            factory.make_BootResource(rtype=BOOT_RESOURCE_TYPE.SYNCED)
+            store = BootResourceStore()
+            testcase.patch(store, 'resource_cleaner')
+            testcase.patch(store, 'perform_write')
+            testcase.patch(store, 'resource_set_cleaner')
+            return store
+
+        notify = Deferred()
+        d = deferToDatabase(create_store, self)
+        d.addCallback(lambda store: store.finalize(notify=notify))
+        d.addCallback(lambda _: notify)
+        d.addErrback(lambda failure: failure.trap(Exception))
+        return d
+
+    @asynchronous(timeout=1)
+    def test_finalize_calls_notify_callback(self):
+
+        @transactional
+        def create_store(testcase):
+            factory.make_BootResource(rtype=BOOT_RESOURCE_TYPE.SYNCED)
+            store = BootResourceStore()
+            store._content_to_finalize = [sentinel.content]
+            testcase.patch(store, 'resource_cleaner')
+            testcase.patch(store, 'perform_write')
+            testcase.patch(store, 'resource_set_cleaner')
+            return store
+
+        notify = Deferred()
+        d = deferToDatabase(create_store, self)
+        d.addCallback(lambda store: store.finalize(notify=notify))
+        d.addCallback(lambda _: notify)
+        return d
+
 
 class TestSetGlobalDefaultReleases(MAASServerTestCase):
 
@@ -1300,7 +1341,7 @@
             sources=[], product_mapping=product_mapping, store=store)
         self.assertThat(
             fake_finalize,
-            MockCalledOnceWith())
+            MockCalledOnceWith(notify=None))
 
     def test__import_resources_exits_early_if_lock_held(self):
         set_simplestreams_env = self.patch_autospec(
@@ -1362,7 +1403,8 @@
             MockCalledOnceWith(descriptions))
         self.expectThat(
             download_all_boot_resources,
-            MockCalledOnceWith([sentinel.source], sentinel.mapping))
+            MockCalledOnceWith(
+                [sentinel.source], sentinel.mapping, notify=None))
         self.expectThat(
             set_global_default_releases,
             MockCalledOnceWith())
@@ -1417,14 +1459,14 @@
         bootresources._import_resources_in_thread()
         self.assertThat(
             deferToDatabase, MockCalledOnceWith(
-                bootresources._import_resources))
+                bootresources._import_resources, notify=None))
 
     def tests__defaults_force_to_False(self):
         deferToDatabase = self.patch(bootresources, "deferToDatabase")
         bootresources._import_resources_in_thread()
         self.assertThat(
             deferToDatabase, MockCalledOnceWith(
-                bootresources._import_resources))
+                bootresources._import_resources, notify=None))
 
     def test__logs_errors_and_does_not_errback(self):
         logger = self.useFixture(TwistedLoggerFixture())

=== modified file 'src/maasserver/views/combo.py'
--- src/maasserver/views/combo.py	2016-08-19 10:22:29 +0000
+++ src/maasserver/views/combo.py	2016-09-14 21:01:21 +0000
@@ -51,6 +51,7 @@
         "content_type": "text/javascript; charset=UTF-8",
         "files": [
             "js/angular/maas.js",
+            "js/angular/factories/bootresources.js",
             "js/angular/factories/dhcpsnippets.js",
             "js/angular/factories/packagerepositories.js",
             "js/angular/factories/region.js",
@@ -80,6 +81,7 @@
             "js/angular/services/converter.js",
             "js/angular/services/json.js",
             "js/angular/directives/accordion.js",
+            "js/angular/directives/boot_images.js",
             "js/angular/directives/call_to_action.js",
             "js/angular/directives/code_lines.js",
             "js/angular/directives/controller_image_status.js",
@@ -107,6 +109,7 @@
             "js/angular/controllers/add_hardware.js",
             "js/angular/controllers/add_device.js",
             "js/angular/controllers/add_domain.js",
+            "js/angular/controllers/images.js",
             "js/angular/controllers/node_details.js",
             "js/angular/controllers/node_details_networking.js",
             "js/angular/controllers/node_details_storage.js",

=== modified file 'src/maasserver/websockets/handlers/bootresource.py'
--- src/maasserver/websockets/handlers/bootresource.py	2016-09-02 13:16:06 +0000
+++ src/maasserver/websockets/handlers/bootresource.py	2016-09-14 21:01:21 +0000
@@ -38,6 +38,8 @@
     Node,
 )
 from maasserver.utils.converters import human_readable_bytes
+from maasserver.utils.orm import transactional
+from maasserver.utils.threads import deferToDatabase
 from maasserver.utils.version import get_maas_version_ui
 from maasserver.websockets.base import (
     Handler,
@@ -52,6 +54,13 @@
 )
 from provisioningserver.import_images.keyrings import write_all_keyrings
 from provisioningserver.utils.fs import tempdir
+from provisioningserver.utils.twisted import (
+    asynchronous,
+    callOut,
+    FOREVER,
+)
+from twisted.internet.defer import Deferred
+from twisted.python import log
 
 
 def get_distro_series_info_row(series):
@@ -94,7 +103,7 @@
                 'source_type': source_type,
                 'url': source.url,
                 'keyring_filename': source.keyring_filename,
-                'keyring_data': source.keyring_data.decode('ascii'),
+                'keyring_data': bytes(source.keyring_data).decode("ascii"),
             })
         return sources
 
@@ -157,6 +166,94 @@
                 })
         return arches
 
+    def check_if_image_matches_resource(self, resource, image):
+        """Return True if the resource matches the image."""
+        os, series = resource.name.split('/')
+        arch, subarch = resource.split_arch()
+        if os != image.os or series != image.release or arch != image.arch:
+            return False
+        if not resource.supports_subarch(subarch):
+            return False
+        return True
+
+    def get_matching_resource_for_image(self, resources, image):
+        """Return True if the image matches one of the resources."""
+        for resource in resources:
+            if self.check_if_image_matches_resource(resource, image):
+                return resource
+        return None
+
+    def get_other_synced_resources(self):
+        """Return all synced resources that are not Ubuntu."""
+        resources = list(BootResource.objects.filter(
+            rtype=BOOT_RESOURCE_TYPE.SYNCED).exclude(
+            name__startswith='ubuntu/').order_by('-name', 'architecture'))
+        for resource in resources:
+            self.add_resource_template_attributes(resource)
+        return resources
+
+    def add_resource_template_attributes(self, resource):
+        """Adds helper attributes to the resource."""
+        resource.title = self.get_resource_title(resource)
+        resource.arch, resource.subarch = resource.split_arch()
+        resource.number_of_nodes = self.get_number_of_nodes_deployed_for(
+            resource)
+        resource_set = resource.get_latest_set()
+        if resource_set is None:
+            resource.size = human_readable_bytes(0)
+            resource.last_update = resource.updated
+            resource.complete = False
+            resource.status = "Queued for download"
+            resource.downloading = False
+        else:
+            resource.size = human_readable_bytes(resource_set.total_size)
+            resource.last_update = resource_set.updated
+            resource.complete = resource_set.complete
+            if not resource.complete:
+                progress = resource_set.progress
+                if progress > 0:
+                    resource.status = "Downloading %3.0f%%" % progress
+                    resource.downloading = True
+                    resource.icon = 'in-progress'
+                else:
+                    resource.status = "Queued for download"
+                    resource.downloading = False
+                    resource.icon = 'queued'
+            else:
+                # See if the resource also exists on all the clusters.
+                if resource in self.rack_resources:
+                    resource.status = "Synced"
+                    resource.downloading = False
+                    resource.icon = 'succeeded'
+                else:
+                    resource.complete = False
+                    if self.racks_syncing:
+                        resource.status = "Syncing to rack controller(s)"
+                        resource.downloading = True
+                        resource.icon = 'in-progress'
+                    else:
+                        resource.status = (
+                            "Waiting for rack controller(s) to sync")
+                        resource.downloading = False
+                        resource.icon = 'waiting'
+
+    def format_other_images(self):
+        """Return formatted other images for selection."""
+        resources = self.get_other_synced_resources()
+        images = []
+        for image in BootSourceCache.objects.exclude(os='ubuntu'):
+            resource = self.get_matching_resource_for_image(resources, image)
+            title = get_os_release_title(image.os, image.release)
+            if title is None:
+                title = '%s/%s' % (image.os, image.release)
+            images.append({
+                'name': '%s/%s/%s/%s' % (
+                    image.os, image.arch, image.subarch, image.release),
+                'title': title,
+                'checked': True if resource else False,
+            })
+        return images
+
     def node_has_architecture_for_resource(self, node, resource):
         """Return True if node is the same architecture as resource."""
         arch, _ = resource.split_arch()
@@ -302,24 +399,29 @@
             if progress > 0:
                 resource.status = "Downloading %3.0f%%" % progress
                 resource.downloading = True
+                resource.icon = 'in-progress'
             else:
                 resource.status = "Queued for download"
                 resource.downloading = False
+                resource.icon = 'queued'
         else:
             # See if all the resources exist on all the racks.
             rack_has_resources = any(
                 res in group for res in self.rack_resources)
             if rack_has_resources:
-                resource.status = "Complete"
+                resource.status = "Synced"
                 resource.downloading = False
+                resource.icon = 'succeeded'
             else:
                 resource.complete = False
                 if self.racks_syncing:
                     resource.status = "Syncing to rack controller(s)"
                     resource.downloading = True
+                    resource.icon = 'in-progress'
                 else:
                     resource.status = "Waiting for rack controller(s) to sync"
                     resource.downloading = False
+                    resource.icon = 'waiting'
         return resource
 
     def combine_resources(self, resources):
@@ -380,7 +482,7 @@
                 rtype=resource.rtype, name=resource.name,
                 title=resource.title, arch=resource.arch, size=resource.size,
                 complete=resource.complete, status=resource.status,
-                downloading=resource.downloading,
+                icon=resource.icon, downloading=resource.downloading,
                 numberOfNodes=resource.number_of_nodes,
                 lastUpdate=resource.last_update.strftime(
                     "%a, %d %b. %Y %H:%M:%S")
@@ -396,92 +498,150 @@
             region_import_running=is_import_resources_running(),
             rack_import_running=self.racks_syncing,
             resources=json_resources,
-            ubuntu=json_ubuntu)
+            ubuntu=json_ubuntu,
+            other_images=self.format_other_images())
         return json.dumps(data)
 
+    def get_bootsource(self, params, from_db=False):
+        source_type = params.get('source_type', 'custom')
+        if source_type == 'maas.io':
+            url = DEFAULT_IMAGES_URL
+            keyring_filename = DEFAULT_KEYRINGS_PATH
+            keyring_data = b''
+        elif source_type == 'custom':
+            url = params['url']
+            keyring_filename = params.get('keyring_filename', '')
+            keyring_data = params.get('keyring_data', '').encode('utf-8')
+            if keyring_filename == '' and keyring_data == b'':
+                keyring_filename = DEFAULT_KEYRINGS_PATH
+        else:
+            raise HandlerError('Unknown source_type: %s' % source_type)
+
+        if from_db:
+            source, created = BootSource.objects.get_or_create(
+                url=url,
+                defaults={
+                    'keyring_filename': keyring_filename,
+                    'keyring_data': keyring_data})
+            if not created:
+                source.keyring_filename = keyring_filename
+                source.keyring_data = keyring_data
+                source.save()
+            else:
+                # This was a new source, make sure its the only source in the
+                # database. This is because the UI only supports handling one
+                # source at a time.
+                BootSource.objects.exclude(id=source.id).delete()
+            return source
+        else:
+            return BootSource(
+                url=url,
+                keyring_filename=keyring_filename,
+                keyring_data=keyring_data,
+            )
+
+    @asynchronous(timeout=FOREVER)
     def save_ubuntu(self, params):
         """Called to save the Ubuntu section of the websocket."""
         # Must be administrator.
         assert self.user.is_superuser, "Permission denied."
 
-        os = 'ubuntu'
-        releases = params['releases']
-        arches = params['arches']
-        boot_source = BootSource.objects.first()
-
-        # Remove all selections, that are not of release.
-        BootSourceSelection.objects.filter(
-            boot_source=boot_source, os=os).exclude(
-            release__in=releases).delete()
-
-        if len(releases) > 0:
-            # Create or update the selections.
-            for release in releases:
+        @transactional
+        def update_source(params):
+            os = 'ubuntu'
+            releases = params['releases']
+            arches = params['arches']
+            boot_source = self.get_bootsource(params, from_db=True)
+
+            # Remove all selections, that are not of release.
+            BootSourceSelection.objects.filter(
+                boot_source=boot_source, os=os).exclude(
+                release__in=releases).delete()
+
+            if len(releases) > 0:
+                # Create or update the selections.
+                for release in releases:
+                    selection, _ = BootSourceSelection.objects.get_or_create(
+                        boot_source=boot_source, os=os, release=release)
+                    selection.arches = arches
+                    selection.subarches = ["*"]
+                    selection.labels = ["*"]
+                    selection.save()
+            else:
+                # Create a selection that will cause nothing to be downloaded,
+                # since no releases are selected.
                 selection, _ = BootSourceSelection.objects.get_or_create(
-                    boot_source=boot_source, os=os, release=release)
+                    boot_source=boot_source, os=os, release="")
                 selection.arches = arches
                 selection.subarches = ["*"]
                 selection.labels = ["*"]
                 selection.save()
-        else:
-            # Create a selection that will cause nothing to be downloaded,
-            # since no releases are selected.
-            selection, _ = BootSourceSelection.objects.get_or_create(
-                boot_source=boot_source, os=os, release="")
-            selection.arches = arches
-            selection.subarches = ["*"]
-            selection.labels = ["*"]
-            selection.save()
-
-        # Start the import process, now that the selections have changed.
-        import_resources()
-        return self.poll({})
-
+
+        notify = Deferred()
+        d = deferToDatabase(update_source, params)
+        d.addCallback(callOut, import_resources, notify=notify)
+        d.addCallback(lambda _: notify)
+        d.addCallback(lambda _: deferToDatabase(transactional(self.poll), {}))
+        d.addErrback(
+            log.err,
+            "Failed to start the image import. Unable to save the Ubuntu "
+            "image(s) source information.")
+        return d
+
+    @asynchronous(timeout=FOREVER)
     def save_other(self, params):
         """Update `BootSourceSelection`'s to only include the selected
         images."""
         # Must be administrator.
         assert self.user.is_superuser, "Permission denied."
-        # Remove all selections that are not Ubuntu.
-        BootSourceSelection.objects.exclude(os='ubuntu').delete()
-
-        # Break down the images into os/release with multiple arches.
-        selections = defaultdict(list)
-        for image in params['images']:
-            os, arch, _, release = image.split('/', 4)
-            name = '%s/%s' % (os, release)
-            selections[name].append(arch)
-
-        # Create each selection for the source.
-        for name, arches in selections.items():
-            os, release = name.split('/')
-            cache = BootSourceCache.objects.filter(
-                os=os, arch=arch, release=release).first()
-            if cache is None:
-                # It is possible the cache changed while waiting for the user
-                # to perform an action. Ignore the selection as its no longer
-                # available.
-                continue
-            # Create the selection for the source.
-            BootSourceSelection.objects.create(
-                boot_source=cache.boot_source,
-                os=os, release=release,
-                arches=arches, subarches=["*"], labels=["*"])
-
-        # Start the import process, now that the selections have changed.
-        import_resources()
-        return self.poll({})
+
+        @transactional
+        def update_selections(params):
+            # Remove all selections that are not Ubuntu.
+            BootSourceSelection.objects.exclude(os='ubuntu').delete()
+
+            # Break down the images into os/release with multiple arches.
+            selections = defaultdict(list)
+            for image in params['images']:
+                os, arch, _, release = image.split('/', 4)
+                name = '%s/%s' % (os, release)
+                selections[name].append(arch)
+
+            # Create each selection for the source.
+            for name, arches in selections.items():
+                os, release = name.split('/')
+                cache = BootSourceCache.objects.filter(
+                    os=os, arch=arch, release=release).first()
+                if cache is None:
+                    # It is possible the cache changed while waiting for the
+                    # user to perform an action. Ignore the selection as its
+                    # no longer available.
+                    continue
+                # Create the selection for the source.
+                BootSourceSelection.objects.create(
+                    boot_source=cache.boot_source,
+                    os=os, release=release,
+                    arches=arches, subarches=["*"], labels=["*"])
+
+        notify = Deferred()
+        d = deferToDatabase(update_selections, params)
+        d.addCallback(callOut, import_resources, notify=notify)
+        d.addCallback(lambda _: notify)
+        d.addCallback(lambda _: deferToDatabase(transactional(self.poll), {}))
+        d.addErrback(
+            log.err,
+            "Failed to start the image import. Unable to save the non-Ubuntu "
+            "image(s) source information")
+        return d
 
     def fetch(self, params):
         """Fetch the releases and the arches from the provided source."""
         # Must be administrator.
         assert self.user.is_superuser, "Permission denied."
         # Build a source, but its not saved into the database.
-        source = BootSource(
-            url=params['url'],
-            keyring_filename=params.get('keyring_filename', ''),
-            keyring_data=params.get('keyring_data', '').encode('utf-8'),
-        ).to_dict_without_selections()
+        source = self.get_bootsource(
+            params, from_db=False).to_dict_without_selections()
+
         # FIXME: This modifies the environment of the entire process, which is
         # Not Cool. We should integrate with simplestreams in a more
         # Pythonic manner.

=== modified file 'src/maasserver/websockets/handlers/tests/test_bootresource.py'
--- src/maasserver/websockets/handlers/tests/test_bootresource.py	2016-09-01 20:45:56 +0000
+++ src/maasserver/websockets/handlers/tests/test_bootresource.py	2016-09-14 21:01:21 +0000
@@ -21,7 +21,10 @@
 )
 from maasserver.models.signals import bootsources
 from maasserver.testing.factory import factory
-from maasserver.testing.testcase import MAASServerTestCase
+from maasserver.testing.testcase import (
+    MAASServerTestCase,
+    MAASTransactionServerTestCase,
+)
 from maasserver.utils.converters import human_readable_bytes
 from maasserver.utils.orm import (
     get_one,
@@ -50,6 +53,7 @@
     ContainsAll,
     HasLength,
 )
+from twisted.internet import reactor
 
 
 class PatchOSInfoMixin:
@@ -74,6 +78,25 @@
         self.addCleanup(bootsources.signals.enable)
         bootsources.signals.disable()
 
+    def make_other_resource(self, os=None, arch=None, subarch=None,
+                            release=None):
+        if os is None:
+            os = factory.make_name('os')
+        if arch is None:
+            arch = factory.make_name('arch')
+        if subarch is None:
+            subarch = factory.make_name('subarch')
+        if release is None:
+            release = factory.make_name('release')
+        name = '%s/%s' % (os, release)
+        architecture = '%s/%s' % (arch, subarch)
+        resource = factory.make_BootResource(
+            rtype=BOOT_RESOURCE_TYPE.SYNCED,
+            name=name, architecture=architecture)
+        resource_set = factory.make_BootResourceSet(resource)
+        factory.make_boot_resource_file_with_content(resource_set)
+        return resource
+
     def test__returns_connection_error_True(self):
         owner = factory.make_admin()
         handler = BootResourceHandler(owner, {})
@@ -237,7 +260,7 @@
             json_resource,
             ContainsAll([
                 'id', 'rtype', 'name', 'title', 'arch', 'size',
-                'complete', 'status', 'downloading',
+                'complete', 'status', 'icon', 'downloading',
                 'numberOfNodes', 'lastUpdate']))
 
     def test_returns_ubuntu_release_version_name(self):
@@ -431,6 +454,7 @@
         json_obj = json.loads(response)
         json_resource = json_obj['resources'][0]
         self.assertEqual("Downloading  50%", json_resource['status'])
+        self.assertEqual("in-progress", json_resource['icon'])
 
     def test_combined_subarch_resource_shows_queued_if_no_progress(self):
         owner = factory.make_admin()
@@ -449,6 +473,7 @@
         json_obj = json.loads(response)
         json_resource = json_obj['resources'][0]
         self.assertEqual("Queued for download", json_resource['status'])
+        self.assertEqual("queued", json_resource['icon'])
 
     def test_combined_subarch_resource_shows_complete_status(self):
         owner = factory.make_admin()
@@ -468,7 +493,8 @@
         response = handler.poll({})
         json_obj = json.loads(response)
         json_resource = json_obj['resources'][0]
-        self.assertEqual("Complete", json_resource['status'])
+        self.assertEqual("Synced", json_resource['status'])
+        self.assertEqual("succeeded", json_resource['icon'])
 
     def test_combined_subarch_resource_shows_waiting_for_cluster_to_sync(self):
         owner = factory.make_admin()
@@ -488,6 +514,7 @@
         json_resource = json_obj['resources'][0]
         self.assertEqual(
             "Waiting for rack controller(s) to sync", json_resource['status'])
+        self.assertEqual("waiting", json_resource['icon'])
 
     def test_combined_subarch_resource_shows_clusters_syncing(self):
         owner = factory.make_admin()
@@ -509,9 +536,42 @@
         json_resource = json_obj['resources'][0]
         self.assertEqual(
             "Syncing to rack controller(s)", json_resource['status'])
-
-
-class TestBootResourceSaveUbuntu(MAASServerTestCase, PatchOSInfoMixin):
+        self.assertEqual("in-progress", json_resource['icon'])
+
+    def test_other_images_returns_images_from_cache(self):
+        owner = factory.make_admin()
+        handler = BootResourceHandler(owner, {})
+        cache = factory.make_BootSourceCache()
+        response = handler.poll({})
+        json_obj = json.loads(response)
+        other_images = json_obj['other_images']
+        self.assertEquals([{
+            'name': '%s/%s/%s/%s' % (
+                cache.os, cache.arch, cache.subarch, cache.release),
+            'title': '%s/%s' % (cache.os, cache.release),
+            'checked': False,
+        }], other_images)
+
+    def test_other_images_returns_image_checked_when_synced(self):
+        owner = factory.make_admin()
+        handler = BootResourceHandler(owner, {})
+        cache = factory.make_BootSourceCache()
+        self.make_other_resource(
+            os=cache.os, arch=cache.arch,
+            subarch=cache.subarch, release=cache.release)
+        response = handler.poll({})
+        json_obj = json.loads(response)
+        other_images = json_obj['other_images']
+        self.assertEquals([{
+            'name': '%s/%s/%s/%s' % (
+                cache.os, cache.arch, cache.subarch, cache.release),
+            'title': '%s/%s' % (cache.os, cache.release),
+            'checked': True,
+        }], other_images)
+
+
+class TestBootResourceSaveUbuntu(
+        MAASTransactionServerTestCase, PatchOSInfoMixin):
 
     def setUp(self):
         super(TestBootResourceSaveUbuntu, self).setUp()
@@ -519,6 +579,12 @@
         self.addCleanup(bootsources.signals.enable)
         bootsources.signals.disable()
 
+    def patch_import_resources(self):
+        mock_import = self.patch(bootresource, 'import_resources')
+        mock_import.side_effect = (
+            lambda notify: reactor.callLater(0, notify.callback, None))
+        return mock_import
+
     def test_asserts_is_admin(self):
         owner = factory.make_User()
         handler = BootResourceHandler(owner, {})
@@ -529,17 +595,19 @@
         handler = BootResourceHandler(owner, {})
         sources = [factory.make_BootSource()]
         self.patch_get_os_info_from_boot_sources(sources)
-        mock_import = self.patch(bootresource, 'import_resources')
-        handler.save_ubuntu({'releases': [], 'arches': []})
-        self.assertThat(mock_import, MockCalledOnceWith())
+        mock_import = self.patch_import_resources()
+        handler.save_ubuntu(
+            {'url': sources[0].url, 'releases': [], 'arches': []})
+        self.assertThat(mock_import, MockCalledOnceWith(notify=ANY))
 
     def test_sets_empty_selections(self):
         owner = factory.make_admin()
         handler = BootResourceHandler(owner, {})
         source = factory.make_BootSource()
         self.patch_get_os_info_from_boot_sources([source])
-        self.patch(bootresource, 'import_resources')
-        handler.save_ubuntu({'releases': [], 'arches': []})
+        self.patch_import_resources()
+        handler.save_ubuntu(
+            {'url': source.url, 'releases': [], 'arches': []})
 
         selections = BootSourceSelection.objects.filter(boot_source=source)
         self.assertThat(selections, HasLength(1))
@@ -555,8 +623,9 @@
         source = factory.make_BootSource()
         releases = [factory.make_name('release') for _ in range(3)]
         self.patch_get_os_info_from_boot_sources([source])
-        self.patch(bootresource, 'import_resources')
-        handler.save_ubuntu({'releases': releases, 'arches': []})
+        self.patch_import_resources()
+        handler.save_ubuntu(
+            {'url': source.url, 'releases': releases, 'arches': []})
 
         selections = BootSourceSelection.objects.filter(boot_source=source)
         self.assertThat(selections, HasLength(len(releases)))
@@ -571,8 +640,9 @@
         releases = [factory.make_name('release') for _ in range(3)]
         arches = [factory.make_name('arches') for _ in range(3)]
         self.patch_get_os_info_from_boot_sources([source])
-        self.patch(bootresource, 'import_resources')
-        handler.save_ubuntu({'releases': releases, 'arches': arches})
+        self.patch_import_resources()
+        handler.save_ubuntu(
+            {'url': source.url, 'releases': releases, 'arches': arches})
 
         selections = BootSourceSelection.objects.filter(boot_source=source)
         self.assertThat(selections, HasLength(len(releases)))
@@ -591,13 +661,14 @@
         keep_selection = BootSourceSelection.objects.create(
             boot_source=source, os='ubuntu', release=release)
         self.patch_get_os_info_from_boot_sources([source])
-        self.patch(bootresource, 'import_resources')
-        handler.save_ubuntu({'releases': [release], 'arches': []})
+        self.patch_import_resources()
+        handler.save_ubuntu(
+            {'url': source.url, 'releases': [release], 'arches': []})
         self.assertIsNone(reload_object(delete_selection))
         self.assertIsNotNone(reload_object(keep_selection))
 
 
-class TestBootResourceSaveOther(MAASServerTestCase):
+class TestBootResourceSaveOther(MAASTransactionServerTestCase):
 
     def setUp(self):
         super(TestBootResourceSaveOther, self).setUp()
@@ -624,6 +695,12 @@
         factory.make_boot_resource_file_with_content(resource_set)
         return resource
 
+    def patch_import_resources(self):
+        mock_import = self.patch(bootresource, 'import_resources')
+        mock_import.side_effect = (
+            lambda notify: reactor.callLater(0, notify.callback, None))
+        return mock_import
+
     def test_asserts_is_admin(self):
         owner = factory.make_User()
         handler = BootResourceHandler(owner, {})
@@ -637,7 +714,7 @@
             boot_source=source, os='ubuntu')
         other_selection = BootSourceSelection.objects.create(
             boot_source=source, os=factory.make_name('os'))
-        self.patch(bootresource, 'import_resources')
+        self.patch_import_resources()
         handler.save_other({'images': []})
         self.assertIsNotNone(reload_object(ubuntu_selection))
         self.assertIsNone(reload_object(other_selection))
@@ -654,7 +731,7 @@
             factory.make_BootSourceCache(
                 boot_source=source, os=os, release=release, arch=arch)
             images.append('%s/%s/subarch/%s' % (os, arch, release))
-        self.patch(bootresource, 'import_resources')
+        self.patch_import_resources()
         handler.save_other({'images': images})
 
         selection = get_one(BootSourceSelection.objects.filter(
@@ -665,9 +742,9 @@
     def test_calls_import_resources(self):
         owner = factory.make_admin()
         handler = BootResourceHandler(owner, {})
-        mock_import = self.patch(bootresource, 'import_resources')
+        mock_import = self.patch_import_resources()
         handler.save_other({'images': []})
-        self.assertThat(mock_import, MockCalledOnceWith())
+        self.assertThat(mock_import, MockCalledOnceWith(notify=ANY))
 
 
 class TestBootResourceFetch(MAASServerTestCase):