Add track by to notification drawer

Author: benjaminapetersen

app/scripts/directives/notifications/notificationDrawerWrapper.js

@@ -49,7 +49,7 @@
       // var clientGeneratedNotifications = [];
 
       var eventsWatcher;
-      var eventsByNameData = {};
+      var eventsByUID = {};
       var eventsMap = {};
 
       // TODO:
@@ -154,11 +154,12 @@
       var formatAndFilterEvents = function(eventMap) {
         var filtered = {};
         ensureProjectGroupExists(filtered, $routeParams.project);
-        _.each(eventMap, function(event) {
+        _.each(eventMap, function(event, eventUID) {
           if(EventsService.isImportantEvent(event) && !EventsService.isCleared(event)) {
             ensureProjectGroupExists(filtered, event.metadata.namespace);
             filtered[event.metadata.namespace].notifications.push({
               unread:  !EventsService.isRead(event),
+              uid: eventUID,
               event: event,
               actions: null
             });
@@ -198,8 +199,8 @@
       // TODO: follow-on PR to decide which of these events to toast,
       // via config in constants.js
       var eventWatchCallback = function(eventData) {
-        eventsByNameData = eventData.by('metadata.name');
-        eventsMap = formatAndFilterEvents(eventsByNameData);
+        eventsByUID = eventData.by('metadata.uid');
+        eventsMap = formatAndFilterEvents(eventsByUID);
         // TODO: Update to an intermediate map, so that we can then combine both
         // events + notifications into the final notificationGroups output
         notificationGroups = sortNotificationGroups(eventsMap);

app/views/directives/notifications/notification-drawer-wrapper.html

@@ -1,14 +1,15 @@
 <pf-notification-drawer
-  drawer-hidden="$ctrl.drawerHidden"
   allow-expand="$ctrl.allowExpand"
+  custom-scope="$ctrl.customScope"
   drawer-expanded="$ctrl.drawerExpanded"
+  drawer-hidden="$ctrl.drawerHidden"
   drawer-title="{{$ctrl.drawerTitle}}"
-  show-clear-all="$ctrl.showClearAll"
-  show-mark-all-read="$ctrl.showMarkAllRead"
-  notification-groups="$ctrl.notificationGroups"
   heading-include="{{$ctrl.headingInclude}}"
   notification-body-include="{{$ctrl.notificationBodyInclude}}"
+  notification-groups="$ctrl.notificationGroups"
+  notification-track-field="uid"
   on-close="$ctrl.onClose"
-  on-mark-all-read="$ctrl.onMarkAllRead"
   on-clear-all="$ctrl.onClearAll"
-  custom-scope="$ctrl.customScope"></pf-notification-drawer>
+  on-mark-all-read="$ctrl.onMarkAllRead"
+  show-clear-all="$ctrl.showClearAll"
+  show-mark-all-read="$ctrl.showMarkAllRead"></pf-notification-drawer>

bower.json

@@ -13,7 +13,7 @@
     "angular-touch": "1.5.11",
     "angular-route": "1.5.11",
     "angular-bootstrap": "0.14.3",
-    "angular-patternfly": "4.5.6",
+    "angular-patternfly": "4.7.1",
     "angular-gettext": "2.3.9",
     "uri.js": "1.18.12",
     "moment": "2.14.2",

dist/scripts/scripts.js

@@ -13902,9 +13902,10 @@ e.notifications = T(e.notifications), e.counts = R(e);
 }), t;
 }, N = function(e) {
 var t = {};
-return S(t, r.project), _.each(e, function(e) {
+return S(t, r.project), _.each(e, function(e, n) {
 l.isImportantEvent(e) && !l.isCleared(e) && (S(t, e.metadata.namespace), t[e.metadata.namespace].notifications.push({
 unread: !l.isRead(e),
+uid: n,
 event: e,
 actions: null
 }));
@@ -13922,7 +13923,7 @@ return e.project.metadata.name === r.project;
 });
 });
 }, B = function(e) {
-h = e.by("metadata.name"), v = N(h), y = I(v), A();
+h = e.by("metadata.uid"), v = N(h), y = I(v), A();
 }, L = {
 Normal: "pficon pficon-info",
 Warning: "pficon pficon-warning-triangle-o"

dist/scripts/templates.js

@@ -7798,7 +7798,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/notifications/notification-drawer-wrapper.html',
-    "<pf-notification-drawer drawer-hidden=\"$ctrl.drawerHidden\" allow-expand=\"$ctrl.allowExpand\" drawer-expanded=\"$ctrl.drawerExpanded\" drawer-title=\"{{$ctrl.drawerTitle}}\" show-clear-all=\"$ctrl.showClearAll\" show-mark-all-read=\"$ctrl.showMarkAllRead\" notification-groups=\"$ctrl.notificationGroups\" heading-include=\"{{$ctrl.headingInclude}}\" notification-body-include=\"{{$ctrl.notificationBodyInclude}}\" on-close=\"$ctrl.onClose\" on-mark-all-read=\"$ctrl.onMarkAllRead\" on-clear-all=\"$ctrl.onClearAll\" custom-scope=\"$ctrl.customScope\"></pf-notification-drawer>"
+    "<pf-notification-drawer allow-expand=\"$ctrl.allowExpand\" custom-scope=\"$ctrl.customScope\" drawer-expanded=\"$ctrl.drawerExpanded\" drawer-hidden=\"$ctrl.drawerHidden\" drawer-title=\"{{$ctrl.drawerTitle}}\" heading-include=\"{{$ctrl.headingInclude}}\" notification-body-include=\"{{$ctrl.notificationBodyInclude}}\" notification-groups=\"$ctrl.notificationGroups\" notification-track-field=\"uid\" on-close=\"$ctrl.onClose\" on-clear-all=\"$ctrl.onClearAll\" on-mark-all-read=\"$ctrl.onMarkAllRead\" show-clear-all=\"$ctrl.showClearAll\" show-mark-all-read=\"$ctrl.showMarkAllRead\"></pf-notification-drawer>"
   );
 
 

dist/scripts/vendor.js

@@ -181,6 +181,15 @@ pf-filter-panel .toolbar-pf-results .single-label .pficon-close{padding-right:6p
 pf-filter-panel .toolbar-pf-results p{padding-right:10px;padding-left:10px}
 .pf-filter-label-category{background-color:#39a5dc;font-weight:700;padding:6px}
 .pf-filter-label-category .category-values{padding-left:4px}
+.filter-pf.inline-filter-pf{flex:1 1 100%;margin:15px 15px 7px 0}
+.filter-pf.inline-filter-pf pf-filter-fields,.filter-pf.inline-filter-pf pf-filter-results{display:inline-block}
+.filter-pf.inline-filter-pf .form-group{margin-bottom:0;margin-right:15px}
+.filter-pf.inline-filter-pf .toolbar-pf-results{border-top:none;margin:0}
+.filter-pf.inline-filter-pf .toolbar-pf-results .col-sm-12{float:left;padding:0}
+.filter-pf.inline-filter-pf .toolbar-pf-results h5,.filter-pf.inline-filter-pf .toolbar-pf-results p,.filter-pf.inline-filter-pf .toolbar-pf-results ul{line-height:1.43;padding-bottom:6px;padding-top:6px}
+.filter-pf.inline-filter-pf .toolbar-pf-results .list-inline{margin-bottom:-5px;padding-right:5px}
+.filter-pf.inline-filter-pf .toolbar-pf-results .list-inline>li{margin-bottom:5px}
+.filter-pf .toolbar-pf-results .list-inline{margin-left:0}
 .sort-pf .btn-link{color:#252525;font-size:16px;line-height:1;margin-left:10px;padding:4px 0}
 .sort-pf .btn-link:hover{color:#0088ce}
 .list-group-item-header.list-group-item-not-selectable{cursor:inherit}