Merge lp:~allenap/maas/notifications-web into lp:~maas-committers/maas/trunk

[Gavin Panella]

Rudimentary UI for notifications.

[Blake Rouse (blake-rouse)]

Most of the directive can be placed into a NotificationsManager that provides all the logic built-in.

review: Needs Fixing

[Gavin Panella (allenap)]

> Most of the directive can be placed into a NotificationsManager that
> provides all the logic built-in.

Ah, brilliant. I've done that. Can you have another quick look to make
sure I'm on the right track? Then I'll write some tests, and perhaps
make it prettier.

[Blake Rouse (blake-rouse)]

Close. The manager looks correct, but have another improvement to the directive that will make it even easier.

[Gavin Panella (allenap)]

I think I've got it now! I've also added tests. Please take another look.

[Blake Rouse (blake-rouse)]

Looks good. Are you sure that the <maas-notifications /> directive is showing on all angular pages? We can do some simple work to make it work on non-angular pages as well.

review: Approve

[Gavin Panella (allenap)]

> Are you sure that the <maas-notifications /> directive is showing on
> all angular pages? We can do some simple work to make it work on non-
> angular pages as well.

I've only put it on the dashboard and the node list page for now; I'll
put it everywhere in a follow-up. Is there a good place to get these
everywhere, both on AngularJS and non-AngularJS pages?

=== modified file 'Makefile'
--- Makefile	2017-01-26 15:57:00 +0000
+++ Makefile	2017-02-01 14:20:57 +0000
@@ -566,13 +566,13 @@
 
 services/database/@deps: bin/database
 
-services/rackd/@deps: bin/twistd.rack
+services/rackd/@deps: bin/twistd.rack bin/maas-rack
 
 services/reloader/@deps:
 
-services/regiond/@deps: bin/maas-region
+services/regiond/@deps: bin/maas-region bin/maas-rack
 
-services/regiond2/@deps: bin/maas-region
+services/regiond2/@deps: bin/maas-region bin/maas-rack
 
 #
 # Package building

=== added file 'src/maasserver/static/js/angular/directives/notifications.js'
--- src/maasserver/static/js/angular/directives/notifications.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/notifications.js	2017-02-01 14:20:57 +0000
@@ -0,0 +1,38 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Notifications.
+ */
+
+angular.module('MAAS').run(['$templateCache', function ($templateCache) {
+    // Inject notifications.html into the template cache.
+    $templateCache.put('directive/templates/notifications.html', [
+      '<div class="p-notification--error" ',
+          'ng-repeat="n in notifications">',
+        '<p class="p-notification__response">',
+          '<span class="p-notification__status"></span>',
+          '<span>{$ n.message $}</span> — ',
+          '<a ng-click="dismiss(n)">Dismiss</a>',
+          '<br><small>(id: {$ n.id $}, ',
+          'ident: {$ n.ident || "-" $}, user: {$ n.user || "-" $}, ',
+          'users: {$ n.users $}, admins: {$ n.admins $}, ',
+          'created: {$ n.created $}, updated: {$ n.updated $})</small>',
+        '</p>',
+      '</div>'
+    ].join(''));
+}]);
+
+angular.module('MAAS').directive('maasNotifications', [
+    "NotificationsManager", "ManagerHelperService",
+    function(NotificationsManager, ManagerHelperService) {
+        return {
+            restrict: "E",
+            templateUrl: 'directive/templates/notifications.html',
+            link: function($scope, element, attrs) {
+                ManagerHelperService.loadManager($scope, NotificationsManager);
+                $scope.notifications = NotificationsManager.getItems();
+                $scope.dismiss = angular.bind(
+                    NotificationsManager, NotificationsManager.dismiss);
+            }
+        };
+    }]);

=== added file 'src/maasserver/static/js/angular/directives/tests/test_notifications.js'
--- src/maasserver/static/js/angular/directives/tests/test_notifications.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_notifications.js	2017-02-01 14:20:57 +0000
@@ -0,0 +1,98 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for notifications directive.
+ */
+
+describe("maasNotifications", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Some example notifications as sent from the server.
+    var exampleNotifications = [
+        {
+            "id": 1,
+            "ident": null,
+            "message": "Attention admins!",
+            "user": null,
+            "users": false,
+            "admins": true,
+            "created": "Fri, 27 Jan. 2017 12:19:52",
+            "updated": "Fri, 27 Jan. 2017 12:19:52"
+        },
+        {
+            "id": 2,
+            "ident": null,
+            "message": "Dear users, ...",
+            "user": null,
+            "users": true,
+            "admins": false,
+            "created": "Fri, 27 Jan. 2017 12:19:52",
+            "updated": "Fri, 27 Jan. 2017 12:19:52"
+        },
+        {
+            "id": 3,
+            "ident": null,
+            "message": "Greetings, Individual!",
+            "user": 1,
+            "users": false,
+            "admins": false,
+            "created": "Fri, 27 Jan. 2017 12:19:52",
+            "updated": "Fri, 27 Jan. 2017 12:19:52"
+        }
+    ];
+
+    // Load the NotificationsManager and
+    // create a new scope before each test.
+    var theNotificationsManager;
+    var $scope;
+
+    beforeEach(inject(function($rootScope, NotificationsManager) {
+        theNotificationsManager = NotificationsManager;
+        $scope = $rootScope.$new();
+    }));
+
+    describe("maas-notifications", function() {
+
+        // Return the compiled directive.
+        function compileDirective() {
+            var directive;
+            var html = '<maas-notifications />';
+
+            // Compile the directive.
+            inject(function($compile) {
+                directive = $compile(html)($scope);
+            });
+
+            // Perform the digest cycle to finish the compile.
+            $scope.$digest();
+            return directive;
+        }
+
+        it("renders notifications", function() {
+            theNotificationsManager._items = exampleNotifications;
+            var directive = compileDirective();
+            // The directive renders an outer div for each notification.
+            expect(directive.find("div").length).toBe(
+                exampleNotifications.length, directive.html());
+            // Messages are rendered in the nested tree.
+            var messages = directive.find(
+                "div > p > span:nth-child(2)").map(
+                    function() { return $(this).text(); }).get();
+            expect(messages).toEqual(exampleNotifications.map(
+                function(notification) { return notification.message; }));
+        });
+
+        it("dismisses when dismiss link is clicked", function() {
+            var notification = exampleNotifications[0];
+            theNotificationsManager._items = [notification];
+            var dismiss = spyOn(theNotificationsManager, "dismiss");
+            var directive = compileDirective();
+            directive.find("div > p > a").click();
+            expect(dismiss).toHaveBeenCalledWith(notification);
+        });
+
+    });
+
+});

=== added file 'src/maasserver/static/js/angular/factories/notifications.js'
--- src/maasserver/static/js/angular/factories/notifications.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/factories/notifications.js	2017-02-01 14:20:57 +0000
@@ -0,0 +1,34 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * MAAS Notifications Manager.
+ *
+ * Manages notifications in the browser. Uses RegionConnection to load
+ * notifications, await new, updated, and deleted notifications, and to
+ * dismiss them.
+ */
+
+angular.module('MAAS').factory(
+    'NotificationsManager',
+    ['$q', '$rootScope', 'RegionConnection', 'Manager',
+     function($q, $rootScope, RegionConnection, Manager) {
+
+        function NotificationsManager() {
+            Manager.call(this);
+
+            this._pk = "id";
+            this._handler = "notification";
+
+            // Listen for notify events for the notification object.
+            RegionConnection.registerNotifier(
+                "notification", angular.bind(this, this.onNotify));
+        }
+
+        NotificationsManager.prototype = new Manager();
+        NotificationsManager.prototype.dismiss = function(notification) {
+            return RegionConnection.callMethod(
+                "notification.dismiss", {id: notification.id});
+        };
+
+        return new NotificationsManager();
+    }]);

=== added file 'src/maasserver/static/js/angular/factories/tests/test_notifications.js'
--- src/maasserver/static/js/angular/factories/tests/test_notifications.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/angular/factories/tests/test_notifications.js	2017-02-01 14:20:57 +0000
@@ -0,0 +1,47 @@
+/* Copyright 2017 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Unit tests for NotificationsManager.
+ */
+
+describe("NotificationsManager", function() {
+
+    // Load the MAAS module.
+    beforeEach(module("MAAS"));
+
+    // Load the NotificationsManager and RegionConnection.
+    var NotificationsManager;
+    var RegionConnection;
+    beforeEach(inject(function($injector) {
+        RegionConnection = $injector.get("RegionConnection");
+        spyOn(RegionConnection, "registerNotifier");
+        NotificationsManager = $injector.get("NotificationsManager");
+    }));
+
+    // Make a random notification.
+    function makeNotification(id, selected) {
+        var notification = {
+            name: makeName("name"),
+            authoritative: true
+        };
+        if(angular.isDefined(id)) {
+            notification.id = id;
+        } else {
+            notification.id = makeInteger(1, 100);
+        }
+        if(angular.isDefined(selected)) {
+            notification.$selected = selected;
+        }
+        return notification;
+    }
+
+    it("set requires attributes", function() {
+        expect(NotificationsManager._pk).toBe("id");
+        expect(NotificationsManager._handler).toBe("notification");
+    });
+
+    it("listens for updates", function() {
+        expect(RegionConnection.registerNotifier).toHaveBeenCalled();
+    });
+
+});

=== modified file 'src/maasserver/static/partials/dashboard.html'
--- src/maasserver/static/partials/dashboard.html	2017-01-27 11:51:54 +0000
+++ src/maasserver/static/partials/dashboard.html	2017-02-01 14:20:57 +0000
@@ -32,6 +32,9 @@
       </div>
     </section>
 </div>
+
+<maas-notifications />
+
 <div class="ng-hide" data-ng-show="loaded">
     <header class="page-header" sticky media-query="min-width: 769px">
         <div class="wrapper--inner">

=== modified file 'src/maasserver/static/partials/nodes-list.html'
--- src/maasserver/static/partials/nodes-list.html	2017-01-27 14:51:29 +0000
+++ src/maasserver/static/partials/nodes-list.html	2017-02-01 14:20:57 +0000
@@ -1,3 +1,5 @@
+<maas-notifications />
+
 <header class="page-header" sticky media-query="min-width: 769px">
     <div class="wrapper--inner">
         <!-- XXX ricgard 2016-06-16 - Need to add e2e test. -->

=== modified file 'src/maasserver/testing/sampledata.py'
--- src/maasserver/testing/sampledata.py	2017-01-10 04:08:06 +0000
+++ src/maasserver/testing/sampledata.py	2017-02-01 14:20:57 +0000
@@ -23,6 +23,7 @@
     Fabric,
     Node,
     RackController,
+    User,
     VersionedTextFile,
 )
 from maasserver.storage_layouts import STORAGE_LAYOUTS
@@ -519,3 +520,17 @@
             filename "test-boot";
             server-name "boot.from.me";
         """)), node=device)
+
+    # Add notifications for admins, users, and each individual user.
+    factory.make_Notification(
+        "Attention admins! Core critical! Meltdown imminent! Evacuate "
+        "habitat immediately!", admins=True)
+    factory.make_Notification(
+        "Dear users, rumours of a core meltdown are unfounded. Please "
+        "return to your home-pods and places of business.", users=True)
+    for user in User.objects.all():
+        context = {"name": user.username.capitalize()}
+        factory.make_Notification(
+            "Greetings, {name}! Get away from the habitat for the weekend and "
+            "visit the Mare Nubium with MAAS Tours. Use the code METAL to "
+            "claim a special gift!", user=user, context=context)

=== modified file 'src/maasserver/views/combo.py'
--- src/maasserver/views/combo.py	2016-12-14 11:07:08 +0000
+++ src/maasserver/views/combo.py	2017-02-01 14:20:57 +0000
@@ -81,6 +81,7 @@
             "js/angular/factories/spaces.js",
             "js/angular/factories/vlans.js",
             "js/angular/factories/fabrics.js",
+            "js/angular/factories/notifications.js",
             "js/angular/services/search.js",
             "js/angular/services/manager.js",
             "js/angular/services/managerhelper.js",
@@ -111,6 +112,7 @@
             "js/angular/directives/placeholder.js",
             "js/angular/directives/version_reloader.js",
             "js/angular/directives/ipranges.js",
+            "js/angular/directives/notifications.js",
             "js/angular/filters/nodes.js",
             "js/angular/filters/by_fabric.js",
             "js/angular/filters/by_vlan.js",