Merge lp:~blake-rouse/maas/fix-cache-clusters-images into lp:~maas-committers/maas/trunk

[Blake Rouse]

Convert the controllers image status to a directive to allow it to be used across MAAS. Add ?v={version} to templateUrl in routes to prevent caching on newer versions.

[Jeffrey C Jones (trapnine)]

Nice, now the status can be plopped anywhere. A few minor comments below.

review: Approve

[Gavin Panella (allenap)]

So much code for such a little thing! Still, at least it's bottled now.

There are a few hundred lines of diff for something that, at first glance, appears unrelated, so Needs Information for that alone.

review: Needs Information

[Blake Rouse (blake-rouse)]

> So much code for such a little thing! Still, at least it's bottled now.

Thats javascript! ;-)

> There are a few hundred lines of diff for something that, at first glance, appears unrelated, so
> Needs Information for that alone.

That addresses the bug linked to this branch. That bug shows that he was viewing a 1.9 UI with 2.0 javascript. The issue is that the partial views are being cached and the cache is not being broken with the ?v={version} on the file path.

In the process of fixing that bug I ran into an issue where the controllers listing was causing the regiond to crash. I fixed that, but by the time I was done trapnine landed image statuses on the details page as well. So I had to fix both, what was a very simple fix became large to do it correctly.

[Gavin Panella (allenap)]

Cool, thanks for the reply. Looks like Jeff went through it fairly closely, so +1.

review: Approve

[MAAS Lander (maas-lander)]

The attempt to merge lp:~blake-rouse/maas/fix-cache-clusters-images 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
Get:2 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-updates InRelease [94.5 kB]
Get:3 http://security.ubuntu.com/ubuntu xenial-security InRelease [94.5 kB]
Hit:4 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease
Fetched 189 kB in 0s (425 kB/s)
Reading package lists...
sudo DEBIAN_FRONTEND=noninteractive apt-get -y \
    --no-install-recommends install apache2 archdetect-deb authbind 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 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-bson python3-convoy python3-coverage 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...
apache2 is already the newest version (2.4.18-2ubuntu3).
archdetect-deb is already the newest version (1.117ubuntu2).
authbind is already the newest version (2.1.1+nmu1).
bash is already the newest version (4.3-14ubuntu1).
build-essential is already the newest version (12.1ubuntu2).
bzr is already the newest version (2.7.0-2ubuntu1).
curl is already the newest version (7.47.0-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).
isc-dhcp-common is already the newest version (4.3.3-5ubuntu12).
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...

=== modified file 'src/maasserver/static/js/angular/controllers/node_details.js'
--- src/maasserver/static/js/angular/controllers/node_details.js	2016-05-21 03:24:08 +0000
+++ src/maasserver/static/js/angular/controllers/node_details.js	2016-05-25 20:28:15 +0000
@@ -185,8 +185,10 @@
                 return;
             }
 
-            $scope.summary.zone.selected = ZonesManager.getItemFromList(
-                $scope.node.zone.id);
+            if(angular.isObject($scope.node.zone)) {
+                $scope.summary.zone.selected = ZonesManager.getItemFromList(
+                    $scope.node.zone.id);
+            }
             $scope.summary.architecture.selected = $scope.node.architecture;
             $scope.summary.min_hwe_kernel.selected = $scope.node.min_hwe_kernel;
             $scope.summary.tags = angular.copy($scope.node.tags);
@@ -335,23 +337,6 @@
             });
         }
 
-        function getControllersImageSyncStatus() {
-            if(angular.isObject($scope.node)) {
-                $scope.nodesManager.checkImageStates(
-                        [{system_id: $scope.node.system_id}]).then(
-                    function(results) {
-                        // Results is a map of system_id to displayable status.
-                        if(results[$scope.node.system_id]) {
-                            $scope.node.image_sync_status =
-                                results[$scope.node.system_id];
-                        } else {
-                            $scope.node.image_sync_status = "Unknown";
-                        }
-                    }
-                );
-            }
-        }
-
         // Starts the watchers on the scope.
         function startWatching() {
             // Update the title and name when the node fqdn changes.
@@ -398,13 +383,6 @@
             $scope.$watch("node.summary_yaml", updateMachineOutput);
             $scope.$watch("node.commissioning_results", updateMachineOutput);
             $scope.$watch("node.installation_results", updateMachineOutput);
-
-            if($scope.isController) {
-                getControllersImageSyncStatus();
-                $scope.imageStatusPoll = $interval(function() {
-                    getControllersImageSyncStatus();
-                }, 10000);
-            }
         }
 
         // Called when the node has been loaded.
@@ -867,7 +845,8 @@
         };
 
         $scope.getPowerEventError = function() {
-            if(!angular.isObject($scope.node)) {
+            if(!angular.isObject($scope.node) ||
+                !angular.isArray($scope.node.events)) {
                 return;
             }
 

=== modified file 'src/maasserver/static/js/angular/controllers/node_details_storage.js'
--- src/maasserver/static/js/angular/controllers/node_details_storage.js	2016-03-28 13:54:47 +0000
+++ src/maasserver/static/js/angular/controllers/node_details_storage.js	2016-05-25 20:28:15 +0000
@@ -2000,7 +2000,8 @@
 
         // Returns true if there are storage layout errors
         $scope.hasStorageLayoutIssues = function() {
-            if(angular.isObject($scope.node)) {
+            if(angular.isObject($scope.node) &&
+                angular.isArray($scope.node.storage_layout_issues)) {
                 return $scope.node.storage_layout_issues.length > 0;
             }
             return false;

=== modified file 'src/maasserver/static/js/angular/controllers/nodes_list.js'
--- src/maasserver/static/js/angular/controllers/nodes_list.js	2016-05-21 03:24:08 +0000
+++ src/maasserver/static/js/angular/controllers/nodes_list.js	2016-05-25 20:28:15 +0000
@@ -124,6 +124,7 @@
             errors: {}
         };
         $scope.tabs.controllers.zoneSelection = null;
+        $scope.tabs.controllers.syncStatuses = {};
 
         // Options for add hardware dropdown.
         $scope.addHardwareOption = null;
@@ -570,21 +571,6 @@
             return DEVICE_IP_ASSIGNMENT[ipAssignment];
         };
 
-        $scope.getControllersImageSyncStatus = function() {
-            ControllersManager.checkImageStates($scope.controllers).then(
-                    function(results) {
-                angular.forEach($scope.controllers, function(controller) {
-                    // Results is a map of system_id to displayable status.
-                    if(results[controller.system_id]) {
-                        controller.image_sync_status =
-                            results[controller.system_id];
-                    } else {
-                        controller.image_sync_status = "Unknown";
-                    }
-                });
-            });
-        };
-
         // Return true if the authenticated user is super user.
         $scope.isSuperUser = function() {
             return UsersManager.isSuperUser();
@@ -597,14 +583,6 @@
             [MachinesManager, DevicesManager, ControllersManager,
             GeneralManager, ZonesManager, UsersManager, ServicesManager]).then(
             function() {
-
-                if($routeParams.tab === "controllers") {
-                    $scope.getControllersImageSyncStatus();
-                    $scope.statusPoll = $interval(function() {
-                        $scope.getControllersImageSyncStatus();
-                    }, 10000);
-                }
-
                 $scope.loading = false;
             });
 

=== added file 'src/maasserver/static/js/angular/directives/controller_image_status.js'
--- src/maasserver/static/js/angular/directives/controller_image_status.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/controller_image_status.js	2016-05-25 20:28:15 +0000
@@ -0,0 +1,156 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Controller image status directive.
+ *
+ * Shows the image status for a controller.
+ */
+
+ angular.module('MAAS').service('ControllerImageStatusService',
+    ['$timeout', '$interval', 'ControllersManager', function(
+        $timeout, $interval, ControllersManager) {
+     var self = this;
+
+     // List of controllers that need to have the image status updated.
+     this.controllers = [];
+
+     // List of current controller statues.
+     this.statuses = {};
+
+     // Interval function that is called to update the statuses.
+     this.updateStatuses = function() {
+         var controllerIds = [];
+         angular.forEach(self.controllers, function(system_id) {
+             controllerIds.push({system_id: system_id});
+         });
+
+         // Check the image states.
+         ControllersManager.checkImageStates(controllerIds).then(
+                 function(results) {
+             angular.forEach(controllerIds, function(controller) {
+                 var status = results[controller.system_id];
+                 if(status) {
+                     self.statuses[controller.system_id] = status;
+                 } else {
+                     self.statuses[controller.system_id] = "Unknown";
+                 }
+             });
+         });
+     };
+
+     // Register this controller system_id.
+     this.register = function(system_id) {
+         var known = self.controllers.indexOf(system_id) >= 0;
+         if(!known) {
+             self.controllers.push(system_id);
+         }
+
+         // When the interval is already running and its a new controller then
+         // the interval needs to be reset. When it already exists it doesn't
+         // need to be reset.
+         if(angular.isDefined(self.runningInterval)) {
+             if(known) {
+                 return;
+             } else {
+                 $interval.cancel(self.runningInterval);
+                 self.runningInterval = undefined;
+             }
+         }
+
+         // If its not running and the timeout has been started we re-create
+         // the timeout. This delays the start of the interval until the
+         // all directives on the page have been fully loaded.
+         if(angular.isDefined(self.startTimeout)) {
+             $timeout.cancel(self.startTimeout);
+         }
+         self.startTimeout = $timeout(function() {
+             self.startTimeout = undefined;
+             self.runningInterval = $interval(function() {
+                 self.updateStatuses();
+             }, 10 * 1000);
+             self.updateStatuses();
+         }, 100);
+     };
+
+     // Unregister the controller.
+     this.unregister = function(system_id) {
+        var idx = self.controllers.indexOf(system_id);
+        if(idx > -1) {
+            self.controllers.splice(idx, 1);
+        }
+
+        // If no controllers are left stop all intervals and timeouts.
+        if(self.controllers.length === 0) {
+            if(angular.isDefined(self.startTimeout)) {
+                $timeout.cancel(self.startTimeout);
+                self.startTimeout = undefined;
+            }
+            if(angular.isDefined(self.runningInterval)) {
+                $interval.cancel(self.runningInterval);
+                self.runningInterval = undefined;
+            }
+        }
+     };
+
+     // Return true if the spinner should be shown.
+     this.showSpinner = function(system_id) {
+         var status = self.statuses[system_id];
+         if(angular.isString(status) && status !== "Syncing") {
+             return false;
+         } else {
+             return true;
+         }
+     };
+
+     // Get the image status.
+     this.getImageStatus = function(system_id) {
+         var status = self.statuses[system_id];
+         if(angular.isString(status)) {
+             return status;
+         } else {
+             return "Asking for status...";
+         }
+     };
+}]);
+
+angular.module('MAAS').directive('maasControllerImageStatus',
+    ['ControllerImageStatusService', function(
+        ControllerImageStatusService) {
+
+    return {
+        restrict: "E",
+        scope: {
+            systemId: "="
+        },
+        template: [
+            '<i class="icon loading" data-ng-if="showSpinner()"></i> ',
+            '{$ getImageStatus() $}'].join(''),
+        link: function(scope, element, attrs) {
+            // Don't register until the systemId is set.
+            var unwatch, registered = false;
+            unwatch = scope.$watch("systemId", function() {
+                if(angular.isDefined(scope.systemId) && !registered) {
+                    ControllerImageStatusService.register(scope.systemId);
+                    registered = true;
+                    unwatch();
+                }
+            });
+
+            scope.showSpinner = function() {
+                return ControllerImageStatusService.showSpinner(
+                    scope.systemId);
+            };
+            scope.getImageStatus = function() {
+                return ControllerImageStatusService.getImageStatus(
+                    scope.systemId);
+            };
+
+            // Unregister when destroyed.
+            scope.$on("$destroy", function() {
+                if(registered) {
+                    ControllerImageStatusService.unregister(scope.systemId);
+                }
+            });
+        }
+    };
+}]);

=== added file 'src/maasserver/static/js/angular/directives/tests/test_controller_image_status.js'
--- src/maasserver/static/js/angular/directives/tests/test_controller_image_status.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_controller_image_status.js	2016-05-25 20:28:15 +0000
@@ -0,0 +1,240 @@
+/* Copyright 2016 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for controller image status directive.
+ */
+
+describe("maasControllerImageStatus", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Get the manager and the directive service.
+    var $timeout, $interval, $q;
+    var ControllersManager, ControllerImageStatusService;
+    beforeEach(inject(function($injector) {
+        $timeout = $injector.get("$timeout");
+        $interval = $injector.get("$interval");
+        $q = $injector.get("$q");
+        ControllersManager = $injector.get("ControllersManager");
+        ControllerImageStatusService = $injector.get(
+            "ControllerImageStatusService");
+    }));
+
+    // Create a new scope before each test.
+    var $scope;
+    beforeEach(inject(function($rootScope) {
+        $scope = $rootScope.$new();
+    }));
+
+    // Return the compiled directive with the osinfo from the scope.
+    function compileDirective() {
+        var directive;
+        var html = [
+            '<div>',
+                '<maas-controller-image-status system-id="system_id">',
+                '</maas-controller-image-status>',
+            '</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-controller-image-status");
+    }
+
+    describe("service", function() {
+
+        var service;
+        beforeEach(function() {
+            service = ControllerImageStatusService;
+        });
+
+        describe("updateStatuses", function() {
+            it("calls checkImageStates with controllers", function() {
+                service.controllers = [
+                    makeName("systemId"), makeName("systemId")];
+                spyOn(ControllersManager, "checkImageStates").and.returnValue(
+                    $q.defer().promise);
+                service.updateStatuses();
+
+                expect(
+                    ControllersManager.checkImageStates).toHaveBeenCalledWith([
+                        { system_id: service.controllers[0] },
+                        { system_id: service.controllers[1] }
+                    ]);
+            });
+
+            it("sets statuses with result", function() {
+                var defer = $q.defer();
+                service.controllers = [
+                    makeName("systemId"),
+                    makeName("systemId"),
+                    makeName("systemId")];
+                spyOn(ControllersManager, "checkImageStates").and.returnValue(
+                    defer.promise);
+                service.updateStatuses();
+
+                var results = {};
+                results[service.controllers[0]] = makeName("status");
+                results[service.controllers[1]] = makeName("status");
+                defer.resolve(results);
+                $scope.$digest();
+
+                var statues = {};
+                statues[service.controllers[0]] = (
+                    results[service.controllers[0]]);
+                statues[service.controllers[1]] = (
+                    results[service.controllers[1]]);
+                statues[service.controllers[2]] = "Unknown";
+                expect(service.statuses).toEqual(statues);
+            });
+        });
+
+        describe("register", function() {
+            it("added to controllers and starts timer", function() {
+                var systemId = makeName("systemId");
+                service.register(systemId);
+
+                expect(service.controllers).toEqual([systemId]);
+                expect(service.startTimeout).toBeDefined();
+                $timeout.cancel(service.startTimeout);
+            });
+
+            it("added multiple and restarts timer", function() {
+                var systemId1 = makeName("systemId");
+                var systemId2 = makeName("systemId");
+
+                service.register(systemId1);
+                var firstTimeout = service.startTimeout;
+
+                service.register(systemId2);
+                var secondTimeout = service.startTimeout;
+
+                expect(firstTimeout).not.toBe(secondTimeout);
+                expect(secondTimeout).toBeDefined();
+                $timeout.cancel(secondTimeout);
+            });
+
+            it("starts interval after 100ms", function() {
+                var systemId = makeName("systemId");
+                spyOn(service, "updateStatuses");
+
+                service.register(systemId);
+                $timeout.flush(100);
+
+                expect(service.runningInterval).toBeDefined();
+            });
+
+            it("cancels running interval on new controller", function() {
+                var systemId = makeName("systemId");
+
+                var interval = service.runningInterval = {};
+                spyOn($interval, "cancel");
+
+                service.register(systemId);
+                expect($interval.cancel).toHaveBeenCalledWith(interval);
+                expect(service.runningInterval).not.toBeDefined();
+                expect(service.controllers).toEqual([systemId]);
+                expect(service.startTimeout).toBeDefined();
+                $timeout.cancel(service.startTimeout);
+            });
+        });
+
+        describe("unregister", function() {
+            it("removes controller", function() {
+                var systemId = makeName("systemId");
+                service.controllers.push(systemId);
+                service.unregister(systemId);
+
+                expect(service.controllers.length).toBe(0);
+            });
+
+            it("stops timeout and interval", function() {
+                var systemId = makeName("systemId");
+                service.controllers.push(systemId);
+
+                var startTimeout = service.startTimeout = {};
+                var runningInterval = service.runningInterval = {};
+                spyOn($timeout, "cancel");
+                spyOn($interval, "cancel");
+
+                service.unregister(systemId);
+                expect($timeout.cancel).toHaveBeenCalledWith(startTimeout);
+                expect(service.startTimeout).not.toBeDefined();
+                expect($interval.cancel).toHaveBeenCalledWith(runningInterval);
+                expect(service.runningInterval).not.toBeDefined();
+            });
+        });
+
+        describe("showSpinner", function() {
+            it("returns false if set and not syncing", function() {
+                var systemId = makeName("systemId");
+                var status = "out-of-sync";
+                service.statuses[systemId] = status;
+                expect(service.showSpinner(systemId)).toBe(false);
+            });
+
+            it("returns true if not set", function() {
+                var systemId = makeName("systemId");
+                expect(service.showSpinner(systemId)).toBe(true);
+            });
+
+            it("returns true if set and syncing", function() {
+                var systemId = makeName("systemId");
+                var status = "Syncing";
+                service.statuses[systemId] = status;
+                expect(service.showSpinner(systemId)).toBe(true);
+            });
+        });
+
+        describe("getImageStatus", function() {
+            it("returns status if set", function() {
+                var systemId = makeName("systemId");
+                var status = "out-of-sync";
+                service.statuses[systemId] = status;
+                expect(service.getImageStatus(systemId)).toBe(status);
+            });
+
+            it("returns asking", function() {
+                var systemId = makeName("systemId");
+                expect(service.getImageStatus(systemId)).toBe(
+                    "Asking for status...");
+            });
+        });
+    });
+
+    describe("directive", function() {
+        it("registers when systemId is set", function() {
+            spyOn(ControllerImageStatusService, "register");
+            var directive = compileDirective();
+
+            // Should only be called once system_id is set.
+            expect(
+                ControllerImageStatusService.register).not.toHaveBeenCalled();
+            $scope.system_id = makeName("systemId");
+            $scope.$digest();
+            expect(ControllerImageStatusService.register).toHaveBeenCalledWith(
+                $scope.system_id);
+        });
+
+        it("unregisters when destroyed", function() {
+            spyOn(ControllerImageStatusService, "register");
+            spyOn(ControllerImageStatusService, "unregister");
+            var directive = compileDirective();
+
+            $scope.system_id = makeName("systemId");
+            $scope.$digest();
+            expect(ControllerImageStatusService.register).toHaveBeenCalledWith(
+                $scope.system_id);
+
+            directive.scope().$destroy();
+            expect(
+                ControllerImageStatusService.unregister).toHaveBeenCalledWith(
+                    $scope.system_id);
+        });
+    });
+});

=== modified file 'src/maasserver/static/js/angular/directives/tests/test_version_reloader.js'
--- src/maasserver/static/js/angular/directives/tests/test_version_reloader.js	2015-10-21 19:48:04 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_version_reloader.js	2016-05-25 20:28:15 +0000
@@ -35,6 +35,11 @@
         $scope = $rootScope.$new();
     }));
 
+    // Prevent console.log messages in tests.
+    beforeEach(function() {
+        spyOn(console, "log");
+    });
+
     // Return the compiled directive with the items from the scope.
     function compileDirective() {
         var directive;

=== modified file 'src/maasserver/static/js/angular/directives/version_reloader.js'
--- src/maasserver/static/js/angular/directives/version_reloader.js	2015-10-21 19:48:04 +0000
+++ src/maasserver/static/js/angular/directives/version_reloader.js	2016-05-25 20:28:15 +0000
@@ -27,6 +27,9 @@
                         GeneralManager.enableAutoReload(true);
                         $scope.$watch("version.text",
                             function(newValue, oldValue) {
+                                console.log(
+                                    "Detected new MAAS version; " +
+                                    "forcing reload.");
                                 if(newValue !== oldValue) {
                                     $scope.reloadPage();
                                 }

=== modified file 'src/maasserver/static/js/angular/maas.js'
--- src/maasserver/static/js/angular/maas.js	2016-04-11 16:23:26 +0000
+++ src/maasserver/static/js/angular/maas.js	2016-05-25 20:28:15 +0000
@@ -13,6 +13,12 @@
         $interpolateProvider.startSymbol('{$');
         $interpolateProvider.endSymbol('$}');
 
+        // Helper that wrappers the templateUrl to append the files version
+        // to the path. Used to override client cache.
+        function versionedPath(path) {
+            return path + "?v=" + MAAS_config.files_version;
+        }
+
         // Setup routes only for the index page, all remaining pages should
         // not use routes. Once all pages are converted to using Angular this
         // will go away. Causing the page to never have to reload.
@@ -24,60 +30,73 @@
         if(path === href) {
             $routeProvider.
                 when('/nodes', {
-                    templateUrl: 'static/partials/nodes-list.html',
+                    templateUrl: versionedPath(
+                        'static/partials/nodes-list.html'),
                     controller: 'NodesListController'
                 }).
                 when('/node/:system_id/result/:filename', {
-                    templateUrl: 'static/partials/node-result.html',
+                    templateUrl: versionedPath(
+                        'static/partials/node-result.html'),
                     controller: 'NodeResultController'
                 }).
                 when('/node/:system_id/events', {
-                    templateUrl: 'static/partials/node-events.html',
+                    templateUrl: versionedPath(
+                        'static/partials/node-events.html'),
                     controller: 'NodeEventsController'
                 }).
                 when('/node/:type/:system_id', {
-                    templateUrl: 'static/partials/node-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/node-details.html'),
                     controller: 'NodeDetailsController'
                 }).
                 when('/node/:system_id', {
-                    templateUrl: 'static/partials/node-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/node-details.html'),
                     controller: 'NodeDetailsController'
                 }).
                 when('/domains', {
-                    templateUrl: 'static/partials/domains-list.html',
+                    templateUrl: versionedPath(
+                        'static/partials/domains-list.html'),
                     controller: 'DomainsListController'
                 }).
                 when('/domain/:domain_id', {
-                    templateUrl: 'static/partials/domain-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/domain-details.html'),
                     controller: 'DomainDetailsController'
                 }).
                 when('/space/:space_id', {
-                    templateUrl: 'static/partials/space-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/space-details.html'),
                     controller: 'SpaceDetailsController'
                 }).
                 when('/fabric/:fabric_id', {
-                    templateUrl: 'static/partials/fabric-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/fabric-details.html'),
                     controller: 'FabricDetailsController'
                 }).
                 when('/subnets', {
                     redirectTo: '/networks?by=fabric'
                 }).
                 when('/networks', {
-                    templateUrl: 'static/partials/networks-list.html',
+                    templateUrl: versionedPath(
+                        'static/partials/networks-list.html'),
                     controller: 'NetworksListController',
                     reloadOnSearch: false
                 }).
                 when('/subnet/:subnet_id', {
-                    templateUrl: 'static/partials/subnet-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/subnet-details.html'),
                     controller: 'SubnetDetailsController'
                 }).
                 when('/vlan/:vlan_id', {
-                    templateUrl: 'static/partials/vlan-details.html',
+                    templateUrl: versionedPath(
+                        'static/partials/vlan-details.html'),
                     controller: 'VLANDetailsController',
                     controllerAs: 'vlanDetails'
                 }).
                 when('/settings/:section', {
-                    templateUrl: 'static/partials/settings.html',
+                    templateUrl: versionedPath(
+                        'static/partials/settings.html'),
                     controller: 'SettingsController'
                 }).
                 otherwise({

=== modified file 'src/maasserver/static/partials/node-details.html'
--- src/maasserver/static/partials/node-details.html	2016-05-23 14:38:36 +0000
+++ src/maasserver/static/partials/node-details.html	2016-05-25 20:28:15 +0000
@@ -224,7 +224,7 @@
                                 </dd>
                         </dl>
                     </div>
-                    <div data-ng-show="isController">
+                    <div data-ng-if="isController">
                         <dl>
                             <dt class="two-col">Type</dt>
                                 <dd class="four-col last-col">
@@ -236,7 +236,7 @@
                                 </dd>
                             <dt class="two-col">Images status</dt>
                                 <dd class="four-col last-col">
-                                    {$ node.image_sync_status || 'Checking...' $}
+                                    <maas-controller-image-status system-id="node.system_id"></maas-controller-image-status>
                                 </dd>
                             <dt class="two-col">Zone</dt>
                                 <dd class="four-col last-col">

=== modified file 'src/maasserver/static/partials/nodes-list.html'
--- src/maasserver/static/partials/nodes-list.html	2016-05-20 18:49:43 +0000
+++ src/maasserver/static/partials/nodes-list.html	2016-05-25 20:28:15 +0000
@@ -810,7 +810,9 @@
                     <td class="table-col--4 table-listing__cell align-center" data-maas-controller-status="controller" data-maas-services="services"></td>
                     <td class="table-col--25 table-listing__cell">{$ controller.node_type_display $}</td>
                     <td class="table-col--15 table-listing__cell">{$ controller.last_image_sync || 'Never' $}</td>
-                    <td class="table-col--15 table-listing__cell">{$ controller.image_sync_status || 'Checking...' $}</td>
+                    <td class="table-col--15 table-listing__cell">
+                        <maas-controller-image-status system-id="controller.system_id"></maas-controller-image-status>
+                    </td>
                 </tr>
             </tbody>
         </table>

=== modified file 'src/maasserver/templates/maasserver/js-conf.html'
--- src/maasserver/templates/maasserver/js-conf.html	2015-11-12 16:13:05 +0000
+++ src/maasserver/templates/maasserver/js-conf.html	2016-05-25 20:28:15 +0000
@@ -1,16 +1,3 @@
-<script type="text/javascript"
-    src="{% url "merge" filename="jquery.js" %}?v={{files_version}}">
-</script>
-<script type="text/javascript"
-    src="{% url "merge" filename="angular.js" %}?v={{files_version}}">
-</script>
-<script type="text/javascript"
-    src="{% url "merge" filename="ng-tags-input.js" %}?v={{files_version}}">
-</script>
-<script type="text/javascript"
-    src="{% url "merge" filename="maas-angular.js" %}?v={{files_version}}">
-</script>
-
 <script type="text/javascript">
 <!--
 var YUI_config = {
@@ -30,10 +17,25 @@
         account_handler: '{% url "account_handler" %}',
         images_handler: '{% url "images" %}'
         },
+    files_version: '{{files_version}}',
     debug: {% if YUI_DEBUG %}true{% else %}false{% endif %}
 };
 // -->
 </script>
+
+<script type="text/javascript"
+    src="{% url "merge" filename="jquery.js" %}?v={{files_version}}">
+</script>
+<script type="text/javascript"
+    src="{% url "merge" filename="angular.js" %}?v={{files_version}}">
+</script>
+<script type="text/javascript"
+    src="{% url "merge" filename="ng-tags-input.js" %}?v={{files_version}}">
+</script>
+<script type="text/javascript"
+    src="{% url "merge" filename="maas-angular.js" %}?v={{files_version}}">
+</script>
+
 <script type="text/javascript"
     src="{% url "merge" filename="yui.js" %}?v={{files_version}}">
 </script>

=== modified file 'src/maasserver/views/combo.py'
--- src/maasserver/views/combo.py	2016-05-11 19:01:48 +0000
+++ src/maasserver/views/combo.py	2016-05-25 20:28:15 +0000
@@ -80,6 +80,7 @@
             "js/angular/directives/accordion.js",
             "js/angular/directives/call_to_action.js",
             "js/angular/directives/code_lines.js",
+            "js/angular/directives/controller_image_status.js",
             "js/angular/directives/controller_status.js",
             "js/angular/directives/dbl_click_overlay.js",
             "js/angular/directives/enter_blur.js",

=== modified file 'src/maasserver/websockets/handlers/controller.py'
--- src/maasserver/websockets/handlers/controller.py	2016-04-22 21:25:06 +0000
+++ src/maasserver/websockets/handlers/controller.py	2016-05-25 20:28:15 +0000
@@ -98,5 +98,5 @@
             # We use a RackController method; without the cast, it's a Node.
             node = typecast_to_node_type(node)
             if isinstance(node, RackController):
-                result[node.system_id] = node.get_image_sync_status()
+                result[node.system_id] = node.get_image_sync_status().title()
         return result

=== modified file 'src/maasserver/websockets/handlers/tests/test_controller.py'
--- src/maasserver/websockets/handlers/tests/test_controller.py	2016-05-16 08:36:33 +0000
+++ src/maasserver/websockets/handlers/tests/test_controller.py	2016-05-25 20:28:15 +0000
@@ -82,5 +82,5 @@
             {"system_id": node1.system_id},
             {"system_id": node2.system_id}])
         self.assertEqual({
-            node1.system_id: "unknown",
-            node2.system_id: "unknown"}, data)
+            node1.system_id: "Unknown",
+            node2.system_id: "Unknown"}, data)