Merge lp:~blake-rouse/maas/error-overlay-directive into lp:~maas-committers/maas/trunk

[Blake Rouse]

Add maas-error-overlay and maas-error-toggle directives.

Used to show an error or connecting information to the region controller over the websocket. It overrides ng-view with the error header and message to show the client an error has occurred or that a connection has not been made or has been lost to the region.

The loading spinner that is show next to the title is currently misaligned. A following branch from Rich will fix this issue, as the spinner was never designed to go in this new location.

[Andres Rodriguez (andreserl)]

So, if I understand correctly, when we load the page for the first time we see a blank page when it is trying to connect to the websocket. My questions are, does this happen every single time we reload the page?

Now, do we have screenshots that show how these messages are shown? (I want to know if it is by the design attached on the bug - meaning just a message at the top with a blank page or what?).

Now, I've put a few comments inline but do we really care about the user known that we are connecting to the region? From a user perspective, I could be asking, what does connecting to the region mean? What is it doing?

review: Needs Fixing

[Andres Rodriguez (andreserl)]

If this is just by the designs in the bug, shouldn't we be everything but the node list? I mean, a white page with a message is just not so cool.

And meant for this to be needs information.

review: Needs Information

[Blake Rouse (blake-rouse)]

So this will occur only on the first load of a page with the websocket. Meaning when you load the node listing it will occur. Most of the time the connection is made so fast that it doesn't even show. It will only show if the connection cannot be made, the connection is lost, or a fatal error occurs. Now switching between the node listing to nodes details to node events or other pages that use angular do not reload the page at all. Its the same page just a different view and its the same websocket connection. The end goal would do this for the entire web UI, so the page would only need to be loaded once and the websocket connection would never need to be created again.

You can't show something like failed to load node listing, because this can happen anywhere. Chances are uses will never see this view, but when something happens where the connection has failed it much better to show why then just leave them guessing.

There are three different messages that can be displayed from this directive.

1. Connecting
This occurs when the websocket is trying to connect to the region, and a connection has never been made to the region. This will only occur if the user does not have access to the 5240 port. The url is shown so they know where its trying to connect.

http://people.canonical.com/~blaker/connecting.png

2. Connection to region lost, reconnection...
Occurs when the websocket connection goes down. Normally because the region has crashed or they have lost a route to that host or that port. This will continue to be shown until the connection is remade. The client will keep try over and over again until the connection is made.

http://people.canonical.com/~blaker/connection_lost.png

3. Erro occurred communicating with region
Only occurs when something really wrong has happened and the region did not respond as expected. This is very rare, but is needed to alter the user of a very bad error.

http://people.canonical.com/~blaker/error.png

You will notice that in 1 and 2 the spinner is misaligned, Rich is looking into fixing this for me.

[Raphaël Badin (rvb)]

Now, I think Andres has a point, the terminology "region" is a bit confusing I think. I would just have "Connecting…". This way it will be obvious that it's connecting to the *server*.

Looking at screenshot #2: do you mean that if the connection drops, the entire page becomes white with the "Connection lost…" message? If that's the case, then it's weird… if the network goes down and then comes back up, the page will "flicker" in the most unpleasant way.

review: Needs Information

[Andres Rodriguez (andreserl)]

Also... Displaying that we failed to connect to websocket or showing the
url and stuff like that is just not nice. I dont think the user cares or
not.

For example, in website like Facebook, when there's a problem you get a
message like "sorry, something went wrong try again".

If we display error w to connect to websocket ws://localhost/xyz is just
not nice. I think we should just tell them that *something* went wrong.
On Apr 10, 2015 10:27 AM, "Raphaël Badin" <email address hidden>
wrote:

> Review: Needs Information
>
> Now, I think Andres has a point, the terminology "region" is a bit
> confusing I think. I would just have "Connecting…". This way it will be
> obvious that it's connecting to the *server*.
>
> Looking at screenshot #2: do you mean that if the connection drops, the
> entire page becomes white with the "Connection lost…" message? If that's
> the case, then it's weird… if the network goes down and then comes back up,
> the page will "flicker" in the most unpleasant way.
> --
>
> https://code.launchpad.net/~blake-rouse/maas/error-overlay-directive/+merge/255426
> You are reviewing the proposed merge of
> lp:~blake-rouse/maas/error-overlay-directive into lp:maas.
>

[Blake Rouse (blake-rouse)]

I will update it to "Connecting...", but I think he was talking more specifically about the detailed error message as well.

Yes the entire page changes to that. This is the way design implemented it, I wanted to just do a modal overlay, but they said this works better. Anyway its not that fast, if the connection goes down it will take a moment for it to reconnect. If the connection goes down and back up quickly you will not see the error. I will update the directive to only show if disconnected for more than 1 second.

I will generalize the errors displayed and just log the detailed errors to the browser console.

[Blake Rouse (blake-rouse)]

Okay I have cleaned this up to be how we discussed at the sprint. It is ready to get a final review.

[Raphaël Badin (rvb)]

Looks good. Thanks for the changes.

review: Approve

=== modified file 'src/maasserver/context_processors.py'
--- src/maasserver/context_processors.py	2015-04-09 18:02:51 +0000
+++ src/maasserver/context_processors.py	2015-04-24 19:35:27 +0000
@@ -55,6 +55,8 @@
             'js/angular/services/error.js',
             'js/angular/services/validation.js',
             'js/angular/services/browser.js',
+            'js/angular/directives/error_overlay.js',
+            'js/angular/directives/error_toggle.js',
             'js/angular/directives/call_to_action.js',
             'js/angular/directives/power_parameters.js',
             'js/angular/directives/os_select.js',

=== removed file 'src/maasserver/static/js/angular/controllers/error.js'
--- src/maasserver/static/js/angular/controllers/error.js	2015-03-17 17:57:17 +0000
+++ src/maasserver/static/js/angular/controllers/error.js	1970-01-01 00:00:00 +0000
@@ -1,37 +0,0 @@
-/* Copyright 2015 Canonical Ltd.  This software is licensed under the
- * GNU Affero General Public License version 3 (see the file LICENSE).
- *
- * MAAS Error Controller
- */
-
-angular.module('MAAS').controller('ErrorController', [
-    '$scope', '$rootScope', '$location', 'ErrorService', function($scope,
-        $rootScope, $location, ErrorService) {
-
-        // Set the title and page.
-        $rootScope.title = "Error";
-        $rootScope.page = "";
-
-        // Get the error message and clear it in the service.
-        $scope.error = ErrorService._error;
-        ErrorService._error = null;
-
-        // Get the url to return to when back is clicked.
-        $scope.backUrl = ErrorService._backUrl;
-        ErrorService._backUrl = null;
-
-        // If the error is not a string then the user should not be here.
-        if(!angular.isString($scope.error)) {
-            // Go back to index.
-            $location.path('/');
-        }
-
-        // Go back to previous page.
-        $scope.goBack = function() {
-            if(angular.isString($scope.backUrl)) {
-                $location.path($scope.backUrl);
-            } else {
-                $location.path('/');
-            }
-        };
-    }]);

=== removed file 'src/maasserver/static/js/angular/controllers/tests/test_error.js'
--- src/maasserver/static/js/angular/controllers/tests/test_error.js	2015-03-18 13:13:02 +0000
+++ src/maasserver/static/js/angular/controllers/tests/test_error.js	1970-01-01 00:00:00 +0000
@@ -1,83 +0,0 @@
-/* Copyright 2015 Canonical Ltd.  This software is licensed under the
- * GNU Affero General Public License version 3 (see the file LICENSE).
- *
- * Unit tests for ErrorController.
- */
-
-describe("ErrorController", function() {
-
-    // Load the MAAS module.
-    beforeEach(module("MAAS"));
-
-    // Grab the needed angular pieces.
-    var $controller, $rootScope, $location, $scope;
-    beforeEach(inject(function($injector) {
-        $controller = $injector.get("$controller");
-        $rootScope = $injector.get("$rootScope");
-        $location = $injector.get("$location");
-        $scope = $rootScope.$new();
-    }));
-
-    // Load the ErrorService.
-    var ErrorService;
-    beforeEach(inject(function($injector) {
-        ErrorService = $injector.get("ErrorService");
-    }));
-
-    // Makes the ErrorController
-    function makeController() {
-        return $controller("ErrorController", {
-            $scope: $scope,
-            $rootScope: $rootScope,
-            $location: $location,
-            ErrorService: ErrorService
-        });
-    }
-
-    it("sets $rootScope title and page", function() {
-        var controller = makeController();
-        expect($rootScope.title).toBe("Error");
-        expect($rootScope.page).toBe("");
-    });
-
-    it("sets error from ErrorService and clears error", function() {
-        var error = makeName("error");
-        ErrorService._error = error;
-        var controller = makeController();
-        expect($scope.error).toBe(error);
-        expect(ErrorService._error).toBeNull();
-    });
-
-    it("sets backUrl from ErrorService and clears backUrl", function() {
-        var backUrl = makeName("url");
-        ErrorService._backUrl = backUrl;
-        var controller = makeController();
-        expect($scope.backUrl).toBe(backUrl);
-        expect(ErrorService._backUrl).toBeNull();
-    });
-
-    it("calls $location.path if missing error", function() {
-        spyOn($location, "path");
-        var controller = makeController();
-        expect($location.path).toHaveBeenCalledWith("/");
-    });
-
-    describe("goBack", function() {
-
-        it("calls $location.path with backUrl when set", function() {
-            var controller = makeController();
-            $scope.backUrl = makeName("url");
-            spyOn($location, "path");
-            $scope.goBack();
-            expect($location.path).toHaveBeenCalledWith($scope.backUrl);
-        });
-
-        it("calls $location.path with index path if backUrl not set",
-            function() {
-                var controller = makeController();
-                spyOn($location, "path");
-                $scope.goBack();
-                expect($location.path).toHaveBeenCalledWith("/");
-            });
-    });
-});

=== added file 'src/maasserver/static/js/angular/directives/error_overlay.js'
--- src/maasserver/static/js/angular/directives/error_overlay.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/error_overlay.js	2015-04-24 19:35:27 +0000
@@ -0,0 +1,173 @@
+/* Copyright 2015 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Error overlay.
+ *
+ * Directive overrides the entire transcluded element if an error occurs or
+ * connection to the region over the websocket fails or becomes disconnected.
+ */
+
+angular.module('MAAS').run(['$templateCache', function ($templateCache) {
+    // Inject the error_overlay.html into the template cache.
+    $templateCache.put('directive/templates/error_overlay.html', [
+        '<header id="error-header" class="page-header" data-ng-show="show()">',
+            '<div class="inner-wrapper">',
+                '<h1 class="page-header__title eight-col">',
+                    '<span class="loader" data-ng-hide="clientError"></span> ',
+                    '{$ getTitle() $}',
+                '</h1>',
+                '<div class="page-header__actions four-col last-col">',
+                    '<div class="page-header__cta two-col no-margin-bottom ',
+                        'last-col">',
+                        '<button class="two-col cta-ubuntu"',
+                            'data-ng-click="reload()"',
+                            'data-ng-show="clientError">Reload</button>',
+                    '</div>',
+                '</div>',
+                '<div class="page-header__dropdown ng-hide" ',
+                    'data-ng-show="error">',
+                    '<div class="page-header__feedback">',
+                        '<p class="page-header__feedback-message info">',
+                            '{$ error $}',
+                        '</p>',
+                    '</div>',
+                '</div>',
+            '</div>',
+        '</header>',
+        '<div class="ng-hide" data-ng-hide="show()">',
+            '<div ng-transclude></div>',
+        '</div>'
+    ].join(''));
+
+    // Preload the svg and png error icon. Its possible that it has never been
+    // loaded by the browser and if the region connection goes down and the
+    // directive gets shown with an error the icon will be missing.
+    //
+    // Note: This is skipped if unit testing because it will throw 404 errors
+    // continuously.
+    if(!angular.isDefined(window.jasmine)) {
+        var image = new Image();
+        image.src = "static/img/icons/error.svg";
+        image = new Image();
+        image.src = "static/img/icons/error.png";
+    }
+}]);
+
+angular.module('MAAS').directive('maasErrorOverlay', [
+    '$window', '$timeout', 'RegionConnection', 'ErrorService',
+    function($window, $timeout, RegionConnection, ErrorService) {
+        return {
+            restrict: "A",
+            transclude: true,
+            scope: true,
+            templateUrl: 'directive/templates/error_overlay.html',
+            link: function(scope, element, attrs) {
+
+                scope.connected = false;
+                scope.showDisconnected = false;
+                scope.clientError = false;
+                scope.wasConnected = false;
+
+                // Holds the promise that sets showDisconnected to true. Will
+                // be cleared when the scope is destroyed.
+                var markDisconnected;
+
+                // Returns true when the overlay should be shown.
+                scope.show = function() {
+                    // Always show if clientError.
+                    if(scope.clientError) {
+                        return true;
+                    }
+                    // Never show if connected.
+                    if(scope.connected) {
+                        return false;
+                    }
+                    // Never been connected then always show.
+                    if(!scope.wasConnected) {
+                        return true;
+                    }
+                    // Not connected.
+                    return scope.showDisconnected;
+                };
+
+                // Returns the title for the header.
+                scope.getTitle = function() {
+                    if(scope.clientError) {
+                        return "Error occurred";
+                    } else if(scope.wasConnected) {
+                        return "Connection lost, reconnecting...";
+                    } else {
+                        return "Connecting...";
+                    }
+                };
+
+                // Called to reload the page.
+                scope.reload = function() {
+                    $window.location.reload();
+                };
+
+                // Called to when the connection status of the region
+                // changes. Updates the scope connected and error values.
+                var watchConnection = function() {
+                    // Do nothing if already a client error.
+                    if(scope.clientError) {
+                        return;
+                    }
+
+                    // Set connected and the time it changed.
+                    var connected = RegionConnection.isConnected();
+                    if(connected !== scope.connected) {
+                        scope.connected = connected;
+                        if(!connected) {
+                            scope.showDisconnected = false;
+
+                            // Show disconnected after 1/2 second. This removes
+                            // the flicker that can occur, if it disconnecets
+                            // and reconnected quickly.
+                            markDisconnected = $timeout(function() {
+                                scope.showDisconnected = true;
+                                markDisconnected = undefined;
+                            }, 500);
+                        }
+                    }
+
+                    // Set error and whether of not the connection
+                    // has ever been made.
+                    scope.error = RegionConnection.error;
+                    if(!scope.wasConnected && connected) {
+                        scope.wasConnected = true;
+                    }
+                };
+
+                // Watch the isConnected and error value on the
+                // RegionConnection.
+                scope.$watch(function() {
+                    return RegionConnection.isConnected();
+                }, watchConnection);
+                scope.$watch(function() {
+                    return RegionConnection.error;
+                }, watchConnection);
+
+                // Called then the error value on the ErrorService changes.
+                var watchError = function() {
+                    var error = ErrorService._error;
+                    if(angular.isString(error)) {
+                        scope.clientError = true;
+                        scope.error = ErrorService._error;
+                    }
+                };
+
+                // Watch _error on the ErrorService.
+                scope.$watch(function() {
+                    return ErrorService._error;
+                }, watchError);
+
+                // Cancel the timeout on scope destroy.
+                scope.$on("$destroy", function() {
+                    if(angular.isDefined(markDisconnected)) {
+                        $timeout.cancel(markDisconnected);
+                    }
+                });
+            }
+        };
+    }]);

=== added file 'src/maasserver/static/js/angular/directives/error_toggle.js'
--- src/maasserver/static/js/angular/directives/error_toggle.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/error_toggle.js	2015-04-24 19:35:27 +0000
@@ -0,0 +1,67 @@
+/* Copyright 2015 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Error toggle.
+ *
+ * Hides the element if an error occurs or no connection to the region
+ * is present.
+ */
+
+angular.module('MAAS').directive('maasErrorToggle', [
+    '$timeout', 'RegionConnection', 'ErrorService',
+    function($timeout, RegionConnection, ErrorService) {
+        return {
+            restrict: "A",
+            link: function(scope, element, attrs) {
+
+                // Holds timeout promise for setting ng-hide when
+                // connection is lost.
+                var disconnectedPromise;
+
+                // Cancel the disconnected timeout.
+                var cancelTimeout = function() {
+                    if(angular.isDefined(disconnectedPromise)) {
+                        $timeout.cancel(disconnectedPromise);
+                        disconnectedPromise = undefined;
+                    }
+                };
+
+                // Called to when the connection status of the region
+                // changes or the error on the ErrorService is set.
+                // The element is shown when connected and no errors.
+                var watchConnectionAndError = function() {
+                    var connected = RegionConnection.isConnected();
+                    var error = ErrorService._error;
+                    if(connected && !angular.isString(error)) {
+                        cancelTimeout();
+                        element.removeClass("ng-hide");
+                    } else if(angular.isString(error)) {
+                        cancelTimeout();
+                        element.addClass("ng-hide");
+                    } else if(!connected) {
+                        // Hide the element after 1/2 second. This stops
+                        // flickering when the connection goes down and
+                        // reconnects quickly.
+                        cancelTimeout();
+                        disconnectedPromise = $timeout(function() {
+                            element.addClass("ng-hide");
+                        }, 500);
+                    }
+                };
+
+                // Watch the RegionConnection.isConnected() and
+                // ErrorService._error value.
+                scope.$watch(function() {
+                    return RegionConnection.isConnected();
+                }, watchConnectionAndError);
+                scope.$watch(function() {
+                    return ErrorService._error;
+                }, watchConnectionAndError);
+
+                // Cancel disconnect timeout on destroy.
+                scope.$on("$destroy", function() {
+                    cancelTimeout();
+                });
+            }
+        };
+    }]);

=== added file 'src/maasserver/static/js/angular/directives/tests/test_error_overlay.js'
--- src/maasserver/static/js/angular/directives/tests/test_error_overlay.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_error_overlay.js	2015-04-24 19:35:27 +0000
@@ -0,0 +1,160 @@
+/* Copyright 2015 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for error overlay.
+ */
+
+describe("maasErrorOverlay", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Get required angular pieces and create a new scope before each test.
+    var $scope, $window, $timeout;
+    beforeEach(inject(function($rootScope, $injector) {
+        $scope = $rootScope.$new();
+        $window = $injector.get("$window");
+        $timeout = $injector.get("$timeout");
+    }));
+
+    // Load the RegionConnection and ErrorService.
+    var RegionConnection;
+    beforeEach(inject(function($injector) {
+        RegionConnection = $injector.get("RegionConnection");
+        ErrorService = $injector.get("ErrorService");
+    }));
+
+    // Return the compiled directive.
+    function compileDirective() {
+        var directive;
+        var html = '<div><div data-maas-error-overlay>' +
+            '<div id="content"></div>' +
+            '</div></div>';
+
+        // Compile the directive.
+        inject(function($compile) {
+            directive = $compile(html)($scope);
+        });
+
+        // Perform the digest cycle to finish the compile.
+        $scope.$digest();
+        return directive.find("span");
+    }
+
+    it("sets connected to value of isConnected", function() {
+        spyOn(RegionConnection, "isConnected").and.returnValue(true);
+        var directive = compileDirective();
+        expect(directive.scope().connected).toBe(true);
+    });
+
+    it("sets wasConnected to true once connected", function() {
+        spyOn(RegionConnection, "isConnected").and.returnValue(true);
+        var directive = compileDirective();
+        expect(directive.scope().wasConnected).toBe(true);
+    });
+
+    it("keeps wasConnected to true if becomes disconnected", function() {
+        var spy = spyOn(RegionConnection, "isConnected");
+        spy.and.returnValue(true);
+        var directive = compileDirective();
+        spy.and.returnValue(false);
+        $scope.$digest();
+        expect(directive.scope().wasConnected).toBe(true);
+    });
+
+    it("keeps clientError to true if error in ErrorService", function() {
+        ErrorService._error = makeName("error");
+        var directive = compileDirective();
+        expect(directive.scope().clientError).toBe(true);
+    });
+
+    it("sets error to error in ErrorService", function() {
+        var error = makeName("error");
+        ErrorService._error = error;
+        var directive = compileDirective();
+        expect(directive.scope().error).toBe(error);
+    });
+
+    it("sets error to error in RegionConnection", function() {
+        var error = makeName("error");
+        RegionConnection.error = error;
+        var directive = compileDirective();
+        expect(directive.scope().error).toBe(error);
+    });
+
+    it("doesnt sets error to error in RegionConnection if already error in " +
+        "ErrorService", function() {
+        var error = makeName("error");
+        ErrorService._error = error;
+        RegionConnection.error = makeName("error");
+        var directive = compileDirective();
+        expect(directive.scope().error).toBe(error);
+    });
+
+    describe("show", function() {
+
+        it("returns true if not connected", function() {
+            spyOn(RegionConnection, "isConnected").and.returnValue(false);
+            var directive = compileDirective();
+            expect(directive.scope().show()).toBe(true);
+        });
+
+        it("returns true if error in ErrorService", function() {
+            ErrorService._error = makeName("error");
+            var directive = compileDirective();
+            expect(directive.scope().show()).toBe(true);
+        });
+
+        it("returns false if connected and no error", function() {
+            spyOn(RegionConnection, "isConnected").and.returnValue(true);
+            var directive = compileDirective();
+            expect(directive.scope().show()).toBe(false);
+        });
+
+        it("returns false if disconnected less than 1/2 second", function() {
+            var spy = spyOn(RegionConnection, "isConnected");
+            spy.and.returnValue(true);
+            var directive = compileDirective();
+            spy.and.returnValue(false);
+            $scope.$digest();
+            expect(directive.scope().show()).toBe(false);
+        });
+
+        it("returns true if disconnected more than 1/2 second", function() {
+            var spy = spyOn(RegionConnection, "isConnected");
+            spy.and.returnValue(true);
+            var directive = compileDirective();
+            spy.and.returnValue(false);
+            $scope.$digest();
+            $timeout.flush(500);
+            expect(directive.scope().show()).toBe(true);
+        });
+    });
+
+    describe("getTitle", function() {
+
+        it("returns error title", function() {
+            ErrorService._error = makeName("error");
+            var directive = compileDirective();
+            expect(directive.scope().getTitle()).toBe(
+                "Error occurred");
+        });
+
+        it("returns connection lost error", function() {
+            var spy = spyOn(RegionConnection, "isConnected");
+            spy.and.returnValue(true);
+            var directive = compileDirective();
+            spy.and.returnValue(false);
+            $scope.$digest();
+            expect(directive.scope().getTitle()).toBe(
+                "Connection lost, reconnecting...");
+        });
+
+        it("returns connecting", function() {
+            spyOn(RegionConnection, "isConnected").and.returnValue(false);
+            var directive = compileDirective();
+            expect(directive.scope().getTitle()).toBe(
+                "Connecting...");
+        });
+    });
+});

=== added file 'src/maasserver/static/js/angular/directives/tests/test_error_toggle.js'
--- src/maasserver/static/js/angular/directives/tests/test_error_toggle.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_error_toggle.js	2015-04-24 19:35:27 +0000
@@ -0,0 +1,74 @@
+/* Copyright 2015 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for error toggle.
+ */
+
+describe("maasErrorToggle", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Get required angular pieces and create a new scope before each test.
+    var $scope, $timeout;
+    beforeEach(inject(function($rootScope, $injector) {
+        $scope = $rootScope.$new();
+        $timeout = $injector.get("$timeout");
+    }));
+
+    // Load the RegionConnection and ErrorService.
+    var RegionConnection;
+    beforeEach(inject(function($injector) {
+        RegionConnection = $injector.get("RegionConnection");
+        ErrorService = $injector.get("ErrorService");
+    }));
+
+    // Return the compiled directive.
+    function compileDirective() {
+        var directive;
+        var html = '<div><span data-maas-error-toggle></span></div>';
+
+        // Compile the directive.
+        inject(function($compile) {
+            directive = $compile(html)($scope);
+        });
+
+        // Perform the digest cycle to finish the compile.
+        $scope.$digest();
+        return directive.find("span");
+    }
+
+    it("doesnt hide element instantly if region not connected", function() {
+        spyOn(RegionConnection, "isConnected").and.returnValue(false);
+        var directive = compileDirective();
+        expect(directive.hasClass("ng-hide")).toBe(false);
+    });
+
+    it("hides element if region not connected after 1/2 second", function() {
+        spyOn(RegionConnection, "isConnected").and.returnValue(false);
+        var directive = compileDirective();
+        $timeout.flush(500);
+        expect(directive.hasClass("ng-hide")).toBe(true);
+    });
+
+    it("hides element if error in ErrorService", function() {
+        ErrorService._error = makeName("error");
+        var directive = compileDirective();
+        expect(directive.hasClass("ng-hide")).toBe(true);
+    });
+
+    it("shows element if connected and no error", function() {
+        spyOn(RegionConnection, "isConnected").and.returnValue(true);
+        var directive = compileDirective();
+        expect(directive.hasClass("ng-hide")).toBe(false);
+    });
+
+    it("shows element if becomes connected", function() {
+        var spy = spyOn(RegionConnection, "isConnected");
+        spy.and.returnValue(false);
+        var directive = compileDirective();
+        spy.and.returnValue(true);
+        $scope.$digest();
+        expect(directive.hasClass("ng-hide")).toBe(false);
+    });
+});

=== modified file 'src/maasserver/static/js/angular/factories/region.js'
--- src/maasserver/static/js/angular/factories/region.js	2015-03-30 07:41:18 +0000
+++ src/maasserver/static/js/angular/factories/region.js	2015-04-24 19:35:27 +0000
@@ -34,6 +34,7 @@
             this.connected = false;
             this.autoReconnect = true;
             this.retryTimeout = 5000;
+            this.error = null;
 
             // Defer used for defaultConnect. If defaultConnect is called
             // quickly only the first one will start the connection. The
@@ -135,6 +136,7 @@
             };
             this.websocket.onclose = function(evt) {
                 self.connected = false;
+                self.error = "Unable to connect to: " + self.url.split("?")[0];
                 angular.forEach(self.handlers.close, function(func) {
                     func(evt);
                 });

=== modified file 'src/maasserver/static/js/angular/factories/tests/test_region.js'
--- src/maasserver/static/js/angular/factories/tests/test_region.js	2015-03-27 09:14:17 +0000
+++ src/maasserver/static/js/angular/factories/tests/test_region.js	2015-04-24 19:35:27 +0000
@@ -266,6 +266,14 @@
             expect(RegionConnection.connect).toHaveBeenCalledWith(url);
         });
 
+        it("onclose sets error", function() {
+            RegionConnection.connect(url);
+            webSocket.onclose();
+            $timeout.flush();
+            expect(RegionConnection.error).toBe(
+                "Unable to connect to: " + url);
+        });
+
         it("calls onMessage when onmessage called", function() {
             var sampleData = { sample: "data" };
             spyOn(RegionConnection, "onMessage");

=== modified file 'src/maasserver/static/js/angular/maas.js'
--- src/maasserver/static/js/angular/maas.js	2015-03-30 16:05:41 +0000
+++ src/maasserver/static/js/angular/maas.js	2015-04-24 19:35:27 +0000
@@ -39,10 +39,6 @@
                     templateUrl: 'static/partials/node-events.html',
                     controller: 'NodeEventsController'
                 }).
-                when('/error', {
-                    templateUrl: 'static/partials/error.html',
-                    controller: 'ErrorController'
-                }).
                 otherwise({
                     redirectTo: '/nodes'
                 });

=== modified file 'src/maasserver/static/js/angular/services/error.js'
--- src/maasserver/static/js/angular/services/error.js	2015-03-17 17:57:17 +0000
+++ src/maasserver/static/js/angular/services/error.js	2015-04-24 19:35:27 +0000
@@ -4,22 +4,17 @@
  * MAAS Error Service
  */
 
-angular.module('MAAS').service('ErrorService', ['$location',
-    function($location) {
+angular.module('MAAS').service('ErrorService', function() {
 
-        // Holds the raised error and url when the error was raised.
+        // Holds the client error.
         this._error = null;
-        this._backUrl = null;
 
-        // Raise this error in the UI. Will cause the page to redirect to the
-        // error page.
+        // Raise this error in the UI.
         this.raiseError = function(error) {
-            // Possible that this method is called more than once, before the
-            // location is changed. Only take the first error.
+            // Possible that this method is called more than once.
+            // Only take the first error.
             if(!angular.isString(this._error)) {
                 this._error = error;
-                this._backUrl = $location.url();
             }
-            $location.path('/error');
         };
-    }]);
+    });

=== modified file 'src/maasserver/static/js/angular/services/tests/test_error.js'
--- src/maasserver/static/js/angular/services/tests/test_error.js	2015-03-17 17:57:17 +0000
+++ src/maasserver/static/js/angular/services/tests/test_error.js	2015-04-24 19:35:27 +0000
@@ -9,54 +9,32 @@
     // Load the MAAS module.
     beforeEach(module("MAAS"));
 
-    // Grab the needed angular pieces.
-    var $location;
-    beforeEach(inject(function($injector) {
-        $location = $injector.get("$location");
-    }));
-
     // Load the ErrorService.
     var ErrorService;
     beforeEach(inject(function($injector) {
         ErrorService = $injector.get("ErrorService");
     }));
 
-    it("initializes _error and _backUrl to null", function() {
+    it("initializes _error to null", function() {
         expect(ErrorService._error).toBeNull();
-        expect(ErrorService._backUrl).toBeNull();
     });
 
     describe("raiseError", function() {
 
-        it("sets _error and _backUrl and calls $location.path", function() {
+        it("sets _error", function() {
             var error = makeName("error");
-            var url = makeName("url");
-            spyOn($location, "url").and.returnValue(url);
-            spyOn($location, "path");
             ErrorService.raiseError(error);
             expect(ErrorService._error).toBe(error);
-            expect(ErrorService._backUrl).toBe(url);
-            expect($location.path).toHaveBeenCalledWith("/error");
         });
 
-        it("only sets _error and _backUrl once", function() {
+        it("only sets _error once", function() {
             var errors = [
                 makeName("error"),
                 makeName("error")
             ];
-            var urls = [
-                makeName("url"),
-                makeName("url")
-            ];
-            var i = 0;
-            spyOn($location, "url").and.callFake(function() {
-                return urls[i++];
-            });
-            spyOn($location, "path");
             ErrorService.raiseError(errors[0]);
             ErrorService.raiseError(errors[1]);
             expect(ErrorService._error).toBe(errors[0]);
-            expect(ErrorService._backUrl).toBe(urls[0]);
         });
     });
 });

=== modified file 'src/maasserver/templates/maasserver/index.html'
--- src/maasserver/templates/maasserver/index.html	2015-04-14 13:18:41 +0000
+++ src/maasserver/templates/maasserver/index.html	2015-04-24 19:35:27 +0000
@@ -81,7 +81,7 @@
             </div>
         </header>
         <main id="body">
-            <div id="main-content">
+            <div id="main-content" data-maas-error-overlay>
                 {% if user.is_authenticated %}
                 <ul id="flash-messages"  class="flash-messages hidden">
                     {% for persistent_error in persistent_errors %}
@@ -100,7 +100,7 @@
             <div class="push"></div>
         </main>
     </div>
-    <div class="footer-wrapper">
+    <div class="footer-wrapper" data-maas-error-toggle>
         <footer class="global inner-wrapper clearfix">
             <div class="legal clearfix">
                 <div class="legal-inner">