Merge lp:~allenap/maas/notifications-warn-info-ui into lp:~maas-committers/maas/trunk

[Gavin Panella]

Display UI notifications with styling according to its category (i.e. info, success, warning, error).

[Blake Rouse (blake-rouse)]

Looks good.

review: Approve

[MAAS Lander (maas-lander)]

The attempt to merge lp:~allenap/maas/notifications-warn-info-ui into lp:maas failed. Below is the output from the failed tests.

Get:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [102 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 [102 kB]
Get:4 http://prodstack-zone-2.clouds.archive.ubuntu.com/ubuntu xenial-backports InRelease [102 kB]
Fetched 306 kB in 0s (642 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 libnss-wrapper 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...
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).
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 version (0.7.18-1).
python-netifaces is already the newest version (0.10.4-0.1build2).
pyt...

=== modified file 'Makefile'
--- Makefile	2017-02-02 14:23:26 +0000
+++ Makefile	2017-02-03 17:20:17 +0000
@@ -29,10 +29,8 @@
 # MAAS SASS stylesheets. The first input file (maas-styles.css) imports
 # the others, so is treated specially in the target definitions.
 scss_theme := include/nodejs/node_modules/cloud-vanilla-theme
-scss_inputs := \
-    src/maasserver/static/scss/build.scss \
-    $(wildcard src/maasserver/static/scss/*/*.scss) \
-    $(wildcard src/maasserver/static/scss/*/*/*.scss)
+scss_input := src/maasserver/static/scss/build.scss
+scss_deps := $(wildcard src/maasserver/static/scss/_*.scss)
 scss_output := src/maasserver/static/css/build.css
 
 # Prefix commands with this when they need access to the database.
@@ -390,9 +388,9 @@
 
 styles: clean-styles $(scss_output)
 
-$(scss_output): bin/sass $(scss_theme) $(scss_inputs)
+$(scss_output): bin/sass $(scss_theme) $(scss_input) $(scss_deps)
 	bin/sass --include-path=src/maasserver/static/scss \
-	    --output-style compressed $(scss_inputs) -o $(dir $@)
+	    --output-style compressed $(scss_input) -o $(dir $@)
 
 $(scss_theme): prefix = include/nodejs
 $(scss_theme):

=== modified file 'src/maasserver/static/js/angular/directives/notifications.js'
--- src/maasserver/static/js/angular/directives/notifications.js	2017-02-01 14:11:26 +0000
+++ src/maasserver/static/js/angular/directives/notifications.js	2017-02-03 17:20:17 +0000
@@ -7,8 +7,7 @@
 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">',
+      '<div ng-repeat="n in notifications" ng-class="classes[n.category]">',
         '<p class="p-notification__response">',
           '<span class="p-notification__status"></span>',
           '<span>{$ n.message $}</span> — ',
@@ -33,6 +32,12 @@
                 $scope.notifications = NotificationsManager.getItems();
                 $scope.dismiss = angular.bind(
                     NotificationsManager, NotificationsManager.dismiss);
+                $scope.classes = {
+                    "error": "p-notification--error",
+                    "warning": "p-notification--warning",
+                    "success": "p-notification--success",
+                    "info": "p-notification"  // No suffix.
+                };
             }
         };
     }]);

=== modified file 'src/maasserver/static/js/angular/directives/tests/test_notifications.js'
--- src/maasserver/static/js/angular/directives/tests/test_notifications.js	2017-02-01 14:18:36 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_notifications.js	2017-02-03 17:20:17 +0000
@@ -15,6 +15,7 @@
             "id": 1,
             "ident": null,
             "message": "Attention admins!",
+            "category": "error",
             "user": null,
             "users": false,
             "admins": true,
@@ -25,6 +26,7 @@
             "id": 2,
             "ident": null,
             "message": "Dear users, ...",
+            "category": "warning",
             "user": null,
             "users": true,
             "admins": false,
@@ -35,6 +37,7 @@
             "id": 3,
             "ident": null,
             "message": "Greetings, Individual!",
+            "category": "info",
             "user": 1,
             "users": false,
             "admins": false,
@@ -58,7 +61,7 @@
         // Return the compiled directive.
         function compileDirective() {
             var directive;
-            var html = '<maas-notifications />';
+            var html = '<maas-notifications></maas-notifications>';
 
             // Compile the directive.
             inject(function($compile) {
@@ -93,6 +96,25 @@
             expect(dismiss).toHaveBeenCalledWith(notification);
         });
 
+        it("adjusts class according to category", function() {
+            theNotificationsManager._items = exampleNotifications;
+            var directive = compileDirective();
+            var classes = directive.find("div").map(
+                function() { return $(this).attr("class"); }).get();
+            expect(classes.length).toBe(3);
+            var p_classes = [];
+            angular.forEach(classes, function(cls) {
+                // Find classes that begin with 'p-'.
+                var matches = cls.match(/\bp-.+\b/);
+                p_classes = p_classes.concat(matches);
+            });
+            expect(p_classes).toEqual([
+                "p-notification--error",
+                "p-notification--warning",
+                "p-notification"
+            ]);
+        });
+
     });
 
 });

=== modified file 'src/maasserver/testing/factory.py'
--- src/maasserver/testing/factory.py	2017-01-26 18:51:52 +0000
+++ src/maasserver/testing/factory.py	2017-02-03 17:20:17 +0000
@@ -2048,7 +2048,7 @@
 
     def make_Notification(
             self, message=None, *, ident=None, user=None, users=False,
-            admins=False, context=None):
+            admins=False, context=None, category=None):
 
         if context is None:
             context_name = self.make_name("name")
@@ -2062,9 +2062,13 @@
                 context_name = random.choice(context_names)
                 message = self.make_name("message-{%s}" % context_name)
 
+        if category is None:
+            category = random.choice((
+                "error", "warning", "success", "info"))
+
         notification = Notification(
             ident=ident, user=user, users=users, admins=admins,
-            message=message, context=context)
+            message=message, context=context, category=category)
         notification.save()
 
         return notification

=== modified file 'src/maasserver/testing/sampledata.py'
--- src/maasserver/testing/sampledata.py	2017-01-27 13:26:00 +0000
+++ src/maasserver/testing/sampledata.py	2017-02-03 17:20:17 +0000
@@ -521,16 +521,22 @@
             server-name "boot.from.me";
         """)), node=device)
 
-    # Add notifications for admins, users, and each individual user.
+    # Add notifications for admins, users, and each individual user, and for
+    # each notification category.
     factory.make_Notification(
         "Attention admins! Core critical! Meltdown imminent! Evacuate "
-        "habitat immediately!", admins=True)
+        "habitat immediately!", admins=True, category="error")
     factory.make_Notification(
         "Dear users, rumours of a core meltdown are unfounded. Please "
-        "return to your home-pods and places of business.", users=True)
+        "return to your home-pods and places of business.", users=True,
+        category="warning")
+    factory.make_Notification(
+        "FREE! For the next 2 hours get FREE blueberry and iodine pellets "
+        "at the nutri-dispensers.", users=True, category="success")
     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)
+            "claim a special gift!", user=user, context=context,
+            category="info")