Updated directives to components, adding NotificationService, reworking sort

Author: benjaminapetersen

app/index.html

@@ -38,6 +38,9 @@
     <!-- Add your site or application content here -->
 
     <toast-notifications></toast-notifications>
+    <div class="navbar-pf-vertical">
+      <notification-drawer-wrapper></notification-drawer-wrapper>
+    </div>
     <div ng-view>
       <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
       <nav class="navbar navbar-pf-alt top-header" role="navigation">

app/scripts/constants.js

@@ -90,7 +90,8 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
     service_catalog_landing_page: false,
     // Set to `true` when the template service broker is enabled for the cluster in master-config.yaml
     template_service_broker: false,
-    pod_presets: false
+    pod_presets: false,
+    events_in_notification_drawer: false
   },
 
   SAMPLE_PIPELINE_TEMPLATE: {

app/scripts/directives/notifications/notificationCounter.js

@@ -2,40 +2,94 @@
 
 angular
   .module('openshiftConsole')
-  .directive('notificationCounter', function() {
-    return {
-      restrict: 'AE',
-      scope: {},
-      controller:
-        function($scope, $routeParams, $rootScope, notifications) {
-        $scope.count = 0;
-        $scope.countDisplay = $scope.count;
+  .component('notificationCounter', {
+    templateUrl: 'views/directives/notifications/notification-counter.html',
+    bindings: {},
+    controller: [
+      '$routeParams',
+      '$rootScope',
+      'Constants',
+      'DataService',
+      function($routeParams, $rootScope, Constants, DataService) {
+        var ENABLE_EVENTS = _.get(Constants, 'ENABLE_TECH_PREVIEW_FEATURE.events_in_notification_drawer');
+        var counter = this;
         var drawerHidden = true;
 
-        $scope.onClick = function() {
-          $scope.$applyAsync(function() {
-            $scope.count = 0;
+        var rootScopeWatches = [];
+        // this one is treated separately from the rootScopeWatches as
+        // it may need to be updated outside of the lifecycle of init/destroy
+        var notificationListener;
+
+        var eventsWatcher;
+
+        var deregisterEventsWatch = function() {
+          if(eventsWatcher) {
+            DataService.unwatch(eventsWatcher);
+          }
+        };
+
+        var watchEvents = function(projectName, cb) {
+          if(projectName && ENABLE_EVENTS) {
+            eventsWatcher = DataService.watch('events', {namespace: projectName}, _.debounce(cb, 50), { skipDigest: true });
+          }
+        };
+
+        var watchNotifications = function(projectName, cb) {
+          if(!projectName) {
+            return;
+          }
+          notificationListener = $rootScope.$on('NotificationsService.onNotificationAdded', cb);
+        };
+
+        var deregisterNotificationListener = function() {
+          notificationListener && notificationListener();
+        };
+
+        var deregisterRootScopeWatches = function() {
+          _.each(rootScopeWatches, function(deregister) {
+            deregister();
           });
+        };
+
+        var toggleVisibility = function(projectName) {
+          if(!projectName) {
+            counter.hideCounter = true;
+          }
+          counter.showNewNotificationIndicator = true;
+        };
+
+        counter.onClick = function() {
           drawerHidden = !drawerHidden;
+          counter.showNewNotificationIndicator = false;
           $rootScope.$emit('notification-drawer:show', {
             drawerHidden: drawerHidden
           });
         };
 
-        // TODO: just need to know if there is a "new" notification worth viewing,
-        // don't need to give the user a ping for every time the watch returns data
-        var subscription = notifications.subscribe($routeParams.project, function(groups) {
-          $scope.groups = groups;
-          $scope.count++;
-          $scope.countDisplay = $scope.count < 100 ?
-                                  $scope.count:
-                                  '! !'; // TODO: a "too many!" indicator
-        });
-
-        $scope.$on('$destroy', function() {
-          notifications.unsubscribe(subscription);
-        });
-      },
-      templateUrl: 'views/directives/notifications/notification-counter.html'
-    };
+        var genericEventCallback = function() {
+          counter.showNewNotificationIndicator = true;
+        };
+
+        var reset = function() {
+          deregisterEventsWatch();
+          deregisterNotificationListener();
+          watchEvents($routeParams.project, genericEventCallback);
+          watchNotifications($routeParams.project, genericEventCallback);
+          toggleVisibility($routeParams.project);
+        };
+
+        counter.$onInit = function() {
+          reset();
+          rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function () {
+            reset();
+          }));
+        };
+
+        counter.$onDestroy = function() {
+          deregisterEventsWatch();
+          deregisterNotificationListener();
+          deregisterRootScopeWatches();
+        };
+      }
+    ]
   });